/* Écrans d'entrée : formulaire à gauche (45 %), panneau illustré à droite (55 %). Gabarit : src/views/auth-split.ts.
   Couleurs et polices : celles de style.css (:root). Thème clair uniquement. */

:root {
  --color-primary: #c45122;
  --color-primary-dark: #a83f18;
  --color-text: #172a30;
  --color-background: #faf7f3;
  --color-surface: #ffffff;
  --color-secondary: #f1e4d1;
  --color-secondary-2: #e6d3ba;
  --color-accent-ochre: #d9a066;
  --color-border: #ddd5cc;
  --auth-sand: var(--color-secondary);
  --auth-sand-2: var(--color-secondary-2);
  --auth-ochre: var(--color-accent-ochre);
  --auth-radius: 14px;
  --auth-panel-radius: 24px;
}

/* Conteneur des écrans d'entrée. Pas de forme décorative en fond de page : le panneau illustré porte déjà les siennes,
   et celles du conteneur laissaient un halo beige au bas de chaque écran, tranché par le pied de page. */
/* Classe posée par le serveur (layout.ts), et non :has() : une règle dont la liste contient un sélecteur inconnu est
   rejetée en entier par les navigateurs qui ne connaissent pas :has(). */
.public--auth {
  max-width: 1280px; display: grid; align-content: center; padding-block: 40px; position: relative; isolation: isolate; background-color: transparent;
}

.authsplit { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.authsplit__form { max-width: 520px; width: 100%; justify-self: end; }

/* Charte ARDOIZA : titre en Orbitron, capitales, terracotta. */
.authsplit__title {
  display: block;
  font-family: "Orbitron", "Inter Tight", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .03em;
  font-weight: 700; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.15; color: var(--title); margin: 0 0 16px;
}
.authsplit__spark { display: inline-block; vertical-align: top; margin: -8px 0 0 6px; color: var(--color-primary); }
.authsplit__lead { font-size: 1.15rem; line-height: 1.55; color: var(--soft); margin: 0 0 34px; max-width: 30em; }
.authsplit__lead strong, .authpanel__caption strong { font-family: "Orbitron", "Inter Tight", sans-serif; color: var(--ink); font-weight: 700; font-size: .9em; letter-spacing: .02em; }
.authsplit__form .alert { margin-bottom: 18px; }
.authsplit__form form { display: grid; gap: 16px; }
.authsplit__form > * + * { margin-top: 0; }

/* ---------- Champs ---------- */
.authfield__box {
  position: relative; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 24px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--auth-radius);
  box-shadow: 0 1px 2px rgba(23, 42, 48, .04);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.authfield__box:hover { border-color: #c9bca4; }
/* Champ actif : bordure sombre et légère élévation, pas de halo coloré. */
.authfield__box:focus-within { border-color: var(--color-text); box-shadow: 0 6px 18px -12px rgba(23, 42, 48, .45); }
.authfield__icon { flex: none; color: var(--faint); transition: color .2s ease; }
.authfield__box:focus-within .authfield__icon { color: var(--color-text); }
/* Le libellé reste pour les lecteurs d'écran ; à l'écran, le texte d'exemple joue son rôle. */
.authfield__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.authfield__input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; font-size: 1.06rem; color: var(--ink); box-shadow: none;
}
.authfield__input::placeholder { color: #7d878a; opacity: 1; }
/* Le champ actif est signalé par sa boîte (bordure sombre) : jamais de contour supplémentaire sur l'input, quelle que soit la règle générale de la charte. */
.authfield__box .authfield__input:focus, .authfield__box .authfield__input:focus-visible { outline: 0; box-shadow: none; }
.authfield__box .authcheck__input:focus-visible { outline: 0; }
.authfield__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--ink); }
.authfield__toggle {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px;
  border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.authfield__toggle:hover { background: #f4ecdf; color: var(--ink); }
.authfield__toggle:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.authfield__toggle[aria-pressed="true"] .authfield__slash { display: none; }
.authfield__hint, .authfield__error { margin: 8px 6px 0; font-size: .9rem; color: var(--faint); }
.authfield__error { color: var(--err); font-weight: 600; }
.authfield--error .authfield__box { border-color: var(--err); }

.authsplit__aside-link { margin: -4px 4px 4px; font-size: .95rem; }
.authsplit__aside-link a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.authsplit__aside-link a:hover { text-decoration: underline; }

/* ---------- Rangée, case à cocher, robustesse ---------- */
.authrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.authfield { min-width: 0; }
.authcheck__label { display: flex; align-items: flex-start; gap: 12px; padding: 2px 4px; color: var(--soft); font-size: .98rem; line-height: 1.45; cursor: pointer; }
.authcheck__label a { color: var(--color-primary); font-weight: 600; }
.authcheck__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.authcheck__box {
  flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 1.5px solid #c9bca4; background: #fff;
  display: grid; place-items: center; transition: background .15s ease, border-color .15s ease;
}
.authcheck__box::after {
  content: ""; width: 12px; height: 7px; border: 0 solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.authcheck__input:checked + .authcheck__box { background: var(--color-primary); border-color: var(--color-primary); }
.authcheck__input:checked + .authcheck__box::after { opacity: 1; }
.authcheck__input:focus-visible + .authcheck__box { outline: 2px solid var(--ember-d); outline-offset: 2px; }
.authcheck--error .authcheck__box { border-color: var(--err); }
.authsplit__form .strength { margin: 10px 6px 0; }
.authsplit__form .note { margin: 4px 0 0; text-align: center; color: var(--faint); font-size: .92rem; }

/* La réserve laissée sous le contenu pour la bulle du chatbot n'a pas lieu d'être ici : tout tient dans l'écran. */
body.ardz-assistant-present .public--auth { padding-bottom: 40px; }

/* ---------- Bouton ---------- */
.authsubmit {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 60px; width: 100%; margin-top: 8px; border: 0; border-radius: var(--auth-radius); cursor: pointer;
  background: var(--color-primary); color: #fff; font: inherit; font-weight: 700; font-size: 1.08rem;
  box-shadow: 0 16px 28px -16px rgba(154, 58, 24, .9);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.authsubmit__arrow { transition: transform .18s ease; }
.authsubmit:hover { background: var(--color-primary-dark); }
.authsubmit:hover .authsubmit__arrow { transform: translateX(4px); }
.authsubmit:active { transform: translateY(1px); box-shadow: 0 8px 16px -12px rgba(154, 58, 24, .9); }
.authsubmit:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.authsplit__foot { margin: 30px 0 0; text-align: center; color: var(--soft); font-size: 1rem; }
.authsplit__foot a { color: var(--color-primary); font-weight: 700; }

/* ---------- Panneau ---------- */
.authpanel {
  position: relative; overflow: hidden; border-radius: var(--auth-panel-radius); min-height: min(640px, calc(100vh - 270px));
  display: grid; grid-template-rows: 1fr auto auto; padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(28px, 3vw, 44px);
  background:
    radial-gradient(70% 55% at 100% 100%, var(--auth-sand-2) 0, rgba(230, 211, 186, 0) 70%),
    radial-gradient(60% 50% at 0% 0%, #fcf7f3 0, rgba(252, 247, 243, 0) 70%),
    var(--auth-sand);
}
.authpanel::before, .authpanel::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--auth-sand-2); opacity: .7; pointer-events: none;
}
.authpanel::before { width: 340px; height: 260px; right: -120px; top: -90px; }
.authpanel::after { width: 300px; height: 220px; left: -110px; bottom: -80px; }

/* Scène au trait continu (21/09/2026, même composition que le héros de la vitrine, frontend/src/styles/vitrine.css) :
   le dessin en haut, deux portraits flottants, le téléphone « Réserver » et la carte « Réservation confirmée » posés en bas. */
.authpanel__stage { position: relative; z-index: 1; min-height: clamp(400px, 36vw, 480px); max-width: 560px; width: 100%; margin-inline: auto; }
.authillu { position: absolute; left: 50%; top: 0; width: min(380px, 70%); height: auto; transform: translateX(-50%); }

.authavatar {
  position: absolute; width: 76px; height: 76px; border-radius: 50%; background: #fff; padding: 3px;
  box-shadow: 0 16px 30px -18px rgba(23, 42, 48, .5);
}
.authavatar--a { left: 3%; top: 9%; }
.authavatar--b { right: 1%; top: 30%; width: 84px; height: 84px; }

.authcard {
  position: absolute; z-index: 2; background: #fff; border-radius: 20px; padding: 20px 22px;
  box-shadow: 0 28px 48px -30px rgba(23, 42, 48, .5), 0 0 0 1px rgba(23, 42, 48, .05);
}
.authcard p { margin: 0; }
.authcard__kicker { font-size: .8rem; font-weight: 600; color: var(--faint); }
.authcard__title { font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.authcard__title--sm { font-size: .95rem; white-space: nowrap; }
.authcard__meta { color: var(--soft); font-size: .98rem; margin-top: 2px !important; }
.authcard__title--sm + .authcard__meta { font-size: .85rem; margin-top: 1px !important; white-space: nowrap; }
/* Téléphone « Réserver » : cadre encre, encoche, bouton décoratif (le panneau est masqué aux lecteurs d'écran). */
.authcard--phone { left: 0; bottom: 0; width: 136px; padding: 14px 12px 12px; border-radius: 22px; box-shadow: 0 0 0 2.5px var(--ink), 0 28px 48px -30px rgba(23, 42, 48, .5); }
.authcard__notch { display: block; width: 36px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: var(--ink); opacity: .35; }
.authcard__btn { display: block; margin-top: 10px; padding: 8px 0; border-radius: 12px; background: var(--color-primary); color: #fff; text-align: center; font-weight: 700; font-size: .85rem; }
/* Carte « Réservation confirmée » : coche sur pastille, largeur au contenu. */
.authcard--booking { right: 0; bottom: 7%; width: max-content; max-width: 50%; padding: 12px 16px 12px 48px; }
.authcard__check { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f8e6dc; color: var(--color-primary-dark); }
/* Point qui pulse (même règle que la vitrine), pour une carte « nouvelle commande » : padding à gauche et pastille terracotta. */
.authcard--new { padding-left: 46px; }
.authcard__dot { position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--color-primary); }
.authcard__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--color-primary); opacity: 0; }

.authdots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; }
.authdots span { width: 8px; height: 8px; border-radius: 999px; background: var(--auth-ochre); }
.authdots span.is-on { width: 24px; background: var(--ink); }

.authpanel__caption {
  position: relative; z-index: 1; margin: 18px auto 0; max-width: 18em; text-align: center; color: var(--ink);
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); line-height: 1.25; font-weight: 500; letter-spacing: -.015em;
}
.authpanel__caption strong { font-weight: 700; }

/* Console : panneau ardoise, sobre. */
.authpanel--console { background: radial-gradient(110% 90% at 100% 0%, #2c4047 0, rgba(44, 64, 71, 0) 60%), var(--ink); }
.authpanel--console::before, .authpanel--console::after { background: #22363d; }
.authpanel--console .authpanel__caption { color: #fff; }
.authcard--wide { left: 8%; top: 12%; width: min(340px, 78%); }
.authchecks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; font-weight: 600; color: var(--ink); }
.authchecks li { display: flex; align-items: center; gap: 12px; }
.authchecks li::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-bg);
  box-shadow: inset 0 0 0 7px var(--ok-bg), inset 0 0 0 11px var(--ok);
}
.authcard--code { right: 6%; bottom: 10%; display: flex; gap: 8px; padding: 16px 18px; }
.authcard--code span {
  display: grid; place-items: center; width: 36px; height: 46px; border-radius: 10px; background: var(--cream);
  border: 1px solid var(--line); font-weight: 700; font-size: 1.15rem; color: var(--ink);
}

/* Écrans peu hauts (portables 768 px) : on resserre pour que la connexion tienne sans défilement. */
@media (max-height: 840px) and (min-width: 901px) {
  .public--auth { padding-block: 16px; }
  body.ardz-assistant-present .public--auth { padding-bottom: 16px; }
  .authsplit__title { font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); margin-bottom: 10px; }
  .authsplit__lead { margin-bottom: 20px; font-size: 1.05rem; }
  .authsplit__form form { gap: 12px; }
  .authfield__box { height: 58px; }
  .authsubmit { height: 54px; }
  .authsplit__foot { margin-top: 18px; }
  .authpanel { min-height: min(560px, calc(100vh - 210px)); }
  .authpanel__stage { min-height: 380px; }
  .authillu { width: min(340px, 66%); }
  .authpanel__caption { font-size: 1.3rem; margin-top: 10px; }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 1100px) {
  .authsplit { gap: 32px; }
  .authavatar { width: 68px; height: 68px; }
}
@media (max-width: 900px) {
  .authsplit { grid-template-columns: minmax(0, 1fr); }
  .authsplit__form { justify-self: center; }
  .authpanel { display: none; }
}
@media (max-width: 480px) {
  .authfield__box { padding-inline: 18px; gap: 12px; }
  .authrow { grid-template-columns: minmax(0, 1fr); }
}

/* Gabarit d'entrée dans la coquille connectée (confirmation par code, /securite/code) : la colonne de contenu est plus
   étroite que la page publique à cause du menu latéral. Gouttière fixe, titre plafonné pour tenir sur deux lignes, et sous
   880 px de largeur utile le panneau passe sous le formulaire au lieu de l'écraser (colonne du formulaire jamais sous 360 px). */
.content:has(> .authsplit) { container: authshell / inline-size; }
.content .authsplit { gap: 40px; }
.content .authsplit__title { font-size: clamp(1.5rem, .8rem + 1.6vw, 2rem); }
@container authshell (max-width: 880px) {
  .content .authsplit { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .content .authsplit__form { justify-self: center; }
  .content .authpanel { width: 100%; max-width: 640px; min-height: 0; }
}
/* ---------- Mouvement : une seule séquence d'entrée, puis des cartes qui respirent ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes auth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes auth-panel { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes auth-float { from { transform: translateY(0); } to { transform: translateY(-9px); } }
  @keyframes auth-spark { from { stroke-dashoffset: 40; opacity: 0; } 30% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
  @keyframes auth-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
  @keyframes auth-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

  .authsplit__form > * { animation: auth-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
  .authsplit__form > :nth-child(1) { animation-delay: .05s; }
  .authsplit__form > :nth-child(2) { animation-delay: .12s; }
  .authsplit__form > :nth-child(3) { animation-delay: .2s; }
  .authsplit__form > :nth-child(4) { animation-delay: .28s; }
  .authsplit__form > :nth-child(5) { animation-delay: .36s; }
  .authsplit__spark path { stroke-dasharray: 40; animation: auth-spark .7s ease-out .45s both; }
  .authpanel { animation: auth-panel .7s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .authavatar { animation: auth-pop .5s cubic-bezier(.2, .9, .3, 1.3) both, auth-float 4.5s ease-in-out 1.2s infinite alternate; }
  .authavatar--a { animation-delay: .7s, 1.2s; }
  .authavatar--b { animation-delay: .85s, 2s; }
  .authcard--task { animation: auth-rise .6s cubic-bezier(.2, .7, .2, 1) .9s both, auth-float 5.5s ease-in-out 1.6s infinite alternate; }
  .authcard--wide, .authcard--code { animation: auth-rise .6s cubic-bezier(.2, .7, .2, 1) .8s both; }
  .authcard--code { animation-delay: 1.15s; }
  .authcard--booking { animation: auth-rise .6s cubic-bezier(.2, .7, .2, 1) 1s both, auth-float 6s ease-in-out 2.4s infinite alternate; }
  .authcard__dot::after { animation: auth-pulse 2.2s ease-out infinite; }
  .authsubmit:hover { transform: translateY(-1px); box-shadow: 0 20px 30px -16px rgba(168, 63, 24, .95); }
}
@media (prefers-reduced-motion: reduce) {
  .authfield__box, .authfield__icon, .authsubmit, .authsubmit__arrow, .authfield__toggle { transition: none; }
  .authsubmit:hover .authsubmit__arrow { transform: none; }
}

/* Écran du code (double authentification) : repli « plus de téléphone » et formulaire d'annulation. */
.authdetails { margin: 2px 0 14px; border: 1px solid var(--color-border); border-radius: var(--auth-radius); background: var(--color-surface); }
.authdetails summary { cursor: pointer; padding: 15px 18px; font-weight: 600; color: var(--color-text); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.authdetails summary::-webkit-details-marker { display: none; }
.authdetails summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.authdetails[open] summary::after { transform: rotate(-135deg); }
.authdetails > div { padding: 0 18px 4px; }
.authdetails p { margin: 0 0 12px; font-size: .92rem; line-height: 1.5; color: #4b5b60; }
.authdetails .authfield { margin-bottom: 12px; }
.authsplit__hint { margin: -6px 0 16px; }
.authsplit__cancel { margin-top: 14px; text-align: center; }

/* =============================================================
   Revue design 2 du 20/09/2026.
   - Un seul bord gauche pour tout ce qui suit un champ : aide, erreur, lien « Mot de passe oublié ? », case à cocher,
     indicateur de robustesse et note étaient décalés de 0, 4 ou 6 px selon le cas. Tout passe à 4 px, le retrait
     optique d'un texte posé sous une boîte à coins de 14 px.
   - Champ du code : le texte d'exemple reste en Inter Tight, sans l'interlettrage des chiffres (« C o d e  à  6 »).
   - Liens en --ember-d : l'orange #c45122 ne tient pas 4,5:1 sur le fond crème en dessous de 18 px.
   - Cibles tactiles de 44 px sur petit écran pour les liens seuls sur leur ligne.
   ============================================================= */
.authfield__hint, .authfield__error { margin: 8px 4px 0; }
.authsplit__form .strength { margin: 10px 4px 0; }
.authsplit__hint { margin: -6px 4px 16px; }
.authsplit__aside-link a, .authcheck__label a, .authsplit__foot a { color: var(--ember-d); }
.authfield__input[autocomplete="one-time-code"]::placeholder { font-family: "Inter Tight", system-ui, sans-serif; font-size: 1.06rem; letter-spacing: 0; }
.authdetails { margin: 0 0 16px; }
.authdetails summary { min-height: 56px; padding-block: 0; }
@media (max-width: 900px) {
  .authsplit__aside-link a, .authsplit__foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .authsplit__aside-link { margin-block: -8px; }
  .authsplit__foot { margin-top: 16px; }
}