/* ==========================================================
   FORMULAIRES DRUPAL WEBFORM
   Identité visuelle Prométhée Technologies & Ingénierie
   ========================================================== */


/* ==========================================================
   1. VARIABLES GRAPHIQUES
   ========================================================== */

.webform-submission-form {
  --pti-orange: #FFAA17;
  --pti-orange-fonce: #C47C00;
  --pti-orange-selection: #FFF6E5;
  --pti-orange-survol: #FFFBF3;

  --pti-texte: #222222;
  --pti-bordure: #D9E4E2;
  --pti-gris-fond: #F3F3F3;
  --pti-gris-desactive: #D5D5D5;
}


/* ==========================================================
   2. TYPOGRAPHIE DES LIBELLÉS
   ========================================================== */

/* Respecter la casse définie dans Webform */
.webform-submission-form label,
.webform-submission-form legend,
.webform-submission-form .option,
.webform-submission-form .form-item__label,
.webform-submission-form .webform-options-display-buttons label {
  text-transform: none !important;
}


/* ==========================================================
   3. CHAMPS OBLIGATOIRES
   ========================================================== */

/* Remplacer l'astérisque graphique du thème */
.form-required::after,
.js-form-required::after {
  content: " *" !important;
  display: inline !important;

  width: auto !important;
  height: auto !important;
  margin: 0 !important;

  background: none !important;

  color: #FFAA17 !important;
  font-weight: 700 !important;
  vertical-align: baseline !important;
}


/* ==========================================================
   4. CASES À COCHER ET BOUTONS RADIO NATIFS
   ========================================================== */

/* Couleur native des cases et boutons radio */
.webform-submission-form input[type="checkbox"],
.webform-submission-form input[type="radio"] {
  accent-color: var(--pti-orange);
}

/* Curseur interactif */
.webform-submission-form input[type="checkbox"]:not(:disabled),
.webform-submission-form input[type="radio"]:not(:disabled),
.webform-submission-form input[type="checkbox"]:not(:disabled) + label,
.webform-submission-form input[type="radio"]:not(:disabled) + label {
  cursor: pointer;
}


/* ==========================================================
   5. CASES À COCHER CLASSIQUES
   Hors affichage sous forme de cartes
   ========================================================== */

.webform-submission-form
.form-checkboxes:not(.webform-options-display-buttons)
input[type="checkbox"] + label.option {
  display: inline-block;

  padding: 5px 9px;

  border: 1px solid transparent;
  border-radius: 4px;

  color: var(--pti-texte);

  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}


/* Survol */
.webform-submission-form
.form-checkboxes:not(.webform-options-display-buttons)
input[type="checkbox"]:not(:disabled) + label.option:hover,

.webform-submission-form
.form-checkboxes:not(.webform-options-display-buttons)
input[type="checkbox"]:not(:disabled):hover + label.option {
  border-color: var(--pti-orange);
  background-color: var(--pti-orange-survol);
}


/* Case cochée */
.webform-submission-form
.form-checkboxes:not(.webform-options-display-buttons)
input[type="checkbox"]:checked + label.option {
  border-color: var(--pti-orange);
  background-color: var(--pti-orange-selection);
  box-shadow: inset 0 0 0 1px var(--pti-orange);

  color: var(--pti-texte);
  font-weight: 600;
}


/* Navigation au clavier */
.webform-submission-form
.form-checkboxes:not(.webform-options-display-buttons)
input[type="checkbox"]:focus-visible + label.option {
  outline: 2px solid var(--pti-orange);
  outline-offset: 2px;
}


/* Case désactivée */
.webform-submission-form
.form-checkboxes:not(.webform-options-display-buttons)
input[type="checkbox"]:disabled + label.option {
  cursor: not-allowed;
  opacity: 0.55;

  border-color: var(--pti-gris-desactive);
  background-color: var(--pti-gris-fond);
  box-shadow: none;
}


/* ==========================================================
   6. BOUTONS RADIO CLASSIQUES
   Hors affichage sous forme de cartes
   ========================================================== */

.webform-submission-form
.form-radios:not(.webform-options-display-buttons)
input[type="radio"] + label.option {
  display: inline-block;

  padding: 5px 9px;

  border: 1px solid transparent;
  border-radius: 4px;

  color: var(--pti-texte);

  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}


/* Survol */
.webform-submission-form
.form-radios:not(.webform-options-display-buttons)
input[type="radio"]:not(:disabled) + label.option:hover,

.webform-submission-form
.form-radios:not(.webform-options-display-buttons)
input[type="radio"]:not(:disabled):hover + label.option {
  border-color: var(--pti-orange);
  background-color: var(--pti-orange-survol);
}


/* Bouton radio sélectionné */
.webform-submission-form
.form-radios:not(.webform-options-display-buttons)
input[type="radio"]:checked + label.option {
  border-color: var(--pti-orange);
  background-color: var(--pti-orange-selection);
  box-shadow: inset 0 0 0 1px var(--pti-orange);

  color: var(--pti-texte);
  font-weight: 600;
}


/* Navigation au clavier */
.webform-submission-form
.form-radios:not(.webform-options-display-buttons)
input[type="radio"]:focus-visible + label.option {
  outline: 2px solid var(--pti-orange);
  outline-offset: 2px;
}


/* Bouton radio désactivé */
.webform-submission-form
.form-radios:not(.webform-options-display-buttons)
input[type="radio"]:disabled + label.option {
  cursor: not-allowed;
  opacity: 0.55;

  border-color: var(--pti-gris-desactive);
  background-color: var(--pti-gris-fond);
  box-shadow: none;
}


/* ==========================================================
   7. CHOIX AFFICHÉS SOUS FORME DE CARTES
   Cases à cocher ou boutons radio
   ========================================================== */

/*
   Ce bloc est volontairement placé après les styles classiques.
   Il dispose ainsi de la priorité dans la cascade CSS.
*/


/* Conteneur de chaque option */
.webform-submission-form
.webform-options-display-buttons
.form-item {
  box-sizing: border-box;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Aspect normal de la carte */
.webform-submission-form
.webform-options-display-buttons
input[type="checkbox"] + label,

.webform-submission-form
.webform-options-display-buttons
input[type="radio"] + label {
  display: flex !important;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 100%;
  min-height: 78px;

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

  border: 1px solid var(--pti-bordure) !important;
  border-radius: 5px;

  background-color: #FFFFFF !important;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04) !important;

  color: var(--pti-texte) !important;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;

  cursor: pointer;

  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}


/* Survol d'une carte */
.webform-submission-form
.webform-options-display-buttons
input[type="checkbox"]:not(:disabled) + label:hover,

.webform-submission-form
.webform-options-display-buttons
input[type="radio"]:not(:disabled) + label:hover,

.webform-submission-form
.webform-options-display-buttons
input[type="checkbox"]:not(:disabled):hover + label,

.webform-submission-form
.webform-options-display-buttons
input[type="radio"]:not(:disabled):hover + label {
  border-color: var(--pti-orange) !important;
  background-color: var(--pti-orange-survol) !important;

  box-shadow:
    inset 0 0 0 1px var(--pti-orange),
    0 4px 12px rgba(0, 0, 0, 0.06) !important;
}


/* Carte sélectionnée */
.webform-submission-form
.webform-options-display-buttons
input[type="checkbox"]:checked + label,

.webform-submission-form
.webform-options-display-buttons
input[type="radio"]:checked + label {
  border-color: var(--pti-orange) !important;
  background-color: var(--pti-orange-selection) !important;

  box-shadow:
    inset 0 0 0 1px var(--pti-orange),
    0 4px 12px rgba(255, 170, 23, 0.10) !important;

  color: var(--pti-texte) !important;
  font-weight: 700;
}


/* Survol d'une carte déjà sélectionnée */
.webform-submission-form
.webform-options-display-buttons
input[type="checkbox"]:checked + label:hover,

.webform-submission-form
.webform-options-display-buttons
input[type="radio"]:checked + label:hover {
  border-color: var(--pti-orange) !important;
  background-color: #FFF1D6 !important;
}


/* Navigation au clavier */
.webform-submission-form
.webform-options-display-buttons
input[type="checkbox"]:focus-visible + label,

.webform-submission-form
.webform-options-display-buttons
input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--pti-orange) !important;
  outline-offset: 3px;
}


/* Carte désactivée */
.webform-submission-form
.webform-options-display-buttons
input[type="checkbox"]:disabled + label,

.webform-submission-form
.webform-options-display-buttons
input[type="radio"]:disabled + label {
  cursor: not-allowed;
  opacity: 0.55;

  border-color: var(--pti-gris-desactive) !important;
  background-color: var(--pti-gris-fond) !important;
  box-shadow: none !important;
}


/* ==========================================================
   8. CASES ISOLÉES
   Consentement, confirmation ou acceptation
   ========================================================== */

/*
   Les cases isolées restent volontairement sobres.
   Elles ne prennent pas l'apparence d'une carte.
*/

.webform-submission-form
input[type="checkbox"].form-checkbox + label.option {
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.webform-submission-form
input[type="checkbox"].form-checkbox:not(:disabled) + label.option:hover,

.webform-submission-form
input[type="checkbox"].form-checkbox:not(:disabled):hover + label.option {
  color: var(--pti-orange-fonce);
}

.webform-submission-form
input[type="checkbox"].form-checkbox:checked + label.option {
  color: var(--pti-texte);
  font-weight: 600;
}

.webform-submission-form
input[type="checkbox"].form-checkbox:focus-visible {
  outline: 2px solid var(--pti-orange);
  outline-offset: 3px;
}


/* ==========================================================
   9. ÉTATS DÉSACTIVÉS GÉNÉRAUX
   ========================================================== */

.webform-submission-form input[type="checkbox"]:disabled,
.webform-submission-form input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.webform-submission-form input[type="checkbox"]:disabled + label,
.webform-submission-form input[type="radio"]:disabled + label {
  cursor: not-allowed;
}


/* ==========================================================
   10. ADAPTATION AUX PETITS ÉCRANS
   ========================================================== */

@media (max-width: 767px) {

  .webform-submission-form
  .webform-options-display-buttons
  input[type="checkbox"] + label,

  .webform-submission-form
  .webform-options-display-buttons
  input[type="radio"] + label {
    min-height: 62px;
    padding: 13px 15px !important;
  }
}


/* ==========================================================
   11. RÉDUCTION DES ANIMATIONS
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .webform-submission-form
  .form-checkboxes
  input[type="checkbox"] + label.option,

  .webform-submission-form
  .form-radios
  input[type="radio"] + label.option,

  .webform-submission-form
  .webform-options-display-buttons
  input + label {
    transition: none;
  }
}

/* ==========================================================
   12. CONSENTEMENT COMPACT
   Correction ciblée de la case de consentement
   ========================================================== */

.webform-submission-form .pti-consentement {
  margin: 24px 0 12px !important;
}

.webform-submission-form .pti-consentement .form-item,
.webform-submission-form .pti-consentement.form-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.webform-submission-form
.pti-consentement
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;

  display: inline-block !important;
  position: static !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;

  flex: 0 0 18px !important;

  margin: 3px 0 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  transform: none !important;

  border: initial !important;
  border-radius: 2px !important;
  background: initial !important;
  box-shadow: none !important;

  accent-color: var(--pti-orange);
  cursor: pointer;
}

.webform-submission-form
.pti-consentement
label,
.webform-submission-form
.pti-consentement
label.option {
  display: inline-block !important;

  width: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  text-transform: none !important;

  cursor: pointer;
}

.webform-submission-form
.pti-consentement
label::before,
.webform-submission-form
.pti-consentement
label::after {
  content: none !important;
  display: none !important;
}
/* ==========================================================
   14. CHAMP AVEC LIBELLÉ AU-DESSUS
   Correction de la disposition horizontale du thème
   ========================================================== */

.webform-submission-form .pti-champ-vertical {
  display: block !important;

  grid-template-columns: none !important;

  width: 100% !important;
  max-width: none !important;
}

/* Libellé du champ */
.webform-submission-form
.pti-champ-vertical > label,

.webform-submission-form
.pti-champ-vertical > .form-item__label {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 0 8px 0 !important;
  padding: 0 !important;

  text-align: left !important;
}

/* Enveloppe éventuelle de la liste */
.webform-submission-form
.pti-champ-vertical .select-wrapper {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}

/* Liste déroulante */
.webform-submission-form
.pti-champ-vertical select,
.webform-submission-form
.pti-champ-vertical .form-select {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}