/* ═══════════════════════════════════════════════════════════
   PAGES ANNEXES — base visuelle commune (reservation, fidelite, infos, blog, connexion, pages legales).
   Une seule feuille, un seul vocabulaire (prefixe an-). Les COULEURS viennent des reglages du restaurant via les variables --an-* calculees par
   core/annex_theme.php (memes reglages et meme logique de contraste que le menu) ; ici, aucune couleur propre a un restaurant.
   Polices : pile systeme sans-serif uniquement. Aucune police chargee depuis un autre domaine.
   Le menu principal, la commande et la roulette ne chargent pas cette feuille.
   ═══════════════════════════════════════════════════════════ */

.an-body {
  --an-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --an-display: var(--an-font);
  --an-r-panel: 20px;
  --an-r-ctl: 14px;
  --an-w: 62rem;       /* colonne de page : enseigne, titre et contenu partagent le meme bord */
  --an-measure: 40rem; /* largeur de lecture */
  --an-gutter: 20px;
  --an-focus: var(--an-accent);
  --an-ease: cubic-bezier(.23, 1, .32, 1);
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--an-bg);
  color: var(--an-text);
  font-family: var(--an-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
.an-body *, .an-body *::before, .an-body *::after { box-sizing: border-box; }
.an-body ::selection { background: color-mix(in srgb, var(--an-accent) 30%, transparent); }
.an-body :focus-visible { outline: 3px solid var(--an-focus); outline-offset: 3px; border-radius: 4px; }
.an-body img { max-width: 100%; }

/* ── Colonne de contenu ── */
.an-main { width: 100%; max-width: var(--an-w); margin: 0 auto; padding: 0 var(--an-gutter); }
.an-head { padding: 28px 0 4px; }
.an-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.an-lead { margin: 8px 0 0; max-width: 52ch; font-size: 1rem; line-height: 1.55; color: var(--an-muted); text-wrap: pretty; }
.an-meta { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9375rem; color: var(--an-muted); }
.an-meta span { display: inline-flex; align-items: center; gap: 7px; }
.an-meta svg { width: 15px; height: 15px; flex: none; color: var(--an-accent); }
.an-content { padding: 24px 0 0; }

/* Compositions : une colonne sur telephone ; sur ordinateur, texte d'un cote et action de l'autre. */
.an-split { display: grid; gap: 24px 64px; align-items: start; }
@media (min-width: 900px) {
  .an-split { gap: 40px 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
  .an-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .an-split--lead { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  .an-stick { position: sticky; top: 24px; }
}

/* Rubriques : un titre et un filet, pas une boite par information */
.an-section { padding-top: 24px; margin-top: 30px; border-top: 1px solid var(--an-line); }
.an-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.an-h2 { margin: 0 0 14px; font-weight: 650; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
.an-prose { max-width: 60ch; color: var(--an-text); }
.an-prose p { margin: 0 0 1em; }
.an-prose p:last-child { margin-bottom: 0; }
.an-muted { color: var(--an-s-muted); }
.an-page-muted { color: var(--an-muted); }
.an-small { font-size: .875rem; line-height: 1.5; }

/* Liens soulignes (jamais reconnus a la seule couleur) */
.an-link, .an-prose a, .an-hint a, .an-small a { color: var(--an-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.an-aside { margin: 18px 0 0; font-size: .9375rem; }
.an-aside a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: var(--an-accent); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* Panneau : seulement ou il regroupe une action (formulaire, QR) */
.an-panel { background: var(--an-panel); color: var(--an-s-text); border: 1px solid var(--an-s-line); border-radius: var(--an-r-panel); padding: 24px 22px; }
.an-panel > :last-child { margin-bottom: 0; }

/* ── Boutons ── */
.an-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--an-r-ctl);
  background: var(--an-btn);
  color: var(--an-btn-text);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--an-ease), filter 160ms var(--an-ease);
}
.an-btn:active { transform: scale(.98); }
.an-btn[disabled], .an-btn.is-loading { opacity: .65; cursor: progress; }
.an-btn svg { flex: none; }
.an-btn--outline { background: transparent; color: var(--an-text); border-color: color-mix(in srgb, var(--an-text) 34%, transparent); }
.an-btn--auto { width: auto; }
@media (hover: hover) and (pointer: fine) {
  .an-btn:hover { filter: brightness(.93); }
  .an-btn--outline:hover { filter: none; background: color-mix(in srgb, var(--an-text) 7%, transparent); }
}

/* ── Champs : poses sur la page, grands, lisibles ── */
.an-form { display: grid; gap: 22px; }
.an-field { display: grid; gap: 8px; min-width: 0; }
.an-label { font-size: .9375rem; font-weight: 650; color: var(--an-text); }
.an-form { gap: 20px; }
.an-input, .an-select, .an-textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--an-text) 42%, transparent);
  border-radius: 12px;
  background: transparent;
  color: var(--an-text);
  font: inherit;
  font-size: 1.0625rem;   /* >= 16 px : pas de zoom automatique sur iOS */
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}
.an-textarea { min-height: 116px; resize: vertical; }
.an-input::placeholder, .an-textarea::placeholder { color: var(--an-muted); opacity: 1; }
.an-input:focus-visible, .an-select:focus-visible, .an-textarea:focus-visible,
.an-input:focus-within, .an-select:focus-within, .an-textarea:focus-within {
  outline: 3px solid var(--an-focus);
  outline-offset: 1px;
  border-color: var(--an-text);
  border-radius: var(--an-r-ctl);
}
.an-input:user-invalid, .an-textarea:user-invalid { border-color: var(--an-page-danger); }
.an-input[type="date"], .an-input[type="time"] { min-width: 0; }
.an-hint { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--an-muted); }
.an-row { display: grid; column-gap: 14px; row-gap: 0; grid-template-columns: 1fr 1fr; align-items: end; }
.an-row > .an-field { gap: 0; grid-row: span 2; grid-template-rows: subgrid; }
.an-row > .an-field .an-label { margin-bottom: 8px; align-self: end; }

/* Choix unique : deux options en texte, la choisie en gras avec un trait a l'accent (meme langage que les onglets de connexion) ; vrais boutons radio, zone de 44 px et plus */
.an-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; border: 0; border-bottom: 1px solid var(--an-line); padding: 0; margin: 0; min-width: 0; }
.an-segments legend { grid-column: 1 / -1; padding: 0; margin: 0 0 6px; font-size: .9375rem; font-weight: 650; }
.an-segment { position: relative; display: block; min-width: 0; }
.an-segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.an-segment__body { position: relative; display: grid; gap: 1px; padding: 6px 0 12px; color: var(--an-muted); }
.an-segment__name { font-weight: 650; font-size: 1.0625rem; }
.an-segment__help { font-size: .8125rem; line-height: 1.35; }
.an-segment__tick { display: none; }
.an-segment input:checked + .an-segment__body { color: var(--an-text); }
.an-segment input:checked + .an-segment__body .an-segment__name { font-weight: 700; }
.an-segment input:checked + .an-segment__body::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--an-accent); }
.an-segment input:focus-visible + .an-segment__body { outline: 3px solid var(--an-focus); outline-offset: 2px; border-radius: 4px; }

/* ── Messages : information, succes, erreur (icone + texte, jamais la couleur seule) ── */
.an-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--an-line);
  border-radius: var(--an-r-ctl);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--an-text);
  background: color-mix(in srgb, var(--an-text) 5%, transparent);
}
.an-note svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.an-note--ok { border-color: color-mix(in srgb, var(--an-page-ok) 55%, transparent); background: color-mix(in srgb, var(--an-page-ok) 11%, transparent); }
.an-note--ok svg { color: var(--an-page-ok); }
.an-note--error { border-color: color-mix(in srgb, var(--an-page-danger) 60%, transparent); background: color-mix(in srgb, var(--an-page-danger) 11%, transparent); }
.an-note--error svg { color: var(--an-page-danger); }
.an-note a { color: inherit; font-weight: 700; }

/* Recapitulatif d'une saisie */
.an-recap { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border-radius: var(--an-r-ctl); background: color-mix(in srgb, var(--an-accent) 11%, transparent); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.an-recap svg { flex: none; width: 20px; height: 20px; color: var(--an-accent); }
.an-recap[hidden] { display: none; }
.an-recap span::first-letter { text-transform: uppercase; }

/* ── Horaires : jours en titre, heures alignees, filet pointille comme sur une carte de restaurant ── */
.an-hours { margin: 0; display: grid; }
.an-hours__row { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; }
.an-hours dt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; font-weight: 600; font-size: 1rem; }
.an-hours dt::after { content: ""; flex: 1; min-width: 16px; align-self: end; margin-bottom: .32em; border-bottom: 2px dotted color-mix(in srgb, var(--an-text) 28%, transparent); }
.an-hours dd { margin: 0; flex: none; display: grid; justify-items: end; gap: 2px; text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.an-hours__row.is-closed dd { font-weight: 500; color: var(--an-muted); }
.an-hours__row.is-note { display: block; color: var(--an-muted); font-size: .9375rem; }
.an-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-variant-numeric: tabular-nums; }

/* Coordonnees : l'itineraire est l'action principale (seul bouton plein) ; telephone et messagerie sont des lignes d'action ; les reseaux restent en retrait */
.an-address { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.5; font-style: normal; }
.an-contact .an-contact__main { margin: 0; min-height: 52px; }
.an-quick { margin: 8px 0 0; padding: 0; list-style: none; display: grid; }
.an-quick a { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; min-height: 52px; padding: 12px 0; color: var(--an-text); text-decoration: none; }
.an-quick a svg { flex: none; align-self: center; color: var(--an-accent); }
.an-quick__label { font-weight: 650; font-size: 1.0625rem; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--an-text) 35%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.an-quick__value { font-size: .9375rem; color: var(--an-muted); overflow-wrap: anywhere; }
.an-quick a:hover .an-quick__label { text-decoration-color: currentColor; }
.an-links { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 2px 22px; }
.an-links a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--an-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.an-links svg { width: 18px; height: 18px; color: var(--an-accent); }
.an-links--quiet { margin-top: 10px; }
.an-links--quiet a { font-size: .9375rem; font-weight: 500; color: var(--an-muted); }
.an-links--quiet a:hover { color: var(--an-text); }
@media (min-width: 600px) { .an-contact .an-contact__main { min-width: 13rem; } }

@media (min-width: 720px) {
  .an-body { --an-gutter: 32px; }

  .an-panel { padding: 30px 30px; }
}
@media (min-width: 600px) { .an-form > .an-btn { width: auto; min-width: 14rem; justify-self: start; } }
@media (max-width: 299px) {
  .an-row { grid-template-columns: 1fr; row-gap: 20px; }
  .an-row > .an-field { grid-row: auto; grid-template-rows: none; gap: 8px; }
  .an-row > .an-field .an-label { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .an-btn { transition: none; }
  .an-btn:active { transform: none; }
}

/* Dans un panneau, l'encre est celle du panneau */
.an-panel .an-btn--outline { color: var(--an-s-text); border-color: color-mix(in srgb, var(--an-s-text) 34%, transparent); }
.an-panel .an-links a { color: var(--an-s-text); }
.an-panel .an-links svg { color: var(--an-s-accent); }

/* Formulaire : pose directement sur la page sur telephone, dans un panneau des 720 px */
.an-form-panel { padding: 0; }
@media (min-width: 720px) {
  .an-form-panel { background: var(--an-panel); border: 1px solid var(--an-s-line); border-radius: var(--an-r-panel); padding: 32px; }
  .an-form-panel .an-input, .an-form-panel .an-textarea, .an-form-panel .an-segment__body { background: color-mix(in srgb, var(--an-bg) 55%, var(--an-panel)); }
}
.an-form-panel .an-label, .an-form-panel .an-segments legend { color: var(--an-text); }
@media (min-width: 720px) { .an-form-panel .an-label, .an-form-panel .an-segments legend { color: var(--an-s-text); } }
.an-who { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9375rem; color: var(--an-muted); }
.an-who svg { flex: none; width: 18px; height: 18px; color: var(--an-accent); }
.an-who strong { color: var(--an-text); font-weight: 650; }
@media (min-width: 720px) { .an-form-panel .an-who { color: var(--an-s-muted); } .an-form-panel .an-who strong { color: var(--an-s-text); } }

/* Introduction repliable (horaires) : ouverte sur ordinateur, repliee sur telephone */
.an-fold { margin: 0; border-block: 1px solid var(--an-line); }
@media (min-width: 900px) { .an-fold { border-block: 0; } }
.an-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; font-weight: 650; font-size: 1.125rem; }
.an-fold > summary::-webkit-details-marker { display: none; }
.an-fold > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--an-ease); margin-inline-end: 4px; }
.an-fold[open] > summary::after { transform: rotate(-135deg); }
@media (min-width: 900px) { .an-fold > summary { pointer-events: none; cursor: default; } .an-fold > summary::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .an-fold > summary::after { transition: none; } }
.an-fold__body { padding-bottom: 8px; }
.an-fold__body .an-address { margin: 0 0 14px; font-size: 1rem; }

/* Chiffres alignes sur la ligne de base dans les titres (la police les dessine sinon « de texte », le 1 ressemblant a un I) */


/* Message d'erreur amene a l'ecran par le script (focus programmatique pour les lecteurs d'ecran) : pas d'anneau de clavier sur un texte */
.an-note[tabindex="-1"]:focus, .an-note[tabindex="-1"]:focus-visible { outline: none; }

/* Controles natifs (icones des champs date et heure, defilement) dans le ton de la page */
.an-body[data-tone="dark"] { color-scheme: dark; }
.an-body[data-tone="light"] { color-scheme: light; }

/* Appui tactile : pas de delai de double-tape */
.an-btn, .an-segment, .an-back, .an-links a, .an-aside a, .an-fold > summary { touch-action: manipulation; }

/* Pied de page : le composant COMMUN du menu et de la roulette (_legal_footer.php, public-shared.css), repris tel quel pour la structure, la typographie des liens et les langues.
   Ses couleurs suivent le theme de la page : les variables --theme-*-on-outer qu'il lit recoivent ici les memes valeurs que celles calculees pour le menu (texte, texte
   secondaire, filet et accent lisibles sur le fond). Les reglages ci-dessous ne s'appliquent qu'aux pages annexes (.an-body) : le menu et la roulette ne sont pas touches. */
.an-body {
  --theme-text-on-outer: var(--an-text);
  --theme-muted-on-outer: var(--an-muted);
  --theme-border-on-outer: var(--an-line);
  --theme-accent-on-outer: var(--an-accent);
  --theme-primary: var(--an-accent);
  --an-haut: 62px; /* place sous le dernier element pour le bouton « Haut » flottant : en bas de page il ne recouvre rien */
}
.an-body .an-main { padding-bottom: 28px; }
.an-body > .legal-footer { width: 100%; margin-top: auto; padding: 0 var(--an-gutter) calc(var(--an-haut) + env(safe-area-inset-bottom, 0px)); }
.an-body > .legal-footer .legal-footer__inner { padding-top: 2px; }
.an-body > .legal-footer .legal-footer__brand { margin-top: 8px; }
.an-body > .legal-footer .legal-footer__links { row-gap: 6px; }

/* « Vous etes un professionnel ? » : un vrai appel a l'action (fin cadre a l'accent du theme, zone de 44 px), meme destination et meme traduction */
.an-body > .legal-footer .legal-footer__links a[target="_blank"] {
  margin-inline: 8px;
  padding: 0 18px;
  min-height: 44px;
  border: 1px solid var(--lf-accent);
  border-radius: 999px;
  color: var(--lf-accent);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .005em;
  touch-action: manipulation;
  transition: background-color 160ms var(--an-ease), transform 160ms var(--an-ease);
}
.an-body > .legal-footer .legal-footer__links a[target="_blank"]::before { display: none; }
.an-body > .legal-footer .legal-footer__links a[target="_blank"]:hover,
.an-body > .legal-footer .legal-footer__links a[target="_blank"]:focus-visible { background: var(--lf-accent); color: var(--an-bg); text-decoration: none; }
.an-body > .legal-footer .legal-footer__links a[target="_blank"]:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 3px; border-radius: 999px; }
.an-body > .legal-footer .legal-footer__links a[target="_blank"]:active { transform: scale(.97); }
@media (min-width: 640px) and (max-width: 899px) { /* tablette : nom, liens et bouton empiles et centres (en ligne, le nom se coupe sur deux lignes) */
  .an-body > .legal-footer .legal-footer__inner { flex-direction: column; justify-content: center; text-align: center; }
  .an-body > .legal-footer .legal-footer__brand { margin-top: 8px; }
}
@media (min-width: 1340px) { .an-body { --an-haut: 14px; } } /* le bouton « Haut » est alors hors de la colonne du pied de page */
@media (prefers-reduced-motion: reduce) { .an-body > .legal-footer .legal-footer__links a[target="_blank"] { transition: none; } }

/* Colonne de lecture etroite (blog) : la barre et le contenu partagent le meme bord */
.an-main.an-narrow { max-width: 48rem; }

/* Onglets connexion / inscription : deux liens en texte sur deux colonnes egales (un libelle long passe a la ligne, sans deborder), le courant en gras avec un trait a l'accent */
.an-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 28rem; margin: 0 0 22px; border-bottom: 1px solid var(--an-line); }
.an-tab { position: relative; display: flex; align-items: flex-start; min-height: 48px; padding: 13px 0 9px; color: var(--an-muted); font-size: 1rem; font-weight: 600; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; text-decoration: none; touch-action: manipulation; }
.an-tab.is-active { color: var(--an-text); font-weight: 700; }
.an-tab.is-active::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--an-accent); }
.an-tab:not(.is-active):hover { color: var(--an-text); }
.an-main.an-narrow .an-form, .an-main.an-narrow .an-aside { max-width: 28rem; }
.an-row--plain { grid-template-columns: 1fr 1fr; align-items: start; }
.an-row--plain > .an-field { grid-row: auto; grid-template-rows: none; gap: 8px; }
.an-row--plain > .an-field .an-label { margin-bottom: 0; }
@media (max-width: 380px) { .an-row--plain { grid-template-columns: 1fr; } }

/* Champs date et heure : controles natifs conserves, mais meme hauteur, meme alignement et meme couleur que les autres champs */
.an-input[type="date"], .an-input[type="time"] { display: block; line-height: 1.3; font-variant-numeric: tabular-nums; }
.an-input[type="date"]::-webkit-date-and-time-value, .an-input[type="time"]::-webkit-date-and-time-value { text-align: start; min-height: 1.3em; }
.an-input[type="date"]::-webkit-datetime-edit, .an-input[type="time"]::-webkit-datetime-edit { padding: 0; }
.an-input[type="date"]::-webkit-calendar-picker-indicator, .an-input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; padding: 6px; margin-inline-end: -6px; border-radius: 6px; }
.an-input[type="date"]::-webkit-calendar-picker-indicator:hover, .an-input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.an-input[type="number"] { font-variant-numeric: tabular-nums; }

/* Texte long replie (infos) : debut visible, suite accessible ; entierement visible sans JavaScript */
.an-prose.is-collapsed > p:not(:first-child) { display: none; }
.an-prose.is-collapsed > p:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; margin-bottom: 0; }
.an-prose-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 0; padding: 0; border: 0; background: none; color: var(--an-accent); font: inherit; font-size: .9375rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: pointer; touch-action: manipulation; }
.an-prose-more[hidden] { display: none; }
.an-prose-more svg { transition: transform 180ms cubic-bezier(.23, 1, .32, 1); }
.an-prose-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (min-width: 900px) { .an-prose.is-collapsed > p:first-child { -webkit-line-clamp: 8; line-clamp: 8; } }
@media (prefers-reduced-motion: reduce) { .an-prose-more svg { transition: none; } }

/* Formulaires (reservation, creation de carte) : poses a plat sur la page a toutes les largeurs, plus de panneau teinte sur ordinateur */
@media (min-width: 720px) {
  .an-form-panel { background: none; border: 0; border-radius: 0; padding: 0; }
  .an-form-panel .an-input, .an-form-panel .an-textarea { background: transparent; }
  .an-form-panel .an-label, .an-form-panel .an-segments legend { color: var(--an-text); }
  .an-form-panel .an-who { color: var(--an-muted); }
  .an-form-panel .an-who strong { color: var(--an-text); }
}
@media (max-width: 380px) { .an-tabs { gap: 12px; } .an-tab { font-size: .9375rem; } }