/* SITE-NEWS · la lettre FREATH (pied de page) et « Prévenez-moi » (fiche produit). Les inscriptions vont à l'ERP de Freath,
   par le relais /api/inscription, et nulle part ailleurs. Aucune couleur nouvelle : le bleu nuit du pied, le glacier, le blanc. */
.lettre{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;margin-bottom:64px;padding:58px 56px 50px;display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:26px 60px;align-items:start;background:var(--navy-soft)}
/* La photo publiée du salon (FREATH ONE devant le lac) en fond, sous un dégradé bleu nuit : opaque là où on lit et où on écrit,
   transparent sur l'appareil. Le texte ne repose jamais sur la photo nue. */
.lettre-fond{position:absolute;top:0;bottom:0;right:0;width:64%;z-index:-2;margin:0}
.lettre-fond img{width:100%;height:100%;object-fit:cover;object-position:62% 46%;display:block}
.lettre::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 36%,rgba(11,34,56,.9) 46%,rgba(11,34,56,.5) 60%,rgba(11,34,56,.12) 78%,rgba(11,34,56,0) 100%)}
.lettre>div,.lettre>form{grid-column:1}
.lettre h2{margin:0;font-size:32px;line-height:1.15;letter-spacing:-.025em;font-weight:400;color:#fff;text-wrap:balance}
.lettre-sous{margin:12px 0 0;color:#b8ccd9;font-size:14px;line-height:1.55;max-width:40ch}
.lettre-form{display:grid;gap:14px}
.lettre-ligne{display:flex;gap:10px}
.lettre-ligne input[type=email]{flex:1;min-width:0;min-height:50px;padding:12px 16px;border-radius:5px;border:1px solid #ffffff45;background:#ffffff0d;color:#fff;font:inherit;font-size:15px}
.lettre-ligne input[type=email]::placeholder{color:#9fb6c6}
.lettre-ligne input[type=email]:focus-visible{outline:2px solid var(--glacier);outline-offset:2px;border-color:var(--glacier)}
.lettre-ligne button{min-height:50px;padding:12px 22px;border:0;border-radius:5px;background:#fff;color:var(--navy);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.lettre-ligne button:hover{background:var(--ice)}
.lettre-ligne button:focus-visible{outline:2px solid var(--glacier);outline-offset:2px}
.lettre-ligne button[disabled]{opacity:.6;cursor:wait}
.lettre-accord{display:flex;gap:10px;align-items:flex-start;color:#d3e2ea;font-size:13px;line-height:1.5;cursor:pointer}
.lettre-accord input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--glacier)}
.lettre-note{margin:0;color:#9fb6c6;font-size:12px;line-height:1.5}
.lettre-note a{color:#d3e2ea}
.lettre-retour{margin:0;font-size:14px;line-height:1.5;min-height:0}
.lettre-retour:empty{display:none}
.lettre-retour.ok{color:#bfe7cf}
.lettre-retour.erreur{color:#ffd2c2}
.lettre-piege{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.lettre-form.fait .lettre-ligne,.lettre-form.fait .lettre-accord{display:none}
/* « Prévenez-moi » sur la fiche produit : le même formulaire, en clair, sous l'appel principal. */
.prevenir{width:100%;max-width:470px;margin-top:6px;padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,var(--ice) 0%,#fff 70%)}
.prevenir h2{margin:0 0 4px;font-size:16px;line-height:1.3;font-weight:600;letter-spacing:0;color:var(--ink)}
.prevenir .lettre-ligne input[type=email]{background:#fff;border-color:var(--line);color:var(--ink)}
.prevenir .lettre-ligne input[type=email]::placeholder{color:var(--muted)}
.prevenir .lettre-ligne input[type=email]:focus-visible{outline-color:var(--navy);border-color:var(--navy)}
.prevenir .lettre-ligne button{background:var(--navy);color:#fff}
.prevenir .lettre-ligne button:hover{background:var(--navy-soft)}
.prevenir .lettre-ligne button:focus-visible{outline-color:var(--navy)}
.prevenir .lettre-accord{color:var(--muted)}
.prevenir .lettre-accord input{accent-color:var(--navy)}
.prevenir .lettre-retour.ok{color:#1d6b41}
.prevenir .lettre-retour.erreur{color:#a3361a}
@media (max-width:1080px){.lettre{grid-template-columns:minmax(0,1fr);padding:48px 40px 42px}
 .lettre-fond{width:100%}
 .lettre::before{background:linear-gradient(90deg,var(--navy) 0%,rgba(11,34,56,.95) 45%,rgba(11,34,56,.7) 66%,rgba(11,34,56,.25) 100%)}}
@media (max-width:760px){.lettre{padding:230px 22px 30px;border-radius:12px;margin-bottom:48px}
 .lettre-fond img{object-position:74% 40%}
 .lettre::before{background:linear-gradient(180deg,rgba(11,34,56,0) 0,rgba(11,34,56,.18) 110px,rgba(11,34,56,.86) 175px,rgba(11,34,56,.98) 215px,var(--navy) 260px)}}
@media (max-width:480px){.lettre-ligne{flex-direction:column}.lettre-ligne button{width:100%}.lettre h2{font-size:24px}}
@media (prefers-reduced-motion:reduce){.lettre *{transition:none}}