/* =========================================================================
   MOSAÏCA — INSCRIPTION À L'INFOLETTRE
   -------------------------------------------------------------------------
   Portée : uniquement les blocs `.mnl`. Préfixe unique, aucune règle
   globale, aucune feuille Mailchimp importée : l'apparence appartient
   entièrement à Mosaïca.

   Deux emplacements, un seul objet :
     .mnl--footer     dans le pied de page global, sur toutes les pages ;
     .mnl--editorial  en fin de lecture, sur les pages éditoriales.

   Jetons repris de l'existant, aucun nouveau langage graphique :
   marine --navy / #082F49, or --gold #C9A45C, 'Ibarra Real Nova' pour les
   titres, 'Space Grotesk' pour le reste, rayon 2px, champ de 52px et
   bouton de 54px comme la page Contact, halo de focus doré identique.

   Les blocs portent `hidden` dans le HTML : ils n'apparaissent que si
   l'adresse du formulaire Mailchimp est configurée (voir
   assets/newsletter-config.js). Un formulaire qui ne mène nulle part ne
   doit jamais être affiché.
   ========================================================================= */

.mnl[hidden]{display:none}

.mnl{
  --mnl-ink:#082F49;
  --mnl-ink-soft:rgba(8,47,73,.72);
  --mnl-ink-faint:rgba(8,47,73,.68);
  --mnl-line:rgba(8,47,73,.24);
  --mnl-gold:var(--gold,#C9A45C);
  --mnl-danger:#9B2C2C;
  box-sizing:border-box;
  font-family:'Space Grotesk',Arial,sans-serif;
  color:var(--mnl-ink);
}
.mnl *{box-sizing:border-box}

.mnl-title{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;
  line-height:1.28;
  color:var(--mnl-ink);
  margin:0;
}
.mnl-say{
  font-size:.95rem;
  line-height:1.6;
  color:var(--mnl-ink-soft);
  margin:.55rem 0 0;
  max-width:62ch;
}

/* ─────────────────────────────────────────────────────────────────────
   Formulaire — champ et bouton
   ───────────────────────────────────────────────────────────────────── */
.mnl-form{margin:0}
.mnl-form fieldset{border:0;padding:0;margin:0;min-width:0}

/* Le libellé existe réellement pour les lecteurs d'écran ; il n'est pas
   remplacé par l'invite du champ, seulement masqué à l'œil. */
.mnl-label{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

.mnl-row{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:flex-start;
}
.mnl-inputs{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  flex:1 1 260px;
  min-width:0;
}
.mnl-inputs > *{flex:1 1 180px;min-width:0}

.mnl-input{
  width:100%;
  min-height:52px;
  padding:.85rem 1rem;
  border:1px solid var(--mnl-line);
  border-radius:2px;
  background:#fff;
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:1rem;line-height:1.5;
  color:var(--mnl-ink);
}
.mnl-input::placeholder{color:#8A98A4}
.mnl-input:hover{border-color:var(--mnl-ink)}
/* Deux signaux au focus, jamais un seul : la bordure fonce ET un halo
   doré la double — comme sur la page Contact. */
.mnl-input:focus-visible{
  outline:none;
  border-color:var(--mnl-ink);
  box-shadow:0 0 0 3px rgba(201,164,92,.42);
}
.mnl-input[aria-invalid="true"]{border-color:var(--mnl-danger)}

/* Selecteur a deux classes : mobile-premium.css impose `min-height:44px`
   aux `button[type=submit]` sous 900px, et un selecteur d'attribut l'emporte
   sur une classe seule. On remonte la specificite ici plutot que de toucher
   une feuille globale — le bouton garde ainsi la meme hauteur que celui de
   la page Contact a toutes les largeurs. */
.mnl .mnl-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;
  padding:1rem 1.6rem;
  flex:0 0 auto;
  border:1px solid var(--mnl-gold);
  border-radius:2px;
  background:var(--mnl-gold);
  color:#0D0D0D;                       /* 7,9:1 sur l'or */
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:.82rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease;
}
.mnl-submit::after{content:"\2192";transition:transform .25s ease}
.mnl-submit:hover{background:#D8B879;border-color:#D8B879}
.mnl-submit:hover::after{transform:translateX(4px)}
.mnl-submit:focus-visible{outline:2px solid var(--mnl-ink);outline-offset:3px}
.mnl-submit[disabled]{opacity:.62;cursor:progress}
.mnl-submit[disabled]:hover{background:var(--mnl-gold);border-color:var(--mnl-gold)}
.mnl-submit[disabled]::after{transform:none}

/* Champ piège : invisible pour l'œil ET pour le lecteur d'écran, hors de
   l'ordre de tabulation. `display:none` est évité — certains robots
   l'ignorent explicitement. */
.mnl-hp{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

.mnl-consent{
  margin:.85rem 0 0;
  font-size:.8rem;line-height:1.55;
  color:var(--mnl-ink-faint);
  max-width:62ch;
}
.mnl-consent a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.mnl-consent a:hover,
.mnl-consent a:focus-visible{color:var(--mnl-gold)}

/* Une seule zone aria-live porte tous les messages : le lecteur d'écran
   n'a qu'un endroit à surveiller. */
.mnl-status{margin:0;font-size:.92rem;line-height:1.55}
.mnl-status:empty{display:none}
.mnl-status{margin-top:.85rem;padding-left:.85rem;border-left:3px solid transparent}
.mnl-status.is-ok{border-left-color:var(--mnl-gold);color:var(--mnl-ink)}
.mnl-status.is-err{border-left-color:var(--mnl-danger);color:#7A1919}

/* ─────────────────────────────────────────────────────────────────────
   Emplacement 1 — pied de page global
   Discret : une ligne de titre, une phrase, le champ et le bouton.
   ───────────────────────────────────────────────────────────────────── */
.mnl--footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
  padding-block:clamp(1.75rem,3vw,2.25rem);
  border-top:1px solid rgba(8,47,73,.14);
}
.mnl--footer .mnl-title{font-size:clamp(1.05rem,1.5vw,1.25rem)}
.mnl--footer .mnl-say{font-size:.88rem}

@media(max-width:900px){
  .mnl--footer{grid-template-columns:1fr;gap:1.15rem;padding-block:1.75rem}
}
@media(max-width:640px){
  .mnl--footer .mnl-row{flex-direction:column;gap:.75rem}
  .mnl--footer .mnl-inputs{flex:1 1 auto;width:100%}
  .mnl--footer .mnl-submit{width:100%}
}

/* ─────────────────────────────────────────────────────────────────────
   Emplacement 2 — fin de lecture des pages éditoriales
   ───────────────────────────────────────────────────────────────────── */
.mnl--editorial{
  background:#F8FAFC;
  border-top:1px solid rgba(8,47,73,.14);
  border-bottom:1px solid rgba(8,47,73,.14);
  padding-block:clamp(2.5rem,5vw,3.75rem);
}
.mnl--editorial .mnl-inner{
  width:min(var(--container-width,1200px),100% - 2*var(--page-padding,1.5rem));
  margin-inline:auto;
  max-width:760px;
}
.mnl--editorial .mnl-eyebrow{
  display:block;
  font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--mnl-ink-soft);
  margin:0 0 .7rem;
}
.mnl--editorial .mnl-title{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.mnl--editorial .mnl-form{margin-top:clamp(1.4rem,2.4vw,1.9rem)}

@media(max-width:640px){
  .mnl--editorial .mnl-row{flex-direction:column;gap:.75rem}
  .mnl--editorial .mnl-inputs{flex:1 1 auto;width:100%}
  .mnl--editorial .mnl-submit{width:100%}
}

/* Le mouvement n'est jamais indispensable à la compréhension. */
@media(prefers-reduced-motion:reduce){
  .mnl-submit,
  .mnl-submit::after{transition:none}
}