/* ===========================================================================
 * Paiement en ligne — RéuniSolidarité
 * ---------------------------------------------------------------------------
 * Une seule feuille, aucune dépendance externe. Le site public vit ailleurs et
 * chez un autre prestataire : cette page doit tenir seule, sans rien attendre
 * d'un CDN ni d'un framework qui ne serait plus servi.
 *
 * Les deux couleurs sont celles de la mutuelle, reprises de l'ancien site :
 * l'orange des titres (#e2622a, la version d'origine #e95d0e ne passait pas le
 * contraste AA sur blanc) et le bleu nuit du logo (#1e1b4b).
 *
 * Conçue pour le téléphone d'abord : la majorité des adhérents paient depuis un
 * mobile, et l'ancienne page imposait un défilement horizontal.
 * ======================================================================== */

:root {
	--orange:      #f07c02;   /* mesure sur logo.jpg */
	--orange-fonce:#c66402;   /* mesure sur logo.jpg */
	--orange-pale: #fef4e6;
	--nuit:        #1e1b4b;
	--encre:       #2c2a27;
	--gris:        #6b655d;
	--trait:       #ded8d0;
	--fond:        #f4f2ee;
	--blanc:       #ffffff;
	--rouge:       #a32118;
	--vert:        #1c6b3f;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 0;
	background: var(--fond);
	color: var(--encre);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;      /* 16 px : en dessous, iOS zoome à la saisie */
	line-height: 1.55;
}

/* --- Structure ---------------------------------------------------------- */

.enveloppe {
	max-width: 640px;
	margin: 0 auto;
	padding: 16px;
}

.carte {
	background: var(--blanc);
	border-top: 4px solid var(--orange);
	border-bottom: 4px solid var(--orange);
	padding: 24px 20px 28px;
}

@media (min-width: 600px) {
	.enveloppe { padding: 32px 16px; }
	.carte     { padding: 32px 40px 36px; }
}

/* --- En-tête ------------------------------------------------------------ */

.marque {
	text-align: center;
	margin-bottom: 22px;
}

.marque img {
	max-width: 220px;
	width: 100%;
	height: auto;
}

.marque .nom {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var(--nuit);
	letter-spacing: .02em;
}

h1 {
	margin: 0 0 6px;
	font-size: 21px;
	line-height: 1.3;
	color: var(--nuit);
	text-wrap: balance;
}

.sous-titre {
	margin: 0 0 24px;
	color: var(--gris);
	font-size: 15px;
}

/* --- Fil des étapes ----------------------------------------------------- */

.etapes {
	display: flex;
	gap: 6px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.etapes li {
	flex: 1;
	font-size: 12px;
	color: var(--gris);
	text-align: center;
	padding-top: 8px;
	border-top: 3px solid var(--trait);
}

.etapes li.faite   { border-top-color: var(--orange); color: var(--orange-fonce); }
.etapes li.courante{ border-top-color: var(--orange); color: var(--nuit); font-weight: 700; }

/* --- Formulaire --------------------------------------------------------- */

.champ { margin-bottom: 20px; }

.champ label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--nuit);
}

.champ .aide {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 400;
	color: var(--gris);
}

input[type="text"],
input[type="email"],
input[type="tel"] {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--encre);
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: 2px;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 2px;
}

input[aria-invalid="true"] {
	border-color: var(--rouge);
	background: #fdf5f4;
}

.erreur-champ {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--rouge);
	font-weight: 700;
}

/* Cases à cocher : la zone cliquable couvre le libellé entier, ce qui compte
   sur un écran tactile. */
.case {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 18px;
	padding: 14px;
	background: var(--fond);
	border: 1px solid var(--trait);
	cursor: pointer;
}

.case input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--orange);
}

.case span { font-size: 14px; line-height: 1.5; }

/* UNE CASE OUBLIEE SE VOIT SANS ETRE LUE. Le message sous la case dit quoi
   faire ; la bordure dit ou regarder. Sur un formulaire de quatre cases
   identiques, c'est la couleur qui fait gagner le temps, pas le texte. */
/* L'AVERTISSEMENT D'INTEGRITE, DANS LE CADRE DE L'ACTE. Rouge sur fond vert :
   c'est voulu, il doit trancher. Un acte non verifiable dans un cadre
   entierement vert se lit comme un acte en ordre. */
.alerte-integrite {
	color: #c0392b;
	font-weight: 700;
	margin-top: 12px;
}

/* UN CHAMP DE SAISIE EN ERREUR, signale comme une case oubliee : meme rouge,
   meme fond, meme barre a gauche. Ce qui manque doit se retrouver d'un coup
   d'oeil, sans lire. */
.champ-erreur {
	border-left: 4px solid #c0392b;
	background: #fdf3f2;
	padding: 12px 14px;
	border-radius: 6px;
}

.champ-erreur input { border-color: #c0392b; }

/* LE LIBELLE PASSE EN ROUGE, PAS SEULEMENT LE CADRE — demande du 26/08.
   Une bordure indique une zone ; c'est le mot qui dit QUOI corriger. Sur un
   formulaire ou tout se ressemble, le regard va au texte colore avant d'aller
   au trait. Vaut pour le libelle d'un champ comme pour le texte d'une case. */
.champ-erreur label,
.champ-erreur .aide { color: #c0392b; }

.case-erreur span { color: #c0392b; }

/* Le message sous le champ : deja rouge, on le rend simplement plus present. */
.erreur-champ { color: #c0392b; font-weight: 600; }

.case-erreur {
	border-color: #c0392b;
	border-left-width: 4px;
	background: #fdf3f2;
}

/* --- Boutons ------------------------------------------------------------ */

.bouton {
	display: block;
	width: 100%;
	padding: 15px 20px;
	font-size: 17px;
	font-family: inherit;
	font-weight: 700;
	color: var(--blanc);
	background: var(--orange);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.bouton:hover  { background: var(--orange-fonce); }
.bouton:disabled { background: #c9c3bb; cursor: not-allowed; }

.retour {
	display: inline-block;
	margin-top: 18px;
	font-size: 14px;
	color: var(--gris);
}

/* --- Encarts ------------------------------------------------------------ */

.encart {
	margin: 0 0 22px;
	padding: 16px 18px;
	border-left: 4px solid var(--orange);
	background: var(--orange-pale);
	font-size: 15px;
}

.encart.grave  { border-left-color: var(--rouge); background: #fdf5f4; }
.encart.bonne  { border-left-color: var(--vert);  background: #f1f7f3; }
.encart p      { margin: 0 0 10px; }
.encart p:last-child { margin-bottom: 0; }
.encart .titre { font-weight: 700; color: var(--nuit); }

/* --- Montant ------------------------------------------------------------ */

.montant {
	margin: 0 0 24px;
	padding: 20px;
	background: var(--nuit);
	color: var(--blanc);
	text-align: center;
}

.montant .libelle {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .8;
}

.montant .valeur {
	display: block;
	margin-top: 4px;
	font-size: 34px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- Documents ---------------------------------------------------------- */

.documents { margin: 0 0 20px; padding: 0; list-style: none; }

.documents li { border-bottom: 1px solid var(--trait); }
.documents li:last-child { border-bottom: 0; }

.documents a {
	display: block;
	padding: 13px 0 13px 30px;
	color: var(--nuit);
	font-size: 15px;
	text-decoration: none;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20' fill='none' stroke='%23e2622a' stroke-width='1.6'%3E%3Cpath d='M9.5 1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6.5z'/%3E%3Cpath d='M9.5 1v5.5H15'/%3E%3C/svg%3E") no-repeat left center / 16px 20px;
}

.documents a:hover { text-decoration: underline; }

/* --- Pied --------------------------------------------------------------- */

.pied {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--trait);
	font-size: 13px;
	color: var(--gris);
	text-align: center;
}

.pied strong { color: var(--nuit); }

/* --- Thème sombre ------------------------------------------------------- */
/* Le navigateur d'un téléphone récent impose parfois le thème système à la
   page. On répond plutôt que de subir un texte gris sur fond noir. */

@media (prefers-color-scheme: dark) {
	:root {
		--fond:   #17161a;
		--blanc:  #212024;
		--encre:  #e8e5e0;
		--gris:   #a9a29a;
		--trait:  #3a373f;
		--nuit:   #cfcbf0;
		--orange-pale: #33241c;
	}
	.montant { background: #2d2a56; }
	input[aria-invalid="true"] { background: #331e1c; }
	.encart.grave { background: #331e1c; }
	.encart.bonne { background: #1b2a20; }
}

/* Titre centre — demande du 23/08. */
h1.centre { text-align: center; }


/* DE L'AIR ENTRE LA LISTE DES DOCUMENTS ET LES ENGAGEMENTS — demande du 26/08.
   Ce sont deux moments differents : on lit, puis on s'engage. Colles l'un a
   l'autre, ils formaient un seul bloc et la phrase « les quatre cases sont
   obligatoires » se perdait au milieu. */
.espace-avant { margin-top: 34px; }
.espace-apres { margin-bottom: 26px; }

/* ===========================================================================
   LE FIL DES QUATRE ETAPES

   Il dit ou l'on est et combien il en reste. PAS DE LIEN dessus : on avance
   par les boutons, qui enregistrent. Un fil cliquable ferait sauter d'un ecran
   a l'autre sans passer par le formulaire, donc en perdant la saisie en cours.
   ======================================================================== */
.etapes-vol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	font-size: 0.86rem;
}

.etapes-vol li {
	flex: 1 1 auto;
	min-width: 120px;
	color: #8a837c;
	border-top: 3px solid var(--trait);
	padding: 8px 4px 0;
	line-height: 1.3;
}

.etapes-vol .rang {
	display: inline-block;
	min-width: 18px;
	font-weight: 700;
}

.etapes-vol li.faite    { border-top-color: var(--orange); color: var(--orange-fonce); }
.etapes-vol li.courante { border-top-color: var(--bleu); color: var(--nuit); font-weight: 700; }

/* Le parcours annonce a la premiere etape. */
ol.parcours { margin: 0 0 20px; padding-left: 22px; }
ol.parcours li { margin-bottom: 10px; line-height: 1.55; }

/* ===========================================================================
   LES CADRES DU MODULE VOLONTES — demandes du 26/08

   Un vocabulaire, quatre variantes, et chacune dit quelque chose :

     .encart.ok.cotes        vert     ce qui est acquis
     .encart.ok.scelle       vert     ce qui est scelle
     .encart.action.double   orange   ce qui engage
     .encart.avert.double    bleu     ce qui est grave

   UN SEUL TRACE POUR TOUS : deux traits pleins, a gauche et a droite. Seule
   la COULEUR distingue les variantes. Le double trait a ete essaye puis
   retire le 02/09 — il se lisait comme un defaut d'affichage, et la mention
   « double » ne survit que dans le nom des classes, deja ecrit dans le HTML.
   ======================================================================== */

.encart.ok.cotes {
	border: 0;
	border-left: 5px solid #1f7a45;
	border-right: 5px solid #1f7a45;
	background: #f2f9f4;
	border-radius: 10px;
	padding: 22px 24px;
	margin: 24px 0;
}

.encart.action.double {
	border: 0;
	border-left: 5px solid var(--orange);
	border-right: 5px solid var(--orange);
	border-radius: 10px;
	background: linear-gradient(180deg, #f4f7fc 0%, #eef2f9 100%);
	padding: 22px 24px;
	margin: 26px 0;
}

.encart.avert.double {
	border: 0;
	border-left: 5px solid var(--bleu);
	border-right: 5px solid var(--bleu);
	border-radius: 10px;
	background: linear-gradient(180deg, #fff6ea 0%, #fdefdd 100%);
	padding: 22px 24px;
	margin: 26px 0;
}

/* Le recapitulatif d'un acte consulte prend lui aussi les deux traits : il
   porte le contenu scelle, pas un simple resume. */
dl.recap.double {
	border: 0;
	border-left: 5px solid #1f7a45;
	border-right: 5px solid #1f7a45;
	background: #f7fbf8;
}

/* LE BOUTON ORANGE — l'action qui engage.
   Le bleu est la couleur de ce qu'on consulte ; l'orange, de ce qui remplace
   ou depose. Deux boutons cote a cote de la meme couleur laissent choisir au
   hasard. */
.bouton.orange {
	background: var(--orange);
	color: #ffffff;
	border-color: var(--orange-fonce);
}

.bouton.orange:hover { background: var(--orange-fonce); }

/* DE L'AIR ENTRE LES QUESTIONS — demande du 26/08.
   Les rubriques se suivaient sans respiration : on ne voyait plus ou finissait
   une question et ou commencait la suivante, et le formulaire se lisait comme
   un mur. */
/* ===========================================================================
   UNE QUESTION, UNE CARTE

   LE TRAIT QUI DEPASSAIT A DROITE DES QUESTIONS venait du <fieldset> : le
   navigateur lui pose une bordure, et le <legend> la perce en haut a gauche.
   Ce qui restait de cette bordure — le morceau a droite du titre — donnait ces
   traits mal alignes que le chef de projet a releves, et qu'aucune regle
   d'espacement ne pouvait corriger.

   On ferme donc la bordure native, et l'on encadre volontairement : chaque
   question devient une carte, avec son titre et ses reponses dedans. On sait
   ou l'on est parce que la question et ses reponses tiennent ensemble.
   ======================================================================== */
/* LES DEUX TRAITS, ICI AUSSI — releve du 02/09.
   La regle des paves ne les atteignait pas : ce sont des <fieldset>, pas des
   .encart, et la regle de fin de feuille ne nomme que .encart. Une carte de
   question est un pave comme un autre ; elle se trace comme les autres. */
fieldset.rubrique {
	border: 0;
	border-left: 5px solid var(--bleu);
	border-right: 5px solid var(--bleu);
	border-radius: 10px;
	background: #ffffff;
	margin: 0 0 14px;
	padding: 16px 18px 12px;
	min-width: 0;   /* sans cela un fieldset refuse de retrecir en grille */
}

/* Une question conditionnelle — l'urne apres une cremation — se distingue :
   elle n'apparait que pour certaines reponses, et sa bordure orange le dit.
   LES DEUX COTES, sinon la carte serait bleue d'un bord et orange de l'autre. */
fieldset.rubrique[data-si] {
	border-left-color: var(--orange);
	border-right-color: var(--orange);
}

.rubrique legend {
	float: none;
	width: auto;
}

/* LES REPONSES : DES LIGNES CLIQUABLES, PAS DES RONDS PERDUS.
   Toute la ligne repond, pas seulement le rond de six pixels — c'est ce qui
   fait la difference sur un telephone. */
.rubrique .choix {
	margin: 0;
	border-top: 1px solid #f0ece7;
}

.rubrique .choix:first-of-type { border-top: 0; }

/* Le rond et son libelle sur une ligne, et TOUTE la ligne repond : le label
   s'etend jusqu'au bord. Sur un telephone, viser un rond de six pixels est
   une epreuve ; viser une ligne ne l'est pas. */
.rubrique .choix {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
}

.rubrique .choix input {
	flex: 0 0 auto;
	cursor: pointer;
	accent-color: var(--bleu);
	margin: 0;
}

.rubrique .choix label {
	flex: 1 1 auto;
	padding: 10px 2px;
	cursor: pointer;
	font-weight: 500;
	color: #3d3833;
	line-height: 1.35;
}

.rubrique .choix input:checked + label {
	color: var(--nuit);
	font-weight: 700;
}

/* LA QUESTION COLLE A SES REPONSES — demande du 26/08.
   Il y avait l'espace d'un paragraphe entre l'intitule et le premier choix :
   assez pour qu'on ne voie plus qu'ils vont ensemble, et que le regard doive
   remonter pour verifier a quoi l'on repond. */
.rubrique legend {
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--nuit);
	padding: 0;
	margin: 0 0 4px;
	line-height: 1.35;
}

.rubrique legend + .aide { margin-top: 0; margin-bottom: 6px; }

/* DEUX COLONNES SUR GRAND ECRAN. Dix questions a trois reponses font une
   colonne de deux metres : on ne voit jamais plus d'une question a la fois, et
   l'on perd le fil. Sur telephone, une seule colonne — la grille s'en charge
   toute seule. */
.questions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	align-items: start;
	margin-bottom: 8px;
}

.questions fieldset.rubrique { margin: 0; }
.rubrique .case:first-of-type { margin-top: 0; }

/* Le nombre de personnes, dit en premier et seul. */
.aide-titre { font-size: 1rem; color: var(--nuit); font-weight: 600; margin-bottom: 4px; }

/* LE CHOIX DU MOMENT : encadre, parce qu'il ne ressemble a aucun autre.
   Les dix questions disent CE QU'ON VEUT ; celle-ci dit QUI LE SAURA, ET
   QUAND. Elle merite qu'on s'arrete dessus. */
/* Le pave du moment vient AVANT les personnes : il annonce ce qu'elles
   recevront. Un peu d'air le separe de la designation qui suit. */
.rubrique-grave { margin-bottom: 26px; }

.rubrique-grave {
	border: 0 !important;
	border-left: 5px solid var(--orange) !important;
	border-right: 5px solid var(--orange) !important;
	border-radius: 10px;
	background: #fffdf9;
	padding: 20px 22px !important;
	margin-top: 34px;
}

.case-moment { align-items: flex-start; background: #ffffff; }

/* ===========================================================================
   LES QUATRE PERSONNES, EN QUATRE PAVES — demande du 26/08.

   Les champs se suivaient en colonne : douze lignes de saisie d'affilee, sans
   rien qui dise ou finissait une personne et ou commencait la suivante. Un
   cadre par personne, et le lien entre le nom et l'adresse se voit.
   ======================================================================== */
/* UNE PERSONNE PAR LIGNE — arbitrage du 26/08.
   Deux paves cote a cote faisaient lire en Z : nom, nom, adresse, adresse. On
   remplit une fiche apres l'autre, pas deux de front. */
.proches {
	display: block;
	margin: 4px 0 0;
}

.proches .proche + .proche { margin-top: 14px; }

/* Sur une ligne pleine, les deux champs d'une meme personne tiennent cote a
   cote : le nom et son adresse se lisent ensemble, et le pave reste compact. */
@media (min-width: 620px)
{
	.proche .champs {
		display: grid;
		grid-template-columns: 1fr 1.3fr;
		gap: 14px;
	}
}

/* PAS DE TRAIT DE COULEUR SUR LES PETITS PAVES — demande du 02/09.
   Le grand bloc « Les personnes à prévenir » porte desormais ses deux traits
   bleus. Quatre paves a l'interieur portant chacun le leur, a quelques pixels
   du premier, faisaient une echelle : on ne savait plus quel trait delimitait
   quoi. Le contenant marque, le contenu se contente d'un filet. */
.proche {
	border: 1px solid var(--trait);
	border-radius: 8px;
	background: var(--fond);
	padding: 14px 16px;
}

.proche .rang {
	display: block;
	font-weight: 700;
	color: var(--nuit);
	font-size: 0.95rem;
	margin-bottom: 10px;
}

.proche p { margin: 0 0 10px; }
.proche p:last-child { margin-bottom: 0; }
.proche label { display: block; font-size: 0.86rem; color: #6b6560; margin-bottom: 3px; }
.proche input { width: 100%; box-sizing: border-box; }

/* Un pave dont le contact est fautif se repere sans lire. */
.proche.proche-erreur { border-color: #c0392b; background: #fdf3f2; }
.proche .erreur { color: #c0392b; font-weight: 600; font-size: 0.86rem; margin-top: 6px; }
.case-moment span { font-size: 14px; line-height: 1.55; }
.case-moment strong { font-size: 1rem; color: var(--nuit); }


/* LE PAVE D'INFORMATION : meme cadre que les paves d'action, sans le bouton.
   Demande du 26/08 pour l'avertissement E-Transactions. Il annonce ou l'on va
   et ce qui ne transite pas : c'est la derniere chose lue avant de payer, elle
   ne doit pas ressembler a une note de bas de page. */
.encart.info {
	border: 0;
	border-left: 5px solid var(--orange);
	border-right: 5px solid var(--orange);
	background: linear-gradient(180deg, #f4f7fc 0%, #eef2f9 100%);
	border-radius: 10px;
	padding: 20px 22px;
	margin: 24px 0;
}

.encart.info p { margin: 0; font-size: 1.02rem; color: #4a443f; }

/* LE PAVE INVERSE : fond orange pale, bordures bleues des deux cotes.
   Demande du 26/08 pour l'avertissement E-Transactions et pour le retour d'un
   paiement annule. Les deux paves se suivent a l'ecran ; inverser les couleurs
   les distingue sans changer de vocabulaire — meme forme, meme epaisseur, deux
   roles. */
.encart.avert {
	border: 0;
	border-left: 5px solid var(--bleu);
	border-right: 5px solid var(--bleu);
	background: linear-gradient(180deg, #fff6ea 0%, #fdefdd 100%);
	border-radius: 10px;
	padding: 20px 22px;
	margin: 24px 0;
}

.encart.avert p { margin: 0 0 10px; font-size: 1.02rem; color: #4a443f; }
.encart.avert p:last-child { margin-bottom: 0; }

/* Le montant a regler prend le cadre bleu borde d'orange, comme les autres
   blocs d'information. Il gardait un style a lui, herite de l'ancien socle. */
.encart.info .montant {
	display: flex;
	margin-bottom: 8px;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.encart.info .montant .libelle { color: #4a443f; font-size: 1.02rem; }

/* Une valeur textuelle — la garantie — ne prend pas le corps d'un chiffre :
   elle se lit, elle ne se compare pas. */
.encart.info .montant .valeur-texte {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bleu);
	text-align: right;
}

.encart.info .montant .valeur {
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--bleu);
	letter-spacing: -0.01em;
}

/* LE CADRE VERT DE LA SIGNATURE — demande du 26/08.
   Un acte signe et scelle merite d'etre encadre autrement qu'un message de
   confirmation ordinaire : c'est la COULEUR qui le dit, plus le trace. */
.encart.ok.scelle {
	border: 0;
	border-left: 5px solid #1f7a45;
	border-right: 5px solid #1f7a45;
	background: #f2f9f4;
	border-radius: 10px;
	padding: 22px 24px;
	/* L'ombre interne dessinait une SECONDE ligne : c'etait un double trait
	   deguise, et il revenait par la fenetre apres avoir ete sorti par la
	   porte. Retiree. */
}

/* L'empreinte, dans le cadre : discrete mais lisible, et sur une ligne a elle
   pour qu'un copier-coller ne ramasse pas la phrase d'a cote. */
.encart.ok.scelle .empreinte {
	margin-top: 10px;
	font-size: 0.9rem;
	color: #46654f;
}

/* LE BANDEAU D'ETAT : toute la largeur, centre.
   « Garantie Suspendue » n'est pas une valeur a ranger en face d'un intitule :
   c'est l'etat du contrat, et il doit se lire d'un coup d'oeil au lieu de se
   perdre dans la colonne des montants. Demande du 26/08. */
dl.recap dd.bandeau {
	grid-column: 1 / -1;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 10px 0;
}

dl.recap dd.bandeau.etat-attente { color: var(--orange-fonce); }

/* PAS DE PASTILLE SUR LE BANDEAU — demande du 26/08.
   Elle a du sens en face d'une valeur, dans une colonne : elle donne l'etat
   avant meme la lecture. Sur un bandeau centre qui NE DIT QUE l'etat, elle
   double le message et decentre le texte de quelques pixels. */
dl.recap dd.bandeau::before { content: none !important; }
dl.recap dd.bandeau.etat-alerte  { color: #c0392b; }
dl.recap dd.bandeau.etat-ok      { color: #1f7a45; }

/* =============================================================================
   ARBITRAGES DU 23/08 — chef de projet
   ============================================================================= */

/* =============================================================================
   LES COULEURS VIENNENT DU LOGO, ET ELLES ONT ETE MESUREES
   =============================================================================

   Consigne du 23/08 : « quand je dis bleu, toujours appliquer le bleu du logo
   qui tend vers navy ».

   Les deux teintes sont relevees pixel par pixel dans pic/logo.jpg, pas
   choisies a l'oeil : le bleu du lettrage ressort a #212772, l'orange du trait
   a #F07C02. Une couleur approchee se voit immediatement a cote du logo, et
   c'est le genre de detail qui fait dire d'un site qu'il n'est pas fini. */
:root {
	--bleu:       #212772;   /* mesure sur logo.jpg — le navy du lettrage */
	--bleu-fonce: #171b52;
	--bleu-pale:  #eef0f8;
}

/* LE BOUTON EST BLEU, LA MARQUE RESTE ORANGE.
   L'orange porte les traits et les encarts ; un bouton de la meme couleur que
   la decoration ne se distingue plus de la decoration. */
/* UN BOUTON PORTE TOUT LE STYLE, PAS SEULEMENT SA COULEUR DE FOND.
   Cette regle ne posait que « background ». Les boutons de l'ecran du code
   n'ayant pas la classe « bouton », ils gardaient la couleur de texte par
   defaut du navigateur — du gris fonce sur du bleu marine, donc illisibles.
   Ils fonctionnaient : on ne les lisait pas. */
.bouton,
button[type="submit"] {
	display: block;
	width: 100%;
	padding: 15px 20px;
	font-size: 17px;
	font-family: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--bleu);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background 120ms ease;
}

.bouton:hover,
button[type="submit"]:hover { background: var(--bleu-fonce); color: #fff; }

/* L'action secondaire ne rivalise pas avec l'action principale : sur l'ecran
   du code, « recommencer » ne doit pas avoir le meme poids que « entrer ». */
.discret button[type="submit"] {
	background: transparent;
	color: var(--bleu);
	font-weight: 600;
	font-size: 15px;
	padding: 10px;
	border: 1px solid #d6d1ca;
}

.discret button[type="submit"]:hover {
	background: var(--bleu-pale);
	color: var(--bleu-fonce);
}

/* LES LIBELLES REVIENNENT AU BLEU.
   Ils l'etaient, je les avais laisses passer au gris en reprenant les
   indications — c'est une regression, signalee en recette. Le libelle porte la
   question, l'indication ne fait que la preciser : les deux ne peuvent pas
   avoir le meme poids visuel. */
label {
	color: var(--bleu);
	font-weight: 600;
}

/* LE TITRE : centre, souligne d'orange, et le trait plus pres du texte
   qu'il ne l'etait — 10 px au lieu de 18. */
h1.centre {
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--orange);
	margin-bottom: 26px;
}

/* LE MEME TRAIT EN BAS, au-dessus du pied de page. Le contenu est ainsi tenu
   entre deux traits de la meme couleur : la page a un debut et une fin, au lieu
   de s'arreter. */
.pied {
	border-top: 3px solid var(--orange);
}

/* LA BARRE DE L'ESPACE : les onglets a gauche, la deconnexion a droite. */
.barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.barre .etapes { margin: 0; flex: 1 1 auto; }

/* Le bouton de sortie ne rivalise pas avec l'action de la page : present,
   lisible, discret. Se deconnecter n'est pas ce qu'on vient faire. */
.bouton.sortir {
	background: #6b6560;
	padding: 8px 16px;
	font-size: 0.92rem;
	flex: 0 0 auto;
}

.bouton.sortir:hover { background: #514c48; }

/* L'encart qui porte le bouton de paiement dans « Mon compte ». */
.encart.action {
	border-left: 4px solid var(--orange);
	border-right: 4px solid var(--orange);
	background: var(--bleu-pale);
}

/* Les indications sous les libelles : grises, petites, sans point final, et
   collees au champ qu'elles precisent. */
.aide {
	display: block;
	color: #6b6560;
	font-size: 0.88rem;
	margin: 2px 0 6px;
	font-weight: 400;
}

/* =============================================================================
   L'ESPACE ADHERENT — refonte visuelle du 25/08
   =============================================================================

   Constat du chef de projet : « trop lineaire, pas visuel ».

   L'ecran etait une suite de <dt>/<dd> gris, sans hierarchie : le numero
   d'adherent avait le meme poids que le montant a regler. Rien ne disait ou
   regarder.

   Trois principes, et rien de plus :

     1  UNE SEULE COULEUR D'ACTION. Le bleu du logo porte ce sur quoi on clique.
        L'orange reste la marque : traits, titres, accents. Un ecran ou tout est
        colore ne met rien en avant.

     2  LE MONTANT DU EST LA SEULE CHOSE QUI CRIE. C'est la raison d'etre de la
        page pour qui doit de l'argent, et la seule information qui appelle un
        geste.

     3  APAISANT VEUT DIRE PEU DE BRUIT. On parle de dernieres volontes a des
        gens qui n'ont pas envie d'etre la. Pas d'ombres marquees, pas
        d'animations, pas de rouge ailleurs que sur une alerte.
   ============================================================================= */

/* --- LA CARTE, RESPIRATION ------------------------------------------------ */
.carte { padding: 28px 30px 34px; }

.bonjour {
	font-size: 1.05rem;
	color: var(--bleu);
	font-weight: 600;
	margin: 0 0 14px;
}


/* --- L'EN-TETE : QUI EST CONNECTE, ET LA SORTIE ------------------------- */
.entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

.bonjour { margin: 0; font-size: 1.05rem; color: #6b6560; font-weight: 400; }
.bonjour strong { color: var(--bleu); font-weight: 700; }

/* La sortie est a droite, discrete, et ne ressemble pas a un bouton d'action :
   se deconnecter n'est pas ce qu'on vient faire. */
.entete .sortie {
	color: #8a837c;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 14px;
	border: 1px solid var(--orange);
	border-radius: 6px;
	white-space: nowrap;
}

/* L'ICONE EST DANS LE HTML, PLUS DANS LE CSS — et c'est une correction.
   Elle etait posee par un echappement CSS vers la fleche vers la droite,
   que l'ecriture du fichier a aplati : il n'en restait qu'un caractere de
   controle suivi de « 92 », affiche tel quel a cote de « Se deconnecter »
   pendant trois jours. Un echappement CSS traverse une chaine d'outils qui
   peuvent tous le manger ; un trace SVG, non. */
.entete .sortie svg {
	width: 15px;
	height: 15px;
	margin-right: 7px;
	vertical-align: -2px;
	stroke: var(--orange);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.entete .sortie:hover { background: #f2efeb; color: #4a443f; border-color: #c9c3bb; }


/* --- LE MENU : DEUX ONGLETS, MOITIE-MOITIE ------------------------------- */
/*
   MEME BLEU PARTOUT — c'est le liseret orange qui designe l'onglet actif.
   Consigne du 25/08.

   Assombrir l'onglet courant, comme je l'avais fait, donnait deux signaux qui
   disent la meme chose et une barre qui n'a plus d'unite. Un seul fond, et un
   trait franc sous celui ou l'on se trouve : c'est plus lisible, et ca marche
   aussi quand l'ecran est mal calibre.
*/
.onglets {
	display: flex;
	margin: 0 0 26px;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.onglet {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 12px;
	text-decoration: none;
	color: #fff;
	background: var(--bleu);
	font-weight: 600;
	font-size: 1.02rem;
	text-align: center;
	border-bottom: 4px solid transparent;
	transition: border-color 120ms ease;
}

.onglet + .onglet { border-left: 1px solid rgba(255,255,255,0.22); }

.onglet:hover { color: #fff; border-bottom-color: rgba(240,124,2,0.45); }

/* L'ONGLET ACTIF : le liseret orange, et lui seul. */
.onglet.actif { border-bottom-color: var(--orange); font-weight: 800; }

/* UN ONGLET FERME — visible, et qui ne se clique pas.

   Demande du chef de projet, 05/09 : « bloquer le menu Dernieres volontes,
   garder le lien sans clic ». La rubrique arrive ; l'adherent doit le savoir
   plutot que de la voir apparaitre un jour sans prevenir.

   C'est un <span>, pas un <a> grise : rien a desactiver, rien qui reprenne le
   focus au clavier. Le curseur par defaut le dit aussi — pas de main, donc
   pas de promesse de clic.

   ON NE COMPTE PAS SUR L'OPACITE SEULE pour porter l'information : le mot
   « bientot » est ecrit, et aria-disabled l'annonce aux lecteurs d'ecran. Un
   onglet simplement pali se lit comme un defaut d'affichage. */
.onglet.ferme {
	opacity: 0.62;
	cursor: default;
	font-weight: 600;
	border-bottom-color: transparent;
}

.onglet.ferme:hover { border-bottom-color: transparent; }

.onglet.ferme .onglet-texte { display: flex; flex-direction: column; }

.onglet.ferme small {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.85;
}

.onglet-icone { font-size: 1.1rem; line-height: 1; }

@media (max-width: 430px) {
	.onglet { font-size: 0.92rem; padding: 13px 8px; gap: 6px; }
}


/* --- LES BLOCS D'INFORMATION ---------------------------------------------- */
h2 {
	font-size: 1.05rem;
	color: var(--bleu);
	font-weight: 700;
	margin: 30px 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--orange-pale);
}

/* Le recapitulatif passe en deux colonnes : le libelle gris et discret, la
   valeur noire et grasse. C'est la valeur qu'on vient lire, pas l'etiquette. */
dl.recap {
	display: grid;
	grid-template-columns: minmax(140px, 34%) 1fr;
	gap: 0;
	margin: 0 0 6px;
	background: #faf8f5;
	border-radius: 8px;
	overflow: hidden;
}

dl.recap dt {
	padding: 11px 16px;
	color: #6b6560;
	font-size: 0.92rem;
	font-weight: 500;
	border-bottom: 1px solid #efebe5;
}

dl.recap dd {
	margin: 0;
	padding: 11px 16px;
	color: var(--nuit);
	font-weight: 600;
	border-bottom: 1px solid #efebe5;
	overflow-wrap: anywhere;
}

dl.recap dt:last-of-type,
dl.recap dd:last-of-type { border-bottom: 0; }


/* --- L'ENCART D'ACTION : LE MONTANT A REGLER ------------------------------ */
/* LES DEUX BORDS SONT ORANGE — demande du 26/08.
   Le bleu est la couleur du texte et des liens : une barre bleue a gauche d'un
   pave se confond avec le reste de la page. L'orange est la couleur d'appel du
   logo, et il n'est utilise nulle part ailleurs pour encadrer. Les deux cotes
   plutot qu'un seul : le pave devient un bloc ferme, qu'on ne lit plus comme
   une citation. */
.encart.action {
	border: 0;
	border-left: 5px solid var(--orange);
	border-right: 5px solid var(--orange);
	background: linear-gradient(180deg, #f4f7fc 0%, #eef2f9 100%);
	border-radius: 10px;
	padding: 22px 24px;
	margin: 26px 0;
}

.encart.action p { margin: 0 0 14px; font-size: 1.05rem; color: #4a443f; }
.encart.action p:last-child { margin-bottom: 0; }

/* LA SOMME EST EN GRAS, PAS EN GRAND — consigne du 26/08, deux fois donnee.
   Elle etait en 1,7 rem : sur un pave qui porte deja la garantie et le montant
   en recapitulatif, un chiffre trois fois plus gros que le reste ecrase tout et
   fait perdre la ligne qu'il commente. Le gras suffit a le trouver du regard. */
.encart.action .somme {
	font-weight: 800;
	color: var(--bleu);
}

.encart.action .bouton { width: auto; padding: 14px 30px; }

/* LE RECAPITULATIF DANS UN PAVE. Les traits de separation s'effacent : sur un
   fond deja teinte et borde, ils ajoutent du bruit sans rien separer de plus. */
.encart.action dl.recap { margin: 0 0 4px; }
.encart.action dl.recap dt,
.encart.action dl.recap dd { border-bottom: 0; padding: 4px 0; }

/* LE BOUTON EST CENTRE, LE TEXTE NE L'EST PAS. Demande du 26/08. Un bouton
   colle a gauche sous un paragraphe se lit comme une note de bas de page ;
   centre, il redevient l'action de l'encart. Le paragraphe, lui, reste aligne
   a gauche : une phrase de deux lignes centree se lit mal. */
.action-bouton { text-align: center; }
.encart.action p.action-bouton { margin-top: 18px; }


/* --- LES ENCARTS D'ETAT --------------------------------------------------- */
.encart {
	border-radius: 10px;
	padding: 16px 20px;
	margin: 20px 0;
	border-left: 5px solid var(--orange);
	background: var(--orange-pale);
}

.encart p { margin: 0 0 8px; }
.encart p:last-child { margin-bottom: 0; }

.encart.ok      { border-left-color: #2e7d54; background: #eef7f1; }
.encart.refus   { border-left-color: #a4161a; background: #fdeeee; }
.encart.attente { border-left-color: var(--orange); background: var(--orange-pale); }


/* --- LES DOCUMENTS -------------------------------------------------------- */
ul.documents { list-style: none; padding: 0; margin: 10px 0 0; }

ul.documents li { margin: 0 0 8px; }

ul.documents a {
	display: block;
	padding: 12px 16px;
	background: #faf8f5;
	border: 1px solid #e6e1da;
	border-radius: 8px;
	color: var(--bleu);
	font-weight: 600;
	text-decoration: none;
}

ul.documents a:hover { background: var(--bleu-pale); border-color: var(--bleu); }


/* --- LE TELEPHONE, PLUS DISCRET ------------------------------------------- */
.pied { padding-top: 20px; margin-top: 30px; }
.pied a { color: var(--bleu); text-decoration: none; font-weight: 700; }
.pied a:hover { text-decoration: underline; }

/* --- LES ETATS DE COTISATION ---------------------------------------------
   Trois etats, trois couleurs, et un point devant : celui qui distingue mal
   les couleurs garde le mot, qui suffit — « Soldée », « Non payée »,
   « Suspendue » ne se confondent pas. La couleur accelere la lecture, elle ne
   la porte pas seule. */
dl.recap dd.etat-ok,
dl.recap dd.etat-alerte,
dl.recap dd.etat-attente { font-weight: 700; }

dl.recap dd.etat-ok      { color: #1f7a45; }
dl.recap dd.etat-alerte  { color: #a4161a; }
dl.recap dd.etat-attente { color: #b45309; }

/* --- LA QUESTION RESTEE SANS REPONSE ---------------------------------------
   « Je ne me prononce pas » est une reponse, et elle s'affiche comme les
   autres — mais pas avec le meme poids. En gras, au milieu de vrais choix,
   elle se lirait comme une decision arretee.

   NI POINT DE COULEUR, NI GRAS : les trois etats au-dessus signalent quelque
   chose a faire. Ici, il n'y a rien a faire — c'est un silence, et il se
   montre sans s'imposer. Meme traitement que sur le PDF, deliberement : le
   papier et l'ecran doivent se ressembler. */
dl.recap dd.etat-muet {
	color: #6e6e6e;
	font-weight: 400;
	font-style: italic;
}

dl.recap dd.etat-ok::before,
dl.recap dd.etat-alerte::before,
dl.recap dd.etat-attente::before {
	content: "";
	display: inline-block;
	width: 9px; height: 9px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: baseline;
	background: currentColor;
}

.actions { margin: 18px 0 0; }
.actions .bouton { width: auto; display: inline-block; padding: 14px 30px; }

/* --- LES ACTIONS DU RECUEIL ---------------------------------------------- */
/*
   UNE ACTION PRINCIPALE, UNE SECONDAIRE, ET ON LES DISTINGUE.

   « Relire avant de deposer » et « Enregistrer et continuer plus tard »
   avaient le meme poids : deux boutons identiques cote a cote, et l'adherent
   hesitait a chaque visite. Le premier mene au depot — c'est le but ; le
   second est un filet.
*/
.actions-centre { text-align: center; }

/* LA CLASSE « centre » N'EXISTAIT QUE POUR LES TITRES — h1.centre, et rien
   d'autre. Tout « class="... centre" » pose ailleurs ne faisait donc
   strictement rien, en silence : le lien restait a gauche et l'on pouvait
   croire la consigne appliquee. Elle vaut desormais pour n'importe quel
   element.

   Consigne du 26/08 : le lien de retour se centre SOUS le bouton d'action,
   partout. Le regard descend le long de l'axe du bouton ; un lien colle a
   gauche sort de cet axe et se perd. */
.centre { text-align: center; }

/* L'ACTION PRINCIPALE PORTE LA COULEUR DE LA MARQUE.
   L'orange n'est utilise nulle part ailleurs comme fond de bouton : quand il
   apparait, c'est qu'on est au moment qui compte. */
.bouton-marque,
button.bouton-marque {
	background: var(--orange);
	display: inline-block;
	width: auto;
	padding: 15px 34px;
}

.bouton-marque:hover,
button.bouton-marque:hover { background: var(--orange-fonce); }

/* L'ACTION SECONDAIRE N'EST PAS UN BOUTON — c'est un lien.
   Lui donner un cadre l'aurait remis au meme niveau que l'action principale,
   ce qu'on cherche precisement a eviter. */
.sous-action { margin-top: 14px; }

.lien-action {
	background: none;
	border: 0;
	padding: 4px;
	width: auto;
	color: var(--bleu);
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.lien-action:hover { background: none; color: var(--bleu-fonce); }

/* Une rubrique masquee par le script ne doit pas laisser de trou. */
fieldset.rubrique[hidden] { display: none; }

/* Le texte d'un acte ou d'un engagement : lisible, encadre, sans fioriture.
   On lit ce qu'on signe — ce n'est pas un endroit pour faire joli. */
/* LE TEXTE DE LA CARTE : BLEU DES DEUX COTES — demande du 26/08.
   L'orange marque ce sur quoi on APPUIE : les paves d'action et leurs boutons.
   Ce cadre-ci ne se clique pas, il se lit — c'est l'engagement lui-meme, celui
   qu'on signera. Lui donner la couleur d'un bouton le faisait passer pour une
   action de plus au milieu des autres. */
.acte {
	background: #faf8f5;
	border-left: 4px solid var(--bleu);
	border-right: 4px solid var(--bleu);
	border-radius: 8px;
	padding: 20px 22px;
	margin: 22px 0;
	line-height: 1.65;
	white-space: normal;
}

.empreinte { font-size: 0.85rem; color: #8a837c; }
.empreinte code { background: #f2efeb; padding: 2px 6px; border-radius: 4px; }


/* ===========================================================================
   ELLE EST EN FIN DE FEUILLE, ET C'EST DELIBERE.

   A specificite egale, la derniere regle l'emporte. Posee plus haut, elle
   etait annulee par les blocs anciens qui posaient encore un bord simple — la
   regle existait, elle ne s'appliquait pas, et l'on aurait cherche pourquoi
   dans le HTML.

   Toute variante d'encart ajoutee plus haut passera desormais sous celle-ci.
   ======================================================================== */
.encart {
	border-style: none solid;
	border-left-width: 5px;
	border-right-width: 5px;
	border-radius: 10px;
}

.encart          { border-color: var(--trait); }
.encart.ok       { border-color: #1f7a45; }
.encart.info     { border-color: var(--orange); }
.encart.action   { border-color: var(--orange); }
.encart.avert    { border-color: var(--bleu); }
.encart.attente  { border-color: var(--orange); }
.encart.bonne    { border-color: #1f7a45; }
.encart.refus,
.encart.grave    { border-color: #c0392b; }

/* LES VARIANTES QUI PORTAIENT ENCORE UN DOUBLE TRAIT.
   Elles gardent leur nom de classe — « double » est ecrit dans le HTML de
   plusieurs ecrans — mais plus son trace : le double trait est remplace
   partout par un trait plein, seule forme retenue. */
.encart.ok.cotes,
.encart.ok.scelle,
.encart.action.double,
.encart.avert.double {
	border-style: none solid;
	border-left-width: 5px;
	border-right-width: 5px;
}


/* =============================================================================
   LA PAGE DE SUIVI — un tableau de chiffres, et rien d'autre

   Elle n'est pas vue par les adherents : c'est une page de pilotage, ouverte
   par un jeton. Elle reutilise donc tout ce qui existe — dl.recap, les encarts,
   les etats — et n'ajoute que ce qu'aucun ecran de l'espace ne demandait : un
   tableau a plusieurs colonnes.
   ========================================================================== */

.suivi h2 {
	margin: 30px 0 10px;
	font-size: 1.12rem;
	color: var(--bleu);
	border-bottom: 2px solid var(--bleu);
	padding-bottom: 5px;
}

.suivi h3 {
	margin: 20px 0 8px;
	font-size: 1rem;
	color: var(--bleu);
}

/* UN TABLEAU NE SE COMPRIME PAS SOUS 360 PIXELS. Il defile dans SA boite —
   jamais la page entiere, sinon tout le reste part de travers avec lui. */
.tableau-large {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 16px;
}

table.stats {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	min-width: 380px;
}

table.stats th,
table.stats td {
	padding: 8px 10px;
	text-align: right;
	border-bottom: 1px solid #e3e6ea;
}

/* La premiere colonne porte le jour : elle se lit a gauche, comme un libelle. */
table.stats th:first-child,
table.stats td:first-child { text-align: left; }

table.stats thead th {
	background: var(--bleu);
	color: #fff;
	font-weight: 700;
	border-bottom: 0;
}

/* Une ligne sur deux : sur trente lignes de chiffres, l'oeil perd la sienne. */
table.stats tbody tr:nth-child(even) { background: #f6f8fa; }