/*
 * Carnet de Cave — habillage public.
 *
 * Charte « cave » validée le 11.08.2026, contrastes WCAG 2.1 AA calculés.
 *
 * ⚠️ Piège connu : Kadence écrase les couleurs de titres et de liens.
 * Tous les sélecteurs sont donc préfixés par .cdc-public ou .cdc-app,
 * et les propriétés de couleur portent un poids suffisant pour tenir.
 * Ne jamais écrire de sélecteur nu ici.
 *
 * Deux ambiances :
 *   .cdc-public  →  carte sombre posée sur le site vitrine (clair)
 *   .cdc-app     →  espace /ma-cave/*, sombre de bout en bout
 */

:root {
	--cdc-fond: #14090C;
	--cdc-surface: #1E1114;
	--cdc-lie: #7B1E32;
	--cdc-rouge: #A8324A;
	--cdc-or: #C9A227;
	--cdc-texte: #F2E9E4;
	--cdc-texte-doux: #C3B2AE;
	--cdc-blanc-vin: #E3C567;
	--cdc-rose: #E08A9B;
	--cdc-rayon: 10px;
}

/* -------------------------------------------------------------------------
 * La carte
 * ---------------------------------------------------------------------- */

.cdc-public.cdc-carte,
.cdc-app.cdc-carte {
	background: var(--cdc-surface);
	color: var(--cdc-texte);
	border: 1px solid var(--cdc-lie);
	border-radius: var(--cdc-rayon);
	padding: 2rem;
	max-width: 30rem;
	margin: 2rem auto;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.6;
	box-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.cdc-public .cdc-titre,
.cdc-app .cdc-titre {
	font-family: Fraunces, Georgia, serif;
	color: var(--cdc-or);
	margin: 0 0 1rem;
	font-size: 1.6rem;
	line-height: 1.2;
}

.cdc-public p,
.cdc-app p {
	color: var(--cdc-texte);
	margin: 0 0 1rem;
}

.cdc-public .cdc-note,
.cdc-app .cdc-note,
.cdc-public .cdc-aide,
.cdc-app .cdc-aide {
	color: var(--cdc-texte-doux);
	font-size: .9rem;
}

.cdc-public .cdc-aide {
	margin-top: -.5rem;
}

.cdc-facultatif {
	color: var(--cdc-texte-doux);
	font-weight: 400;
}

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

.cdc-formulaire label {
	display: block;
	margin: 1.1rem 0 .35rem;
	color: var(--cdc-texte);
	font-weight: 600;
	font-size: .95rem;
}

.cdc-formulaire input[type="text"],
.cdc-formulaire input[type="email"],
.cdc-formulaire input[type="password"],
.cdc-app select {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .8rem;
	background: var(--cdc-fond);
	color: var(--cdc-texte);
	border: 1px solid var(--cdc-lie);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
}

.cdc-formulaire input:focus,
.cdc-app select:focus {
	outline: 2px solid var(--cdc-or);
	outline-offset: 1px;
	border-color: var(--cdc-or);
}

.cdc-case {
	display: flex !important;
	align-items: center;
	gap: .5rem;
	font-weight: 400 !important;
}

.cdc-case input {
	width: auto;
	/* 24 px : la cible reste atteignable au pouce, debout devant la cave. */
	min-width: 1.5rem;
	min-height: 1.5rem;
}

/* Pot de miel : hors écran plutôt que display:none, que certains
   robots savent détecter. Retiré du flux et de la navigation clavier. */
.cdc-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

.cdc-public .cdc-bouton,
.cdc-app .cdc-bouton {
	display: inline-block;
	margin-top: 1.5rem;
	padding: .8rem 1.6rem;
	background: var(--cdc-lie);
	color: var(--cdc-texte);
	border: 1px solid var(--cdc-rouge);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	/* 48 px de haut : la règle du doigt, pas celle de la souris. */
	min-height: 3rem;
}

.cdc-public .cdc-bouton:hover,
.cdc-app .cdc-bouton:hover,
.cdc-public .cdc-bouton:focus,
.cdc-app .cdc-bouton:focus {
	background: var(--cdc-rouge);
	color: #FFF;
}

.cdc-app .cdc-bouton--discret {
	margin-top: 0;
	padding: .5rem 1rem;
	min-height: 2.5rem;
	background: transparent;
}

/* -------------------------------------------------------------------------
 * Liens
 *
 * Le rouge accent #A8324A ne passe qu'à 3.0 : réservé aux bordures et au
 * gros texte. Pour un lien dans un paragraphe, l'or #C9A227 (8.08).
 * ---------------------------------------------------------------------- */

.cdc-public a,
.cdc-app a {
	color: var(--cdc-or);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cdc-public a:hover,
.cdc-app a:hover {
	color: var(--cdc-blanc-vin);
}

.cdc-liens {
	margin-top: 1.5rem;
	font-size: .9rem;
	color: var(--cdc-texte-doux);
}

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

.cdc-public .cdc-message,
.cdc-app .cdc-message {
	padding: .8rem 1rem;
	border-radius: 6px;
	border-left: 4px solid;
	font-size: .95rem;
	background: rgba(0, 0, 0, .25);
}

.cdc-message--succes {
	border-left-color: var(--cdc-or);
	color: var(--cdc-blanc-vin) !important;
}

.cdc-message--erreur {
	border-left-color: var(--cdc-rouge);
	color: var(--cdc-rose) !important;
}

.cdc-message--info {
	border-left-color: var(--cdc-texte-doux);
	color: var(--cdc-texte-doux) !important;
}

/* -------------------------------------------------------------------------
 * Barre de l'espace application
 * ---------------------------------------------------------------------- */

.cdc-app.cdc-selecteur form {
	display: flex;
	align-items: flex-end;
	gap: .75rem;
	flex-wrap: wrap;
}

.cdc-app.cdc-selecteur label {
	display: block;
	margin-bottom: .35rem;
	color: var(--cdc-texte-doux);
	font-size: .85rem;
}

.cdc-app.cdc-deconnexion {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	color: var(--cdc-texte-doux);
}

.cdc-app .cdc-bonjour {
	color: var(--cdc-or);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Téléphone — le geste le plus fréquent se fait debout devant l'étagère
 * ---------------------------------------------------------------------- */

@media (max-width: 480px) {

	.cdc-public.cdc-carte,
	.cdc-app.cdc-carte {
		padding: 1.25rem;
		margin: 1rem auto;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.cdc-formulaire input[type="text"],
	.cdc-formulaire input[type="email"],
	.cdc-formulaire input[type="password"] {
		/* 16 px minimum : en dessous, iOS zoome tout seul à la saisie. */
		font-size: 16px;
		padding: .85rem .8rem;
	}

	.cdc-public .cdc-bouton,
	.cdc-app .cdc-bouton {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Mouvement réduit et impression
 * ---------------------------------------------------------------------- */

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

@media print {
	.cdc-public.cdc-carte,
	.cdc-app.cdc-carte {
		background: #FFF;
		color: #000;
		box-shadow: none;
	}
}