/*
 * Cartes cadeaux Lona Chocolat — formulaire d'achat et page de découverte.
 * Couleurs du design de la carte : --gc-* (Designs::css_vars) ; palette de
 * la boutique : --lc-*.
 */

/* ------------------------------------------------------------- Achat */
.lc-gc-buy{--gc-bg:#241713;--gc-paper:#3B241C;--gc-fg:#F8F3EB;--gc-muted:#d9c9b0;--gc-accent:#B78B4A;--gc-ribbon:#B78B4A;margin:8px 0 0;color:var(--lc-ink,#241713);}
.lc-gc-buy *{box-sizing:border-box;}
.lc-gc-preview{position:relative;overflow:hidden;margin:0 0 22px;padding:40px 20px 22px;border-radius:14px;background:var(--gc-bg);color:var(--gc-fg);text-align:center;box-shadow:0 10px 30px rgba(36,23,19,.18);}
.lc-gc-preview::before,.lc-gc-preview::after{content:"";position:absolute;background:var(--gc-ribbon);opacity:.9;}
.lc-gc-preview::before{top:0;bottom:0;left:18px;width:8px;}
.lc-gc-preview::after{left:0;right:0;top:16px;height:8px;}
.lc-gc-preview__eyebrow{position:relative;margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gc-accent);}
.lc-gc-preview__amount{position:relative;margin:6px 0 2px;font-family:var(--lc-font-display,Georgia,serif);font-size:clamp(34px,7vw,46px);line-height:1.1;}
.lc-gc-preview__names{position:relative;margin:0;font-size:14px;color:var(--gc-muted);min-height:1.4em;}
.lc-gc-form fieldset{border:0;margin:0 0 18px;padding:0;min-width:0;}
.lc-gc-form legend{padding:0;margin:0 0 8px;font-weight:600;font-size:15px;}
.lc-gc-chips{display:flex;flex-wrap:wrap;gap:8px;}
.lc-gc-chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1.5px solid var(--lc-line,#E6DCCB);border-radius:999px;background:var(--lc-paper,#fff);cursor:pointer;font-weight:600;transition:border-color .15s,background-color .15s,color .15s;}
.lc-gc-chip input{position:absolute;opacity:0;pointer-events:none;}
.lc-gc-chip:has(input:checked){border-color:var(--lc-accent,#8C5A35);background:var(--lc-accent,#8C5A35);color:#fff;}
.lc-gc-chip:has(input:focus-visible){outline:2px solid var(--lc-accent,#8C5A35);outline-offset:2px;}
.lc-gc-free{display:flex;align-items:center;gap:8px;margin-top:10px;}
.lc-gc-free[hidden]{display:none;}
.lc-gc-free input{width:130px;}
.lc-gc-grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:560px){.lc-gc-grid--2{grid-template-columns:1fr 1fr;}}
.lc-gc-field{margin:0 0 12px;}
.lc-gc-field label{display:block;font-weight:600;font-size:14px;margin:0 0 4px;}
.lc-gc-field input,.lc-gc-field textarea,.lc-gc-field select{width:100%;min-height:44px;padding:10px 12px;border:1.5px solid var(--lc-line,#E6DCCB);border-radius:var(--lc-radius-sm,6px);background:var(--lc-paper,#fff);font:inherit;color:inherit;}
.lc-gc-field textarea{min-height:96px;resize:vertical;}
.lc-gc-field input:focus,.lc-gc-field textarea:focus{border-color:var(--lc-accent,#8C5A35);outline:none;box-shadow:0 0 0 3px rgba(140,90,53,.15);}
.lc-gc-hint{margin:4px 0 0;font-size:13px;color:var(--lc-muted,#6E5B50);}
.lc-gc-count{float:right;font-weight:400;color:var(--lc-muted,#6E5B50);font-size:12px;}
.lc-gc-ways{display:grid;gap:8px;}
@media (min-width:560px){.lc-gc-ways{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}}
.lc-gc-way{position:relative;display:block;padding:12px 14px;border:1.5px solid var(--lc-line,#E6DCCB);border-radius:10px;cursor:pointer;background:var(--lc-paper,#fff);}
.lc-gc-way input{position:absolute;opacity:0;}
.lc-gc-way:has(input:checked){border-color:var(--lc-accent,#8C5A35);box-shadow:inset 0 0 0 1px var(--lc-accent,#8C5A35);}
.lc-gc-way:has(input:focus-visible){outline:2px solid var(--lc-accent,#8C5A35);outline-offset:2px;}
.lc-gc-way strong{display:block;}
.lc-gc-way span{font-size:13px;color:var(--lc-muted,#6E5B50);}
.lc-gc-error{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#fbeeea;color:var(--lc-sale,#9E3B2A);font-weight:600;}
.lc-gc-note{margin:10px 0 16px;font-size:13px;color:var(--lc-muted,#6E5B50);}
.lc-gc-closed{padding:16px;border-radius:10px;background:var(--lc-cream,#F8F3EB);}
.lc-gc-price{white-space:nowrap;}
.lc-gc-gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:0 0 24px;}

/* -------------------------------------------------- Page de découverte */
/* Largeur : jamais collée aux bords de l'écran (coins arrondis entiers) ;
   distances sous l'en-tête et avant le pied de page : celles de la boutique
   (--lc-space-page-*, publiées avec la feuille de la boutique ; valeurs de
   repli identiques quand elle n'est pas chargée sur cette page). */
.lc-gc-page{--gc-size:220px;position:relative;overflow:hidden;width:min(820px,calc(100% - 40px));max-width:820px;margin:var(--lc-space-page-top,clamp(24px,4vw,56px)) auto var(--lc-space-page-bottom,clamp(40px,6vw,80px));padding:56px 16px 48px;border-radius:22px;background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%),var(--gc-bg);color:var(--gc-fg);text-align:center;}
.lc-gc-page *{box-sizing:border-box;}
.lc-gc-stage{max-width:560px;margin:0 auto;}
.lc-gc-h1{margin:6px 0 10px;font-family:var(--lc-font-display,Georgia,serif);font-size:clamp(28px,3.4vw,44px);line-height:1.15;color:var(--gc-fg);}
.lc-gc-lead{margin:0 0 10px;font-size:clamp(16px,3.6vw,19px);color:var(--gc-muted);}
.lc-gc-when{margin:0 0 18px;font-size:18px;}
.lc-gc-when strong{color:var(--gc-accent);font-weight:700;}
.lc-gc-small{margin:12px 0 0;font-size:14px;color:var(--gc-muted);}
.lc-gc-message{margin:18px auto;max-width:440px;padding:14px 18px;border:0;border-radius:10px;background:var(--gc-paper);color:var(--gc-fg);font-style:italic;font-size:16px;line-height:1.6;}
.lc-gc-link{color:var(--gc-accent);}
.lc-gc-alert{margin:0 auto 14px;max-width:460px;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.18);color:var(--gc-fg);}
.lc-gc-page .lc-btn{background:var(--gc-accent);border-color:var(--gc-accent);color:var(--gc-bg);}
.lc-gc-page .lc-btn:hover,.lc-gc-page .lc-btn:focus-visible{filter:brightness(1.08);color:var(--gc-bg);}

/* Compte à rebours */
.lc-gc-countdown{display:flex;justify-content:center;gap:10px;margin:6px 0 8px;}
.lc-gc-countdown[hidden]{display:none;}
.lc-gc-countdown span{display:flex;flex-direction:column;align-items:center;min-width:66px;padding:10px 6px 8px;border-radius:12px;background:var(--gc-paper);}
.lc-gc-countdown b{font-family:var(--lc-font-display,Georgia,serif);font-size:28px;line-height:1;font-variant-numeric:tabular-nums;}
.lc-gc-countdown small{margin-top:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gc-muted);}

/* Paquet cadeau dessiné en CSS */
.lc-gc-gift{position:relative;width:var(--gc-size);height:calc(var(--gc-size) * .86);margin:0 auto 18px;}
.lc-gc-gift__shadow{position:absolute;left:14%;right:14%;bottom:2px;height:18px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(6px);}
.lc-gc-gift__box{position:absolute;left:12%;right:12%;bottom:12px;height:52%;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.12)),var(--gc-paper);box-shadow:inset 0 10px 0 rgba(0,0,0,.10);}
.lc-gc-gift__lid{position:absolute;left:6%;right:6%;bottom:calc(12px + 52%);height:15%;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04)),var(--gc-paper);transform-origin:50% 100%;z-index:2;}
.lc-gc-gift__band{position:absolute;top:0;bottom:0;left:50%;width:13%;transform:translateX(-50%);background:var(--gc-ribbon);}
.lc-gc-gift__bow{position:absolute;left:50%;bottom:100%;width:0;height:0;}
.lc-gc-gift__loop{position:absolute;bottom:-4px;width:calc(var(--gc-size) * .26);height:calc(var(--gc-size) * .16);border:calc(var(--gc-size) * .03) solid var(--gc-ribbon);border-radius:50%;}
.lc-gc-gift__loop--l{right:2px;transform:rotate(-24deg);transform-origin:100% 100%;}
.lc-gc-gift__loop--r{left:2px;transform:rotate(24deg);transform-origin:0 100%;}
.lc-gc-gift__knot{position:absolute;left:calc(var(--gc-size) * -.05);bottom:-6px;width:calc(var(--gc-size) * .1);height:calc(var(--gc-size) * .1);border-radius:50%;background:var(--gc-ribbon);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);}
.lc-gc-spark{position:absolute;width:14px;height:14px;background:var(--gc-accent);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.9;}
.lc-gc-spark--1{top:8%;left:4%;}
.lc-gc-spark--2{top:0;right:8%;width:18px;height:18px;}
.lc-gc-spark--3{top:42%;right:0;width:10px;height:10px;}
.lc-gc-spark--4{top:52%;left:0;width:9px;height:9px;}

/* Attente : le paquet se balance, les étincelles scintillent */
.lc-gc-gift.is-waiting{animation:lc-gc-wiggle 3.2s ease-in-out infinite;transform-origin:50% 100%;}
.lc-gc-gift.is-waiting .lc-gc-spark,.lc-gc-gift.is-opening .lc-gc-spark{animation:lc-gc-twinkle 2.4s ease-in-out infinite;}
.lc-gc-spark--2{animation-delay:.6s!important;}
.lc-gc-spark--3{animation-delay:1.1s!important;}
.lc-gc-spark--4{animation-delay:1.7s!important;}
@keyframes lc-gc-wiggle{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(-4deg)}74%{transform:rotate(4deg)}80%{transform:rotate(-3deg)}86%{transform:rotate(2deg)}92%{transform:rotate(0)}}
@keyframes lc-gc-twinkle{0%,100%{transform:scale(.6);opacity:.35}50%{transform:scale(1.1);opacity:1}}

/* Ouverture : le couvercle s'envole, la carte sort du paquet */
.lc-gc-gift.is-opening .lc-gc-gift__lid{animation:lc-gc-lid 1s cubic-bezier(.2,.8,.2,1) .25s both;}
.lc-gc-gift.is-opening{height:calc(var(--gc-size) * .62);margin-bottom:-36px;}
@keyframes lc-gc-lid{0%{transform:none}35%{transform:translateY(-8px) rotate(-2deg)}100%{transform:translate(38%,-120%) rotate(24deg);opacity:0}}
.lc-gc-card{position:relative;z-index:3;margin:0 auto;padding:30px 22px 24px;max-width:500px;border-radius:18px;background:var(--gc-paper);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.28);animation:lc-gc-rise .9s cubic-bezier(.2,.8,.2,1) .7s both;}
@keyframes lc-gc-rise{0%{transform:translateY(40px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
.lc-gc-eyebrow{margin:0;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gc-accent);}
.lc-gc-amount{margin:6px 0 4px;font-family:var(--lc-font-display,Georgia,serif);font-size:clamp(44px,11vw,68px);line-height:1.05;color:var(--gc-fg);}
.lc-gc-names{margin:0 0 6px;color:var(--gc-muted);}
.lc-gc-card .lc-gc-message{background:rgba(0,0,0,.14);}
.lc-gc-code{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:18px auto 6px;padding:12px 14px;max-width:420px;border:2px dashed var(--gc-accent);border-radius:12px;}
.lc-gc-code__label{width:100%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gc-muted);}
.lc-gc-code__value{font-family:Menlo,Consolas,"Courier New",monospace;font-size:clamp(17px,4.6vw,22px);letter-spacing:.12em;color:var(--gc-fg);user-select:all;word-break:break-all;}
.lc-gc-code__copy{min-height:36px;padding:6px 14px;border:1.5px solid var(--gc-accent);border-radius:999px;background:transparent;color:var(--gc-fg);font:inherit;font-size:13px;cursor:pointer;}
.lc-gc-code__copy:hover,.lc-gc-code__copy:focus-visible{background:var(--gc-accent);color:var(--gc-bg);}
.lc-gc-qr{margin:14px auto 0;}
.lc-gc-qr svg{display:block;width:176px;height:176px;margin:0 auto;border-radius:10px;}
.lc-gc-qr figcaption{margin-top:6px;font-size:12px;color:var(--gc-muted);}
.lc-gc-use{display:grid;gap:14px;margin:26px auto 0;max-width:560px;animation:lc-gc-rise .8s ease 1.1s both;}
@media (min-width:640px){.lc-gc-use:has(.lc-gc-use__way + .lc-gc-use__way){grid-template-columns:1fr 1fr;}}
.lc-gc-use__way{padding:18px 16px;border-radius:14px;background:rgba(255,255,255,.06);}
.lc-gc-use__way h2{margin:0 0 10px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gc-accent);}
.lc-gc-use__way form{margin:0;}
.lc-gc-gift.is-still{opacity:.85;}

@media (max-width:767px){
	.lc-gc-field input,.lc-gc-field textarea,.lc-gc-field select,.lc-gc-free input{font-size:16px;}
}
@media (max-width:480px){
	.lc-gc-page{--gc-size:180px;padding:40px 14px 36px;border-radius:16px;}
	.lc-gc-countdown{gap:6px;}
	.lc-gc-countdown span{min-width:58px;}
	.lc-gc-countdown b{font-size:24px;}
}
@media (prefers-reduced-motion:reduce){
	.lc-gc-gift,.lc-gc-gift *,.lc-gc-card,.lc-gc-use{animation:none!important;}
	.lc-gc-gift.is-opening .lc-gc-gift__lid{opacity:0;}
}
@media print{
	.lc-gc-page{background:#fff;color:#000;}
	.lc-gc-gift,.lc-gc-use form,.lc-gc-code__copy{display:none;}
}
