/* =========================================================================
   LA CANDIDATURE À LA FORMATION WEBMASTER
   /formation-webmaster/candidature — voir components/public/FormulaireWebmaster.tsx

   Une seule carte sur fond ivoire : à gauche, le panneau prune de la carte
   « Formation à la une » de l'accueil — la même photographie, le même voile —,
   à droite le formulaire. Le framboise ne sert qu'à trois choses : le
   surtitre, le bouton d'envoi, et la réponse choisie. Tout le reste est prune
   sur ivoire.

   Les numéros de section (01, 02…) sont la seule coquetterie éditoriale : ils
   disent où l'on en est sans barre de progression.

   Préfixe « fwm- » : aucune règle de ce fichier ne touche une autre page.
   ========================================================================= */

.fwm{
  --fwm-prune:#3E0C26;
  --fwm-prune-2:#5A1638;
  --fwm-encre:#2A1220;
  --fwm-gris:#6B5561;
  --fwm-ivoire:#FDF7FA;
  --fwm-filet:#EBDDE4;
  --fwm-framboise:#951753;
  --fwm-accent:#C92D78;
  --fwm-erreur:#B3261E;
  background:var(--fwm-ivoire);
  padding:28px 0 72px;
  color:var(--fwm-encre);
}
.fwm__wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}

.fwm__retour{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;margin-bottom:14px;
  font-size:14px;font-weight:600;color:var(--fwm-prune-2);text-decoration:none;
  border-radius:6px;
}
.fwm__retour svg{width:18px;height:18px;flex:none}
.fwm__retour:hover{color:var(--fwm-framboise);text-decoration:underline;text-underline-offset:3px}
.fwm__retour:focus-visible{outline:2px solid var(--fwm-framboise);outline-offset:3px}

/* --- La carte ------------------------------------------------------------ */
.fwm__carte{
  display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  background:#FFFFFF;
  border:1px solid var(--fwm-filet);border-radius:16px;
  box-shadow:0 22px 60px rgba(62,12,38,.08);
  overflow:hidden;
}

/* --- Le panneau prune ---------------------------------------------------- */
.fwm__aside{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:40px 36px;min-height:100%;
  color:#FFFFFF;background:var(--fwm-prune);
}
/* La photographie occupe le haut de la colonne, non toute sa hauteur : étirée
   sur la longueur du formulaire, elle devenait floue. Le voile la fond dans
   le prune, qui porte le texte. */
.fwm__aside-fond{position:absolute;inset:0 0 auto;height:min(620px,100%);z-index:-2}
/* Cadrée sur l'ordinateur et les mains (photo du 18/10/2026), comme la carte de l'accueil. */
.fwm__aside-fond img{object-fit:cover;object-position:40% 58%}
.fwm__aside-voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(48,10,30,.08) 0,rgba(52,11,32,.45) 300px,rgba(62,13,38,.92) 520px,#3E0C26 620px);
}
.fwm__aside-txt{position:relative;margin-top:400px}
.fwm__aside-t{
  margin:0;font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.25;letter-spacing:-.02em;
}
.fwm__aside-p{margin:12px 0 0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.84)}
.fwm__etapes{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.18);
  display:grid;gap:12px}
.fwm__etapes li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.9)}
.fwm__etapes span{
  flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-size:12px;font-weight:700;color:var(--fwm-prune);background:#F6C7DC;
}
.fwm__aside-cpf{
  display:inline-block;margin:24px 0 0;padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.28);color:#FFFFFF;
}

/* --- Le corps ------------------------------------------------------------ */
.fwm__corps{padding:44px 52px 48px;min-width:0}
.fwm__sur{
  margin:0;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fwm-framboise);
}
.fwm__t{
  margin:10px 0 0;font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1.12;
  letter-spacing:-.028em;color:var(--fwm-prune);
}
.fwm__intro{margin:14px 0 0;max-width:58ch;font-size:15.5px;line-height:1.7;color:var(--fwm-gris)}

/* --- Le formulaire ------------------------------------------------------- */
.fwm-form{margin-top:30px}
.fwm-oblig{margin:0 0 18px;font-size:13px;color:var(--fwm-gris)}
.fwm-req{color:var(--fwm-framboise);font-weight:700}
.fwm-opt{font-weight:400;font-size:13px;color:var(--fwm-gris)}
.fwm-visuel-masque{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.fwm-piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.fwm-bandeau{
  margin:0 0 22px;padding:14px 16px;border-radius:8px;
  font-size:14.5px;line-height:1.5;font-weight:500;
  color:var(--fwm-erreur);background:#FDF0EF;border:1px solid #F2C9C5;
}
.fwm-bandeau:focus{outline:2px solid var(--fwm-erreur);outline-offset:2px}

.fwm-sec{margin:0;padding:26px 0 28px;border:0;border-top:1px solid var(--fwm-filet);min-width:0;
  display:grid;gap:20px}
.fwm-sec__t{
  display:flex;align-items:baseline;gap:12px;padding:0;margin-bottom:4px;
  font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--fwm-prune);
}
/* La légende d'un fieldset se place mal dans une grille : on la sort du flux
   de la bordure, et l'espace qui la suit est porté par le gap. */
.fwm-sec > .fwm-sec__t{float:left;width:100%}
.fwm-sec__n{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--fwm-framboise)}

.fwm-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.fwm-champ{display:flex;flex-direction:column;gap:8px;min-width:0}
.fwm-champ--plein{grid-column:1 / -1}
.fwm-champ > label{font-size:14.5px;font-weight:600;color:var(--fwm-encre)}
.fwm-aide{margin:-2px 0 2px;font-size:13.5px;line-height:1.5;color:var(--fwm-gris)}

.fwm-input{
  width:100%;min-height:50px;padding:12px 14px;
  font:inherit;font-size:16px;color:var(--fwm-encre);
  background:#FFFFFF;border:1px solid #D9C8D1;border-radius:8px;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
.fwm-input::placeholder{color:#A2909A}
.fwm-input:hover{border-color:#C4AAB8}
.fwm-input:focus{outline:none;border-color:var(--fwm-framboise);box-shadow:0 0 0 3px rgba(149,23,83,.16)}
.fwm-input[aria-invalid="true"]{border-color:var(--fwm-erreur)}
.fwm-select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A1638' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;
}

/* Le numéro : l'indicatif et le numéro dans un seul cadre. */
.fwm-tel{
  display:flex;min-width:0;
  border:1px solid #D9C8D1;border-radius:8px;background:#FFFFFF;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
.fwm-tel:hover{border-color:#C4AAB8}
.fwm-tel:focus-within{border-color:var(--fwm-framboise);box-shadow:0 0 0 3px rgba(149,23,83,.16)}
.fwm-tel.est-fautif{border-color:var(--fwm-erreur)}
.fwm-tel__ind{
  position:relative;flex:none;display:flex;align-items:center;
  min-height:50px;padding:0 30px 0 14px;
  background:#FBF3F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A1638' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/16px;
  border-right:1px solid #E6D6DE;border-radius:8px 0 0 8px;
}
.fwm-tel__ind-vu{font-size:15px;font-weight:600;color:var(--fwm-prune);white-space:nowrap;font-variant-numeric:tabular-nums}
.fwm-tel__ind select{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  font-size:16px;border:0;
}
.fwm-tel__ind:has(select:focus-visible){outline:2px solid var(--fwm-framboise);outline-offset:-2px}
.fwm-tel__num{border:0;border-radius:0 8px 8px 0;min-width:0;flex:1}
.fwm-tel__num:focus{box-shadow:none}
/* La ligne garde sa hauteur même vide : elle apparaît à la sortie du champ,
   c'est-à-dire pendant le clic suivant. Si elle poussait la suite du
   formulaire à ce moment-là, la réponse visée glisserait sous le pointeur et
   le clic serait perdu. */
.fwm-retenu{margin:0;min-height:1.45em;font-size:13.5px;line-height:1.45;color:var(--fwm-gris)}
.fwm-retenu strong{color:var(--fwm-prune);font-weight:600;font-variant-numeric:tabular-nums}

.fwm-err{
  display:flex;gap:6px;align-items:flex-start;margin:0;
  font-size:13.5px;line-height:1.45;font-weight:500;color:var(--fwm-erreur);
}
.fwm-err::before{content:"!";flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;
  border-radius:50%;font-size:11px;font-weight:700;color:#FFFFFF;background:var(--fwm-erreur)}

/* --- Les questions à choix ---------------------------------------------- */
.fwm-groupe{margin:0;padding:0;border:0;min-width:0;display:grid;gap:10px}
.fwm-groupe__q{padding:0;margin-bottom:10px;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--fwm-encre)}
.fwm-choix{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:10px}
.fwm-choix__o{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px;
  font-size:14.5px;line-height:1.35;color:var(--fwm-encre);cursor:pointer;
  background:#FFFFFF;border:1px solid #E1D2DA;border-radius:8px;
  transition:border-color 160ms ease,background-color 160ms ease;
}
.fwm-choix__o input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--fwm-framboise)}
.fwm-choix__o:hover{border-color:#C9A9BA;background:#FFFBFD}
.fwm-choix__o:has(input:checked){border-color:var(--fwm-framboise);background:#FBEFF5;font-weight:500}
.fwm-choix__o:has(input:focus-visible){outline:2px solid var(--fwm-framboise);outline-offset:2px}
.fwm-groupe.est-fautif .fwm-choix__o{border-color:#E7B7B2}

/* --- Le consentement ----------------------------------------------------- */
.fwm-consent{
  display:flex;gap:12px;align-items:flex-start;margin-top:4px;padding:16px;
  border-radius:8px;background:#FBF3F7;border:1px solid transparent;
}
.fwm-consent.est-fautif{border-color:#E7B7B2;background:#FDF0EF}
.fwm-consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--fwm-framboise);cursor:pointer}
.fwm-consent input:focus-visible{outline:2px solid var(--fwm-framboise);outline-offset:2px}
.fwm-consent label{font-size:14px;line-height:1.55;color:var(--fwm-encre);cursor:pointer}
.fwm-mention{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--fwm-gris)}
.fwm-mention a{color:var(--fwm-prune-2);font-weight:600;text-underline-offset:3px}
.fwm-mention a:focus-visible{outline:2px solid var(--fwm-framboise);outline-offset:2px;border-radius:2px}
.fwm-consent + .fwm-mention + .fwm-err{margin-top:10px}

/* --- L'avancement -------------------------------------------------------- */
.fwm-ancre{scroll-margin-top:96px}
.fwm-pas{display:grid;gap:10px;margin:0 0 6px}
.fwm-pas__barres{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fwm-pas__b{height:4px;border-radius:4px;background:#EADCE3;transition:background-color 240ms ease}
.fwm-pas__b.est-fait{background:var(--fwm-framboise)}
.fwm-pas__txt{margin:0;font-size:13.5px;color:var(--fwm-gris)}
.fwm-pas__txt strong{color:var(--fwm-prune);font-weight:600}
.fwm-sec[hidden]{display:none}

/* --- L'envoi ------------------------------------------------------------- */
.fwm-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--fwm-filet)}
.fwm-envoi__retour{min-height:54px;gap:8px}
.fwm-envoi__retour svg{width:18px;height:18px}
.fwm-envoi__btn{margin-left:auto}
.fwm-envoi__btn{min-height:54px;padding:0 30px;gap:10px}
.fwm-envoi__btn[disabled]{opacity:.78;cursor:progress}
.fwm-roue{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#FFFFFF;
  animation:fwmRoue 800ms linear infinite;
}
@keyframes fwmRoue{to{transform:rotate(360deg)}}

/* --- La confirmation ----------------------------------------------------- */
.fwm-fin{margin-top:34px;padding:36px 0 8px;border-top:1px solid var(--fwm-filet)}
.fwm-fin__ico{
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  color:#FFFFFF;background:var(--fwm-prune);
}
.fwm-fin__t{
  margin:22px 0 0;font-size:clamp(24px,2.4vw,30px);font-weight:600;line-height:1.2;
  letter-spacing:-.02em;color:var(--fwm-prune);
}
.fwm-fin__t:focus{outline:none}
.fwm-fin__p{margin:12px 0 0;max-width:52ch;font-size:16px;line-height:1.7;color:var(--fwm-encre)}
.fwm-fin__s{margin:10px 0 0;max-width:52ch;font-size:14px;line-height:1.6;color:var(--fwm-gris)}
.fwm-fin__btn{margin-top:26px}

/* --- Tablette ------------------------------------------------------------ */
@media (max-width:960px){
  .fwm__carte{grid-template-columns:minmax(0,1fr)}
  .fwm__aside{padding:28px 28px 26px;min-height:0}
  .fwm__aside-txt{margin-top:120px}
  /* Sur une colonne courte, le voile se resserre : le texte est à 150 px du
     haut, il lui faut le prune dès là. */
  .fwm__aside-voile{background:linear-gradient(180deg,rgba(48,10,30,.10) 0%,rgba(58,12,36,.78) 55%,rgba(62,13,38,.95) 100%)}
  .fwm__etapes{display:none}
  .fwm__corps{padding:34px 32px 40px}
}

/* --- Téléphone ----------------------------------------------------------- */
@media (max-width:620px){
  .fwm{padding:14px 0 48px}
  .fwm__wrap{width:calc(100% - 32px)}
  .fwm__carte{border-radius:14px}
  .fwm__aside{padding:22px 20px}
  .fwm__aside-txt{margin-top:84px}
  .fwm__aside-p,.fwm__aside-cpf{display:none}
  .fwm__aside-t{font-size:19px}
  .fwm__corps{padding:26px 18px 30px}
  .fwm-grille{grid-template-columns:minmax(0,1fr)}
  .fwm-choix{grid-template-columns:minmax(0,1fr)}
  .fwm-tel__ind{padding-left:12px}
  .fwm-envoi{flex-direction:column-reverse;align-items:stretch}
  .fwm-envoi__btn,.fwm-envoi__retour{width:100%;justify-content:center;margin-left:0}
  .fwm-fin__btn{width:100%;justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .fwm-roue{animation-duration:2s}
  .fwm-pas__b{transition:none}
  .fwm-input,.fwm-tel,.fwm-choix__o{transition:none}
}