/* ==========================================================
   PilotCSE — Forminator (MODULE 147 + 2426) — CSS PROPRE (NETTOYÉ)
   Version CSS : 2.4.3 (ODJ 2426 + Formations + Form 2784) — 2026-01-28
   Objectifs :
   - Titres questions (classe : pcse-question)
   - Descriptions / aides uniformisées + 💡 automatique
   - Checkboxes : ligne cliquable style "carte" + état coché très visible
     (couleur uniquement sur la zone à cliquer)
   - Pagination : étapes visibles en haut + barre de boutons sticky en bas
   - Modal <dialog> : couleurs/espacements + bouton Fermer bien visible
   - Sous-titre de page (pcse-page-subtitle)
   - Encadrement des sections (pcse-section)
   ========================================================== */


/* ==========================================================
   0) VARIABLES + AIR GLOBAL
   ========================================================== */

:is(#forminator-module-147, #forminator-module-2426).forminator-ui{
  /* Couleurs marque */
  --pcse-blue:   var(--bleu-cse, #0073aa);
  --pcse-orange: #F8A858;

  /* Descriptions / aides */
  --pcse-desc-font: 0.95rem;
  --pcse-desc-line: 1.35;
  --pcse-desc-opacity: 0.92;

  --pcse-desc-bg: #f6f7f9;
  --pcse-desc-border: rgba(0,0,0,.18);

  --pcse-desc-radius: 12px;
  --pcse-desc-pad: 10px 12px 10px 36px; /* place pour 💡 */
  --pcse-desc-icon-left: 12px;
  --pcse-desc-icon-top: 10px;

  /* Checkboxes (ligne cliquable) */
  --pcse-cb-radius: 14px;
  --pcse-cb-pad-v: 12px;
  --pcse-cb-pad-h: 14px;
  --pcse-cb-gap: 16px;

  /* Extension du fond "coché" vers la gauche (pour couvrir la zone checkbox) */
  --pcse-cb-bleed-left: 56px;
}

/* Air entre les champs (base) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field{
  margin-bottom: 18px;
}


/* ==========================================================
   1) TITRES DE QUESTIONS (classe à mettre sur le champ : pcse-question)
   ========================================================== */

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-question .forminator-label{
  display: block !important;
  font-weight: 800 !important;
  font-size: 1.08rem !important;
  line-height: 1.25 !important;

  padding: 6px 10px !important;
  border-left: 4px solid var(--pcse-blue) !important;
  background: #f6f7f9 !important;
  border-radius: 10px !important;

  margin: 0 0 8px 0 !important;
}

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-question .forminator-label .forminator-required{
  font-weight: 900 !important;
}


/* ==========================================================
   2) DESCRIPTIONS / HINTS + 💡 AUTO (tous champs)
   IMPORTANT : si vous avez déjà mis "💡" dans le texte,
               supprimez-le pour éviter le doublon.
   ========================================================== */

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-description,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field-description,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-hint{
  position: relative !important;
  display: block !important;

  margin: 8px 0 14px 0 !important;
  padding: var(--pcse-desc-pad) !important;

  font-size: var(--pcse-desc-font) !important;
  line-height: var(--pcse-desc-line) !important;
  color: rgba(0,0,0,.78) !important;
  opacity: var(--pcse-desc-opacity) !important;
  font-style: italic !important;

  background: var(--pcse-desc-bg) !important;
  border: 1px dashed var(--pcse-desc-border) !important;
  border-radius: var(--pcse-desc-radius) !important;

  box-sizing: border-box !important;
}

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-description::before,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field-description::before,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-hint::before{
  content: "💡";
  position: absolute;
  left: var(--pcse-desc-icon-left);
  top: var(--pcse-desc-icon-top);
  line-height: 1;
  font-style: normal;
  opacity: .90;
  transform: translateY(1px);
}

/* Évite les marges internes ajoutées par l’éditeur */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-description p,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field-description p,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-hint p{
  margin: 0 !important;
}

/* Liens dans les aides */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-description a,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field-description a,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-hint a{
  color: var(--pcse-blue) !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}


/* ==========================================================
   3) RADIO / CHECKBOX : libellés (texte) — neutralisation légère
   (on évite les resets agressifs qui cassent vos styles)
   ========================================================== */

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-radio-label,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-checkbox-label{
  font-style: normal !important;
  opacity: 1 !important;
}


/* ==========================================================
   4) CHECKBOXES : "carte" sur la zone cliquable uniquement
   IMPORTANT :
   - On style label.forminator-checkbox (la ligne à cliquer)
   - On n’ajoute PAS de fond sur le conteneur .forminator-field
   ========================================================== */


/* Ligne cliquable = label.forminator-checkbox (selon votre inspecteur) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui label.forminator-checkbox{
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--pcse-cb-gap) !important;

  width: 100% !important;
  padding: var(--pcse-cb-pad-v) var(--pcse-cb-pad-h) !important;

  border-radius: var(--pcse-cb-radius) !important;

  /* Fond très léger "logo" (reste sobre) */
  background: linear-gradient(
    90deg,
    rgba(40, 88, 160, 0.05),
    rgba(248, 168, 88, 0.025)
  ) !important;

  border: 1px solid rgba(40,88,160,.14) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) !important;

  cursor: pointer !important;
}

/* Liseré discret à gauche (branding) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui label.forminator-checkbox::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: rgba(248,168,88,.75) !important;
  border-radius: var(--pcse-cb-radius) 0 0 var(--pcse-cb-radius) !important;
}

/* Hover */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui label.forminator-checkbox:hover{
  background: rgba(40, 88, 160, 0.07) !important;
  border-color: rgba(40,88,160,.22) !important;
}

/* Focus clavier : visible (sur la ligne) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui label.forminator-checkbox:focus-within{
  box-shadow: 0 0 0 3px rgba(0,115,170,.16) !important;
}

/* Checkbox plus grande + couleur */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui label.forminator-checkbox input[type="checkbox"]{
  transform: scale(1.35) !important;
  transform-origin: top left;
  margin-top: 3px !important;

  accent-color: var(--pcse-blue) !important;
  flex: 0 0 auto;

  position: relative !important;
  z-index: 3 !important;
}

/* Si thème ajoute un "box" séparé */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui label.forminator-checkbox .forminator-checkbox-box{
  position: relative !important;
  z-index: 3 !important;
}

/* Libellé plus lisible */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui label.forminator-checkbox .forminator-checkbox-label{
  position: relative !important;
  z-index: 2 !important;

  display: block !important;
  flex: 1 !important;

  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #222 !important;
  padding-top: 1px !important;
}

/* État coché : texte plus fort */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui
label.forminator-checkbox input[type="checkbox"]:checked ~ .forminator-checkbox-label{
  font-weight: 900 !important;
}

/* État coché : fond renforcé, toujours limité à la ligne cliquable */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui
label.forminator-checkbox input[type="checkbox"]:checked ~ .forminator-checkbox-label::before{
  content: "" !important;
  position: absolute !important;

  left: calc(-1 * var(--pcse-cb-bleed-left)) !important;
  right: calc(-1 * var(--pcse-cb-pad-h)) !important;
  top: calc(-1 * var(--pcse-cb-pad-v)) !important;
  bottom: calc(-1 * var(--pcse-cb-pad-v)) !important;

  background: rgba(0,115,170,.10) !important;              /* bleu léger */
  border-left: 8px solid var(--pcse-blue) !important;
  border-radius: var(--pcse-cb-radius) !important;

  z-index: -1 !important;
  pointer-events: none !important;
}

/* Focus visible côté clavier (sur la zone coché) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui
label.forminator-checkbox input[type="checkbox"]:focus-visible ~ .forminator-checkbox-label::before{
  outline: 2px solid rgba(0,0,0,.18) !important;
  outline-offset: 2px !important;
}


/* ==========================================================
   5) BLOC INTRO (si vous l’utilisez)
   ========================================================== */

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-odj-intro{
  margin: 16px 0 18px !important;
  padding: 14px 16px !important;
  background: #f6f7f9 !important;
  border: 1px dashed rgba(0,0,0,.18) !important;
  border-radius: 12px !important;
}

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-odj-intro p{
  margin: 0 0 10px 0 !important;
}

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-odj-intro p:last-child{
  margin-bottom: 0 !important;
}


/* ==========================================================
   6) PAGINATION / ÉTAPES
   - Étapes visibles en haut
   - Sticky uniquement sur la barre de boutons (footer)
   ========================================================== */

/* Étapes (selon variantes Forminator) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-steps,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-progress{
  position: relative !important;
  z-index: 5 !important;
  margin: 10px 0 22px !important;
  opacity: 1 !important;
}

/* On NE rend PAS sticky le conteneur global */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination{
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border-top: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

/* Sticky UNIQUEMENT sur la barre de boutons */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-footer,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination .forminator-pagination-footer{
  position: sticky !important;
  bottom: 12px !important;
  z-index: 50 !important;

  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(2px);
  border-top: 1px solid rgba(0,0,0,.10) !important;

  padding: 10px 0 !important;
  margin-top: 18px !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Lien brouillon */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-save-draft,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-draft-link{
  margin: 0 !important;
  display: inline-block !important;
}

/* Boutons Next/Prev : plus larges */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-footer button,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-footer input[type="button"],
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-footer input[type="submit"],
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-footer a[role="button"]{
  min-width: 240px !important;
  font-weight: 900 !important;
}

/* Flèche visuelle sur les boutons */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-footer button::after,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-pagination-footer a[role="button"]::after{
  content: "  →";
}

/* Évite que le contenu soit masqué derrière la barre sticky */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui form{
  padding-bottom: 80px !important;
}

/* Réduit l’espace juste avant la pagination */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field:last-of-type{
  margin-bottom: 8px !important;
}


/* ==========================================================
   7) MODAL <dialog> (global — utilisé par le module)
   ========================================================== */

dialog.pcse-modal{
  width: min(820px, calc(100vw - 28px));
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

dialog.pcse-modal::backdrop{
  background: rgba(0,0,0,.45);
}

/* Header */
.pcse-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;
  background: #f6f7f9;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.pcse-modal__header h3{
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--bleu-cse, #0073aa);
}

/* Close (X) */
.pcse-modal__close{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #111;

  width: 38px;
  height: 38px;
  border-radius: 12px;

  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.pcse-modal__close:hover{
  border-color: rgba(0,0,0,.22);
}

/* Body */
.pcse-modal__body{
  padding: 16px 18px 10px;
  max-height: min(70vh, 520px);
  overflow: auto;
}

.pcse-modal__body p{
  margin: 0 0 10px 0;
  line-height: 1.45;
  color: rgba(0,0,0,.85);
}

.pcse-modal__body ul{
  margin: 10px 0 0;
  padding-left: 18px;
}

.pcse-modal__body li{
  margin: 7px 0;
  line-height: 1.4;
}

/* Footer */
.pcse-modal__footer{
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  padding: 12px 18px 16px;
  background: #f6f7f9;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Bouton Fermer (visible) */
.pcse-btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;

  padding: 10px 16px;
  font-weight: 900;

  background: var(--bleu-cse, #0073aa);
  color: #fff;
  cursor: pointer;
}

.pcse-btn:hover{
  filter: brightness(0.95);
}

/* Focus clavier */
.pcse-btn:focus,
.pcse-modal__close:focus{
  outline: 3px solid rgba(0,115,170,.25);
  outline-offset: 2px;
}


/* ==========================================================
   8) SOUS-TITRE DE PAGE (HTML par page) — pcse-page-subtitle
   ========================================================== */

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-page-subtitle{
  display: inline-flex;
  align-items: center;

  margin: 14px 0 10px !important;
  padding: 8px 12px !important;

  font-weight: 900 !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;

  color: #fff !important;
  background: var(--pcse-blue) !important;

  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
}

/* Variante pleine largeur */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-page-subtitle.is-full{
  display: block;
  width: 100%;
  border-radius: 12px;
}


/* ==========================================================
   9) ENCADREMENT DES SECTIONS (classe section : pcse-section)
   ========================================================== */

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-section{
  margin: 14px 0 18px !important;
  padding: 16px 18px !important;

  background: #f6f7f9 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-left: 6px solid var(--pcse-blue) !important;
  border-radius: 14px !important;

  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}

/* Titre H2 : filet discret */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-section h2{
  margin: 0 0 10px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
}

/* Description H3 : plus “intro” */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-section h3{
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: rgba(0,0,0,.80) !important;
  font-size: 1.25rem !important;
}

/* Enlève le filet (HR) dans la section */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-section hr{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* ========================================================== */

/* ==========================================================
   10) ENCADREMENT PAR QUESTION (lecture facilitée)
   À mettre sur le champ Forminator (Avancé > CSS classes) : pcse-qcard
   Variante plus marquée : pcse-qcard pcse-qcard-strong
   ========================================================== */

/* Carte "question" (cadre plus visible) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field.pcse-qcard{
  margin: 18px 0 22px !important;
  padding: 16px 18px 16px !important;

  background: #fff !important;

  /* Plus visible que 2px rgba(0,0,0,.12) */
  border: 2px solid rgba(0,0,0,.18) !important;
  border-left: 8px solid var(--pcse-blue) !important;

  border-radius: 18px !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.05) !important;

  box-sizing: border-box !important;
}

/* Hover : légèrement renforcé */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field.pcse-qcard:hover{
  border-color: rgba(0,0,0,.24) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.06) !important;
}

/* Variante "strong" : encore plus de contraste (si vous en avez besoin sur certains blocs) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field.pcse-qcard.pcse-qcard-strong{
  border-color: rgba(0,0,0,.28) !important;
  border-left-width: 10px !important;
}

/* Respiration interne (titre/description) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field.pcse-qcard .forminator-label{
  margin-top: 0 !important;
}

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field.pcse-qcard
.forminator-field-description,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field.pcse-qcard
.forminator-description{
  margin: 10px 0 14px 0 !important;
}

/* La ligne cliquable : un peu d’air dans la carte */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .forminator-field.pcse-qcard label.forminator-checkbox{
  margin-top: 8px !important;
}
/* ==========================================================
   PATCH “PCSE-QCARD” — robuste même si Forminator pose la classe
   sur un wrapper différent de .forminator-field.
   À laisser TOUT EN BAS du fichier.
   ========================================================== */

/*
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-qcard{
  outline: 3px dashed red !important;
}
*/

/* Encadrement : on cible directement .pcse-qcard (sans supposer le wrapper) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-qcard{
  display: block !important;

  margin: 18px 0 22px !important;
  padding: 16px 18px 16px !important;

  background: #fff !important;

  /* Bordure plus visible */
  border: 2px solid rgba(0,0,0,.24) !important;
  border-left: 6px solid var(--pcse-blue) !important;

  border-radius: 18px !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.06) !important;

  box-sizing: border-box !important;
}

/* Hover : un cran au-dessus */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-qcard:hover{
  border-color: rgba(0,0,0,.30) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.07) !important;
}

/* On évite que le label checkbox "colle" au bord dans une qcard */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-qcard label.forminator-checkbox{
  margin-top: 8px !important;
}
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-intro{
  background: #f6f7f9 !important;                 /* fond plus “info” */
  border: 1px dashed rgba(0,0,0,.18) !important;  /* rappel de vos blocs 💡 */
  border-left: 6px solid var(--pcse-blue) !important;
  box-shadow: none !important;                    /* évite effet “carte action” */
}
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-qcard{
  box-shadow: 0 2px 0 rgba(0,0,0,.06) !important;
}
/* ==========================================================
   Intro vs Questions — différenciation visuelle nette
   - Intro : pcse-intro (callout info)
   - Questions : pcse-qcard (cartes action)
   ========================================================== */

/*
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-intro{
  outline: 3px dashed red !important;
}
*/

/* INTRO = callout info (accent en HAUT, pas à gauche) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-intro{
  background: #f6f7f9 !important;                 /* teinte info */
  border: 1px dashed rgba(0,0,0,.22) !important;  /* pointillé, différent des cartes */
  border-top: 5px solid var(--pcse-blue) !important;
  border-left: 0 !important;                      /* on casse la ressemblance */
  box-shadow: none !important;                    /* pas une “carte action” */
  border-radius: 16px !important;
}

/* Légère mise en forme du titre dans l’intro */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-intro h2,
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-intro h3{
  margin-top: 0 !important;
}

/* QUESTIONS = cartes action (accent à GAUCHE conservé) */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-qcard{
  border-left: 6px solid var(--pcse-blue) !important; /* action */
  border-top: 1px solid rgba(0,0,0,.24) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.06) !important;
}
/* ==========================================================
   Intro (pcse-intro) : différenciation forte mais sobre
   Couleur marque : #F8A858 (orange logo)
   ========================================================== */

:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-intro{
  /* Fond orange très léger */
  background: rgba(248, 168, 88, 0.12) !important;

  /* Bordure plus chaude + bandeau bleu conservé */
  border: 1px solid rgba(248, 168, 88, 0.35) !important;
  border-top: 6px solid var(--pcse-blue) !important;

  /* On casse la ressemblance avec les cartes questions */
  border-left: 0 !important;

  /* Lisibilité */
  box-shadow: none !important;
}

/* Option : le texte de l’intro un poil plus foncé */
:is(#forminator-module-147, #forminator-module-2426).forminator-ui .pcse-intro p{
  color: rgba(0,0,0,.85) !important;
}

/* Cache le champ Token ODJ (textarea-3) */
:is(#forminator-module-147, #forminator-module-2426) .pcse-odj-token-input {
  display: none !important;
}

/* =========================================
   PilotCSE — Merci ODJ : mise en page
   ========================================= */

/* Carte de la zone actions (groupe pcse-actions) */
.pcse-actions{
  margin-top: 18px;
  padding: 18px 18px 14px;
  background: #f6f7f9;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
}

/* Boutons : alignement + respiration */
.pcse-actions .wp-block-buttons{
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Boutons : taille homogène */
.pcse-actions .wp-block-button__link{
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
}

/* Mobile : boutons en colonne pleine largeur */
@media (max-width: 640px){
  .pcse-actions .wp-block-buttons{
    flex-direction: column;
    align-items: stretch;
  }
  .pcse-actions .wp-block-button,
  .pcse-actions .wp-block-button__link{
    width: 100%;
    text-align: center;
  }
}

/* Bandeaux (info / ok / err) */
.pcse-notice{
  padding: 12px 14px;
  margin: 12px 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  font-size: 15px;
}

.pcse-notice--info{
  background: #f4f9ff;
  border-color: #d7e6f6;
}

.pcse-notice--ok{
  background: #f3fbf3;
  border-color: #cfe6cf;
}

.pcse-notice--err{
  background: #fff6f6;
  border-color: #f2c6c6;
}
/* =========================================================
   PilotCSE — Notification succès (envoi aperçu e-mail)
   Objectif : beaucoup plus visible + "flash" + sticky
   ========================================================= */

#pcse-odj-notice.pcse-notice{
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin: 14px 0 18px !important;
  padding: 14px 16px !important;

  border-radius: 12px;
  border: 2px solid rgba(22, 163, 74, 0.35);
  border-left: 10px solid #16a34a;

  background: #ecfdf5;
  color: #064e3b;

  font-size: 16px;
  line-height: 1.35;

  /* Très utile si l’utilisateur scroll : la notif reste visible */
  position: sticky;
  top: 14px;
  z-index: 50;

  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

#pcse-odj-notice .pcse-notice__icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: #16a34a;
  color: #fff;
  font-weight: 800;
  flex: 0 0 28px;
  margin-top: 1px;
}

#pcse-odj-notice .pcse-notice__text strong{
  font-weight: 800;
}

/* Flash visuel au chargement */
#pcse-odj-notice.pcse-flash{
  animation: pcseNoticePulse 1.2s ease-in-out 2;
}

@keyframes pcseNoticePulse{
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45), 0 10px 22px rgba(0,0,0,.08); }
  70%  { box-shadow: 0 0 0 14px rgba(22,163,74,0), 0 10px 22px rgba(0,0,0,.08); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0), 0 10px 22px rgba(0,0,0,.08); }
}

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
  #pcse-odj-notice.pcse-flash{ animation: none; }
}

/* =========================================================
   Toast flottant (visible même si le message est hors écran)
   ========================================================= */

#pcse-odj-toast.pcse-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;

  max-width: min(820px, calc(100vw - 24px));
  width: auto;

  transition: transform .25s ease, opacity .25s ease;
  z-index: 9999;
}

#pcse-odj-toast.pcse-toast--show{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
/* =========================================================
   PilotCSE — Bouton "Envoyer l’aperçu" (Freemium)
   Corrige :
   - bouton qui ressemble à un simple texte
   - contraste illisible au survol
   ========================================================= */

/* Layout du mini-formulaire */
.pcse-odj-freemium-form{
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

/* Champ e-mail : hauteur cohérente avec le bouton */
.pcse-odj-freemium-form input[type="email"]{
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
}

/* Le bouton (état normal) : vrai bouton, visible */
.pcse-odj-freemium-form button[type="submit"],
.pcse-odj-freemium-form .wp-element-button{
  appearance: none;
  -webkit-appearance: none;

  min-height: 44px;
  padding: 10px 16px;

  border-radius: 10px;
  border: 1px solid #0073aa !important;

  background: #0073aa !important;
  color: #ffffff !important;

  font-weight: 700;
  line-height: 1;
  cursor: pointer;

  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

/* Hover / focus : fond + texte restent lisibles */
.pcse-odj-freemium-form button[type="submit"]:hover,
.pcse-odj-freemium-form .wp-element-button:hover{
  background: #005f8d !important;
  border-color: #005f8d !important;
  color: #ffffff !important;
}

/* Focus clavier (accessibilité) */
.pcse-odj-freemium-form button[type="submit"]:focus-visible,
.pcse-odj-freemium-form .wp-element-button:focus-visible{
  outline: 3px solid rgba(0,115,170,.35);
  outline-offset: 2px;
}

/* Mobile : le bouton passe sous le champ si besoin */
@media (max-width: 600px){
  .pcse-odj-freemium-form input[type="email"],
  .pcse-odj-freemium-form button[type="submit"],
  .pcse-odj-freemium-form .wp-element-button{
    width: 100%;
  }
}