/* Réservations Roy · formulaire public, charte « Nuit de match ». Tout est préfixé .resa- pour résister au thème. */
@font-face { font-family: 'Barlow'; src: url(../fonts/Barlow-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(../fonts/Barlow-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(../fonts/Barlow-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(../fonts/BarlowCondensed-800i.woff2) format('woff2'); font-weight: 700 800; font-style: italic; font-display: swap; }

.resa-public, .resa-public * { box-sizing: border-box; }
.resa-public {
	--resa-nuit: #0E1430; --resa-nuit2: #202D57; --resa-roi: #1E5595; --resa-jaune: #F4EA4B; --resa-fond: #F2F1EC;
	--resa-trait: #DAD8CF; --resa-texte: #151B36; --resa-doux: #5A6177; --resa-rouge: #B3261E; --resa-rouge-bg: #FBE3E1;
	max-width: 560px; margin: 0 auto 24px; padding: 16px; background: var(--resa-fond); border-radius: 14px;
	font-family: "Barlow", system-ui, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; color: var(--resa-texte); text-align: left;
}
.resa-public p { margin: 0 0 10px; }
.resa-tete { background: var(--resa-nuit); color: #fff; margin: -16px -16px 14px; padding: 16px; border-radius: 14px 14px 0 0; display: flex; align-items: center; gap: 14px; border-bottom: 4px solid var(--resa-jaune); background-image: linear-gradient(115deg, var(--resa-nuit) 0 62%, var(--resa-nuit2) 62% 100%); }
.resa-blason { width: 46px; height: 46px; flex: none; object-fit: contain; }
.resa-tete-t { min-width: 0; }
.resa-public .resa-kicker { color: var(--resa-jaune); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 2px !important; }
.resa-public a { color: var(--resa-roi); }
.resa-titre { font-family: "Barlow Condensed", "Barlow", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1.05; margin: 0 !important; color: inherit; }
.resa-msg .resa-titre, .resa-carte .resa-titre { color: var(--resa-nuit2); margin-bottom: 8px !important; }
.resa-quand { color: var(--resa-jaune); font-weight: 600; margin: 4px 0 0 !important; }
.resa-carte { background: #fff; border: 1px solid var(--resa-trait); border-radius: 12px; padding: 16px; }
.resa-intro { background: #fff; border: 1px solid var(--resa-trait); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.resa-intro p:last-child { margin: 0; }
.resa-public .resa-info { background: #fff; border-left: 4px solid var(--resa-roi); padding: 8px 12px; border-radius: 6px; }
.resa-public .resa-alerte { background: #FFF2D6; border-left: 4px solid #E0952B; padding: 8px 12px; border-radius: 6px; }

.resa-formules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.resa-formule { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--resa-trait); border-radius: 10px; padding: 10px 12px; }
.resa-formule.resa-plein { opacity: .55; }
.resa-fo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.resa-fo-nom { font-weight: 700; }
.resa-fo-prix { color: var(--resa-doux); font-size: 14px; }
.resa-compteur { display: flex; align-items: center; gap: 6px; flex: none; }
.resa-public .resa-compteur button {
	width: 42px !important; height: 42px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
	font: 700 22px/1 "Barlow", sans-serif !important; cursor: pointer; box-shadow: none !important;
	clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.resa-public .resa-moins { background: #E3E1D8 !important; color: var(--resa-texte) !important; }
.resa-public .resa-plus { background: var(--resa-jaune) !important; color: var(--resa-nuit) !important; }
.resa-public .resa-compteur button:disabled { opacity: .4; cursor: default; }
.resa-n { min-width: 28px; text-align: center; font-weight: 700; font-size: 20px; }

.resa-champs { display: flex; flex-direction: column; gap: 10px; }
.resa-champ { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.resa-champ > span { font-weight: 700; font-size: 14px; }
.resa-champ i, .resa-case i { color: var(--resa-rouge); font-style: normal; }
.resa-champ small { color: var(--resa-doux); font-weight: 400; }
.resa-champ .resa-aide { font-size: 13px; }
.resa-public input[type=text], .resa-public input[type=email], .resa-public input[type=tel], .resa-public input[type=number], .resa-public select {
	width: 100% !important; min-height: 44px; padding: 8px 10px !important; margin: 0 !important; border: 1px solid #C9C6BA !important; border-radius: 8px !important;
	background: #fff !important; color: var(--resa-texte) !important; font: 16px "Barlow", sans-serif !important; box-shadow: none !important;
}
.resa-public input:focus, .resa-public select:focus, .resa-public button:focus-visible { outline: 2px solid var(--resa-roi); outline-offset: 1px; }
.resa-public input:disabled { background: #ECEAE2 !important; color: var(--resa-doux) !important; }
.resa-case { display: flex; gap: 10px; align-items: center; font-weight: 600; margin: 0; }
.resa-case input { width: 20px; height: 20px; accent-color: var(--resa-roi); }
.resa-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.resa-erreur { background: var(--resa-rouge-bg); color: var(--resa-rouge); border-radius: 8px; padding: 8px 12px; margin: 12px 0 0 !important; font-weight: 600; }
.resa-barre { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--resa-nuit); color: #fff; padding: 12px 14px; border-radius: 10px; margin-top: 14px; position: sticky; bottom: 8px; }
.resa-barre small { display: block; color: #C9D0EA; font-size: 13px; }
.resa-total-l { color: #C9D0EA; }
.resa-total { font-size: 22px; }
.resa-public .resa-btn {
	background: var(--resa-jaune) !important; color: var(--resa-nuit) !important; border: 0 !important; border-radius: 0 !important; padding: 0 24px !important; min-height: 48px; margin: 0 !important;
	font: italic 800 20px "Barlow Condensed", "Barlow", sans-serif !important; text-transform: uppercase; letter-spacing: .03em; cursor: pointer;
	clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.resa-public .resa-btn:disabled { opacity: .5; cursor: default; }
.resa-annuler-p { text-align: center; margin-top: 12px !important; }
.resa-public .resa-annuler { background: none !important; border: 0 !important; color: var(--resa-rouge) !important; text-decoration: underline; font: 600 15px "Barlow", sans-serif !important; cursor: pointer; padding: 6px !important; }
.resa-mention { color: var(--resa-doux); font-size: 13px; margin-top: 12px !important; }

.resa-ok { background: #fff; border: 1px solid var(--resa-trait); border-radius: 12px; padding: 18px; }
.resa-ok-t { font-family: "Barlow Condensed", "Barlow", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--resa-nuit2); margin-bottom: 6px !important; }
.resa-ok-n { color: var(--resa-doux); font-weight: 600; }
.resa-ok-l { margin: 8px 0 12px; padding-left: 20px; }
.resa-ok-m { display: flex; justify-content: space-between; align-items: baseline; background: #FBF8D5; border-radius: 8px; padding: 10px 14px; }
.resa-ok-m b { font-size: 22px; }
.resa-ok-p { margin-top: 10px !important; }

/* 1.1.0 : fenêtre « Réserver mon souper » (bouton du site) */
dialog.resa-dialog { border: 0; padding: 0; margin: auto; background: transparent; width: min(600px, calc(100vw - 20px)); max-width: none; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow: auto; color: #151B36; }
dialog.resa-dialog::backdrop { background: rgba(14, 20, 48, .84); backdrop-filter: blur(3px); }
dialog.resa-dialog .resa-public { margin: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
dialog.resa-dialog .resa-dialog-x { position: sticky; top: 10px; float: right; z-index: 3; margin: 10px 10px -50px 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #F4EA4B; color: #0E1430; font: 700 26px/1 "Barlow", sans-serif; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
dialog.resa-dialog .resa-dialog-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
dialog.resa-dialog .resa-tete { padding-right: 60px; }
html.resa-dialog-ouvert { overflow: hidden; }
.resa-etat { opacity: .7; cursor: default; }
/* Aperçu dans l'appli */
.resa-apercu { background: #0E1430; border-radius: 12px; padding: 14px 8px; }
.resa-apercu .resa-public { margin-bottom: 0; color: #151B36; }

/* Page « modifier ou annuler » (hors thème) */
body.resa-page { margin: 0; background: #0E1430 linear-gradient(115deg, #0E1430 0 58%, #141C3A 58% 100%) fixed; min-height: 100vh; font-family: "Barlow", system-ui, sans-serif; }
.resa-page-in { max-width: 600px; margin: 0 auto; padding: 20px 16px 40px; }
a.resa-club { text-decoration: none; }
.resa-club { display: flex; align-items: center; gap: 10px; color: #fff; font: italic 800 20px "Barlow Condensed", "Barlow", sans-serif; text-transform: uppercase; margin: 0 0 16px; }
.resa-retour { text-align: center; }
.resa-retour a { color: #F4EA4B; }