/* Ycéo Famille — espace famille. Tout est limité à .yf-app pour ne pas toucher au thème du site. */

.yf-app {
	--yf-fond: #F4F6F3;
	--yf-surface: #FFFFFF;
	--yf-encre: #14211D;
	--yf-texte: #3B4A45;
	--yf-discret: #4A5A55;
	--yf-trait: #D3DBD7;
	--yf-champ: #8A9994;
	--yf-accent: #0A6B57;
	--yf-accent-fonce: #07503F;
	--yf-accent-doux: #E2F0EB;
	--yf-attente: #6E4600;
	--yf-attente-doux: #FFF1D1;
	--yf-erreur: #A3262A;
	--yf-erreur-doux: #FBE7E6;
	--yf-info: #1F3554;
	--yf-info-doux: #E8EEF6;

	box-sizing: border-box;
	max-width: 34rem;
	margin: 0 auto;
	padding: 24px 20px 40px;
	background: var(--yf-fond);
	border-radius: 16px;
	color: var(--yf-encre);
	font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.5;
}
.yf-app *, .yf-app *::before, .yf-app *::after { box-sizing: border-box; }

.yf-app h1 {
	margin: 0 0 10px;
	color: var(--yf-encre);
	font-family: inherit;
	font-size: 1.75rem;
	line-height: 1.2;
	font-weight: 700;
}
.yf-app h1:focus { outline: none; }
.yf-app p { margin: 0; }
.yf-app strong { font-weight: 700; }

.yf-ecran { display: flex; flex-direction: column; gap: 18px; }
.yf-intro { color: var(--yf-texte); }
.yf-note, .yf-aide { color: var(--yf-discret); font-size: 0.875rem; }
.yf-chargement { color: var(--yf-discret); }
.yf-pied { margin-top: 8px; color: var(--yf-discret); font-size: 0.9rem; }

/* Bloc blanc */
.yf-carte {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px 20px;
	background: var(--yf-surface);
	border: 1px solid var(--yf-trait);
	border-radius: 16px;
}

/* Champs */
.yf-champ { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.yf-champ label, .yf-groupe legend { color: var(--yf-encre); font-weight: 700; font-size: 0.95rem; }
.yf-champ input, .yf-champ select {
	width: 100%;
	min-height: 50px;
	padding: 0 14px;
	border: 1.5px solid var(--yf-champ);
	border-radius: 10px;
	background: var(--yf-surface);
	color: var(--yf-encre);
	font: inherit;
	font-size: 1.0625rem;
}
.yf-champ input[readonly] { background: var(--yf-fond); }
.yf-champ input:focus, .yf-champ select:focus {
	outline: 3px solid var(--yf-accent);
	outline-offset: 1px;
	border-color: var(--yf-accent);
}
.yf-champ--court { flex: 0 0 7.5rem; }
.yf-champ--code input { min-height: 64px; font-size: 1.875rem; letter-spacing: 0.5em; text-align: center; padding-left: 0.5em; }
.yf-champ--erreur input, .yf-champ--erreur select { border-color: var(--yf-erreur); border-width: 2px; }
.yf-champ__erreur { color: var(--yf-erreur); font-weight: 700; font-size: 0.9rem; }
.yf-ligne { display: flex; gap: 12px; align-items: flex-start; }

.yf-groupe { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.yf-groupe legend { padding: 0 0 10px; }
.yf-groupe--encadre { padding: 16px; border: 1px solid var(--yf-trait); border-radius: 14px; }
.yf-groupe--encadre legend { padding: 0 6px; }
.yf-choix-ligne { display: flex; gap: 10px; }
.yf-choix {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 0;
	min-height: 50px;
	padding: 0 14px;
	border: 1.5px solid var(--yf-champ);
	border-radius: 10px;
	background: var(--yf-surface);
	cursor: pointer;
}
.yf-choix:has(input:checked) { border-color: var(--yf-accent); background: var(--yf-accent-doux); }
.yf-choix input { width: 20px; height: 20px; margin: 0; accent-color: var(--yf-accent); }
.yf-lecture { padding: 12px 14px; border-radius: 10px; background: var(--yf-fond); }

/* Boutons */
.yf-btn, .yf-btn2 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	border-radius: 12px;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}
.yf-btn { border: 0; background: var(--yf-accent); color: #FFFFFF; }
.yf-btn:hover { background: var(--yf-accent-fonce); }
.yf-btn:disabled { background: #9AA9A3; cursor: not-allowed; }
.yf-btn--danger { background: var(--yf-erreur); }
.yf-btn--danger:hover { background: #7E1D20; }
.yf-btn2 { border: 1.5px solid var(--yf-accent); background: var(--yf-surface); color: var(--yf-accent); }
.yf-btn2:hover { background: var(--yf-accent-doux); }
.yf-btn:focus-visible, .yf-btn2:focus-visible, .yf-lien:focus-visible, .yf-choix:focus-within {
	outline: 3px solid var(--yf-accent);
	outline-offset: 2px;
}
.yf-lien {
	align-self: flex-start;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--yf-accent);
	font: inherit;
	font-size: 0.95rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.yf-lien:hover { color: var(--yf-accent-fonce); }
.yf-lien--fort { font-weight: 700; font-size: 1rem; }
.yf-lien--danger { color: var(--yf-erreur); }
.yf-liens { display: flex; flex-direction: column; gap: 2px; }
.yf-pied .yf-lien { min-height: 0; align-self: auto; }

/* Messages */
.yf-message { padding: 14px 16px; border-radius: 12px; font-size: 0.95rem; }
.yf-message--ok { background: var(--yf-accent-doux); color: var(--yf-accent-fonce); }
.yf-message--info { background: var(--yf-info-doux); color: var(--yf-info); }
.yf-message--erreur { background: var(--yf-erreur-doux); color: #5E1416; }
.yf-erreurs {
	padding: 14px 16px;
	border: 2px solid var(--yf-erreur);
	border-radius: 12px;
	background: var(--yf-erreur-doux);
	color: #5E1416;
}
.yf-erreurs:focus { outline: 3px solid var(--yf-erreur); outline-offset: 2px; }
.yf-erreurs__titre { font-weight: 700; margin-bottom: 6px !important; }
.yf-erreurs ul { margin: 0; padding-left: 1.2em; }
.yf-erreurs a { color: #5E1416; font-weight: 700; }

/* Membres de la famille : carte façon titre de transport, avec la ligne pointillée et les encoches */
.yf-membres { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.yf-membre {
	position: relative;
	margin: 0;
	background: var(--yf-surface);
	border: 1px solid var(--yf-trait);
	border-radius: 16px;
	overflow: hidden;
}
.yf-membre__haut { display: flex; align-items: center; gap: 14px; padding: 16px 18px 14px; border-bottom: 2px dashed #C9D3CF; }
.yf-membre__haut::before, .yf-membre__haut::after {
	content: "";
	position: absolute;
	top: 68px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--yf-fond);
	border: 1px solid var(--yf-trait);
}
.yf-membre__haut::before { left: -11px; }
.yf-membre__haut::after { right: -11px; }
.yf-membre__initiales {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1.05rem;
}
.yf-membre__nom { display: flex; flex-direction: column; }
.yf-membre__nom strong { font-size: 1.125rem; }
.yf-membre__nom span { color: var(--yf-discret); font-size: 0.95rem; }
.yf-membre__bas { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 8px; color: var(--yf-texte); font-size: 0.95rem; }

.yf-pastille { align-self: flex-start; padding: 3px 10px; border-radius: 6px; font-size: 0.875rem; font-weight: 700; }
.yf-pastille--ok { background: var(--yf-accent-doux); color: var(--yf-accent-fonce); }
.yf-pastille--attente { background: var(--yf-attente-doux); color: var(--yf-attente); }
.yf-pastille--neutre { background: #ECEFF1; color: #37474F; }

/* Recherche d'adresse : liste de suggestions sous le champ */
.yf-recherche { position: relative; }
.yf-suggestions {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: var(--yf-surface);
	border: 1.5px solid var(--yf-accent);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(20, 33, 29, 0.14);
}
.yf-suggestion { min-height: 44px; padding: 10px 12px; border-radius: 8px; cursor: pointer; line-height: 1.35; }
.yf-suggestion:hover, .yf-suggestion--active { background: var(--yf-accent-doux); color: var(--yf-accent-fonce); }

/* Majuscules visibles dès la frappe (la valeur est aussi convertie) */
.yf-app input[data-maj="1"] { text-transform: uppercase; }

.yf-communes:empty { display: none; }
.yf-communes { display: flex; flex-direction: column; gap: 8px; }
.yf-communes__choix { display: flex; flex-wrap: wrap; gap: 8px; }
.yf-btn2--petit { width: auto; min-height: 44px; padding: 0 14px; font-size: 0.95rem; }

/* Aide « Où trouver le numéro ? » */
.yf-aide-pass { margin: -6px 0 4px; }
.yf-aide-pass summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--yf-accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.yf-aide-pass summary:focus-visible { outline: 3px solid var(--yf-accent); outline-offset: 2px; }
.yf-aide-pass img { display: block; width: 100%; max-width: 400px; height: auto; margin: 6px 0 8px; border-radius: 10px; border: 1px solid var(--yf-trait); }
.yf-aide-pass p { color: var(--yf-texte); font-size: 0.9rem; }

.yf-pastille--info { background: var(--yf-info-doux); color: var(--yf-info); }
.yf-pastille--erreur { background: var(--yf-erreur-doux); color: var(--yf-erreur); }
.yf-membre__actions { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* Pièces et réductions */
.yf-sous-titre { margin: 10px 0 0; font-size: 1.25rem; line-height: 1.3; }
.yf-piece {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--yf-surface);
	border: 1px solid var(--yf-trait);
	border-radius: 16px;
}
.yf-piece__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.yf-piece__tete h3 { margin: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 700; }
.yf-piece__tete .yf-pastille { flex-shrink: 0; }
.yf-piece__etat { color: var(--yf-texte); font-size: 0.95rem; }
.yf-piece__motif { padding: 10px 12px; border-radius: 10px; background: var(--yf-erreur-doux); color: #5E1416; font-size: 0.95rem; }
.yf-piece__form { display: flex; flex-direction: column; gap: 14px; }
.yf-fichier {
	width: 100%;
	padding: 12px;
	border: 1.5px dashed var(--yf-champ);
	border-radius: 10px;
	background: var(--yf-fond);
	font: inherit;
	font-size: 0.95rem;
}
.yf-fichier:focus { outline: 3px solid var(--yf-accent); outline-offset: 1px; }
.yf-app input.yf-court { max-width: 9rem; }
.yf-qf-niveau { color: var(--yf-accent-fonce); font-weight: 700; font-size: 0.95rem; }
.yf-qf-niveau:empty { display: none; }
.yf-coche { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.yf-coche input { width: 20px; height: 20px; margin: 0; accent-color: var(--yf-accent); }

/* Recherche d'un membre (familles nombreuses) */
.yf-recherche-membre input[type="search"] { -webkit-appearance: none; appearance: none; }
.yf-recherche-membre__resultat { color: var(--yf-discret); font-size: 0.9rem; }
.yf-recherche-membre__resultat:empty { display: none; }
.yf-recherche-membre__vide { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--yf-surface); border: 1px dashed var(--yf-champ); }
.yf-recherche-membre__vide[hidden] { display: none; }
.yf-membre[hidden] { display: none; }
.yf-membre:focus { outline: 3px solid var(--yf-accent); outline-offset: 3px; }
.yf-membres { scroll-margin-top: 20px; }
.yf-membre { scroll-margin-top: 20px; }

/* Accès au panier depuis « Ma famille » */
.yf-acces-panier {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: 0 18px;
	border: 1.5px solid var(--yf-accent);
	border-radius: 12px;
	background: var(--yf-accent-doux);
	color: var(--yf-accent-fonce);
	font: inherit;
	cursor: pointer;
}
.yf-acces-panier:focus-visible { outline: 3px solid var(--yf-accent); outline-offset: 2px; }
.yf-membre__panier { color: var(--yf-accent-fonce); font-weight: 700; }

.yf-bloc-titre { display: block; margin: 0 0 10px; padding: 0; font-size: 1.0625rem; font-weight: 700; color: var(--yf-encre); }
.yf-carte .yf-bloc-titre { margin: 0; }
.yf-message--attente { background: var(--yf-attente-doux); color: #4D3300; }
.yf-message .yf-lien { min-height: 0; color: inherit; font-weight: 700; }
.yf-liste { margin: 8px 0 0; padding-left: 1.2em; }
.yf-liste li { margin: 4px 0; }
.yf-choix-colonne { display: flex; flex-direction: column; gap: 8px; }

/* Calendrier de la date de début */
.yf-date-choisie { font-size: 1.25rem; font-weight: 700; }
.yf-cal { display: flex; flex-direction: column; gap: 8px; }
.yf-cal__tete { display: flex; justify-content: space-between; align-items: center; }
.yf-cal__mois { font-weight: 700; }
.yf-cal__nav {
	width: 44px;
	height: 44px;
	border: 1.5px solid #C9D3CF;
	border-radius: 10px;
	background: var(--yf-surface);
	color: var(--yf-accent);
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.yf-cal__nav:disabled { color: #B8C2BE; cursor: default; }
.yf-cal__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.yf-cal__jour-semaine { text-align: center; font-size: 0.8125rem; color: var(--yf-discret); }
.yf-cal__jour {
	height: 44px;
	border: 1.5px solid var(--yf-trait);
	border-radius: 10px;
	background: var(--yf-surface);
	color: var(--yf-encre);
	font: inherit;
	cursor: pointer;
}
.yf-cal__jour:disabled { border-color: transparent; background: transparent; color: #8F9C97; text-decoration: line-through; cursor: default; }
.yf-cal__jour--choisi { border-color: var(--yf-accent); background: var(--yf-accent); color: #FFFFFF; font-weight: 700; }
.yf-cal__jour:focus-visible, .yf-cal__nav:focus-visible { outline: 3px solid var(--yf-accent); outline-offset: 1px; }

/* Formules (et moyens de paiement) */
.yf-formule {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px;
	border: 1.5px solid #C9D3CF;
	border-radius: 14px;
	background: var(--yf-surface);
	cursor: pointer;
}
.yf-formule input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--yf-accent); }
.yf-formule--choisie { border: 2px solid var(--yf-accent); background: var(--yf-accent-doux); }
.yf-formule--indisponible { border-style: dashed; background: var(--yf-fond); color: #5C6B66; cursor: default; }
.yf-formule:focus-within { outline: 3px solid var(--yf-accent); outline-offset: 2px; }
.yf-formule__texte { display: flex; flex-direction: column; gap: 3px; }
.yf-formule__prix { font-size: 1.0625rem; }
.yf-formule__notes { font-size: 0.875rem; color: var(--yf-accent-fonce); }
.yf-formule--indisponible .yf-formule__notes { color: inherit; }

.yf-mois { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.yf-mois__boutons { display: flex; align-items: center; gap: 16px; }
.yf-mois__bouton {
	width: 48px;
	height: 48px;
	border: 1.5px solid var(--yf-accent);
	border-radius: 12px;
	background: var(--yf-surface);
	color: var(--yf-accent);
	font: inherit;
	font-size: 1.5rem;
	font-weight: 700;
	cursor: pointer;
}
.yf-mois__bouton:disabled { border-color: #C9D3CF; color: #B8C2BE; cursor: default; }
.yf-mois__nombre { min-width: 1.5em; text-align: center; font-size: 1.5rem; font-weight: 700; }
.yf-periode { line-height: 1.6; }

/* Panier */
.yf-panier { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.yf-panier__membre { padding: 14px 18px; background: var(--yf-surface); border: 1px solid var(--yf-trait); border-radius: 16px; }
.yf-panier__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--yf-trait); }
.yf-panier__tete strong { font-size: 1.0625rem; }
.yf-panier__actions { display: flex; gap: 16px; }
.yf-panier__actions .yf-lien { min-height: 40px; }
.yf-panier__ligne { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; }
.yf-panier__ligne--reduction { padding-top: 4px; color: var(--yf-accent-fonce); font-weight: 700; font-size: 0.95rem; }
.yf-panier__libelle { display: flex; flex-direction: column; gap: 2px; }
.yf-panier__detail { color: var(--yf-discret); font-size: 0.9rem; }
.yf-panier__reserve { color: var(--yf-info); font-size: 0.9rem; }
.yf-panier__probleme { color: var(--yf-erreur); font-weight: 700; font-size: 0.9rem; }
.yf-panier__prix { font-weight: 700; white-space: nowrap; }
.yf-totaux { margin: 0; padding: 14px 18px; background: var(--yf-surface); border: 1px solid var(--yf-trait); border-radius: 16px; }
.yf-totaux div { display: flex; justify-content: space-between; padding: 3px 0; }
.yf-totaux dt { margin: 0; }
.yf-totaux dd { margin: 0; font-weight: 700; }
.yf-totaux__total { margin-top: 6px; padding-top: 8px !important; border-top: 1px solid var(--yf-trait); font-size: 1.25rem; }

.yf-bientot { display: flex; flex-direction: column; gap: 6px; }
.yf-suppression { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--yf-trait); }

.yf-masque, .yf-annonce {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 380px) {
	.yf-app { padding: 18px 14px 32px; border-radius: 0; }
	.yf-ligne { flex-direction: column; gap: 18px; }
	.yf-champ--court { flex-basis: auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.yf-app * { transition: none !important; animation: none !important; }
}

/* Commandes (écran « Ma famille ») */
.yf-liste-commandes { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.yf-liste-commandes li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.yf-commandes__texte { display: flex; flex-direction: column; gap: 2px; }
.yf-commandes__statut { color: var(--yf-discret); font-size: 0.9rem; }

.yf-intro--serre { margin: 4px 0 0; }
.yf-sous-titre + .yf-piece { margin-top: 10px; }

/* Commandes : actions, lien vers l'historique, liste complète */
.yf-commandes__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.yf-commandes__toutes { margin-top: 14px; }
.yf-commandes__vide { margin: 0; color: var(--yf-discret); }
.yf-liste-commandes--historique li + li { padding-top: 10px; border-top: 1px solid var(--yf-bord, #DDE3E0); }

/* Mandat de prélèvement SEPA */
.yf-fiche { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.yf-fiche > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.yf-fiche dt { flex: 0 0 11rem; color: var(--yf-discret); }
.yf-fiche dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.yf-fiche__note { font-weight: 400; color: var(--yf-discret); }
.yf-mandat-texte { padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid #DDE3E0; font-size: 0.9375rem; }
.yf-mandat-texte p { margin: 0 0 8px; }
.yf-mandat-texte p:last-child { margin-bottom: 0; }
.yf-iban-banque { margin: -6px 0 0; min-height: 1.4em; color: var(--yf-discret); font-size: 0.9375rem; }
.yf-signature { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 220; background: #fff; border: 2px dashed #7A8A85; border-radius: 10px; touch-action: none; cursor: crosshair; }
.yf-signature:focus-visible { outline: 3px solid var(--yf-accent); outline-offset: 2px; }
.yf-mandat-lien { margin: 0; }