/* ==========================================================================
   LE FORMULAIRE DE LETTRE D'INFORMATION, ET RIEN D'AUTRE
   ==========================================================================

   Ce formulaire vit dans le PIED DE PAGE, donc sur les dix-neuf pages du
   site. Ses regles etaient dans booking.css, la feuille du tunnel de
   reservation : les cinquante et un kilo-octets du tunnel se chargeaient
   donc partout, pour un champ e-mail, et bloquaient l'affichage au passage.

   Les trois regles communes au tunnel sont recopiees ici plutot que
   partagees : elles font quatre lignes, et un troisieme fichier a charger
   couterait plus cher que la duplication.
   ========================================================================== */

.s411-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s411-arrow { display: inline-block; transition: transform .25s ease; }
.s411-nl [hidden],
[hidden].s411-nl-retour { display: none !important; }

/* ---------- lettre d'information ---------------------------------------- */

/* Les piles de polices étaient recopiées à la main, et tronquées : Impact
   manquait dans la chaîne de secours des titres, Segoe UI dans celle du
   texte. Elles viennent maintenant des jetons.
   Attention en relisant à l'écran : dans le pied de page, theme.css habille
   ce formulaire sur la bande dégradée (.s411-newsletter) et l'emporte sur
   ces règles pour les couleurs et les tailles. Ce qui est écrit ici ne se
   voit donc en entier que si le formulaire est posé ailleurs. */
.s411-nl {
    font-family: var(--wp--preset--font-family--body,
                     'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    max-width: 62ch;
}
.s411-nl-titre {
    font-family: var(--wp--preset--font-family--display,
                     'Archivo Black', 'Arial Black', Impact, sans-serif);
    text-transform: uppercase;
    letter-spacing: -.015em;
    /* TITRE DE SECTION, aux valeurs exactes de .s411-newsletter .s411-nl-titre
       dans theme.css, qui pèse 0-2-0 et l'emporte. Ce formulaire n'est posé
       que dans le pied de page : ce qui est écrit ici ne se voit jamais. Tant
       qu'on maintient les deux, elles doivent dire la même chose, sinon
       l'audit de la page réelle ne peut pas se faire dans le fichier qui a
       l'air de la décrire. */
    font-size: var(--wp--preset--font-size--x-large, 1.875rem);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 0 0 var(--wp--preset--spacing--20, 1rem);
}
.s411-nl-texte {
    margin: 0 0 var(--wp--preset--spacing--20, 1rem);
    font-size: var(--wp--preset--font-size--small, 1rem);
    line-height: 1.6;
    color: var(--wp--preset--color--ink-2, #55606d);
}

.s411-nl-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.s411-nl-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.s411-nl-email {
    flex: 1 1 15rem;
    min-width: 0;
    font-family: inherit;
    /* 1 rem au plancher, pour la même raison que les champs du tunnel : sous
       16 px, iOS agrandit la page au moment de la saisie. */
    font-size: max(1rem, var(--wp--preset--font-size--small, 1rem));
    padding: 14px 18px;
    border: 1.5px solid var(--wp--preset--color--rule, #e2e7ec);
    border-radius: 999px;
    background: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #0b0f14);
    transition: border-color .25s ease;
}
/* L'anneau du socle revient ici aussi : c'était le second endroit du projet
   où l'outline était coupé sans équivalent, et celui-là est présent dans le
   pied de page de toutes les pages du site. La bordure cyan reste en second
   signal. */
.s411-nl-email:focus { border-color: var(--wp--preset--color--cyan, #009fe3); }
/* C'est le bouton d'appel du site, celui des tuiles et du bandeau final :
   il garde son dégradé, mais celui du préréglage, et la courbe de survol du
   thème. À signaler, sans le corriger ici : sur ce dégradé le texte blanc
   démarre à 2,97:1 du côté cyan. C'est vrai de tous les boutons dégradés du
   thème, pas seulement de celui-ci, et cela se décide dans theme.css. */
.s411-nl-envoi {
    flex: none;
    font-family: var(--wp--preset--font-family--display,
                     'Archivo Black', 'Arial Black', Impact, sans-serif);
    font-size: var(--wp--preset--font-size--x-small, .8125rem);
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--wp--preset--color--base, #fff);
    background: var(--wp--preset--gradient--quadri,
                    linear-gradient(115deg, #009fe3 0%, #e6007e 100%));
    border: 0;
    border-radius: 999px;
    /* Mêmes jetons que le champ auquel il est collé : les deux respiraient
       pareil verticalement et pas horizontalement. */
    padding: var(--wp--preset--spacing--20, 1rem) var(--wp--preset--spacing--30, 1.75rem);
    cursor: pointer;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), filter .3s ease, opacity .2s ease;
}
.s411-nl-envoi:hover:not(:disabled) { transform: translateY(-2px); filter: saturate(1.3); }
.s411-nl-envoi:disabled { opacity: .55; cursor: default; }

.s411-nl-consent {
    display: flex;
    gap: var(--wp--preset--spacing--10, .5rem);
    align-items: flex-start;
    margin-top: var(--wp--preset--spacing--20, 1rem);
    font-size: var(--wp--preset--font-size--x-small, .8125rem);
    line-height: 1.5;
    color: var(--wp--preset--color--ink-2, #55606d);
    cursor: pointer;
}
.s411-nl-consent input {
    margin-top: 3px;
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--wp--preset--color--magenta, #e6007e);
}

/* Même forme que les deux autres messages d'état du fichier : filet gauche
   de 3 px, fond très pâle. Le trio d'erreur n'est plus recopié, il est lu. */
.s411-nl-retour {
    margin: var(--wp--preset--spacing--20, 1rem) 0 0;
    padding: var(--wp--preset--spacing--20, 1rem);
    border-radius: 0 4px 4px 0;
    background: var(--s411-succes-fond);
    border-left: 3px solid var(--s411-succes-filet);
    color: var(--s411-succes-texte);
    font-size: var(--wp--preset--font-size--x-small, .8125rem);
    line-height: 1.55;
}
.s411-nl-retour--err {
    background: var(--s411-erreur-fond);
    border-left-color: var(--s411-erreur-filet);
    color: var(--s411-erreur-texte);
}

/* Message affiché après un clic sur un lien de confirmation ou de
   désinscription, injecté en tête du contenu de la page d'accueil. */
.s411-nl-retour--ok, .s411-nl-retour--err {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}