/*
 * Lona Commerce — formulaire de contact (personnalisations, grosses commandes).
 *
 * Pensé pour une colonne étroite posée à côté des catalogues : une carte, des
 * champs empilés, un bouton pleine largeur. Toutes les couleurs viennent des
 * variables --lc-* (voir Frontend\Assets) et gardent une valeur de repli, pour
 * que le formulaire reste lisible même si la palette n'est pas chargée.
 */

.lc-contact{display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--lc-paper,#fff);border:1px solid var(--lc-line,#e8e2d9);border-radius:var(--lc-radius,12px);color:var(--lc-ink,#241713);}
.lc-contact-title{margin:0;font-family:var(--lc-font-display,inherit);font-size:22px;line-height:1.25;color:var(--lc-ink,#241713);}
.lc-contact-intro{max-width:68ch;margin:0;color:var(--lc-muted,#6b625a);font-size:14px;line-height:1.55;}

.lc-contact-form{display:flex;flex-direction:column;gap:12px;margin:0;}
.lc-contact-form [hidden]{display:none;}

.lc-contact-field{display:flex;flex-direction:column;gap:4px;margin:0;}
.lc-contact-field label{color:var(--lc-ink,#241713);font-size:13px;font-weight:600;}
.lc-contact-field .lc-contact-optional{color:var(--lc-muted,#6b625a);font-weight:400;}
.lc-contact-field input,.lc-contact-field select,.lc-contact-field textarea{width:100%;padding:10px 12px;border:1px solid var(--lc-line,#e8e2d9);border-radius:var(--lc-radius-sm,8px);background:#fff;color:var(--lc-ink,#241713);font:inherit;font-size:15px;}
.lc-contact-field textarea{min-height:110px;resize:vertical;line-height:1.5;}
/* Le thème fixe la hauteur des champs (40 px) et un interligne de 26,4 px : le
   texte des listes déroulantes était coupé en bas. 48 px comme à la commande,
   interligne normal dans les listes. */
.lc-contact-field.lc-contact-field input:not([type=checkbox]):not([type=radio]),.lc-contact-field.lc-contact-field select{height:48px;min-height:48px;}
.lc-contact-field.lc-contact-field select{line-height:normal;}
.lc-contact-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--lc-muted,#6b625a) 50%),linear-gradient(135deg,var(--lc-muted,#6b625a) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px;}
.lc-contact-field input:focus-visible,.lc-contact-field select:focus-visible,.lc-contact-field textarea:focus-visible{outline:2px solid var(--lc-accent,#a96f43);outline-offset:1px;}
.lc-contact-field .lc-contact-hint{color:var(--lc-muted,#6b625a);font-size:12px;line-height:1.45;}
.lc-contact-field--invalid input,.lc-contact-field--invalid select,.lc-contact-field--invalid textarea{border-color:#c0392b;}

/* Deux champs courts côte à côte dès qu'il y a la place (jamais sur mobile). */
.lc-contact-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}

.lc-contact-check{margin:0;color:var(--lc-muted,#6b625a);font-size:13px;line-height:1.45;}
.lc-contact-check label{display:flex;gap:8px;align-items:flex-start;font-weight:400;}
.lc-contact-check input{margin-top:2px;flex:0 0 auto;}

.lc-contact-submit{width:100%;}
.lc-contact-legal{max-width:68ch;margin:0;color:var(--lc-muted,#6b625a);font-size:12px;line-height:1.45;}
.lc-contact-error{margin:0;padding:8px 10px;border-radius:8px;background:#fdf2f2;color:#9b2c1a;font-size:13px;}
.lc-contact-errors{margin:0;padding:8px 10px 8px 26px;border-radius:8px;background:#fdf2f2;color:#9b2c1a;font-size:13px;}
.lc-contact-form.is-busy{opacity:.6;pointer-events:none;}

/* Message de remerciement : il remplace le formulaire, sans faire sauter la page. */
.lc-contact-done{margin:0;padding:14px 16px;border-radius:var(--lc-radius-sm,8px);background:#f2f8e9;color:#3b6d11;font-size:14px;line-height:1.55;}
.lc-contact-done strong{display:block;margin-bottom:4px;}

/* Pot de miel : hors écran, jamais affiché, jamais atteint au clavier. */
.lc-contact-honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

@media(max-width:767px){
	.lc-contact-field input,.lc-contact-field select,.lc-contact-field textarea{font-size:16px;}
}
@media(max-width:480px){
	.lc-contact{padding:18px;}
	.lc-contact-row{grid-template-columns:1fr;}
}
/* Très petits écrans : de quoi écrire quelques lignes sans faire défiler la
   zone (la hauteur réglée dans le widget l'emporte toujours). */
@media(max-width:360px){
	.lc-contact-field textarea{min-height:140px;}
}