/* Espace client Compta-Form — feuille de style autonome, préfixée .cf-ec */

.cf-ec {
	--cf-bleu: #1a4d8f;
	--cf-bleu-fonce: #143c6f;
	--cf-encre: #1d2327;
	--cf-gris: #6b7280;
	--cf-bord: #e2e5ea;
	--cf-fond: #f6f7f9;
	color: var(--cf-encre);
	font-size: 16px;
	line-height: 1.6;
	max-width: 900px;
	margin: 0 auto;
}

.cf-ec *,
.cf-ec *::before,
.cf-ec *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- Conteneurs */

/* Un formulaire de connexion étalé sur 900 px est illisible : le regard perd
   la ligne entre l'étiquette et le champ. */
.cf-ec-login { max-width: 520px; }
.cf-ec-space { padding-bottom: 8px; }
.cf-ec-topup { margin: 0; }
.cf-ec-signers:empty { display: none; }

/* ------------------------------------------------------------------ Cartes */

.cf-ec-card {
	background: #fff;
	border: 1px solid var(--cf-bord);
	border-radius: 12px;
	padding: 24px;
	margin: 0 0 18px;
}

.cf-ec-h2 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
.cf-ec-h3 { font-size: 18px; line-height: 1.3; margin: 0 0 10px; }
.cf-ec-lead { margin: 0 0 14px; color: #374151; }
.cf-ec-fine { margin: 8px 0 0; font-size: 13px; color: var(--cf-gris); }
.cf-ec-muted { color: var(--cf-gris); }
.cf-ec-link { color: var(--cf-bleu); text-decoration: underline; font-size: 14px; }

/* La déconnexion est un envoi, pas un lien — il faut donc défaire l'habillage
   que le navigateur et le thème donnent aux boutons pour qu'elle en ait
   malgré tout l'apparence. */
button.cf-ec-link {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 14px;
	line-height: inherit;
	cursor: pointer;
}
button.cf-ec-link:hover { color: var(--cf-bleu-fonce); }
.cf-ec-logout { margin: 0; }

.cf-ec-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}
.cf-ec-head p { margin: 0; }

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

.cf-ec-btn {
	display: inline-block;
	background: var(--cf-bleu);
	color: #fff;
	border: 1px solid var(--cf-bleu);
	border-radius: 8px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}
.cf-ec-btn:hover { background: var(--cf-bleu-fonce); color: #fff; }
.cf-ec-btn:disabled { opacity: .5; cursor: not-allowed; }
.cf-ec-btn--wide { width: 100%; margin-top: 6px; }
/* « Continuer avec Google » (1.68.0) : un bouton en texte, blanc, bordé —
   distinct du bouton bleu d'envoi, sans aucune image chargée depuis ailleurs. */
/* 1.69.0 : le bouton suit la charte « Sign in with Google » — fond blanc,
   bordure #747775, texte #1f1f1f à 14 px demi-gras, « G » officiel de 20 px
   servi depuis ce site (assets/google-g.png : fichier fourni par Google,
   jamais redessiné). Rien n'est chargé depuis Google avant le clic. */
.cf-ec-btn--google {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 44px;
	background: #fff;
	color: #1f1f1f;
	border: 1px solid #747775;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	padding: 10px 16px;
}
.cf-ec-btn--google:hover { background: #f5f7fa; color: #1f1f1f; border-color: #1f1f1f; }
.cf-ec-gicon { width: 20px; height: 20px; flex: 0 0 20px; display: block; }
.cf-ec-google { border-color: var(--cf-bleu); }

/* Deux portes ou plus : côte à côte (décision de Paul du 15/09/2026), la
   première à gauche ; l'une sous l'autre dès que l'écran se resserre. */
.cf-ec-login--cotes { max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cf-ec-login--cotes > .cf-ec-note,
.cf-ec-login--cotes > .cf-ec-login__pied { grid-column: 1 / -1; }
.cf-ec-login--cotes > .cf-ec-card { margin: 0; }
.cf-ec-login__pied { margin-top: 4px; }
@media (max-width: 760px) {
	.cf-ec-login--cotes { grid-template-columns: minmax(0, 1fr); }
}

/* Les volets repliés de la carte e-mail (créer / oublié) : un trait au-dessus,
   le titre cliquable, rien d'autre tant qu'on ne les ouvre pas. */
.cf-ec-volet { border-top: 1px solid var(--cf-bord); margin: 16px 0 0; padding: 12px 0 0; }
.cf-ec-volet > summary { cursor: pointer; list-style: none; margin: 0; color: var(--cf-bleu); }
.cf-ec-volet > summary::-webkit-details-marker { display: none; }
.cf-ec-volet > summary::before { content: '▸ '; font-size: 14px; }
.cf-ec-volet[open] > summary::before { content: '▾ '; }
.cf-ec-volet[open] > summary { margin-bottom: 10px; }
.cf-ec-input--code { font-size: 28px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.cf-ec-code__annuler { margin: 0 0 18px; }
/* Deux générateurs côte à côte : ils passent l'un sous l'autre sur téléphone. */
.cf-ec-liens { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.cf-ec-btn--ghost { background: #fff; color: var(--cf-bleu); }
.cf-ec-btn--ghost:hover { background: var(--cf-fond); color: var(--cf-bleu); }
.cf-ec-btn--quiet {
	background: none;
	border-color: transparent;
	color: var(--cf-gris);
	font-weight: 500;
	padding: 11px 10px;
}
.cf-ec-btn--quiet:hover { background: var(--cf-fond); color: var(--cf-encre); }
.cf-ec-inline { display: inline; margin: 0; }

/* ------------------------------------------------------------ Formulaires */

.cf-ec-label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 5px; }
.cf-ec-input {
	width: 100%;
	padding: 11px 13px;
	font-size: 16px;
	border: 1px solid #c8ccd4;
	border-radius: 8px;
	background: #fff;
	color: var(--cf-encre);
}
.cf-ec-input:focus { outline: 2px solid var(--cf-bleu); outline-offset: 1px; border-color: var(--cf-bleu); }

/* Piège à robots : invisible mais accessible aux automates. */
.cf-ec-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- Messages */

.cf-ec-note {
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 15px;
	border: 1px solid;
}
.cf-ec-note--ok { background: #eef7f0; border-color: #bcdfc6; color: #1d4c2b; }
.cf-ec-note--ko { background: #fdf0ef; border-color: #f0c4c0; color: #7a2620; }

/* --------------------------------------------------------------- Compteurs */

.cf-ec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin: 0 0 18px;
}
.cf-ec-grid .cf-ec-card { margin: 0; }
.cf-ec-stat__k { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--cf-gris); }
.cf-ec-stat__v { margin: 4px 0 0; font-size: 30px; font-weight: 700; line-height: 1.1; }
.cf-ec-stat__v span { font-size: 17px; font-weight: 500; color: var(--cf-gris); }

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

.cf-ec-docs { list-style: none; margin: 0; padding: 0; }
.cf-ec-doc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--cf-bord);
}
.cf-ec-doc:first-child { border-top: 0; padding-top: 4px; }
.cf-ec-doc__main { flex: 1 1 260px; min-width: 0; }
.cf-ec-doc__t { margin: 0; font-weight: 600; }
.cf-ec-doc__m { margin: 4px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cf-ec-doc__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cf-ec-doc__acts .cf-ec-btn { padding: 8px 14px; font-size: 14px; }

.cf-ec-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	padding: 3px 10px;
}
.cf-ec-tag--neutre { background: #eef0f3; color: #414750; }
.cf-ec-tag--attente { background: #fff4e0; color: #8a5a08; }
.cf-ec-tag--ok { background: #e7f5ec; color: #1d6b3a; }
.cf-ec-tag--ko { background: #fdeceb; color: #8a2e26; }

/* ------------------------------------------------------------ Rechargement */

.cf-ec-amounts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.cf-ec-amount {
	flex: 1 1 130px;
	border: 1px solid var(--cf-bord);
	border-radius: 10px;
	padding: 14px;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s ease, background .15s ease;
}
.cf-ec-amount:hover { border-color: var(--cf-bleu); }
.cf-ec-amount:has(input:checked) { border-color: var(--cf-bleu); background: #f2f6fb; }
.cf-ec-amount input { margin: 0 0 6px; }
.cf-ec-amount__v { display: block; font-size: 19px; font-weight: 700; }
.cf-ec-amount__u { display: block; font-size: 13px; color: var(--cf-gris); }

/* --------------------------------------------------------------- Historique */

.cf-ec-histo summary { cursor: pointer; }
.cf-ec-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.cf-ec-table td { padding: 8px 0; border-top: 1px solid var(--cf-bord); }
.cf-ec-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ Fenêtre */

.cf-ec-modal {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, .55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	z-index: 99999;
}
.cf-ec-modal[hidden] { display: none; }
.cf-ec-modal__box {
	position: relative;
	background: #fff;
	border-radius: 14px;
	padding: 26px;
	width: 100%;
	max-width: 560px;
	margin: auto;
}
.cf-ec-modal__x {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--cf-gris);
	cursor: pointer;
	padding: 4px 8px;
}
.cf-ec-modal__acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

.cf-ec-signer {
	border: 1px solid var(--cf-bord);
	border-radius: 10px;
	padding: 14px;
	margin: 0 0 12px;
	position: relative;
}
.cf-ec-signer__row { display: flex; gap: 10px; flex-wrap: wrap; }
.cf-ec-signer__row > * { flex: 1 1 150px; }
.cf-ec-signer__x {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: 0;
	color: var(--cf-gris);
	cursor: pointer;
	font-size: 13px;
	text-decoration: underline;
}

/* -------------------------------------------------------------- Passerelle */

.cf-ec-bridge { margin: 24px auto; }
.cf-ec-bridge__card { border-left: 4px solid var(--cf-bleu); }

@media (max-width: 600px) {
	.cf-ec-card { padding: 18px; }
	.cf-ec-doc__acts { width: 100%; }
	.cf-ec-head { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------ 1.74.0 — Mon espace : le bandeau et les comptabilités */

/* 🔴 Le bandeau latéral (Paul, 17/09/2026 : « plutôt un bandeau sur le côté »)
   reprend la charte du logiciel de comptabilité — vert #1a4331, sélection or —
   et porte l'adresse, les quatre sections en ANCRES, une sous-entrée par
   comptabilité ouverte, et la déconnexion. Il est collant : il suit le
   défilement, et c'est le script qui souligne la section visible. Sur
   téléphone il devient une barre d'onglets au-dessus du contenu : les
   sous-entrées et l'adresse y sont masquées, la déconnexion devient une puce
   de plus (le formulaire reste le même, en UN exemplaire). */
.cf-ec.cf-ec-bande { max-width: 1040px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.cf-ec-side { position: sticky; top: 120px; background: #1a4331; color: #fff; border-radius: 14px; padding: 18px 0 12px; display: flex; flex-direction: column; }
.cf-ec-side p { margin: 0; }
.cf-ec-side__b { padding: 0 20px 2px; font-weight: 700; font-size: 16px; letter-spacing: .3px; color: #fff; }
.cf-ec-side__b span { color: #e5a000; }
.cf-ec-side__m { padding: 0 20px 14px; font-size: 11.5px; color: #bcd2c7; overflow-wrap: anywhere; }
.cf-ec-side__l { display: flex; align-items: center; gap: 9px; padding: 9px 20px; color: #dbe7e0; text-decoration: none; font-size: 13.5px; border-left: 3px solid transparent; }
.cf-ec-side__l:hover { background: rgba(255,255,255,.06); color: #fff; }
.cf-ec-side__l.cf-ec-side__on { background: rgba(255,255,255,.1); border-left-color: #e5a000; color: #fff; font-weight: 600; }
.cf-ec-side__sub { padding-left: 44px; font-size: 13px; color: #cfe0d6; }
.cf-ec-side__sub::before { content: '→'; font-size: 11px; opacity: .7; }
.cf-ec-side__f { margin-top: 10px; padding: 12px 20px 0; border-top: 1px solid rgba(255,255,255,.12); }
.cf-ec-side__f .cf-ec-logout { margin: 0; }
.cf-ec-side__f button.cf-ec-link { color: #bcd2c7; font-size: 12.5px; }
.cf-ec-side__f button.cf-ec-link:hover { color: #fff; }
/* 1.74.1 — le thème du site souligne tout lien de `.page-content` (0,1,1) : les
   entrées du bandeau et les boutons repassent au-dessus (0,2,1). Les liens en
   texte de la carte (« Ouvrir une autre comptabilité ») restent soulignés. */
.cf-ec .cf-ec-side a, .cf-ec .cf-ec-side a:hover, .cf-ec a.cf-ec-btn, .cf-ec a.cf-ec-btn:hover { text-decoration: none; }
.cf-ec-main { min-width: 0; }
/* Les intertitres de section : la ligne de repère du bandeau, dans le contenu. */
.cf-ec-sec { margin: 26px 0 10px; font-size: 13px; line-height: 1.4; letter-spacing: 1.2px; text-transform: uppercase; color: #6b7280; display: flex; align-items: center; gap: 12px; scroll-margin-top: 120px; }
.cf-ec-sec::after { content: ''; flex: 1; height: 1px; background: var(--cf-bord); }
.cf-ec-main > .cf-ec-sec:first-child, .cf-ec-main > .cf-ec-note + .cf-ec-sec { margin-top: 0; }

/* La carte « Mes comptabilités » : un liseré vert, la couleur du logiciel où
   « Ouvrir » conduit ; les boutons restent ceux de la page (bleu). */
.cf-ec-cpt { border-top: 4px solid #1a4331; }
.cf-ec-cpt__sous { margin: 0 0 10px; }
.cf-ec-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 6px 0 0; }
.cf-ec-tuile { border: 1px solid var(--cf-bord); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.cf-ec-tuile p { margin: 0; }
.cf-ec-tuile__n { font-weight: 600; font-size: 16px; color: #1a4331; }
.cf-ec-tuile__ex { font-size: 14px; }
.cf-ec-tuile__ex b { font-weight: 600; }
.cf-ec-tuile__st { display: inline-block; font-size: 12px; border-radius: 12px; padding: 1px 9px; margin-left: 6px; vertical-align: 1px; }
.cf-ec-tuile__st--ouv { background: #eef7f0; color: #1d4c2b; }
.cf-ec-tuile__st--clos { background: #f3f4f6; color: #4b5563; }
.cf-ec-tuile__d { font-size: 13.5px; color: var(--cf-gris); }
.cf-ec-tuile__d b { color: var(--cf-encre); font-weight: 600; }
.cf-ec-tuile__a { margin-top: 8px !important; }
.cf-ec-tuile__a .cf-ec-btn { padding: 9px 16px; font-size: 14px; }
.cf-ec-cpt__autres { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--cf-bord); font-size: 14px; color: #374151; }
.cf-ec-cpt__autres--seul { border-top: 0; margin-top: 4px; padding-top: 0; }
.cf-ec-cpt__autres a { color: var(--cf-bleu); }
.cf-ec-cpt__sep { color: #c8ccd4; margin: 0 6px; }
.cf-ec-cpt__vide { margin: 0 0 4px; color: #374151; }

@media (max-width: 760px) {
	.cf-ec.cf-ec-bande { display: block; }
	.cf-ec-side { position: static; flex-direction: row; flex-wrap: wrap; padding: 8px; margin: 0 0 16px; gap: 2px; }
	.cf-ec-side__b, .cf-ec-side__m, .cf-ec-side__sub { display: none; }
	.cf-ec-side__l { padding: 7px 12px; border-left: 0; border-radius: 8px; }
	.cf-ec-side__l.cf-ec-side__on { border-left: 0; }
	.cf-ec-side__f { margin: 0; padding: 7px 12px; border-top: 0; }
}
@media print {
	.cf-ec.cf-ec-bande { display: block; }
	.cf-ec-side { display: none; }
}

/* 🔴 1.81.0 — la carte « Supprimer » (droit à l'effacement). Rouge pour ce qui
   efface, jamais la couleur d'action du site ; le bouton définitif reste
   visiblement inerte tant que le mot n'est pas tapé. */
.cf-ec-suppr { border-color: #f0c4c0; }
/* ⚠ `.cf-ec-btn` et `.cf-ec-note` posent un `display` qui l'emporte sur l'attribut
   `hidden` : sans cette règle, le bouton ouvert restait à l'écran (vu au banc). */
.cf-ec-suppr [hidden] { display: none !important; }
.cf-ec-suppr > .cf-ec-h3 { color: #b42318; }
.cf-ec-suppr__row { padding: 12px 0; border-top: 1px solid var(--cf-bord); }
.cf-ec-suppr__row:first-of-type { border-top: 0; }
.cf-ec-suppr__l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cf-ec-suppr__l .cf-ec-fine { margin: 0; flex: 1 1 200px; }
.cf-ec-suppr__n { margin: 0; font-weight: 600; flex: 0 0 100%; }
.cf-ec-btn--rouge-l { background: #fff; color: #b42318; border-color: #b42318; }
.cf-ec-btn--rouge-l:hover { background: #fdf0ef; color: #8f1c13; }
.cf-ec-btn--rouge { background: #b42318; border-color: #b42318; color: #fff; }
.cf-ec-btn--rouge:hover { background: #8f1c13; color: #fff; }
.cf-ec-btn--rouge[disabled] { opacity: .45; cursor: not-allowed; }
.cf-ec-suppr__box { margin-top: 10px; border: 1px solid #f0c4c0; background: #fdf6f5; border-radius: 8px; padding: 14px 16px; }
.cf-ec-suppr__box p { margin: 0 0 8px; }
.cf-ec-suppr__ul { margin: 0 0 10px 18px; padding: 0; }
.cf-ec-suppr__keep { background: #fff; border: 1px dashed #c8ccd4; border-radius: 6px; padding: 8px 12px; }
.cf-ec-suppr__in { max-width: 200px; letter-spacing: .05em; }
.cf-ec-suppr__act { margin-bottom: 0 !important; }
@media print { .cf-ec-suppr { display: none; } }