/*
 * lettre.css : inscription à la lettre (maquette 28) : bloc de la lettre (magazine, articles, recettes, vidéos, page /newsletter/), carte étroite de la colonne des fiches saison,
 * formulaire en deux temps, message qui le remplace. Chargée là où le formulaire est posé.
 * Mobile d'abord (390 px), puis paliers à 640 et 960 px. Sans script (media « scripting: none »), les trois champs sont montrés d'emblée.
 * Les règles des champs, du résumé d'erreurs et du champ piège sont celles de formulaire.css, limitées à ce formulaire (cette feuille ne charge pas formulaire.css).
 */

/* ---------- Bloc de la lettre : surtitre, titre, texte, formulaire ---------- */
.bloc-lettre{display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-top:5px solid var(--vert-lisere);border-radius:16px;background:var(--blanc)}
.bloc-lettre__texte{display:flex;flex-direction:column;gap:12px}
.bloc-lettre__surtitre{display:none}
.bloc-lettre__titre{font-family:var(--police-titre);font-weight:700;font-size:21px;line-height:27px;color:var(--vert-fonce)}
.bloc-lettre__description{font-size:14px;line-height:22px;color:var(--encre-douce)}
.bloc-lettre__formulaire{display:flex;flex-direction:column;gap:12px;min-width:0}
.lettre-page{scroll-margin-top:24px}
.conteneur .lettre-page{margin-top:32px}

/* ---------- Formulaire : colonne ---------- */
.lettre-form{--bord-champ:#928b7e;--erreur:#86452e;--erreur-lisere:#c16b4c;--erreur-fond:#f8edea;display:flex;flex-direction:column;gap:12px;min-width:0}
.lettre-form [hidden]{display:none}
.lettre-form .champ__etiquette{font-size:13px;font-weight:600;line-height:normal;color:var(--encre)}
.lettre-form__suite{display:flex;flex-direction:column;gap:10px}
.lettre-form .champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.lettre-form .champ__zone{position:relative;display:block}
.lettre-form .champ__icone{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--vert);pointer-events:none}
.lettre-form .champ__saisie{display:block;width:100%;height:52px;padding:0 14px;border:1.5px solid var(--bord-champ);border-radius:10px;background:var(--blanc);font:400 15px/normal var(--police-texte);color:var(--encre)}
.lettre-form .champ__saisie::placeholder{color:var(--attente);opacity:1}
.lettre-form .champ__saisie:focus{outline:2px solid var(--vert);outline-offset:-2px;border-color:var(--vert)}
.lettre-form .champ__zone .champ__saisie{padding-left:44px}
.lettre-form .champ__erreur{display:flex;align-items:flex-start;gap:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--erreur)}
.lettre-form .champ__erreur[hidden]{display:none}
.lettre-form .champ__erreur .icone{margin-top:2px}
.lettre-form .champ--erreur .champ__saisie{border-color:var(--erreur-lisere)}
.lettre-form .champ--erreur .champ__etiquette{color:var(--erreur)}
.lettre-form .piege{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.lettre-form .formulaire__erreurs{padding:14px 16px;border-left:5px solid var(--erreur-lisere);border-radius:12px;background:var(--erreur-fond);color:var(--erreur)}
.lettre-form .formulaire__erreurs:focus{outline:3px solid var(--vert-fonce);outline-offset:2px}
.lettre-form .formulaire__erreurs-titre{font-size:15px;font-weight:600;line-height:22px}
.lettre-form .formulaire__erreurs-liste{margin-top:6px;padding:0;list-style:none;font-size:14px;line-height:22px}
.lettre-form .formulaire__erreurs-liste li+li{margin-top:8px}
.lettre-form .formulaire__erreurs-liste a{display:flex;align-items:center;min-height:44px;color:var(--erreur);text-decoration:underline;text-underline-offset:3px}
.lettre-form__phrase{font-size:14px;line-height:22px;color:var(--texte-courant)}
.lettre-form__noms{display:flex;flex-direction:column;gap:10px}
.lettre-form__noms .champ__saisie{padding:0 16px;font-size:16px}
.lettre-form .bouton{--h:52px;--px:22px;width:100%;border-radius:10px}
.lettre-form__mention{font-size:12px;line-height:18px;color:var(--encre-douce)}
.lettre-form__mention a{position:relative;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.lettre-form__mention a::after{content:"";position:absolute;inset:-14px -4px}

/* Sans script : les trois champs d'emblée, le seul bouton « Valider mon inscription » */
@media (scripting:none){
	.lettre-form .lettre-form__suite[hidden]{display:flex}
	.lettre-form .lettre-form__valider[hidden]{display:flex}
	.lettre-form .lettre-form__passer{display:none}
}

/* ---------- Présentation large (bloc commun, page /newsletter/) : le champ n'a pas d'étiquette visible, comme sur la maquette 10 ---------- */
.lettre-form--large .lettre-form__rangee{display:flex;flex-direction:column;gap:12px}
.lettre-form--large .lettre-form__courriel .champ__saisie{height:54px;padding-left:44px;font-size:16px}

/* ---------- Présentation carte (colonne des fiches saison) ---------- */
.lettre-carte{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--filet);border-radius:16px;background:var(--blanc)}
.lettre-carte__titre{font-family:var(--police-titre);font-weight:700;font-size:20px;line-height:26px;color:var(--encre)}
.lettre-carte__texte{font-size:14px;line-height:22px;color:var(--texte-courant)}
.lettre-form--carte{gap:10px}
.lettre-form--carte .lettre-form__rangee{display:flex;flex-direction:column;gap:10px}

/* ---------- Message qui remplace le formulaire ---------- */
.lettre-message{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;background:var(--vert-clair);font-size:14px;line-height:23px;color:var(--texte-courant)}
.lettre-message:focus{outline:0}
.lettre-message__rond{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--vert);color:var(--blanc)}
.lettre-message__rond .icone{--epaisseur:2.4}
.lettre-message strong{font-weight:600;color:var(--encre)}
.lettre-message--info{background:var(--creme);box-shadow:inset 0 0 0 1px var(--filet)}
.lettre-message--info .lettre-message__rond{background:var(--etiquette-texte)}

@media (min-width:640px){
	.bloc-lettre__surtitre{display:block;font-size:12px}
	.bloc-lettre__texte{gap:6px}
	.bloc-lettre__formulaire{gap:10px}
	.lettre-form{gap:10px}
	.lettre-form--large .lettre-form__rangee{flex-direction:row;gap:10px}
	.lettre-form--large .lettre-form__courriel{flex:1;min-width:0}
	.lettre-form--large .lettre-form__passer{--h:54px;flex:none;width:auto}
	.lettre-form--large .lettre-form__valider{--h:54px}
	.lettre-form--large .lettre-form__noms{flex-direction:row}
	.lettre-form--large .lettre-form__noms .champ{flex:1}
	.lettre-form--large .lettre-form__noms .champ__saisie{height:54px}
	.lettre-form--large .lettre-form__phrase{font-size:14px}
	.lettre-message{font-size:15px;line-height:24px}
}
@media (min-width:960px){
	.bloc-lettre{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,40vw,460px);align-items:center;gap:48px;padding:32px 40px;border-radius:18px}
	.bloc-lettre__titre{font-size:26px;line-height:33px}
	.bloc-lettre__description{font-size:15px;line-height:24px}
	.lettre-carte{padding:22px 24px}
	.lettre-carte .champ__saisie,.lettre-carte .bouton{--h:50px;height:50px}
	.lettre-carte .bouton{height:auto}
}