/* ==========================================================================
   Espace voyageur — habillage « 2a »

   Variante 2a de l'espace voyageur (« Espace latéral + progression jouée »),
   avec sa palette et ses proportions.

   PORTÉE : uniquement l'habillage. Aucune règle ici ne change ce que l'espace
   voyageur SAIT FAIRE — dépôt de documents, téléchargement de facture,
   progression, paiements : tout reste en place, seule l'apparence change.

   Cette feuille s'ajoute APRÈS styles.css et Bootstrap 3, et se cantonne aux
   sélecteurs .rk-e2a* ou à l'intérieur de .rk-e2a : le reste du site public
   n'est pas touché.
   ========================================================================== */

.rk-e2a {
	--e2a-fond:        #E8E5E0;
	--e2a-carte:       #FFFFFF;
	--e2a-encre:       #1C1A18;
	--e2a-texte:       #4A453F;
	--e2a-gris:        #6B655E;
	--e2a-gris-clair:  #9A938B;
	--e2a-filet:       #D7D1C9;
	--e2a-filet-2:     #E3DED7;
	--e2a-voile:       #EFEBE5;
	--e2a-voile-2:     #F5F3F0;
	--e2a-rouge:       #B01D23;
	--e2a-rouge-texte: #c20000;
	--e2a-rouge-fonce: #7E1419;
	--e2a-rouge-voile: #FBEDEE;
	--e2a-vert:        #2F7D4F;
	--e2a-vert-clair:  #57B27D; /* 18/09/2026 : le MÊME vert (teinte 145°) éclairci pour le fond sombre du bandeau — #2F7D4F n'y donne que 2,91 de contraste, celui-ci 5,63 */
	--e2a-vert-voile:  #EAF3EC;
	--e2a-ambre:       #B5761E;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #666666;
	-webkit-font-smoothing: antialiased;
}

/* La coque : colonne latérale + colonne principale, sur fond sable. */
.rk-e2a-coque {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--e2a-fond);
	border: 1px solid var(--e2a-filet);
	border-radius: 4px;
	overflow: hidden;
	margin: 22px 0 40px;
}
@media (min-width: 992px) {
	.rk-e2a-coque { grid-template-columns: 268px 1fr; }
}

/* ------------------------------------------------------------ colonne latérale */

.rk-e2a-lat {
	background: var(--e2a-carte);
	border-bottom: 1px solid var(--e2a-filet);
	padding: 22px 0 18px;
	/* pile verticale : c'est elle qui permet d'ancrer le contact en pied (voir plus bas) */
	display: flex;
	flex-direction: column;
}
@media (min-width: 992px) {
	.rk-e2a-lat { border-bottom: 0; border-right: 1px solid var(--e2a-filet); }
}

.rk-e2a-qui { padding: 6px 20px 18px; } /* le logo lateral a disparu (doublon) : la colonne s'ouvre sur l'identite, avec de l'air */
.rk-e2a-role {
	font-size: 11px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: var(--e2a-gris); margin-bottom: 5px;
}
.rk-e2a-nom { font-size: 15px; font-weight: 600; color: var(--e2a-encre); }
.rk-e2a-mail { font-size: 13px; color: var(--e2a-gris); word-break: break-word; }

.rk-e2a-menu { list-style: none; margin: 0; padding: 0; }
.rk-e2a-menu li { margin: 0; }
.rk-e2a-menu a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 20px;
	font-size: 15px;
	color: var(--e2a-texte);
	border-left: 3px solid transparent;
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease;
}
.rk-e2a-menu a:hover,
.rk-e2a-menu a:focus { background: var(--e2a-voile-2); color: var(--e2a-encre); text-decoration: none; }
.rk-e2a-menu .actif a {
	background: var(--e2a-rouge-voile);
	border-left-color: var(--e2a-rouge);
	color: var(--e2a-rouge-texte);
	font-weight: 600;
}

/* Pastille de compteur, comme dans la conception graphique. */
.rk-e2a-pastille {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 10px;
	background: var(--e2a-encre); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1;
}

/* Encadré du dossier courant. */
.rk-e2a-dossier {
	margin: 18px 20px 0;
	padding: 12px 14px;
	background: var(--e2a-voile);
	border: 1px solid var(--e2a-filet-2);
	border-radius: 4px;
}
.rk-e2a-dossier-titre { font-size: 14px; font-weight: 600; line-height: 1.3; }
.rk-e2a-dossier-meta { font-size: 12px; color: var(--e2a-gris); margin-top: 3px; }

/* ------------------------------------------------------------ colonne principale */

.rk-e2a-principal { padding: 22px; min-width: 0; }
/* Densité (16/09/2026) : le contenu paraissait tassé. Le conteneur Bootstrap est
   élargi par le style borné qu'imprime rk_e2a_navigation ; ici on donne de l'air
   aux marges intérieures. Ajustement mesuré, pas une refonte. */
@media (min-width: 992px) { .rk-e2a-principal { padding: 30px 34px 38px; } }

.rk-e2a-surtitre {
	font-size: 11px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: var(--e2a-gris); margin-bottom: 14px;
}

/* Le bandeau sombre : photo à gauche, identité du voyage à droite. */
.rk-e2a-bandeau {
	display: grid; grid-template-columns: 1fr; gap: 0;
	background: #2B2825; color: #fff;
	border-radius: 4px; overflow: hidden; margin-bottom: 20px;
}
@media (min-width: 768px) { .rk-e2a-bandeau { grid-template-columns: 232px 1fr; } }
.rk-e2a-bandeau-photo { background: #3A3631; min-height: 150px; }
.rk-e2a-bandeau-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-e2a-bandeau-vide {
	display: flex; align-items: center; justify-content: center;
	color: #8D857B; font-size: 13px; height: 100%; min-height: 150px;
}
.rk-e2a-bandeau-corps { padding: 20px 22px 22px; }
.rk-e2a-bandeau-sur {
	font-size: 11px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: #B9B1A6; margin-bottom: 8px;
}
.rk-e2a-bandeau-titre {
	font-family: RakaFont, verdana, arial, sans-serif;
	font-size: 27px; line-height: 1.15; margin: 0 0 8px; color: #fff; font-weight: 400;
}
.rk-e2a-bandeau-dates { font-size: 14px; color: #CFC7BC; margin-bottom: 14px; }
.rk-e2a-rebours { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rk-e2a-rebours-nb { font-size: 38px; line-height: 1; font-weight: 700; }
.rk-e2a-rebours-mot { font-size: 13px; color: #CFC7BC; }
.rk-e2a-bandeau-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ──────────────────────────────────────────────────────────────────────────
   TAMPON « Dossier complet » (18/09/2026)

   Même facture que les tampons des cartes de voyage de styles.css — contour,
   capitales, inclinaison de −4° — mais en vert, et posé dans le bandeau sombre
   de Mon voyage. Il n'apparaît QUE si les sept jalons sont franchis (voir la
   condition dans page-dashboard.php) : sans lui, rien de ce qui suit ne sort.

   ⚠ .rk-e2a-bandeau porte overflow:hidden. Un bloc tourné a une boîte
   englobante plus haute que lui : à 34 px de haut et 4°, les coins dépassent
   d'environ 7 px de chaque côté. D'où top:20px et right:22px, jamais 0.

   Mobile (< 768px) : le tampon reste dans le flux et descend sous le texte,
   comme demandé, plutôt que de recouvrir la carte.
   ────────────────────────────────────────────────────────────────────────── */
.rk-e2a-bandeau-corps { position: relative; }
.rk-e2a-tampon-complet {
	display: inline-block;
	margin-top: 16px;
	padding: 6px 14px;
	border: 3px solid var(--e2a-vert-clair);
	border-radius: 4px;
	color: var(--e2a-vert-clair);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	transform: rotate(-4deg);
}
/* 1200px, et surtout PAS 768 ni 992 : à 992 la colonne latérale de l'espace apparaît
   et le bandeau perd d'un coup 290 px (mesuré : 897 → 606). Y réserver 280 px ne
   laisserait que 110 px au titre, qui partirait en SIX lignes et doublerait la
   hauteur du bandeau. Sous 1200 px, le tampon reste donc dans le flux et descend
   sous le texte, comme en mobile. Mesures à l'appui, largeur disponible pour le
   titre : 110 px à 992, 180 à 1100, 280 à 1200, 360 à 1280. */
@media (min-width: 1200px) {
	.rk-e2a-tampon-complet { position: absolute; top: 20px; right: 22px; margin-top: 0; }
	/* la réserve n'est posée QUE sur les bandeaux qui portent un tampon : ailleurs
	   le corps garde exactement la largeur qu'il avait sans tampon.
	   280 px = le plus large des trois libellés (« EXPEDIENTE COMPLETO », 246 px)
	   plus l'écart au titre. Mesuré : à 250 px il n'en restait que 7. */
	.rk-e2a-bandeau-corps.avec-tampon { padding-right: 280px; }
}

/* Cartes. */
.rk-e2a-grille { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1200px) { .rk-e2a-grille { grid-template-columns: 2fr 1fr; align-items: start; } }

.rk-e2a-carte {
	background: var(--e2a-carte);
	border: 1px solid var(--e2a-filet);
	border-radius: 4px;
	margin-bottom: 18px;
}
.rk-e2a-carte-tete {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 14px 18px; border-bottom: 1px solid var(--e2a-filet-2);
}
.rk-e2a-carte-titre { font-size: 17px; font-weight: 600; margin: 0; }
.rk-e2a-carte-compte { font-size: 13px; color: var(--e2a-gris); white-space: nowrap; }
.rk-e2a-carte-corps { padding: 16px 18px; }

/* Liste de tâches à cocher. */
.rk-e2a-tache { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--e2a-voile); }
.rk-e2a-tache:last-child { border-bottom: 0; }
.rk-e2a-case {
	flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
	border: 2px solid var(--e2a-filet); border-radius: 3px; background: #fff;
}
.rk-e2a-tache.faite .rk-e2a-case { border-color: var(--e2a-vert); background: var(--e2a-vert); }
.rk-e2a-tache-corps { min-width: 0; }
.rk-e2a-tache-titre { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.rk-e2a-tache-titre small { font-weight: 400; color: var(--e2a-gris); }
.rk-e2a-tache-aide { font-size: 13px; color: var(--e2a-texte); line-height: 1.5; margin-bottom: 8px; }

/* Barre de progression des documents. */
.rk-e2a-jauge { height: 5px; background: var(--e2a-voile); border-radius: 3px; overflow: hidden; margin: 8px 0 10px; }
.rk-e2a-jauge span { display: block; height: 100%; background: var(--e2a-rouge); }

/* LIGNES DÉPLIABLES du tableau de bord (17/09/2026) : « À faire » et « Déjà fait »
   sont des <details> natifs, sans JavaScript, à en-tête de MÊME HAUTEUR (58 px) ; la
   ligne vide « Rien ne vous attend pour l'instant » reprend le même en-tête sans chevron. */
.rk-e2a-pli {
	background: var(--e2a-carte); border: 1px solid var(--e2a-filet); border-radius: 4px; margin-bottom: 18px;
}
.rk-e2a-pli-tete {
	display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 18px;
	cursor: pointer; list-style: none;
}
.rk-e2a-pli-tete::-webkit-details-marker { display: none; }
.rk-e2a-pli-tete .rk-e2a-carte-titre { flex: 1 1 auto; min-width: 0; }
.rk-e2a-pli-chevron {
	flex: 0 0 auto; width: 9px; height: 9px; margin-right: 2px;
	border-right: 2px solid var(--e2a-gris); border-bottom: 2px solid var(--e2a-gris);
	transform: rotate(-45deg); transition: transform .15s;
}
details.rk-e2a-pli[open] > .rk-e2a-pli-tete { border-bottom: 1px solid var(--e2a-filet-2); }
details.rk-e2a-pli[open] > .rk-e2a-pli-tete .rk-e2a-pli-chevron { transform: rotate(45deg); }
.rk-e2a-pli-tete:focus-visible { outline: 2px solid var(--e2a-rouge); outline-offset: -2px; }
.rk-e2a-pli-vide .rk-e2a-pli-tete { cursor: default; }
.rk-e2a-pli-vide .rk-e2a-pli-chevron { visibility: hidden; }
.rk-e2a-pli .rk-e2a-fait { border-top: 0; border-bottom: 1px solid var(--e2a-filet-2); }

/* Bande « Déjà fait » : pastilles vertes. */
.rk-e2a-fait { padding: 14px 18px; background: var(--e2a-voile-2); border-top: 1px solid var(--e2a-filet-2); }
.rk-e2a-fait-titre {
	font-size: 11px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: var(--e2a-gris); margin-bottom: 9px;
}
.rk-e2a-jetons { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-e2a-jeton {
	display: inline-block; padding: 5px 11px;
	background: var(--e2a-vert-voile); border: 1px solid #CFE3D5; border-radius: 3px;
	font-size: 13px; color: #24603C;
}
.rk-e2a-jeton.attente { background: #FDF4E6; border-color: #EBD9BC; color: var(--e2a-ambre); }

/* Récapitulatif de paiement. */
.rk-e2a-ligne {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 7px 0; font-size: 14px; color: var(--e2a-texte);
}
.rk-e2a-ligne.total {
	border-top: 1px solid var(--e2a-filet-2); margin-top: 6px; padding-top: 12px;
	font-size: 16px; color: var(--e2a-encre);
}
.rk-e2a-ligne.total strong { font-size: 20px; }

/* Boutons. */
.rk-e2a-bouton,
.rk-e2a .rk-e2a-bouton {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 16px; border: 1px solid var(--e2a-rouge); border-radius: 3px;
	background: var(--e2a-rouge); color: #fff;
	font-size: 14px; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer;
}
.rk-e2a-bouton:hover, .rk-e2a-bouton:focus {
	background: var(--e2a-rouge-fonce); border-color: var(--e2a-rouge-fonce);
	color: #fff; text-decoration: none;
}
.rk-e2a-bouton.creux { background: #fff; color: var(--e2a-encre); border-color: var(--e2a-filet); }
.rk-e2a-bouton.creux:hover { background: var(--e2a-voile-2); color: var(--e2a-encre); border-color: var(--e2a-gris-clair); }
.rk-e2a-bouton.sombre { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.rk-e2a-bouton.sombre:hover { background: rgba(255,255,255,.22); color: #fff; }
.rk-e2a-bouton.mini { padding: 6px 12px; font-size: 13px; }
/* Le bouton éteint, même motif que le bouton Wise du back-office : un
   <span> non cliquable, la raison dans l'attribut title. */
.rk-e2a-bouton.disabled, .rk-e2a-bouton.disabled:hover { background: var(--e2a-gris-clair, #b5aea6); border-color: var(--e2a-gris-clair, #b5aea6); color: #fff; cursor: not-allowed; opacity: .75; }

/* Le contenu hérité des sections Documents / Profil / Droits vit dans cette carte :
   on n'y touche pas, on l'enveloppe. Quelques accords visuels suffisent. */
.rk-e2a-herite { padding: 18px; background: var(--e2a-carte); border: 1px solid var(--e2a-filet); border-radius: 4px; }
.rk-e2a-herite h1, .rk-e2a-herite h2 { font-family: RakaFont, verdana, arial, sans-serif; font-weight: 400; }
.rk-e2a-herite .nav-tabs { display: none; }   /* la navigation est passée à gauche */
.rk-e2a-herite .panel { border-color: var(--e2a-filet); border-radius: 4px; box-shadow: none; }
.rk-e2a-herite .btn-primary { background: var(--e2a-rouge); border-color: var(--e2a-rouge); }
.rk-e2a-herite .btn-primary:hover { background: var(--e2a-rouge-fonce); border-color: var(--e2a-rouge-fonce); }

.rk-e2a-vide {
	padding: 26px 20px; text-align: center; color: var(--e2a-gris);
	background: var(--e2a-carte); border: 1px dashed var(--e2a-filet); border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Pied de la colonne latérale : le contact de l'agence (variante 2a).
   Données réelles de la base (table `equipe`). Les lignes que la conception
   montre mais que la base ne porte pas — téléphone, délai de réponse — ne
   sont pas affichées plutôt qu'inventées.
   -------------------------------------------------------------------------- */

.rk-e2a-contact {
	margin: 22px 20px 0;
	padding-top: 16px;
	border-top: 1px solid var(--e2a-filet);
}
.rk-e2a-contact-nom { font-size: 14px; font-weight: 600; color: var(--e2a-encre); }
.rk-e2a-contact-nom span { font-weight: 400; color: var(--e2a-gris); }
.rk-e2a-contact-role { font-size: 12px; color: var(--e2a-gris); margin-top: 2px; }
.rk-e2a-contact-tel  { font-size: 13px; color: var(--e2a-texte); margin-top: 4px; }
.rk-e2a-contact-lien {
	display: inline-block; margin-top: 8px;
	font-size: 13px; font-weight: 600; color: var(--e2a-rouge-texte);
}
.rk-e2a-contact-lien:hover { color: var(--e2a-rouge-fonce); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Grille « Déjà effectué » (variante 2a).
   Elle remplace l'ancienne barre de progression rouge. Les sept paliers sont
   les sept jalons déjà calculés : une seule source, deux présentations.
   -------------------------------------------------------------------------- */

.rk-e2a-paliers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 14px;
}
@media (min-width: 600px)  { .rk-e2a-paliers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .rk-e2a-paliers { grid-template-columns: 1fr 1fr 1fr; } }

.rk-e2a-palier {
	padding: 12px 14px;
	border: 1px solid var(--e2a-filet-2);
	border-radius: 4px;
	background: var(--e2a-carte);
}
.rk-e2a-palier-etat {
	font-size: 10px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--e2a-gris-clair); margin-bottom: 5px;
}
.rk-e2a-palier-titre { font-size: 14px; font-weight: 600; color: var(--e2a-encre); line-height: 1.3; }
.rk-e2a-palier-titre small { font-weight: 400; color: var(--e2a-gris); }
.rk-e2a-palier-desc { font-size: 12px; color: var(--e2a-texte); line-height: 1.45; margin-top: 4px; }

/* Franchi : vert, comme les pastilles « Déjà fait ». */
.rk-e2a-palier.franchi { background: var(--e2a-vert-voile); border-color: #CFE3D5; }
.rk-e2a-palier.franchi .rk-e2a-palier-etat { color: var(--e2a-vert); }

/* Prochaine étape : ambre, c'est là que le voyageur doit agir. */
.rk-e2a-palier.suivant { background: #FDF4E6; border-color: #EBD9BC; }
.rk-e2a-palier.suivant .rk-e2a-palier-etat { color: var(--e2a-ambre); }

/* À venir : en retrait, pour ne pas peser visuellement. */
.rk-e2a-palier.avenir { background: var(--e2a-voile-2); }
.rk-e2a-palier.avenir .rk-e2a-palier-titre { color: var(--e2a-gris); }
.rk-e2a-palier.avenir .rk-e2a-palier-desc  { color: var(--e2a-gris-clair); }

/* --------------------------------------------------------------------------
   Barre de navigation propre à l'espace voyageur (variante 2a).
   Elle ne s'affiche QUE dans l'espace : la règle de masquage de la navigation
   publique est émise par la coque, jamais sur le site public.
   Pas de cloche « Notifications » — aucune donnée en base.
   -------------------------------------------------------------------------- */

.rk-e2a-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding: 14px 20px;
	background: var(--e2a-carte);
	border: 1px solid var(--e2a-filet);
	border-radius: 4px;
	margin-top: 18px;
}
.rk-e2a-nav-logo {
	font-family: RakaFont, verdana, arial, sans-serif;
	font-size: 21px;
	color: var(--e2a-encre);
	text-decoration: none;
	white-space: nowrap;
}
.rk-e2a-nav-logo:hover { color: var(--e2a-rouge-texte); text-decoration: none; }

.rk-e2a-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}
.rk-e2a-nav-menu a {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e2a-texte);
	text-decoration: none;
	white-space: nowrap;
}
.rk-e2a-nav-menu a:hover { color: var(--e2a-rouge-texte); text-decoration: none; }

.rk-e2a-nav-droite { display: flex; align-items: center; gap: 10px; }
.rk-e2a-nav-langue {
	font-size: 12px;
	font-weight: 600;
	color: var(--e2a-gris-clair);
	text-decoration: none;
}
.rk-e2a-nav-langue:hover { color: var(--e2a-encre); text-decoration: none; }
.rk-e2a-nav-langue.actif { color: var(--e2a-encre); }

@media (max-width: 767px) {
	.rk-e2a-nav { padding: 12px 14px; gap: 8px 14px; }
	.rk-e2a-nav-menu { display: none; }   /* le menu public reste accessible depuis le pied de page */
}

/* --------------------------------------------------------------------------
   Bandeau « adresse e-mail non confirmée » : contenu existant de B, CONSERVÉ.
   Seule son apparence est portée à la palette 2a (ambre, angles droits).
   -------------------------------------------------------------------------- */

.rk-e2a .rk-verif-bandeau,
.rk-e2a .alert-warning {
	background: #FDF4E6;
	border: 1px solid #EBD9BC;
	border-radius: 4px;
	color: var(--e2a-texte);
	padding: 14px 16px;
	margin-bottom: 18px;
}
.rk-e2a .rk-verif-bandeau p { margin: 0 0 10px; }
.rk-e2a .rk-verif-bandeau strong { color: var(--e2a-ambre); }
.rk-e2a .rk-verif-bandeau .btn-rouge,
.rk-e2a .rk-verif-bandeau .btn {
	background: var(--e2a-rouge);
	border: 1px solid var(--e2a-rouge);
	border-radius: 3px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
}
.rk-e2a .rk-verif-bandeau .btn:hover { background: var(--e2a-rouge-fonce); border-color: var(--e2a-rouge-fonce); color: #fff; }
.rk-e2a .rk-verif-bandeau .btn-link { background: none; border: 0; color: var(--e2a-rouge-texte); }

/* --------------------------------------------------------------------------
   Écran 2 « Mes documents » (variante 2a).
   Regroupement par STATUT — « À déposer » puis « Déjà transmis » — avec badges,
   barre de progression globale, filtres en pastilles (liens GET, aucun
   JavaScript) et encadré latéral « Par voyageur ».
   Aucun document ne disparaît : c'est un réagencement d'affichage.
   -------------------------------------------------------------------------- */

.rk-e2a-docs-tete { margin-bottom: 16px; }
.rk-e2a-docs-titre {
	font-family: RakaFont, verdana, arial, sans-serif;
	font-size: 30px; font-weight: 400; line-height: 1.15;
	color: var(--e2a-encre); margin: 0 0 6px;
}
.rk-e2a-docs-sous { font-size: 14px; color: var(--e2a-gris); }

/* Barre de progression globale : reçus sur attendus. */
.rk-e2a-docs-jauge {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 18px; margin-bottom: 16px;
	background: var(--e2a-carte);
	border: 1px solid var(--e2a-filet);
	border-radius: 4px;
}
.rk-e2a-docs-jauge-txt { font-size: 15px; font-weight: 600; color: var(--e2a-encre); flex: 1 1 auto; }
.rk-e2a-docs-jauge-piste {
	flex: 0 0 160px; height: 6px; background: var(--e2a-voile);
	border-radius: 3px; overflow: hidden;
}
.rk-e2a-docs-jauge-piste span { display: block; height: 100%; background: var(--e2a-ambre); }
/* Couleur selon l'avancement : rouge sous 34 %, orange jusqu'à 67 %, vert au-delà.
   Teintes de la palette 2a, aucune couleur nouvelle. La classe est posée par
   page-documents.php d'après le pourcentage réel, jamais en dur. */
.rk-e2a-docs-jauge-piste.rouge  span { background: var(--e2a-rouge); }
.rk-e2a-docs-jauge-piste.orange span { background: var(--e2a-ambre); }
.rk-e2a-docs-jauge-piste.vert   span { background: var(--e2a-vert); }
.rk-e2a-docs-jauge-chiffre { font-size: 14px; font-weight: 600; color: var(--e2a-encre); white-space: nowrap; }

/* Sur petit écran, « Quedan 4 documentos » et « 4 documents left » sont plus longs
   que le français : la ligne unique débordait de 45 px en espagnol et 36 px en
   anglais, et le compteur « 2 / 6 » se retrouvait rogné hors cadre (relevé au
   navigateur le 16/09/2026). La barre passe donc à la ligne, piste élastique. */
@media (max-width: 599px) {
	.rk-e2a-docs-jauge { flex-wrap: wrap; gap: 8px 12px; }
	.rk-e2a-docs-jauge-txt { flex: 1 1 auto; }
	.rk-e2a-docs-jauge-piste { flex: 1 1 100%; order: 3; }
}

/* Filtres en pastilles : de vrais liens, sans JavaScript. */
.rk-e2a-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rk-e2a-filtre {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--e2a-filet);
	border-radius: 999px;
	background: var(--e2a-carte);
	font-size: 13px; color: var(--e2a-texte); text-decoration: none;
	white-space: nowrap;
}
.rk-e2a-filtre:hover { border-color: var(--e2a-gris-clair); color: var(--e2a-encre); text-decoration: none; }
.rk-e2a-filtre.actif {
	background: var(--e2a-encre); border-color: var(--e2a-encre); color: #fff;
}
.rk-e2a-filtre .n { opacity: .65; }

/* Sections « À déposer » / « Déjà transmis ». */
.rk-e2a-section { background: var(--e2a-carte); border: 1px solid var(--e2a-filet); border-radius: 4px; margin-bottom: 18px; }
.rk-e2a-section-tete {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 12px 18px; border-bottom: 1px solid var(--e2a-filet-2);
}
.rk-e2a-section-titre {
	font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	margin: 0; color: var(--e2a-rouge-texte);
}
.rk-e2a-section.transmis .rk-e2a-section-titre { color: var(--e2a-gris); }
.rk-e2a-section-note { font-size: 12px; color: var(--e2a-gris); white-space: nowrap; }

/* Sur petit écran, la note de droite venait se glisser ENTRE le titre et son
   compteur : on lisait « PENDIENTES  Bloquea la validación…  — 4 DOCUMENTOS ».
   Titre puis note, empilés, et la note peut enfin revenir à la ligne. */
@media (max-width: 599px) {
	.rk-e2a-section-tete { flex-direction: column; align-items: flex-start; gap: 4px; }
	.rk-e2a-section-note { white-space: normal; }
}

/* Une ligne de document. */
.rk-e2a-doc {
	display: flex; align-items: center; gap: 14px;
	padding: 13px 18px; border-bottom: 1px solid var(--e2a-voile);
}
.rk-e2a-doc:last-child { border-bottom: 0; }
.rk-e2a-doc-vignette {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 3px;
	border: 1px dashed var(--e2a-filet); background: var(--e2a-voile-2);
}
.rk-e2a-doc.transmis .rk-e2a-doc-vignette { border-style: solid; background: var(--e2a-voile); }
.rk-e2a-doc-corps { flex: 1 1 auto; min-width: 0; }
.rk-e2a-doc-titre { font-size: 14px; font-weight: 600; color: var(--e2a-encre); }
.rk-e2a-doc-sous { font-size: 12px; color: var(--e2a-gris); margin-top: 2px; }
.rk-e2a-doc-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Badges d'état. */
.rk-e2a-badge {
	display: inline-block; padding: 4px 10px; border-radius: 999px;
	font-size: 12px; white-space: nowrap;
}
.rk-e2a-badge.valide   { background: var(--e2a-vert-voile); color: #24603C; border: 1px solid #CFE3D5; }
.rk-e2a-badge.attente  { background: #FDF4E6; color: var(--e2a-ambre); border: 1px solid #EBD9BC; }
.rk-e2a-badge.refuse   { background: var(--e2a-rouge-voile); color: var(--e2a-rouge-texte); border: 1px solid #F0CBCD; }
.rk-e2a-badge.manquant { background: var(--e2a-voile-2); color: var(--e2a-gris); border: 1px solid var(--e2a-filet); }

/* Encadré latéral « Par voyageur ». */
.rk-e2a-parvoyageur {
	background: var(--e2a-voile); border: 1px solid var(--e2a-filet-2);
	border-radius: 4px; padding: 14px 16px;
}
.rk-e2a-parvoyageur-titre { font-size: 13px; font-weight: 600; color: var(--e2a-encre); margin-bottom: 10px; }
.rk-e2a-parvoyageur-ligne {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	font-size: 13px; color: var(--e2a-texte); padding: 4px 0;
}
.rk-e2a-parvoyageur-ligne .n { font-weight: 600; color: var(--e2a-encre); white-space: nowrap; }
.rk-e2a-parvoyageur-ligne.complet .n { color: var(--e2a-vert); }
.rk-e2a-parvoyageur-aide { font-size: 11px; color: var(--e2a-gris); margin-top: 10px; line-height: 1.4; }

/* Encadré « Par voyageur » : il vit dans la colonne de gauche, sous le menu, comme
   dans la conception d'origine. Il n'y a donc PAS de seconde colonne dans la zone de contenu. */
.rk-e2a-lat .rk-e2a-parvoyageur { margin: 18px 16px 0; }

/* --------------------------------------------------------------------------
   ÉCRANS 5 (Profil) et 6 (Mes droits) — variante 2a.

   Même principe que les écrans 1 et 2 : les briques existantes sont
   ENVELOPPÉES, pas réécrites. Rien ici ne suppose une donnée qui n'existe pas.
   -------------------------------------------------------------------------- */

/* Deux colonnes : contenu à gauche, encarts à droite (comme dans la conception d'origine). */
.rk-e2a-2col { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 992px) { .rk-e2a-2col { grid-template-columns: 1fr 300px; align-items: start; } }

/* Bloc de contenu, titre en petites capitales.
   ⚠ Nommé `-bloc` et NON `-carte` : .rk-e2a-carte* existe déjà plus haut pour
   l'écran 1, avec un titre de 17 px. Redéfinir ces classes ici les aurait
   écrasées et aurait défiguré le tableau de bord. */
.rk-e2a-bloc {
	background: var(--e2a-carte); border: 1px solid var(--e2a-filet);
	border-radius: 4px; margin-bottom: 18px;
}
.rk-e2a-bloc-tete { padding: 12px 18px; border-bottom: 1px solid var(--e2a-filet-2); }
.rk-e2a-bloc-titre {
	font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	margin: 0; color: var(--e2a-gris);
}
.rk-e2a-bloc-corps { padding: 16px 18px; }

/* Encarts de la colonne de droite. */
.rk-e2a-encart {
	background: var(--e2a-carte); border: 1px solid var(--e2a-filet);
	border-radius: 4px; padding: 14px 16px; margin-bottom: 14px;
}
.rk-e2a-encart-titre {
	font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--e2a-gris); margin-bottom: 8px;
}
.rk-e2a-encart p { margin: 0 0 8px; font-size: 13px; color: var(--e2a-texte); }
.rk-e2a-encart p:last-child { margin-bottom: 0; }
/* Encart « action requise » : ambre, comme le bandeau e-mail non confirmé. */
.rk-e2a-encart.action { background: #FDF6E9; border-color: #E8D9B8; }
.rk-e2a-encart.action .rk-e2a-encart-titre { color: var(--e2a-ambre); }

/* Jauge « profil complété » : même langage visuel que la jauge des documents. */
.rk-e2a-jauge-chiffre { font-family: RakaFont, verdana, arial, sans-serif; font-size: 30px; line-height: 1; color: var(--e2a-encre); }
.rk-e2a-jauge-piste { height: 6px; background: var(--e2a-voile); border-radius: 3px; overflow: hidden; margin: 10px 0 8px; }
.rk-e2a-jauge-piste span { display: block; height: 100%; background: var(--e2a-rouge); }
.rk-e2a-jauge-manque { font-size: 12px; color: var(--e2a-gris); line-height: 1.45; }

/* Écran 6 : le type de demande en pastilles, en RADIOS CSS — aucun JavaScript.
   Le formulaire reste un POST classique et fonctionne sans script. */
.rk-e2a-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.rk-e2a-choix input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rk-e2a-choix label {
	display: inline-flex; align-items: center; padding: 7px 14px;
	border: 1px solid var(--e2a-filet); border-radius: 999px;
	background: var(--e2a-carte); font-size: 13px; font-weight: 400;
	color: var(--e2a-texte); cursor: pointer; margin: 0;
}
.rk-e2a-choix input[type="radio"]:checked + label {
	background: var(--e2a-encre); border-color: var(--e2a-encre); color: #fff;
}
.rk-e2a-choix input[type="radio"]:focus-visible + label { outline: 2px solid var(--e2a-rouge); outline-offset: 2px; }

/* Écran 6 : une demande déjà envoyée. Pas de badge d'avancement — la table
   `demandes_droits` ne porte aucun statut, seulement une date (relevé 16/09). */
.rk-e2a-demande { padding: 12px 18px; border-top: 1px solid var(--e2a-filet-2); }
.rk-e2a-demande:first-child { border-top: 0; }
.rk-e2a-demande-type { font-weight: 600; color: var(--e2a-encre); font-size: 14px; }
.rk-e2a-demande-meta { font-size: 12px; color: var(--e2a-gris); margin-top: 2px; }
.rk-e2a-demande-msg { font-size: 13px; color: var(--e2a-texte); margin-top: 6px; white-space: pre-line; }

/* Compagnons de voyage : la liste existante de B, rhabillée. */
.rk-e2a-compagnon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--e2a-filet-2); }
.rk-e2a-compagnon:first-child { border-top: 0; }
.rk-e2a-compagnon-nom { font-weight: 600; color: var(--e2a-encre); flex: 1 1 160px; }
.rk-e2a-compagnon-n { font-size: 12px; color: var(--e2a-gris); }

/* --------------------------------------------------------------------------
   COLONNE LATÉRALE, LOGO ET ENTRÉES ANNONCÉES (16/09/2026)
   -------------------------------------------------------------------------- */

/* Le bloc de contact est ANCRÉ EN PIED de la colonne, comme dans la conception d'origine :
   la colonne devient une pile verticale, et le contact pousse tout l'espace
   disponible au-dessus de lui. Il était déjà imprimé en dernier — seul
   l'ancrage manquait. */
.rk-e2a-lat .rk-e2a-contact { margin-top: auto; }

/* Le vrai logo remplace le nom en toutes lettres. Seule la hauteur est fixée :
   la largeur suit, donc aucune déformation. Le fichier fait 460 × 110. */
.rk-e2a-lat-logo { display: block; padding: 2px 20px 18px; }
.rk-e2a-lat-logo img { height: 32px; width: auto; max-width: 100%; display: block; }
.rk-e2a-nav-logo img { height: 26px; width: auto; max-width: 100%; display: block; }

/* Entrée annoncée, sans écran derrière : volontairement PAS un lien. */
.rk-e2a-menu li.bientot > span {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 20px; font-size: 15px;
	color: var(--e2a-gris-clair);
	border-left: 3px solid transparent;
	cursor: default;
}
.rk-e2a-bientot {
	font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--e2a-gris-clair);
	border: 1px solid var(--e2a-filet); border-radius: 999px;
	padding: 2px 8px; white-space: nowrap;
}

/* Barre du haut : l'entrée de la page courante se distingue, comme à gauche. */
.rk-e2a-nav-menu li.actif a { color: var(--e2a-rouge-texte); font-weight: 600; }

/* ==========================================================================
   REGROUPEMENT PAR VOYAGEUR — écran « Mes documents » (17/09/2026)
   Une section dépliable par participant, en <details>/<summary> NATIFS :
   aucune ligne de JavaScript ajoutée, état conservé par le navigateur,
   pliage au clavier par Entrée ou Espace sans rien à écrire.
   Les classes .rk-e2a-section* existantes ne sont pas redéfinies : les
   sections « À déposer » / « Déjà transmis » vivent À L'INTÉRIEUR d'un
   voyageur et gardent leur propre habillage.
   ========================================================================== */

.rk-e2a-voyageur {
	border: 1px solid var(--e2a-filet);
	border-radius: 4px;
	background: var(--e2a-carte);
	margin-bottom: 14px;
	overflow: hidden;
}

/* L'en-tête. On retire le triangle natif des deux façons qui existent
   (WebKit a son pseudo-élément propre) pour dessiner le nôtre. */
.rk-e2a-voyageur > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	cursor: pointer;
	list-style: none;
	background: var(--e2a-voile);
	border-bottom: 1px solid transparent;
}
.rk-e2a-voyageur > summary::-webkit-details-marker { display: none; }
.rk-e2a-voyageur[open] > summary { border-bottom-color: var(--e2a-filet); }
.rk-e2a-voyageur > summary:hover { background: var(--e2a-voile-2); }
.rk-e2a-voyageur > summary:focus-visible {
	outline: 2px solid var(--e2a-rouge);
	outline-offset: -2px;
}

/* Le chevron, dessiné en CSS : pas de dépendance à une police d'icônes. */
.rk-e2a-voyageur-chevron {
	flex: 0 0 auto;
	width: 7px; height: 7px;
	border-right: 2px solid var(--e2a-gris);
	border-bottom: 2px solid var(--e2a-gris);
	transform: rotate(-45deg);
	transition: transform .15s ease;
	margin-right: 2px;
}
.rk-e2a-voyageur[open] > summary .rk-e2a-voyageur-chevron { transform: rotate(45deg); }

.rk-e2a-voyageur-nom {
	font-weight: 600;
	font-size: 15px;
	color: var(--e2a-encre);
}
.rk-e2a-voyageur-role {
	font-size: 12px;
	color: var(--e2a-gris);
	text-transform: lowercase;
}
/* Le compteur est poussé à droite ; il porte le décompte GLOBAL du voyageur,
   jamais le décompte filtré — sans quoi il contredirait « Par voyageur ». */
.rk-e2a-voyageur-compteur {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--e2a-encre);
	white-space: nowrap;
}
.rk-e2a-voyageur.complet .rk-e2a-voyageur-compteur { color: var(--e2a-vert); }

.rk-e2a-voyageur-corps { padding: 14px 16px 4px; }
/* À l'intérieur d'un voyageur, les sections perdent leur cadre : le cadre est
   désormais celui du voyageur, deux bordures imbriquées feraient lourd. */
.rk-e2a-voyageur-corps .rk-e2a-section {
	border: 0;
	border-radius: 0;
	background: transparent;
	margin-bottom: 10px;
}
.rk-e2a-voyageur-corps .rk-e2a-section-tete { padding-left: 0; padding-right: 0; }
.rk-e2a-voyageur-corps .rk-docs { padding-left: 0; padding-right: 0; }

@media (max-width: 599px) {
	.rk-e2a-voyageur > summary { flex-wrap: wrap; padding: 11px 13px; gap: 6px 8px; }
	.rk-e2a-voyageur-compteur { margin-left: auto; }
	.rk-e2a-voyageur-corps { padding: 12px 13px 4px; }
}

/* ==========================================================================
   LA FICHE D'ASSISTANCE — le parcours de questions (17/09/2026)
   Une question par écran, sans JavaScript. Le repère est double : la section
   du document à gauche (Personnel, Assurance, Contact d'urgence, Vols) et le
   compteur global à droite — « Question 7 sur 20 ». Trente écrans sans repère
   décourageraient ; vingt questions jalonnées se traversent.
   ========================================================================== */

.rk-fa { max-width: 640px; }

.rk-fa-retour { margin: 0 0 14px; font-size: 13px; }
.rk-fa-retour a { color: var(--e2a-gris); }
.rk-fa-retour a:hover, .rk-fa-retour a:focus { color: var(--e2a-rouge-texte); }

.rk-fa-titre { margin: 0 0 2px; font-size: 21px; color: var(--e2a-encre); }
.rk-fa-qui { margin: 0 0 22px; font-size: 13px; color: var(--e2a-gris); }

/* -- la progression */
.rk-fa-progres { margin-bottom: 22px; }
.rk-fa-progres-tete {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; margin-bottom: 6px;
}
.rk-fa-section {
	font-size: 11px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--e2a-gris);
}
.rk-fa-compteur { font-size: 12px; color: var(--e2a-gris); white-space: nowrap; }
.rk-fa-piste {
	display: block; height: 4px; border-radius: 2px;
	background: var(--e2a-voile-2); overflow: hidden;
}
.rk-fa-piste span { display: block; height: 100%; background: var(--e2a-rouge); }

/* -- la question */
.rk-fa-intitule { margin: 0 0 4px; font-size: 19px; line-height: 1.3; color: var(--e2a-encre); }
.rk-fa-facultatif {
	font-size: 11px; font-weight: 400; letter-spacing: .06em;
	text-transform: uppercase; color: var(--e2a-gris); margin-left: 6px;
}
.rk-fa-note {
	margin: 8px 0 0; padding: 10px 12px;
	background: var(--e2a-voile); border-left: 3px solid var(--e2a-ambre);
	font-size: 13px; line-height: 1.5; color: var(--e2a-texte);
}

.rk-fa-champs { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0 24px; }
.rk-fa-champ { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; }
.rk-fa-champ label { font-size: 12px; color: var(--e2a-gris); font-weight: 500; }
.rk-fa-champ input, .rk-fa-champ select {
	width: 100%; padding: 9px 11px;
	border: 1px solid var(--e2a-filet); border-radius: 4px;
	background: #fff; font-size: 15px; color: var(--e2a-encre);
}
.rk-fa-champ input:focus, .rk-fa-champ select:focus {
	outline: 2px solid var(--e2a-rouge); outline-offset: -1px; border-color: var(--e2a-rouge);
}
/* un indicatif ou un quantième n'a pas besoin de la largeur d'un nom */
.rk-fa-champ:has(select) { flex: 0 1 140px; }

.rk-fa-actions { display: flex; align-items: center; gap: 16px; }
.rk-fa-precedent { font-size: 13px; color: var(--e2a-gris); }
.rk-fa-precedent:hover, .rk-fa-precedent:focus { color: var(--e2a-rouge-texte); }
.rk-fa-reprise { margin: 14px 0 0; font-size: 12px; color: var(--e2a-gris-clair); line-height: 1.5; }

/* -- le récapitulatif */
.rk-fa-fin h2 { margin: 0 0 6px; font-size: 19px; color: var(--e2a-encre); }
.rk-fa-recap { margin: 18px 0 24px; }
.rk-fa-recap dt {
	font-size: 12px; font-weight: 500; color: var(--e2a-gris);
	margin-top: 12px;
}
.rk-fa-recap dd {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	margin: 2px 0 0; padding-bottom: 8px;
	border-bottom: 1px solid var(--e2a-filet);
	font-size: 15px; color: var(--e2a-encre);
}
.rk-fa-modifier { font-size: 12px; color: var(--e2a-rouge-texte); white-space: nowrap; }

.rk-fa-pieces { margin-bottom: 24px; }
.rk-fa-pieces h3 { font-size: 13px; font-weight: 600; color: var(--e2a-encre); margin: 0 0 8px; }
.rk-fa-pieces ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.rk-fa-condition { display: block; font-size: 12px; color: var(--e2a-ambre); }

@media (max-width: 599px) {
	.rk-fa-champs { gap: 12px; }
	.rk-fa-champ, .rk-fa-champ:has(select) { flex: 1 1 100%; }
	.rk-fa-intitule { font-size: 17px; }
	.rk-fa-recap dd { flex-direction: column; gap: 2px; }
}

/* La fiche d'assistance, en tête de chaque section de voyageur : un titre, puis
   UN bouton dont l'apparence suit l'état (trois états) :
   vierge = bouton plein, en cours = bouton contour avec le compteur, remplie =
   pastille verte et lien discret « Modifier ». */
.rk-e2a-voyageur-fiche { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--e2a-filet-2); border-radius: 4px; background: var(--e2a-voile-2); }
.rk-e2a-voyageur-fiche-titre { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--e2a-gris); margin: 0 0 8px; }
.rk-e2a-voyageur-fiche-bouton {
	display: inline-block; padding: 7px 14px; border-radius: 4px;
	background: var(--e2a-rouge); border: 1px solid var(--e2a-rouge);
	color: #fff; font-size: 13px; font-weight: 600;
}
.rk-e2a-voyageur-fiche-bouton:hover,
.rk-e2a-voyageur-fiche-bouton:focus { background: var(--e2a-rouge-fonce); border-color: var(--e2a-rouge-fonce); color: #fff; text-decoration: none; }
.rk-e2a-voyageur-fiche-bouton.contour { background: transparent; color: var(--e2a-rouge-texte); }
.rk-e2a-voyageur-fiche-bouton.contour:hover,
.rk-e2a-voyageur-fiche-bouton.contour:focus { background: var(--e2a-rouge); color: #fff; }
.rk-e2a-voyageur-fiche-etat {
	display: inline-block; padding: 4px 10px; border-radius: 3px; margin-right: 10px;
	background: var(--e2a-vert-voile); color: var(--e2a-vert); font-size: 13px; font-weight: 600;
}
.rk-e2a-voyageur-fiche-lien { font-size: 13px; color: var(--e2a-rouge-texte); text-decoration: underline; }
.rk-e2a-voyageur-fiche-lien:hover, .rk-e2a-voyageur-fiche-lien:focus { color: var(--e2a-rouge-fonce); }

/* « ÉCRIRE À L'AGENCE » (17/09/2026) : page dédiée ouverte dans un nouvel onglet, une
   seule carte centrée dans l'habillage de l'espace. Sans JavaScript. */
.rk-e2a-message { padding: 28px 16px 48px; background: var(--e2a-fond); }
.rk-e2a-message-carte {
	max-width: 640px; margin: 0 auto; padding: 24px 28px 28px;
	background: var(--e2a-carte); border: 1px solid var(--e2a-filet); border-radius: 4px;
}
.rk-e2a-message-tete { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--e2a-filet-2); }
.rk-e2a-message-sur { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--e2a-gris); }
.rk-e2a-message-carte h1 { margin: 4px 0 6px; font-size: 26px; }
.rk-e2a-message-contact { margin: 0; color: var(--e2a-texte); }
.rk-e2a-message-contact span { color: var(--e2a-gris); }
.rk-e2a-message-de { font-size: 13px; color: var(--e2a-gris); margin-bottom: 14px; }
.rk-e2a-message-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 10px; }
.rk-e2a-message-note, .rk-e2a-message-suite { font-size: 13px; color: var(--e2a-gris); }

/* ──────────────────────────────────────────────────────────────────────────
   PRÉPARER MON VOYAGE

   Le voyageur n'a aucun choix à faire : le pays vient de son dossier. Le
   bandeau reprend le vocabulaire de « Mon voyage » en plus sobre, et les
   questions sont rendues par les mêmes feuillets que la page publique —
   .rk-faq vit dans styles.css, on ne redéfinit ici que ce qui doit s'adapter
   à la largeur de l'espace.
   ────────────────────────────────────────────────────────────────────────── */
.rk-e2a-prep { margin-bottom: 26px; }
.rk-e2a-prep-bandeau {
	background: var(--e2a-sombre, #2B2825); color: #fff;
	border-radius: 4px; padding: 18px 20px; margin-bottom: 16px;
	display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
@media (max-width: 640px) { .rk-e2a-prep-bandeau { grid-template-columns: 1fr; } }
.rk-e2a-prep-sur {
	font-size: 11px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: #B9B1A6; margin-bottom: 6px;
}
.rk-e2a-prep-titre {
	font-family: RakaFont, verdana, arial, sans-serif; font-weight: 400;
	font-size: 23px; line-height: 1.15; margin: 0 0 6px; color: #fff;
}
.rk-e2a-prep-dates { font-size: 14px; color: #CFC7BC; }
.rk-e2a-prep-rebours { text-align: right; }
@media (max-width: 640px) { .rk-e2a-prep-rebours { text-align: left; } }
.rk-e2a-prep-rebours b { font-size: 30px; line-height: 1; font-weight: 700; display: block; }
.rk-e2a-prep-mot { font-size: 13px; color: #CFC7BC; }
.rk-e2a-prep-vide { color: var(--e2a-gris); margin: 0; }

/* les feuillets dans l'espace : le cadre est déjà celui de la carte, on retire le sien */
.rk-faq-dans-espace .rk-faq-feuillets { border: 0; background: none; }
.rk-faq-dans-espace .rk-faq-feuillet summary { padding: 13px 0; }
.rk-faq-dans-espace .rk-faq-reponse { padding: 0 0 16px 36px; }
@media (max-width: 600px) { .rk-faq-dans-espace .rk-faq-reponse { padding-left: 0; } }

/* -- la liste d'équipement : le bouton EST la coche, toute la ligne est cliquable ------ */
.rk-e2a-equip { list-style: none; margin: 0; padding: 0; }
.rk-e2a-equip li { border-bottom: 1px solid var(--e2a-filet-2); }
.rk-e2a-equip li:last-child { border-bottom: 0; }
.rk-e2a-equip form { margin: 0; }
.rk-e2a-equip button {
	width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 4px;
	background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--e2a-encre);
}
.rk-e2a-equip button:hover { background: var(--e2a-voile-2); }
.rk-e2a-equip button:focus-visible { outline: 3px solid var(--e2a-rouge-texte); outline-offset: -3px; }
.rk-e2a-coche {
	flex: 0 0 26px; height: 26px; border: 2px solid var(--e2a-filet); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: transparent; font-size: 15px; font-weight: 700;
}
.rk-e2a-equip .fait .rk-e2a-coche,
.rk-e2a-equip li.fait .rk-e2a-coche { background: var(--e2a-vert); border-color: var(--e2a-vert); color: #fff; }
.rk-e2a-equip-nom { flex: 1; font-size: 16px; }
/* PAS de texte barré sur une ligne cochée : barré et grisé se lit « annulé » plutôt que
   « fait » pour un lecteur peu à l'aise. Seule la coche verte porte l'information. */
.rk-e2a-equip li.fait .rk-e2a-equip-nom { color: var(--e2a-texte); }
.rk-e2a-equip-note { font-size: 13px; color: var(--e2a-gris); flex: 0 0 auto; }
.rk-e2a-equip-etat { font-size: 12px; color: var(--e2a-gris-clair); flex: 0 0 auto; min-width: 84px; text-align: right; }
@media (max-width: 560px) { .rk-e2a-equip-etat { display: none; } }
.rk-e2a-equip-reste {
	background: var(--e2a-voile); border-top: 1px solid var(--e2a-filet-2);
	padding: 12px 18px; font-size: 14.5px; color: var(--e2a-texte);
}
.rk-e2a-equip-reste.tout { background: var(--e2a-vert-voile); border-top-color: #CFE3D5; color: var(--e2a-vert); font-weight: 600; }

/* ------------------------------------------------ « Messages » (18/09/2026)
   L'historique de ce que le voyageur a écrit. Même grammaire que la liste
   d'équipement : un dépliant natif par ligne, aucun JavaScript. */
.rk-e2a-msg-aide { color: var(--e2a-gris); font-size: 14.5px; max-width: 68ch; margin: 0 0 16px; }
.rk-e2a-msg-vide { color: var(--e2a-gris); margin: 0; }
.rk-e2a-msg-liste { list-style: none; margin: 0; padding: 0; }
.rk-e2a-msg-liste > li { border-top: 1px solid var(--e2a-filet-2); }
.rk-e2a-msg-liste > li:first-child { border-top: 0; }
.rk-e2a-msg-liste summary {
	list-style: none; cursor: pointer; padding: 13px 2px;
	display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.rk-e2a-msg-liste summary::-webkit-details-marker { display: none; }
.rk-e2a-msg-liste summary::marker { content: ""; }
.rk-e2a-msg-liste summary:hover { background: var(--e2a-voile); }
.rk-e2a-msg-liste summary:focus-visible { outline: 3px solid var(--e2a-rouge); outline-offset: -3px; }
.rk-e2a-msg-date { color: var(--e2a-gris); font-size: 13.5px; flex: 0 0 auto; min-width: 12ch; }
.rk-e2a-msg-sujet { flex: 1 1 14ch; font-size: 16px; min-width: 0; }
.rk-e2a-msg-etat {
	flex: 0 0 auto; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
	border: 1px solid var(--e2a-filet); color: var(--e2a-gris);
	padding: 1px 7px; border-radius: 2px;
}
.rk-e2a-msg-etat.envoye { border-color: var(--e2a-vert); color: var(--e2a-vert); }
.rk-e2a-msg-etat.echec  { border-color: var(--e2a-rouge); color: var(--e2a-rouge); }
.rk-e2a-msg-corps { padding: 2px 2px 16px; max-width: 74ch; }
.rk-e2a-msg-corps p { margin: 0 0 10px; }
.rk-e2a-msg-copie { color: var(--e2a-gris); font-size: 13.5px; }