/* ==========================================================================
   Profils d'inscription · rendu « html » · thème « Éditeur » (charte algodata v1.1)
   [2026-10-11] AJOUT - GIPAD-9384

   Habille le profil html comme le formulaire de contact de la charte Éditeur (ad-composants.css §17 :
   .ad-form, .ad-champ, .ad-btn--encre) : libellés au-dessus, champs de 48 px à filet acier, rayon 10 px,
   focus d'encre, bouton d'encre. Pas de carte ni de fond : la page hôte fournit le cadre (iframe de
   preprod.algodata.fr/contact, ou fragment inséré). Les jetons --ad-* de la page hôte priment s'ils existent.
   Portée : uniquement sous [data-version="html"].
   AUTEUR : Antoine LAGIER / Claude — RÉFÉRENCE : GIPAD-9384
   ========================================================================== */

[data-version="html"] {
  --pe-texte: var(--ad-texte, #111112);
  --pe-doux: var(--ad-texte-doux, #4F4F4F);
  --pe-discret: var(--ad-texte-discret, #6A6A6A);
  --pe-filet: var(--ad-filet, #E4E4E4);
  --pe-bordure: var(--ad-champ-bordure, #8C8C8C);
  --pe-surface: var(--ad-surface, #FFFFFF);
  --pe-creux: var(--ad-surface-creuse, #FAFAFA);
  --pe-focus: var(--ad-focus, #111112);
  --pe-erreur: var(--ad-erreur, #B3261E);
  --pe-erreur-fond: var(--ad-erreur-fond, #FCEBEA);
  --pe-encre-survol: var(--ad-encre-survol, #2E2E2E);
  --pe-rayon: var(--ad-r-2, 10px);
  --pe-ecart-v: var(--ad-e-5, 20px);
  --pe-ecart-h: var(--ad-e-6, 24px);
  font-family: var(--ad-police-texte, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 1rem; line-height: 1.5; color: var(--pe-texte);
  background: transparent;
  width: 100%;
  max-width: 880px;
  padding: clamp(20px, 3vw, 36px);
  -webkit-font-smoothing: antialiased;
}
[data-version="html"] *, [data-version="html"] *::before, [data-version="html"] *::after { box-sizing: border-box; }

/* ce que la page hôte dit déjà : en-tête d'événement, pied vide, mode test hors page */
[data-version="html"] [data-entete-evenement] { display: none; }
[data-version="html"] [data-pied]:not(:has(*:not(br))) { display: none; }

/* --- Étapes (profil à plusieurs étapes) : une ligne discrète, l'étape en cours soulignée d'encre --- */
[data-version="html"] nav ol { list-style: none; margin: 0 0 var(--ad-e-8, 32px); padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; counter-reset: etape; }
[data-version="html"] nav li { counter-increment: etape; color: var(--pe-discret); font-size: .9375rem; padding-bottom: 6px; border-bottom: 2px solid transparent; }
[data-version="html"] nav li::before { content: counter(etape) ". "; font-variant-numeric: tabular-nums; }
[data-version="html"] nav li[aria-current="step"] { color: var(--pe-texte); font-weight: 600; border-bottom-color: var(--pe-texte); }
[data-version="html"] nav a { color: inherit; text-decoration: none; }
[data-version="html"] nav a:hover { color: var(--pe-texte); }

/* --- L'étape --- */
[data-version="html"] section { display: grid; gap: var(--ad-e-6, 24px); min-width: 0; }
[data-version="html"] [data-titre-etape] {
  margin: 0; font-family: var(--ad-police-titre, inherit); font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--pe-texte);
}
[data-version="html"] [data-entete] { color: var(--pe-doux); margin-top: calc(-1 * var(--ad-e-2, 8px)); max-width: 60ch; }
[data-version="html"] :is([data-entete], [data-pied]) > :last-child { margin-bottom: 0; }

[data-version="html"] :is([data-erreurs], [data-doublon]) {
  padding: 12px 16px; border-radius: var(--pe-rayon); background: var(--pe-erreur-fond); color: var(--pe-erreur);
  font-size: .9375rem; font-weight: 600;
}
[data-version="html"] :is([data-erreurs], [data-doublon]) p { margin: 0; }
[data-version="html"] [data-doublons] { margin: 0; padding-left: 1.25em; color: var(--pe-doux); }

/* --- Le formulaire : la grille de .ad-form (deux colonnes, message et listes sur toute la largeur) --- */
[data-version="html"] form { display: grid; gap: var(--ad-e-8, 32px); container-type: inline-size; }
[data-version="html"] fieldset {
  border: 0; margin: 0; padding: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pe-ecart-v) var(--pe-ecart-h);
}
[data-version="html"] fieldset > :is(:has(textarea), [data-type="liste"], [data-type="fichier"], [data-type="booleen"], :not([data-champ])) { grid-column: 1 / -1; }
@container (max-width: 560px) { [data-version="html"] fieldset { grid-template-columns: minmax(0, 1fr); } }

/* chaque champ : le libellé au-dessus, quel que soit le réglage « libellé à gauche » (.ad-champ) */
[data-version="html"] [data-champ] { display: grid; gap: 8px; align-content: start; min-width: 0; }
[data-version="html"] [data-champ] > label { font-weight: 600; font-size: .9375rem; line-height: 1.4; color: var(--pe-texte); }
/* obligatoire : l'astérisque reste lisible mais discret ; facultatif : la mention en clair */
[data-version="html"] [data-marque-obligatoire] { color: var(--pe-discret); font-weight: 400; margin-left: 2px; }
[data-version="html"] [data-champ]:not([data-obligatoire]):not([data-type="booleen"]) > label:not(:empty)::after {
  content: " (facultatif)"; font-weight: 400; color: var(--pe-discret);
}
/* bloc d'erreur du composant courriel hérité : vide, il ne doit pas ajouter d'écart ; plein, il s'affiche sous le champ */
[data-version="html"] [data-champ] > div:not([data-fichier]) { margin-top: -8px; color: var(--pe-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: 48px; padding: 11px 14px; margin: 0;
  font: inherit; font-size: 16px; color: var(--pe-texte); background: var(--pe-surface);
  border: 1px solid var(--pe-bordure); border-radius: var(--pe-rayon);
  box-shadow: none; appearance: none;
}
[data-version="html"] [data-champ] select {
  padding-right: 44px; cursor: pointer;
  background: var(--pe-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111112' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
}
[data-version="html"] textarea { min-height: 140px; resize: vertical; }
[data-version="html"] ::placeholder { color: var(--pe-discret); opacity: 1; }
[data-version="html"] :is(input, select, textarea):focus-visible { outline: 2px solid var(--pe-focus); outline-offset: 1px; border-color: var(--pe-focus); }
[data-version="html"] :is(input, select, textarea):disabled { background: var(--pe-creux); color: var(--pe-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(--pe-erreur); box-shadow: 0 0 0 1px var(--pe-erreur); }
[data-version="html"] [data-erreur] { color: var(--pe-erreur); font-size: .8125rem; font-weight: 600; }
[data-version="html"] [data-aide] { color: var(--pe-discret); font-size: .8125rem; }
[data-version="html"] input:is([type="checkbox"], [type="radio"]) { width: 18px; height: 18px; margin: 0 8px 0 0; accent-color: var(--pe-texte); vertical-align: -3px; }

/* fichier (composant hérité, étape 1) : un bouton secondaire */
[data-version="html"] [data-fichier] a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--pe-rayon);
  border: 1px solid var(--pe-bordure); background: var(--pe-surface); color: var(--pe-texte); font-weight: 600; text-decoration: none;
}

/* --- Actions : le bouton d'encre de la charte (.ad-btn--encre) --- */
[data-version="html"] [data-actions] { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-start; }
[data-version="html"] [data-actions] :is(input[type="submit"], button, a) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border-radius: var(--pe-rayon); font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid var(--pe-bordure); background: var(--pe-surface); color: var(--pe-texte); cursor: pointer; text-decoration: none;
}
[data-version="html"] [data-actions] :is(input, button, a)[data-action="suivant"] { order: 2; background: var(--pe-texte); border-color: var(--pe-texte); color: var(--pe-surface); }
[data-version="html"] [data-actions] :is(input, button, a)[data-action="precedent"] { order: 1; }
[data-version="html"] [data-actions] :focus-visible { outline: 2px solid var(--pe-focus); outline-offset: 3px; }
@media (hover: hover) {
  [data-version="html"] [data-actions] :is(input, button, a)[data-action="suivant"]:hover { background: var(--pe-encre-survol); transition: background-color .12s ease; }
  [data-version="html"] [data-actions] :is(input, button, a):not([data-action="suivant"]):hover { border-color: var(--pe-texte); transition: border-color .12s ease; }
}
@media (max-width: 480px) {
  [data-version="html"] [data-actions] :is(input, button, a)[data-action="suivant"] { flex: 1 1 100%; }
}