/* =============================================
   Modale formulaire 2 — colonne unique, coins arrondis
   (ex. PS Summit). Réutilise le mécanisme d'ouverture/
   fermeture et l'overlay de .flexible-modal (cf.
   modale-flexible.css) ; seule la mise en page de la
   boîte change ici.
   ============================================= */

/* La classe de base .flexible-modal__box impose max-height: 90vh et
   overflow-y: auto (garde-fou pour les petits écrans) : ça fait apparaître
   une barre de scroll visible dès que le contenu dépasse 90vh. On garde le
   scroll possible en dernier recours (sécurité si le formulaire s'allonge),
   mais on masque la barre elle-même (cross-browser) pour un rendu propre. */
.flexible-modal__box--summit {
    display: block;
    width: 100%;
    max-width: 560px;
    background: var(--color-white);
    border-radius: 24px;
    padding: 36px 40px 36px;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge/IE legacy */
}

.flexible-modal__box--summit::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge Chromium */
}

/* Bouton de fermeture adapté à un fond clair (la variante de base est prévue
   pour un fond bleu : icône blanche sur cercle translucide, invisible ici). */
.flexible-modal__close--summit {
    background: #f1f1f4;
    color: var(--color-navy);
}

.flexible-modal__close--summit:hover {
    background: #e2e6ef;
}

.flexible-modal__summit-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.flexible-modal__summit-titre {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--color-navy);
    margin: 0 0 14px;
}

.flexible-modal__summit-soustitre {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(10, 22, 40, 0.65);
    margin: 0 0 28px;
    max-width: 420px;
}

.flexible-modal__summit-form {
    width: 100%;
}

.flexible-modal__summit-placeholder {
    color: rgba(4, 12, 30, 0.5);
    font-size: 14px;
    text-align: center;
}

/* ── Grille CF7 (même convention que le Hero + Formulaire) ─────────────── */

.flexible-modal__summit-form .wpcf7-form > fieldset {
    display: none;
}

.flexible-modal__summit-form .wpcf7-form > p.your-page {
    display: none;
}

.flexible-modal__summit-form .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    align-items: end;
    text-align: left;
}

.flexible-modal__summit-form .wpcf7-form > p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flexible-modal__summit-form .wpcf7-form > p:has(select),
.flexible-modal__summit-form .wpcf7-form > p:has(textarea),
.flexible-modal__summit-form .wpcf7-form > p:has(input[type="tel"]),
.flexible-modal__summit-form .wpcf7-form > p:has(button[type="submit"]),
.flexible-modal__summit-form .wpcf7-form > p:has(input[type="submit"]) {
    grid-column: 1 / -1;
}

.flexible-modal__summit-form .wpcf7-form > p:has(button[type="submit"]),
.flexible-modal__summit-form .wpcf7-form > p:has(input[type="submit"]) {
    margin-top: 8px;
    align-items: center;
}

.flexible-modal__summit-form .wpcf7-form > .wpcf7-response-output {
    grid-column: 1 / -1;
}

.flexible-modal__summit-form .wpcf7-form > .wpcf7-response-output:empty {
    display: none;
}

.flexible-modal__summit-form .wpcf7-form > p > label {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-navy);
    line-height: 1.35;
}

/* CF7 rend <label>Nom*<br />[input]</label> : le <p> n'a qu'UN seul enfant
   (le label), donc un gap flexbox sur le <p> n'a rien à espacer. L'espace
   réel entre le texte du label et le champ se règle ici, via margin-top sur
   le wrapper qui suit le <br>. */
.flexible-modal__summit-form .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.flexible-modal__summit-form .wpcf7-form input[type="text"],
.flexible-modal__summit-form .wpcf7-form input[type="email"],
.flexible-modal__summit-form .wpcf7-form input[type="tel"],
.flexible-modal__summit-form .wpcf7-form select,
.flexible-modal__summit-form .wpcf7-form textarea {
    display: block;
    width: 100%;
    background: var(--color-white);
    border: 1px solid #d7dce6;
    border-radius: 14px;
    padding: 12px 15px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--color-navy);
    outline: none;
    transition: border-color 200ms ease;
    box-sizing: border-box;
}

/* CF7 rend un <textarea rows="20"> par défaut : hauteur explicite requise
   (un min-height ne plafonne pas la taille native issue de l'attribut rows). */
.flexible-modal__summit-form .wpcf7-form textarea {
    height: 76px;
    resize: vertical;
}

.flexible-modal__summit-form .wpcf7-form input::placeholder,
.flexible-modal__summit-form .wpcf7-form textarea::placeholder {
    color: rgba(4, 12, 30, 0.4);
}

.flexible-modal__summit-form .wpcf7-form input[type="text"]:focus,
.flexible-modal__summit-form .wpcf7-form input[type="email"]:focus,
.flexible-modal__summit-form .wpcf7-form input[type="tel"]:focus,
.flexible-modal__summit-form .wpcf7-form select:focus,
.flexible-modal__summit-form .wpcf7-form textarea:focus {
    border-color: var(--color-blue);
}

.flexible-modal__summit-form .wpcf7-form button[type="submit"],
.flexible-modal__summit-form .wpcf7-form input[type="submit"] {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
    background: var(--color-blue);
    color: var(--color-white);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 44px 13px 28px;
    border-radius: var(--radius-btn);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.flexible-modal__summit-form .wpcf7-form button[type="submit"]::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 10px;
    -webkit-mask: url('../../assets/arrow-right.svg') no-repeat center / contain;
    mask: url('../../assets/arrow-right.svg') no-repeat center / contain;
    background-color: var(--color-white);
}

/* CF7 rend le submit en <input type="submit">, un élément remplacé sur
   lequel ::after ne s'affiche jamais : la flèche passe par une image de
   fond (SVG inline recoloré en blanc), même technique que le Hero. */
.flexible-modal__summit-form .wpcf7-form input[type="submit"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='19' viewBox='0 0 16 19' fill='none'%3E%3Cpath d='M13.938 14.0676L9.15202 19C7.9385 17.7436 7.94074 15.7089 9.15703 14.4554L11.7407 11.7927L13.938 14.0676Z' fill='white'/%3E%3Cpath d='M6.93747 3.9967C8.1227 2.71184 10.0919 2.66276 11.3357 3.88705L16 8.47788L15.9903 8.48834V11.6963H0C3.31192e-06 9.92156 1.39284 8.48282 3.11097 8.48282H11.4953L6.93747 3.9967Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 13px 16px;
}

.flexible-modal__summit-form .wpcf7-form button[type="submit"]:hover,
.flexible-modal__summit-form .wpcf7-form input[type="submit"]:hover {
    background-color: var(--color-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
}

.flexible-modal__summit-form .wpcf7-response-output {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    text-align: center;
    border-radius: 8px;
    padding: 10px 14px;
    border: none;
}

.flexible-modal__summit-form .wpcf7-mail-sent-ok {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.flexible-modal__summit-form .wpcf7-validation-errors,
.flexible-modal__summit-form .wpcf7-mail-sent-ng {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

/* ── Mobile ─────────────────────────────────── */

@media (max-width: 640px) {
    .flexible-modal__box--summit {
        padding: 32px 20px 28px;
        border-radius: 20px;
    }

    .flexible-modal__summit-titre {
        font-size: 24px;
    }

    .flexible-modal__summit-form .wpcf7-form {
        grid-template-columns: 1fr;
    }

    .flexible-modal__summit-form .wpcf7-form input[type="text"],
    .flexible-modal__summit-form .wpcf7-form input[type="email"],
    .flexible-modal__summit-form .wpcf7-form input[type="tel"],
    .flexible-modal__summit-form .wpcf7-form select,
    .flexible-modal__summit-form .wpcf7-form textarea {
        font-size: 16px; /* évite le zoom auto iOS Safari au focus (<16px) */
    }
}