des 4 fenêtres (rien ne change sans elle).
Préfixe #contactFormFormation .md-devis : passe devant les règles #modal21 / #modal26 / #modal22 de md-qf-centre.css
et devant « .new-home p » / « label » de theme.css et custom.css (accueil).
Piège du site : custom.css impose Roboto en !important (règle :where, spécificité 0) : Paytone One est donc déclarée avec !important.
Sections indépendantes, livrables une par une : t943 (commun, obligatoire pour les autres), t944, t945, t946, t947. */
/* =====================================================================
t943 : design commun des 4 fenêtres
===================================================================== */
#contactFormFormation .md-devis {
--md-devis-violet: #6a67ce;
--md-devis-lime: #e7fdba;
--md-devis-noir: #000000;
--md-devis-blanc: #ffffff;
--md-devis-gris-clair: #f8f8f8;
--md-devis-gris-trait: #e6e6e6;
--md-devis-gris-texte: #5c5c5c;
--md-devis-rouge: #fd636b;
--md-devis-ombre-forte: 0 10px 28px rgba(0, 0, 0, .12);
--md-devis-police-titre: "Paytone One", "Arial Rounded MT Bold", system-ui, sans-serif;
}
#contactFormFormation .md-devis .modal-dialog { width: 640px; max-width: calc(100% - 32px); margin: 24px 0; }
#contactFormFormation .md-devis .modal-content {
position: relative; display: flex; flex-direction: column;
max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
background: var(--md-devis-blanc); color: var(--md-devis-noir);
border: 2px solid var(--md-devis-noir); border-radius: 16px; box-shadow: var(--md-devis-ombre-forte); overflow: hidden;
}
/*
vide des fenêtres : largeur Bootstrap (750 px et plus) plus large que la fenêtre */
#contactFormFormation .md-devis .modal-content > .container { display: none; }
#contactFormFormation .md-devis :focus-visible { outline: 3px solid var(--md-devis-noir); outline-offset: 3px; }
/* Barre de progression : seul le violet avance, sur un fond gris comme le formulaire actuel (commentaire d'Aymen du 09/11) */
#contactFormFormation .md-devis .progress { flex: 0 0 auto; height: 8px; margin: 26px 76px 0 24px; background: var(--md-devis-gris-trait); border-radius: 999px; box-shadow: none; overflow: hidden; }
#contactFormFormation .md-devis .progress-bar { height: 8px; margin: 0; background: var(--md-devis-violet); border-radius: 999px; box-shadow: none; }
/* En-tête : titre en Paytone One, bouton Fermer rond de 44 px */
#contactFormFormation .md-devis .modal-header { flex: 0 0 auto; padding: 18px 24px 0; border: 0; }
#contactFormFormation .md-devis .modal-title {
margin: 0; text-align: center; color: var(--md-devis-noir);
font-family: var(--md-devis-police-titre) !important; font-weight: 400 !important; font-size: 26px; line-height: 1.15; text-wrap: balance;
}
#contactFormFormation .md-devis .modal-header .close {
position: absolute; top: 10px; right: 12px; z-index: 2; float: none;
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0;
background: var(--md-devis-blanc); border: 2px solid var(--md-devis-noir); border-radius: 50%;
color: var(--md-devis-noir); opacity: 1; text-shadow: none; font-size: 16px; font-weight: 700; line-height: 1;
}
#contactFormFormation .md-devis .modal-header .close:hover { background: var(--md-devis-lime); opacity: 1; }
/* Corps : seul à défiler, pied toujours visible (remplace la boîte fixe de 400 px de .formationsScroll) */
#contactFormFormation .md-devis .modal-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px 24px;
font-size: 16px; line-height: 1.5; color: var(--md-devis-noir);
}
#contactFormFormation .md-devis .formationsScroll { height: auto; width: auto; }
/* p sans classe seulement : les p à classe (.md-qf-centres__dep, .md-qf-proche__titre…) ont leur règle, plus précise que « .new-home p » */
#contactFormFormation .md-devis .modal-body p:not([class]) { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--md-devis-noir); }
/* p à classe : base au même poids que leurs règles (placées plus bas, elles gagnent), plus fort que « .new-home p » de l'accueil */
#contactFormFormation .md-devis .modal-body :where(p[class]) { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--md-devis-noir); }
#contactFormFormation .md-devis .modal-body label { color: var(--md-devis-noir); }
/* Pied : boutons côte à côte, centrés, comme le site actuel (app.css .modal-footer : text-align center) ; commentaire d'Aymen du 09/11 */
#contactFormFormation .md-devis .modal-footer {
flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;
padding: 16px 24px; background: var(--md-devis-blanc); border-top: 1px solid var(--md-devis-gris-trait); text-align: center;
}
#contactFormFormation .md-devis .modal-footer .btn + .btn { margin-left: 0; }
#contactFormFormation .md-devis .btn-modal-next,
#contactFormFormation .md-devis .btn-modal-back {
display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 48px; padding: 0 28px;
border: 2px solid var(--md-devis-noir); border-radius: 999px; box-shadow: none;
font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer;
transition: transform .15s;
}
#contactFormFormation .md-devis .btn-modal-next,
#contactFormFormation .md-devis .btn-modal-next:hover,
#contactFormFormation .md-devis .btn-modal-next:focus,
#contactFormFormation .md-devis .btn-modal-next:active { background: var(--md-devis-violet); border-color: var(--md-devis-noir); color: var(--md-devis-blanc); }
#contactFormFormation .md-devis .btn-modal-back,
#contactFormFormation .md-devis .btn-modal-back:hover,
#contactFormFormation .md-devis .btn-modal-back:focus,
#contactFormFormation .md-devis .btn-modal-back:active { background: var(--md-devis-blanc); border-color: var(--md-devis-noir); color: var(--md-devis-noir); }
#contactFormFormation .md-devis .btn-modal-next:hover,
#contactFormFormation .md-devis .btn-modal-back:hover { transform: translateY(-2px); text-decoration: none; }
/* Cartes de choix (fenêtres 26, 21, 22) : gris clair, survol bordé de noir, coché en lime */
#contactFormFormation .md-devis .md-qf-mode__choix,
#contactFormFormation .md-devis .md-qf-moi,
#contactFormFormation .md-devis .md-qf-proche__centre {
display: flex; gap: 12px; align-items: center; min-height: 56px; margin: 0; padding: 12px 16px;
background: var(--md-devis-gris-clair); border: 2px solid transparent; border-radius: 12px; box-shadow: none;
font-size: 16px; font-weight: 400; color: var(--md-devis-noir); cursor: pointer; transition: border-color .15s;
}
#contactFormFormation .md-devis .md-qf-mode__choix:hover,
#contactFormFormation .md-devis .md-qf-moi:hover,
#contactFormFormation .md-devis .md-qf-proche__centre:hover { border-color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-qf-mode__choix:has(input:checked),
#contactFormFormation .md-devis .md-qf-moi:has(input:checked),
#contactFormFormation .md-devis .md-qf-proche__centre:has(input:checked) { background: var(--md-devis-lime); border-color: var(--md-devis-noir); box-shadow: none; }
#contactFormFormation .md-devis .md-qf-mode__choix input,
#contactFormFormation .md-devis .md-qf-moi input,
#contactFormFormation .md-devis .md-qf-proche__centre input,
#contactFormFormation .md-devis .md-qf-centres__ville input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-qf-mode__choix strong,
#contactFormFormation .md-devis .md-qf-moi strong { display: block; font-size: 16px; font-weight: 700; color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-qf-mode__choix small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--md-devis-gris-texte); }
/* Listes de l'étape centre (#modal21) : mêmes couleurs que les cartes (avant : bleu #009fd9 / #e3f4fb, hors charte) */
#contactFormFormation .md-devis .md-qf-proche__communes li[aria-selected="true"],
#contactFormFormation .md-devis .md-qf-proche__communes li:hover { background: var(--md-devis-lime); }
#contactFormFormation .md-devis .md-qf-centres__dep { background: var(--md-devis-gris-clair); color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-qf-centres__ville { color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-qf-centres__ville:hover { background: var(--md-devis-gris-clair); }
#contactFormFormation .md-devis .md-qf-centres__ville:has(input:checked) { background: var(--md-devis-lime); font-weight: 700; }
#contactFormFormation .md-devis .md-qf-proche__tous { color: var(--md-devis-noir); }
/* Champs : 52 px, bordure noire (contraste 3:1 du contour), coins arrondis */
#contactFormFormation .md-devis .modal-body .form-control {
min-height: 52px !important; height: 52px; padding: 0 16px;
background: var(--md-devis-blanc); border: 2px solid var(--md-devis-noir); border-radius: 12px; box-shadow: none;
font-size: 16px; color: var(--md-devis-noir);
}
#contactFormFormation .md-devis .modal-body select.form-control { padding-right: 8px; }
#contactFormFormation .md-devis .modal-body .form-control::placeholder { color: var(--md-devis-gris-texte); opacity: 1; }
#contactFormFormation .md-devis .modal-body .form-control:focus { border-color: var(--md-devis-noir); box-shadow: 0 0 0 3px var(--md-devis-lime); }
#contactFormFormation .md-devis .md-qf-noms label,
#contactFormFormation .md-devis .md-qf-noms__titre,
#contactFormFormation .md-devis .md-qf-quand__detail label,
#contactFormFormation .md-devis .md-qf-site label,
#contactFormFormation .md-devis .md-qf-proche__label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--md-devis-noir); }
/* Message d'erreur (afficherErreur d'app.js) : texte noir, cadre rouge de la charte */
#contactFormFormation .md-devis .md-erreur-saisie {
margin: 16px 0 0; padding: 12px 16px; background: var(--md-devis-blanc); border: 2px solid var(--md-devis-rouge); border-left-width: 8px;
border-radius: 12px; color: var(--md-devis-noir); font-size: 15px; font-weight: 700;
}
/* Téléphone */
@media (max-width: 600px) {
#contactFormFormation .md-devis .modal-dialog { max-width: calc(100% - 16px); margin: 8px 0; }
#contactFormFormation .md-devis .modal-content { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
#contactFormFormation .md-devis .progress { margin: 22px 68px 0 16px; }
#contactFormFormation .md-devis .modal-header { padding: 14px 16px 0; }
#contactFormFormation .md-devis .modal-title { font-size: 21px; }
#contactFormFormation .md-devis .modal-body { padding: 16px; }
#contactFormFormation .md-devis .modal-footer { padding: 12px 16px; }
#contactFormFormation .md-devis .btn-modal-next,
#contactFormFormation .md-devis .btn-modal-back { min-width: 0; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
#contactFormFormation .md-devis .btn-modal-next, #contactFormFormation .md-devis .btn-modal-back { transition: none; }
#contactFormFormation .md-devis .btn-modal-next:hover, #contactFormFormation .md-devis .btn-modal-back:hover { transform: none; }
}
/* =====================================================================
t944 : étape 1, « Quelle formation souhaitez-vous suivre ? » (#modal20)
Classe md-devis-large sur #modal20 + bloc fragments/t944-modal20.jsp
===================================================================== */
#contactFormFormation .md-devis.md-devis-large .modal-dialog { width: min(860px, calc(100vw - 32px)); }
#contactFormFormation .md-devis .md-devis-aide { margin: 0 0 14px; font-size: 15px; color: var(--md-devis-gris-texte); text-align: center; }
/* Cartes au style de /formation (« Quelle formation est faite pour vous ? ») : 2 colonnes (essai demandé par Aymen le 09/11, avant : 3), carte blanche ombrée, clipart en haut,
nom centré en Paytone One ; case à cocher en haut à gauche, carte choisie en lime bordée de noir. Commentaire d'Aymen du 09/11. */
#contactFormFormation .md-devis .md-devis-formations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding: 4px; }
#contactFormFormation .md-devis .md-devis-formation {
position: relative; display: flex; flex-direction: column; align-items: stretch;
margin: 0; padding: 20px 18px 18px; background: var(--md-devis-blanc); border: 2px solid transparent; border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.08); font-weight: 400; color: var(--md-devis-noir); cursor: pointer; transition: transform .2s, border-color .2s;
}
#contactFormFormation .md-devis .md-devis-formation:hover { border-color: var(--md-devis-noir); transform: translateY(-3px); }
#contactFormFormation .md-devis .md-devis-formation:has(input:checked) { background: var(--md-devis-lime); border-color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-devis-formation:has(input:focus-visible) { outline: 3px solid var(--md-devis-violet); outline-offset: 2px; }
#contactFormFormation .md-devis .md-devis-formation__case { position: absolute; top: 14px; left: 14px; width: 22px; height: 22px; margin: 0; accent-color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-devis-formation__texte { display: block; min-width: 0; }
#contactFormFormation .md-devis .md-devis-formation__nom {
display: block; margin-bottom: 8px; color: var(--md-devis-noir); text-align: center;
font-family: var(--md-devis-police-titre) !important; font-weight: 400 !important; font-size: 20px; line-height: 1.2;
}
#contactFormFormation .md-devis .md-devis-formation__resume { display: block; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-devis-formation__resume strong,
#contactFormFormation .md-devis .md-devis-formation__resume b { font-weight: 700; }
#contactFormFormation .md-devis .md-devis-formation__resume hr { margin: 8px 0; border: 0; border-top: 1px solid var(--md-devis-gris-trait); }
/* Pastilles et coches du résumé (HTML saisi dans l'admin, couleurs en style en ligne) ramenées à la charte : point à trancher 2 du README */
#contactFormFormation .md-devis .md-devis-formation__resume .badge {
display: inline-block; margin: 6px 4px 2px 0; padding: 3px 10px; border-radius: 999px;
background: var(--md-devis-violet) !important; color: var(--md-devis-blanc); font-size: 13px; font-weight: 700; line-height: 1.4;
}
/* « Ouverte A1/A2/A3 » : rose pastel du site actuel, texte blanc (commentaire d'Aymen du 09/11) */
#contactFormFormation .md-devis .md-devis-formation__resume .badge[style*="f8888d"] { background: #f8888d !important; color: var(--md-devis-blanc); }
#contactFormFormation .md-devis .md-devis-formation__resume .fa-check { color: var(--md-devis-noir) !important; }
#contactFormFormation .md-devis .md-devis-formation__image { order: -1; display: block; width: 100%; max-width: 200px; aspect-ratio: 1; height: auto; object-fit: contain; margin: -8px auto 6px; border-radius: 0; }
/* « Afficher plus » (md-devis-plus.js) : téléphone seulement */
#contactFormFormation .md-devis .md-devis-plus { display: none; }
@media (max-width: 600px) {
/* même largeur que les autres fenêtres au téléphone (la largeur 860 px de md-devis-large l'emportait : fenêtre 358 px au lieu de 374, MDdrone t992) */
#contactFormFormation .md-devis.md-devis-large .modal-dialog { width: auto; max-width: calc(100% - 16px); }
#contactFormFormation .md-devis .md-devis-formations { grid-template-columns: minmax(0, 1fr); gap: 12px; }
#contactFormFormation .md-devis .md-devis-formation { padding: 14px; }
/* Téléphone (commentaire d'Aymen du 09/11) : clipart gardé, plus petit ; résumé coupé, « Afficher plus » déroule le reste */
#contactFormFormation .md-devis .md-devis-formation__image { max-width: 120px; margin: -4px auto 4px; }
#contactFormFormation .md-devis .md-devis-formation__nom { font-size: 17px; padding: 0 16px; }
#contactFormFormation .md-devis .md-devis-formation__resume { position: relative; max-height: 9.6em; overflow: hidden; }
#contactFormFormation .md-devis .md-devis-formation__resume::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(rgba(255,255,255,0), var(--md-devis-blanc)); pointer-events: none; }
#contactFormFormation .md-devis .md-devis-formation:has(input:checked) .md-devis-formation__resume::after { background: linear-gradient(rgba(231,253,186,0), var(--md-devis-lime)); }
#contactFormFormation .md-devis .md-devis-formation--ouverte .md-devis-formation__resume { max-height: none; }
#contactFormFormation .md-devis .md-devis-formation--ouverte .md-devis-formation__resume::after { display: none; }
#contactFormFormation .md-devis .md-devis-plus { display: inline-block; margin: 4px 0 0; padding: 6px 0; background: none; border: 0; color: var(--md-devis-violet); font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
}
/* =====================================================================
t945 : étape 2, « Combien de personnes souhaitez-vous former ? » (#modal26)
Classe md-devis-personnes sur #modal26 + bloc fragments/t945-modal26.jsp + fragments/t945-nombre.js
===================================================================== */
@media (min-width: 481px) {
#contactFormFormation .md-devis .md-devis-nb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#contactFormFormation .md-devis .md-devis-nb .md-qf-mode__choix { flex-direction: column; justify-content: center; gap: 8px; min-height: 96px; text-align: center; }
}
#contactFormFormation .md-devis.md-devis-personnes .md-qf-moi { margin-top: 16px; }
#contactFormFormation .md-devis .md-devis-nombre__champ { display: grid; grid-template-columns: 52px 96px 52px; gap: 8px; align-items: center; }
#contactFormFormation .md-devis .md-devis-nombre__champ .form-control { text-align: center; font-weight: 700; padding: 0 8px; -moz-appearance: textfield; }
#contactFormFormation .md-devis .md-devis-nombre__champ .form-control::-webkit-inner-spin-button,
#contactFormFormation .md-devis .md-devis-nombre__champ .form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#contactFormFormation .md-devis .md-devis-nombre__bouton {
width: 52px; height: 52px; padding: 0; background: var(--md-devis-blanc); border: 2px solid var(--md-devis-noir); border-radius: 50%;
color: var(--md-devis-noir); font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer;
}
#contactFormFormation .md-devis .md-devis-nombre__bouton:hover { background: var(--md-devis-lime); }
#contactFormFormation .md-devis .md-devis-nombre__bouton:disabled { opacity: .35; cursor: default; background: var(--md-devis-blanc); }
@media (min-width: 601px) {
/* 2 noms et plus : 2 colonnes, la fenêtre grandit deux fois moins */
#contactFormFormation .md-devis.md-devis-personnes .md-qf-noms__liste:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#contactFormFormation .md-devis .md-devis-groupe { margin-top: 14px; padding: 12px 16px; background: var(--md-devis-gris-clair); border-radius: 12px; font-size: 15px; }
#contactFormFormation .md-devis .md-devis-groupe[hidden] { display: none; }
/* =====================================================================
t946 : étape 3, « Dans quel centre souhaitez-vous suivre votre formation ? » (#modal21)
Classe md-devis-centre sur #modal21 (CSS seule), plus le bandeau optionnel fragments/t946-modal21.jsp + t946-technique.js (point à trancher 3)
===================================================================== */
#contactFormFormation .md-devis.md-devis-centre .md-qf-mode { gap: 10px; margin-bottom: 18px; }
#contactFormFormation .md-devis.md-devis-centre .md-qf-mode__choix { align-items: flex-start; }
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__communes { margin-top: 4px; padding: 6px 0; border: 2px solid var(--md-devis-noir); border-radius: 12px; box-shadow: var(--md-devis-ombre-forte); }
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__communes li { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; font-size: 16px; color: var(--md-devis-noir); }
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__communes small { margin-left: 4px; color: var(--md-devis-gris-texte); }
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__titre { margin: 16px 0 8px; font-size: 15px; color: var(--md-devis-noir); }
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__liste { gap: 8px; }
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__km {
margin-left: auto; padding: 2px 10px; background: var(--md-devis-blanc); border: 2px solid var(--md-devis-noir); border-radius: 999px;
font-size: 14px; font-weight: 700; color: var(--md-devis-noir);
}
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__vide { margin-top: 10px; font-size: 15px; color: var(--md-devis-noir); }
/* « Voir tous les centres » : bouton pilule de 44 px (avant : lien bleu souligné de 14 px) */
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__tous {
display: inline-flex; align-items: center; min-height: 44px; margin: 14px 0 0; padding: 0 20px;
background: var(--md-devis-blanc); border: 2px solid var(--md-devis-noir); border-radius: 999px;
color: var(--md-devis-noir); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
}
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__vide .md-qf-proche__tous { margin: 8px 0 0; }
#contactFormFormation .md-devis.md-devis-centre .md-qf-proche__tous:hover { background: var(--md-devis-lime); }
#contactFormFormation .md-devis.md-devis-centre .md-qf-centres__recherche { margin-bottom: 8px; }
#contactFormFormation .md-devis.md-devis-centre .md-qf-centres__liste { max-height: 320px; padding: 0; border: 2px solid var(--md-devis-noir); border-radius: 12px; }
#contactFormFormation .md-devis.md-devis-centre .md-qf-centres__dep { top: 0; padding: 8px 16px; background: var(--md-devis-gris-clair); font-size: 14px; font-weight: 700; color: var(--md-devis-noir); }
#contactFormFormation .md-devis.md-devis-centre .md-qf-centres__ville { min-height: 44px; padding: 8px 16px 8px 24px; font-size: 16px; color: var(--md-devis-noir); }
#contactFormFormation .md-devis.md-devis-centre .md-qf-centres__vide { font-size: 15px; color: var(--md-devis-noir); }
/* Bandeau optionnel « Spécialisation technique » (point à trancher 3) */
#contactFormFormation .md-devis.md-devis-centre .md-devis-technique { margin: 0 0 16px; padding: 12px 16px; background: var(--md-devis-lime); border: 2px solid var(--md-devis-noir); border-radius: 12px; }
#contactFormFormation .md-devis.md-devis-centre .md-devis-technique[hidden] { display: none; }
#contactFormFormation .md-devis.md-devis-centre .md-devis-technique__lieu { font-weight: 700; }
#contactFormFormation .md-devis.md-devis-centre .md-devis-technique__inclus { font-size: 14px; color: var(--md-devis-noir); }
@media (max-width: 600px) {
#contactFormFormation .md-devis.md-devis-centre .md-qf-mode { gap: 8px; margin-bottom: 14px; }
#contactFormFormation .md-devis.md-devis-centre .md-qf-mode__choix { min-height: 0; padding: 10px 12px; }
#contactFormFormation .md-devis.md-devis-centre .md-qf-centres__liste { max-height: 260px; }
}
/* =====================================================================
t947 : étape 4, « Pour quand souhaitez-vous suivre votre formation ? » (#modal22)
Bloc fragments/t947-modal22.jsp + partie « Pour quand ? » de fragments/t947-md-qf-demande.js
===================================================================== */
#contactFormFormation .md-devis .md-devis-quand { display: grid; gap: 10px; }
#contactFormFormation .md-devis .md-devis-quand .md-qf-quand__detail { margin: -10px 0 0; padding: 14px 16px; background: var(--md-devis-blanc); border: 2px solid var(--md-devis-noir); border-top: 0; border-radius: 0 0 12px 12px; }
#contactFormFormation .md-devis .md-devis-quand .md-qf-mode__choix:has(+ .md-qf-quand__detail:not([hidden])) { border-radius: 12px 12px 0 0; }
#contactFormFormation .md-devis .md-qf-quand__detail[hidden] { display: none; }
#contactFormFormation .md-devis .md-devis-mois { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
#contactFormFormation .md-devis .md-devis-mois legend { width: auto; margin: 0 0 6px; padding: 0; border: 0; font-size: 15px; font-weight: 700; color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-devis-mois__choix { position: relative; margin: 0; font-weight: 400; cursor: pointer; }
#contactFormFormation .md-devis .md-devis-mois__choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#contactFormFormation .md-devis .md-devis-mois__choix span {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
background: var(--md-devis-gris-clair); border: 2px solid transparent; border-radius: 999px; font-size: 15px; color: var(--md-devis-noir);
}
#contactFormFormation .md-devis .md-devis-mois__choix:hover span { border-color: var(--md-devis-noir); }
#contactFormFormation .md-devis .md-devis-mois__choix input:checked + span { background: var(--md-devis-lime); border-color: var(--md-devis-noir); font-weight: 700; }
#contactFormFormation .md-devis .md-devis-mois__choix input:focus-visible + span { outline: 3px solid var(--md-devis-noir); outline-offset: 3px; }
/* UX t993 : section a AJOUTER a la fin de static/css/md-devis.css (livre par MDdrone t992 / UX t943), sans rien changer au-dessus.
Source : Claude-ux\maquettes\site-minutedrone\devis\md-devis.css (maquette v35). */
/* =====================================================================
t993 : fenêtres 23 (e-mail), 24 (mot de passe), 25 (informations), même design que t943
Classe md-devis posée sur les 3 fenêtres ; aucun texte visible changé.
===================================================================== */
#contactFormFormation .md-devis .modal-body .form-group { margin: 0 0 16px; }
#contactFormFormation .md-devis .modal-body .form-group:last-child,
#contactFormFormation .md-devis .modal-body .form-group:has(> .form-control.hidden) { margin-bottom: 0; }
/* Grille Bootstrap des fenêtres 24 et 25 : neutralisée (ses colonnes suivent l'écran, pas la fenêtre ; :before/:after de la ligne deviendraient des cases de grille) */
#contactFormFormation .md-devis .modal-body > .col-md-12,
#contactFormFormation .md-devis .modal-footer > .col-md-12 { float: none; width: auto; min-height: 0; padding: 0; }
#contactFormFormation .md-devis .modal-body > .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0 0 16px; }
#contactFormFormation .md-devis .modal-body > .row:last-child { margin-bottom: 0; }
#contactFormFormation .md-devis .modal-body > .row::before,
#contactFormFormation .md-devis .modal-body > .row::after { display: none; }
#contactFormFormation .md-devis .modal-body > .row > [class*="col-"] { float: none; width: auto; min-height: 0; padding: 0; }
#contactFormFormation .md-devis .modal-body > .row .form-group { margin: 0; }
/* Limite de caractères atteinte (
, rouge pur 4:1) : texte noir gras */
#contactFormFormation .md-devis .modal-body [id$="MaxCharWarning"]:not(.hidden) { display: block; margin-top: 6px; }
#contactFormFormation .md-devis .modal-body [id$="MaxCharWarning"] font { color: var(--md-devis-noir); font-size: 14px; font-weight: 700; }
#contactFormFormation .md-devis .modal-body .help-block:empty { display: none; }
/* Champ sélectionné : effet des champs du design system (recherche, admin : md-champ:focus) : bordure violette, halo violet léger,
sans l'anneau lime ni le contour noir du clavier de t943 (version D de devis/champs.html, à l'essai à la demande d'Aymen, 09/11) */
#contactFormFormation .md-devis .modal-body .form-control:focus { border-color: var(--md-devis-violet); box-shadow: 0 0 0 4px rgba(106, 103, 206, .25); outline: none; }
/* Texte d'aide des champs : 16 px partout (theme.css le réduit pour text, email et password, pas pour tel : tailles mélangées sur la fenêtre 25) */
#contactFormFormation .md-devis .modal-body .form-control::placeholder { font-size: 16px; }
/* Fenêtre 23, compte existant (isValidEmail, app.js:342-347) : message en bandeau lime comme l'encart Grenoble (t946), lien noir de 44 px */
#contactFormFormation .md-devis .md-deja-compte {
margin: 0 0 16px; padding: 12px 16px; background: var(--md-devis-lime); border: 2px solid var(--md-devis-noir); border-radius: 12px;
box-shadow: none; color: var(--md-devis-noir); font-size: 16px; font-weight: 700; line-height: 1.4; text-shadow: none;
}
#contactFormFormation .md-devis .md-deja-compte.hidden { display: none; }
#contactFormFormation .md-devis .md-mdp-oublie:not(.hidden) {
display: inline-flex; align-items: center; min-height: 44px; margin-top: -6px;
color: var(--md-devis-noir); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
#contactFormFormation .md-devis .md-mdp-oublie:hover { color: var(--md-devis-noir); text-decoration-thickness: 2px; }
/* Fenêtre 25, pied : Retour et Soumettre côte à côte, mention CGU/CGV dessous (sans le style en ligne gris #777, 4,5:1 tout juste) */
#contactFormFormation .md-devis .modal-footer > .col-md-12 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; width: 100%; }
#contactFormFormation .md-devis .modal-footer > .col-md-12 > br { display: none; }
#contactFormFormation .md-devis .md-devis-cgu { flex: 1 0 100%; margin: 0; font-size: 14px; line-height: 1.5; color: var(--md-devis-gris-texte); text-align: center; }
#contactFormFormation .md-devis .md-devis-cgu br { display: none; }
#contactFormFormation .md-devis .md-devis-cgu a { color: var(--md-devis-noir); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
#contactFormFormation .md-devis .md-devis-cgu a:hover { color: var(--md-devis-noir); text-decoration-thickness: 2px; }
@media (max-width: 600px) {
#contactFormFormation .md-devis .modal-body > .row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}