/* =============================================================================
   La Halte Gourmande — le formulaire de privatisation
   CS Créatif Web · 31/07/2026 · version 1.2.1

   L'INTENTION : fluide, nature, efficace — comme Marc.

   « Fluide »  : on ne saute plus d'un champ à l'autre en devinant. Les champs
                 sont groupés en deux temps — qui vous êtes, puis votre
                 événement — chacun porte son libellé, et rien ne bouge sous
                 les doigts.
   « Nature »  : les champs passent en parchemin clair sur la carte sombre.
                 C'est la pâte contre le four. Contraste franc, chaleur, et
                 accessoirement 12:1 de contraste là où on lisait du gris pâle
                 sur du gris sombre.
   « Efficace » : le type d'événement se choisit en un geste — mariage,
                 anniversaire, séminaire — au lieu de se taper. Sur un
                 téléphone, entre deux portes, c'est ça qui décide qu'une
                 demande part ou pas.

   CE QU'ON GARDE DU TRAVAIL EXISTANT
   ----------------------------------
   La carte sombre, sa bordure, le bouton brique pleine largeur, la grille à
   deux colonnes : tout ça était juste, on n'y touche pas. On requalifie
   l'intérieur, pas la boîte.

   ⚠️ Aplats uniquement, aucun dégradé de fond : le formulaire est en bas de
   page, et les optimiseurs de chargement effacent volontiers les
   « background-image » tant que la section n'est pas entrée à l'écran.
   ========================================================================== */

.hgc-form {
	--hg-vert:       #224406;
	--hg-brique:     #a6382d;
	--hg-or:         #EECB84;
	--hg-parchemin:  #f7f2e6;
	--hg-encre:      #2a2418;
	--hg-encre-doux: #6b6250;
	--hg-rayon:      12px;
}

/* -----------------------------------------------------------------------------
   1. LES LIBELLÉS
   Ils n'existaient pas : l'intitulé ne vivait que dans le « placeholder », qui
   disparaît dès qu'on tape. Un client qui revient corriger son formulaire ne
   savait plus quel champ était lequel.
   -------------------------------------------------------------------------- */

.hgc-form .hg-cs-champ {
	display: block;
	margin-bottom: 14px;
}

/* Chaque champ est désormais enveloppé pour porter son libellé. La rangée à
   deux colonnes du snippet d'origine est une boîte flexible : ses enfants
   directs ne sont plus les champs mais leurs enveloppes, il faut donc leur
   rendre la souplesse — sinon les deux colonnes se tassent à gauche.
   « min-width: 0 » évite qu'un champ long fasse déborder la rangée. */
.hgc-form .hgc-form-row > .hg-cs-champ {
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 0;
}

.hgc-form .hgc-form-row { align-items: flex-start; }

.hgc-form .hg-cs-label {
	display: block;
	margin: 0 0 6px 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--hg-or);
	line-height: 1.3;
}

.hgc-form .hg-cs-label .hg-cs-requis {
	color: var(--hg-brique);
	margin-left: 3px;
	/* Le point d'exclamation visuel : la brique sur l'or se voit sans crier. */
	font-weight: 800;
}

/* -----------------------------------------------------------------------------
   2. LES CHAMPS — le parchemin
   Avant : fond sombre, texte pâle, placeholder gris. Après : surface claire,
   encre foncée. C'est plus lisible en plein soleil sur un téléphone, et c'est
   la matière du métier.
   -------------------------------------------------------------------------- */

.hgc-form input[type="text"],
.hgc-form input[type="tel"],
.hgc-form input[type="email"],
.hgc-form input[type="number"],
.hgc-form input[type="date"],
.hgc-form textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px 16px !important;
	font-size: 16px !important;          /* sous 16 px, iOS zoome à la mise au point */
	line-height: 1.5 !important;
	color: var(--hg-encre) !important;
	background-color: var(--hg-parchemin) !important;
	background-image: none !important;
	border: 1px solid rgba(42, 36, 24, .16) !important;
	border-radius: var(--hg-rayon) !important;
	box-shadow: none !important;
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.hgc-form input::placeholder,
.hgc-form textarea::placeholder {
	color: var(--hg-encre-doux) !important;
	opacity: 1;
}

.hgc-form input:focus,
.hgc-form textarea:focus {
	outline: none !important;
	border-color: var(--hg-brique) !important;
	box-shadow: 0 0 0 3px rgba(166, 56, 45, .25) !important;
}

.hgc-form textarea {
	min-height: 130px !important;
	resize: vertical;
}

/* Le champ date garde son icône native, mais elle est illisible en sombre :
   on la remet dans l'encre du champ. */
.hgc-form input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: .55;
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
   3. LES DEUX TEMPS
   « Vous », puis « Votre événement ». Deux respirations au lieu d'une colonne
   de sept champs — c'est ce qui fait qu'un formulaire paraît court.
   -------------------------------------------------------------------------- */

.hgc-form .hg-cs-etape {
	display: block;
	margin: 22px 0 12px;
	padding-top: 16px;
	border-top: 1px solid rgba(238, 203, 132, .22);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(238, 203, 132, .85);
}

.hgc-form .hg-cs-etape:first-of-type {
	margin-top: 4px;
	padding-top: 0;
	border-top: 0;
}

/* -----------------------------------------------------------------------------
   4. LES PASTILLES D'ÉVÉNEMENT
   Le champ reste un champ texte libre — on ne retire rien. Les pastilles ne
   font que le remplir. Un client qui veut écrire « baptême de mon filleul »
   le peut toujours.
   -------------------------------------------------------------------------- */

.hgc-form .hg-cs-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}

.hgc-form .hg-cs-pastille {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: rgba(246, 240, 226, .8);
	background: rgba(246, 240, 226, .07);
	border: 1px solid rgba(238, 203, 132, .3);
	border-radius: 999px;
	padding: 10px 16px;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.hgc-form .hg-cs-pastille:hover {
	border-color: var(--hg-or);
	color: #fff;
}

.hgc-form .hg-cs-pastille:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(238, 203, 132, .35);
	border-color: var(--hg-or);
}

.hgc-form .hg-cs-pastille[aria-pressed="true"] {
	background: var(--hg-or);
	border-color: var(--hg-or);
	color: #2a2418;
}

/* -----------------------------------------------------------------------------
   5. LA RÉASSURANCE, AU BON MOMENT
   Le rayon de 15 km est écrit ailleurs sur la page. Ici, c'est au moment de
   choisir la date qu'on se demande « est-ce qu'il vient chez moi ? ».
   -------------------------------------------------------------------------- */

.hgc-form .hg-cs-note {
	margin: -4px 0 14px 2px;
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba(246, 240, 226, .62);
}

/* -----------------------------------------------------------------------------
   6. LE BOUTON — conservé, affiné
   -------------------------------------------------------------------------- */

.hgc-form .hgc-submit {
	min-height: 54px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	border-radius: var(--hg-rayon) !important;
	background-color: var(--hg-brique) !important;
	background-image: none !important;
	border: 0 !important;
	color: #fff !important;
	cursor: pointer;
	transition: filter .18s ease, transform .18s ease;
}

.hgc-form .hgc-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hgc-form .hgc-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(246, 240, 226, .85), 0 0 0 6px var(--hg-brique);
}

/* -----------------------------------------------------------------------------
   7. LE RETOUR À L'ÉCRAN
   Il n'y en avait aucun : le visiteur quittait la page.
   -------------------------------------------------------------------------- */

.hg-cs-message {
	margin: 18px 0 0;
	padding: 16px 18px;
	border-radius: var(--hg-rayon, 12px);
	font-size: 15px;
	line-height: 1.6;
	border-left: 4px solid transparent;
	background-color: rgba(238, 203, 132, .12);
}

.hg-cs-message[data-etat="succes"] {
	border-left-color: #EECB84;
	background-color: rgba(238, 203, 132, .16);
	color: #f8f2e2;
}

.hg-cs-message[data-etat="erreur"] {
	border-left-color: #a6382d;
	background-color: rgba(166, 56, 45, .2);
	color: #ffe3de;
}

.hg-cs-message strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 700; }
.hg-cs-message a { color: #EECB84; text-decoration: underline; text-underline-offset: 2px; }

/* Sans retour visuel, un visiteur sur une connexion lente clique deux fois —
   et Marc reçoit deux fois la même demande. */
.hgc-form.hg-cs-envoi .hgc-submit { opacity: .7; cursor: progress; pointer-events: none; }

/* -----------------------------------------------------------------------------
   8. LE REPLI TÉLÉPHONE
   Discret, mais c'est lui qui rattrape un anti-spam trop zélé.
   -------------------------------------------------------------------------- */

.hg-cs-secours {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(246, 240, 226, .62);
	text-align: center;
}

.hg-cs-secours a {
	color: #EECB84;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   9. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.hgc-form .hgc-form-row { display: block !important; }

	/* ⚠️ Le piège de la rangée qui retombe.
	   Côte à côte, les deux champs d'une rangée n'ont pas besoin de marge basse
	   — c'est l'écart de la grille qui les sépare. Mais dès que la rangée passe
	   en pile sur téléphone, cette marge à zéro colle les deux champs l'un
	   contre l'autre : mesuré à 0 px entre « Votre nom » et « Téléphone ».
	   On la leur rend ici, et seulement ici. */
	.hgc-form .hgc-form-row > .hg-cs-champ { margin-bottom: 14px; }
	.hgc-form .hgc-form-row > .hg-cs-champ:last-child { margin-bottom: 0; }

	/* 13 px de fourrure = 45 px de haut : au-dessus du seuil de 44 px en deçà
	   duquel une pastille se rate au pouce. À 12 px on tombait à 43. */
	.hgc-form .hg-cs-pastille { padding: 13px 16px; }

	.hgc-form .hgc-submit { width: 100% !important; }

	/* ⚠️ La barre du bas.
	   Le site pose sur téléphone une barre fixe de 68 px (« hg-bottom-bar »)
	   collée au bas de l'écran. Tout ce qu'on fait défiler jusqu'à « juste
	   visible » s'arrête donc DERRIÈRE elle. Deux conséquences, mesurées :
	   le message de confirmation — celui qui dit que la demande est partie —
	   pouvait finir caché, et le bouton d'envoi pouvait s'arrêter sous la
	   barre, où le doigt tape sur la barre et pas sur le bouton.
	   On réserve la hauteur de la barre au défilement. */
	html { scroll-padding-bottom: 88px; }
	.hgc-form .hgc-submit,
	.hg-cs-message,
	.hg-cs-secours { scroll-margin-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
	.hgc-form *, .hg-cs-message { transition: none !important; animation: none !important; }
	.hgc-form .hgc-submit:hover { transform: none; }
}