/* ============================================================================
   Et Bien Dansez Maintenant · le parcours d'inscription · 12/10/2026
   S'ajoute à style.css (le style retenu). Toutes les couleurs viennent de ses réglages,
   donc le thème de jour et le thème de nuit suivent tout seuls.
   ========================================================================== */
[hidden] { display: none !important; }
.grille-parcours:has(.resume[hidden]) { grid-template-columns: minmax(0, 760px); justify-content: center; }
.parcours .titre-page { padding: 48px 0 40px; }
.parcours section { padding: 44px 0 72px; }
.grille-parcours { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }

/* le fil des étapes */
.fil { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 26px; padding: 0; grid-column: 1 / -1; }
.fil li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--carte); border: 1.5px solid var(--trait); font-size: 14.5px; font-weight: 600; color: var(--doux); }
.fil li b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--marque-clair); color: var(--marque-texte); font: 600 15px/1 var(--corps); }
.fil li.ici { border-color: var(--marque); color: var(--encre); }
.fil li.ici b { background: var(--marque); color: #fff; }
.fil li.fait b { background: var(--or); color: #2A2236; }
.fil li.fait { color: var(--texte); }

/* le formulaire */
.bloc-parcours { background: var(--carte); border: 1px solid var(--trait); border-radius: 26px; padding: 34px; box-shadow: var(--ombre); }
.etape h2 { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 8px; }
.etape h3 { font-size: 20px; margin: 30px 0 12px; }
.etape .aide { color: var(--doux); font-size: 15.5px; margin: 0 0 20px; }
.choix { display: grid; gap: 14px; margin-top: 18px; }
.choix.deux { grid-template-columns: 1fr 1fr; }
.choix.trois { grid-template-columns: repeat(3, 1fr); }
.carte-choix { position: relative; display: block; padding: 18px 18px 18px 52px; border: 1.5px solid var(--trait); border-radius: 18px; background: var(--fond); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.carte-choix:hover { transform: translateY(-2px); border-color: var(--doux); }
.carte-choix input { position: absolute; left: 18px; top: 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--marque); cursor: pointer; }
.carte-choix .titre { display: block; font: 600 19px/1.25 var(--titre); color: var(--encre); }
.carte-choix .texte { display: block; font-size: 14px; line-height: 1.45; color: var(--doux); margin-top: 4px; }
.carte-choix:has(input:checked) { border-color: var(--marque); background: var(--marque-clair); }
.carte-choix:has(input:focus-visible) { outline: 3px solid var(--or); outline-offset: 2px; }
.carte-choix.passeport { margin-bottom: 22px; }

/* les cours, rangés par jour */
.groupe-jour { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.groupe-jour legend { font: 600 21px/1.2 var(--titre); color: var(--encre); padding: 0; margin-bottom: 10px; }
.groupe-jour legend span { font: 400 13px/1 var(--corps); color: var(--doux); margin-left: 8px; }
.groupe-jour legend span.j-pose { font-family: 'DM Serif Display', 'Times New Roman', 'Noto Serif', 'Liberation Serif', serif; font-size: inherit; font-weight: 400; line-height: inherit; color: inherit; margin-left: 0; }
.liste-cours { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.etape h2:focus { outline: none; }
.champ { position: relative; }
.propositions { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; list-style: none; margin: 4px 0 0; padding: 6px; background: var(--carte); border: 1.5px solid var(--marque); border-radius: 14px; box-shadow: var(--ombre); }
.propositions li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.35; color: var(--encre); cursor: pointer; }
.propositions li b { font-weight: 600; }
.propositions li span { color: var(--doux); white-space: nowrap; }
.propositions li:hover, .propositions li.actif { background: var(--marque-clair); }
.propositions li.source { justify-content: flex-end; padding: 5px 12px 2px; font-size: 11.5px; color: var(--doux); cursor: default; background: none; }
.choix-cours { position: relative; display: grid; grid-template-columns: 22px 124px 30px 1fr; gap: 10px; align-items: center; padding: 13px 14px; border: 1.5px solid var(--trait); border-radius: 14px; background: var(--fond); cursor: pointer; font-size: 15px; line-height: 1.3; color: var(--encre); }
.choix-cours input { width: 19px; height: 19px; margin: 0; accent-color: var(--marque); cursor: pointer; }
.choix-cours .heure { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--marque-texte); white-space: nowrap; }
.choix-cours small { display: block; font-size: 12.5px; color: var(--doux); }
.choix-cours:has(input:checked) { border-color: var(--marque); background: var(--marque-clair); }
.choix-cours:has(input:disabled) { opacity: .55; cursor: default; }
.choix-cours:has(input:focus-visible) { outline: 3px solid var(--or); outline-offset: 2px; }

/* les coordonnées */
.personne { border-top: 1px solid var(--trait); padding-top: 22px; margin-top: 24px; }
.personne:first-child { border-top: 0; padding-top: 0; margin-top: 14px; }
.personne > h3 { margin: 0 0 14px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.champ { min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ label, .champ .intitule { display: block; font-size: 14px; font-weight: 600; color: var(--encre); margin-bottom: 6px; }
.champ label i, .champ .intitule i { font-style: normal; font-weight: 400; color: var(--doux); }
.champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ input[type="date"], .champ select, .parcours textarea { width: 100%; font: 400 16px/1.4 var(--corps); color: var(--encre); background: var(--fond); border: 1.5px solid var(--trait); border-radius: 14px; padding: 13px 15px; }
.champ input:focus, .champ select:focus, .parcours textarea:focus { outline: none; border-color: var(--marque); }
.champ.faux input, .champ.faux select { border-color: #C9432B; }
.champ .erreur { display: none; font-size: 13px; color: #C9432B; margin-top: 5px; }
.champ.faux .erreur { display: block; }
html[data-theme="nuit"] .champ.faux input, html[data-theme="nuit"] .champ.faux select { border-color: #FF9A85; }
html[data-theme="nuit"] .champ .erreur, html[data-theme="nuit"] .erreur-etape { color: #FF9A85; }
.radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radios label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--fond); font-size: 15px; font-weight: 500; color: var(--encre); cursor: pointer; margin: 0; }
.radios label:has(input:checked) { border-color: var(--marque); background: var(--marque-clair); }
.radios input { accent-color: var(--marque); margin: 0; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--texte); cursor: pointer; margin: 4px 0 0; padding: 11px 0; min-height: 44px; box-sizing: border-box; }   /* 18/10/2026 : 44 px à toucher (22 px avant), même écart qu'avant */
.case input { width: 19px; height: 19px; margin: 2px 0 0; flex: none; accent-color: var(--marque); }
/* « Pour le club » : profession, pointure, T-shirt, à remplir comme le reste (14/10/2026) */
.pour-le-club { margin-top: 18px; border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px 16px; }
.pour-le-club h4 { margin: 0 0 12px; font: 600 15px/1.2 var(--corps); color: var(--marque-texte); }
.pour-le-club .champs { grid-template-columns: repeat(3, 1fr); }
/* un petit dessin devant « Cavalier » et « Cavalière » (14/10/2026) */
.picto-role { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--marque-texte); }
/* l'adresse sur une seule ligne (14/10/2026) : le lien de secours sous la case */
.lien-adresse { display: inline-block; margin: 0; padding: 12px 0; min-height: 44px; box-sizing: border-box; border: 0;   /* 18/10/2026 : 44 px à toucher, le texte ne change pas */ background: none; font: 500 13.5px/1.3 var(--corps); color: var(--marque-texte); text-decoration: underline; cursor: pointer; }
.champ .adresse-ok { display: none; margin-top: 6px; font-size: 13px; color: var(--doux); }
.champ.adresse-choisie .adresse-ok { display: block; }
.erreur-etape { color: #C9432B; font-size: 15px; font-weight: 600; margin: 16px 0 0; min-height: 1px; }
.erreur-etape:empty { display: none; }
.pied-etape { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--trait); }
.pied-etape .btn[hidden] { display: none; }

/* le récapitulatif */
.recap-bloc { border: 1px solid var(--trait); border-radius: 16px; padding: 16px 18px; margin-top: 14px; background: var(--fond); }
.recap-bloc h3 { margin: 0 0 8px; font-size: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.recap-bloc h3 button { border: 0; background: none; font: 600 13.5px/1 var(--corps); color: var(--marque-texte); text-decoration: underline; cursor: pointer; padding: 10px 6px; margin: -10px -6px; }   /* 15/10/2026 : une zone à toucher plus grande, sans rien déplacer */
.recap-bloc ul { list-style: none; margin: 0; padding: 0; }
.recap-bloc li { padding: 4px 0; font-size: 15px; line-height: 1.4; color: var(--texte); }
.recap-bloc li b { color: var(--encre); font-weight: 600; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--trait); font-size: 15px; color: var(--texte); }
.total b { font: 600 26px/1 var(--titre); color: var(--encre); }
.sans-paiement { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 13px 16px; border-radius: 14px; background: var(--marque-clair); color: var(--encre); font-size: 14.5px; line-height: 1.45; }
.conditions { font-size: 13.5px; line-height: 1.5; color: var(--doux); margin: 18px 0 0; }
/* 15/10/2026 (vrai site) : l'envoi au serveur n'a pas marché : le message et le bouton « Réessayer », en haut du récapitulatif */
.envoi-echec { margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #C9432B; background: #FDF1EF; color: #8E2A17; font-size: 15px; line-height: 1.45; text-align: left; }
.envoi-echec p { margin: 0 0 12px; font-weight: 600; }
html[data-theme="nuit"] .envoi-echec { background: rgba(255, 154, 133, .12); border-color: #FF9A85; color: #FFB4A9; }
.pied-etape .btn:disabled { opacity: .6; cursor: wait; }

/* le panneau « votre sélection » */
.resume { position: sticky; top: 100px; background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 22px; }
.resume h3 { font-size: 19px; margin-bottom: 10px; }
.resume p { font-size: 14.5px; line-height: 1.45; margin: 0 0 8px; color: var(--texte); }
.resume ul { list-style: none; margin: 0 0 8px; padding: 0; }
.resume li { font-size: 14px; line-height: 1.4; padding: 5px 0; border-top: 1px solid var(--trait); color: var(--encre); }
.resume li small { display: block; color: var(--doux); font-size: 12.5px; }
.resume .vide { color: var(--doux); }
.resume .conseil { font-size: 13.5px; background: var(--marque-clair); border-radius: 12px; padding: 10px 12px; color: var(--encre); }

/* la confirmation */
.merci { text-align: center; padding: 20px 0 6px; }
.merci .rond { width: 72px; height: 72px; border-radius: 50%; background: var(--or); display: grid; place-items: center; margin: 0 auto 18px; }
.merci .rond svg { width: 34px; height: 34px; stroke: #2A2236; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.merci .chapeau { margin: 12px auto 0; }
.merci .actions { justify-content: center; margin-top: 24px; }
.merci .actions .btn { line-height: 1.25; }   /* 15/10/2026 : à 360 px, un bouton sur deux lignes avait ses lignes collées */
.merci .recap-bloc { text-align: left; }
.maquette { margin: 22px auto 0; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--doux); border: 1px dashed var(--trait); border-radius: 12px; padding: 10px 14px; }

@media (max-width: 980px) {
  .grille-parcours { grid-template-columns: minmax(0, 1fr); }   /* 15/10/2026 : avec « 1fr », le fil des étapes élargissait la colonne à 360 px */
  .resume { position: static; order: 3; }
  .fil li span { display: none; }
  .fil li { justify-content: center; padding: 10px; }
  .fil li.ici span { display: inline; }
  .fil { grid-template-columns: repeat(4, auto); justify-content: start; }
}
@media (max-width: 640px) {
  .bloc-parcours { padding: 22px 18px; border-radius: 22px; }
  .choix.deux, .choix.trois, .liste-cours, .champs, .pour-le-club .champs { grid-template-columns: 1fr; }
  .choix-cours { grid-template-columns: 22px 108px 30px 1fr; gap: 8px; }
  .propositions li { flex-direction: column; gap: 1px; }
  .pied-etape { flex-direction: column-reverse; }
  .pied-etape .btn { width: 100%; }
  /* 15/10/2026 : à 360-390 px, l'heure collait au pictogramme et le nom du cours tenait sur 3 ou 4 lignes : l'heure passe au-dessus du nom */
  .choix-cours { grid-template-columns: 22px 30px minmax(0, 1fr); row-gap: 2px; }
  .choix-cours input { grid-column: 1; grid-row: 1 / 3; }
  .choix-cours > :nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
  .choix-cours .heure { grid-column: 3; grid-row: 1; }
  .choix-cours > :last-child { grid-column: 3; grid-row: 2; }
  /* 15/10/2026 : le fil des étapes tient dans 360 px */
  .fil { gap: 6px; }
  .fil li { padding: 10px 8px; }
}
@media print {
  .haut, .bas, .fil, .resume, .pied-etape, .titre-page, .merci .actions, .maquette, .jour-nuit { display: none !important; }
  body { background: #fff; }
  .bloc-parcours { box-shadow: none; border: 0; padding: 0; }
  .grille-parcours { display: block; }
}

/* ---------- après la demande : un imprévu (modifier, annuler), et les mails que la personne recevra (12/10/2026) ---------- */
#merci-suite { margin-top: 26px; display: grid; gap: 14px; text-align: left; }
.imprevu { border: 1.5px solid var(--trait); border-radius: 18px; padding: 20px 22px; background: var(--carte); }
.imprevu h3 { margin: 0 0 6px; font: 600 20px/1.2 var(--titre); color: var(--encre); }
.imprevu p { margin: 0 0 14px; color: var(--texte); font-size: 15.5px; }
.merci .imprevu .actions, .merci .confirmer .actions { margin: 0; justify-content: flex-start; }
.merci #merci-suite .actions.centre { margin: 0; justify-content: center; }
.btn.btn-annuler { background: transparent; color: #B3261E; border-color: #B3261E; }
.btn.btn-annuler:hover, .btn.btn-annuler.plein { background: #B3261E; color: #fff; }
.confirmer { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: #FDF1EF; border: 1px solid #F3C7C1; }
.confirmer p { margin: 0 0 12px; color: #7A1C16; font-weight: 600; }
html[data-theme="nuit"] .confirmer { background: rgba(255, 180, 169, .08); border-color: rgba(255, 180, 169, .35); }
html[data-theme="nuit"] .confirmer p { color: #FFB4A9; }
html[data-theme="nuit"] .btn.btn-annuler { color: #FFB4A9; border-color: #FFB4A9; }
html[data-theme="nuit"] .btn.btn-annuler:hover, html[data-theme="nuit"] .btn.btn-annuler.plein { background: #B3261E; color: #fff; border-color: #B3261E; }
.apercu-courrier { border: 1.5px solid var(--trait); border-radius: 18px; background: var(--carte); overflow: hidden; }
.apercu-courrier summary { cursor: pointer; padding: 15px 20px; font-weight: 600; color: var(--encre); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.apercu-courrier summary::-webkit-details-marker { display: none; }
.apercu-courrier summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--accent); }
.apercu-courrier[open] summary::after { content: "–"; }
.courrier-entete { padding: 0 20px 12px; font-size: 13.5px; color: var(--texte); display: grid; gap: 3px; border-bottom: 1px solid var(--trait); overflow-wrap: anywhere; }
.courrier-entete span { display: inline-block; width: 46px; color: var(--doux); }
.courrier-entete b { color: var(--encre); }
.courrier-corps a { cursor: pointer; }
.bandeau-suite { margin: 0 0 18px; padding: 13px 16px; border-radius: 14px; background: color-mix(in srgb, var(--marque) 10%, transparent); color: var(--encre); font-weight: 600; font-size: 15px; border-left: 4px solid var(--marque); }
@media print { #merci-suite { display: none !important; } }
/* la réinscription déjà remplie : le lien de démonstration, et « je ne me réinscris pas » */
.demo-reinscription { margin: 22px 0 0; font-size: 14.5px; color: var(--doux); }
.refus-reinscription { margin: -8px 0 18px; }
.refus-reinscription button { border: 0; background: none; padding: 0; font: 500 14.5px/1.4 var(--corps); color: var(--doux); text-decoration: underline; cursor: pointer; }
.refus-reinscription button:hover { color: var(--encre); }

/* 24/10/2026 : logos des coordonnées */
#personnes .champ[data-champ="prenom"] input, #r-prenom { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4.5%2020.5c.8-4%203.8-6.5%207.5-6.5s6.7%202.5%207.5%206.5%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="nom"] input, #r-nom { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4.5%2020.5c.8-4%203.8-6.5%207.5-6.5s6.7%202.5%207.5%206.5%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="portable"] input, #r-portable { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226.5%22%20y%3D%222.5%22%20width%3D%2211%22%20height%3D%2219%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M10.5%2018.5h3%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="mail"] input, #r-mail { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225.5%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22m3.5%207%208.5%206.5L20.5%207%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="naissance"] input, #r-naissance { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="ligne"] input, #r-ligne { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.6-6.5-11a6.5%206.5%200%200%201%2013%200c0%205.4-6.5%2011-6.5%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="adresse"] input, #r-adresse { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.6-6.5-11a6.5%206.5%200%200%201%2013%200c0%205.4-6.5%2011-6.5%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="cp"] input, #r-cp { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.6-6.5-11a6.5%206.5%200%200%201%2013%200c0%205.4-6.5%2011-6.5%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="ville"] input, #r-ville { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V9l6-4v16M10%2021V11h10v10M14%2014.5h2M14%2017.5h2M6.5%2011h1M6.5%2014h1M6.5%2017h1%22%2F%3E%3Cpath%20d%3D%22M2.5%2021h19%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="profession"] input, #r-profession { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M9%207V5.5A1.5%201.5%200%200%201%2010.5%204h3A1.5%201.5%200%200%201%2015%205.5V7M3%2013h18%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .champ[data-champ="pointure"] input, #r-pointure { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016.5c0-2%201.2-3%203-3.5l3.5-1L12%208h3l1%204.5c2.5.6%204%201.8%204%203.7V18H4z%22%2F%3E%3Cpath%20d%3D%22M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
#personnes .personne h3, #personnes .pour-le-club h4 { display: flex; align-items: center; gap: 10px; }
#personnes .personne h3::before, #personnes .pour-le-club h4::before { content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(168, 88, 123, .14) no-repeat center / 18px 18px; }
#personnes .personne[data-personne="1"] h3::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4.5%2020.5c.8-4%203.8-6.5%207.5-6.5s6.7%202.5%207.5%206.5%22%2F%3E%3C%2Fsvg%3E"); }
#personnes .personne[data-personne="2"] h3::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.5%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M2.5%2020c.6-3.6%203.2-5.8%206.5-5.8s5.9%202.2%206.5%205.8%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%227%22%20r%3D%222.8%22%2F%3E%3Cpath%20d%3D%22M16.5%2012.6c2.9.2%204.7%202.2%205%205.4%22%2F%3E%3C%2Fsvg%3E"); }
#personnes .pour-le-club h4::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A8587B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V5l11-2v13%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2218%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2216%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }