* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 25px 0;
    background: #e9e5dc;
    color: #4b473f;
    font-family: Georgia, "Times New Roman", serif;
}

.page-envoi {
    width: 1100px;
    margin: 0 auto;
    background: #faf8f2;
    border: 1px solid #c9c1b2;
    box-shadow: 0 4px 18px rgba(65, 57, 44, 0.14);
}


/* ENTÊTE */

.entete-envoi {
    padding: 24px 30px 22px;
    text-align: center;
}

.entete-envoi h1 {
    margin: 5px 0 18px;
    color: #596a4e;
    font-size: 31px;
    font-weight: normal;
}

.retour-cartes {
    display: block;
    margin-bottom: 12px;
    color: #596a4e;
    text-align: left;
    text-decoration: none;
}

.retour-cartes:hover {
    text-decoration: underline;
}


/* ÉTAPES */


.explication-etape {
    margin: 0;
    color: #706a60;
    font-size: 20px;
}


/* DEUX COLONNES */

.preparation-carte {
    display: block;
    padding: 0 25px 30px;
}

.bloc-carte,
.bloc-formulaire {
    padding: 20px;
    background: #f7f3ea;
    border: 1px solid #d2cabd;
}

.bloc-formulaire {
    border-cent.bloc-formulaire {
    text-align: center;
}er: 0;
}


/* TITRES */

h2 {
    margin: 0 0 20px;
    color: #596a4e;
    font-size: 25px;
    font-weight: normal;
}

h3 {
    margin: 0 0 14px;
    color: #596a4e;
    font-size: 20px;
    font-weight: normal;
}


/* CARTE */

.grande-carte {
    display: block;
    width: 820px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid #aaa391;
}

.agrandir {
    margin: 12px 0 0;
    color: #736e64;
    text-align: center;
    font-size: 14px;
}


/* FORMULAIRE */

label {
    display: block;
    margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="date"],
textarea {
    width: 100%;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #bdb6aa;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

textarea {
    resize: vertical;
}

.compteur {
    margin: 5px 0 0;
    color: #777166;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: right;
}

.deux-champs,
.destinataire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.section-formulaire {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #d5cec1;
}

.destinataire {
    margin-bottom: 12px;
}


/* BOUTONS SECONDAIRES */

.bouton-secondaire,
.option {
    padding: 9px 14px;
    background: #fffdf8;
    border: 1px solid #9cac8c;
    color: #596a4e;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.bouton-secondaire:hover {
    background: #e8eddf;
}

.option:hover {

    background: #edf3e7;

    border-color: #8ea97b;

    transform: translateY(-2px);

}

/* CARNET */

.liens-carnet {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 15px;
}

.liens-carnet a {
    color: #596a4e;
    font-size: 17px;
}


/* DATE */

.choix-date,
.choix-option {
    margin: 12px 0;
}

#choix-date-programmee {
    margin-top: 14px;
}

.facultatif {
    color: #6f695d;
    font-size: 16px;
    font-style: italic;
}


/* PERSONNALISATION */

.option {

    display: block;
    width: 100%;

    margin-top: 10px;
    padding: 14px 18px;

    background: #fdfcf8;

    border: 1px solid #c7d3bc;
    border-radius: 8px;

    color: #4d5d45;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;

    text-align: left;

    cursor: pointer;

    transition: all .20s ease;

}

/* VISUALISER */

.bouton-visualiser {
    display: block;
    width: 100%;
    margin-top: 28px;
    padding: 14px;

    background: #66785b;
    border: 0;

    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;

    cursor: pointer;
}

.bouton-visualiser:hover {
    background: #536548;
}

.note-confidentialite {
    margin: 10px 0 0;
    color: #716c63;
    font-size: 13px;
    text-align: center;
}


/* PIED */

.pied-envoi {
    padding: 20px;
    background: #667259;
    color: #ffffff;
    text-align: center;
}

.pied-envoi p {
    margin: 5px 0;
}

.devise {
    font-size: 18px;
    font-style: italic;
}

select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;

    background: #ffffff;
    color: #333333;

    border: 1px solid #bdb6aa;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

select option {
    background: #ffffff;
    color: #333333;
}

#police-message,
#taille-message,
#couleur-message {
    display: block;
} 

/* Apparence des champs lorsqu'ils sont actifs */

input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color: #8ea97b;

    box-shadow: 0 0 6px rgba(142, 169, 123, 0.35);

}


/* =========================================
   STYLE DU MESSAGE
   ========================================= */

.section-style-message {

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap: 12px 18px;

    margin-bottom: 18px;

}

.section-style-message select {

    width: 100%;
    min-width: 0;
    margin-bottom: 0;

}

.section-style-message .choix-option {

    display: inline-flex;
    align-items: center;

    margin: 0;

}

#style-recommande {

    justify-self: end;
    padding: 7px 14px;

} 

.titre-carte {
    text-align: center;
}

/* =========================================
   PERSONNALISATION DE LA CARTE
   ========================================= */

.personnalisation-fiche {
    margin-top: 14px;
    padding: 15px 17px;

    background: #fffdf8;

    border: 1px solid #d5cec1;
    border-radius: 6px;
}

.personnalisation-fiche h4 {
    margin: 0 0 10px;

    color: #596a4e;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: normal;
}

.aucun-choix {
    margin: 0 0 8px;

    color: #777166;
    font-size: 14px;
    font-style: italic;
}

#texte-poetique-choisi .texte-poetique p {
    margin: 0;
    line-height: 1.7;
}

#texte-poetique-choisi .texte-poetique .auteur {
    margin-top: 10px;

    color: #706a60;

    font-size: 14px;
    font-style: italic;

    text-align: right;
}

.actions-poesie {
    margin-top: 10px;
}

.actions-poesie a,
.lien-personnalisation {
    color: #596a4e;

    font-size: 14px;

    text-decoration: none;
}

.actions-poesie a:hover,
.lien-personnalisation:hover {
    text-decoration: underline;
}

.separateur-action {
    margin: 0 7px;

    color: #aaa293;
}

.musique-selectionnee {
    margin: 0 0 8px;
    color: #4d5d45;
    font-size: 15px;
}

.actions-musique-preparation {
    margin-top: 10px;
}

.actions-musique-preparation a {
    color: #596a4e;
    font-size: 14px;
    text-decoration: none;
}

.actions-musique-preparation a:hover {
    text-decoration: underline;
}

#lecteur-musique-choisie {
    width: 100%;
    margin-top: 12px;
}

.apercu-timbre {
    display: block;

    max-width: 110px;
    height: auto;

    margin: 5px 0 10px;
}

.actions-timbre {
    margin-top: 10px;
}

.actions-timbre a {
    color: #596a4e;
    font-size: 14px;
    text-decoration: none;
}

.actions-timbre a:hover {
    text-decoration: underline;
}