@charset "UTF-8";
/**
 * Contact.
 */

.ffco-card {
	margin-top: 38px; display: flex; flex-wrap: wrap; align-items: stretch;
	border-radius: 26px; overflow: hidden; box-shadow: var(--ff-shadow-lg); background: #fff;
}
.ffco-card__art {
	flex: 1 1 320px; min-height: clamp(280px, 36vw, 540px); position: relative; overflow: hidden;
	background: linear-gradient(140deg, var(--ff-pink-soft), var(--ff-pink) 55%, var(--ff-pink-mid));
}
.ffco-card__art::after {
	content: '\273F'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: clamp(90px, 14vw, 180px); color: rgba(255,253,251,.5);
}
.ffco-card__pane { flex: 1 1 400px; padding: clamp(26px, 3.4vw, 46px); }

.ffco-form { display: flex; flex-direction: column; gap: 16px; }
.ffco-form label { display: flex; flex-direction: column; gap: 7px; }
.ffco-form label > span, .ffco-form__lbl {
	font: 700 10.5px var(--ff-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(51,39,46,.65);
}
.ffco-form input[type="text"], .ffco-form input[type="email"] {
	height: 48px; border: 1px solid rgba(224,147,190,.45); border-radius: 12px;
	padding: 0 14px; background: var(--ff-bg-soft); font: 500 14px var(--ff-sans); color: var(--ff-ink);
	transition: all .25s;
}
.ffco-form textarea {
	border: 1px solid rgba(224,147,190,.45); border-radius: 12px;
	padding: 13px 14px; background: var(--ff-bg-soft); resize: vertical; line-height: 1.6;
	font: 500 14px var(--ff-sans); color: var(--ff-ink); transition: all .25s;
}
.ffco-form input:focus, .ffco-form textarea:focus { outline: none; border-color: var(--ff-pink); box-shadow: 0 0 0 3px rgba(224,147,190,.22); }
.ffco-form__pair { display: flex; flex-wrap: wrap; gap: 16px; }
.ffco-form__pair label { flex: 1 1 190px; }
.ffco-form__subj { display: flex; flex-direction: column; gap: 7px; }
.ffco-form__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ffco-chip input { position: absolute; opacity: 0; }
.ffco-chip span {
	display: inline-block; border: 1px solid rgba(224,147,190,.5); cursor: pointer;
	border-radius: var(--ff-r-pill); padding: 10px 16px;
	font: 600 11.5px var(--ff-sans); background: rgba(224,147,190,.08); color: var(--ff-pink-mid);
	transition: all .25s;
}
.ffco-chip input:checked + span { background: var(--ff-pink); color: #fff; font-weight: 800; }
.ffco-rgpd { flex-direction: row !important; align-items: flex-start; gap: 10px !important; cursor: pointer; }
.ffco-rgpd input { width: 17px; height: 17px; accent-color: var(--ff-pink); margin-top: 2px; flex: none; }
.ffco-rgpd span { font: 400 12px/1.6 var(--ff-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ff-ink-70) !important; }
.ffco-err { margin: 0; font: 600 12.5px var(--ff-sans); color: #A5484C; }

.ffco-ok { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 340px; text-align: center; }
.ffco-ok__ico {
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(224,147,190,.18); color: var(--ff-plum);
}
.ffco-ok__txt { font: 500 24px var(--ff-serif); color: var(--ff-ink); }

.ffco-board {
	margin-top: 40px; border-radius: 26px; background: var(--ff-bg);
	border: 1px solid var(--ff-line); padding: clamp(26px, 4vw, 44px);
	box-shadow: var(--ff-shadow-lg);
	display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(28px, 4vw, 56px);
}
.ffco-board__side { flex: 1 1 250px; min-width: min(100%, 240px); max-width: 380px; }
.ffco-board__title { margin-top: 10px; font: 500 clamp(22px, 2.4vw, 30px)/1.14 var(--ff-serif); color: var(--ff-ink); }
.ffco-board__main { flex: 1 1 380px; min-width: min(100%, 270px); }
.ffco-board__cards { position: relative; width: 100%; max-width: 470px; height: 154px; }
.ffco-board__cards > div {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
	padding: 0 20px; border-radius: 16px;
	background: linear-gradient(180deg, #FFFFFF, #FDF4F8);
	border: 1px solid var(--ff-line); box-shadow: var(--ff-shadow-lg);
	opacity: 0; transform: rotateX(30deg); transition: opacity .4s ease, transform .45s var(--ff-ease);
	pointer-events: none;
}
.ffco-board__cards > div.is-cur { opacity: 1; transform: none; pointer-events: auto; }
.ffco-board__cards i { font: 700 10px var(--ff-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ff-plum); font-style: normal; }
.ffco-board__cards b { font: 500 clamp(16px, 1.9vw, 23px)/1.25 var(--ff-serif); color: var(--ff-ink); text-align: center; }
.ffco-board__cards span { font: 400 12.5px var(--ff-sans); color: var(--ff-ink-55); white-space: nowrap; }
.ffco-board__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ffco-board__links a {
	border: 1px solid rgba(224,147,190,.5); border-radius: var(--ff-r-pill); padding: 12px 22px;
	font: 700 11px var(--ff-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ff-plum);
	transition: background .25s;
}
.ffco-board__links a:hover { background: rgba(224,147,190,.18); }
@media (max-width: 700px) { .ffco-form input, .ffco-form textarea { min-height: 46px; } }

/* ---- Volet photo : vraie photo produit + signature manuscrite ---- */
.ffco-card__art {
	background: var(--ff-clay);
	background-image: url('../img/lisa-01.jpg');
	background-size: cover; background-position: 62% 50%;
	position: relative;
}
.ffco-card__art::after { content: none; }
.ffco-card__sig {
	position: absolute; left: 22px; right: 22px; bottom: 20px;
	font: 500 22px/1.25 var(--ff-script); color: var(--ff-surface);
	text-shadow: 0 2px 10px rgba(58,33,53,.5);
}

/* ---- Enveloppe : scellage au moment de l'envoi ---- */
.ffco-env { position: relative; perspective: 1600px; }
.ffco-env__flap {
	position: absolute; left: -14px; right: -14px; top: -16px; height: 112px; z-index: 0;
	background: linear-gradient(180deg, #F3CBDD, #E9B7CF);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: 50% 0%; transform: rotateX(-178deg);
	transition: transform .75s cubic-bezier(.4,.05,.35,1);
	pointer-events: none;
}
.ffco-env__pocket {
	position: absolute; left: -14px; right: -14px; bottom: -16px; height: 90px; z-index: 5;
	background: linear-gradient(0deg, #EFC0D9, #F3CBDD);
	clip-path: polygon(0 100%, 100% 100%, 50% 0);
	opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.ffco-env__seal {
	position: absolute; left: 50%; top: 92px; margin-left: -25px; width: 50px; height: 50px; z-index: 8;
	border-radius: 50%; background: radial-gradient(60% 60% at 38% 32%, #E093BE, #B8548C);
	box-shadow: 0 8px 18px rgba(58,33,53,.35), inset 0 -2px 6px rgba(90,30,60,.4);
	display: flex; align-items: center; justify-content: center;
	font: 600 15px var(--ff-script); color: var(--ff-bg-soft);
	transform: scale(2.6); opacity: 0;
	transition: transform .3s cubic-bezier(.2,1.4,.4,1) .55s, opacity .2s ease .55s;
	pointer-events: none;
}
.ffco-env.is-sealing .ffco-env__flap { transform: rotateX(0deg); z-index: 6; box-shadow: 0 14px 26px rgba(58,33,53,.18); }
.ffco-env.is-sealing .ffco-env__pocket { opacity: 1; }
.ffco-env.is-sealing .ffco-env__seal { transform: scale(1); opacity: 1; }
.ffco-env.is-sealing .ffco-form { transform: translateY(52px) scale(.9); opacity: .35; }
.ffco-form { position: relative; z-index: 3; transition: transform .7s cubic-bezier(.3,.8,.3,1), opacity .5s ease; }

/* ---- Tableau : volet qui pivote + points ---- */
.ffco-board__cards > div {
	transform-origin: 50% 100%;
	transform: rotateX(-94deg); backface-visibility: hidden;
}
.ffco-board__cards > div.is-cur { transform: rotateX(0deg); }
.ffco-board__dots { display: flex; gap: 8px; margin-top: 20px; }
.ffco-board__dots button {
	width: 8px; height: 8px; border-radius: var(--ff-r-pill); border: none; cursor: pointer;
	background: rgba(224,147,190,.35); transition: all .4s; padding: 0;
}
.ffco-board__dots button.is-on { width: 24px; background: var(--ff-pink); }
/* Le rabat reste confiné au volet du formulaire (mobile : volets empilés). */
.ffco-card__pane { position: relative; overflow: hidden; }