@charset "UTF-8";
/* MIBE V3 : rubrique Contact en courrier
   La lettre (le formulaire) sort d'une enveloppe, y retourne, reçoit le cachet de la poste
   (le captcha) et part au fond de la page. Animé par js/enveloppe.js, qui pose la classe .anime
   sur le formulaire : sans elle, la lettre s'affiche seule, comme un formulaire classique. */

/* Écriture à la main de la lettre et de l'enveloppe : Prilly Monly */
@font-face {
    font-family: 'Prilly Monly';
    src: url('../fonts/PrillyMonly/PrillyMonly.woff2') format('woff2'),
         url('../fonts/PrillyMonly/PrillyMonly.woff') format('woff'),
         url('../fonts/PrillyMonly/PrillyMonly.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.contact {
    padding: clamp(80px, 11vw, 140px) 0;
    background: var(--rose);
}

.contact .kezako { margin-bottom: clamp(44px, 7vw, 80px); }


.courrier {
    --ew: min(520px, 92vw);              /* largeur de l'enveloppe */
    --eh: calc(var(--ew) * .6);          /* hauteur de l'enveloppe */
    position: relative;
    width: var(--ew);
    margin: 0 auto;
    perspective: 1600px;
    perspective-origin: 50% calc(100% - var(--eh) / 2);
}

/* ---- La lettre ---- */
.lettre {
    position: relative;
    padding: clamp(16px, 4vw, 28px) clamp(18px, 5vw, 36px);
    text-align: left;
    color: var(--navy);
    background: #fffdf9;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(60, 40, 50, .08), 0 12px 30px rgba(60, 40, 50, .10);
}

.lettre__date,
.lettre__appel,
.lettre__salut {
    margin: 0;
    font-family: 'Prilly Monly', 'Segoe Print', 'Bradley Hand', cursive;
    font-weight: normal;
    line-height: 1.2;
}

.lettre__entete {
    display: flex;
    flex-wrap: wrap-reverse;          /* écran étroit : la date passe au-dessus */
    justify-content: space-between;
    align-items: baseline;
    gap: 0 12px;
    margin-bottom: .2rem;
}
.lettre__date  { margin-left: auto; font-size: 1.1rem; opacity: .7; }
.lettre__appel { font-size: 1.6rem; }
.lettre__salut { margin: .5rem 0 0; font-size: 1.35rem; }

.lettre textarea,
.lettre input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 2px;
    font-family: 'Prilly Monly', 'Segoe Print', 'Bradley Hand', cursive;
    font-weight: normal;
    font-size: 1.28rem;
    color: var(--navy);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}

.lettre ::placeholder { color: #a99ba3; opacity: 1; }

/* Papier ligné : les lignes défilent avec le texte */
.lettre textarea {
    --ligne: 2rem;
    height: calc(var(--ligne) * var(--lignes, 4) + 4px);   /* --lignes : 4, ou moins sur petit écran (enveloppe.js) */
    line-height: var(--ligne);
    resize: none;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent calc(var(--ligne) - 1px),
        rgba(18, 18, 89, .13) calc(var(--ligne) - 1px), rgba(18, 18, 89, .13) var(--ligne));
    background-attachment: local;
}

.lettre__compte {
    margin: .15rem 0 0;
    font-size: .72rem;
    text-align: right;
    opacity: .5;
}

.lettre__signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
}

.lettre input {
    height: 2.25rem;
    border-bottom: 1.5px dotted rgba(18, 18, 89, .3);
    transition: border-color .2s;
}

.lettre input:focus,
.lettre textarea:focus { border-color: var(--pink); }
.lettre input:focus { border-bottom-style: solid; }

/* Le soulignement rose suffit à montrer le champ actif : pas de cadre autour d'une ligne */
.lettre input:focus-visible { outline: none; }
.lettre textarea:focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(231, 60, 126, .35); }

.lettre [aria-invalid="true"] { border-bottom: 1.5px solid var(--pink); }
.lettre textarea[aria-invalid="true"] { box-shadow: inset 3px 0 0 var(--pink); }

#firstname { text-transform: capitalize; }
#lastname  { text-transform: uppercase; }
#firstname::placeholder, #lastname::placeholder { text-transform: none; }

/* Téléphone : prénom et nom côte à côte, courriel et téléphone sur leur propre ligne,
   écriture plus petite (environ 15 %) */
@media (max-width: 460px) {
    .lettre__signature > div:nth-child(n+3) { grid-column: 1 / -1; }
    .lettre__date  { font-size: .95rem; }
    .lettre__appel { font-size: 1.35rem; }
    .lettre__salut { font-size: 1.15rem; }
    .lettre textarea,
    .lettre input  { font-size: 1.08rem; }
    .lettre textarea { --ligne: 1.75rem; }
    .lettre input  { height: 1.95rem; }
    .lettre__compte { font-size: .65rem; }
    .courrier .btn { padding: 12px 30px; font-size: .85rem; }
}

.lettre__actions { margin-top: 1rem; text-align: center; }

.courrier .btn {
    padding: 14px 36px;
    font-family: 'Montserrat-ExtraBold', sans-serif;
    font-weight: 800;
    font-size: .92rem;
    color: #fff;
    background: var(--ink);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s, transform .25s;
}

.courrier .btn:hover { background: var(--pink); transform: translateY(-2px); }
.courrier .btn:disabled { opacity: .6; transform: none; cursor: default; }
.courrier .btn:focus-visible, .lettre :focus-visible, .guichet button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.messageenvoye {
    max-width: min(520px, 92vw);
    margin: 0 auto 14px;
    line-height: 1.45;
    color: var(--navy);
    font-size: .95rem;
}

.messageenvoye.erreur { color: #b0124f; }

/* Sans animation : pièces de l'enveloppe masquées, la lettre seule */
.courrier:not(.anime) .enveloppe__fond,
.courrier:not(.anime) .enveloppe__rabat,
.courrier:not(.anime) .enveloppe__poche,
.courrier:not(.anime) .enveloppe__face,
.courrier:not(.anime) .courrier__fin { display: none; }

/* ---- L'enveloppe (animée) ----
   Empilement : fond 1, rabat ouvert 2, lettre 3, poche 4, rabat fermé 5, recto 6.
   La lettre est dans le flux : sa hauteur fait celle de l'ensemble. L'enveloppe est
   posée en bas ; la lettre y plonge sur 35 % de sa hauteur. */
/* Remontée sous le titre (arrivée sur la section, lettre partie), l'enveloppe et le formulaire
   chevauchent la rubrique du dessus par une zone vide : ils ne captent pas les clics.
   Seuls la lettre, le guichet du cachet et le message de fin y réagissent. */
.courrier.anime { pointer-events: none; }
.anime .guichet,
.anime .courrier__fin { pointer-events: auto; }

.anime .enveloppe {
    position: relative;
    pointer-events: none;   /* voir .courrier.anime ci-dessus */
    padding-bottom: calc(var(--eh) * .65);
    transform-origin: 50% calc(100% - var(--eh) / 2);
    container-type: inline-size;
}

.anime .enveloppe__fond,
.anime .enveloppe__rabat,
.anime .enveloppe__poche,
.anime .enveloppe__face {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--eh);
}

/* Intérieur de l'enveloppe (vu par l'ouverture) ; son ombre est celle de l'enveloppe */
.anime .enveloppe__fond {
    z-index: 1;
    background: linear-gradient(to bottom, #dcc6b2, #e9d8c8 45%);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(60, 40, 50, .10), 0 22px 44px rgba(60, 40, 50, .18);
}

/* Rabat : triangle articulé sur le bord haut. Ouvert, il bascule vers le haut, derrière la lettre.
   Le changement de plan (z-index) se fait à mi-course, quand il est vu de profil. */
.anime .enveloppe__rabat {
    z-index: 2;
    transform-origin: 50% 0;
    transform: perspective(900px) rotateX(180deg);
    filter: drop-shadow(0 2px 2px rgba(60, 40, 50, .14));
    transition: transform .55s cubic-bezier(.5, 0, .3, 1), z-index 0s linear .27s;
    pointer-events: none;
}

.anime .enveloppe__rabat span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 62%;
    background: linear-gradient(to bottom, #f6ebdf, #efe0d0);
    border-radius: 6px 6px 0 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%);
            clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%);
}

.anime .enveloppe.ferme .enveloppe__rabat {
    z-index: 5;
    transform: perspective(900px) rotateX(0deg);
}

.anime .lettre {
    z-index: 3;
    pointer-events: auto;
    width: 92%;
    margin: 0 auto;
    padding-bottom: calc(var(--eh) * .35 + clamp(14px, 3vw, 22px));
    /* La lettre est coupée au bas de l'enveloppe quand elle y descend (--clip, posé par le script) */
    -webkit-clip-path: polygon(-60px -60px, calc(100% + 60px) -60px, calc(100% + 60px) calc(100% - var(--clip, 0px)), -60px calc(100% - var(--clip, 0px)));
            clip-path: polygon(-60px -60px, calc(100% + 60px) -60px, calc(100% + 60px) calc(100% - var(--clip, 0px)), -60px calc(100% - var(--clip, 0px)));
    transition: transform .75s cubic-bezier(.55, 0, .25, 1), clip-path .75s cubic-bezier(.55, 0, .25, 1), -webkit-clip-path .75s cubic-bezier(.55, 0, .25, 1);
}

.anime .lettre.rangee { transform: translateY(var(--d, 0px)); }

/* Poche : les trois rabats collés (côtés et bas), en forme de V */
.anime .enveloppe__poche {
    z-index: 4;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L50 50L100 100' fill='none' stroke='%23000' stroke-opacity='.07' stroke-width='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
        linear-gradient(to bottom, #f3e5d6, #fbf3ea 70%);
    border-radius: 0 0 6px 6px;
    -webkit-clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}

/* Pendant l'envol : l'ombre portée s'efface dès le départ (l'enveloppe quitte la page) */
.anime .enveloppe.enchantee .enveloppe__face {
    box-shadow: 0 1px 2px rgba(60, 40, 50, .08);
    transition: box-shadow .35s ease;
}

/* ---- Recto : adresse, expéditeur, cachet ---- */
.anime .enveloppe__face {
    z-index: 6;
    visibility: hidden;
    color: var(--navy);
    text-align: left;
    background: linear-gradient(160deg, #fdf7f0, #f6ebdf);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(60, 40, 50, .10), 0 22px 44px rgba(60, 40, 50, .18);
}

.anime .enveloppe.retournee .enveloppe__face { visibility: visible; }

.enveloppe__exp {
    position: absolute;
    left: 6%;
    top: 8%;
    margin: 0;
    max-width: 50%;
    font-family: 'Prilly Monly', 'Segoe Print', 'Bradley Hand', cursive;
    font-weight: normal;
    font-size: clamp(.95rem, 3.3cqw, 1.15rem);
    line-height: 1.15;
    opacity: .75;
}

.enveloppe__adresse {
    position: absolute;
    left: 28%;
    right: 5%;
    top: 47%;
    margin: 0;
    font-family: 'Prilly Monly', 'Segoe Print', 'Bradley Hand', cursive;
    font-weight: normal;
    font-size: clamp(.95rem, 4cqw, 1.45rem);
    line-height: 1.3;
}

.enveloppe__adresse span {
    display: block;
    white-space: nowrap;
    border-bottom: 1px solid rgba(18, 18, 89, .12);
}

/* Cachet de la poste : invisible tant que la lettre n'a pas été tamponnée */
.cachet {
    position: absolute;
    right: 4%;
    top: 6%;
    width: 46%;
    color: #23266e;
    opacity: 0;
    transform: rotate(-8deg);
    pointer-events: none;
    /* Encre irrégulière */
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") center / 100% 100%;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") center / 100% 100%;
}

.cachet svg { display: block; width: 100%; height: auto; overflow: visible; }

.cachet.pose {
    opacity: .85;
    animation: tamponne .42s cubic-bezier(.3, .7, .4, 1) both;
}

@keyframes tamponne {
    0%   { opacity: 0;   transform: scale(1.9) rotate(-3deg); }
    60%  { opacity: .9;  transform: scale(.95) rotate(-9deg); }
    100% { opacity: .85; transform: scale(1) rotate(-8deg); }
}

/* ---- Guichet : le captcha, au-dessus de l'enveloppe ---- */
.guichet {
    position: relative;
    margin: 0 auto 24px;
    padding: 22px 20px 16px;
    width: min(380px, 100%);
    color: var(--navy);
    background: #fffdf9;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(60, 40, 50, .14);
}

.anime .guichet {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;                      /* centré par les marges : un décalage horizontal animé ferait */
    bottom: calc(var(--eh) + 26px);/* déborder la page au chargement et dézoomer les téléphones */
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .5s var(--ease), visibility 0s linear .5s;
}

.anime .guichet.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .4s ease, transform .5s var(--ease), visibility 0s;
}

.guichet__titre {
    margin: 0;
    font-family: 'Prilly Monly', 'Segoe Print', 'Bradley Hand', cursive;
    font-weight: normal;
    font-size: 1.6rem;
    line-height: 1.1;
}

.guichet__texte { margin: .4rem 0 1rem; font-size: .85rem; line-height: 1.5; }

.guichet__retour {
    margin-top: .8rem;
    padding: 4px 2px;
    font: inherit;
    font-size: .8rem;
    color: var(--navy);
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(18, 18, 89, .3);
    cursor: pointer;
}

/* ---- Fin : la lettre est partie ---- */
.anime .courrier__fin {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: calc(var(--eh) * .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .7s var(--ease), visibility 0s linear .7s;
}

.anime .courrier__fin.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .6s ease, transform .7s var(--ease), visibility 0s;
}

.courrier__merci {
    margin: 0 0 1.4rem;
    font-family: 'Prilly Monly', 'Segoe Print', 'Bradley Hand', cursive;
    font-weight: normal;
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1.1;
    color: var(--navy);
}

/* Étincelles du départ */
.etincelles {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: hidden;
    pointer-events: none;
}

.etincelles i {
    position: absolute;
    display: block;
    -webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
            clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.etincelles i.rond { -webkit-clip-path: circle(50%); clip-path: circle(50%); }