/* =============================================================
   CEN-CENELEC — Umbraco Forms 8.x Theme
   WCAG AA Compliant
   Contraste minimum : 4.5:1 pour le texte normal, 3:1 pour les UI
   ============================================================= */

/* --- Variables ---------------------------------------------- */
:root {
  --cen-blue:        #0055a4;   /* Bleu institutionnel principal */
  --cen-blue-dark:   #003d7a;   /* Hover / focus ring */
  --cen-blue-light:  #e8f0fa;   /* Fond de champ au focus */
  --cen-teal:        #007a99;   /* Accent secondaire */
  --cen-red:         #c0392b;   /* Erreur — 5.1:1 sur blanc */
  --cen-red-light:   #fdf2f0;
  --cen-green:       #1a7a3c;   /* Succès — 5.0:1 sur blanc */
  --cen-green-light: #eef7f1;

  --text-primary:    #1a1a1a;   /* 16.5:1 sur blanc */
  --text-secondary:  #4a4a4a;   /* 9.7:1 sur blanc */
  --text-muted:      #595959;   /* 7.0:1 sur blanc — min AA pour petit texte */
  --text-on-blue:    #ffffff;

  --border-default:  #767676;   /* 4.5:1 sur blanc — min AA pour UI */
  --border-focus:    #0055a4;
  --border-error:    #c0392b;
  --border-success:  #1a7a3c;

  --bg-page:         #ffffff;
  --bg-fieldset:     #f7f9fc;

  --radius:          4px;
  --radius-lg:       6px;
  --transition:      160ms ease;
  --focus-shadow:    0 0 0 3px rgba(0, 85, 164, 0.35);
  --font-stack:      'Source Sans Pro', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* --- Conteneur principal ------------------------------------ */
.umbraco-forms-form {
  font-family:    var(--font-stack);
  font-size:      16px;
  line-height:    1.6;
  color:          var(--text-primary);
  background:     var(--bg-page);
}

/* --- Titre du formulaire ------------------------------------ */
.umbraco-forms-form > h2,
.umbraco-forms-form .umbraco-forms-title {
  font-size:      1.5em;
  font-weight:    700;
  color:          var(--cen-blue);
  margin:         0 0 0.25em;
  padding-bottom: 0.5em;
  border-bottom:  3px solid var(--cen-blue);
  letter-spacing: -0.01em;
}

/* Sous-titre / description */
.umbraco-forms-form > p,
.umbraco-forms-form .umbraco-forms-caption {
  color:          var(--text-secondary);
  margin:         0.25em 0 1.5em;
  font-size:      0.9375em;
}

/* --- Pages du formulaire ------------------------------------ */
.umbraco-forms-page {
  margin: 0;
}

/* --- Fieldsets --------------------------------------------- */
.umbraco-forms-fieldset {
  border:         1px solid #d0d9e8;
  border-radius:  var(--radius-lg);
  background:     var(--bg-fieldset);
  padding:        1.5em 1.75em;
  margin:         0 0 1.5em;
}

.umbraco-forms-fieldset legend,
.umbraco-forms-fieldset > .umbraco-forms-field-caption {
  font-size:      0.8125em;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--cen-blue);
  padding:        0 0.5em;
}

/* Légende inline (flottante hors du fieldset) */
.umbraco-forms-fieldset legend {
  margin-left:    -0.5em;
}

/* --- Conteneur de champ ------------------------------------ */
.umbraco-forms-container {
  display:        flex;
  flex-direction: column;
  gap:            1.25em;
}

.umbraco-forms-field {
  display:        flex;
  flex-direction: column;
  gap:            0.3125em;
}

/* --- Labels ------------------------------------------------ */
.umbraco-forms-label,
.umbraco-forms-field label {
  display:        block;
  font-size:      0.875em;
  font-weight:    600;
  color:          var(--text-primary);
  line-height:    1.4;
}

/* Indicateur de champ obligatoire */
.umbraco-forms-indicator {
  color:          var(--cen-red);
  font-weight:    700;
  margin-left:    0.2em;
  aria-hidden:    true; /* géré via aria-required sur l'input */
}

/* --- Champs de base ---------------------------------------- */
.umbraco-forms-field input[type="text"],
.umbraco-forms-field input[type="email"],
.umbraco-forms-field input[type="tel"],
.umbraco-forms-field input[type="url"],
.umbraco-forms-field input[type="number"],
.umbraco-forms-field input[type="date"],
.umbraco-forms-field input[type="search"],
.umbraco-forms-field input[type="password"],
.umbraco-forms-field select,
.umbraco-forms-field textarea {
  width:            100%;
  box-sizing:       border-box;
  padding:          0.5625em 0.75em;
  font-family:      var(--font-stack);
  font-size:        1em;
  color:            var(--text-primary);
  background:       #ffffff;
  border:           1.5px solid var(--border-default);
  border-radius:    var(--radius);
  transition:       border-color var(--transition),
                    box-shadow   var(--transition),
                    background   var(--transition);
  appearance:       none;
  -webkit-appearance: none;
}

.umbraco-forms-field input:hover,
.umbraco-forms-field select:hover,
.umbraco-forms-field textarea:hover {
  border-color: var(--cen-blue);
}

.umbraco-forms-field input:focus,
.umbraco-forms-field select:focus,
.umbraco-forms-field textarea:focus {
  outline:      none;
  border-color: var(--border-focus);
  background-color:   var(--cen-blue-light);
  box-shadow:   var(--focus-shadow);
}

/* Placeholder — ratio 4.7:1 sur blanc */
.umbraco-forms-field input::placeholder,
.umbraco-forms-field textarea::placeholder {
  color:   var(--text-muted);
  opacity: 1;
}

/* --- Textarea ---------------------------------------------- */
.umbraco-forms-field textarea {
  resize:     vertical;
  min-height: 7em;
  line-height: 1.55;
}

/* --- Select ------------------------------------------------ */
.umbraco-forms-field select {
  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='%230055a4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.75em center;
  background-size:     1em;
  padding-right:       2.25em;
  cursor:              pointer;
}

/* --- Checkboxes & Radio ------------------------------------ */
.umbraco-forms-field .checkboxlist,
.umbraco-forms-field .radiobuttonlist {
  display:        flex;
  flex-direction: column;
  gap:            0.5em;
  padding:        0;
  margin:         0;
  list-style:     none;
}

.umbraco-forms-field .radiobuttonlist__item,
.umbraco-forms-field .checkboxlist__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625em;
}

.umbraco-forms-field .radiobuttonlist__item label,
.umbraco-forms-field .checkboxlist__item label {
    margin: 0;
    font-weight: 400;
    font-size: 0.9375em;
    cursor: pointer;
    line-height: 1.4;
}

/* Input natif masqué, emplacé par custom */
.umbraco-forms-field input[type="checkbox"],
.umbraco-forms-field input[type="radio"] {
  width:            1.125em;
  height:           1.125em;
  min-width:        1.125em;
  border:           2px solid var(--border-default);
  background:       #fff;
  cursor:           pointer;
  padding:          0;
  margin:           0;
  appearance:       none;
  -webkit-appearance: none;
  transition:       border-color var(--transition),
                    background   var(--transition),
                    box-shadow   var(--transition);
  position:         relative;
  flex-shrink:      0;
}

.umbraco-forms-field input[type="checkbox"] {
  border-radius: 3px;
}

.umbraco-forms-field input[type="radio"] {
  border-radius: 50%;
}

/* Coché */
.umbraco-forms-field input[type="checkbox"]:checked {
  background:   var(--cen-blue);
  border-color: var(--cen-blue);
}

.umbraco-forms-field input[type="checkbox"]:checked::after {
  content:    '';
  position:   absolute;
  left:       3px;
  top:        0px;
  width:      5px;
  height:     9px;
  border:     2px solid #fff;
  border-top: none;
  border-left: none;
  transform:  rotate(45deg);
}

.umbraco-forms-field input[type="radio"]:checked {
  border-color: var(--cen-blue);
  border-width: 5px;
  background:   #fff;
  box-shadow:   inset 0 0 0 3px var(--cen-blue);
}

/* Focus */
.umbraco-forms-field input[type="checkbox"]:focus,
.umbraco-forms-field input[type="radio"]:focus {
  outline:    none;
  box-shadow: var(--focus-shadow);
}

/* Hover */
.umbraco-forms-field input[type="checkbox"]:hover,
.umbraco-forms-field input[type="radio"]:hover {
  border-color: var(--cen-blue);
}

/* --- Checkbox standalone (ex. consentement RGPD) ----------- */
.umbraco-forms-field.checkbox {
  flex-direction: row;
  align-items:    flex-start;
  gap:            0.625em;
}

.umbraco-forms-field.checkbox label {
  font-weight: 400;
  font-size:   0.9375em;
  cursor:      pointer;
}

/* --- File upload ------------------------------------------- */
.umbraco-forms-field input[type="file"] {
  font-family:    var(--font-stack);
  font-size:      0.875em;
  color:          var(--text-secondary);
  cursor:         pointer;
  padding:        0.5em 0;
  width:          100%;
}

.umbraco-forms-field input[type="file"]:focus {
  outline:      2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius:  var(--radius);
}

/* --- Texte d'aide ------------------------------------------ */
.umbraco-forms-field .umbraco-forms-field-help,
.umbraco-forms-field .help-block {
  font-size:   0.8125em;
  color:       var(--text-muted);
  line-height: 1.45;
  margin:      0;
}

/* --- Messages d'erreur de validation ----------------------- */
.field-validation-error,
.umbraco-forms-field .umbraco-forms-field-validation-error,
.umbraco-forms-field span[data-valmsg-for] {
  display:     flex;
  align-items: center;
  gap:         0.35em;
  font-size:   0.8125em;
  font-weight: 600;
  color:       var(--cen-red);
  line-height: 1.4;
  margin:      0;
}

/* Icône erreur inline (SVG data URI) */
.field-validation-error::before,
.umbraco-forms-field .umbraco-forms-field-validation-error::before {
  content:              '';
  display:              inline-block;
  width:                1em;
  height:               1em;
  min-width:            1em;
  background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat:    no-repeat;
  background-size:      contain;
}

/* Champ en erreur */
.umbraco-forms-field.error input,
.umbraco-forms-field.error select,
.umbraco-forms-field.error textarea,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
  border-color: var(--border-error) !important;
}

.umbraco-forms-field.error input:focus,
.umbraco-forms-field.error select:focus,
.umbraco-forms-field.error textarea:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3);
}

/* Récapitulatif des erreurs en haut du formulaire */
.umbraco-forms-field-validation-summary,
.validation-summary-errors {
  background:    var(--cen-red-light);
  border:        2px solid var(--cen-red);
  border-radius: var(--radius-lg);
  padding:       1em 1.25em;
  margin-bottom: 1.5em;
  color:         var(--cen-red);
  font-size:     0.875em;
}

.umbraco-forms-field-validation-summary ul,
.validation-summary-errors ul {
  margin:  0.5em 0 0;
  padding: 0 0 0 1.25em;
}

.umbraco-forms-field-validation-summary ul li,
.validation-summary-errors ul li {
  margin-bottom: 0.25em;
}

/* --- Boutons de navigation entre pages --------------------- */
.umbraco-forms-navigation {
  display:         flex;
  justify-content: flex-end;
  gap:             0.75em;
  margin-top:      1.75em;
  flex-wrap:       wrap;
}

/* Bouton Précédent */
/*.umbraco-forms-navigation .prev {
  background:    transparent;
  color:         var(--cen-blue);
  border:        2px solid var(--cen-blue);
  border-radius: var(--radius);
  padding:       0.5625em 1.25em;
  font-family:   var(--font-stack);
  font-size:     0.9375em;
  font-weight:   600;
  cursor:        pointer;
  transition:    background var(--transition), color var(--transition);
  line-height:   1.4;
}

.umbraco-forms-navigation .prev:hover {
  background: var(--cen-blue-light);
}

.umbraco-forms-navigation .prev:focus-visible {
  outline:        2px solid var(--cen-blue);
  outline-offset: 2px;
}*/

/* Bouton Suivant / Soumettre */
/*.umbraco-forms-navigation .next,
.umbraco-forms-navigation input[type="submit"] {
  background:    var(--cen-blue);
  color:         var(--text-on-blue);
  border:        2px solid var(--cen-blue);
  border-radius: var(--radius);
  padding:       0.5625em 1.5em;
  font-family:   var(--font-stack);
  font-size:     0.9375em;
  font-weight:   700;
  cursor:        pointer;
  letter-spacing: 0.01em;
  transition:    background var(--transition), border-color var(--transition);
  line-height:   1.4;
}

.umbraco-forms-navigation .next:hover,
.umbraco-forms-navigation input[type="submit"]:hover {
  background:   var(--cen-blue-dark);
  border-color: var(--cen-blue-dark);
}

.umbraco-forms-navigation .next:focus-visible,
.umbraco-forms-navigation input[type="submit"]:focus-visible {
  outline:        2px solid var(--cen-blue-dark);
  outline-offset: 2px;
}

.umbraco-forms-navigation .next:disabled,
.umbraco-forms-navigation input[type="submit"]:disabled {
  opacity:  0.55;
  cursor:   not-allowed;
}*/

/* --- Indicateur de progression multi-pages ----------------- */
.umbraco-forms-paging {
  display:     flex;
  gap:         0.375em;
  margin:      0 0 1.5em;
  padding:     0;
  list-style:  none;
  flex-wrap:   wrap;
  align-items: center;
}

.umbraco-forms-paging li {
  font-size:   0.8125em;
  font-weight: 600;
  color:       var(--text-muted);
  padding:     0.25em 0.625em;
  border-radius: var(--radius);
  background:  transparent;
  transition:  background var(--transition), color var(--transition);
}

.umbraco-forms-paging li.current,
.umbraco-forms-paging li[aria-current="step"] {
  background: var(--cen-blue);
  color:      var(--text-on-blue);
}

/* --- Message de confirmation / succès ---------------------- */
.umbraco-forms-submitmessage,
.umbraco-forms-form .submitted-message {
  background:    var(--cen-green-light);
  border:        2px solid var(--cen-green);
  border-radius: var(--radius-lg);
  padding:       1.25em 1.5em;
  color:         var(--cen-green);
  font-weight:   600;
  font-size:     1em;
  display:       flex;
  align-items:   flex-start;
  gap:           0.625em;
}

.umbraco-forms-submitmessage::before {
  content:          '';
  display:          inline-block;
  width:            1.25em;
  height:           1.25em;
  min-width:        1.25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a3c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size:  contain;
  margin-top:       0.1em;
}

/* --- reCAPTCHA / GDPR consent ----------------------------- */
.umbraco-forms-field.recaptcha iframe,
.umbraco-forms-field.recaptcha > div {
  border-radius: var(--radius);
}

/* Lien dans le bloc de consentement */
.umbraco-forms-field a {
  color:           var(--cen-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.umbraco-forms-field a:hover {
  color: var(--cen-blue-dark);
}

.umbraco-forms-field a:focus-visible {
  outline:        2px solid var(--cen-blue);
  outline-offset: 2px;
  border-radius:  2px;
}

/* --- Champ masqué conditionnel ----------------------------- */
.umbraco-forms-field[style*="display: none"],
.umbraco-forms-field[style*="display:none"] {
  margin: 0;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 600px) {
  .umbraco-forms-fieldset {
    padding: 1.125em 1em;
  }

  .umbraco-forms-navigation {
    flex-direction: column-reverse;
  }

  .umbraco-forms-navigation .prev,
  .umbraco-forms-navigation .next,
  .umbraco-forms-navigation input[type="submit"] {
    width:      100%;
    text-align: center;
  }
}

/* --- Utilitaire : champs côte à côte (optionnel) ----------- */
/* Ajoutez la classe .uf-row sur un .umbraco-forms-container  */
.umbraco-forms-container.uf-row {
  display:        grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr));
  gap:            1em 1.25em;
}

/* =============================================================
   FIN DU THÈME
   ============================================================= */