/* Théo De Bergh · formulaire « Devenir partenaire » ([theo_partenaire], mu-plugin theo-partenaire.php).
 * Règles des formulaires de debergh.immo (savoir web/regles-tous-les-sites.md §4), adaptées à la charte « Poussière & Impact » :
 * carte blanc cassé posée sur l'aplat terre cuite, cases-boutons arrondies à 8 px en grille (jamais de pilule). */
.tos-form {
  --f-encre: #151515; --f-fond: #F4F3EE; --f-trait: #CFCEC7; --f-gris: #535650; --f-orange: #BF4819; --f-erreur: #B42318; --f-ok: #2F6B3A;
  position: relative; max-width: 760px; margin: 0 auto; padding: clamp(20px, 4vw, 40px);
  background: var(--f-fond); color: var(--f-encre); border-radius: 8px; text-align: left;
  box-shadow: 0 24px 60px -24px rgba(21, 21, 21, .55);
}
.tos-form p, .tos-form legend, .tos-form label, .tos-form dd { color: inherit; }
.tos-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tos-form legend {
  font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
  font-size: 29px; line-height: 1.1; margin-bottom: .5em; padding: 0;
}
.tos-aide, .tos-memo, .tos-question small, .tos-champ small { color: var(--f-gris) !important; font-size: 13px; }
.tos-aide { margin: -.3em 0 1em; }
.tos-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fil des étapes */
.tos-fil { list-style: none; display: flex; gap: 6px; margin: 0 0 24px; padding: 0; counter-reset: e; }
.tos-fil li { flex: 1; height: 6px; border-radius: 3px; background: var(--f-trait); transition: background .3s; }
.tos-fil li.tos-fait { background: var(--f-encre); }
.tos-fil li.tos-ici { background: var(--f-orange); }

/* Cases-boutons */
.tos-puces { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tos-puce { position: relative; display: block; cursor: pointer; margin: 0; }
.tos-puce input { position: absolute; opacity: 0; pointer-events: none; }
.tos-puce span {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; height: 100%; box-sizing: border-box;
  border: 2px solid var(--f-trait); border-radius: 8px; background: #fff; font-weight: 500; line-height: 1.25;
  transition: border-color .2s, background .2s, color .2s, translate .15s;
}
.tos-puce span::before {
  content: ""; flex: none; width: 18px; height: 18px; border: 2px solid var(--f-trait); border-radius: 4px;
  transition: background .2s, border-color .2s;
}
.tos-puce input[type="radio"] + span::before { border-radius: 50%; }
.tos-puce:hover span { border-color: var(--f-encre); }
.tos-puce input:checked + span { background: var(--f-encre); border-color: var(--f-encre); color: var(--f-fond); }
.tos-puce input:checked + span::before {
  background: var(--f-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23F4F3EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  border-color: var(--f-orange);
}
.tos-puce input:focus-visible + span { outline: 3px solid var(--f-orange); outline-offset: 2px; }
.tos-puce[hidden] { display: none; }

/* Champs */
.tos-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.tos-champ[data-champ="structure"], .tos-champ[data-champ="email"] { grid-column: 1 / -1; }
.tos-champ label { display: block; font-weight: 600; margin-bottom: 4px; }
.tos-champ input, .tos-champ textarea {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--f-encre);
  background: #fff; border: 2px solid var(--f-trait); border-radius: 8px; transition: border-color .2s;
}
.tos-champ textarea { min-height: 150px; resize: vertical; }
.tos-champ input:focus, .tos-champ textarea:focus { outline: none; border-color: var(--f-encre); }
.tos-etat { min-height: 1.3em; margin: 4px 0 8px; font-size: 12px; }
.tos-champ.tos-ko input, .tos-champ.tos-ko textarea { border-color: var(--f-erreur); }
.tos-ko .tos-etat, .tos-etat.tos-ko { color: var(--f-erreur) !important; font-weight: 600; }
.tos-champ.tos-ok input { border-color: var(--f-ok); }
.tos-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tos-suggestions button {
  font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--f-trait); background: #fff; cursor: pointer;
}
.tos-suggestions button:hover { border-color: var(--f-encre); }
.tos-question { font-weight: 600; margin: 18px 0 10px; }
.tos-question + .tos-puces { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Récapitulatif */
.tos-recap { display: grid; grid-template-columns: max-content 1fr auto; gap: 10px 16px; margin: 0 0 20px; }
.tos-recap dt { font-family: Oswald, sans-serif; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; color: var(--f-gris) !important; padding-top: 2px; }
.tos-recap dd { margin: 0; white-space: pre-line; }
.tos-recap button { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.tos-accord { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.tos-accord input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--f-encre); flex: none; }
.tos-accord a { text-decoration: underline; }
.tos-piege { position: absolute; left: -9999px; }

/* Actions */
.tos-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.tos-actions .tos-suivant, .tos-actions .tos-envoyer { margin-left: auto; }
.tos-suivant[aria-disabled="true"] { opacity: .45; }
.tos-memo { margin: 14px 0 0; text-align: right; }
.tos-memo:empty, .tos-memo[hidden] { display: none; }
.tos-effacer { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: var(--f-gris); }
.tos-erreur-envoi { color: var(--f-erreur) !important; font-weight: 600; }

/* Merci */
.tos-merci { text-align: center; padding: 20px 0; }
.tos-merci svg { width: 84px; height: 84px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tos-merci circle { stroke: var(--f-orange); }
.tos-merci path { stroke: var(--f-encre); }
.tos-merci-titre { font-family: Oswald, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 28px; margin: 12px 0 4px; }

@media (max-width: 640px) {
  .tos-grille { grid-template-columns: 1fr; }
  .tos-puces { grid-template-columns: 1fr; }
  .tos-question + .tos-puces { grid-template-columns: 1fr 1fr; }
  .tos-recap { grid-template-columns: 1fr auto; }
  .tos-recap dt { grid-column: 1 / -1; padding-top: 6px; }
}

@media (prefers-reduced-motion: no-preference) {
  .tos-etape.tos-entre { animation: tos-f-entre .35s ease-out both; }
  .tos-etape.tos-entre-retour { animation: tos-f-retour .35s ease-out both; }
  @keyframes tos-f-entre { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes tos-f-retour { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
  .tos-puce:active span { translate: 0 1px; }
  .tos-secousse { animation: tos-f-secousse .4s; }
  @keyframes tos-f-secousse { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
  .tos-merci circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: tos-f-trace .6s ease-out forwards; }
  .tos-merci path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tos-f-trace .4s .5s ease-out forwards; }
  .tos-merci .tos-merci-titre { animation: tos-f-entre .5s .6s ease-out both; }
  @keyframes tos-f-trace { to { stroke-dashoffset: 0; } }
  .tos-eclat { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; animation: tos-f-eclat .9s ease-out forwards; }
  @keyframes tos-f-eclat { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: var(--x) var(--y); } }
}

/* Sur l'aplat terre cuite, YOOtheme passe en couleurs inversées : la carte garde les siennes. */
.tos-form a { color: var(--f-encre) !important; }
.tos-form .uk-button-default { background: transparent !important; color: var(--f-encre) !important; border: 2px solid var(--f-encre) !important; }
.tos-form .uk-button-secondary { background: var(--f-encre) !important; color: var(--f-fond) !important; }
.tos-form .uk-button-primary { background: var(--f-orange) !important; color: var(--f-fond) !important; }
.tos-form .uk-button-primary:hover { background: #A83E15 !important; }

/* =====================================================================================================
 * Version « Poussière & Impact » (30/10/2026, Vincent : plus punchy, plus dynamique) — remplace la carte claire :
 * carte charbon granuleuse posée sur l'aplat terre cuite, liseré terre cuite, compteur d'étape en grand,
 * fil d'étapes en parallélogrammes, cases-boutons sombres qui s'allument en terre cuite, bouton Suivant terre cuite.
 * ===================================================================================================== */
.tos-form {
  --f-encre: #F4F3EE; --f-fond: #151515; --f-carte: #1F1F1E; --f-trait: #3A3A37; --f-gris: #A5AAA5; --f-orange: #D9622F; --f-plein: #BF4819;
  --f-erreur: #FF8A6B; --f-ok: #8FCB9B;
  background: #151515 url(grain.png); border-radius: 8px; border-left: 6px solid var(--f-plein);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(244,243,238,.04);
}
.tos-form legend { color: #F4F3EE !important; font-size: 34px; letter-spacing: .02em; }
.tos-compteur { margin: 0 0 6px !important; font: 600 12px Oswald, sans-serif; letter-spacing: .16em; color: var(--f-gris) !important; }
.tos-compteur b { font-size: 31px; color: var(--f-orange); letter-spacing: 0; margin-right: 2px; }
.tos-fil { gap: 8px; margin-bottom: 22px; }
.tos-fil li { height: 8px; border-radius: 0; background: var(--f-trait); transform: skewX(-24deg); }
.tos-fil li.tos-fait { background: #F4F3EE; }
.tos-fil li.tos-ici { background: var(--f-orange); }
.tos-puce span { background: var(--f-carte); border: 1px solid var(--f-trait); color: #F4F3EE; min-height: 58px;
  font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; font-weight: 500; }
.tos-puce span::before { border-color: #5A5B57; }
.tos-puce:hover span { border-color: var(--f-orange); background: #262624; transform: translateY(-2px); }
.tos-puce input:checked + span { background: var(--f-plein); border-color: var(--f-plein); color: #F4F3EE; box-shadow: 0 10px 24px -14px var(--f-plein); }
.tos-puce input:checked + span::before {
  background: #151515 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23F4F3EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  border-color: #151515; }
.tos-champ label, .tos-question, .tos-form dd, .tos-accord { color: #F4F3EE !important; }
.tos-champ input, .tos-champ textarea { background: var(--f-carte); border: 1px solid var(--f-trait); color: #F4F3EE; }
.tos-champ input:focus, .tos-champ textarea:focus { border-color: var(--f-orange); box-shadow: 0 0 0 3px rgba(217, 98, 47, .25); }
.tos-champ.tos-ok input { border-color: var(--f-ok); }
.tos-suggestions button { background: var(--f-carte); border-color: var(--f-trait); color: #F4F3EE; }
.tos-suggestions button:hover { border-color: var(--f-orange); }
.tos-recap dt { color: var(--f-orange) !important; }
.tos-recap button, .tos-effacer { color: var(--f-gris); text-decoration: none !important; border-bottom: 1px dotted currentColor; }
.tos-accord input { accent-color: var(--f-plein); }
.tos-accord a { color: var(--f-orange) !important; text-decoration: none !important; }
.tos-form .uk-button-secondary, .tos-form .uk-button-primary { background: var(--f-plein) !important; color: #F4F3EE !important; border: 0 !important;
  padding: 0 28px; line-height: 50px; font-size: 13px; letter-spacing: .14em; }
.tos-form .uk-button-secondary::after, .tos-form .uk-button-primary::after { content: "\2192" !important; margin-left: .7em; display: inline-block; transition: transform .2s; }
.tos-form .uk-button-secondary:hover::after, .tos-form .uk-button-primary:hover::after { transform: translateX(4px); }
.tos-form .uk-button-secondary:hover, .tos-form .uk-button-primary:hover { background: #A83E15 !important; }
.tos-form .uk-button-default { color: #F4F3EE !important; border: 1px solid #5A5B57 !important; background: transparent !important; line-height: 48px; }
.tos-suivant[aria-disabled="true"], .tos-envoyer[aria-disabled="true"] { opacity: .5; }
.tos-merci-titre, .tos-merci p { color: #F4F3EE !important; }
.tos-merci path { stroke: #F4F3EE; }
.tos-merci circle { stroke: var(--f-orange); }
.tos-form .tos-etat.tos-ko, .tos-ko .tos-etat { color: var(--f-erreur) !important; }
@media (prefers-reduced-motion: no-preference) {
  .tos-puce span { transition: border-color .2s, background .2s, color .2s, transform .2s, box-shadow .2s; }
  .tos-puce input:checked + span { animation: tos-f-tampon .35s cubic-bezier(.3,1.6,.5,1); }
  @keyframes tos-f-tampon { 0% { transform: scale(.94); } 100% { transform: none; } }
  .tos-fil li { transition: background .35s; }
}

/* Section contact passée en charbon (30/10/2026) : la carte se détache par une teinte un peu plus claire et un fin contour */
.uk-section-secondary .tos-form { background-color: #1C1C1B; box-shadow: 0 0 0 1px rgba(244,243,238,.08), 0 30px 60px -30px rgba(0,0,0,.8); }
.uk-section-secondary .tos-puce span, .uk-section-secondary .tos-champ input, .uk-section-secondary .tos-champ textarea { background: #252523; }

/* Compact (30/10/2026, règle densité) : tout le formulaire tient dans un écran d'ordinateur */
.tos-form { padding: clamp(18px, 2.6vw, 30px) clamp(18px, 3vw, 36px); max-width: 980px; }
.tos-form legend { font-size: 27px; margin-bottom: .35em; }
.tos-compteur b { font-size: 24px; }
.tos-fil { margin-bottom: 14px; }
.tos-aide { margin: -.1em 0 .7em; }
.tos-puce span { min-height: 46px; padding: 8px 12px; }
.tos-puces { gap: 8px; }
.tos-grille { grid-template-columns: repeat(3, 1fr); gap: 2px 14px; }
.tos-champ[data-champ="structure"], .tos-champ[data-champ="email"] { grid-column: auto; }
.tos-champ label { font-size: 12px; margin-bottom: 3px; }
.tos-champ input { min-height: 42px; padding: 8px 12px; }
.tos-champ textarea { min-height: 120px; }
.tos-etat { min-height: 0; margin: 3px 0 6px; font-size: 12px; }
.tos-etat:empty { margin: 0 0 6px; }
.tos-actions { margin-top: 14px; }
.tos-form .uk-button-secondary, .tos-form .uk-button-primary { line-height: 44px; }
.tos-form .uk-button-default { line-height: 42px; }
.tos-memo { margin-top: 8px; font-size: 12px; }
.tos-question { margin: 12px 0 8px; }
.tos-recap { gap: 6px 16px; margin-bottom: 14px; }
@media (max-width: 900px) { .tos-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tos-grille { grid-template-columns: 1fr; } }

/* =====================================================================================================
 * Variantes à tester en réel (30/10/2026) : ?formulaire=a | c | e | sombre sur /partenaires/
 * Éléments communs : .tos-form-theo (photo + bulle, variante A), .tos-historique (conversation, variante C),
 * icônes / photos / sous-titres des profils (A et E). Masqués par défaut.
 * ===================================================================================================== */
.tos-form-theo, .tos-ico, .tos-puce small { display: none; }
.tos-puce em { font-style: normal; }
.tos-form-corps { min-width: 0; }

/* ---------- Variantes claires (A, C) : la section passe en clair, la carte devient blanche ---------- */
.uk-section:has(.tos-form--a), .uk-section:has(.tos-form--c) { background: #F4F3EE !important; }
.uk-section:has(.tos-form--a)::after, .uk-section:has(.tos-form--c)::after { content: none !important; }
.uk-section:has(.tos-form--a) :is(h2, p, .uk-text-large), .uk-section:has(.tos-form--c) :is(h2, p, .uk-text-large) { color: #151515; }
.uk-section:has(.tos-form--a) h2::before, .uk-section:has(.tos-form--c) h2::before { background: #BF4819 !important; }
.uk-section:has(.tos-form--a) .tos-mel, .uk-section:has(.tos-form--c) .tos-mel { color: #BF4819; }
.tos-form--a, .tos-form--c {
  --f-encre: #151515; --f-carte: #fff; --f-trait: #E2E1DA; --f-gris: #535650; --f-orange: #BF4819; --f-plein: #BF4819; --f-erreur: #B42318; --f-ok: #2F6B3A;
  background: #fff !important; border-left: 0; box-shadow: 0 24px 60px -30px rgba(21,21,21,.45), 0 0 0 1px #E2E1DA !important;
}
.tos-form--a legend, .tos-form--c legend, .tos-form--a .tos-champ label, .tos-form--c .tos-champ label,
.tos-form--a .tos-question, .tos-form--c .tos-question, .tos-form--a dd, .tos-form--c dd, .tos-form--a .tos-accord, .tos-form--c .tos-accord,
.tos-form--a .tos-merci-titre, .tos-form--c .tos-merci-titre, .tos-form--a .tos-merci p, .tos-form--c .tos-merci p { color: #151515 !important; }
.tos-form--a .tos-puce span, .tos-form--c .tos-puce span { background: #fff; border: 2px solid #E2E1DA; color: #151515; }
.tos-form--a .tos-puce:hover span, .tos-form--c .tos-puce:hover span { border-color: #BF4819; background: #FFF8F4; }
.tos-form--a .tos-champ input, .tos-form--a .tos-champ textarea, .tos-form--c .tos-champ input, .tos-form--c .tos-champ textarea { background: #F7F6F2; border: 1px solid #DDDCD5; color: #151515; }
.tos-form--a .tos-fil li, .tos-form--c .tos-fil li { background: #E2E1DA; }
.tos-form--a .tos-fil li.tos-fait, .tos-form--c .tos-fil li.tos-fait { background: #151515; }
.tos-form--a .tos-fil li.tos-ici, .tos-form--c .tos-fil li.tos-ici { background: #BF4819; }
.tos-form--a .tos-compteur b, .tos-form--c .tos-compteur b { color: #BF4819; }
.tos-form--a .uk-button-default, .tos-form--c .uk-button-default { color: #151515 !important; border-color: #151515 !important; }
.tos-form--a .tos-suggestions button, .tos-form--c .tos-suggestions button { background: #fff; color: #151515; border-color: #DDDCD5; }
.tos-form--a .tos-merci path, .tos-form--c .tos-merci path { stroke: #151515; }

/* ---------- A · photo de Théo + tuiles à icônes ---------- */
.tos-form--a { max-width: 1180px; padding: 0 !important; display: grid; grid-template-columns: 5fr 7fr; overflow: hidden; }
.tos-form--a .tos-form-theo { display: block; position: relative; background: var(--theo) center 22% / cover no-repeat; min-height: 100%; }
.tos-form--a .tos-form-theo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #fff); }
.tos-form--a .tos-bulle { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; max-width: 300px; background: #F4F3EE; color: #151515;
  padding: 14px 18px; border-radius: 12px 12px 12px 2px; font-size: 13px; line-height: 1.4; box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); }
.tos-form--a .tos-bulle b { display: block; font: 600 12px Oswald, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #BF4819; margin-bottom: 2px; }
.tos-form--a .tos-form-corps { padding: clamp(20px, 3vw, 36px); }
.tos-form--a [data-etape="profil"] .tos-puce span { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px; padding: 14px; }
.tos-form--a [data-etape="profil"] .tos-puce span::before { position: absolute; top: 12px; right: 12px; }
.tos-form--a [data-etape="profil"] .tos-puce { position: relative; }
.tos-form--a .tos-ico { display: block; width: 30px; height: 30px; color: #BF4819; }
.tos-form--a [data-etape="profil"] .tos-puce input:checked + span .tos-ico { color: #F4F3EE; }
.tos-form--a [data-etape="profil"] .tos-puces { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tos-form--a { grid-template-columns: 1fr; } .tos-form--a .tos-form-theo { min-height: 260px; } }

/* ---------- C · conversation avec Théo ---------- */
.tos-form--c { max-width: 860px; }
.tos-form--c .tos-historique { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tos-msg-theo, .tos-form--c legend { position: relative; margin: 0 0 0 48px !important; align-self: flex-start; max-width: 80%;
  background: #F4F3EE; color: #151515 !important; padding: 10px 16px !important; border-radius: 16px 16px 16px 4px;
  font: 400 15px Roboto, Arial, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.35; float: none; }
.tos-msg-theo::before, .tos-form--c legend::before { content: ""; position: absolute; left: -48px; bottom: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--theo) center 20% / cover; border: 2px solid #BF4819; }
.tos-form--c legend { margin-bottom: 14px !important; font-weight: 600 !important; font-size: 16px !important; }
.tos-msg-moi { align-self: flex-end; margin: 0 !important; max-width: 75%; background: #BF4819; color: #F4F3EE !important; padding: 9px 16px; border-radius: 16px 16px 4px 16px;
  font-size: 13px; cursor: pointer; }
.tos-msg-moi:hover { background: #A83E15; }
.tos-form--c .tos-compteur, .tos-form--c .tos-fil { display: none; }
.tos-form--c .tos-aide { margin-left: 48px; }
.tos-form--c .tos-puces { margin-left: 48px; display: flex; flex-wrap: wrap; gap: 8px; }
.tos-form--c .tos-puce span { min-height: 0; padding: 9px 16px; border-radius: 8px; border: 2px solid #BF4819; color: #BF4819; font-family: Roboto, Arial, sans-serif;
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; }
.tos-form--c .tos-puce span::before { display: none; }
.tos-form--c .tos-puce input:checked + span { color: #F4F3EE; }
.tos-form--c .tos-grille, .tos-form--c [data-champ="message"], .tos-form--c .tos-recap, .tos-form--c .tos-accord { margin-left: 48px; }
.tos-form--c .tos-etape { padding-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .tos-form--c .tos-etape:not([hidden]) legend { animation: tos-f-bulle .4s ease-out both; }
  .tos-form--c .tos-etape:not([hidden]) .tos-puces { animation: tos-f-bulle .4s .25s ease-out both; }
  @keyframes tos-f-bulle { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* ---------- E · cartes photo pour le profil (sur charbon) ---------- */
.tos-form--e { max-width: 1240px; background: transparent !important; box-shadow: none !important; border-left: 0; padding: 0 !important; }
.tos-form--e [data-etape="profil"] .tos-puces { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tos-form--e [data-etape="profil"] .tos-puce span { position: relative; height: 300px; min-height: 0; padding: 14px; align-items: flex-end; border: 0; overflow: hidden;
  background: #262624 var(--photo) center 30% / cover no-repeat; font-size: 15px; line-height: 1.05; }
.tos-form--e [data-etape="profil"] .tos-puce span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(21,21,21,.92)); }
.tos-form--e [data-etape="profil"] .tos-puce em { position: relative; z-index: 1; }
.tos-form--e [data-etape="profil"] .tos-puce small { display: block; margin-top: 6px; font: 400 12px Roboto, Arial, sans-serif; text-transform: none; letter-spacing: 0; color: #C9CCC6; }
.tos-form--e [data-etape="profil"] .tos-puce span::before { position: absolute; top: 12px; right: 12px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; }
.tos-form--e [data-etape="profil"] .tos-puce input:checked + span { outline: 4px solid #D9622F; outline-offset: -4px; background: #262624 var(--photo) center 30% / cover no-repeat;
  transform: translateY(-6px); }
.tos-form--e [data-etape="profil"] .tos-puce:hover span { transform: translateY(-4px); background: #262624 var(--photo) center 30% / cover no-repeat; }
.tos-form--e .tos-etape:not([data-etape="profil"]), .tos-form--e .tos-actions, .tos-form--e .tos-memo { max-width: 900px; }
@media (max-width: 960px) { .tos-form--e [data-etape="profil"] .tos-puces { grid-template-columns: repeat(3, 1fr); } .tos-form--e [data-etape="profil"] .tos-puce span { height: 200px; } }
@media (max-width: 560px) { .tos-form--e [data-etape="profil"] .tos-puces { grid-template-columns: 1fr 1fr; } }

/* Variantes claires : titre et textes de la section toujours lisibles (priorité sur les couleurs inversées de Trek) */
.uk-section:has(.tos-form--a) :is(h2, .uk-h1, .uk-heading-medium, p), .uk-section:has(.tos-form--c) :is(h2, .uk-h1, .uk-heading-medium, p) { color: #151515 !important; }
/* Compacité (Vincent, écran 24") : tout en plus petit, l'historique de la conversation tient sur peu de hauteur */
.tos-form { font-size: 14px; }
.tos-form--c { max-width: 760px; padding: 20px 26px !important; }
.tos-msg-theo, .tos-form--c legend { font-size: 13px !important; padding: 7px 13px !important; margin-left: 40px !important; }
.tos-form--c legend { font-size: 13px !important; margin-bottom: 10px !important; }
.tos-msg-theo::before, .tos-form--c legend::before { width: 30px; height: 30px; left: -40px; }
.tos-msg-moi { font-size: 12px; padding: 6px 13px; }
.tos-form--c .tos-historique { gap: 5px; margin-bottom: 10px; max-height: 220px; overflow-y: auto; }
.tos-form--c .tos-puces, .tos-form--c .tos-aide, .tos-form--c .tos-grille, .tos-form--c [data-champ="message"], .tos-form--c .tos-recap, .tos-form--c .tos-accord { margin-left: 40px; }
.tos-form--c .tos-puce span { padding: 6px 12px; font-size: 12px; }
.tos-form .tos-puce span { min-height: 40px; font-size: 12px; }
.tos-form--a [data-etape="profil"] .tos-puce span { min-height: 84px; }
.tos-form--e [data-etape="profil"] .tos-puce span { height: 240px; font-size: 13px; }
.tos-form legend { font-size: 21px; }
.tos-form .uk-button-secondary, .tos-form .uk-button-primary { line-height: 40px; font-size: 12px; padding: 0 22px; }
.tos-form .uk-button-default { line-height: 38px; font-size: 12px; }

/* Hauteur minimale (Vincent, 30/10/2026) : réponses passées sur une ligne de pastilles, pas de pile de bulles */
.tos-historique { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; margin: 0 0 10px !important; max-height: none !important; overflow: visible !important; }
.tos-historique:empty { display: none !important; }
.tos-msg-moi { align-self: auto !important; max-width: none !important; font: 500 12px Roboto, Arial, sans-serif !important; padding: 4px 10px !important;
  border: 0; border-radius: 6px !important; background: #F4E4DC !important; color: #8A3412 !important; cursor: pointer; }
.tos-form--e .tos-msg-moi, .tos-form--sombre .tos-msg-moi { background: #2E2A28 !important; color: #F0B49A !important; }
.tos-msg-moi:hover { background: #BF4819 !important; color: #fff !important; }
.tos-form--c .tos-historique { margin-left: 40px !important; }
.tos-form { padding-top: 16px !important; padding-bottom: 16px !important; }
.tos-memo { margin-top: 4px !important; }
.tos-form--a .tos-form-corps { padding: 18px 26px; }
.tos-form--a [data-etape="profil"] .tos-puce span { min-height: 70px; padding: 10px 12px; gap: 4px; }
.tos-form--a .tos-ico { width: 24px; height: 24px; }
.tos-form--e [data-etape="profil"] .tos-puce span { height: 200px; }
.tos-champ textarea { min-height: 96px; }
.uk-section:has(.tos-form) .uk-text-large { margin-top: 4px !important; margin-bottom: 0 !important; }

/* Variantes claires : libellés des cases toujours foncés (les couleurs inversées de la section charbon passaient devant) */
.tos-form--a .tos-puce span, .tos-form--c .tos-puce span, .tos-form--a .tos-puce em, .tos-form--a .tos-aide, .tos-form--c .tos-aide,
.tos-form--a .tos-memo, .tos-form--c .tos-memo, .tos-form--a .tos-compteur, .tos-form--c .tos-compteur { color: #151515 !important; }
.tos-form--c .tos-puce span, .tos-form--c .tos-puce em { color: #BF4819 !important; }
.tos-form--a .tos-puce input:checked + span, .tos-form--a .tos-puce input:checked + span em,
.tos-form--c .tos-puce input:checked + span, .tos-form--c .tos-puce input:checked + span em { color: #F4F3EE !important; }
.tos-form--a .tos-puce span::before, .tos-form--c .tos-puce span::before { border-color: #A5AAA5; }
.tos-form--a .tos-suivant[aria-disabled="true"], .tos-form--c .tos-suivant[aria-disabled="true"] { opacity: .55; }

/* E · cartes photo : la photo est une balise <img> sous le texte (fiable quelle que soit la réécriture des adresses) */
.tos-puce-photo { display: none; }
.tos-form--e { max-width: 1240px !important; width: 100%; }
.uk-section:has(.tos-form--e) > .uk-container { max-width: 1280px; }
.tos-form--e [data-etape="profil"] .tos-puce span { background: #262624 !important; }
.tos-form--e [data-etape="profil"] .tos-puce-photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  z-index: 0; transition: transform .4s ease; }
.tos-form--e [data-etape="profil"] .tos-puce:hover .tos-puce-photo { transform: scale(1.05); }
.tos-form--e [data-etape="profil"] .tos-puce span::after { z-index: 1; }
.tos-form--e [data-etape="profil"] .tos-puce em { z-index: 2; color: #F4F3EE !important; }
.tos-form--e [data-etape="profil"] .tos-puce span::before { z-index: 3; }
.tos-form--e [data-etape="profil"] .tos-puce span { height: 220px !important; min-height: 0 !important; display: flex; align-items: flex-end; }
.tos-form--e [data-etape="profil"] .tos-puce input:checked + span { outline: 4px solid #D9622F; outline-offset: -4px; transform: translateY(-6px); }

/* A : la photo de Théo touche le haut et le bas de la carte (le retrait général de 16 px laissait deux bandeaux blancs) */
.tos-form.tos-form--a { padding: 0 !important; }

/* E sur fond clair (la section Contact est passée en clair le 30/10/2026) : cartes photo pour « Vous êtes… »,
 * puis les autres étapes au même rendu clair que A et C (avant : cases charbon, titre et bouton Retour invisibles). */
.uk-section:has(.tos-form--e) { background: #F4F3EE !important; }
.uk-section:has(.tos-form--e)::after { content: none !important; }
.uk-section:has(.tos-form--e) :is(h2, .uk-h1, .uk-heading-medium, p) { color: #151515 !important; }
.uk-section:has(.tos-form--e) .tos-mel { color: #BF4819; }
.tos-form--e { --f-encre: #151515; --f-carte: #fff; --f-trait: #E2E1DA; --f-gris: #535650; --f-orange: #BF4819; --f-plein: #BF4819; --f-erreur: #B42318; --f-ok: #2F6B3A; }
.tos-form--e :is(legend, .tos-question, .tos-champ label, dd, .tos-accord, .tos-merci-titre, .tos-merci p, .tos-aide, .tos-memo, .tos-compteur) { color: #151515 !important; }
.tos-form--e .tos-compteur b { color: #BF4819; }
.tos-form--e .tos-etape:not([data-etape="profil"]) .tos-puce span { background: #fff !important; border: 2px solid #E2E1DA; color: #151515 !important; }
.tos-form--e .tos-etape:not([data-etape="profil"]) .tos-puce em { color: #151515 !important; }
.tos-form--e .tos-etape:not([data-etape="profil"]) .tos-puce:hover span { border-color: #BF4819; background: #FFF8F4 !important; }
.tos-form--e .tos-etape:not([data-etape="profil"]) .tos-puce input:checked + span { background: #BF4819 !important; border-color: #BF4819; }
.tos-form--e .tos-etape:not([data-etape="profil"]) .tos-puce input:checked + span em { color: #F4F3EE !important; }
.tos-form--e .tos-etape:not([data-etape="profil"]) .tos-puce span::before { border-color: #A5AAA5; }
.tos-form--e .tos-champ input, .tos-form--e .tos-champ textarea { background: #fff; border: 1px solid #DDDCD5; color: #151515; }
.tos-form--e .tos-fil li { background: #E2E1DA; }
.tos-form--e .tos-fil li.tos-fait { background: #151515; }
.tos-form--e .tos-fil li.tos-ici { background: #BF4819; }
.tos-form--e .uk-button-default { color: #151515 !important; border-color: #151515 !important; }
.tos-form--e .tos-msg-moi { background: #F4E4DC !important; color: #8A3412 !important; }
.tos-form--e .tos-suggestions button { background: #fff; color: #151515; border-color: #DDDCD5; }


/* =====================================================================================================
 * E · tuiles à icônes (validée par Vincent le 30/10/2026, maquette « Formulaire E · icônes ») : remplace les cartes photo.
 * ===================================================================================================== */
.tos-form--e [data-etape="profil"] .tos-puce-photo { display: none !important; }
.tos-form--e [data-etape="profil"] .tos-puces { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tos-form--e [data-etape="profil"] .tos-puce span { position: relative; height: auto !important; min-height: 150px !important; display: flex; flex-direction: column;
  align-items: flex-start !important; justify-content: flex-start; gap: 10px; padding: 18px 16px 16px !important; background: #fff !important;
  border: 2px solid #E2E1DA !important; border-radius: 8px; outline: 0 !important; overflow: visible; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.tos-form--e [data-etape="profil"] .tos-puce span::after { content: none !important; }
.tos-form--e [data-etape="profil"] .tos-ico { display: block; width: 44px; height: 44px; color: #BF4819; stroke-width: 1.6; }
.tos-form--e [data-etape="profil"] .tos-puce em { color: #151515 !important; font: 500 16px/1.15 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.tos-form--e [data-etape="profil"] .tos-puce small { display: block; margin-top: 6px; font: 300 13px/1.4 Roboto, Arial, sans-serif; text-transform: none; letter-spacing: 0; color: #535650; }
.tos-form--e [data-etape="profil"] .tos-puce:hover span { border-color: #BF4819 !important; background: #FFF8F4 !important; transform: none; }
.tos-form--e [data-etape="profil"] .tos-puce input:checked + span { background: #BF4819 !important; border-color: #BF4819 !important; transform: translateY(-4px);
  box-shadow: 0 14px 30px -16px rgba(191, 72, 25, .7); }
.tos-form--e [data-etape="profil"] .tos-puce input:checked + span :is(.tos-ico, em, small) { color: #F4F3EE !important; }
.tos-form--e [data-etape="profil"] .tos-puce input:focus-visible + span { outline: 3px solid #151515 !important; outline-offset: 2px; }
@media (max-width: 960px) { .tos-form--e [data-etape="profil"] .tos-puces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tos-form--e [data-etape="profil"] .tos-puces { grid-template-columns: 1fr 1fr; } }

/* =====================================================================================================
 * Boutons du formulaire (30/10/2026, 17 h 40) : même langage que les boutons validés du site, lisibles au survol.
 *   Suivant : bicolore, libellé charbon + bloc flèche terre cuite qui s'élargit (bouton 4 des cartes) ;
 *   Envoyer : bicolore inversé, libellé terre cuite + bloc charbon ;
 *   Retour  : contour charbon avec flèche à gauche, qui se remplit au survol (bouton 3).
 * ===================================================================================================== */
.tos-form .tos-actions .uk-button { font: 500 14px/44px Oswald, sans-serif !important; letter-spacing: .16em; text-transform: uppercase;
  border-radius: 0 !important; clip-path: none; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.tos-form .tos-suivant, .tos-form .tos-envoyer { padding: 0 0 0 22px !important; border: 0 !important; display: inline-flex; align-items: stretch; }
.tos-form .tos-suivant { background: #151515 !important; color: #F4F3EE !important; }
.tos-form .tos-envoyer { background: #BF4819 !important; color: #F4F3EE !important; }
.tos-form .tos-suivant::after, .tos-form .tos-envoyer::after { content: "\2192" !important; display: inline-flex !important; align-items: center; margin-left: 20px !important;
  padding: 0 15px; transform: none !important; transition: padding .2s ease, background-color .2s ease; }
.tos-form .tos-suivant::after { background: #BF4819; color: #F4F3EE; }
.tos-form .tos-envoyer::after { background: #151515; color: #F4F3EE; }
.tos-form .tos-suivant:hover, .tos-form .tos-suivant:focus-visible { background: #2E2F2C !important; color: #F4F3EE !important; }
.tos-form .tos-envoyer:hover, .tos-form .tos-envoyer:focus-visible { background: #A83E15 !important; color: #F4F3EE !important; }
.tos-form .tos-suivant:hover::after, .tos-form .tos-envoyer:hover::after { padding: 0 22px; }
.tos-form .tos-suivant[aria-disabled="true"], .tos-form .tos-envoyer[aria-disabled="true"] { opacity: .45 !important; cursor: not-allowed; }
.tos-form .tos-suivant[aria-disabled="true"]:hover::after { padding: 0 15px; }
.tos-form .tos-retour { background: transparent !important; color: #151515 !important; border: 2px solid #151515 !important; padding: 0 20px !important; line-height: 40px !important; }
.tos-form .tos-retour::before { content: "\2190"; margin-right: 12px; display: inline-block; transition: transform .2s ease; }
.tos-form .tos-retour::after { content: none !important; }
.tos-form .tos-retour:hover, .tos-form .tos-retour:focus-visible { background: #151515 !important; color: #F4F3EE !important; border-color: #151515 !important; }
.tos-form .tos-retour:hover::before { transform: translateX(-3px); }

/* =====================================================================================================
 * Bulle de Théo (formulaire A), validée le 30/10/2026 : « feutre » par défaut, « cartouche » en option (administration).
 * Polices hébergées sur le site (étape 13, téléchargées une fois depuis Google Fonts) ; repli Oswald si absentes.
 * ===================================================================================================== */
@font-face { font-family: "Theo Feutre"; src: url(polices/permanent-marker.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Theo BD"; src: url(polices/bangers.woff2) format("woff2"); font-display: swap; }
/* Feutre : pas de cadre, texte écrit au marqueur blanc sur la photo, coup de feutre terre cuite */
.tos-form--a .tos-bulle--feutre { background: none !important; box-shadow: none !important; padding: 0 !important; max-width: 330px; left: 22px; bottom: 22px;
  transform: rotate(-5deg); transform-origin: left bottom; font: 400 17px/1.25 "Theo Feutre", "Oswald", sans-serif !important; color: #F4F3EE !important;
  text-shadow: 0 1px 0 #151515, 1px 0 0 #151515, -1px 0 0 #151515, 0 -1px 0 #151515, 2px 2px 4px rgba(0,0,0,.6); }
.tos-form--a .tos-bulle--feutre b { display: block; margin: 0 !important; font: 400 34px/1 "Theo Feutre", "Oswald", sans-serif !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #F4F3EE !important;
  text-shadow: 0 2px 0 #151515, 2px 0 0 #151515, -2px 0 0 #151515, 0 -2px 0 #151515, 3px 3px 6px rgba(0,0,0,.5); }
.tos-form--a .tos-bulle--feutre svg { display: block; width: 140px; height: 16px; margin: -2px 0 6px; }
.tos-form--a .tos-bulle--feutre i { font-style: normal; white-space: nowrap; }
/* Cartouche : encadré de bande dessinée, étiquette « Théo : » en charbon */
.tos-form--a .tos-bulle--cartouche { background: #F4F3EE !important; border: 3px solid #151515; border-radius: 0 !important; padding: 18px 16px 12px !important;
  max-width: 310px; transform: rotate(1.5deg); box-shadow: 5px 5px 0 rgba(21,21,21,.85) !important; font: italic 400 15px/1.35 Roboto, Arial, sans-serif !important; color: #151515 !important; }
.tos-form--a .tos-bulle--cartouche b { position: absolute; top: -16px; left: 12px; margin: 0 !important; background: #151515; color: #F4F3EE !important;
  font: 400 18px/1 "Theo BD", "Oswald", sans-serif !important; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px 4px; }

/* Cases à choisir (30/10/2026, 18 h 30) : la case cochée reste terre cuite au survol (le survol clair rendait son texte blanc
 * invisible) ; contour plus fin (1 px) et arrondi plus discret (4 px). */
.tos-form .tos-puce span { border-width: 1px !important; border-radius: 4px !important; }
.tos-form .tos-puce input:checked + span,
.tos-form .tos-puce:hover input:checked + span,
.tos-form .tos-etape .tos-puce:hover input:checked + span { background: #BF4819 !important; border-color: #BF4819 !important; }
.tos-form .tos-puce:hover input:checked + span :is(em, small, .tos-ico),
.tos-form .tos-puce input:checked + span :is(em, small, .tos-ico) { color: #F4F3EE !important; }
.tos-form .tos-puce:hover input:checked + span { box-shadow: 0 10px 22px -14px rgba(191, 72, 25, .8); }

/* Cases à choisir : aucun effet au survol (Vincent, 30/10/2026) — ni fond, ni bordure, ni ombre, ni déplacement.
 * La case cochée reste terre cuite ; seul le pointeur indique qu'on peut cliquer. */
.tos-form .tos-puce:hover input:not(:checked) + span { background: #fff !important; border-color: #E2E1DA !important; box-shadow: none !important; transform: none !important; }
.tos-form .tos-puce:hover input:checked + span { box-shadow: none !important; transform: none !important; }
.tos-form .tos-puce:hover .tos-puce-photo { transform: none !important; }
.tos-form .tos-puce span { transition: none !important; cursor: pointer; }
.tos-form--e [data-etape="profil"] .tos-puce input:checked + span { transform: none !important; box-shadow: none !important; }

/* Arrondis harmonisés à 4 px partout dans le formulaire (Vincent, 30/10/2026) et étiquettes des réponses passées
 * en gris clair / charbon au lieu du saumon. */
.tos-form { border-radius: 4px !important; }
.tos-form .tos-champ :is(input, textarea, select), .tos-form .tos-suggestions button { border-radius: 4px !important; }
.tos-form .tos-puce input[type="checkbox"] + span::before { border-radius: 3px !important; }
.tos-form .tos-champ :is(input, textarea) { border-width: 1px !important; }
.tos-msg-moi, .tos-form--e .tos-msg-moi, .tos-form--a .tos-msg-moi { background: #E8E7E1 !important; color: #151515 !important; border: 1px solid #D9D8D1 !important;
  border-radius: 4px !important; font-weight: 500 !important; }
.tos-msg-moi:hover { background: #E8E7E1 !important; color: #151515 !important; border-color: #151515 !important; }

/* Champ oublié bien visible (30/10/2026 : la règle de couleur des sections claires laissait « À renseigner » en charbon) :
 * cadre rouge, fond rosé, message rouge en gras précédé d'un pictogramme, comme sur debergh.immo. */
.uk-section .tos-form .tos-champ.tos-ko :is(input, textarea, select) { border: 2px solid #B42318 !important; background: #FDF1EF !important; }
.uk-section .tos-form .tos-champ.tos-ko label { color: #B42318 !important; }
.uk-section .tos-form .tos-ko .tos-etat, .uk-section .tos-form p.tos-etat.tos-ko, .uk-section .tos-form .tos-erreur-envoi { color: #B42318 !important; font-weight: 600 !important; }
.uk-section .tos-form .tos-ko .tos-etat::before, .uk-section .tos-form p.tos-etat.tos-ko::before { content: "!"; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: #B42318; color: #fff; font: 700 11px/1 Roboto, Arial, sans-serif; vertical-align: -2px; }