/* ===========================================================================
 * 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; }

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

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

     .encart.ok.cotes    vert, bordures gauche et droite   ce qui est acquis
     .encart.ok.scelle   vert, double bordure              ce qui est scelle
     .encart.action.double   bleu, double bordure orange   ce qui engage
     .encart.avert.double    orange, double bordure bleue  ce qui est grave

   La double bordure n'est pas un ornement : elle marque les ecrans ou l'on
   depose ou relit un acte, par opposition aux ecrans ou l'on consulte.
   ======================================================================== */

.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: 4px double var(--orange);
	border-radius: 10px;
	background: linear-gradient(180deg, #f4f7fc 0%, #eef2f9 100%);
	padding: 22px 24px;
	margin: 26px 0;
}

.encart.avert.double {
	border: 4px double 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 la double bordure : il
   porte le contenu scelle, pas un simple resume. */
dl.recap.double {
	border: 4px double #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. */
.rubrique { margin-bottom: 30px; padding-bottom: 26px; }
.rubrique + .rubrique { border-top: 1px solid var(--trait); padding-top: 26px; }
.rubrique:last-of-type { border-bottom: 0; }

/* 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 : DOUBLE BORDURE — demande du 26/08.
   Un acte signe et scelle merite d'etre encadre autrement qu'un message de
   confirmation ordinaire. La double ligne se voit sans crier. */
.encart.ok.scelle {
	border: 3px double #1f7a45;
	border-left: 3px double #1f7a45;
	background: #f2f9f4;
	border-radius: 10px;
	padding: 22px 24px;
	box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 5px #cfe7d8;
}

/* 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; }

.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; }

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; }