/* =====================================================================
   pros-base.css : base commune du guichet Collectivités, CSE et associations.
   Pages : /pros/ (pros.php) et dossier fournisseur (pros-dossier.php).
   Chargé APRÈS /style.css et /output.css ; avant pros.css ou pros-dossier.css.
   Contenu :
   1. Champs et blocs .rf-* : COPIE NON MODIFIÉE des règles du formulaire de réservation
      (formulaire-reservation.php, bloc <style> ; ces règles ne sont PAS dans style.css).
      Lignes reprises : 203-223 (carte, onglets, titres), 498-506 (cartes de choix), 424-448
      (champs), 459-473 (options cochables), 515-524 (disponibilité de la date), 337 (carte sur
      téléphone).
   2. Suite des mêmes règles : 224 (.rf-hint) ; 322-324 (.rf-reassure, .rf-next) ; 339-343 et
      403-404 (téléphone) ; 481-488 (.rf-modal) ; 525-549 (message de disponibilité) ; 552-567
      (.rf-zone) ; 572-575 (.rf-check) ; 583-585 ; 590-626 (.rf-aside, .rf-sum, .rf-sum-dark,
      .rf-call) ; 632-644 (.rf-mrecap-*) ; 661-708 (.rf-merci) ; 1471-1474 ; 710-713 ; 716-763.
      Ne rien modifier dans ces deux parties : surcharger dans pros.css ou pros-dossier.css.
   3. Composants communs du guichet (préfixe pro-) : jetons de couleur, .pro-sr, .pro-cote,
      .pro-fraude, .pro-identite, .pro-copie, .pro-validite, .pro-toast, .pro-piege.
   ===================================================================== */

/* ---------- 1. Formulaire de réservation : carte, onglets, champs, options, disponibilité ---------- */
  /* Choix de la prestation en cartes photo, puis onglets Photobooth / Vidéobooth 360 /
     Livre d'or. La sélection reste portée par .package-card.selected (moteur). */
  .rf-card { display: flex; flex-direction: column; gap: 28px; padding: 36px 40px 32px; border-radius: 28px; background: #fff; color: #16210F; box-shadow: 0 1px 0 #E3E6DE, 0 20px 40px rgba(25,28,29,0.05); }
  .rf-screen { display: flex; flex-direction: column; gap: 28px; }
  .rf-screen[hidden], .rf-tabs[hidden] { display: none !important; }
  .rf-only-mobile { display: none; }
  .rf-card button { font-family: 'Plus Jakarta Sans', sans-serif; }
  :is(.rf-card, .rf-aside, .rf-mrecap, .rf-modal, .rf-merci) :is(button, a):focus-visible { outline: 3px solid #B0D91C; outline-offset: 2px; }

  .rf-tabs { align-self: flex-start; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #F4F5F0; }
  .rf-tab { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 10px; background: transparent; color: #3E4838; font-size: 14px; font-weight: 600; cursor: pointer; }
  .rf-tab.is-on { background: #fff; color: #16210F; font-weight: 700; box-shadow: 0 1px 3px rgba(22,33,15,0.12); }

  .rf-error { display: flex; align-items: center; gap: 6px; padding: 0.6rem 0.9rem; border: 1px solid #fca5a5; border-radius: 0.75rem; background: #fff5f5; color: #ba1a1a; font-size: 0.85rem; font-weight: 600; }

  .rf-head { display: flex; flex-direction: column; gap: 8px; }
  .rf-head--row { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
  .rf-h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #16210F; }
  .rf-h2--xl { font-size: 40px; line-height: 1.1; }
  .rf-sub { margin: 0; font-size: 15px; color: #5B6356; }
  .rf-h3 { margin: 0; font-size: 17px; font-weight: 700; }
  @media (max-width: 639px) {
    .rf-card { gap: 20px; padding: 20px 16px 24px; border-radius: 22px; }
  }

  .event-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 1280px), (min-width: 820px) and (max-width: 1023px) {
    .event-type-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }
  .event-type-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 12px 6px; border: 2px solid #E3E6DE; border-radius: 16px; background: #fff; color: #16210F; font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
  .event-type-card:hover { border-color: #B0D91C; }
  .event-type-card.selected { border-color: #16210F; background: #16210F; color: #fff; }
  .event-emoji { font-size: 26px; line-height: 1; }
  .event-label { font-size: 13px; font-weight: 700; line-height: 1.2; }

  /* Champs */
  .rf-grid-2, .rf-grid-3 { display: grid; gap: 20px 18px; }
  .rf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-span-2 { grid-column: span 2; }
  .rf-span-3 { grid-column: 1 / -1; }
  .rf-group { display: flex; flex-direction: column; gap: 16px; }
  .rf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .rf-field--half { max-width: 50%; }
  .rf-label { font-size: 14px; font-weight: 700; color: #16210F; }
  .rf-label-hint { font-weight: 500; color: #5B6356; }
  .rf-req { color: #ba1a1a; }
  .rf-input-wrap { position: relative; }
  .rf-input-wrap > .material-symbols-outlined { position: absolute; top: 26px; left: 14px; transform: translateY(-50%); font-size: 20px; color: #5B6356; pointer-events: none; }
  .rf-input { display: block; width: 100%; min-height: 52px; padding: 13px 16px; border: 2px solid #E3E6DE; border-radius: 14px; background-color: #fff; color: #16210F; font: 500 16px/1.4 'Plus Jakarta Sans', sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
  .rf-input-wrap > .rf-input { padding-left: 46px; }
  .rf-input::placeholder { color: #8A9283; opacity: 1; }
  .rf-input:hover { border-color: #BFC5B6; }
  .rf-input:focus { border-color: #1E3A12; box-shadow: 0 0 0 3px rgba(176,217,28,0.35); }
  .rf-input.is-valid { border-color: #B0D91C; }
  .rf-input.is-invalid, .rf-input.is-invalid:focus { border-color: #ba1a1a; background-color: #fff5f5; }
  .rf-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(186,26,26,0.15); }
  .rf-textarea { min-height: 128px; resize: vertical; }
  .rf-select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6356' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; cursor: pointer; appearance: none; -webkit-appearance: none; }


  .rf-opt.selected { border-color: #1E3A12; background: #F7FBEA; }
  .rf-opt-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
  .rf-opt-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #F4F5F0; color: #16210F; font-size: 22px; }
  .rf-opt.selected .rf-opt-icon { background: #fff; }
  .rf-opt-check { flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 2px solid #CDD2C6; border-radius: 50%; background: #fff; cursor: pointer; transition: background-color .2s, border-color .2s; }
  .rf-opt.selected .rf-opt-check { border-color: #1E3A12; background: #1E3A12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0D91C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; }
  .rf-opt-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
  .rf-opt-new { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #B0D91C; color: #16210F; font-size: 11px; font-weight: 700; vertical-align: 2px; }
  .rf-opt-text { flex-grow: 1; font-size: 13.5px; line-height: 1.45; color: #3E4838; }
  .rf-opt-note { font-size: 13px; font-weight: 600; color: #2E5A12; }
  .rf-opt-choice { align-self: flex-start; padding: 2px 0; border: 0; background: none; font: 600 13px 'Plus Jakarta Sans', sans-serif; color: #2E5A12; text-align: left; cursor: pointer; }
  .rf-opt-choice span { text-decoration: underline; }
  .rf-opt-price { margin-top: 8px; padding-top: 12px; border-top: 1px solid #E3E6DE; font-size: 20px; font-weight: 700; }
  .rf-opt.selected .rf-opt-price { border-top-color: #DCE5C6; }
  .rf-opt-price small { font-size: 13px; font-weight: 600; color: #5B6356; }

  .rf-grid-2 > .rf-dispo { grid-column: 1 / -1; grid-row: 2; }
  .rf-dispo { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: calc(3em + 37px); padding: 12px 14px; border: 1px solid #E3E6DE; border-radius: 14px; background: #fff; color: #5B6356; font-size: 14px; line-height: 1.5; }
  .rf-dispo[hidden] { display: none; }
  .rf-dispo::before { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; z-index: -1; border: 1px solid transparent; border-radius: inherit; opacity: 0; }
  .rf-dispo[data-ton="ok"] { color: #2E5A12; }
  .rf-dispo[data-ton="ok"]::before { border-color: #B0D91C; background: #F7FBEA; opacity: 1; }
  .rf-dispo[data-ton="alerte"] { color: #8a5a00; }
  .rf-dispo[data-ton="alerte"]::before { border-color: #e8a020; background: #fff8e6; opacity: 1; }
  .rf-dispo[data-ton="complet"] { color: #3E4838; }
  .rf-dispo[data-ton="complet"]::before { border-color: #BFC5B6; background: #F4F5F0; opacity: 1; }

/* ---------- 2. Formulaire de réservation : suite ---------- */
  .rf-hint { font-size: 13px; color: #5B6356; }
  .rf-reassure { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: #3E4838; }
  .rf-next { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 26px; text-align: center; border: 0; border-radius: 16px; background: #1E3A12; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s; }
  .rf-next:hover { background: #16210F; }
  @media (max-width: 639px) {
    .rf-tabs { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #E3E6DE; }
    .rf-tab { padding: 0 4px; font-size: 13px; }
    .rf-h2 { font-size: 27px; }
    .rf-h2--xl { font-size: 30px; }
    .rf-sub { font-size: 14px; }
    .rf-next { justify-content: center; min-height: 52px; }
    .rf-reassure { justify-content: center; gap: 6px 16px; font-size: 12px; }
  }
  .rf-modal { position: fixed; inset: 0; z-index: 1000; }
  .rf-modal-fond { position: absolute; inset: 0; background: rgba(22,33,15,0.55); backdrop-filter: blur(3px); }
  .rf-modal-box { position: relative; width: calc(100% - 28px); max-width: 380px; max-height: 86vh; margin: 10vh auto 0; padding: 20px 18px 14px; overflow-y: auto; border-radius: 22px; background: #fff; color: #16210F; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
  .rf-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .rf-modal-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; }
  .rf-modal-close, .rf-merci-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #F4F5F0; color: #16210F; cursor: pointer; }
  .rf-modal-close .material-symbols-outlined, .rf-merci-close .material-symbols-outlined { font-size: 20px; }
  .rf-modal-sub { margin: 4px 0 12px; font-size: 13px; color: #5B6356; }
  .rf-dispo-msg { display: block; }
  /* Date libre : entourée à main levée d'un trait anis (SVG décoratif étiré sur la date, hors
     du flux, qui déborde de 8 px sur les côtés et de 5 px en haut). Les marges de la date lui
     font la place : sa ligne s'écarte de 11 px de ses voisines et les mots d'à côté de
     0,5em, pour que le trait passe sans toucher aucune lettre. */
  .rf-dispo-date { position: relative; display: inline-block; margin: 6px .5em 5px; white-space: nowrap; }
  .rf-dispo-rond { position: absolute; left: -8px; top: -5px; width: calc(100% + 16px); height: calc(100% + 9px); overflow: visible; pointer-events: none; }
  .rf-dispo-rond path { fill: none; stroke: #B0D91C; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  /* Réponse à une date choisie à l'instant (.is-anim, jamais à la restauration du brouillon) :
     le texte monte de 6 px en fondu, puis le trait entoure la date en 450 ms avec le rebond de
     la pile, et plus rien ne bouge. Le tracé anime stroke-dashoffset, propriété de peinture
     d'un SVG minuscule : aucun calcul de mise en page, et c'est le seul moyen de suivre le
     trait comme un stylo. Sans animation : trait et texte affichés directement. */
  @media (prefers-reduced-motion: no-preference) {
    .rf-dispo.is-anim::before { transition: opacity .3s ease; }
    .rf-dispo.is-anim .rf-dispo-msg { animation: rfDispoIn .32s cubic-bezier(.22, 1, .36, 1) both; }
    .rf-dispo.is-anim .rf-dispo-rond {
      animation: rfRondPose .45s cubic-bezier(.3, 1.3, .5, 1) .15s both;
      animation-timing-function: linear(0, .033 10%, .132 20%, .298 30%, .529 40%, .826 50%, 1 55%, .948 58%, .905 62%, .89 66%, .905 70%, .948 74%, 1 78%, .988 84%, .985 87%, .988 90%, 1 95%, 1);
    }
    .rf-dispo.is-anim .rf-dispo-rond path { stroke-dasharray: 440 900; animation: rfRondTrace .45s cubic-bezier(.55, .1, .3, 1) .15s both; }
  }
  @keyframes rfDispoIn { from { opacity: 0; transform: translateY(6px); } }
  @keyframes rfRondPose { from { transform: rotate(-2deg) scale(.96); } }
  @keyframes rfRondTrace { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }
  /* Zone de livraison détectée (couleurs de la carte des zones) */
  .rf-zone { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid #E3E6DE; border-radius: 18px; background: #fff; }
  .rf-zone[data-zone="green"] { border-color: #B0D91C; background: #F7FBEA; }
  .rf-zone-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #9E9E9E; color: #fff; font-size: 22px; }
  .rf-zone[data-zone="green"] .rf-zone-icon { background: #7CB342; }
  .rf-zone[data-zone="yellow"] .rf-zone-icon { background: #FFD600; color: #16210F; }
  .rf-zone[data-zone="dark"] .rf-zone-icon { background: #424242; }
  .rf-zone-body { display: flex; flex-direction: column; flex-grow: 1; gap: 2px; min-width: 0; }
  .rf-zone-label { font-size: 15px; font-weight: 700; }
  .rf-zone-detail { font-size: 13px; color: #5B6356; }
  .rf-zone-price { flex-shrink: 0; font-size: 20px; font-weight: 700; white-space: nowrap; }
  .rf-zone[data-zone="green"] .rf-zone-price { color: #2E5A12; }
  .rf-zone[data-zone="outside"] .rf-zone-price { color: #5B6356; }
  .rf-zone-help { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; font-size: 13px; color: #5B6356; }
  .rf-zone-help .material-symbols-outlined { font-size: 18px; }
  .rf-zone-help a, .rf-zone-help button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #2E5A12; cursor: pointer; }
  .rf-zone-help a:hover, .rf-zone-help button:hover { color: #1E3A12; text-decoration: underline; }
  .rf-consent { display: flex; flex-direction: column; gap: 12px; }
  .rf-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: #3E4838; }
  .rf-check input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: #1E3A12; cursor: pointer; appearance: auto; -webkit-appearance: checkbox; }
  .rf-check label { cursor: pointer; }
  .rf-check a { font-weight: 700; color: #2E5A12; text-decoration: underline; }
  .rf-reassure--nav { justify-content: center; margin-top: -14px; }
  .rf-next--full { justify-content: center; width: 100%; }
  .rf-next:disabled { opacity: .7; cursor: wait; }
  .rf-aside { display: flex; flex-direction: column; gap: 16px; color: #16210F; }
  .rf-sum { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 #E3E6DE; }
  .rf-sum-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; }
  .rf-sum-sec { display: flex; flex-direction: column; gap: 4px; }
  .rf-sum .rf-sum-sec + .rf-sum-sec, .rf-sum-totals { padding-top: 16px; border-top: 1px solid #E3E6DE; }
  .rf-sum-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5B6356; }
  .rf-sum-name { font-size: 17px; font-weight: 700; }
  .rf-sum-name--sm { font-size: 15px; }
  .rf-sum-name--sm::first-letter { text-transform: uppercase; }
  .rf-sum-detail { font-size: 14px; color: #5B6356; }
  .rf-sum-list { display: flex; flex-direction: column; gap: 4px; }
  .rf-sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
  .rf-sum-line > span:last-child { color: #5B6356; white-space: nowrap; }
  .rf-sum-totals { display: flex; flex-direction: column; gap: 6px; }
  .rf-sum-row { justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: #3E4838; }
  .rf-sum-row[data-zone="green"] #summaryDeliveryPrice { font-weight: 700; color: #2E5A12; }
  .rf-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .rf-sum-total > span:first-child { font-size: 15px; font-weight: 600; }
  #totalPrice { font-family: 'Fraunces', Georgia, serif; font-size: 32px; font-weight: 700; line-height: 1.1; transform-origin: right center; }
  .rf-sum-dark { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 24px; background: #1E3A12; color: #fff; }
  .rf-sum-dark strong { font-size: 15px; }
  .rf-sum-dark span { font-size: 14px; line-height: 1.45; opacity: .85; }
  .rf-avis { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 #E3E6DE; }
  .rf-avis-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; }
  .rf-avis-head > span { display: flex; align-items: center; gap: 6px; }
  .rf-avis-item { display: flex; align-items: flex-start; gap: 10px; padding-top: 10px; border-top: 1px solid #E3E6DE; }
  .rf-avis-item img { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
  .rf-avis-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .rf-stars { color: #F5A524; font-size: 12px; letter-spacing: 1px; line-height: 1; }
  .rf-avis-text { margin: 0; overflow: hidden; font-size: 13px; line-height: 1.4; color: #3E4838; text-overflow: ellipsis; white-space: nowrap; }
  .rf-avis-who { margin: 0; font-size: 12px; color: #5B6356; }
  .rf-avis-link { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #2E5A12; }
  .rf-avis-link .material-symbols-outlined { font-size: 14px; }
  .rf-avis-link:hover { color: #1E3A12; text-decoration: underline; }
  .rf-call { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border: 2px solid #E3E6DE; border-radius: 16px; background: #fff; color: #16210F; font-size: 15px; font-weight: 700; transition: border-color .2s; }
  .rf-call:hover { border-color: #B0D91C; }
  .rf-call .material-symbols-outlined { color: #2E5A12; }
  .rf-mrecap-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 16px; border: 0; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
  .rf-mrecap-sel { display: flex; flex-direction: column; min-width: 0; }
  .rf-mrecap-lbl { overflow: hidden; font-size: 13px; color: #5B6356; text-overflow: ellipsis; white-space: nowrap; }
  .rf-mrecap-total { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.2; }
  .rf-mrecap-toggle { display: flex; align-items: center; gap: 2px; flex-shrink: 0; height: 40px; padding: 0 10px 0 14px; border-radius: 999px; background: #F4F5F0; font-size: 13px; font-weight: 700; }
  #recap-chevron { font-size: 20px; transition: transform .2s; }
  .rf-mrecap.is-open #recap-chevron { transform: rotate(180deg); }
  .rf-mrecap-content { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .rf-mrecap.is-open .rf-mrecap-content { max-height: 70vh; overflow-y: auto; }
  .rf-mrecap-inner { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; border-top: 1px solid #E3E6DE; }
  .rf-mrecap-val { font-size: 15px; font-weight: 700; }
  #recap-m-delivery-wrap[data-zone="green"] #recap-m-delivery-price { font-weight: 700; color: #2E5A12; }
  .rf-mrecap-grand { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 700; }
  /* Popup « Demande envoyée » : la carte et son tirage sont posés ensemble (.rf-merci-pose).
     La place du tirage, au-dessus de la carte, est réservée dès l'ouverture : rien ne bouge
     près du bouton. margin:auto centre la pose et, sur un écran trop court, la laisse défiler
     au lieu de couper le haut. La pose laisse passer les clics (pointer-events) : un clic
     hors de la carte, même à côté du tirage, touche le voile et ferme la popup, comme avant. */
  .rf-merci { position: fixed; inset: 0; z-index: 99999; overflow-y: auto; padding: 16px; background: rgba(22,33,15,0.6); }
  .rf-merci-pose {
    --tm-w: min(200px, 47vw);                                   /* largeur du tirage (tout en découle) */
    --rf-tirage-place: calc(var(--tm-w) * 2 / 3 + 20px);        /* tirage posé : hauteur, 6 px de levée, pente */
    position: relative; width: 100%; max-width: 460px; margin: auto; padding-top: var(--rf-tirage-place);
    pointer-events: none;
    animation: popupIn .4s cubic-bezier(0.34,1.56,0.64,1);
  }
  .rf-merci-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; padding: 36px 28px 28px; border-radius: 28px; background: #fff; color: #16210F; text-align: center; box-shadow: 0 32px 64px rgba(22,33,15,0.2); pointer-events: auto; }
  .rf-merci-close { position: absolute; top: 14px; right: 14px; }
  .rf-merci-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: #1E3A12; }
  /* Tirage de remerciement (mini tirage tm-, style.css) : il sort du haut de la carte, juste
     au-dessus du rond coché, par petites avancées comme d'une imprimante à sublimation, puis se
     pose, un peu penché. Placé avant la carte, il passe derrière elle : la carte cache ce qui
     n'est pas encore sorti. Décoratif (aria-hidden), légende posée par poserTirageMerci(). */
  .rf-merci-tirage { position: absolute; left: 50%; top: var(--rf-tirage-place); margin-left: calc(var(--tm-w) / -2); transform: translateY(-100%); }
  .rf-merci-tirage .tm { --tm-shadow: 0 14px 28px -10px rgba(3, 8, 0, .7); transform: translateY(-6px) rotate(-3deg); }
  .rf-merci-tirage .tm__band--long { --tm-fs: 5.1; }            /* légende trop large même sans le jour (ajusterLegendeTirage) */
  /* À l'ouverture : la coche arrive avec un petit rebond, le tirage avance en quatre temps,
     puis se pose (levée de 6 px, pente de 3°) avec le rebond de la pile. Moins d'une seconde
     de mouvement pour le tirage, puis plus rien ne bouge. */
  @media (prefers-reduced-motion: no-preference) {
    .rf-merci-icon svg {
      animation: rfCoche .42s cubic-bezier(.3, 1.3, .5, 1) .12s both;
      animation-timing-function: linear(0, .033 10%, .132 20%, .298 30%, .529 40%, .826 50%, 1 55%, .948 58%, .905 62%, .89 66%, .905 70%, .948 74%, 1 78%, .988 84%, .985 87%, .988 90%, 1 95%, 1);
    }
    .rf-merci-tirage { animation: rfTirageSort .52s cubic-bezier(.3, 0, .2, 1) .44s both; }
    .rf-merci-tirage .tm {
      animation: rfTiragePose .36s cubic-bezier(.3, 1.3, .5, 1) .96s both;
      animation-timing-function: linear(0, .033 10%, .132 20%, .298 30%, .529 40%, .826 50%, 1 55%, .948 58%, .905 62%, .89 66%, .905 70%, .948 74%, 1 78%, .988 84%, .985 87%, .988 90%, 1 95%, 1);
    }
  }
  @keyframes rfCoche { from { opacity: 0; transform: scale(.4); } }
  @keyframes rfTirageSort {        /* quatre avancées du papier, la dernière le libère */
    0%   { transform: translateY(10px); }   /* tout caché, liseré et ombre compris */
    14%, 25% { transform: translateY(-25%); }
    39%, 50% { transform: translateY(-50%); }
    64%, 75% { transform: translateY(-75%); }
    100% { transform: translateY(-100%); }
  }
  @keyframes rfTiragePose { from { transform: none; } }
  .rf-merci-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1.15; }
  .rf-merci-text { margin: 0; font-size: 15px; line-height: 1.6; color: #3E4838; }
  .rf-merci-text strong { color: #16210F; }
  .rf-merci-info { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px 16px; border-radius: 16px; background: #F4F5F0; font-size: 14px; text-align: left; }
  .rf-merci-info > span { display: flex; align-items: center; gap: 10px; }
  .rf-merci-info .material-symbols-outlined { font-size: 20px; color: #2E5A12; }
  .rf-merci-info a { font-weight: 700; color: #2E5A12; }
  @keyframes popupIn {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rf-opt, .bpc-opt, .event-type-card, .toile-choice, .rf-input, .step-prog-item::after, .rf-mrecap-content, #recap-chevron { transition: none; }
    .wizard-step.active, .rf-merci-pose { animation: none; }   /* étape et popup affichées directement */
  }

  /* Téléphone */
  @media (max-width: 639px) {
    #formGrid { padding-top: 16px; }
    .rf-body { gap: 20px; }
    .rf-progress-now { display: block; }
    .rf-progress-list { gap: 4px; }
    .step-prog-item { gap: 0; }
    .step-prog-item::after { height: 5px; }
    .step-prog-label { display: none; }
    .rf-grid-2 { grid-template-columns: 1fr; gap: 16px; }
    .rf-grid-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px 12px; }
    .rf-span-2 { grid-column: auto; }
    .rf-field--half { max-width: none; }
    .rf-opts { grid-template-columns: 1fr; gap: 10px; }
    .rf-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) 26px; align-items: start; gap: 4px 12px; padding: 14px; border-radius: 18px; }
    .rf-opt-top { display: contents; }
    .rf-opt-icon { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; font-size: 20px; }
    .rf-opt-check { grid-column: 3; grid-row: 1; }
    .rf-opt > :not(.rf-opt-top) { grid-column: 2 / 4; }
    .rf-opt > .rf-opt-title { grid-column: 2; grid-row: 1; align-self: center; font-size: 15px; }
    .rf-opt-text { font-size: 13px; }
    .rf-opt-price { margin-top: 2px; padding-top: 0; border-top: 0; font-size: 17px; }
    .event-type-card { min-height: 80px; }
    .rf-zone { gap: 12px; padding: 12px 14px; }
    .rf-zone-icon { width: 40px; height: 40px; font-size: 20px; }
    .rf-zone-price { font-size: 17px; }
    .rf-dispo { min-height: calc(4.5em + 37px); font-size: 13px; }   /* trois lignes de place (voir plus haut) */
    .rf-doc { margin-left: 0; }
    .rf-back { min-height: 52px; }
    .rf-reassure--nav { margin-top: -8px; }
    .rf-merci-box { padding: 32px 20px 22px; }
    .rf-merci-title { font-size: 26px; }
  }
  /* Téléphone étroit (375 px et moins) : quatre lignes de place pour la disponibilité */
  @media (max-width: 379px) {
    .rf-dispo { min-height: calc(6em + 37px); }
  }
  /* Écran court (petit téléphone, barres du navigateur affichées) : tirage et carte plus
     compacts, le bouton « Parfait, merci ! » reste visible sans défiler. Très court (téléphone
     à l'horizontale) : pas de tirage, la coche suffit, comme avant. */
  @media (max-height: 620px) {
    .rf-merci-pose { --tm-w: min(140px, 38vw); }
    .rf-merci-box { gap: 10px; padding-top: 24px; padding-bottom: 20px; }
    .rf-merci-icon { width: 56px; height: 56px; }
  }
  @media (max-height: 480px) {
    .rf-merci-pose { padding-top: 0; }
    .rf-merci-tirage { display: none; }
  }

/* ---------- 3. Composants communs du guichet ---------- */
:root {
  --pro-vert: #1a2e00; --pro-charbon: #0d1a00; --pro-sombre: #1E3A12; --pro-encre: #16210F;
  --pro-citron: #b0d91c; --pro-citron-2: #c4e635; --pro-citron-grad: linear-gradient(135deg, #b0d91c, #c4e635);
  --pro-vert-texte: #3a6200; --pro-vert-ok: #2E5A12;
  --pro-texte: #191c1d; --pro-texte-2: #404a39; --pro-texte-3: #3E4838;
  --pro-gris: #606859; --pro-gris-2: #5B6356; --pro-gris-3: #707a68; --pro-gris-4: #8A9283; --pro-gris-5: #9aaa88;
  --pro-filet: #e8edde; --pro-filet-2: #E3E6DE; --pro-filet-3: #f0f2ec; --pro-pointille: #CDD2C6; --pro-pointille-2: #BFC5B6;
  --pro-fond-guichet: #F4F5F0; --pro-fond-gris: #f8f9fa; --pro-fond-encart: #f4f7ee; --pro-fond-ok: #F7FBEA;
  --pro-fond-onglet: #eef2e6; --pro-fond-doc: #E9ECE4;
  --pro-r-pill: 999px; --pro-r-xs: 6px; --pro-r-s: 12px; --pro-r-m: 16px; --pro-r-l: 20px; --pro-r-xl: 24px; --pro-r-xxl: 28px;
  --pro-ombre-carte: 0 1px 0 #E3E6DE, 0 20px 40px rgba(25,28,29,0.05);
  --pro-ombre-flottante: 0 18px 48px rgba(13,26,0,.35);
  --pro-ombre-doc: 0 20px 60px rgba(22,33,15,.18);
}

/* Texte pour lecteurs d'écran seulement */
.pro-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* ---------- Cote citron : uniquement pour une source vérifiable ---------- */
.pro-cote {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 8px;
  border-left: 2px solid var(--pro-citron); border-radius: 0 6px 6px 0; background: var(--pro-fond-encart);
  color: var(--pro-vert-texte); font: 700 10.5px/1.3 'Montserrat', Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle;
}
.pro-cote .material-symbols-outlined { font-size: 14px; }
/* 28 px de haut, zone tactile portée à 44 px (toutes les pages) */
a.pro-cote { position: relative; min-height: 28px; }
a.pro-cote::after { content: ''; position: absolute; inset: -8px 0; }
a.pro-cote:hover { background: var(--pro-fond-onglet); text-decoration: underline; }
a.pro-cote:focus-visible { outline: 3px solid var(--pro-citron); outline-offset: 2px; }
.pro-cote--sombre { background: rgba(176,217,28,.10); color: var(--pro-citron-2); }

/* ---------- Encart anti-fraude (jamais orange) ---------- */
.pro-fraude { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: var(--pro-r-l); background: var(--pro-vert); color: #fff; }
.pro-fraude__icone { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(176,217,28,.14); color: var(--pro-citron); font-size: 26px; }
.pro-fraude__titre { margin: 0 0 4px; font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff; }
.pro-fraude__texte { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
.pro-fraude a { color: var(--pro-citron); font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ---------- Carte d'identité « Pour votre fiche tiers » ---------- */
.pro-identite { padding: 24px; border-radius: var(--pro-r-xl); background: #fff; box-shadow: var(--pro-ombre-carte); color: var(--pro-encre); }
.pro-identite__titre { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 11px 'Montserrat', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--pro-gris); }
.pro-identite__titre img { width: 32px; height: 32px; border-radius: 50%; }
.pro-identite dl { margin: 0; }
.pro-identite__ligne { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 12px; min-height: 52px; padding: 4px 0; border-bottom: 1px solid var(--pro-filet-3); }
.pro-identite__ligne:last-child { border-bottom: 0; }
.pro-identite dt { font: 700 12px 'Plus Jakarta Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--pro-gris-2); }
/* « Titulaire » : précision sous le libellé (nom à saisir dans la fiche tiers) */
.pro-identite__precision { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.pro-identite dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.pro-identite dd > span:first-child { flex: 1 1 auto; min-width: 0; }
.pro-identite__outils { display: inline-flex; align-items: center; gap: 6px; }
.pro-copie { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--pro-fond-guichet); color: var(--pro-encre); cursor: pointer; transition: background .2s; }
.pro-copie .material-symbols-outlined { font-size: 18px; }
.pro-copie:hover { background: var(--pro-fond-onglet); }
.pro-copie.is-ok { background: var(--pro-fond-ok); color: var(--pro-vert-ok); }
.pro-copie:focus-visible { outline: 3px solid var(--pro-citron); outline-offset: 2px; }
@media (max-width: 479px) {
  .pro-identite { padding: 20px 16px; }
  .pro-identite__ligne { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pastille de validité d'un lien ---------- */
.pro-validite { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #B0D91C; border-radius: var(--pro-r-pill); background: var(--pro-fond-ok); color: var(--pro-vert-ok); font: 700 13px 'Plus Jakarta Sans', sans-serif; }
.pro-validite .material-symbols-outlined { font-size: 18px; }
.pro-validite--alerte { border-color: #e8a020; background: #fff8e6; color: #8a5a00; }   /* même ton que .rf-dispo[data-ton="alerte"] */

/* ---------- Toast ---------- */
.pro-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 100000;
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; background: var(--pro-sombre); color: #fff;
  font: 600 14px/1.4 'Plus Jakarta Sans', sans-serif; box-shadow: 0 12px 32px rgba(13,26,0,.3);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s var(--ease-out, ease); pointer-events: none;
}
.pro-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
body.has-mbar .pro-toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .pro-toast, .pro-copie { transition: none; }
}
@media print { .pro-toast { display: none !important; } }

/* ---------- Champ piège de la feuille de demande (hors écran, jamais affiché) ---------- */
.pro-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }