/* =========================================================
   ODECIA - Formulaire de qualification
   Feuille de styles de l'extension.

   Depuis la 1.2.10, ce fichier porte le dessin du formulaire :
   carte blanche, etapes numerotees, champs sur deux colonnes.
   C'est la reprise du dessin qui vivait jusqu'ici dans le
   contenu Contact Form 7 du formulaire d'accueil 352735.

   PORTEE : toutes les regles sont sous .odecia-qf, c'est-a-dire
   sous la section produite par le shortcode de l'extension.
   Le formulaire d'accueil n'est pas dans .odecia-qf : ce fichier
   ne peut pas le toucher, meme si sa section porte le meme
   identifiant #qualification.

   POIDS : le !important n'est pas une commodite. Mesure du
   2026-09-08 sur la preproduction : sans lui, la feuille du
   theme gagne sur les champs (bordure basse grise, fond
   transparent) et le dessin ne s'applique pas.
   ========================================================= */

.odecia-qf {
  --odecia-qf-navy: #00385c;
  --odecia-qf-titre-sombre: #64e2d3;
  --odecia-qf-pink: #e637ad;
  --odecia-qf-pink-dark: #d92aa2;
  --odecia-qf-green: #58dbc5;
  --odecia-qf-badge: #009f89;
  --odecia-qf-badge-bg: #e4faf6;
  --odecia-qf-text: #365b72;
  --odecia-qf-muted: #617b8a;
  --odecia-qf-field-bg: #f7fafb;
  --odecia-qf-field-text: #052f4a;
  --odecia-qf-border: #d9e4e9;
  --odecia-qf-rule: #e3ebef;
  --odecia-qf-panel-bg: #f0faf8;
  --odecia-qf-panel-border: #cfe9e3;
  --odecia-qf-white: #fff;
  --odecia-qf-shadow: 0 18px 48px rgba(0, 25, 44, 0.16);
}

.odecia-qf,
.odecia-qf * {
  box-sizing: border-box;
}


/* =========================================================
   SECTION ET INTRODUCTION
   ========================================================= */

/* La section ne peint AUCUN fond par defaut : sur les pages du site, c'est le
   bloc qui le porte. En peindre un second produit un rectangle qui tranche sur
   le bloc. Constate le 2026-09-08 sur la page Formations, apres bascule.
   L'attribut background du raccourci rallume le fond quand rien d'autre ne le
   fournit — c'est le cas de la page pilote de recette. */
/* Pas de marge verticale propre : le bloc de la page en pose deja une, mesuree
   a 76px en haut et en bas. En ajouter une seconde ecarte le titre du haut du
   bloc. La section n'en reprend que si elle peint son propre fond, c'est-a-dire
   quand aucun bloc ne l'entoure. */
.odecia-qf {
  position: relative;
  z-index: 30;
  isolation: isolate;
  width: 100%;
  padding: 0;
  color: var(--odecia-qf-text);
  background: transparent;
  scroll-margin-top: 140px;
  pointer-events: auto;
}

.odecia-qf--dark {
  color: var(--odecia-qf-white);
}

.odecia-qf--bg-light {
  padding: 64px 0;
  background: var(--odecia-qf-white);
}

.odecia-qf--bg-dark {
  padding: 64px 0;
  background: var(--odecia-qf-navy);
}

.odecia-qf::before,
.odecia-qf::after {
  pointer-events: none;
}

.odecia-qf__container {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}

/* Titre et accroche centres : c'est la mise en page en service sur les huit
   pages du site, et la bascule ne doit rien changer d'editorial. */
.odecia-qf__intro {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.odecia-qf__kicker {
  margin: 0 0 10px;
  color: var(--odecia-qf-green);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: uppercase;
}

.odecia-qf__title {
  margin: 0 0 12px;
  color: var(--odecia-qf-navy);
}

/* Le titre n'impose NI taille, NI hauteur de ligne, NI graisse : c'est un
   composant commun, et le theme le porte. Mesure du 2026-09-08 sur une page en
   service : 40px, hauteur de ligne 48px, graisse 600, police Raleway. Les
   imposer ici les figerait a la refonte du theme. Seules la couleur et la
   marge appartiennent au formulaire.
   Vert sur fond sombre, bleu marine sur fond clair : les deux couleurs
   relevees dans les huit sections d'origine, #64e2d3 et #00385c. */
.odecia-qf--dark .odecia-qf__title {
  color: var(--odecia-qf-titre-sombre);
}

/* L'accroche non plus n'impose pas sa taille : mesuree a 16px, hauteur de
   ligne 24px, sur les pages en service. Le theme la porte. */
.odecia-qf__lead,
.odecia-qf__reassurance {
  max-width: 720px;
  margin: 0 auto 8px;
  color: var(--odecia-qf-text);
}

.odecia-qf__reassurance {
  margin-top: 14px;
  font-weight: 700;
}

.odecia-qf--dark .odecia-qf__lead,
.odecia-qf--dark .odecia-qf__reassurance {
  color: var(--odecia-qf-white);
}


/* =========================================================
   CARTE DU FORMULAIRE
   ========================================================= */

.odecia-qf__form {
  position: relative !important;
  z-index: 40 !important;
  isolation: isolate !important;
  width: min(820px, 100%) !important;
  margin: 0 auto !important;
  padding: 24px 26px 12px !important;
  color: var(--odecia-qf-navy) !important;
  background: var(--odecia-qf-white) !important;
  border-radius: 14px !important;
  box-shadow: var(--odecia-qf-shadow) !important;
  pointer-events: auto !important;
}

.odecia-qf__form::before,
.odecia-qf__form::after {
  pointer-events: none;
}

.odecia-qf__form .wpcf7,
.odecia-qf__form .wpcf7 form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   NEUTRALISATION DES ESPACES AUTOMATIQUES CF7

   Contact Form 7 enveloppe le contenu dans des <p> qu'il
   fabrique lui-meme. Sans display:contents sur ces <p>, les
   champs cessent d'etre les elements de la grille et la mise
   sur deux colonnes ne s'applique pas. Constat mesure le
   2026-09-08 sur la page pilote.
   ========================================================= */

.odecia-qf__form p {
  margin: 0 !important;
  padding: 0 !important;
}

.odecia-qf__form br {
  display: none !important;
}

.odecia-qf .odecia-form-grid > p {
  display: contents !important;
}

.odecia-qf__form .wpcf7-form-control-wrap {
  position: relative !important;
  z-index: 50 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}


/* =========================================================
   ETAPES
   ========================================================= */

.odecia-qf__form fieldset.odecia-form-section {
  min-width: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--odecia-qf-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.odecia-qf__form fieldset.odecia-form-section:last-of-type {
  margin-bottom: 14px !important;
}

.odecia-qf__form legend {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--odecia-qf-navy) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.odecia-qf__form legend span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
  color: var(--odecia-qf-badge) !important;
  background: var(--odecia-qf-badge-bg) !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}


/* =========================================================
   PANNEAUX CONDITIONNELS
   ========================================================= */

.odecia-qf .odecia-conditional-panel {
  margin: 12px 0 0 !important;
  padding: 14px 16px !important;
  color: var(--odecia-qf-navy) !important;
  background: var(--odecia-qf-panel-bg) !important;
  border: 1px solid var(--odecia-qf-panel-border) !important;
  border-radius: 9px !important;
}

.odecia-qf .odecia-conditional-panel[hidden] {
  display: none !important;
}

.odecia-qf .odecia-conditional-panel > strong {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--odecia-qf-navy) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRILLES
   ========================================================= */

.odecia-qf .odecia-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
}

.odecia-qf .odecia-form-grid__full {
  grid-column: 1 / -1 !important;
}


/* =========================================================
   LIBELLES
   ========================================================= */

.odecia-qf__form label.odecia-form-field {
  position: relative !important;
  z-index: 45 !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--odecia-qf-navy) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  cursor: default !important;
}

.odecia-qf__form .odecia-required {
  color: var(--odecia-qf-pink) !important;
}


/* =========================================================
   CHAMPS
   ========================================================= */

.odecia-qf__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.odecia-qf__form select {
  position: relative !important;
  z-index: 60 !important;
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 5px 0 0 !important;
  padding: 0 12px !important;
  color: var(--odecia-qf-field-text) !important;
  background: var(--odecia-qf-field-bg) !important;
  border: 1px solid var(--odecia-qf-border) !important;
  border-radius: 7px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 40px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.odecia-qf__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  cursor: text !important;
}

.odecia-qf__form select {
  padding-right: 34px !important;
  line-height: normal !important;
  cursor: pointer !important;
}

.odecia-qf__form textarea {
  position: relative !important;
  z-index: 60 !important;
  display: block !important;
  width: 100% !important;
  height: 82px !important;
  min-height: 82px !important;
  margin: 5px 0 0 !important;
  padding: 10px 12px !important;
  color: var(--odecia-qf-field-text) !important;
  background: var(--odecia-qf-field-bg) !important;
  border: 1px solid var(--odecia-qf-border) !important;
  border-radius: 7px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  resize: vertical !important;
  cursor: text !important;
  pointer-events: auto !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.odecia-qf__form input::placeholder,
.odecia-qf__form textarea::placeholder {
  color: #8b9da8 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.odecia-qf__form input:focus,
.odecia-qf__form select:focus,
.odecia-qf__form textarea:focus {
  outline: 0 !important;
  color: var(--odecia-qf-field-text) !important;
  background: var(--odecia-qf-white) !important;
  border-color: var(--odecia-qf-green) !important;
  box-shadow: 0 0 0 3px rgba(88, 219, 197, 0.16) !important;
}


/* =========================================================
   CASE NEWSLETTER (1.3.0)
   Balisage produit par Contact Form 7 pour [checkbox consent_marketing ...] :
   span.wpcf7-list-item > label > input + span.wpcf7-list-item-label
   ========================================================= */

.odecia-qf__form .odecia-form-newsletter {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.odecia-qf__form .odecia-form-newsletter .wpcf7-list-item {
  display: block !important;
  margin: 0 !important;
}

.odecia-qf__form .odecia-form-newsletter label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: var(--odecia-qf-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.odecia-qf__form .odecia-form-newsletter input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  accent-color: var(--odecia-qf-pink-dark) !important;
}


/* =========================================================
   MENTION DE TRAITEMENT DES DONNEES
   ========================================================= */

.odecia-qf__form p.odecia-form-consent {
  display: block !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  color: var(--odecia-qf-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

.odecia-qf__form p.odecia-form-consent a {
  color: var(--odecia-qf-pink-dark) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.odecia-qf__form p.odecia-form-consent a:hover {
  text-decoration: underline !important;
}


/* =========================================================
   BOUTON
   ========================================================= */

.odecia-qf__form .wpcf7-submit {
  position: relative !important;
  z-index: 60 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 10px 20px !important;
  color: var(--odecia-qf-white) !important;
  background: var(--odecia-qf-pink) !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 20px rgba(230, 55, 173, 0.20) !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.odecia-qf__form .wpcf7-submit:hover,
.odecia-qf__form .wpcf7-submit:focus-visible {
  color: var(--odecia-qf-white) !important;
  background: var(--odecia-qf-pink-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(230, 55, 173, 0.27) !important;
}

.odecia-qf__form .wpcf7-submit:active {
  transform: translateY(0) !important;
}

.odecia-qf__form .wpcf7-submit:disabled {
  cursor: wait !important;
  opacity: 0.7 !important;
  transform: none !important;
  box-shadow: none !important;
}

.odecia-qf__form .wpcf7-submit:focus-visible {
  outline: 3px solid rgba(88, 219, 197, 0.45) !important;
  outline-offset: 3px !important;
}

.odecia-qf__form .wpcf7-spinner {
  display: block !important;
  margin: 12px auto 0 !important;
}


/* =========================================================
   MESSAGES CONTACT FORM 7
   ========================================================= */

.odecia-qf__form .wpcf7-not-valid-tip {
  display: block !important;
  margin: 4px 0 0 !important;
  color: #c92267 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

.odecia-qf__form .wpcf7-response-output {
  margin: 10px 0 0 !important;
  padding: 8px 10px !important;
  color: var(--odecia-qf-navy) !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.odecia-qf__form form.init .wpcf7-response-output {
  display: none !important;
}


/* =========================================================
   MENTION SOUS LA CARTE ET AVERTISSEMENT
   ========================================================= */

.odecia-qf__legal-note {
  width: min(820px, 100%);
  margin: 16px auto 0;
  color: var(--odecia-qf-muted);
  font-size: 12px;
  line-height: 1.5;
}

.odecia-qf--dark .odecia-qf__legal-note {
  color: rgba(255, 255, 255, 0.82);
}

.odecia-qf__notice {
  padding: 12px;
  border-left: 4px solid #d63638;
  background: #fff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 759px) {
  .odecia-qf {
    scroll-margin-top: 110px;
  }

  .odecia-qf--bg-light,
  .odecia-qf--bg-dark {
    padding: 44px 0;
  }

  .odecia-qf__container {
    width: min(100% - 32px, 1100px);
  }

  .odecia-qf__form {
    padding: 20px 16px 12px !important;
    border-radius: 11px !important;
  }

  .odecia-qf .odecia-form-grid {
    grid-template-columns: 1fr !important;
    row-gap: 13px !important;
  }

  .odecia-qf__form fieldset.odecia-form-section {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
  }

  .odecia-qf .odecia-conditional-panel {
    padding: 13px !important;
  }

  .odecia-qf__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .odecia-qf__form select {
    height: 44px !important;
    min-height: 44px !important;
  }

  .odecia-qf__form textarea {
    height: 90px !important;
    min-height: 90px !important;
  }

  .odecia-qf__form p.odecia-form-consent {
    margin-bottom: 20px !important;
  }
}


/* =========================================================
   MOUVEMENT REDUIT
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .odecia-qf__form .wpcf7-submit,
  .odecia-qf__form input,
  .odecia-qf__form select,
  .odecia-qf__form textarea {
    transition: none !important;
  }

  .odecia-qf__form .wpcf7-submit:hover,
  .odecia-qf__form .wpcf7-submit:focus-visible {
    transform: none !important;
  }
}