/* =========================================================
   NOVAP — CSS PERSONNALISÉ GLOBAL (formulaire de candidature)
   1. Boutons + navigation multi-step
   2. Indicateurs / alignement des étapes
   3. Checkbox / radio custom
   4. Bulles d'aide "?" (tooltips)
   5. Champs upload (boutons rouges)
   6. Responsive mobile
   7. Mise en grille des étapes  ←  AJOUT (Présentation + Ressources)
   ========================================================= */


/* =========================================================
   1. BOUTONS
   ========================================================= */
.elementor-button-align-start .e-form__buttons,
.elementor-button-align-start .elementor-field-type-submit {
    justify-content: space-between;
}

.e-form__buttons__wrapper__button-next,
.e-form__buttons__wrapper__button-previous {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Margin uniquement sur les boutons de la 2e étape */
.e-form__step:nth-of-type(2) .e-form__buttons {
    margin-top: 200px;
}

/* Toutes les autres étapes */
.e-form__step:not(:nth-of-type(2)) .e-form__buttons {
    margin-top: 0;
}

/* SVG précédent */
.e-form__buttons__wrapper__button-previous::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url('/wp-content/uploads/2026/06/arrow-1.svg') center/contain no-repeat;
}

/* SVG suivant */
.e-form__buttons__wrapper__button-next::after {
    content: "";
    width: 14px;
    height: 14px;
    transform: rotate(180deg);
    flex-shrink: 0;
    background: url('/wp-content/uploads/2026/06/arrow-1.svg') center/contain no-repeat;
}

/* Supprime le ::after uniquement sur le bouton de la 1re étape */
.e-form__step:first-of-type .e-form__buttons__wrapper__button-next::after {
    display: none;
    content: none;
}


/* =========================================================
   2. INDICATEURS + ALIGNEMENT DES ÉTAPES
   ========================================================= */
.elementor-form .e-form__indicators {
    display: none;
}

/* Alignement Haut */
.e-form__step:not(.elementor-hidden) {
    align-items: flex-start;
    justify-content: center;
}

.elementor-button-align-start .e-form__buttons {
    justify-content: center;
}

.elementor-button-align-start .e-form__buttons:has(> :nth-child(2)) {
    justify-content: space-between;
}


/* =========================================================
   3. CHECKBOX / RADIO CUSTOM
   ========================================================= */

/* --- Structure des groupes de checkbox/radio --- */
.elementor-field-type-checkbox .elementor-field-subgroup,
.elementor-field-type-radio .elementor-field-subgroup {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 15px;
}

/* --- Style des options (avec transition pour le fond et le texte) --- */
.elementor-field-option {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 8px 20px 8px 10px;
    background: #F0F0F0;
    margin: 0;
    border-radius: 20px;
    align-items: center;
    transition:
        background-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-field-option label {
    display: flex;
    align-items: center;
    transition: color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Style des inputs (checkbox/radio) --- */
.elementor-field-option input[type="checkbox"],
.elementor-field-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-grid;
    place-content: center;
    position: relative;
    cursor: pointer;
    background: transparent;
    transition:
        transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        background-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Icône de check (cachée par défaut) --- */
.elementor-field-option input[type="checkbox"]::before,
.elementor-field-option input[type="radio"]::before {
    content: "";
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition:
        transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: absolute;
    top: 2px;
    left: 5px;
}

/* --- Effet au clic (réduction) --- */
.elementor-field-option input[type="checkbox"]:active,
.elementor-field-option input[type="radio"]:active {
    transform: scale(0.9);
}

/* --- État coché : fond noir + texte blanc + icône visible --- */
.elementor-field-option:has(input[type="checkbox"]:checked),
.elementor-field-option:has(input[type="radio"]:checked) {
    background: #000;
    color: #fff;
}

.elementor-field-option:has(input[type="checkbox"]:checked) label,
.elementor-field-option:has(input[type="radio"]:checked) label {
    color: #fff !important;
}

.elementor-field-option input[type="checkbox"]:checked,
.elementor-field-option input[type="radio"]:checked {
    background-color: #000;
    border-color: #fff;
}

.elementor-field-option input[type="checkbox"]:checked::before,
.elementor-field-option input[type="radio"]:checked::before {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}


/* =========================================================
   4. BULLES D'AIDE "?" (tooltips)
   ========================================================= */

/* --- Style commun pour tous les champs --- */
.elementor-field-group-titreinnovation,
.elementor-field-group-nomassociation,
.elementor-field-group-besoin,
.elementor-field-group-solution,
.elementor-field-group-grandesetapescalendrier,
.elementor-field-group-impactstructure {
    position: relative;
}

/* --- Style commun pour les bulles "?" (::after) --- */
.elementor-field-group-titreinnovation::after,
.elementor-field-group-nomassociation::after,
.elementor-field-group-numeroadherent::after,
.elementor-field-group-besoin::after,
.elementor-field-group-solution::after,
.elementor-field-group-grandesetapescalendrier::after,
.elementor-field-group-impactstructure::after {
    content: "?";
    position: absolute;
    top: 30px;
    right: 20px;
    width: 18px;
    height: 18px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto;
}

.elementor-field-group-titreinnovation::after,
.elementor-field-group-nomassociation::after,
.elementor-field-group-numeroadherent::after {
    position: absolute;
    top: -5px;
    right: 20px;
}

/* --- Style commun pour les infobulles (::before) --- */
.elementor-field-group-titreinnovation::before,
.elementor-field-group-nomassociation::before,
.elementor-field-group-numeroadherent::before,
.elementor-field-group-besoin::before,
.elementor-field-group-solution::before,
.elementor-field-group-grandesetapescalendrier::before,
.elementor-field-group-impactstructure::before {
    position: absolute;
    background: #000;
    color: #fff;
    padding: 20px 10px;
    border-radius: 50px;
    font-size: 12px;
    white-space: pre-line;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: .2s ease;
    pointer-events: none;
    z-index: 1000;
}

/* --- Personnalisation par champ (top/right + content) --- */
.elementor-field-group-titreinnovation::before {
    top: -80px;
    right: -90px;
    content: "Donnez un nom clair et court à votre projet. \A Exemple : 'Vélo pour tous'";
}

.elementor-field-group-nomassociation::before {
    top: -80px;
    right: -30px;
    width: 200px;
    content: "Si vous n’êtes pas relié à une association mettez “/”";
}

.elementor-field-group-numeroadherent::before {
    top: -80px;
    right: -30px;
    content: "Le numéro d'adhérent doit commencer par une lettre suivie de 5 chiffres (ex. A12345).";
}

.elementor-field-group-besoin::before {
    top: -85px;
    right: -150px;
    width: 400px;
    content: "Expliquez le problème rencontré aujourd’hui par les bénéficiaires. \A \A Exemple : Les aidants manquent d’outils numériques simples pour suivre les rendez-vous médicaux.";
}

.elementor-field-group-solution::before {
    top: -105px;
    right: -150px;
    width: 400px;
    content: "Décrivez concrètement votre innovation et son fonctionnement. \A \A Exemple : L’association met en place des vélos adaptés (tricycles) pour permettre aux enfants en situation de handicap de participer aux ateliers vélo.";
}

.elementor-field-group-grandesetapescalendrier::before {
    top: -135px;
    right: 0px;
    width: 400px;
    content: "Indiquez les grandes étapes et les dates importantes de votre projet afin de mieux comprendre son déroulement dans le temps. \A \A Renseigner directement les étapes clés dans le formulaire \A OU \A Déposer un document complémentaire (PDF, planning, rétroplanning…) si vous avez déjà un calendrier détaillé.";
}

.elementor-field-group-impactstructure::before {
    top: -210px;
    /* right: <valeur à définir>;  <-- ligne d'origine cassée, désactivée pour ne pas invalider la règle */
    content: "Expliquez si votre projet peut modifier ou améliorer le fonctionnement général de votre structure. \A \A Cela peut concerner par exemple : \A \A l’organisation des équipes \A les méthodes de travail \A la création de nouveaux partenariats \A l’utilisation de nouveaux outils ou équipements \A l’accompagnement des bénéficiaires \A la mise en place de nouvelles activités";
}

/* --- Effet de survol commun --- */
.elementor-field-group-titreinnovation:hover::before,
.elementor-field-group-nomassociation:hover::before,
.elementor-field-group-numeroadherent:hover::before,
.elementor-field-group-besoin:hover::before,
.elementor-field-group-solution:hover::before,
.elementor-field-group-grandesetapescalendrier:hover::before,
.elementor-field-group-impactstructure:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================================
   5. CHAMPS UPLOAD (boutons rouges)
   ========================================================= */
.elementor-field-group-calendrierpdf,
.elementor-field-group-piecesjointessupplementaires {
    position: relative;
}

/* Les deux labels deviennent des boutons */
.elementor-field-group-calendrierpdf .elementor-field-label,
.elementor-field-group-piecesjointessupplementaires .elementor-field-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: #FF6464;
    color: #FFF !important;
    text-transform: none !important;
    border-radius: 999px;
    font-size: 18px !important;
    cursor: pointer;
    transition: .25s;
}

/* Icône */
.elementor-field-group-calendrierpdf .elementor-field-label::after,
.elementor-field-group-piecesjointessupplementaires .elementor-field-label::after {
    content: "";
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: url("/wp-content/uploads/2026/06/file.svg") center/contain no-repeat;
}

/* Hover */
.elementor-field-group-calendrierpdf .elementor-field-label:hover,
.elementor-field-group-piecesjointessupplementaires .elementor-field-label:hover {
    background: #f25555;
}

/* Les inputs restent invisibles mais cliquables */
#form-field-calendrierpdf,
#form-field-piecesjointessupplementaires {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

#form-field-calendrierpdf::-webkit-file-upload-button,
#form-field-piecesjointessupplementaires::-webkit-file-upload-button {
    visibility: hidden;
}

#form-field-calendrierpdf::file-selector-button,
#form-field-piecesjointessupplementaires::file-selector-button {
    visibility: hidden;
}

.elementor-field-type-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* label */
.elementor-field-type-upload .elementor-field-label {
    order: 1;
}

/* input */
.elementor-field-type-upload input[type="file"] {
    order: 2;
}

/* erreur */
.elementor-field-type-upload .elementor-field-error {
    order: 3;
    margin-top: 8px;
    color: #ff0000;
    display: block;
}


/* =========================================================
   7. MISE EN GRILLE DES ÉTAPES  (AJOUT)
   Ne s'active que sur desktop et quand l'étape est visible.
   ========================================================= */

/* ---------- ÉTAPE : PRÉSENTATION DU PROJET ----------
   Principe : "besoin" s'étale sur les 3 rangées des objectifs
   (court/moyen/long) pour que sa hauteur se réparte finement
   et n'écarte pas les objectifs. "solution" partage la rangée
   de "resultats". align-content: start tasse tout vers le haut
   pour coller les boutons aux champs.                            */
@media (min-width: 768px) {

  .e-form__step.elementor-field-group-presentationprojet:not(.elementor-hidden) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "besoin    court"
      "besoin    moyen"
      "besoin    long"
      "solution  resultats";
    column-gap: 40px;
    row-gap: 12px;
    align-items: start;     /* aucun champ ne s'étire en hauteur */
    align-content: start;   /* les rangées se tassent en haut */
  }

  /* Neutralise les largeurs 50% natives Elementor */
  .e-form__step.elementor-field-group-presentationprojet:not(.elementor-hidden)
    > .elementor-field-group {
    width: 100% !important;
    max-width: none;
    margin: 0;
  }

  /* Barre de boutons pleine largeur, collée aux champs */
  .e-form__step.elementor-field-group-presentationprojet:not(.elementor-hidden)
    > .e-form__buttons {
    grid-column: 1 / -1;
    margin-top: 8px !important;
  }

  /* Placement des champs */
  .elementor-field-group-besoin              { grid-area: besoin; }
  .elementor-field-group-objectifscourtterme { grid-area: court; }
  .elementor-field-group-objectifsmoyenterme { grid-area: moyen; }
  .elementor-field-group-objectifslongterme  { grid-area: long; }
  .elementor-field-group-solution            { grid-area: solution; }
  .elementor-field-group-resultatsattendus   { grid-area: resultats; }

  /* Besoin : hauteur CAPÉE en dur (neutralise le rows="7" du HTML),
     calé en haut, ne peut plus déborder sur "solution".            */
  .elementor-field-group-besoin { align-self: start; }
  .elementor-field-group-besoin textarea {
    height: 130px !important;
    min-height: 0 !important;
    resize: none;
  }
  .elementor-field-group-solution textarea {
    min-height: 140px;
    resize: none;
  }
  .elementor-field-group-resultatsattendus textarea {
    min-height: 140px;
    resize: none;
  }

  /* Label "OBJECTIFS" affiché une seule fois */
  .elementor-field-group-objectifsmoyenterme .elementor-field-label,
  .elementor-field-group-objectifslongterme  .elementor-field-label {
    display: none;
  }
}

/* ---------- ÉTAPE : RESSOURCES ----------
   Principe : "externes" (label sur 3 lignes) s'étale sur 2 rangées
   pour que Matériels / Financières restent à la même hauteur.
   Les 3 ressources (materiels, financieres, humaines) occupent
   3 rangées consécutives = espacement uniforme.                    */
@media (min-width: 768px) {

  .e-form__step.elementor-field-group-ressources:not(.elementor-hidden) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "externes  materiels"
      "externes  financieres"
      "sioui     humaines"
      "partau    freins";
    column-gap: 40px;
    row-gap: 14px;
    align-items: start;
    align-content: start;
  }

  /* Neutralise les largeurs 50% natives Elementor */
  .e-form__step.elementor-field-group-ressources:not(.elementor-hidden)
    > .elementor-field-group {
    width: 100% !important;
    max-width: none;
    margin: 0;
  }

  /* Barre de boutons pleine largeur, collée aux champs */
  .e-form__step.elementor-field-group-ressources:not(.elementor-hidden)
    > .e-form__buttons {
    grid-column: 1 / -1;
    margin-top: 8px !important;
  }

  /* Placement des champs */
  .elementor-field-group-ressourcesexternes      { grid-area: externes; }
  .elementor-field-group-ressourcesexternessioui { grid-area: sioui; }
  .elementor-field-group-partauprojet            { grid-area: partau; }
  .elementor-field-group-materiels               { grid-area: materiels; }
  .elementor-field-group-financieres             { grid-area: financieres; }
  .elementor-field-group-humaines                { grid-area: humaines; }
  .elementor-field-group-freins                  { grid-area: freins; }

  /* Freins : textarea confortable */
  .elementor-field-group-freins textarea {
    min-height: 150px;
    resize: none;
  }
}


/* =========================================================
   6. RESPONSIVE MOBILE
   (placé en dernier pour prendre la main sous 768px)
   ========================================================= */
@media (max-width: 768px) {

    .elementor-field-group-titreinnovation::before,
    .elementor-field-group-nomassociation::before,
    .elementor-field-group-numeroadherent::before,
    .elementor-field-group-besoin::before,
    .elementor-field-group-solution::before,
    .elementor-field-group-grandesetapescalendrier::before,
    .elementor-field-group-impactstructure::before {
        right: 0;
        left: 0;
        width: 100%;
    }

    .elementor-field-group-grandesetapescalendrier::after {
        top: 50px;
    }

    .elementor-field-group-titreinnovation:hover::before,
    .elementor-field-group-nomassociation:hover::before,
    .elementor-field-group-numeroadherent:hover::before,
    .elementor-field-group-besoin:hover::before,
    .elementor-field-group-solution:hover::before,
    .elementor-field-group-grandesetapescalendrier:hover::before,
    .elementor-field-group-impactstructure:hover::before {
        opacity: 0;
        visibility: hidden;
        transform: translateY(5px);
    }

    /* état ouvert au clic */
    .tooltip-open::before {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .e-form__step:nth-of-type(2) .e-form__buttons {
        margin-top: 0;
    }
}
/* Bouton "Exporter en PDF" en bas du récapitulatif */
#export-pdf-btn {
    display: block;
    margin: 32px auto 0;      /* centré, avec de l'espace au-dessus */
    padding: 14px 28px;
    background: #1C9EC6;       /* même bleu que tes boutons Modifier/Enregistrer */
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s;
}

#export-pdf-btn:hover {
    background: #384C67;
}
/* Le récap est masqué par défaut, affiché seulement à la dernière étape via JS */
#form-recap-wrapper {
    display: none;
}