/* Module de réservation DiGit Summit — calendrier, créneaux, coordonnées, confirmation,
   assistant IA. Hérite des jetons du site (--c-*) quand ils existent. */
.dsr {
	--r-encre: var(--c-encre, #0B0B12); --r-titre: var(--c-titre, #000); --r-gris: var(--c-gris, #585C6B);
	--r-fond: var(--c-fond, #F2F6FE); --r-surface-2: var(--c-surface-2, #EEF1F7);
	/* Pas --c-marque : sur une bande noire le site la passe en blanc, or le module est posé sur une carte blanche. */
	--r-marque: #000; --r-sur-marque: #fff;
	--r-rayon: var(--rayon-int, 10px);
	/* width: 100 % obligatoire : avec container-type, la largeur ne vient plus du contenu (0 px au téléphone). */
	position: relative; width: 100%; min-width: 0; container-type: inline-size; color: var(--r-encre); font-size: 15px; line-height: 1.45;
}
.dsr *, .dsr *::before, .dsr *::after { box-sizing: border-box; }
.dsr :where(h2, h3, p, ol, ul) { margin: 0; }
:where(.dsr) button { font: inherit; color: inherit; cursor: pointer; }
.dsr svg { flex: none; }
.dsr__attente { display: flex; align-items: center; gap: 10px; min-height: 280px; justify-content: center; color: var(--r-gris); }
.dsr__rond { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--r-surface-2); border-top-color: var(--r-marque); animation: dsr-tourne .8s linear infinite; }
@keyframes dsr-tourne { to { transform: rotate(360deg); } }

/* En-tête */
.dsr__tete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.dsr__tete h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--r-titre); }
.dsr__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dsr__meta span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--r-surface-2); color: var(--r-gris); font-size: 12.5px; font-weight: 500; }
.dsr__meta svg { width: 14px; height: 14px; }
.dsr__types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dsr__types button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--r-surface-2); font-size: 13px; font-weight: 600; }
.dsr__types button[aria-pressed="true"] { background: var(--r-marque); color: var(--r-sur-marque); }
.dsr__ia { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--r-marque); color: var(--r-sur-marque); font-size: 13px; font-weight: 600; white-space: nowrap; transition: transform .2s; }
.dsr__ia:hover { transform: translateY(-1px); }
.dsr__ia svg { width: 15px; height: 15px; }

/* Étape 1 : calendrier + créneaux */
.dsr__choix { display: grid; gap: 20px; }
@container (min-width: 540px) { .dsr__choix { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.dsr__mois { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dsr__mois b { flex: 1; font-size: 15px; font-weight: 650; color: var(--r-titre); text-transform: capitalize; }
.dsr__fleche { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--r-surface-2); }
.dsr__fleche:disabled { opacity: .35; cursor: default; }
.dsr__fleche svg { width: 16px; height: 16px; }
.dsr__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.dsr__jsem { padding: 4px 0 6px; color: var(--r-gris); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dsr__jour { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 44px; width: 100%; margin: 0 auto; border: 0; border-radius: 50%; background: transparent; color: var(--r-gris); font-size: 14px; font-variant-numeric: tabular-nums; }
.dsr__jour:disabled { opacity: .4; cursor: default; }
.dsr__jour.est-libre { background: var(--r-surface-2); color: var(--r-titre); font-weight: 700; }
.dsr__jour.est-libre:hover { box-shadow: inset 0 0 0 2px var(--r-marque); }
.dsr__jour.est-aujourdhui::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.dsr__jour[aria-pressed="true"] { background: var(--r-marque); color: var(--r-sur-marque); }
.dsr__creneaux { min-height: 120px; }
.dsr__creneaux h3 { margin-bottom: 10px; font-size: 14px; font-weight: 650; color: var(--r-titre); }
.dsr__creneaux h3::first-letter { text-transform: uppercase; }
.dsr__liste { display: grid; gap: 6px; max-height: 312px; overflow-y: auto; padding: 2px 4px 2px 2px; scrollbar-width: thin; }
.dsr__heure { display: flex; gap: 6px; }
.dsr__heure > button { flex: 1; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-rayon); background: var(--r-surface-2); font-weight: 650; font-variant-numeric: tabular-nums; transition: background-color .15s, flex-basis .25s; }
.dsr__heure > button:hover { box-shadow: inset 0 0 0 2px var(--r-marque); }
.dsr__heure > button small { display: block; font-weight: 500; font-size: 11.5px; color: var(--r-gris); }
.dsr__heure.est-choisi > button:first-child { background: var(--r-gris); color: var(--r-sur-marque); }
.dsr__heure.est-choisi > button:first-child small { color: inherit; opacity: .8; }
.dsr__continuer { display: none; background: var(--r-marque) !important; color: var(--r-sur-marque); }
.dsr__heure.est-choisi .dsr__continuer { display: block; animation: dsr-glisse .25s ease-out; }
@keyframes dsr-glisse { from { opacity: 0; transform: translateX(-8px); } }
.dsr__vide { padding: 20px 16px; border-radius: var(--r-rayon); background: var(--r-fond); color: var(--r-gris); font-size: 14px; }
.dsr__vide a { color: var(--r-titre); font-weight: 600; }
.dsr__fuseau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--r-surface-2); color: var(--r-gris); font-size: 12.5px; }
.dsr__fuseau svg { width: 14px; height: 14px; }
.dsr__fuseau button { padding: 0; border: 0; background: none; color: var(--r-titre); font-weight: 600; text-decoration: underline; font-size: 12.5px; }

/* Étape 2 : coordonnées */
.dsr__retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 0; border: 0; background: none; color: var(--r-gris); font-size: 13px; font-weight: 600; }
.dsr__retour svg { width: 15px; height: 15px; }
.dsr__recap { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: var(--r-marque); color: var(--r-sur-marque); }
.dsr__recap-date { display: grid; place-items: center; flex: none; width: 52px; height: 56px; border-radius: 12px; background: rgba(255, 255, 255, .12); line-height: 1.05; }
.dsr__recap-date small { font-size: 10.5px; text-transform: uppercase; opacity: .75; font-weight: 600; }
.dsr__recap-date b { font-size: 22px; font-weight: 800; }
.dsr__recap strong { display: block; font-size: 15px; }
.dsr__recap span { font-size: 13px; opacity: .8; }
.dsr__lieux { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dsr__lieux label { position: relative; }
.dsr__lieux input { position: absolute; opacity: 0; }
.dsr__lieux span { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--r-surface-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.dsr__lieux input:checked + span { background: var(--r-marque); color: var(--r-sur-marque); }
.dsr__lieux input:focus-visible + span { box-shadow: 0 0 0 2px var(--r-sur-marque), 0 0 0 4px var(--r-marque); }
.dsr__champs { display: grid; gap: 12px; }
@container (min-width: 460px) { .dsr__champs { grid-template-columns: 1fr 1fr; } .dsr__large { grid-column: 1 / -1; } }
.dsr__champ { display: grid; gap: 5px; }
.dsr__champ label, .dsr__question { font-size: 13px; font-weight: 600; color: var(--r-titre); }
.dsr__champ :is(input, textarea) { width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-radius: var(--r-rayon); background: var(--r-surface-2); color: var(--r-encre); font: inherit; font-size: 15px; outline: 0; transition: box-shadow .15s; }
.dsr__champ textarea { min-height: 84px; resize: vertical; }
.dsr__champ :is(input, textarea):focus { box-shadow: inset 0 0 0 2px var(--r-marque); }
.dsr__champ.est-erreur :is(input, textarea) { box-shadow: inset 0 0 0 2px #DC2626; }
.dsr__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dsr__mention { margin-top: 14px !important; color: var(--r-gris); font-size: 12.5px; }
.dsr__mention a { color: inherit; }
.dsr__erreur { margin-top: 12px !important; padding: 10px 14px; border-radius: var(--r-rayon); background: #FEE2E2; color: #991B1B; font-size: 14px; font-weight: 500; }
.dsr__erreur[hidden] { display: none; }
.dsr__envoyer { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: 999px; background: var(--r-marque); color: var(--r-sur-marque) !important; font-size: 15.5px; font-weight: 650; transition: opacity .2s, transform .2s; }
.dsr__envoyer:hover { transform: translateY(-1px); }
.dsr__envoyer:disabled { opacity: .55; cursor: progress; transform: none; }
.dsr__envoyer svg { width: 18px; height: 18px; }

/* Étape 3 : confirmation */
.dsr__merci { display: grid; justify-items: center; gap: 10px; padding: 12px 0 4px; text-align: center; }
.dsr__coche { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #16A34A; color: #fff; animation: dsr-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.dsr__coche svg { width: 34px; height: 34px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: dsr-trace .45s .25s ease-out forwards; }
@keyframes dsr-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes dsr-trace { to { stroke-dashoffset: 0; } }
.dsr__merci h2 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; color: var(--r-titre); }
.dsr__merci > p { color: var(--r-gris); max-width: 420px; }
.dsr__merci .dsr__recap { width: 100%; margin: 8px 0 4px; text-align: left; }
.dsr__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dsr__actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--r-surface-2); color: var(--r-titre); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.dsr__actions a:hover { box-shadow: inset 0 0 0 2px var(--r-marque); }
.dsr__actions svg { width: 15px; height: 15px; }
.dsr__gerer { color: var(--r-gris); font-size: 13px; }
.dsr__gerer a { color: var(--r-titre); font-weight: 600; }

/* Transitions d'étape */
.dsr__etape { animation: dsr-entre .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes dsr-entre { from { opacity: 0; transform: translateY(8px); } }

/* Assistant IA */
.dsr__panneau { position: absolute; inset: -4px; z-index: 5; display: flex; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(11, 11, 18, .18); animation: dsr-entre .3s ease-out; } /* blanc fixe : --c-surface est sombre sur les bandes */
.dsr__panneau[hidden] { display: none; }
.dsr__panneau-tete { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--r-surface-2); }
.dsr__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--r-marque); color: var(--r-sur-marque); }
.dsr__avatar svg { width: 16px; height: 16px; }
.dsr__panneau-tete b { display: block; font-size: 14px; color: var(--r-titre); }
.dsr__panneau-tete small { display: flex; align-items: center; gap: 5px; color: var(--r-gris); font-size: 12px; }
.dsr__panneau-tete small i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; }
.dsr__fermer { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--r-surface-2); }
.dsr__fermer svg { width: 15px; height: 15px; }
.dsr__fil { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.dsr__bulle { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; white-space: pre-line; animation: dsr-entre .25s ease-out; }
.dsr__bulle--ia { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--r-surface-2); color: var(--r-encre); }
.dsr__bulle--moi { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--r-marque); color: var(--r-sur-marque); }
.dsr__bulle--attente { display: inline-flex; gap: 4px; }
.dsr__bulle--attente i { width: 6px; height: 6px; border-radius: 50%; background: var(--r-gris); animation: dsr-point 1s infinite; }
.dsr__bulle--attente i:nth-child(2) { animation-delay: .15s; } .dsr__bulle--attente i:nth-child(3) { animation-delay: .3s; }
@keyframes dsr-point { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.dsr__propositions { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
.dsr__propositions button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--r-marque); color: var(--r-sur-marque); font-size: 13px; font-weight: 600; }
.dsr__suggestions { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.dsr__suggestions button { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--r-surface-2); font-size: 12.5px; font-weight: 600; }
.dsr__saisie { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--r-surface-2); }
.dsr__saisie input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--r-surface-2); color: var(--r-encre); font: inherit; font-size: 14.5px; outline: 0; }
.dsr__saisie input:focus { box-shadow: inset 0 0 0 2px var(--r-marque); }
.dsr__saisie button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--r-marque); color: var(--r-sur-marque); }
.dsr__saisie button svg { width: 17px; height: 17px; }
.dsr__note-ia { padding: 0 16px 12px; color: var(--r-gris); font-size: 11.5px; }
.dsr :focus-visible { outline: 2px solid var(--r-marque); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dsr * { animation: none !important; transition: none !important; } .dsr__coche svg { stroke-dashoffset: 0; } }