@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*
| Template « Webforce 2026 » — rendu public des formulaires
|--------------------------------------------------------------------------
| Feuille autonome : elle est la seule chargée après style.bundle.css pour
| les formulaires dont `template` vaut "default/wf2026". Elle ne modifie
| aucun balisage — tout passe par les classes déjà émises par
| resources/views/webformulaire/templates/default.blade.php.
|
| Personnalisation par client : ajouter les variables à `formStyle` dans
| l'apparence du formulaire, elles sont héritées par tout le formulaire.
|   padding:24px;background:transparent;--wf-accent:#122b7c
|
| Le sélecteur racine est écrit `[class*="templates_wf2026"]` et non
| `.templates_wf2026` : la variante à étapes porte la classe
| `templates_wf2026_steps` et importe cette feuille pour en hériter. Un
| sélecteur d'attribut a exactement la même spécificité qu'une classe (0,1,0)
| et la position dans le fichier ne change pas — la cascade des formulaires
| « default/wf2026 » déjà en ligne est identique au bit près.
*/

[class*="templates_wf2026"] {
    --wf-accent: #111827;
    /* Dérivé de l'accent : une seule variable à définir pour rebrander. */
    --wf-accent-hover: color-mix(in srgb, var(--wf-accent) 86%, #000);
    --wf-accent-ink: #ffffff;

    --wf-ink: #0f172a;
    --wf-ink-soft: #334155;
    --wf-muted: #64748b;
    --wf-placeholder: #94a3b8;

    --wf-surface: #ffffff;
    --wf-border: #d8dee9;
    --wf-border-hover: #b6c0d0;

    --wf-danger: #dc2626;
    --wf-danger-soft: #fef2f2;
    --wf-success: #059669;
    --wf-success-soft: #ecfdf5;

    --wf-radius: 10px;
    --wf-field-h: 48px;
    --wf-gap: 20px;
    --wf-gutter: 6px;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--wf-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class*="templates_wf2026"] *,
[class*="templates_wf2026"] *::before,
[class*="templates_wf2026"] *::after {
    box-sizing: border-box;
}


/* ── En-tête ────────────────────────────────────────────────────────────── */

[class*="templates_wf2026"] .title-form {
    font-family: inherit;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--wf-ink);
    margin: 0 0 4px;
}

[class*="templates_wf2026"] .description-form {
    font-size: 15px;
    line-height: 1.6;
    color: var(--wf-muted);
    margin: 0 0 4px;
    padding: 0;
}

/* Le conteneur de description reste dans le flux même vide : on le réduit à
   zéro pour éviter le trou blanc visible sur les formulaires sans détail. */
[class*="templates_wf2026"] .description-form:empty {
    display: none;
}

[class*="templates_wf2026"] .cardheadersdfsdf {
    margin-bottom: 28px;
}

[class*="templates_wf2026"] .cardheadersdfsdf > div:first-of-type + span,
[class*="templates_wf2026"] .cardheadersdfsdf .col-12 {
    padding-left: 0;
    padding-right: 0;
}

[class*="templates_wf2026"] .description-form.mx-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ── Groupes de champs ──────────────────────────────────────────────────── */

[class*="templates_wf2026"] .fieldsForm {
    margin: 0 0 var(--wf-gap) !important;
    padding-left: 0;
    padding-right: 0;
}

[class*="templates_wf2026"] .fieldsForm:last-child {
    margin-bottom: 0 !important;
}

/* h4.head-group devient une véritable étiquette de champ : c'est ce qui
   remplace l'étiquette manquante (les champs n'ont que des placeholders). */
[class*="templates_wf2026"] .head-group {
    margin: 0 0 8px;
    /* même gouttière que les champs : sinon l'étiquette est 6px à leur gauche */
    padding: 0 var(--wf-gutter);
}

[class*="templates_wf2026"] .head-group .name_group {
    display: block;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--wf-ink-soft);
}

/* Chaque groupe enveloppe ses champs dans un `.row` Bootstrap 3 (marges
   négatives de -15px) et certains portent en plus un `margin-left` inline.
   Sans cette remise à zéro, les champs débordent à gauche du formulaire —
   la case « politique de confidentialité » sortait du cadre. */
[class*="templates_wf2026"] .fieldsForm > .row,
[class*="templates_wf2026"] .fieldsForm > .row > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* La `.row` externe de .cardsdfbody enveloppe tous les groupes : on lui donne
   la gouttière négative qui compense le padding des champs, sinon le corps du
   formulaire ne s'aligne pas sur le titre ni sur le bouton d'envoi. */
[class*="templates_wf2026"] .cardsdfbody > .row {
    margin-left: calc(var(--wf-gutter) * -1) !important;
    margin-right: calc(var(--wf-gutter) * -1) !important;
}

[class*="templates_wf2026"] .cardsdfbody,
[class*="templates_wf2026"] .casdfoter {
    padding-left: 0;
    padding-right: 0;
}

[class*="templates_wf2026"] .padding_left_25px {
    padding-left: 0;
}

/* Une seule gouttière pour tous les champs, quelle que soit la classe de
   colonne héritée (col-12, col-bs-12, col-bs-sm-6…). Sans cela les champs
   ne s'alignent pas verticalement d'un groupe à l'autre. */
[class*="templates_wf2026"] .fieldsForm .form-group {
    padding-left: var(--wf-gutter);
    padding-right: var(--wf-gutter);
    margin-bottom: 0 !important;
}

/* Deux champs côte à côte sur la même ligne se serrent verticalement quand ils
   repassent en colonne unique sur mobile. */
@media (max-width: 424px) {
    [class*="templates_wf2026"] .col-bs-sm-6 + .col-bs-sm-6 {
        margin-top: 12px;
    }
}


/* ── Champs de saisie ───────────────────────────────────────────────────── */

[class*="templates_wf2026"] .myInputs,
[class*="templates_wf2026"] input.form-control,
[class*="templates_wf2026"] select.form-control,
[class*="templates_wf2026"] textarea.form-control {
    display: block;
    width: 100%;
    height: var(--wf-field-h);
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--wf-ink);
    background-color: var(--wf-surface);
    background-image: none;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

/* Les textarea portent un `height:100px` inline et `rows="10"` : sans hauteur
   explicite, `height:auto` laisse les 10 lignes dicter ~266px. */
[class*="templates_wf2026"] textarea.form-control,
[class*="templates_wf2026"] textarea.myInputs {
    height: 132px !important;
    min-height: 132px;
    padding: 12px 14px;
    line-height: 1.6;
    resize: vertical;
}

[class*="templates_wf2026"] select.form-control {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

[class*="templates_wf2026"] .myInputs::placeholder,
[class*="templates_wf2026"] .form-control::placeholder {
    color: var(--wf-placeholder);
    opacity: 1;
}

[class*="templates_wf2026"] .myInputs:hover:not(:focus),
[class*="templates_wf2026"] .form-control:hover:not(:focus) {
    border-color: var(--wf-border-hover);
}

[class*="templates_wf2026"] .myInputs:focus,
[class*="templates_wf2026"] .form-control:focus {
    outline: none;
    border-color: var(--wf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent) 16%, transparent);
    background-color: var(--wf-surface);
}

/* Repli pour les navigateurs sans color-mix : anneau neutre plutôt qu'aucun,
   et survol du bouton assombri par une superposition plutôt que par un mix. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    [class*="templates_wf2026"] .myInputs:focus,
    [class*="templates_wf2026"] .form-control:focus {
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
    }

    [class*="templates_wf2026"] {
        --wf-accent-hover: var(--wf-accent);
    }

    [class*="templates_wf2026"] .btn_dark_:hover,
    [class*="templates_wf2026"] .envoyer-button:hover {
        filter: brightness(0.88);
    }
}

[class*="templates_wf2026"] .myInputs:disabled,
[class*="templates_wf2026"] .form-control:disabled {
    background-color: #f1f5f9;
    color: var(--wf-muted);
    cursor: not-allowed;
}


/* ── États d'erreur ─────────────────────────────────────────────────────── */

/* .invalid est posée par validateForm() dans default.blade.php. */
[class*="templates_wf2026"] .myInputs.invalid,
[class*="templates_wf2026"] .form-control.invalid {
    border-color: var(--wf-danger);
    background-color: var(--wf-danger-soft);
}

[class*="templates_wf2026"] .myInputs.invalid:focus,
[class*="templates_wf2026"] .form-control.invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* .error_Form est un <span class="text-danger"> ajouté au .form-group. */
[class*="templates_wf2026"] .error_Form {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--wf-danger) !important;
}


/* ── Case à cocher, boutons radio, confidentialité ──────────────────────── */

/* Le gabarit intercale des `&nbsp;` entre la case et le libellé : ils forment
   un élément flex anonyme qui s'ajoute au `gap`. On garde donc un gap réduit
   et on laisse les espaces insécables faire le reste. */
[class*="templates_wf2026"] .checkbox,
[class*="templates_wf2026"] .radio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--wf-ink-soft);
    cursor: pointer;
}

[class*="templates_wf2026"] .checkbox + .checkbox,
[class*="templates_wf2026"] .radio + .radio {
    margin-top: 10px;
}

/* Le vrai input est masqué par le thème ; le <span> frère dessine la case.
   On neutralise les .form-control héritées sur cet input caché. */
[class*="templates_wf2026"] .checkbox > input[type="checkbox"],
[class*="templates_wf2026"] .radio > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

[class*="templates_wf2026"] .checkbox > span,
[class*="templates_wf2026"] .radio > span {
    position: relative;
    top: 1px;
    flex: 0 0 auto;
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border) !important;
    border-radius: 6px;
    transition: background-color 120ms ease, border-color 120ms ease;
}

[class*="templates_wf2026"] .radio > span {
    border-radius: 50%;
}

[class*="templates_wf2026"] .checkbox:hover > span,
[class*="templates_wf2026"] .radio:hover > span {
    border-color: var(--wf-border-hover) !important;
}

/* Le thème pose `.checkbox-outline` (fond transparent) et `.checkbox-success`
   (coche turquoise) en !important : il faut le même poids pour imposer la
   couleur d'accent du client. */
[class*="templates_wf2026"] .checkbox > input:checked ~ span,
[class*="templates_wf2026"] .radio > input:checked ~ span {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

[class*="templates_wf2026"] .checkbox > input:checked ~ span::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 2px solid var(--wf-accent-ink) !important;
    border-bottom: 2px solid var(--wf-accent-ink) !important;
    transform: rotate(45deg);
    opacity: 1;
    background: none !important;
    mask: none;
    -webkit-mask: none;
}

[class*="templates_wf2026"] .radio > input:checked ~ span::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border: 0 !important;
    border-radius: 50%;
    background: var(--wf-accent-ink) !important;
    transform: none;
}

[class*="templates_wf2026"] .checkbox > input:focus-visible ~ span,
[class*="templates_wf2026"] .radio > input:focus-visible ~ span {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent) 20%, transparent);
}

/* Les listes de choix restent sur la grille Bootstrap du gabarit (`col-6`) :
   la remplacer par une grille CSS décale les options d'une cellule. On se
   contente d'en resserrer le rythme vertical. */
[class*="templates_wf2026"] .multipleClone > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[class*="templates_wf2026"] .multipleClone > .row > .checkbox,
[class*="templates_wf2026"] .multipleClone > .row > .radio {
    padding: 7px 0 !important;
    margin: 0;
}

/* En dessous de 520 px, deux options côte à côte deviennent illisibles. */
@media (max-width: 519px) {
    [class*="templates_wf2026"] .multipleClone > .row > .checkbox,
    [class*="templates_wf2026"] .multipleClone > .row > .radio {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Confidentialité : le libellé est toujours enveloppé dans .text__1 (voir
   champs/privacy.blade.php), on peut donc annuler les `&nbsp;` intercalaires
   par font-size:0 sans risquer d'effacer du texte. Les listes d'options, où
   le libellé est un nœud texte nu, ne sont pas concernées. */
[class*="templates_wf2026"] .child_privacy .checkbox {
    gap: 0;
    font-size: 0;
}

[class*="templates_wf2026"] .child_privacy .text__1 {
    margin-left: 12px;
}

[class*="templates_wf2026"] .text__1 {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--wf-muted);
}

[class*="templates_wf2026"] .child_privacy {
    margin-top: 4px;
}


/* ── Bouton d'envoi ─────────────────────────────────────────────────────── */

[class*="templates_wf2026"] .btn_Envoyer {
    width: 100%;
    margin-top: 28px;
}

/* Spécificité 0,2,0 : bat le `.btn_dark_ { background:#ccc }` injecté en
   <style> par layouts/template_forms.blade.php, sans écraser un style inline
   défini par le chef de projet dans l'apparence. */
[class*="templates_wf2026"] .btn_dark_,
[class*="templates_wf2026"] .envoyer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: var(--wf-field-h);
    padding: 0 28px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--wf-accent-ink);
    background: var(--wf-accent);
    border: 0;
    border-radius: var(--wf-radius);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color 140ms ease, transform 100ms ease, box-shadow 140ms ease;
}

[class*="templates_wf2026"] .btn_dark_:hover,
[class*="templates_wf2026"] .envoyer-button:hover {
    background: var(--wf-accent-hover);
    color: var(--wf-accent-ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wf-accent) 25%, transparent);
}

[class*="templates_wf2026"] .btn_dark_:active,
[class*="templates_wf2026"] .envoyer-button:active {
    transform: translateY(0);
    box-shadow: none;
}

[class*="templates_wf2026"] .btn_dark_:focus-visible,
[class*="templates_wf2026"] .envoyer-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent) 30%, transparent);
}

@media (max-width: 575px) {
    [class*="templates_wf2026"] .btn_dark_,
    [class*="templates_wf2026"] .envoyer-button {
        width: 100%;
    }
}


/* ── Notification d'envoi ───────────────────────────────────────────────── */

/* #notificationSide porte un style inline (position/top/left/transform) posé
   dans le gabarit : on ne touche qu'à l'habillage. */
[class*="templates_wf2026"] #notificationSide {
    padding: 12px 18px;
    border: 0;
    border-radius: var(--wf-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    transition: opacity 180ms ease;
}

[class*="templates_wf2026"] #notificationSide.alert-light-success {
    background: var(--wf-success-soft);
    color: var(--wf-success);
}

[class*="templates_wf2026"] #notificationSide.alert-light-danger {
    background: var(--wf-danger-soft);
    color: var(--wf-danger);
}

[class*="templates_wf2026"] #notificationSide .alert-text {
    padding: 0;
    color: inherit;
}


/* ── Éléments de mise en forme ──────────────────────────────────────────── */

[class*="templates_wf2026"] .child_title,
[class*="templates_wf2026"] .Element_title h1,
[class*="templates_wf2026"] .Element_title h2,
[class*="templates_wf2026"] .Element_title h3 {
    font-family: inherit;
    letter-spacing: -0.01em;
}

[class*="templates_wf2026"] .Element_separateur hr,
[class*="templates_wf2026"] .child_separateur hr {
    border: 0;
    border-top: 1px solid var(--wf-border);
    margin: 4px 0;
}

[class*="templates_wf2026"] .Element_section {
    margin-top: 8px;
}


/* ── Étapes masquées (variante non-stepper) ─────────────────────────────── */

/* Ce bloc — et lui seul — vise la classe exacte `templates_wf2026`, pas le
   sélecteur d'attribut : la variante à étapes a besoin de ces éléments. Et le
   `!important` battrait le `display:none` que showTab() pose en style inline
   sur la dernière étape, ce qui rendrait la flèche « suivant » cliquable
   au-delà de la fin — nextPrev() y appelle une fonction qui n'existe pas. */
.templates_wf2026 .MyProgress,
.templates_wf2026 .MyProgres_namestap,
.templates_wf2026 .btns_Step_child,
.templates_wf2026 .next_etap,
.templates_wf2026 .prev_etap {
    display: none !important;
}


/* ── Grille interne (reprise de default.css, ces classes sont maison) ───── */

.responsive-form .row-bs {
    display: flex;
}

.responsive-form .col-bs-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.responsive-form .col-bs-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.col-bs-sm-6 {
    position: relative;
    width: 100%;
    min-height: 1px;
}

.col-bs-12 {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 425px) {
    .col-bs-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}