/* =====================================================
   PAGE — CORRESPONDANCE / CARTE POSTALE
   VERSION STRICTEMENT IDENTIQUE ANCIEN SITE
   (corrigée sans régression)
===================================================== */

/* =====================================================
   VARIABLES GLOBALES
===================================================== */

body.page-form_message{
    --form-width: clamp(520px, 60vw, 720px);
    --form-margin-top: clamp(80px, 8vh, 120px);

    --font-size-label: clamp(14px, 1.2vw, 16px);
    --font-size-input: clamp(14px, 1.2vw, 15px);
}


/* =====================================================
   HEADER / FOOTER — MASQUÉS
===================================================== */

body.page-form_message #site-header,
body.page-form_message #site-header-wrap,
body.page-form_message #site-navigation-wrap,
body.page-form_message #top-bar,
body.page-form_message h1,
body.page-form_message footer,
body.page-form_message #footer,
body.page-form_message #copyright,
body.page-form_message .breadcrumbs{
    display: none !important;
}

/* =====================================================
   CONTENEUR PRINCIPAL
===================================================== */

body.page-form_message #content-wrap{
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 0 140px;

    background: transparent !important;
}

/* =====================================================
   FORMULAIRE
===================================================== */

body.page-form_message form{
    margin: var(--form-margin-top) auto 0 auto;
    width: var(--form-width);
    max-width: 92%;

    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    padding: 32px 36px 40px;
    border-radius: 18px;
}

/* =====================================================
   CHAMPS
===================================================== */

body.page-form_message form label{
    display: block;
    margin-bottom: 6px;

    font-weight: 700;
    font-size: var(--font-size-label);
    color: #1f3a52;
}

body.page-form_message form input,
body.page-form_message form textarea{
    width: 100%;

    background-color: #e9f3fb;
    border: 1px solid #b8d4ec;
    border-radius: 6px;

    padding: 10px 12px;
    font-size: var(--font-size-input);
}

body.page-form_message form textarea{
    min-height: clamp(200px, 26vh, 300px);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.6;
}

/* =====================================================
   BOUTON
===================================================== */

body.page-form_message form button{
    display: block;
    margin: 42px auto 0 auto;
    padding: 16px 36px;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;

    border-radius: 999px;
    border: none;

    background: #aa2828;
    color: #fff;

    cursor: pointer;
}

/* =====================================================
   FORMULAIRE
===================================================== */

body.page-form_message form {
    margin: var(--form-margin-top) auto 0;
    width: var(--form-width);
    max-width: 92%;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    padding: 32px 36px 40px;
    border-radius: 18px;
}

/* =====================================================
   TEXTE D’INTENTION
===================================================== */
body.page-form_message::after {
    content: "Une correspondance, un geste, un regard.";
    position: fixed;
    right: 6%;
    top: 45%;
    font-size: clamp(18px, 2vw, 28px);
    color: rgba(31,58,82,0.15);
    font-style: italic;
    pointer-events: none;
}


/* =====================================================
   ÉTAT — MESSAGE ENVOYÉ
   (après soumission réussie)
===================================================== */

/* Masquer le formulaire */
body.page-form_message.amup-message-envoye form {
    display: none !important;
}

/* Afficher la carte de confirmation */
body.page-form_message.amup-message-envoye .amup-thankyou {
    margin: 120px auto 0 auto;
    width: var(--form-width);
    max-width: 92%;

    background: rgba(233,243,251,0.96);
    padding: 48px 56px 56px;
    border-radius: 28px;

    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    color: #1f3a52;
    line-height: 1.75;

    position: relative;
    z-index: 10;
}

/* Contenu interne */
body.page-form_message.amup-message-envoye .amup-thankyou-inner > div {
    margin-bottom: 14px;
    font-size: 16px;
}

/* Message utilisateur */
body.page-form_message.amup-message-envoye
.amup-thankyou-inner > div:nth-child(4){
    margin: 28px 0;
    padding: 20px 22px;
    background: rgba(255,255,255,0.65);
    border-radius: 14px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.65;
}

/* Bouton nouveau message */
body.page-form_message.amup-message-envoye .amup-new-message{
    display: block;
    margin: 42px auto 0 auto;
    padding: 16px 38px;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;

    border-radius: 999px;
    border: none;

    background: #aa2828;
    color: #ffffff;

    cursor: pointer;
}
/* =====================================================
   ÉTAT — MESSAGE ENVOYÉ
   - Activé par JS : body.amup-message-envoye
   - Remplace visuellement le formulaire
===================================================== */

/* Masque définitivement le formulaire */
body.page-form_message.amup-message-envoye form.amup-form {
    display: none !important;
}

/* Conteneur principal conservé */
body.page-form_message.amup-message-envoye #content-wrap {
    padding-top: clamp(100px, 12vh, 160px);
}

/* Bloc confirmation */
body.page-form_message.amup-message-envoye .amup-thankyou {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Carte de confirmation */
body.page-form_message.amup-message-envoye .amup-thankyou-inner {
    width: var(--form-width);
    max-width: 92%;

    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    padding: 40px 44px 44px;
    border-radius: 22px;

    color: #1f3a52;
    font-size: 16px;
    line-height: 1.6;

    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* Lignes de texte */
body.page-form_message.amup-message-envoye .amup-thankyou-inner > div {
    margin-bottom: 14px;
}

/* Message final */
body.page-form_message.amup-message-envoye .amup-thankyou-confirm {
    margin-top: 26px;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

/* Bouton "Nouveau message" */
body.page-form_message.amup-message-envoye .amup-new-message {
    display: block;
    margin: 36px auto 0;

    padding: 14px 34px;
    border-radius: 999px;
    border: none;

    background: #aa2828;
    color: #fff;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;

    cursor: pointer;
}

/* Texte d’intention conservé */
body.page-form_message.amup-message-envoye::after {
    content: "Message envoyé.";
    position: fixed;
    right: 6%;
    top: 45%;
    font-size: clamp(18px, 2vw, 28px);
    color: rgba(31,58,82,0.18);
    font-style: italic;
    pointer-events: none;
}

/* =====================================================
   EMOJI — ALIGNÉ À DROITE DU LABEL MESSAGE
===================================================== */

/* Le label devient le conteneur de référence */
body.page-form_message label.amup-field {
    position: relative;
}

/* Conteneur outils (aligné en haut à droite du label) */
body.page-form_message .amup-message-tools {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-2px);
    z-index: 10;
}

/* Bouton emoji */
body.page-form_message .amup-emoji-btn {
    background: transparent !important;
    border: none !important;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin: 0 !important;
    display: inline-block;
    opacity: 0.75;
    transition: transform 0.15s ease, opacity 0.2s ease;
}

/* Hover léger */
body.page-form_message .amup-emoji-btn:hover {
    transform: scale(1.15);
    opacity: 1;
}

/* Le textarea ne réserve plus d’espace inutile */
body.page-form_message textarea[name="message"] {
    padding-right: 12px;
}

/* =====================================================
   COMPTEUR DE CARACTÈRES — MESSAGE
   (rouge et aligné à droite du label)
===================================================== */
body.page-form_message .amup-char-count {
    color: #aa2828;
    font-weight: 700;
    margin-left: 12px;
}