/* ==========================================================================
   Profils d'inscription · rendu « html » · thème « Signature »
   [2026-10-10] AJOUT - GIPAD-9384 · [2026-10-11] v2 : formulaire d'une étape sans cadre teinté, libellés
   au-dessus quand la place manque, « (facultatif) » en clair, bloc d'erreur hérité sans écart

   Même HTML pur que profil-html-front41.css, autre présentation : le formulaire posé en carte sur un
   fond teinté, la frise des étapes reliées (faites / en cours / à venir), des champs amples et un focus
   en halo, une zone de dépôt pour les fichiers, la barre d'action collée en bas sur mobile.
   Seule la couleur primaire vient du mini-site (--bs-primary) : chaque événement garde sa marque.
   Portée : uniquement sous [data-version="html"].
   AUTEUR : Antoine LAGIER / Claude — RÉFÉRENCE : GIPAD-9384
   ========================================================================== */

[data-version="html"] {
  --ps-accent: var(--bs-primary, #2f5bea);
  --ps-accent-rgb: var(--bs-primary-rgb, 47, 91, 234);
  --ps-encre: #16181d;
  --ps-texte: #2b2f38;
  --ps-doux: #5f6675;
  --ps-discret: #8a909c;
  --ps-filet: #e6e8ec;
  --ps-champ: #d5d8de;
  --ps-fond: color-mix(in srgb, var(--ps-accent) 5%, #f6f7f9);
  --ps-carte: #ffffff;
  --ps-erreur: #c4321f;
  --ps-ok: #1f7a4d;
  --ps-r-carte: 1.25rem;
  --ps-r-champ: .75rem;
  --ps-ombre: 0 1px 2px rgba(22, 24, 29, .04), 0 18px 40px -18px rgba(22, 24, 29, .18);
  color: var(--ps-texte);
  font-family: inherit;
  line-height: 1.55;
  width: 100%;
  max-width: 72rem;
  margin: 1.5rem auto 3rem;
  padding: clamp(1rem, 3.5vw, 2.5rem);
  background: var(--ps-fond);
  border-radius: calc(var(--ps-r-carte) + .5rem);
}

/* une seule étape (pas de frise) : la carte seule, sans le cadre teinté autour */
[data-version="html"]:not(:has(> nav)) { background: transparent; padding: 0; margin: 0 auto; border-radius: 0; }

/* --- Composition : frise à gauche, carte à droite --- */
[data-version="html"]:has(> nav[data-navigation="vertical"]) {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
[data-version="html"] > :not(nav, section) { grid-column: 1 / -1; }

/* --- Frise des étapes --- */
[data-version="html"] nav[data-navigation="vertical"] { position: sticky; top: 1.5rem; padding-top: .5rem; }
[data-version="html"] nav ol { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
[data-version="html"] nav li {
  counter-increment: etape;
  position: relative;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .875rem; align-items: center;
  padding: 0 0 1.375rem;
  color: var(--ps-doux); font-size: .9375rem; line-height: 1.35;
}
[data-version="html"] nav li::before {
  content: counter(etape);
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--ps-carte); color: var(--ps-discret);
  box-shadow: inset 0 0 0 1.5px var(--ps-champ);
  position: relative; z-index: 1;
}
[data-version="html"] nav li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px;
  background: var(--ps-filet);
}
/* étapes faites : celles qui précèdent l'étape en cours */
[data-version="html"] nav li:has(~ li[aria-current="step"]) { color: var(--ps-texte); }
[data-version="html"] nav li:has(~ li[aria-current="step"])::before {
  content: ""; background: var(--ps-accent) center / 1rem no-repeat;
  -webkit-mask: none; box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
[data-version="html"] nav li:has(~ li[aria-current="step"])::after { background: var(--ps-accent); }
/* étape en cours */
[data-version="html"] nav li[aria-current="step"] { color: var(--ps-encre); font-weight: 600; }
[data-version="html"] nav li[aria-current="step"]::before {
  background: var(--ps-accent); color: #fff; box-shadow: 0 0 0 5px rgba(var(--ps-accent-rgb), .16);
}
[data-version="html"] nav a { color: inherit; text-decoration: none; border-radius: .25rem; }
[data-version="html"] nav a:hover { color: var(--ps-accent); }
[data-version="html"] nav a:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 3px; }
[data-version="html"] nav[data-navigation="horizontal"] ol { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
[data-version="html"] nav[data-navigation="horizontal"] li { padding: 0; }
[data-version="html"] nav[data-navigation="horizontal"] li::after { display: none; }

/* --- La carte de l'étape --- */
[data-version="html"] section {
  min-width: 0;
  background: var(--ps-carte); border-radius: var(--ps-r-carte); box-shadow: var(--ps-ombre);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  display: grid; gap: 1.5rem;
}
[data-version="html"] [data-titre-etape] {
  margin: 0; color: var(--ps-encre);
  font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
[data-version="html"] [data-entete] { color: var(--ps-doux); margin-top: -.75rem; max-width: 60ch; }
[data-version="html"] [data-pied] { color: var(--ps-doux); font-size: .875rem; }
[data-version="html"] :is([data-entete], [data-pied]) > :last-child { margin-bottom: 0; }

[data-mode-test] {
  max-width: 72rem; margin: 0 auto .75rem; padding: .5rem .875rem;
  border-radius: 999px; background: #fff6e5; color: #7a4b00; font-size: .8125rem;
  width: fit-content;
}

[data-version="html"] [data-erreurs] {
  padding: .875rem 1rem; border-radius: var(--ps-r-champ);
  background: color-mix(in srgb, var(--ps-erreur) 8%, #fff); color: var(--ps-erreur);
}
[data-version="html"] [data-erreurs] p { margin: 0; font-weight: 600; }

/* --- Champs --- */
[data-version="html"] form { display: grid; gap: 1.5rem; container-type: inline-size; }
[data-version="html"] fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.125rem; }
[data-version="html"] [data-champ] { display: grid; gap: .4375rem; min-width: 0; }
[data-version="html"] [data-libelle="gauche"] {
  grid-template-columns: minmax(8.5rem, 11.5rem) minmax(0, 1fr);
  column-gap: 1.5rem; align-items: center;
}
[data-version="html"] [data-libelle="gauche"] > :not(label) { grid-column: 2; }
/* libellé à gauche seulement s'il reste au moins 26 rem pour le champ */
@container (max-width: 40rem) {
  [data-version="html"] [data-libelle="gauche"] { grid-template-columns: minmax(0, 1fr); }
  [data-version="html"] [data-libelle="gauche"] > :not(label) { grid-column: 1; }
}
[data-version="html"] [data-champ] > label { font-size: .875rem; font-weight: 600; color: var(--ps-texte); letter-spacing: .005em; }
[data-version="html"] [data-marque-obligatoire] { color: var(--ps-accent); font-weight: 700; }
[data-version="html"] [data-champ]:not([data-obligatoire]):not([data-type="booleen"]) > label:not(:empty)::after { content: " (facultatif)"; font-weight: 400; color: var(--ps-discret); }
/* bloc d'erreur du composant courriel hérité : vide, sans écart ; plein, sous le champ */
[data-version="html"] [data-champ] > div:not([data-fichier]) { margin-top: -.4375rem; color: var(--ps-erreur); font-size: .8125rem; font-weight: 600; }

[data-version="html"] :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="file"]), select, textarea) {
  width: 100%; min-height: 3.125rem; padding: .75rem 1rem;
  font: inherit; font-size: 1rem; color: var(--ps-encre);
  background: #fff; border: 1px solid var(--ps-champ); border-radius: var(--ps-r-champ);
  box-shadow: 0 1px 1px rgba(22, 24, 29, .03);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* [data-champ] : passe devant la règle commune des champs, qui remet le fond à blanc */
[data-version="html"] [data-champ] select {
  appearance: none; padding-right: 2.75rem; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235f6675' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 1rem center / 1rem no-repeat;
}
[data-version="html"] textarea { min-height: 7.5rem; resize: vertical; }
[data-version="html"] :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: #b9bdc6; }
[data-version="html"] :is(input, select, textarea):focus-visible {
  outline: none; border-color: var(--ps-accent);
  box-shadow: 0 0 0 4px rgba(var(--ps-accent-rgb), .14);
}
[data-version="html"] :is(input, select, textarea):disabled { background: #f6f7f9; color: var(--ps-discret); cursor: not-allowed; }
[data-version="html"] :is(input, select, textarea)[aria-invalid="true"],
[data-version="html"] :is(input, select, textarea):user-invalid {
  border-color: var(--ps-erreur); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ps-erreur) 12%, transparent);
}
[data-version="html"] [data-erreur] { color: var(--ps-erreur); font-size: .8125rem; font-weight: 600; }
[data-version="html"] [data-aide] { color: var(--ps-discret); font-size: .8125rem; }
[data-version="html"] input[type="checkbox"], [data-version="html"] input[type="radio"] { width: 1.125rem; height: 1.125rem; accent-color: var(--ps-accent); }

/* Fichier : zone de dépôt (composant hérité, étape 1) */
[data-version="html"] [data-fichier] a {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  width: 100%; min-height: 3.5rem; padding: .75rem 1rem;
  border: 1.5px dashed var(--ps-champ); border-radius: var(--ps-r-champ); background: #fbfbfc;
  color: var(--ps-doux); font-size: .9375rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
[data-version="html"] [data-fichier] a::before {
  content: ""; width: 1.125rem; height: 1.125rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13V3M6 7l4-4 4 4M3 13v2.5A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5V13'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13V3M6 7l4-4 4 4M3 13v2.5A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5V13'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-version="html"] [data-fichier] a:hover { border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(var(--ps-accent-rgb), .04); }

/* --- Actions --- */
[data-version="html"] [data-actions] {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: flex-end;
  padding-top: 1.25rem; border-top: 1px solid var(--ps-filet);
}
[data-version="html"] [data-actions] :is(input[type="submit"], button, a) {
  min-height: 3.125rem; padding: 0 1.5rem; border-radius: var(--ps-r-champ);
  font: inherit; font-weight: 600; letter-spacing: .01em; cursor: pointer;
  border: 1px solid var(--ps-champ); background: #fff; color: var(--ps-texte);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
[data-version="html"] [data-actions] :is(input, button, a)[data-action="precedent"] { margin-right: auto; }
[data-version="html"] [data-actions] :is(input, button, a)[data-action="suivant"] {
  min-width: 11rem; background: var(--ps-accent); border-color: var(--ps-accent); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(var(--ps-accent-rgb), .7);
}
[data-version="html"] [data-actions] :is(input, button, a)[data-action="suivant"]:hover {
  background: color-mix(in srgb, var(--ps-accent) 88%, #000); transform: translateY(-1px);
}
[data-version="html"] [data-actions] :is(input, button, a)[data-action="suivant"]:active { transform: translateY(0); }
[data-version="html"] [data-actions] :focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 3px; }

/* --- Mobile --- */
@media (max-width: 860px) {
  [data-version="html"] { border-radius: 0; margin: 0; }
  [data-version="html"]:has(> nav[data-navigation="vertical"]) { grid-template-columns: minmax(0, 1fr); }
  [data-version="html"] nav[data-navigation="vertical"] { position: static; margin-bottom: 1rem; overflow-x: auto; }
  [data-version="html"] nav[data-navigation="vertical"] ol { display: flex; gap: 0; }
  [data-version="html"] nav[data-navigation="vertical"] li {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    min-width: 5.5rem; padding: 0 .25rem; font-size: .75rem;
  }
  [data-version="html"] nav[data-navigation="vertical"] li > :is(a, span) { display: none; }
  [data-version="html"] nav[data-navigation="vertical"] li[aria-current="step"] { font-size: .8125rem; }
  [data-version="html"] nav[data-navigation="vertical"] li:not(:last-child)::after {
    left: calc(50% + 1rem); right: calc(-50% + 1rem); top: 1rem; bottom: auto; width: auto; height: 2px;
  }
}
@media (max-width: 640px) {
  [data-version="html"] [data-libelle="gauche"] { grid-template-columns: minmax(0, 1fr); }
  [data-version="html"] [data-libelle="gauche"] > :not(label) { grid-column: 1; }
  [data-version="html"] [data-actions] {
    position: sticky; bottom: 0; z-index: 2;
    margin-inline: calc(-1 * clamp(1.25rem, 3vw, 2.5rem));
    padding: .875rem clamp(1.25rem, 3vw, 2.5rem); background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
  }
  [data-version="html"] [data-actions] :is(input, button, a)[data-action="suivant"] { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  [data-version="html"] * { transition: none !important; }
}