/* Garage TN — Réservations */

.gtn{
  --gtn-noir:#0A0A0C;
  --gtn-panneau:#17171D;
  --gtn-fond:#0C0C10;
  --gtn-rouge:#D81E24;
  --gtn-rouge-vif:#F0353B;
  --gtn-rouge-sombre:#7E0F13;
  --gtn-texte:#C9CDD3;
  --gtn-fort:#EDEFF2;
  --gtn-gris:#7C838C;
  --gtn-ligne:rgba(255,255,255,.10);
  --gtn-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1L55 16.5v31L28 63 1 47.5v-31z' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.4'/%3E%3C/svg%3E");
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  max-width:560px;margin:0 auto;color:var(--gtn-texte);line-height:1.6;
}
.gtn *,.gtn *::before,.gtn *::after{box-sizing:border-box}

.gtn-fiche{background:linear-gradient(180deg,#17171D,#101015);border:1px solid var(--gtn-ligne);position:relative}
.gtn-fiche::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gtn-rouge),var(--gtn-rouge-sombre))}
.gtn-tete{background:linear-gradient(100deg,var(--gtn-rouge),var(--gtn-rouge-sombre));padding:16px 24px}
.gtn-tete h2{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:27px;line-height:1;color:#fff;margin:0}
.gtn-tete p{margin:4px 0 0;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.gtn-corps{padding:22px 20px 26px;background-image:var(--gtn-hex)}

/* numéros d'étape */
.gtn-etape{display:flex;align-items:center;gap:11px;margin:22px 0 12px}
.gtn-etape:first-child{margin-top:4px}
.gtn-num{width:26px;height:26px;flex:none;display:grid;place-items:center;background:var(--gtn-rouge);color:#fff;font-weight:700;font-size:14px;border-radius:50%}
.gtn-titre-etape{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gtn-fort)}

/* calendrier */
.gtn-cal{background:var(--gtn-fond);border:1px solid var(--gtn-ligne);padding:14px}
.gtn-cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
  font-size:17px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gtn-fort)}
.gtn-fleche{background:none;border:1px solid var(--gtn-ligne);color:var(--gtn-fort);cursor:pointer;
  width:34px;height:34px;font-size:20px;line-height:1;border-radius:2px;padding:0}
.gtn-fleche:hover:not(:disabled){border-color:var(--gtn-rouge);color:#fff}
.gtn-fleche:disabled{opacity:.3;cursor:default}
.gtn-sem,.gtn-jours{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.gtn-sem span{text-align:center;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--gtn-gris);padding-bottom:6px}
.gtn-jour{
  aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:#131319;border:1px solid var(--gtn-ligne);color:var(--gtn-texte);
  font-size:15px;font-weight:600;cursor:pointer;border-radius:2px;padding:0;line-height:1;
}
.gtn-jour i{display:block;width:5px;height:5px;background:#3FBF6A;border-radius:50%;font-style:normal}
.gtn-jour:hover:not(:disabled){border-color:var(--gtn-rouge);color:#fff}
.gtn-jour:disabled{background:transparent;color:#3A3E44;cursor:default;border-color:transparent}
.gtn-jour.gtn-complet{color:#5E646B;border-style:dashed;cursor:default}
.gtn-jour.gtn-complet i{background:#5E646B}
.gtn-jour.gtn-choisi{background:var(--gtn-rouge);border-color:var(--gtn-rouge);color:#fff}
.gtn-jour.gtn-choisi i{background:#fff}
.gtn-jour.gtn-vide{background:none;border:none;cursor:default}
.gtn-legende{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:12.5px;color:var(--gtn-gris)}
.gtn-legende span{display:flex;align-items:center;gap:6px}
.gtn-legende i{width:8px;height:8px;border-radius:50%;display:block}
.gtn-legende i.l{background:#3FBF6A}
.gtn-legende i.c{background:#5E646B}
.gtn-legende i.f{background:#2A2E34}

/* plages horaires */
.gtn-plages{display:flex;flex-wrap:wrap;gap:7px;min-height:44px}
.gtn-plage{font-size:15px;font-weight:600;letter-spacing:.04em;padding:9px 13px;cursor:pointer;
  background:var(--gtn-fond);color:var(--gtn-texte);border:1px solid rgba(255,255,255,.16);border-radius:2px}
.gtn-plage:hover{border-color:var(--gtn-rouge);color:#fff}
.gtn-plage[aria-pressed="true"]{background:var(--gtn-rouge);border-color:var(--gtn-rouge);color:#fff}
.gtn-plage.gtn-prise{color:#4A4F56;border-color:rgba(255,255,255,.07);cursor:not-allowed;text-decoration:line-through;background:transparent}
.gtn-plage.gtn-prise:hover{border-color:rgba(255,255,255,.07);color:#4A4F56}
.gtn-vide{font-size:14.5px;color:var(--gtn-gris);padding:10px 0}

/* champs */
.gtn-champ{margin-bottom:16px}
.gtn-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gtn label{display:block;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gtn-gris);margin-bottom:6px}
.gtn input,.gtn select,.gtn textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--gtn-fort);background:var(--gtn-fond);
  border:1px solid rgba(255,255,255,.14);border-radius:2px;padding:11px 12px;margin:0;
}
.gtn textarea{resize:vertical;min-height:58px}
.gtn input::placeholder,.gtn textarea::placeholder{color:#565C64}
.gtn input:focus,.gtn select:focus,.gtn textarea:focus{outline:none;border-color:var(--gtn-rouge);box-shadow:0 0 0 3px rgba(216,30,36,.22)}
.gtn .gtn-err{border-color:var(--gtn-rouge-vif);background:rgba(216,30,36,.10)}
.gtn-alerte{display:none;font-size:13.5px;font-weight:600;color:var(--gtn-rouge-vif);margin:6px 0 0}
.gtn-alerte.gtn-on{display:block}
.gtn-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.gtn-envoi{
  width:100%;margin-top:22px;padding:16px;cursor:pointer;border:none;color:#fff;
  font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:23px;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--gtn-rouge),var(--gtn-rouge-sombre));
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.gtn-envoi:hover{filter:brightness(1.15)}
.gtn-envoi:disabled{opacity:.6;cursor:wait}
.gtn-erreur-globale{display:none;margin:14px 0 0;padding:11px 13px;border:1px solid var(--gtn-rouge);
  background:rgba(216,30,36,.12);color:#FFD9DA;font-size:15px}
.gtn-erreur-globale.gtn-on{display:block}
.gtn-pied{font-size:13.5px;color:var(--gtn-gris);text-align:center;margin:14px 0 0}

/* confirmation */
.gtn-recu{display:none;text-align:center;padding:10px 0}
.gtn-recu.gtn-on{display:block}
.gtn-sceau{display:inline-block;border:3px solid var(--gtn-rouge-vif);color:var(--gtn-rouge-vif);
  font-family:'Anton',Impact,sans-serif;font-size:34px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 22px 5px;transform:rotate(-6deg);margin-bottom:22px;animation:gtn-sceau .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes gtn-sceau{from{transform:rotate(-6deg) scale(2.5);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}
.gtn-resume{font-size:16px;text-align:left;line-height:2;border-top:1px solid var(--gtn-ligne);
  border-bottom:1px solid var(--gtn-ligne);padding:14px 0;margin-bottom:16px;color:var(--gtn-fort)}
.gtn-resume i{font-style:normal;color:var(--gtn-gris);display:inline-block;min-width:112px}
.gtn-refaire{background:none;border:none;font-size:14px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:underline;cursor:pointer;color:var(--gtn-gris);padding:0}
.gtn-refaire:hover{color:var(--gtn-rouge-vif)}

.gtn :focus-visible{outline:2px solid var(--gtn-rouge-vif);outline-offset:2px}

@media(max-width:520px){
  .gtn-duo{grid-template-columns:1fr}
  .gtn-corps{padding:18px 14px 22px}
  .gtn-jour{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .gtn-sceau{animation:none}
}