/* ==========================================================================
   CGT OBS — Fluent Forms — Custom Styling (GLOBAL / tous les formulaires)
   Palette : tokens --cgt-* définis dans main.css (rouge, noir, gris, bordure,
             rayon, ombre) → le formulaire suit la charte du site + Customizer.
   Police  : Poppins (corps) via --cgt-font, chargée par le handle cgtobs-fonts
   Scope   : .frm-fluent-form (s'applique à TOUS les formulaires Fluent Forms)

   IMPORTANT : ce CSS ne touche PLUS à la disposition en colonnes.
   Fluent Forms gère lui-même ses groupes 2 colonnes / 3 colonnes.
   Ici on ne fait que l'apparence (couleurs, bordures, boutons, etc.).
   ========================================================================== */

/* Couleurs, rayons et ombres : hérités des tokens --cgt-* définis dans main.css
   (chargé avant ce fichier via la dépendance cgtobs-main). Le formulaire suit
   ainsi automatiquement la palette du site, Customizer inclus.
   La police est fournie par le handle cgtobs-fonts (Poppins / Manrope). */

/* ==========================================================================
   Conteneur global
   >>> LARGEUR DU FORMULAIRE : modifie cette seule valeur pour l'élargir <<<
   (le vrai plafond reste la colonne/section Elementor qui contient le form)
   ========================================================================== */
.frm-fluent-form {
    /* --- Gabarit d'un champ, source unique de vérité -----------------------
       Un champ « standard » empile un bloc libellé et un contrôle :

         hauteur du champ = bloc libellé + marge + contrôle

       Le bloc libellé (.ff-el-input--label) n'a pas de hauteur propre : il vaut
       exactement UNE ligne de texte du formulaire, donc `1em × line-height`.
       On l'exprime tel quel plutôt qu'en pixels : si la taille de police ou
       l'interlignage du formulaire changent, la hauteur suit d'elle-même.

       Ces variables sont réellement consommées par les règles plus bas
       (line-height du formulaire, min-height des contrôles), elles ne peuvent
       donc pas se désynchroniser des valeurs réelles. */
    --cgt-ff-line-height: 1.55;
    --cgt-ff-control-height: 50px;
    /* Marge basse de .ff-el-input--label, posée par Fluent Forms. */
    --cgt-ff-label-gap: 5px;
    --cgt-ff-field-height: calc(1em * var(--cgt-ff-line-height) + var(--cgt-ff-label-gap) + var(--cgt-ff-control-height));
    --cgt-ff-row-gap: 20px;

    color: var(--cgt-gray);
    font-size: 18px;
    line-height: var(--cgt-ff-line-height);
    /* max-width: 1140px; */
    /* <-- était 860px. Mets 100% pour remplir le conteneur */
    margin: 0 auto;
    background: var(--cgt-white);
    padding: 40px 44px 44px;
    border-radius: var(--cgt-radius);
    box-shadow: var(--cgt-shadow);
    border: 1px solid var(--cgt-border);
    box-sizing: border-box;
}

/* box-sizing uniquement sur les éléments visuels, PAS sur les conteneurs
   de colonnes de Fluent Forms (pour ne pas perturber leurs calculs) */
.frm-fluent-form .ff-el-group,
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form .cgtobs-form-header,
.frm-fluent-form .cgtobs-form-header * {
    box-sizing: border-box;
}

/* ==========================================================================
   En-tête personnalisé (cgtobs-form-header)
   ========================================================================== */
.frm-fluent-form .cgtobs-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 0px;
    background: var(--cgt-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.frm-fluent-form .cgtobs-form-header__left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.frm-fluent-form .cgtobs-form-header__icon {
    width: 64px;
    height: 64px;
    border: 2px solid var(--cgt-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cgt-red);
    flex-shrink: 0;
}

.frm-fluent-form .cgtobs-form-header__icon .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.frm-fluent-form .cgtobs-form-header__text h2 {
    margin: 0 0 6px;
    color: var(--cgt-black);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.frm-fluent-form .cgtobs-form-header__text p {
    margin: 0;
    color: var(--cgt-gray);
    font-size: 15px;
    line-height: 1.5;
}

.frm-fluent-form .cgtobs-form-header__required {
    align-self: flex-end;
    color: var(--cgt-black);
    font-size: 13px;
    white-space: nowrap;
}

.frm-fluent-form .cgtobs-form-header__required span {
    color: var(--cgt-red);
    font-weight: 700;
}

/* ==========================================================================
   Séparateurs de section (Section Break)
   ========================================================================== */
.frm-fluent-form .ff-el-section-break {
    margin: 34px 0 22px;
}

.frm-fluent-form .ff-el-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--cgt-black);
    margin: 0 0 12px;
    text-transform: capitalize;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 16px;
}

/* Barre rouge décorative devant chaque titre de section */
.frm-fluent-form .ff-el-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 24px;
    background: var(--cgt-red);
    border-radius: 3px;
}

.frm-fluent-form .ff-el-section-break hr {
    border: none;
    border-top: 1px solid var(--cgt-border);
    margin: 0;
}

/* ==========================================================================
   Groupes de champs
   ========================================================================== */
.frm-fluent-form .ff-el-group {
    margin-bottom: 22px;
}

/* --- Labels --- */
.frm-fluent-form .ff-el-input--label label {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: var(--cgt-black);
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Astérisque des champs obligatoires en rouge */
.frm-fluent-form .ff-el-is-required.asterisk-right label:after,
.frm-fluent-form .asterisk-right.ff-el-is-required label:after {
    color: var(--cgt-red);
}

.frm-fluent-form .ff-el-input--label.asterisk-right label:after {
    color: var(--cgt-red);
    font-weight: 700;
}

/* ==========================================================================
   Champs de saisie (input / select / textarea)
   La LARGEUR n'est PAS forcée : Fluent Forms la gère (remplit sa cellule)
   et respecte tes largeurs par champ définies dans l'éditeur.
   ========================================================================== */
.frm-fluent-form .ff-el-form-control {
    font-family: inherit;
    font-size: 16px;
    color: var(--cgt-black);
    background: var(--cgt-white);
    border: 1px solid var(--cgt-border);
    border-radius: var(--cgt-radius);
    padding: 12px 16px;
    /* Consommée aussi par --cgt-ff-field-height (cf. en-tête du fichier) : les
       groupes de choix en ligne s'alignent sur cette hauteur. */
    min-height: var(--cgt-ff-control-height);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.frm-fluent-form .ff-el-form-control::placeholder {
    color: #9A9A9A;
    opacity: 1;
}

/* Focus */
.frm-fluent-form .ff-el-form-control:focus {
    outline: none;
    border-color: var(--cgt-red);
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.14);
    background: var(--cgt-white);
}

/* Hover */
.frm-fluent-form .ff-el-form-control:hover:not(:focus) {
    border-color: #C4C4C4;
}

/* --- Textarea : hauteur confortable --- */
.frm-fluent-form textarea.ff-el-form-control {
    min-height: 120px;
    resize: vertical;
}

/* --- Select : flèche personnalisée --- */
.frm-fluent-form select.ff-el-form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D71920' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}

/* --- Datepicker (lecture seule) --- */
.frm-fluent-form input.ff-el-datepicker {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F4F4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

/* ==========================================================================
   >>> AUCUNE RÈGLE DE COLONNE ICI <<<
   La disposition (ff_columns_total_2, name-field, address) est laissée
   entièrement à Fluent Forms pour ne pas casser tes groupes 2 colonnes.
   ========================================================================== */

/* ==========================================================================
   Boutons radio & cases à cocher personnalisés
   ========================================================================== */
.frm-fluent-form .ff-el-form-check {
    margin-bottom: 10px;
}

.frm-fluent-form .ff-el-form-check-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--cgt-gray);
    cursor: pointer;
    line-height: 1.4;
}

/* Radios/checkboxes en ligne */
.frm-fluent-form .ff_list_inline .ff-el-form-check {
    display: inline-block;
    margin-right: 22px;
}

/* --- Personnalisation du contrôle --- */
.frm-fluent-form .ff-el-form-check-input {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border: 2px solid #C4C4C4;
    background: var(--cgt-white);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
}

.frm-fluent-form .ff-el-form-check-radio {
    border-radius: 50%;
}

.frm-fluent-form .ff-el-form-check-checkbox {
    border-radius: 6px;
}

/* Hover */
.frm-fluent-form .ff-el-form-check-input:hover {
    border-color: var(--cgt-red);
}

/* État coché */
.frm-fluent-form .ff-el-form-check-input:checked {
    border-color: var(--cgt-red);
    background: var(--cgt-red);
}

/* Point central du radio */
.frm-fluent-form .ff-el-form-check-radio:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cgt-white);
}

/* Coche de la checkbox */
.frm-fluent-form .ff-el-form-check-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid var(--cgt-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ==========================================================================
   Case à cocher unique requise (mise en avant type "engagement")
   ========================================================================== */
.frm-fluent-form .ff-el-group:has(.ff-el-form-check-checkbox[aria-required="true"]) {
    background: var(--cgt-bg-light);
    border: 1px solid var(--cgt-border);
    border-left: 4px solid var(--cgt-red);
    border-radius: var(--cgt-radius);
    padding: 18px 20px;
}

/* ==========================================================================
   Bouton de soumission
   >>> Volontairement NON stylé ici. <<<
   Le bouton est géré directement dans l'éditeur Fluent Forms (Styler /
   Default Style Template). Aucun CSS bouton dans ce fichier pour éviter tout
   conflit de spécificité avec les réglages de l'éditeur.
   ========================================================================== */

/* ==========================================================================
   Messages d'erreur & validation
   NOTE : s'affichent SEULEMENT si le champ est réglé "Obligatoire / Required"
   dans l'éditeur Fluent Forms. Le CSS ne rend pas un champ obligatoire.
   ========================================================================== */
.frm-fluent-form .ff-el-is-error .ff-el-form-control {
    border-color: var(--cgt-red);
    background: #FEF4F4;
}

.frm-fluent-form .error,
.frm-fluent-form .text-danger,
.frm-fluent-form .ff-el-is-error .error {
    display: block;
    color: var(--cgt-red);
    font-size: 14px;
    font-weight: 500;
    margin-top: 6px;
}

/* Message de succès après soumission */
.frm-fluent-form .ff-message-success,
.ff_form_success {
    background: var(--cgt-bg-light);
    border: 1px solid var(--cgt-border);
    border-left: 4px solid var(--cgt-red);
    border-radius: var(--cgt-radius);
    color: var(--cgt-black);
    font-size: 16px;
    padding: 18px 20px;
}

/* ==========================================================================
   Responsive (n'affecte PAS les colonnes — Fluent Forms les empile lui-même)
   ========================================================================== */
@media (max-width: 768px) {
    .frm-fluent-form {
        padding: 26px 20px 30px;
    }

    .frm-fluent-form .cgtobs-form-header {
        flex-direction: column;
        padding: 24px 20px;
    }

    .frm-fluent-form .cgtobs-form-header__left {
        align-items: flex-start;
    }

    .frm-fluent-form .cgtobs-form-header__required {
        align-self: flex-start;
    }

    .frm-fluent-form .cgtobs-form-header__text h2 {
        font-size: 24px;
    }

    .frm-fluent-form .ff-el-section-title {
        font-size: 22px;
    }
}


/* ==========================================================================
   Alignement vertical dans les conteneurs à colonnes

   Objectif : deux champs placés sur la même ligne doivent être à la même
   hauteur — jamais l'un légèrement plus haut que l'autre.

   Il faut distinguer deux cas, d'où les deux règles ci-dessous :

   1. Colonne à PLUSIEURS champs (ex. Prénom/Adresse/CP à gauche, Nom/Ville à
      droite). Les champs se correspondent un à un de haut en bas : il faut donc
      les aligner par le HAUT. Centrer décalerait toute la colonne la plus
      courte de la moitié de l'écart (22px constatés ici sur Prénom / Nom).

   2. Colonne à UN SEUL champ (ex. « Civilité » en radios à gauche, champ sans
      libellé à droite). Là, les deux champs n'ont ni la même hauteur ni le même
      gabarit ; les centrer dans la hauteur de ligne est le seul moyen de les
      faire coïncider.

   NE PAS ajouter `flex-wrap: wrap` au conteneur : avec le `gap: 15px` de
   Fluent Forms, deux cellules en `flex-basis: 50%` dépassent 100 % et
   passeraient à la ligne.
   ========================================================================== */

/* Cellules à hauteur égale (comportement natif de Fluent Forms).
   `margin-bottom` : la marge basse du dernier champ de chaque cellule est
   annulée plus bas (elle fausserait le centrage vertical) ; on la reporte donc
   sur le conteneur, sinon la ligne serait collée à la suivante. */
.frm-fluent-form .ff-t-container.ff-column-container {
    align-items: stretch;
    margin-bottom: var(--cgt-ff-row-gap);
}

/* Cas 1 — alignement par le haut, champ par champ. */
.frm-fluent-form .ff-t-container.ff-column-container > .ff-t-cell {
    justify-content: flex-start;
}

/* Cas 2 — colonne d'un seul champ : centrage vertical.
   `.ff-el-group ~ .ff-el-group` n'existe qu'à partir de deux champs : sa
   négation cible donc exactement les colonnes à un champ. */
.frm-fluent-form .ff-t-container.ff-column-container > .ff-t-cell:not(:has(.ff-el-group ~ .ff-el-group)) {
    justify-content: center;
}

/* La marge basse du dernier champ fausserait ce centrage (elle compte dans la
   hauteur du contenu, ce qui remonte le champ de la moitié de la marge). */
.frm-fluent-form .ff-t-container.ff-column-container > .ff-t-cell > .ff-el-group:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Libellé à gauche des choix en ligne (radio / cases à cocher)
   ATTENTION : le DOM de ce champ ne porte PAS la classe .ff-el-form-left
   (elle n'est ajoutée que si « Label Placement » = Left dans l'éditeur).
   Le ciblage se fait donc sur .ff_list_inline, réellement présente.
   Aucune règle !important n'est nécessaire : ces sélecteurs sont déjà plus
   spécifiques que les règles génériques plus haut dans ce fichier.
   ========================================================================== */
.frm-fluent-form .ff-el-group.ff_list_inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    /* Libellé collé au début du groupe, choix rejetés à la fin. */
    justify-content: space-between;
    /* Le libellé étant à GAUCHE des choix, ce groupe n'a pas de bloc libellé
       au-dessus : il ne mesure que ~25px, contre ~83px pour un champ classique
       (libellé + contrôle). Les lignes contenant des boutons radio paraissaient
       donc tassées par rapport aux autres. On leur donne la hauteur d'un champ
       standard — calculée, pas figée : elle suit la police et l'interlignage du
       formulaire ainsi que la hauteur des contrôles. */
    min-height: var(--cgt-ff-field-height);
}

/* Fluent Forms ajoute un clearfix (`content: " "; display: table`) en ::before
   et ::after sur CHAQUE .ff-el-group, pour contenir son ancien layout en float.
   Dans un conteneur flex ces pseudo-éléments deviennent de véritables éléments
   flex : le `gap` s'applique donc AVANT le libellé (18px fantômes, d'où le
   décalage par rapport aux autres champs) et APRÈS les choix.
   Le groupe étant en flex, plus aucun float n'est en jeu : le clearfix ne sert
   plus à rien ici. */
.frm-fluent-form .ff-el-group.ff_list_inline::before,
.frm-fluent-form .ff-el-group.ff_list_inline::after {
    content: none;
}

/* Le margin-bottom (5px côté plugin, 8px sur le <label> côté thème) est prévu
   pour un libellé empilé AU-DESSUS du champ. En flex, `align-items: center`
   centre la boîte de marge : ces 5px décaleraient le texte vers le haut. */
.frm-fluent-form .ff-el-group.ff_list_inline > .ff-el-input--label,
.frm-fluent-form .ff-el-group.ff_list_inline > .ff-el-input--label label {
    margin-bottom: 0;
}

.frm-fluent-form .ff-el-group.ff_list_inline > .ff-el-input--label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* `flex: 0 1 auto` (et non `1 1 auto`) : le bloc de choix ne doit pas absorber
   l'espace libre, sinon `justify-content: space-between` n'aurait rien à
   répartir et les choix resteraient collés au libellé. */
.frm-fluent-form .ff-el-group.ff_list_inline > .ff-el-input--content {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 22px;
}

/* Champs réglés sur « Label Placement: Left » dans l'éditeur.
   Fluent Forms les dispose en FLOAT : libellé `float: left; width: 180px` et
   contenu `margin-left: 180px`. Une fois le groupe en flex, le float ne
   s'applique plus (les éléments flex ne flottent pas) mais la marge de 180px
   subsiste : le contenu était repoussé de 180px APRÈS le libellé et passait à
   la ligne. On neutralise ces reliquats.
   La largeur de 180px du libellé est conservée : elle aligne les colonnes.
   Le padding-top de 10px, lui, décentrerait le texte du libellé. */
.frm-fluent-form .ff-el-group.ff-el-form-left.ff_list_inline > .ff-el-input--label {
    float: none;
    padding-top: 0;
}

.frm-fluent-form .ff-el-group.ff-el-form-left.ff_list_inline > .ff-el-input--content {
    margin-left: 0;
}

/* Chaque choix : la puce et son texte centrés l'un par rapport à l'autre
   (l'alignement par défaut est flex-start, pensé pour les libellés longs).

   Les marges basses (10px sur .ff-el-form-check côté plugin, 7px sur le label
   côté « ff-default ») sont prévues pour une liste EMPILÉE. En ligne et centré,
   elles gonflent la boîte de chaque choix et remontent les puces d'environ 8px.
   L'espacement est repris par le `gap` de .ff-el-input--content.

   `> .ff-el-input--content >` n'est pas décoratif : il porte le sélecteur à
   0-5-0 pour passer devant `.fluentform .ff-el-group.ff_list_inline
   .ff-el-form-check` (0-4-0) du plugin, qui gagnerait sinon l'égalité de
   spécificité en étant chargé après ce fichier. */
.frm-fluent-form .ff-el-group.ff_list_inline > .ff-el-input--content > .ff-el-form-check {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.frm-fluent-form .ff-el-group.ff_list_inline .ff-el-form-check-label {
    align-items: center;
    margin-bottom: 0;
}

/* Fluent Forms remonte la puce de 2px (position: relative; top: -2px) pour la
   caler sur la ligne de base du texte. En flex centré, ce décalage devient un
   défaut d'alignement : on l'annule.
   On garde `position: relative` — le point du radio coché (::after) est
   positionné en absolu par rapport à lui. */
.frm-fluent-form .ff-el-group.ff_list_inline .ff-el-form-check-input {
    margin-top: 0;
    top: 0;
}