/* =============================================
   Hero + Formulaire — Landing
   Plein écran au chargement (cf. --viewport-height,
   posée par header.js sur window.innerHeight).

   PRINCIPE DE LAYOUT (lire avant de modifier) :

   1) Hauteur des colonnes.
      La colonne gauche (titre → sous-titre → liste → logos) fait EXACTEMENT
      la hauteur de la carte formulaire ; titre aligné au haut du formulaire,
      logos alignés au bas, surplus vertical réparti également au milieu.
      Obtenu ainsi :
      - .inner NE prend PAS flex: 1 → il se dimensionne sur son plus grand
        enfant (le formulaire), donc align-items: stretch étire la colonne
        gauche à la hauteur du formulaire (et non à 100vh — piège des versions
        antérieures).
      - .col-left : justify-content: space-between + gap minimum → ses 4
        enfants directs se répartissent également dans la hauteur imposée.

   2) Tenue à l'écran quelle que soit la RÉSOLUTION.
      Le hero doit tenir entièrement dans le viewport, même sur des écrans peu
      hauts (1440x900 ≈ 780px utiles, 1366x768 ≈ 650px utiles). Plutôt que des
      paliers max-height en escalier, les dimensions VERTICALES (paddings,
      polices, paddings de la carte, gaps de grille, hauteur du textarea)
      utilisent clamp(min, Xvh, max) : tout rétrécit proportionnellement quand
      le viewport est plus court, SANS changer l'agencement. Les media queries
      de largeur ne gèrent donc que l'horizontal (largeurs de colonnes) et la
      bascule empilée tablette/mobile.
   ============================================= */

.flexible-hero-formulaire {
    position: relative;
    min-height: var(--viewport-height, 100vh);
    display: flex;
    flex-direction: column;
    /* Centre verticalement le bloc dans l'espace SOUS le header : le mou se
       répartit haut/bas au lieu de tomber entièrement en bas (flex-start).
       Le padding-top réserve la hauteur du header absolute (~90px) + une
       marge ; le padding-bottom (plus petit) biaise légèrement vers le haut,
       comme demandé (plus de marge en haut qu'en bas). */
    justify-content: center;
    padding: clamp(104px, 14vh, 128px) 0 clamp(8px, 1.5vh, 30px);
    background: var(--color-navy);
    overflow: hidden;
    clip-path: inset(0 0 0 0);
}

.flexible-hero-formulaire::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 0;
}

.flexible-hero-formulaire::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.80) 60%, rgba(14, 165, 233, 0.35) 100%);
    z-index: 1;
}

/* Pas de flex: 1 (cf. entête §1) : .inner se dimensionne sur son contenu et
   est centré verticalement par la section. Padding vertical porté par la
   section (header + centrage) ; ici seul l'horizontal. */
.flexible-hero-formulaire__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 56px;
    padding: 0 5vw 0 6vw;
}

/* ── Colonne gauche ─────────────────────────── */

.flexible-hero-formulaire__col-left {
    flex: 0 1 600px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    /* Étirée à la hauteur du formulaire (cf. §1). space-between répartit le
       surplus ; le gap sert de minimum quand la place manque. */
    justify-content: space-between;
    gap: clamp(12px, 2.2vh, 24px);
}

.flexible-hero-formulaire__title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 4.6vh, 44px);
    line-height: 1.12;
    letter-spacing: 0;
    color: var(--color-white);
    max-width: 580px;
    margin: 0;
}

/* Surlignage du titre — copié tel quel depuis .flexible-highlight
   (style/landing-flexible/hero-flexible.css), scopé à cette section. */
.flexible-hero-formulaire-highlight {
    position: relative;
    color: var(--color-white);
    padding: 0 12px 2px 0;
}

.flexible-hero-formulaire-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 58%;
    bottom: -2px;
    background: var(--color-blue);
    border-radius: 6px;
    z-index: -1;
}

.flexible-hero-formulaire__subtitle {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 2.35vh, 22px);
    line-height: 1.4;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.8);
    max-width: 560px;
    margin: 0;
}

.flexible-hero-formulaire__list {
    display: flex;
    flex-direction: column;
    gap: clamp(9px, 1.9vh, 20px);
    max-width: 540px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flexible-hero-formulaire__list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: clamp(34px, 5vh, 52px);
}

.flexible-hero-formulaire__list-icon {
    flex-shrink: 0;
    width: clamp(24px, 3.7vh, 34px);
    height: clamp(24px, 3.7vh, 34px);
    object-fit: contain;
}

.flexible-hero-formulaire__list-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 2.35vh, 22px);
    line-height: 1.35;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.85);
}

/* Flex (pas grid) avec flex-basis fixe à 1/3 de largeur : garantit 3 logos
   par ligne comme une grille (chaque item occupe toujours ~33% quelle que
   soit sa largeur propre), MAIS avec justify-content: center, la dernière
   ligne incomplète (1 ou 2 logos) se centre automatiquement au lieu de
   rester calée à gauche dans des colonnes vides — impossible avec une vraie
   grid, dont le nombre de colonnes reste fixe même quand des cellules sont
   vides. */
.flexible-hero-formulaire__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: clamp(14px, 2.4vh, 22px);
    column-gap: 30px;
    width: 100%;
    max-width: 580px;
    box-sizing: border-box;
    padding: clamp(14px, 2.2vh, 22px) 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.flexible-hero-formulaire__logos img {
    flex: 0 1 calc(33.333% - 20px); /* (100% - 2 * column-gap 30px) / 3 */
    /* min-width: 0 (au lieu du "auto" par défaut des flex items) : sans ça,
       un logo dont la largeur intrinsèque dépasse son slot de 33% refuse de
       rétrécir (flex-shrink ne s'applique jamais en dessous de la taille
       intrinsèque par défaut), ce qui pousse le 3e logo à la ligne suivante
       — c'était la vraie cause du retour à la ligne prématuré, pas la
       logique de centrage. */
    min-width: 0;
    height: clamp(22px, 3.4vh, 32px);
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity var(--transition-base);
}

.flexible-hero-formulaire__logos img:hover {
    opacity: 1;
}

/* ── Colonne droite : carte formulaire ─────────── */

.flexible-hero-formulaire__col-right {
    flex: 0 1 540px;
    max-width: 540px;
    width: 100%;
}

.flexible-hero-formulaire__form-card {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-white);
    border-radius: 24px;
    /* Padding fluide (cf. §2) : la carte se comprime sur écran peu haut. */
    padding: clamp(13px, 2.1vh, 32px);
    box-shadow: 0 24px 60px rgba(4, 12, 30, 0.35);
}

.flexible-hero-formulaire__form-titre {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 1.7vh, 15px);
    line-height: 1.45;
    color: var(--color-navy);
    text-align: center;
    margin: 0 0 clamp(6px, 1.2vh, 15px);
}

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

/* Grille CF7 */
.flexible-hero-formulaire .wpcf7-form > fieldset {
    display: none;
}

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

.flexible-hero-formulaire .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(5px, 0.75vh, 12px) 20px;
    align-items: end;
}

.flexible-hero-formulaire .wpcf7-form > p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 0.55vh, 6px);
}

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

.flexible-hero-formulaire .wpcf7-form > p:has(button[type="submit"]),
.flexible-hero-formulaire .wpcf7-form > p:has(input[type="submit"]) {
    margin-top: clamp(2px, 0.8vh, 6px);
    /* p en flex-direction: column : align-items centre le bouton
       auto-largeur horizontalement au lieu de le laisser en pleine
       largeur de colonne. */
    align-items: center;
}

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

/* CF7 rend cette div en permanence (message de validation), vide au repos :
   elle prend alors ~50px inutiles dans la grille (padding + row-gap) et
   participait au débordement sur écran peu haut. Masquée tant qu'elle est
   vide ; elle réapparaît dès qu'un message y est injecté. */
.flexible-hero-formulaire .wpcf7-form > .wpcf7-response-output:empty {
    display: none;
}

.flexible-hero-formulaire .wpcf7-form > p > label {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(13px, 1.5vh, 14px);
    color: var(--color-navy);
    line-height: 1.3;
}

/* CF7 rend <label>Nom*<br />[input]</label> : le <p> n'a qu'UN seul enfant
   (le label), un gap flexbox sur le <p> n'a donc 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-hero-formulaire .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.flexible-hero-formulaire .wpcf7-form input[type="text"],
.flexible-hero-formulaire .wpcf7-form input[type="email"],
.flexible-hero-formulaire .wpcf7-form input[type="tel"],
.flexible-hero-formulaire .wpcf7-form select,
.flexible-hero-formulaire .wpcf7-form textarea {
    display: block;
    width: 100%;
    background: #f5f7fb;
    border: 1px solid #e2e6ef;
    border-radius: 14px;
    padding: clamp(5px, 0.8vh, 10px) 14px;
    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 : sans hauteur explicite
   (height, pas min-height — un min-height ne plafonne pas la taille native
   issue de l'attribut rows), le champ Message s'étire sur ~20 lignes et
   fait exploser la hauteur de toute la carte. Hauteur fluide (cf. §2). */
.flexible-hero-formulaire .wpcf7-form textarea {
    height: clamp(32px, 5vh, 74px);
    resize: vertical;
}

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

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

.flexible-hero-formulaire .wpcf7-form button[type="submit"],
.flexible-hero-formulaire .wpcf7-form button.primary-button,
.flexible-hero-formulaire .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: clamp(10px, 1.5vh, 13px) 44px clamp(10px, 1.5vh, 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-hero-formulaire .wpcf7-form button[type="submit"]::after,
.flexible-hero-formulaire .wpcf7-form button.primary-button::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 donc par une image
   de fond (SVG inline recoloré en blanc) plutôt que par un pseudo-élément. */
.flexible-hero-formulaire .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-hero-formulaire .wpcf7-form button[type="submit"]:hover,
.flexible-hero-formulaire .wpcf7-form button.primary-button:hover,
.flexible-hero-formulaire .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-hero-formulaire .wpcf7-response-output {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    text-align: center;
    border-radius: 8px;
    padding: 10px 14px;
    border: none;
}

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

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

/* ── Grand desktop : élargit les colonnes (horizontal uniquement, les tailles
   verticales restent gérées par les clamp vh du bloc de base). ──────────── */

@media (min-width: 1367px) {
    .flexible-hero-formulaire__inner {
        max-width: 1600px;
        margin: 0 auto;
        gap: 72px;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .flexible-hero-formulaire__col-left {
        flex: 0 1 620px;
        max-width: 620px;
    }

    .flexible-hero-formulaire__title {
        max-width: 600px;
    }

    .flexible-hero-formulaire__subtitle {
        max-width: 580px;
    }

    .flexible-hero-formulaire__list {
        max-width: 560px;
    }

    .flexible-hero-formulaire__logos {
        max-width: 600px;
    }

    .flexible-hero-formulaire__col-right {
        flex: 0 1 580px;
        max-width: 580px;
    }
}

/* Entre 1367 et 1600px il n'y a pas encore de marge de centrage (le
   conteneur n'atteint pas son max-width 1600), donc le bloc gauche collait
   trop au bord gauche. On l'insère un peu plus. Au-delà de 1600px, le
   centrage du conteneur s'en charge, on n'y touche pas. */
@media (min-width: 1367px) and (max-width: 1600px) {
    .flexible-hero-formulaire__inner {
        padding-left: 6vw;
    }
}

/* ── Grand écran assez HAUT : sur un vrai moniteur 1920x1080, la hauteur
   réellement disponible (barres navigateur + OS déduites) est ~900-920px, PAS
   1080 (le mode responsive de Chrome, lui, donne 1080 pleins → trompeur). On
   aère donc le formulaire de façon MODÉRÉE, calibrée pour tenir dans ~900px de
   haut réels — pas pour les 1080 fictifs de DevTools. Seuil min-height: 880px :
   attrape un vrai écran 1080 (~900 utiles) mais pas 1440x900 réel (~780) ni
   1366x768. ─────────────────────────────────────────────────────────────── */

@media (min-width: 1367px) and (min-height: 880px) {
    .flexible-hero-formulaire__col-left {
        gap: 24px;
    }

    .flexible-hero-formulaire__title {
        font-size: 44px;
    }

    .flexible-hero-formulaire__subtitle,
    .flexible-hero-formulaire__list-text {
        font-size: 22px;
    }

    .flexible-hero-formulaire__list {
        gap: 16px;
    }

    .flexible-hero-formulaire__list-item {
        min-height: 46px;
    }

    .flexible-hero-formulaire__list-icon {
        width: 32px;
        height: 32px;
    }

    .flexible-hero-formulaire__logos {
        padding: 20px 24px;
        row-gap: 20px;
    }

    .flexible-hero-formulaire__logos img {
        height: 32px;
    }

    .flexible-hero-formulaire__form-card {
        padding: 30px;
    }

    .flexible-hero-formulaire__form-titre {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .flexible-hero-formulaire .wpcf7-form {
        gap: 12px 22px;
    }

    .flexible-hero-formulaire .wpcf7-form > p {
        gap: 6px;
    }

    .flexible-hero-formulaire .wpcf7-form input[type="text"],
    .flexible-hero-formulaire .wpcf7-form input[type="email"],
    .flexible-hero-formulaire .wpcf7-form input[type="tel"],
    .flexible-hero-formulaire .wpcf7-form select,
    .flexible-hero-formulaire .wpcf7-form textarea {
        padding: 10px 15px;
    }

    .flexible-hero-formulaire .wpcf7-form textarea {
        height: 72px;
    }
}

/* ── Desktop resserré / 13 pouces ────────────────────────────────────────
   Largeurs de colonnes uniquement ; polices/hauteurs restent fluides. */

@media (max-width: 1366px) {
    .flexible-hero-formulaire__inner {
        padding-left: 4vw;
        padding-right: 4vw;
        gap: 40px;
    }

    .flexible-hero-formulaire__col-left {
        flex: 0 1 48%;
        max-width: 560px;
    }

    .flexible-hero-formulaire__title,
    .flexible-hero-formulaire__subtitle,
    .flexible-hero-formulaire__list,
    .flexible-hero-formulaire__logos {
        max-width: 100%;
    }

    .flexible-hero-formulaire__col-right {
        flex: 0 1 46%;
        max-width: 500px;
    }
}

/* ── Tablette : layout empilé (seuil relevé à 1200px, cf. hero projet :
   1024-1200px rendait un côte-à-côte bancal sur iPad). En empilé, la page
   défile naturellement (min-height: 0) : plus de contrainte de hauteur, les
   tailles fluides sont figées à des valeurs fixes lisibles. ─────────────── */

@media (max-width: 1200px) {
    .flexible-hero-formulaire {
        min-height: 0;
        /* En empilé la page défile : on annule le centrage vertical et le
           padding de réservation header du mode desktop. */
        justify-content: flex-start;
        padding: 0;
    }

    .flexible-hero-formulaire__inner {
        flex-direction: column;
        align-items: center;
        padding: 120px 32px 48px;
        gap: 40px;
    }

    .flexible-hero-formulaire__col-left {
        flex: 0 0 auto;
        max-width: 620px;
        width: 100%;
        justify-content: flex-start;
        gap: 28px;
        align-items: center;
        text-align: center;
    }

    .flexible-hero-formulaire__title {
        font-size: 34px;
    }

    .flexible-hero-formulaire__subtitle,
    .flexible-hero-formulaire__list-text {
        font-size: 18px;
    }

    .flexible-hero-formulaire__list {
        max-width: 100%;
        gap: 16px;
    }

    .flexible-hero-formulaire__list-item {
        min-height: 0;
        justify-content: flex-start;
        text-align: left;
    }

    .flexible-hero-formulaire__list-icon {
        width: 30px;
        height: 30px;
    }

    .flexible-hero-formulaire__logos {
        max-width: 100%;
        padding: 20px 24px;
        row-gap: 20px;
    }

    .flexible-hero-formulaire__logos img {
        height: 28px;
    }

    .flexible-hero-formulaire__col-right {
        flex: 0 0 auto;
        max-width: 560px;
        width: 100%;
    }

    .flexible-hero-formulaire__form-card {
        padding: 32px;
    }

    .flexible-hero-formulaire__form-titre {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .flexible-hero-formulaire .wpcf7-form {
        gap: 14px 20px;
    }

    .flexible-hero-formulaire .wpcf7-form > p {
        gap: 6px;
    }

    .flexible-hero-formulaire .wpcf7-form > p > label {
        font-size: 14px;
    }

    .flexible-hero-formulaire .wpcf7-form input[type="text"],
    .flexible-hero-formulaire .wpcf7-form input[type="email"],
    .flexible-hero-formulaire .wpcf7-form input[type="tel"],
    .flexible-hero-formulaire .wpcf7-form select,
    .flexible-hero-formulaire .wpcf7-form textarea {
        padding: 12px 14px;
    }

    .flexible-hero-formulaire .wpcf7-form textarea {
        height: 96px;
    }
}

@media (max-width: 992px) {
    .flexible-hero-formulaire__inner {
        padding-top: 100px;
    }
}

@media (max-width: 640px) {
    .flexible-hero-formulaire__inner {
        padding: 88px 20px 32px;
        gap: 32px;
    }

    .flexible-hero-formulaire__col-left {
        gap: 22px;
    }

    .flexible-hero-formulaire__title {
        font-size: 26px;
    }

    .flexible-hero-formulaire__subtitle,
    .flexible-hero-formulaire__list-text {
        font-size: 16px;
    }

    .flexible-hero-formulaire__list {
        gap: 12px;
    }

    .flexible-hero-formulaire__list-icon {
        width: 26px;
        height: 26px;
    }

    .flexible-hero-formulaire__logos {
        row-gap: 16px;
        column-gap: 12px;
        padding: 16px;
    }

    .flexible-hero-formulaire__logos img {
        flex-basis: calc(33.333% - 8px); /* (100% - 2 * column-gap 12px) / 3 */
        height: 20px;
    }

    .flexible-hero-formulaire__form-card {
        padding: 24px;
        border-radius: 16px;
    }

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

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

    .flexible-hero-formulaire .wpcf7-form textarea {
        height: 90px;
    }
}