/* =============================================================
   ZAM Contact Widget — Marguerite flottante
   zam-game v4.1.5
   ============================================================= */

:root {
    --zam-cw-color:        #1a2d5a;
    --zam-cw-accent:       #e8b84b;
    --zam-cw-white:        #ffffff;
    --zam-cw-overlay-bg:   rgba(15, 20, 40, 0.72);
    --zam-cw-radius:       16px;
    --zam-cw-shadow:       0 8px 32px rgba(26, 45, 90, 0.28);
    --zam-cw-trigger-size: 64px;
    --zam-cw-petal-w:      130px;
    --zam-cw-petal-h:      44px;
    --zam-cw-petal-gap:    115px;
}

/* ---- Conteneur fixe ---- */
.zam-contact-wrap { z-index: 9990; font-family: inherit; }
.zam-cw-fixed  { position: fixed; bottom: 90px; right: 36px; }
.zam-cw-inline { position: relative; display: inline-block; margin: 12px 0; }

/* ---- Bouton trigger ---- */
.zam-cw-trigger {
    position: relative;
    width: var(--zam-cw-trigger-size);
    height: var(--zam-cw-trigger-size);
    border-radius: 50%;
    border: 3px solid var(--zam-cw-color);
    background: var(--zam-cw-white);
    box-shadow: var(--zam-cw-shadow);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    z-index: 2;
}
.zam-cw-trigger:focus-visible { box-shadow: 0 0 0 3px var(--zam-cw-accent); }
.zam-cw-trigger:hover,
.zam-cw-trigger.is-open {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(26, 45, 90, 0.38);
    border-color: var(--zam-cw-accent);
}
.zam-cw-icon {
    width: 44px; height: 44px;
    object-fit: contain; border-radius: 50%; pointer-events: none;
}

/* Pulse */
.zam-cw-pulse {
    position: absolute; inset: -6px;
    border-radius: 50%; border: 2px solid var(--zam-cw-accent);
    opacity: 0; animation: zamPulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes zamPulse {
    0%   { transform: scale(0.9); opacity: 0.7; }
    60%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
.zam-cw-trigger.is-open .zam-cw-pulse { animation: none; }

/* ---- Conteneur pétales ---- */
/* Ancré au centre du trigger, décalé 20px vers la gauche pour rester dans la page */
.zam-cw-petals {
    position: absolute;
    bottom: calc( var(--zam-cw-trigger-size) / 2 );
    right:  calc( var(--zam-cw-trigger-size) / 2 + var(--zam-cw-petal-w) / 2 );
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ---- Pétale — pilule horizontale ---- */
.zam-cw-petal {
    position: absolute;
    width:  var(--zam-cw-petal-w) !important;
    height: var(--zam-cw-petal-h) !important;
    border-radius: 21px !important;
    border: none !important;
    background: var(--zam-cw-white);
    box-shadow: 0 4px 18px rgba(26, 45, 90, 0.2);
    cursor: pointer;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    box-sizing: border-box !important;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.22s ease,
                background 0.18s ease,
                box-shadow 0.18s ease;
    pointer-events: none;
    outline: none;
}
.zam-cw-petal:focus-visible { box-shadow: 0 0 0 3px var(--zam-cw-accent); }
.zam-cw-petal:hover { background: var(--zam-cw-color); box-shadow: 0 6px 24px rgba(26,45,90,0.32); }
.zam-cw-petal:hover .zam-cw-petal-label { color: var(--zam-cw-white); }

.zam-cw-petal-icon  { font-size: 20px; line-height: 1; flex-shrink: 0; pointer-events: none; }
.zam-cw-petal-label {
    font-size: 9px; font-weight: 700; color: var(--zam-cw-color);
    text-transform: uppercase; letter-spacing: 0.04em;
    line-height: 1; white-space: nowrap; pointer-events: none;
    transition: color 0.18s;
}

/*
  Arc de 130° à 230° (100° total, ~33° entre chaque pétale)
  cos/sin calculés :
    130° : cos=-0.643  sin=-0.766
    163° : cos=-0.956  sin=-0.292
    197° : cos=-0.956  sin=+0.292
    230° : cos=-0.643  sin=+0.766
*/
.zam-cw-petals.is-open .zam-cw-petal {
    pointer-events: auto;
    opacity: 1;
}
.zam-cw-petals.is-open .zam-cw-p1 {
    /* 130° : haut-gauche */
    transform: translate(
        calc( -0.5 * var(--zam-cw-petal-w) + -0.643 * var(--zam-cw-petal-gap) ),
        calc( -0.5 * var(--zam-cw-petal-h) + -0.766 * var(--zam-cw-petal-gap) )
    ) scale(1);
    transition-delay: 0.04s;
}
.zam-cw-petals.is-open .zam-cw-p2 {
    /* 163° : gauche haut */
    transform: translate(
        calc( -0.5 * var(--zam-cw-petal-w) + -0.956 * var(--zam-cw-petal-gap) ),
        calc( -0.5 * var(--zam-cw-petal-h) + -0.292 * var(--zam-cw-petal-gap) )
    ) scale(1);
    transition-delay: 0.09s;
}
.zam-cw-petals.is-open .zam-cw-p3 {
    /* 197° : gauche bas */
    transform: translate(
        calc( -0.5 * var(--zam-cw-petal-w) + -0.956 * var(--zam-cw-petal-gap) ),
        calc( -0.5 * var(--zam-cw-petal-h) + +0.292 * var(--zam-cw-petal-gap) )
    ) scale(1);
    transition-delay: 0.14s;
}
.zam-cw-petals.is-open .zam-cw-p4 {
    /* 230° : bas-gauche */
    transform: translate(
        calc( -0.5 * var(--zam-cw-petal-w) + -0.643 * var(--zam-cw-petal-gap) ),
        calc( -0.5 * var(--zam-cw-petal-h) + +0.766 * var(--zam-cw-petal-gap) )
    ) scale(1);
    transition-delay: 0.19s;
}

/* ---- Overlay ---- */
.zam-cw-overlay {
    position: fixed; inset: 0;
    background: var(--zam-cw-overlay-bg); z-index: 9995;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; opacity: 0; transition: opacity 0.22s ease;
}
.zam-cw-overlay:not([hidden]) { display: flex; }
.zam-cw-overlay.is-visible { opacity: 1; }

/* ---- Modale ---- */
.zam-cw-modal {
    background: var(--zam-cw-white); border-radius: var(--zam-cw-radius);
    box-shadow: var(--zam-cw-shadow); width: 90vw; min-width: 320px; max-width: 620px;
    max-height: 88vh; overflow-y: auto; position: relative;
    padding: 32px 40px 36px; box-sizing: border-box;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.34, 1.46, 0.64, 1);
}
.zam-cw-overlay.is-visible .zam-cw-modal { transform: translateY(0) scale(1); }
.zam-cw-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; font-size: 24px; color: #6b7280;
    cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.zam-cw-close:hover { background: #f3f4f6; color: var(--zam-cw-color); }

/* Header modale */
.zam-cw-modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.zam-cw-modal-icon   { font-size: 28px; line-height: 1; }
.zam-cw-modal-title  { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--zam-cw-color); line-height: 1.2; }

/* Formulaire */
.zam-cw-form    { display: flex; flex-direction: column; gap: 16px; }
.zam-cw-field   { display: flex; flex-direction: column; gap: 6px; }
.zam-cw-field label { font-size: 0.875rem; font-weight: 600; color: #374151; }
.zam-cw-field label span { color: #dc2626; margin-left: 2px; }
.zam-cw-field input,
.zam-cw-field select,
.zam-cw-field textarea {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #d1d5db; border-radius: 8px;
    font-size: 0.9375rem; color: #1f2937; background: #f9fafb;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box; font-family: inherit;
}
.zam-cw-field input:focus,
.zam-cw-field select:focus,
.zam-cw-field textarea:focus {
    border-color: var(--zam-cw-color);
    box-shadow: 0 0 0 3px rgba(26,45,90,0.12);
    outline: none; background: #fff;
}
.zam-cw-field textarea { resize: vertical; min-height: 120px; }
.zam-cw-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zam-cw-visitor-fields.is-hidden { display: none; }

/* Notice */
.zam-cw-notice { padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; line-height: 1.4; }
.zam-cw-notice.is-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.zam-cw-notice.is-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Submit */
.zam-cw-actions { margin-top: 4px; }
.zam-cw-submit {
    width: 100%; padding: 13px 20px;
    background: var(--zam-cw-color); color: var(--zam-cw-white);
    border: none; border-radius: 10px; font-size: 1rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 10px; transition: background 0.18s, transform 0.12s;
}
.zam-cw-submit:hover:not(:disabled) { background: #0f1c3a; }
.zam-cw-submit:active:not(:disabled) { transform: scale(0.98); }
.zam-cw-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.zam-cw-btn-spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
    border-radius: 50%; animation: zamSpin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes zamSpin { to { transform: rotate(360deg); } }

/* ---- Mobile ---- */
@media (max-width: 599px) {
    .zam-cw-fixed { bottom: 70px; right: 20px; }
    .zam-cw-modal { padding: 20px 18px 24px; border-radius: 14px; }
    .zam-cw-row-2 { grid-template-columns: 1fr; }
    :root { --zam-cw-petal-w: 120px; --zam-cw-petal-h: 42px; --zam-cw-petal-gap: 120px; }
}