/* =============================================================
   Espace client ARDOIZA : feuille de style unique, thème clair uniquement (design/CHARTE.md).
   Charte : titres Orbitron terracotta, texte Inter Tight, boutons orange à coins 14 px,
   cartes blanches rayon 14 px bordure filet, panneaux sable et ardoise à 24 px. Lisible jusqu'à 360px.
   ============================================================= */
/* Polices de la charte auto-hébergées (sous-ensemble latin, woff2, dossier public/fonts) : aucun appel à Google Fonts,
   aucune adresse IP transmise à un tiers. Chemins relatifs à cette feuille, donc valables sous BASE_PATH. */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/inter-tight-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Orbitron"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/orbitron-700-latin.woff2") format("woff2");
}
:root {
  color-scheme: light only;
  --title: #a94e2c;
  --ember: #c45122;
  --ember-d: #a83f18;
  --ink: #172a30;
  --soft: #4d5a5e;
  --faint: #5f6c70;
  --beige: #ece3d3;
  --cream: #faf7f3;
  --line: #ddd5cc;
  --ok: #172a30;
  --ok-bg: #f1e4d1;
  --ok-line: #e6d3ba;
  --warn: #a15c07;
  --warn-bg: #fbf0dc;
  --err: #a3271b;
  --err-bg: #fbe9e6;
  --info: #6f5f3f;
  --info-bg: #f5eee1;
  /* Jetons de la charte (section 1). Palette sans vert depuis le 21/09/2026 : sable, ocre et corail remplacent les anciens jetons ; succès = encre sur sable. */
  --surface: #ffffff;
  --sand: #f1e4d1;
  --sand-2: #e6d3ba;
  --ochre: #d9a066;
  --coral: #e8a98c;
  --r-field: 14px;
  --r-panel: 24px;
  --shadow-1: 0 1px 2px rgba(23, 42, 48, .04);
  --shadow-2: 0 6px 18px -12px rgba(23, 42, 48, .45);
  --shadow-3: 0 28px 48px -30px rgba(23, 42, 48, .5);
  --shadow-ember: 0 16px 28px -16px rgba(154, 58, 24, .9);
  --radius: var(--r-field);
  --topbar-h: 58px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
h1, h2 {
  font-family: "Orbitron", "Inter Tight", sans-serif;
  color: var(--title);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.25;
  text-wrap: balance;
}
h1 { font-size: clamp(1.25rem, 3vw, 1.7rem); margin: 0 0 8px; }
h2 { font-size: clamp(.95rem, 2vw, 1.1rem); margin: 0 0 14px; }
h3 { font-size: 1.02rem; margin: 18px 0 6px; }
p { margin: 0 0 12px; }
/* Liens en --ember-d : l'orange #c45122 ne tient pas 4,5:1 sur le fond crème en dessous de 18 px. */
a { color: var(--ember-d); font-weight: 600; }
a:hover { color: #84300f; }
img { max-width: 100%; }
[hidden] { display: none !important; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ---------- En-tête blanc collant ---------- */
.topbar { background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar__inner {
  max-width: 1240px; margin: 0 auto; min-height: var(--topbar-h);
  padding: 8px 16px; display: flex; align-items: center; gap: 12px;
}
.topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-width: 0; }
.topbar__brand img { height: 34px; width: auto; display: block; }
.topbar__tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember-d); border: 1.5px solid var(--ember-d); border-radius: 99px; padding: 2px 10px; white-space: nowrap;
}
.topbar__account, .topbar__links { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar__links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; padding: 8px 10px; border-radius: 10px; }
.topbar__links a:not(.btn):hover { background: #f4ecdf; text-decoration: none; }
.topbar__name {
  font-size: .9rem; font-weight: 600; color: var(--soft);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inline-form { display: inline; margin: 0; }
.menu-toggle {
  display: none; align-items: center; gap: 6px; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-field); padding: 6px 12px; cursor: pointer;
}
.menu-toggle svg { width: 18px; height: 18px; }

/* ---------- Barre du haut : liseré, frise au trait, pastille du restaurant ---------- */
/* Liseré terracotta vers ocre sur toute la largeur : la barre porte la charte sans ajouter de bouton. */
.topbar::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--ember) 0%, var(--ochre) 55%, var(--sand-2) 100%); }
.topbar__inner { position: relative; }
/* Frise décorative (table dressée) en filigrane, entre la marque et le compte ; jamais interactive. Elle est DANS le
   flux (audit visuel du 05/10/2026) : posée en absolu au centre, elle passait sous le sélecteur d'établissement, sous
   « Changer » et sous FR / EN dès que le nom du restaurant était long. Elle cède la place la première (rétrécissement
   très fort, le dessin est rogné par les bords grâce à preserveAspectRatio « slice ») et disparaît quand il n'en reste
   plus. */
.topbar__motif {
  flex: 0 1000 300px; min-width: 0; width: 300px; height: 44px; margin-inline: auto;
  color: var(--ink); opacity: .22; pointer-events: none;
}
.topbar__who {
  display: inline-flex; align-items: center; gap: 8px; max-width: 280px; min-width: 0;
  padding: 3px 12px 3px 3px; background: #fff; border: 1px solid var(--line); border-radius: 99px;
}
.topbar__who-ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sand); color: var(--ink);
  display: grid; place-items: center;
}
.topbar__who-ico svg { width: 18px; height: 18px; }
.topbar__who .topbar__name { color: var(--ink); }
.topbar__logout { display: inline-flex; align-items: center; gap: 6px; }
.topbar__logout svg { width: 16px; height: 16px; flex: none; color: var(--soft); }
.topbar__logout:hover svg { color: var(--ember); }
@media (max-width: 1100px) { .topbar__motif { display: none; } }
@media (max-width: 720px) {
  /* Sous 720 px la pastille garde le pictogramme seul (le nom est déjà masqué à 980 px) ; sous 480 px le libellé de déconnexion s'efface aussi. */
  .topbar__who { padding: 3px; }
}
@media (max-width: 480px) {
  .topbar__logout span { display: none; }
  .topbar__logout { min-height: 44px; padding-inline: 10px; }
  .topbar__logout svg { width: 20px; height: 20px; color: var(--ink); }
}

/* ---------- Structure : menu latéral + contenu ---------- */
.shell {
  flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 16px 48px;
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start;
}
.sidenav { position: sticky; top: calc(var(--topbar-h) + 24px); }
.sidenav ul { list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.sidenav__link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  color: var(--ink); font-weight: 500; font-size: .95rem; text-decoration: none;
}
.sidenav__link svg { width: 19px; height: 19px; flex: none; color: var(--soft); }
.sidenav__link:hover { background: var(--cream); color: var(--ink); }
.sidenav__link.is-current { background: var(--beige); color: var(--title); font-weight: 700; }
.sidenav__link.is-current svg { color: var(--ember); }
.content { min-width: 0; }
.content > * + * { margin-top: 24px; }

/* Écrans publics (connexion, inscription...) */
.public { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 36px 16px 56px; }
.public > * + * { margin-top: 18px; }
.public--wide { max-width: 760px; }

/* ---------- En-tête de page ---------- */
/* Titres à gauche, actions à droite calées sur le titre (pas sur l'accroche), accroche en dessous sur toute la largeur. */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titles actions" "lead lead"; column-gap: 16px; align-items: start; }
.page-head__titles { grid-area: titles; min-width: 0; }
.page-head .lead { grid-area: lead; color: var(--soft); margin: 0; max-width: 720px; }
.page-head__actions { grid-area: actions; align-self: center; display: flex; flex-wrap: wrap; gap: 8px; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-d); margin: 0 0 8px; }

/* ---------- Cartes, grilles, tuiles ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card--highlight { border: 2px solid var(--ember); }
/* Un seul style de titre de section, quel que soit le conteneur de la carte (audit visuel du 05/10/2026, M1) : 13 px,
   espacé, sans filet. Les fiches, l'ardoise et les grilles précisent ensuite la place du titre, jamais sa taille.
   Spécificité d'une seule classe : les feuilles de rubrique (.etab-card__title, console/acces.css) la complètent. */
.card__title { display: block; border: 0; padding: 0; font-size: .8125rem; letter-spacing: .09em; line-height: 1.5; margin: 0 0 14px; }
.card__body > :last-child { margin-bottom: 0; }
.card__footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.grid--tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
/* Inter Tight et non Orbitron : le zéro barré d'Orbitron se lit « Ø » sur un compteur. */
.tile__value { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--title); font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile__label { font-size: .86rem; font-weight: 600; color: var(--soft); }
.tile__hint { font-size: .78rem; color: var(--faint); }

/* Carte d'offre */
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; }
.plan--current { border: 2px solid var(--ember); }
.plan__name { font-weight: 700; font-size: 1.08rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Inter Tight et non Orbitron : le zéro barré d'Orbitron se lit « Ø » sur un prix. */
.plan__price { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 700; color: var(--title); font-size: 1.75rem; letter-spacing: -.02em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.plan__price small { font-family: "Inter Tight", sans-serif; font-size: .76rem; color: var(--faint); font-weight: 500; }
.plan__for { font-size: .88rem; color: var(--soft); margin-bottom: 8px; }
.plan ul { margin: 0 0 14px; padding-left: 18px; font-size: .9rem; }
.plan li { margin-bottom: 4px; }
.plan__action { margin-top: auto; }
.note { font-size: .88rem; color: var(--soft); }
.muted { color: var(--soft); }

/* ---------- Boutons (coins 14 px, la pilule reste aux badges) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; text-align: center;
  border: 1.5px solid transparent; border-radius: var(--r-field); padding: 11px 22px; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--sm { font-size: .84rem; padding: 7px 14px; }
.btn--primary { color: #fff; background: var(--ember); }
.btn--primary:hover { color: #fff; background: var(--ember-d); }
.btn--secondary { color: var(--ember); background: #fff; border-color: var(--ember); }
.btn--secondary:hover { color: var(--ember-d); border-color: var(--ember-d); background: var(--cream); }
.btn--danger { color: #fff; background: var(--err); }
.btn--danger:hover { color: #fff; background: #84200f; }
.btn--quiet { color: var(--soft); background: transparent; border-color: var(--line); }
.btn--quiet:hover { color: var(--ink); border-color: var(--faint); }

/* Champs « Choisir un fichier » : le bouton natif prend le style des boutons secondaires, le nom du fichier suit. */
input[type="file"] { font: inherit; color: var(--soft); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; font-size: .84rem; line-height: 1.2; color: var(--ember); background: #fff;
  border: 1.5px solid var(--ember); border-radius: var(--r-field); padding: 7px 14px; margin-right: 12px; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
input[type="file"]::file-selector-button:hover { color: var(--ember-d); border-color: var(--ember-d); background: var(--cream); }
input[type="file"]:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
/* align-content : dans une rangée, un champ sans aide ne répartit plus la hauteur de son voisin entre ses lignes ; les
   libellés et les cases restent alignés (audit visuel du 05/10/2026, M2). */
.field { display: grid; gap: 5px; align-content: start; }
.field__label { font-size: .86rem; font-weight: 600; color: var(--soft); }
.field__optional { font-weight: 400; color: var(--faint); }
.input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid #c9bda6; border-radius: 8px; padding: 10px 12px; min-height: 44px;
}
.input::placeholder { color: #8a9497; }
select.input { appearance: auto; }
.field--error .input { border-color: var(--err); border-width: 2px; }
.field__hint { font-size: .82rem; color: var(--soft); margin: 0; }
.field__error { font-size: .86rem; font-weight: 600; color: var(--err); margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--ember); }
/* Champ piège anti-robot : hors écran, invisible des lecteurs d'écran (aria-hidden sur le conteneur). */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Indicateur de robustesse du mot de passe */
.strength { display: grid; gap: 4px; }
.strength__bar { height: 6px; border-radius: 99px; background: var(--beige); overflow: hidden; }
.strength__fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--err); transition: width .2s ease, background-color .2s ease; }
.strength[data-level="1"] .strength__fill { width: 25%; background: var(--err); }
.strength[data-level="2"] .strength__fill { width: 50%; background: var(--warn); }
.strength[data-level="3"] .strength__fill { width: 75%; background: var(--ok); }
.strength[data-level="4"] .strength__fill { width: 100%; background: var(--ok); }
.strength__text { font-size: .82rem; color: var(--soft); margin: 0; }

/* ---------- Bandeaux d'alerte ---------- */
.alert { border: 1px solid; border-left-width: 4px; border-radius: var(--radius); padding: 12px 16px; }
.alert p { margin: 0; }
.alert__title { font-weight: 700; margin-bottom: 2px !important; }
.alert--success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.alert--warning { background: var(--warn-bg); border-color: var(--warn); color: #7a4504; }
.alert--error { background: var(--err-bg); border-color: var(--err); color: #7f1d13; }
.alert--info { background: var(--info-bg); border-color: var(--info); color: var(--ink); }
.alert a { color: inherit; }

/* ---------- Tableaux ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border-bottom: 1.5px solid var(--line); padding: 10px 12px; white-space: nowrap; }
td { border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Badges d'état ---------- */
.badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: 2px 10px; border: 1px solid; white-space: nowrap; }
.badge--neutral { color: var(--soft); background: #f3efe8; border-color: var(--line); }
.badge--success { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.badge--warning { color: #7a4504; background: var(--warn-bg); border-color: var(--warn); }
.badge--error { color: #7f1d13; background: var(--err-bg); border-color: var(--err); }
.badge--info { color: var(--info); background: var(--info-bg); border-color: var(--info); }
.tag { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ember); border-radius: 99px; padding: 2px 8px; }

/* ---------- État vide : voir le bloc « État vide, ligne d'état, erreur de page » en fin de feuille ---------- */

/* ---------- Listes libellé / valeur ---------- */
.deflist { margin: 0; display: grid; gap: 0; }
.deflist > div { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { font-size: .86rem; font-weight: 600; color: var(--soft); }
.deflist dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Divers ---------- */
.steps { counter-reset: s; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.steps > li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.steps > li::before { counter-increment: s; content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--ember); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
/* Étapes pour ouvrir un module (src/views/liste-etapes.ts) : coche sur fond d'encre pour une étape faite. */
.steps--setup > li.steps__item--done::before { content: "\2713"; background: var(--ok); }
.steps--setup .steps__head { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.steps--setup .steps__hint { margin: 4px 0 0; }
.steps--setup .steps__action { margin: 8px 0 0; }
.steps--setup > li { scroll-margin-top: 16px; }
.code, code, kbd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95em; }
.keybox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.keybox__value { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; letter-spacing: .04em; overflow-wrap: anywhere; }
details.faq { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
details.faq + details.faq { margin-top: 8px; }
details.faq summary { cursor: pointer; font-weight: 600; padding: 13px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
/* Chevron au trait dans une pastille sable, comme les questions fréquentes de la vitrine. */
.faq__chev { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sand); color: var(--ink); transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.faq__chev svg { width: 16px; height: 16px; }
details.faq[open] .faq__chev { transform: rotate(180deg); background: var(--ember); color: #fff; }
details.faq[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
details.faq > :not(summary) { color: var(--soft); }
.stack > * + * { margin-top: 18px; }
.center { text-align: center; }

/* ---------- Pied de page encre ---------- */
.footer { background: var(--ink); color: #fff; font-size: .84rem; margin-top: auto; }
.footer__inner { max-width: 1240px; margin: 0 auto; padding: 22px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer img { height: 30px; width: auto; display: block; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer a { color: #fff; font-weight: 500; opacity: .9; text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: #fff; opacity: 1; text-decoration: none; }
.footer__note { opacity: .75; }
/* La bulle « Une question ? » de l'assistant (fixe, en bas à droite, environ 200 px de large) ne doit pas recouvrir la mention
   du pied de page sur une page courte : place réservée à droite, réduite à mesure que l'écran dépasse les 1240 px du contenu.
   Sur petit écran, assistant.css relève déjà toute la page (body.ardz-assistant-present, padding-bottom). */
body.ardz-assistant-present .footer__inner { padding-right: clamp(16px, calc(230px - (100vw - 1240px) / 2), 230px); }
@media (max-width: 640px) { body.ardz-assistant-present .footer__inner { padding-right: 16px; padding-bottom: 88px; } }

/* =============================================================
   Refonte du contenu (18/09/2026, retour de Hugo) : on quitte le « kit de cartes blanches ».
   - Une section titrée devient une fiche à deux colonnes : titre à gauche, contenu à droite,
     séparée de la suivante par un simple filet. Plus de boîte autour.
   - L'offre en cours s'affiche sur une ardoise (fond encre), seul élément fort de la page.
   - Champs regroupés et dimensionnés selon leur contenu, boutons avec du relief.
   ============================================================= */

/* ---------- Sections en fiche ---------- */
.content > .card:has(> .card__title),
.stack > .card:has(> .card__title) {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; row-gap: 0;
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 28px 0 10px; margin-top: 0;
}
.content > .card:has(> .card__title) > .card__title,
.stack > .card:has(> .card__title) > .card__title {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  border: 0; padding: 3px 0 0; margin: 0; display: block;
  font-size: .8125rem; letter-spacing: .09em; line-height: 1.5;
}
.content > .card:has(> .card__title) > .card__body,
.content > .card:has(> .card__title) > .card__footer,
.stack > .card:has(> .card__title) > .card__body,
.stack > .card:has(> .card__title) > .card__footer { grid-column: 2; max-width: 620px; }
/* Un tableau a besoin de toute la largeur : le titre repasse au-dessus. */
.content > .card:has(.tablewrap), .stack > .card:has(.tablewrap),
.content > .card:has(.grid), .stack > .card:has(.grid) { display: block; }
.content > .card:has(.tablewrap) > .card__title, .stack > .card:has(.tablewrap) > .card__title,
.content > .card:has(.grid) > .card__title, .stack > .card:has(.grid) > .card__title { margin-bottom: 14px; }
.content > .card:has(.tablewrap) > .card__body, .stack > .card:has(.tablewrap) > .card__body,
.content > .card:has(.grid) > .card__body, .stack > .card:has(.grid) > .card__body { max-width: none; }
.card__body > p:first-child { margin-top: 0; }
/* ---------- Une annonce de l'équipe : un texte à lire, en pleine largeur ---------- */
/* Sortie de la grille « titre à gauche, contenu à droite » ci-dessus : sans bloc .card__body, ses paragraphes se
   rangeaient un sur deux dans la colonne de 200 px. Surface blanche, texte limité à une largeur de lecture. */
.content > .card.annonce, .stack > .card.annonce {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px;
}
.annonce[data-unread] { border-left: 4px solid var(--ember); }
.annonce__pastilles { margin: 0 0 10px; }
.annonce__titre { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.3; }
.annonce__dates { margin: 0; }
.annonce__texte { max-width: 70ch; margin-top: 16px; }
.annonce__texte > p { margin: 0 0 12px; line-height: 1.6; }
.annonce__texte > p:last-child { margin-bottom: 0; }
.annonce__pied { max-width: 70ch; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.annonce__pied > .note { margin: 0 0 12px; }
.annonce__pied > .form { margin: 0; }
@media (max-width: 640px) { .content > .card.annonce, .stack > .card.annonce { padding: 18px 16px; } .annonce__titre { font-size: 1.1rem; } }

.card__footer { border-top: 0; padding-top: 0; }

/* Cartes sans titre et cartes rangées en grille : restent des surfaces, mais plus douces. */
.card { border-color: var(--line); box-shadow: 0 1px 0 rgba(27, 42, 47, .03); }
.grid > .card { padding: 24px; }
.grid > .card > .card__title { border: 0; padding: 0; font-size: .8125rem; letter-spacing: .09em; display: block; margin-bottom: 8px; }

/* ---------- L'ardoise : l'offre en cours ---------- */
.content > .card.card--highlight, .stack > .card.card--highlight, .card.card--highlight {
  display: block; background: var(--ink); color: #f6efe6; border: 0; border-radius: var(--r-panel); padding: 28px 32px;
  box-shadow: 0 18px 32px -24px rgba(27, 42, 47, .8);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%);
}
.content > .card.card--highlight > .card__title, .stack > .card.card--highlight > .card__title, .card--highlight > .card__title {
  display: block; color: #e9a582; border: 0; padding: 0; margin: 0 0 16px; font-size: .8125rem; letter-spacing: .09em;
}
.content > .card.card--highlight > .card__body, .content > .card.card--highlight > .card__footer { max-width: none; }
.card--highlight .deflist > div { border-bottom-color: rgba(255, 255, 255, .13); }
.card--highlight .deflist dt { color: rgba(246, 239, 230, .62); }
.card--highlight .deflist dd { color: #fff; font-weight: 600; }
.card--highlight a:not(.btn) { color: #f0b596; }
.card--highlight a:not(.btn):hover { color: #fff; }
.card--highlight .note, .card--highlight .muted, .card--highlight .field__hint { color: rgba(246, 239, 230, .7); }
.card--highlight .card__footer { border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 16px; }
.card--highlight .btn--secondary, .card--highlight .btn--quiet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.card--highlight .btn--secondary:hover, .card--highlight .btn--quiet:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
.card--highlight .keybox { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.card--highlight .keybox__value { color: #fff; }
.card--highlight .field__label { color: rgba(246, 239, 230, .85); }
.card--highlight :focus-visible { outline-color: #f0b596; }

/* L'ardoise respire : un bandeau ou un titre placé juste au-dessus ne doit pas la toucher. */
.content > * + .card.card--highlight, .stack > * + .card.card--highlight { margin-top: 32px; }
.content > .alert + .alert { margin-top: 10px; }

/* ---------- En-tête de page ---------- */
.page-head h1 { margin-bottom: 8px; }
.page-head .lead { font-size: 1.02rem; }

/* ---------- Boutons ---------- */
.btn {
  min-height: 46px; padding: 0 24px; font-weight: 650; font-size: .95rem; letter-spacing: .005em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
/* 44 px au moins : cible tactile. */
.btn--sm { min-height: 44px; padding: 0 16px; font-size: .85rem; }
.btn--primary {
  background: var(--ember); border-color: var(--ember-d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 18px -12px rgba(154, 58, 24, .95);
}
.btn--primary:hover { background: var(--ember-d); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 22px -12px rgba(154, 58, 24, 1); }
.btn--primary:active { transform: translateY(0); background: #84300f; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22); }
.btn--secondary { color: var(--ink); background: #fff; border-color: #cfc3ab; box-shadow: 0 1px 0 rgba(27, 42, 47, .05); }
.btn--secondary:hover { color: var(--ember-d); border-color: var(--ember); background: #fff; }
.btn--secondary:active { background: var(--cream); }
/* Bouton discret : texte simple, sans soulignement ni ombre, survol par fond léger comme les liens de la barre du haut. */
.btn--quiet { color: var(--soft); background: transparent; border-color: transparent; padding-inline: 12px; text-decoration: none; box-shadow: none; }
.btn--quiet:hover { color: var(--ink); border-color: transparent; background: #f4ecdf; text-decoration: none; }
.btn--danger { background: #fff; color: var(--err); border-color: #e2b4ad; box-shadow: none; }
.btn--danger:hover { background: var(--err); color: #fff; border-color: var(--err); }
.btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.actions { gap: 12px; margin-top: 10px; }
.form > .actions { margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- Formulaires ---------- */
.form { gap: 18px; }
.form__row { gap: 16px 14px; }
.field { gap: 6px; }
.field__label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.field__optional { font-size: .8rem; }
.input {
  min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff;
  box-shadow: inset 0 1px 2px rgba(27, 42, 47, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover { border-color: #b9ab90; }
.input:focus, .input:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 6px 18px -12px rgba(23, 42, 48, .45); }
.input::placeholder { color: #9aa2a4; }
.input[readonly], .input:disabled { background: #f6f1e9; color: var(--soft); box-shadow: none; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ember) 50%), linear-gradient(135deg, var(--ember) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field--error .input { border-color: var(--err); border-width: 1px; box-shadow: 0 0 0 3px rgba(163, 39, 27, .12); }
/* Champ en erreur : la bordure et l'ombre sont celles de l'erreur, avec ou sans focus ; l'anneau rend le focus visible (RGAA 10.7). */
.field--error .input:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.field__hint { font-size: .82rem; line-height: 1.45; }
.field__error { font-size: .85rem; }
.field__error::before { content: "! "; font-weight: 800; }
/* Largeurs selon le contenu attendu */
.form__row:has([name="postal_code"]) { grid-template-columns: 150px minmax(0, 1fr); }
.field:has(> [name="phone"]), .field:has(> [name="siret"]) { max-width: 300px; }
.form__row .field:has(> [name="siret"]) { max-width: none; }

/* Groupes de champs */
.fgroup { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.fgroup + .fgroup { margin-top: 10px; padding-top: 22px; border-top: 1px dashed var(--line); }
.fgroup > legend { padding: 0; margin-bottom: 2px; font-weight: 700; font-size: .98rem; color: var(--ink); }
.fgroup__lead { margin: -8px 0 0; font-size: .86rem; color: var(--soft); }

.check { align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; }
.check:has(input:checked) { border-color: var(--ember); background: #fff8f4; }
.check input { margin: 0; }

/* ---------- Bandeaux ---------- */
:root { --info: #6f5f3f; --info-bg: #f5eee1; }
.alert { border-width: 0 0 0 3px; border-radius: 8px; padding: 11px 16px; font-size: .94rem; }
.alert--info { color: var(--ink); }
/* Titre du bandeau sur sa propre ligne, phrase dessous ; un formulaire en ligne du bandeau (« Recevoir l'email de
   nouveau ») passe sous la phrase au lieu de s'accrocher à son dernier mot (audit visuel du 05/10/2026, M3). */
.alert__title { display: block; margin: 0 0 2px !important; }
.alert > .inline-form { display: block; margin-top: 8px; }
.alert > .inline-form > .btn--quiet { margin-left: -12px; }
/* La sortie d'un message d'erreur : un lien en gras, sur sa propre ligne, avec une flèche. */
.alert__action { display: inline-block; margin-top: 4px; font-weight: 700; text-decoration: none; }
.alert__action::after { content: " \2192"; }
.alert__action:hover { text-decoration: underline; }

/* Bandeau des documents légaux à accepter (legalUpdateBanner) : titre et phrase sur deux lignes, liste, puis case et
   bouton secondaire empilés sur une largeur de lecture. */
.legal-update { padding: 16px; }
.legal-update .alert__title { display: block; margin: 0 0 4px !important; }
.legal-update .alert__title + p { display: block; max-width: 72ch; }
.legal-update__list { margin: 8px 0 16px; padding-left: 20px; }
.legal-update__list li + li { margin-top: 4px; }
.legal-update__list a { font-weight: 600; }
.legal-update__version { opacity: .85; }
.legal-update__form { gap: 12px; max-width: 720px; }
.legal-update__form .check { color: var(--ink); }
.legal-update__form > .actions { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 640px) {
  .legal-update__form > .actions .btn { width: 100%; }
}

/* ---------- État vide, tableaux, tuiles, offres ---------- */
.tablewrap { border-radius: 14px; }
th { background: #f7f1e7; color: var(--soft); }
tbody tr:hover td { background: #fffaf6; }
.tile { border-radius: 14px; padding: 18px; }
.plan { border-radius: var(--r-field); padding: 20px; transition: border-color .15s ease, box-shadow .15s ease; }
.plan:hover { border-color: #cfc3ab; box-shadow: 0 16px 28px -24px rgba(27, 42, 47, .55); }
.plan--current { border: 2px solid var(--ember); box-shadow: none; }
.plan__action { margin-top: auto; padding-top: 14px; }
.plan__action .btn { width: 100%; min-height: 48px; white-space: normal; line-height: 1.2; }
/* Carte de l'offre en cours : une note à la place du bouton, même hauteur, pour garder les quatre cartes alignées. */
.plan__currentnote { margin: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 12px; border: 1.5px dashed var(--ember); border-radius: var(--r-field); color: var(--ember); font-weight: 600; font-size: .92rem; }
.plan__trial { margin: 0 0 6px; font-size: .84rem; color: var(--soft); }
.keybox { border-radius: var(--r-field); padding: 12px 14px; }
/* Sous la clé masquée : le bouton de révélation et les notes respirent. */
.keybox + .inline-form, .keybox + form { margin-top: 14px; }
/* Clé masquée : la valeur à gauche, le bouton « Révéler » à droite dans le même cadre ; il passe dessous, pleine largeur, sur petit écran. */
.keybox--masked { justify-content: space-between; row-gap: 12px; padding: 10px 10px 10px 16px; }
.keybox__action { display: block; margin: 0 0 0 auto; }
.keybox + .alert, .keybox + .note { margin-top: 14px; }
@media (max-width: 560px) { .keybox__action { width: 100%; margin-left: 0; } .keybox__action .btn { width: 100%; } }
.keybox + .inline-form + .note, .keybox + form + .note { margin-top: 12px; }
/* Note qui suit la liste des étapes : détachée de la dernière étape (grille de 8 px) et alignée sur le texte des
   étapes, décalé de 46 px par la pastille (34 px) et sa gouttière (12 px). */
.steps + .note { margin: 16px 0 0; padding-left: 46px; }

/* Mêmes boutons que sur la vitrine : bouton orange avec ombre, lien de connexion en texte. */
.topbar .btn { white-space: nowrap; min-height: 44px; padding-inline: 20px; font-size: .95rem; box-shadow: 0 12px 22px -14px rgba(168, 63, 24, .9); }
.topbar .btn:hover { transform: translateY(-1px); }
/* « Se déconnecter » reste un bouton discret : ni ombre en pilule ni relief, même dans la barre du haut. */
.topbar .btn--quiet, .topbar .btn--quiet:hover { box-shadow: none; transform: none; }
@media (max-width: 480px) { .topbar .btn { padding-inline: 8px; font-size: .84rem; } }

/* ---------- Menu latéral allégé ---------- */
.sidenav ul { background: transparent; border: 0; padding: 0; display: grid; gap: 2px; }
.sidenav__link { border-radius: 10px; position: relative; }
.sidenav__link:hover { background: #f4ecdf; }
.sidenav__link.is-current { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sidenav__link.is-current::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--ember); }

/* Écrans publics : le formulaire reste une surface blanche, plus ample. */
.public > .card { padding: 32px; border-radius: var(--r-panel); box-shadow: 0 24px 40px -34px rgba(27, 42, 47, .6); }
.public .form > .actions { border-top: 0; padding-top: 4px; }
.public .form .btn--primary { width: 100%; }

@media (max-width: 980px) {
  .content > .card:has(> .card__title), .stack > .card:has(> .card__title) { display: block; padding-top: 22px; }
  .content > .card:has(> .card__title) > .card__title, .stack > .card:has(> .card__title) > .card__title { margin-bottom: 12px; }
  .sidenav__link.is-current::before { display: none; }
}
@media (max-width: 480px) {
  .card.card--highlight { padding: 20px 18px; border-radius: 18px; }
  .form__row:has([name="postal_code"]) { grid-template-columns: minmax(0, 1fr); }
  .form > .actions .btn { width: 100%; }
  .public > .card { padding: 20px 16px; }
}

/* ---------- Mobile : menu repliable ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .sidenav { position: static; }
  /* Sans JavaScript le menu reste visible ; app.js pose data-js sur <body> et le replie. */
  body[data-js] .menu-toggle { display: inline-flex; }
  body[data-js] .sidenav { display: none; }
  body[data-js] .sidenav.is-open { display: block; }
  .topbar__name { display: none; }
}
@media (max-width: 480px) {
  /* Barre du haut à 390 px : menu (icône seule), mot-symbole à 22 px, bouton de déconnexion compact, sans débordement. */
  .topbar__inner { gap: 8px; }
  .topbar__tag { display: none; }
  .topbar__brand { flex: 0 1 auto; }
  .topbar__brand img { height: 22px; max-width: 100%; }
  .menu-toggle span { display: none; }
  .menu-toggle { padding: 6px 10px; min-height: 44px; }
  .topbar__links a:not(.btn) { display: none; }
  .card { padding: 16px; }
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .btn { padding: 11px 18px; }
  .btn--sm { padding: 0 12px; }
  .public { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .topbar, .sidenav, .footer, .menu-toggle, .skip-link, .no-print { display: none !important; }
  body { background: #fff; }
  .shell { display: block; padding: 0; max-width: none; }
}


/* =============================================================
   Charte du 20/09/2026 (design/CHARTE.md) : la journée du restaurateur, la ligne d'état,
   les états vides illustrés, l'erreur de page, une seule séquence de mouvement par écran.
   ============================================================= */

/* ---------- Illustrations au trait ---------- */
.illu { display: block; max-width: 100%; height: auto; }

/* ---------- Votre journée : panneau sable, seule illustration et seul bouton orange de la page ---------- */
.day { display: grid; gap: 16px; }
.day__title { margin: 0; font-size: .8125rem; letter-spacing: .09em; line-height: 1.5; }
.day__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center;
  padding: 40px; border-radius: var(--r-panel);
  background: radial-gradient(70% 55% at 100% 100%, var(--sand-2) 0, rgba(230, 211, 186, 0) 70%), var(--sand);
}
.day__panel::before, .day__panel::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; background: var(--sand-2); opacity: .7; pointer-events: none;
}
.day__panel::before { width: 260px; height: 200px; right: -100px; top: -90px; }
.day__panel::after { width: 220px; height: 170px; left: -90px; bottom: -80px; }
.day__illu { justify-self: center; }
.day__illu .illu { width: 200px; }
.day__content > * + * { margin-top: 8px; }
.day__headline { margin: 0; font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); line-height: 1.3; font-weight: 700; color: var(--ink); letter-spacing: -.01em; text-wrap: balance; }
.day__text { margin: 0; color: var(--soft); font-size: 1.02rem; max-width: 34em; }
.day__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px !important; }
.day__actions .btn--primary { box-shadow: var(--shadow-ember); }

/* ---------- Ligne d'état : deux badges, un point médian, un lien. Jamais plus de 48 px de haut sur grand écran. ---------- */
.statusline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 0;
  min-height: 48px; padding: 8px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-field); box-shadow: var(--shadow-1);
  font-size: .95rem;
}
.statusline__item { display: inline-flex; align-items: center; gap: 8px; }
.statusline__label { color: var(--soft); font-weight: 600; }
.statusline__value { text-decoration: none; }
.statusline__value:hover .badge { border-color: var(--ink); }
.statusline__sep { color: var(--faint); }
.statusline__link { margin-left: auto; font-weight: 700; text-decoration: none; }
.statusline__link::after { content: " \2192"; }
.statusline__link:hover { text-decoration: underline; }
.statusline .badge { text-transform: none; letter-spacing: 0; font-size: .82rem; padding: 3px 10px; }

/* ---------- État vide : carte blanche 24 px, illustration, le fait, la cause, quoi faire ---------- */
.empty {
  display: grid; justify-items: center; text-align: center; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel); padding: 40px 24px; box-shadow: var(--shadow-1);
}
.empty__illu { margin-bottom: 16px; }
.empty__content { max-width: 34em; }
.empty__title { font-weight: 600; font-size: 1.12rem; color: var(--ink); margin: 0 0 6px; text-wrap: balance; }
.empty__text { color: var(--soft); margin: 0; }
.empty__action { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
/* Dans un tableau, une fiche ou une liste : version compacte, illustration à gauche du texte. */
.empty--compact, .card__body > .empty {
  grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 20px;
  padding: 24px; border-radius: var(--r-field);
}
.empty--compact .empty__illu, .card__body > .empty .empty__illu { margin: 0; }
.empty--compact .empty__illu .illu, .card__body > .empty .empty__illu .illu { width: 96px; }
.empty--compact .empty__action, .card__body > .empty .empty__action { justify-content: flex-start; margin-top: 14px; }
.card__body > .empty:not(.empty--illustrated) { grid-template-columns: minmax(0, 1fr); padding: 16px 20px; }
.card--highlight .empty { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.card--highlight .empty__title { color: #fff; }
.card--highlight .empty__text { color: rgba(246, 239, 230, .7); }

/* ---------- Erreur de page (404, 500) : le fait, la cause, la sortie ---------- */
.errorstate { text-align: center; padding: clamp(24px, 6vh, 64px) 16px 40px; max-width: 560px; margin: 0 auto; }
.errorstate__illu { display: flex; justify-content: center; margin-bottom: 8px; }
/* Inter Tight et non Orbitron : « 404 » se lirait « 4Ø4 » avec le zéro barré d'Orbitron. */
.errorstate__code { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 800; font-size: clamp(3.2rem, 10vw, 5.5rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--title); margin: 0; }
.errorstate__title { font-size: clamp(1.1rem, 2.4vw, 1.4rem); margin: 8px 0 10px; }
.errorstate__cause { color: var(--soft); margin: 0 auto 24px; max-width: 34em; }
.errorstate__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
/* Référence de la requête (page 500) : discrète, lisible et copiable ; même rendu que .payreturn__ref de paiement.css. */
.errorstate__ref { margin: 24px 0 0; font-size: 13px; }
.errorstate__ref-value { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; letter-spacing: .02em; overflow-wrap: anywhere; }

/* ---------- Mouvement : une seule séquence à l'arrivée, rien ne bouge ensuite ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes content-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .content > * { animation: content-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
  .content > :nth-child(2) { animation-delay: .08s; }
  .content > :nth-child(3) { animation-delay: .16s; }
  .content > :nth-child(4) { animation-delay: .24s; }
  .content > :nth-child(5) { animation-delay: .32s; }
  .content > :nth-child(n + 6) { animation-delay: .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .content > * { animation: none !important; }
}

@media (max-width: 860px) {
  .day__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 24px; text-align: center; }
  .day__illu .illu { width: 160px; }
  .day__text { margin-inline: auto; }
  .day__actions { justify-content: center; }
  .statusline { padding: 8px 16px; }
  .page-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titles" "lead" "actions"; }
  .page-head__actions { margin-top: 8px; }
}
@media (max-width: 480px) {
  .day__panel { padding: 24px 16px; border-radius: 18px; }
  .day__actions .btn, .empty__action .btn, .errorstate__actions .btn { width: 100%; }
  .empty { padding: 28px 16px; border-radius: 18px; }
  .empty--compact, .card__body > .empty { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; }
  .empty--compact .empty__action, .card__body > .empty .empty__action { justify-content: center; }
  /* Les badges restent en ligne et passent à la ligne au besoin : deux lignes (80 px) au pire, jamais trois. */
  .statusline__sep { display: none; }
  .statusline { gap: 6px 10px; padding: 8px 12px; font-size: .9rem; }
  .statusline .badge { font-size: .78rem; padding: 2px 8px; }
}


/* =============================================================
   Revue design 2 du 20/09/2026 (design/revue-2026-09-21/client/REVUE.md).
   Alignements, rythme des espacements, bloc d'avis compact, cibles tactiles. Aucun jeton de la charte n'est modifié :
   ce bloc ne contient que des règles, et les numéros R01 à R24 renvoient au tableau de la revue.
   Les feuilles de rubrique (demandes.css, securite.css, abonnement.css, licence-site.css) sont chargées APRÈS
   celle-ci : les règles qui les corrigent sont préfixées par main.content pour l'emporter par la spécificité.
   ============================================================= */

/* ---------- R01. Bloc d'avis : un bandeau par ligne, action à droite ; à deux, un seul cadre ---------- */
/* Bandeau qui porte une sortie (.alert__action) : titre et phrase à gauche, sortie à droite, centrée en hauteur. Le
   paragraphe qui contient la phrase et le lien s'efface (display: contents) pour que le lien devienne une colonne. */
main.content .alert:has(.alert__action) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 2px; align-items: center; }
main.content .alert { text-wrap: pretty; }
main.content .alert:has(.alert__action) > .alert__title { display: block; grid-column: 1; margin: 0 !important; }
main.content .alert:has(.alert__action) > .alert__text { display: contents; }
main.content .alert:has(.alert__action) .alert__action {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; white-space: nowrap;
  background: #fff; color: var(--ink); border: 1.5px solid #cfc3ab; border-radius: var(--r-field); font-size: .85rem; font-weight: 650;
  transition: border-color .15s ease, color .15s ease;
}
main.content .alert:has(.alert__action) .alert__action:hover { color: var(--ember-d); border-color: var(--ember); text-decoration: none; }
main.content .alert:has(.alert__action) .alert__action::after { content: "\2192"; flex: none; }

/* Documents légaux à accepter : repliés sur une ligne, le détail (textes, case, bouton) s'ouvre au clic, sans JavaScript. */
main.content .legal-update { padding: 0; }
.legal-update__fold { display: block; }
.legal-update__summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  min-height: 56px; padding: 6px 16px; cursor: pointer; list-style: none; border-radius: inherit;
}
.legal-update__summary::-webkit-details-marker { display: none; }
.legal-update__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.legal-update .legal-update__head .alert__title { display: inline; margin: 0 !important; font-weight: 700; }
.legal-update__cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; white-space: nowrap;
  background: #fff; color: var(--ink); border: 1.5px solid #cfc3ab; border-radius: var(--r-field); font-size: .85rem; font-weight: 650;
  transition: border-color .15s ease, color .15s ease;
}
.legal-update__cta::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.legal-update__summary:hover .legal-update__cta { color: var(--ember-d); border-color: var(--ember); }
.legal-update__summary:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.legal-update__cta-close, .legal-update__fold[open] .legal-update__cta-open { display: none; }
.legal-update__fold[open] .legal-update__cta-close { display: inline; }
.legal-update__fold[open] .legal-update__cta::after { transform: rotate(-135deg); margin-top: 3px; }
.legal-update__detail { padding: 8px 16px 16px; border-top: 1px solid rgba(161, 92, 7, .25); }
.legal-update__detail > .alert__text { display: block; max-width: 72ch; }
.legal-update__detail .legal-update__list { margin: 8px 0 16px; }

/* Deux avis : le même bandeau que partout ailleurs (filet gauche de 3 px, charte section 2), empilés à 8 px, sans cadre
   commun. Au-delà de deux, accountNotices() replie la pile sur une ligne (voir .notices--fold plus bas). */
.notices { display: grid; gap: 8px; }
.notices > .alert { margin: 0; }

@media (max-width: 720px) {
  main.content .alert:has(.alert__action) { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  main.content .alert:has(.alert__action) .alert__action { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; white-space: normal; }
  .legal-update__summary { padding: 8px 16px 12px; }
}

/* ---------- R02. Rythme vertical : 24 px entre deux blocs, quelle que soit la feuille de la rubrique ---------- */
main.content > * + * { margin-top: 24px; }
main.content > .alert + .alert { margin-top: 8px; }
main.content > .card + .actions, main.content > .alert + .card, main.content > .grid + .note { margin-top: 24px; }
main.content .stack > * + * { margin-top: 24px; }
main.content .card__body .stack > * + *, main.content .card__body > .stack > * + * { margin-top: 16px; }
main.content > * + .card.card--highlight, main.content .stack > * + .card.card--highlight { margin-top: 32px; }

/* ---------- R03. Fiches : 32 px en haut et en bas, le filet ne touche plus le bloc qui précède ---------- */
main.content > .card:has(> .card__title):not(.card--highlight),
main.content .stack > .card:has(> .card__title):not(.card--highlight) { padding: 32px 0; margin-top: 0; box-shadow: none; }
/* Première fiche après un en-tête, un bandeau ou un bloc libre : 24 px de blanc avant son filet. */
main.content > :not(.card) + .card:has(> .card__title):not(.card--highlight),
main.content .stack > :not(.card) + .card:has(> .card__title):not(.card--highlight),
main.content > .card:not(:has(> .card__title)) + .card:has(> .card__title):not(.card--highlight) { margin-top: 24px; }
/* Après l'ardoise : pas de filet collé sous le bloc sombre, 32 px de blanc suffisent. */
main.content > .card--highlight + .card:has(> .card__title):not(.card--highlight),
main.content .stack > .card--highlight + .card:has(> .card__title):not(.card--highlight) { border-top: 0; margin-top: 0; }
/* Dernière fiche : pas de grand vide avant le pied de page. */
main.content > .card:has(> .card__title):not(.card--highlight):last-child,
main.content .stack:last-child > .card:has(> .card__title):not(.card--highlight):last-child { padding-bottom: 8px; }
/* Un seul filet : celui de la fiche suivante, pas celui du bouton du formulaire en plus. */
main.content .card:has(> .card__title):not(.card--highlight) .form > .actions { border-top: 0; padding-top: 8px; }
main.content .card__footer { margin-top: 24px; }
main.content .card--highlight .card__footer { margin-top: 16px; padding-top: 24px; }
@media (max-width: 980px) {
  main.content > .card:has(> .card__title):not(.card--highlight),
  main.content .stack > .card:has(> .card__title):not(.card--highlight) { padding: 24px 0; }
}

/* ---------- R04. Boutons : largeur du libellé, jamais étirés sur toute la fiche ---------- */
main.content .form > .btn, main.content .form > .inline-form { justify-self: start; }
/* Bouton discret en tête de rangée : son texte s'aligne sur le bord gauche de la colonne (12 px de marge interne). */
main.content > .actions > .btn--quiet:first-child,
main.content .empty--compact .empty__action > .btn--quiet:first-child,
main.content .card__body > .empty .empty__action > .btn--quiet:first-child { margin-left: -12px; }
@media (max-width: 480px) {
  main.content .form > .btn { justify-self: stretch; width: 100%; }
  main.content > .actions > .btn--quiet:first-child { margin-left: 0; }
}

/* ---------- R05. Hiérarchie des titres : h1 à 28 px, tous les titres de section à 13 px ---------- */
.page-head h1 { font-size: clamp(1.375rem, 3vw, 1.75rem); }
main.content > h2, main.content .section-title, main.content .stack > h2 { font-size: .8125rem; letter-spacing: .09em; line-height: 1.5; margin: 0 0 16px; }
main.content > * + h2, main.content > * + .section-title { margin-top: 40px; }
main.content > .stack + .stack { margin-top: 40px; }

/* ---------- R06. Tableaux : cellules centrées en hauteur, première colonne insécable, note détachée ---------- */
main.content .tablewrap td { vertical-align: middle; padding: 12px; }
main.content .tablewrap th { padding: 12px; }
main.content .tablewrap td:first-child { white-space: nowrap; }
main.content .tablewrap td.num, main.content .tablewrap th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
main.content .tablewrap + .note, main.content .tablewrap + p { margin-top: 12px; }
main.content .card__footer > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 761px) and (max-width: 860px) {
  main.content .tablewrap table { min-width: 640px; }
  main.content .tablewrap table:has(th:nth-child(6)) { min-width: 720px; }
}

/* ---------- R07. Ardoise : rangées sur toute la largeur, note détachée, bouton de résiliation sans pavé blanc ---------- */
main.content .stack > .card.card--highlight > .card__body, main.content .stack > .card.card--highlight > .card__footer { max-width: none; }
main.content .deflist > div { padding: 12px 0; align-items: center; }
main.content .deflist + .note, main.content .deflist + p { margin-top: 16px; }
main.content .deflist .badge { vertical-align: 1px; }
.card--highlight .btn--danger { background: transparent; color: #f6c1b8; border-color: rgba(255, 255, 255, .45); }
.card--highlight .btn--danger:hover { background: var(--err); color: #fff; border-color: var(--err); }

/* ---------- R08. Listes à puces : alignées sur la colonne (20 px de retrait) ---------- */
main.content .card__body > ul:not([class]), main.content .summary { padding-left: 20px; margin-top: 0; }
main.content .card__body > ul:not([class]) > li + li { margin-top: 4px; }

/* ---------- R09. Groupes de champs : même écart sous chaque légende, le pointillé ne touche pas le texte ---------- */
main.content .fgroup > legend { padding: 0 12px 0 0; margin-bottom: 12px; }
main.content .fgroup + .fgroup { margin-top: 16px; padding-top: 0; }
main.content .fgroup__lead { margin-top: -4px; }
/* Le téléphone reprend la largeur d'une colonne de la rangée « Prénom, Nom » : même bord droit. */
main.content .field:has(> [name="phone"]) { max-width: calc(50% - 7px); }
@media (max-width: 480px) { main.content .field:has(> [name="phone"]) { max-width: none; } }

/* ---------- R10. Offres : même boîte pour l'offre en cours, zone d'action de même hauteur ---------- */
main.content .plan--current { border: 1px solid var(--ember); box-shadow: 0 0 0 1px var(--ember); }
main.content .plan__currentnote { min-height: 56px; line-height: 1.2; padding: 8px 12px; }
main.content .plan__action .btn { min-height: 56px; padding-block: 8px; }
main.content .grid--4 { gap: 16px; }

/* ---------- R11. Menu latéral : le repère de la page courante reste dans le bord commun ---------- */
.sidenav__link.is-current::before { left: 0; top: 12px; bottom: 12px; }

/* ---------- R12. Double authentification : colonne de lecture, champ du code à sa taille ---------- */
main.content > .card:has(.sec-steps) { max-width: 720px; padding: 32px; }
main.content .sec-steps { margin: 0; gap: 24px; }
main.content input[autocomplete="one-time-code"] { max-width: 280px; }
main.content input[autocomplete="one-time-code"]::placeholder { font-family: "Inter Tight", system-ui, sans-serif; letter-spacing: 0; }
main.content .sec-cancel { max-width: 720px; }
@media (max-width: 480px) { main.content > .card:has(.sec-steps) { padding: 24px 16px; } }

/* ---------- R13. Rayons : 14 px partout où un cadre voisine un champ ---------- */
main.content .sec-qr, main.content .sec-codes, main.content .sec-device, main.content .thumb { border-radius: var(--r-field); }
main.content .address-input__suffix { border-radius: 0 var(--r-field) var(--r-field) 0; }
.skip-link { border-radius: var(--r-field); }

/* ---------- R14. Contrastes : texte d'exemple et petites mentions ---------- */
.input::placeholder { color: var(--faint); opacity: 1; }
.field__optional, .tile__hint, main.content .msg__date, .plan__price small { color: var(--soft); }

/* ---------- R15. Bas de page : une seule réserve pour la bulle de l'assistant, dans le pied sombre ---------- */
body:has(.ardz-assistant) main.content { padding-bottom: 0; }
@media (max-width: 640px) {
  body.ardz-assistant-present:has(.footer) { padding-bottom: 0; }
}

/* ---------- R16. Cibles tactiles de 44 px sous 860 px ---------- */
@media (max-width: 860px) {
  .footer__links { gap: 0 16px; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .sidenav__link { min-height: 44px; }
  main.content details.faq summary { min-height: 52px; }
}
@media (max-width: 420px) {
  /* Barre du haut : le bouton de droite garde la gouttière de 16 px. */
  .topbar .btn { padding-inline: 12px; }
  .topbar .btn--quiet { padding-inline: 4px; }
}

/* ---------- R17. États vides dans une fiche : illustration et texte centrés en hauteur, bouton aligné ---------- */
main.content .card__body > .empty, main.content .empty--compact { padding: 24px; gap: 24px; }
main.content .empty--compact .empty__action, main.content .card__body > .empty .empty__action { margin-top: 16px; }
main.content .empty__title { margin-bottom: 8px; }
main.content .empty__action { margin-top: 24px; }
@media (max-width: 480px) { main.content .card__body > .empty, main.content .empty--compact { padding: 24px 16px; gap: 16px; } }

/* ---------- R18. Ligne d'état : la flèche de « Détails » ne colle pas au mot, le lien reste à droite ---------- */
.statusline__link::after { content: "\2192"; margin-left: 6px; }
/* Petit écran : « Licence » et « Détails » sur la première ligne, « Site » sur la seconde (charte : deux lignes au plus). */
@media (max-width: 480px) {
  .statusline { gap: 4px 12px; }
  .statusline .badge { white-space: normal; overflow-wrap: anywhere; border-radius: 12px; }
  .statusline__link { order: 1; }
  .statusline__item ~ .statusline__item { order: 2; flex-basis: 100%; }
}

/* ---------- R19. Repli « Vous n'avez plus votre téléphone ? » : un chevron dit que la boîte s'ouvre ---------- */
main.content details.faq summary:not(:has(.faq__chev))::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid var(--soft); border-bottom: 2px solid var(--soft);
  transform: translateY(-2px) rotate(45deg); transition: transform .18s ease;
}
main.content details.faq[open] summary:not(:has(.faq__chev))::after { transform: translateY(2px) rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
  .legal-update__cta, .legal-update__cta::after, main.content .alert .alert__action { transition: none; }
}
/* ---------- Fin de la revue design 2 du 20/09/2026 ---------- */

/* =============================================================
   Revue design 2 du 20/09/2026, relecture (constats du critique, numérotés K01 à K14 dans REVUE.md).
   Même règle que le bloc précédent : des règles seulement, aucun jeton de la charte modifié.
   ============================================================= */

/* ---------- K01. Tableaux sur téléphone : une fiche par ligne, libellé à gauche, valeur à droite ---------- */
/* Comme le journal technique de la console : plus de défilement horizontal, rien n'est coupé. Le libellé de chaque
   cellule vient de l'attribut data-label posé par table() ; l'en-tête reste lu par les lecteurs d'écran. */
@media (max-width: 760px) {
  main.content .tablewrap--fiches { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  main.content .tablewrap--fiches table { display: block; min-width: 0; font-size: .94rem; }
  main.content .tablewrap--fiches thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  main.content .tablewrap--fiches tbody, main.content .tablewrap--fiches tr { display: block; }
  main.content .tablewrap--fiches tr { margin: 0 0 16px; padding: 4px 16px; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; box-shadow: var(--shadow-1); }
  main.content .tablewrap--fiches tr:last-child { margin-bottom: 0; }
  main.content .tablewrap--fiches td, main.content .tablewrap--fiches td.num {
    display: flex; gap: 8px; align-items: center; min-height: 44px;
    padding: 8px 0; border-bottom: 0; border-top: 1px solid var(--line); text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  main.content .tablewrap--fiches td:first-child { border-top: 0; font-weight: 600; white-space: normal; }
  main.content .tablewrap--fiches td > * { min-width: 0; }
  main.content .tablewrap--fiches td::before { flex: 0 0 112px; content: attr(data-label); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); overflow-wrap: normal; }
  main.content .tablewrap--fiches td:not([data-label])::before { content: none; }
  main.content .tablewrap--fiches td:empty { display: none; }
  main.content .tablewrap--fiches tbody tr:hover td { background: transparent; }
  main.content .tablewrap--fiches td > a { display: inline-flex; align-items: center; min-height: 44px; }
  main.content .tablewrap--fiches td .badge { flex: none; }
}

/* ---------- K03. Boutons sur téléphone : une seule règle, pleine largeur pour toute action de fin de section ---------- */
/* Primaire, secondaire et suppression ; les boutons discrets restent du texte, les petits boutons d'outil (Copier,
   Oublier, Dissocier) gardent la largeur de leur libellé. Les sorties des bandeaux suivent la même règle. */
@media (max-width: 480px) {
  main.content .btn:not(.btn--quiet):not(.btn--sm) { width: 100%; }
  main.content .inline-form:has(> .btn:not(.btn--quiet):not(.btn--sm)) { display: block; width: 100%; }
  main.content .actions, main.content .card__footer { align-items: stretch; }
  main.content .alert:has(.alert__action) .alert__action { justify-self: stretch; justify-content: center; }
  .legal-update__cta, .notices__cta { flex: 1 1 100%; justify-content: center; }
}

/* ---------- K04. Sécurité : champs à 46 px, 32 px avant le bouton, « Copier » calé à droite ---------- */
main.content input.input, main.content select.input { height: 46px; padding-block: 0; }
main.content input[autocomplete="one-time-code"] { font-size: 1.125rem; }
main.content .form > .btn, main.content .form > .inline-form { margin-top: 14px; }
main.content .keybox > .btn { margin-left: auto; }
/* Repli du code de secours : 24 px après l'aide du champ qui précède (18 px de grille et 6 px), pas 36. */
main.content .form > .sec-help { margin-top: 6px; }

/* ---------- K06. Bandeaux : un seul emplacement (sous l'en-tête), un seul composant, pile repliée au-delà de deux ---------- */
main.content > .alert + .notices, main.content > .notices + .alert { margin-top: 8px; }
.notices--fold { display: block; }
.notices__fold { border-left: 3px solid var(--warn); border-radius: 8px; background: var(--warn-bg); color: #7a4504; }
/* La pile prend la tonalité de son avis le plus urgent : rouge dès qu'un paiement a échoué. */
.notices--error .notices__fold { border-left-color: var(--err); background: var(--err-bg); color: #7f1d13; }
.notices__summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  min-height: 56px; padding: 6px 16px; cursor: pointer; list-style: none; border-radius: inherit;
}
.notices__summary::-webkit-details-marker { display: none; }
.notices__summary:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.notices__count { font-weight: 700; }
.notices__cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; white-space: nowrap;
  background: #fff; color: var(--ink); border: 1.5px solid #cfc3ab; border-radius: var(--r-field); font-size: .85rem; font-weight: 650;
}
.notices__cta::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.notices__summary:hover .notices__cta { color: var(--ember-d); border-color: var(--ember); }
.notices__cta-close, .notices__fold[open] .notices__cta-open { display: none; }
.notices__fold[open] .notices__cta-close { display: inline; }
.notices__fold[open] .notices__cta::after { transform: rotate(-135deg); margin-top: 3px; }
.notices__items { display: grid; gap: 8px; padding: 0 8px 8px; }
.notices__items > .alert { margin: 0; }

/* ---------- K07. Une seule action orange : le bouton de la barre du haut, secondaire, ne garde pas l'ombre orange ---------- */
.topbar .btn--secondary, .topbar .btn--secondary:hover { box-shadow: none; }

/* ---------- K08. Aide publique : la grammaire de la page connectée (944 px, fiches, titres de 13 px, aucune ombre) ---------- */
main.public--faq { max-width: 976px; }
main.public--faq > * + * { margin-top: 24px; }
main.public--faq > .card:has(> .card__title) {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; row-gap: 0;
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
  padding: 32px 0; margin-top: 0;
}
main.public--faq > .page-head + .card:has(> .card__title) { margin-top: 24px; }
main.public--faq > .card:has(> .card__title) > .card__title {
  grid-column: 1; grid-row: 1 / span 2; align-self: start; border: 0; padding: 3px 0 0; margin: 0; display: block;
  font-size: .8125rem; letter-spacing: .09em; line-height: 1.5;
}
main.public--faq > .card > .card__body, main.public--faq > .card > .card__footer { grid-column: 2; }
main.public--faq > .card > .card__body > p { max-width: 620px; }
main.public--faq > .card > .card__footer { margin-top: 24px; }
main.public--faq > .stack { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 8px; }
main.public--faq > .stack > h2 { font-size: .8125rem; letter-spacing: .09em; line-height: 1.5; margin: 0 0 16px; }
main.public--faq > .stack + .stack { margin-top: 32px; }
@media (max-width: 980px) {
  main.public--faq > .card:has(> .card__title) { display: block; padding: 24px 0; }
  main.public--faq > .card:has(> .card__title) > .card__title { margin-bottom: 12px; }
}
@media (max-width: 860px) { main.public details.faq summary { min-height: 52px; } }

/* ---------- K10. Ligne d'état : l'état s'écrit en texte coloré, plus de seconde famille de badges en minuscules ---------- */
.statusline .badge, .statusline .badge:hover {
  display: inline; padding: 0; border: 0; border-radius: 0; background: none; white-space: normal; overflow-wrap: anywhere;
  font-size: inherit; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.statusline .badge--success { color: var(--ok); }
.statusline .badge--warning { color: var(--warn); }
.statusline .badge--error { color: var(--err); }
.statusline .badge--info { color: var(--info); }
.statusline .badge--neutral { color: var(--soft); }
.statusline__value { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.statusline__value:hover { text-decoration-color: currentColor; }
.statusline__item { align-items: baseline; }
@media (max-width: 480px) { .statusline .badge { font-size: inherit; padding: 0; border-radius: 0; } }

/* ---------- K11. Fiches : le contenu va jusqu'au bord droit commun ; une seule phrase d'aide sous le mot de passe ---------- */
main.content > .card:has(> .card__title) > .card__body, main.content > .card:has(> .card__title) > .card__footer,
main.content .stack > .card:has(> .card__title) > .card__body, main.content .stack > .card:has(> .card__title) > .card__footer { max-width: none; }
/* La prose garde une largeur de lecture ; champs, listes, rangées et filets vont au bord. */
main.content .card:has(> .card__title):not(.card--highlight) > .card__body > p,
main.content .card:has(> .card__title):not(.card--highlight) > .card__body > .stack > p,
main.content .card:has(> .card__title):not(.card--highlight) .form > p,
main.content .card:has(> .card__title):not(.card--highlight) .field__hint { max-width: 620px; }
/* Les trois légendes d'un formulaire portent le même filet pointillé, la première comprise. */
main.content .fgroup, main.content .fgroup + .fgroup { border-top: 1px dashed var(--line); }
/* Jauge vide : sa phrase (« Au moins 12 caractères. ») répète l'aide du champ ; elle s'affiche dès la première frappe. */
.strength[data-level="0"] .strength__text { display: none; }

/* ---------- K12. Écrans centrés (erreur de page, retour de paiement, état vide de page) : un seul gabarit ---------- */
/* Carte blanche à 24 px de rayon, 640 px de large, centrée dans la colonne. */
.errorstate { max-width: 640px; margin: 24px auto 40px; padding: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1); }
main.content > .empty, main.content .stack > .empty { max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 480px) { .errorstate { padding: 28px 16px; border-radius: 18px; margin-top: 8px; } }

/* ---------- K13. Petits décalages ---------- */
@media (max-width: 860px) {
  /* Bouton discret en tête des actions de page : son texte s'aligne sur la gouttière, et 16 px le séparent de l'accroche. */
  .page-head__actions { margin-top: 16px; }
  .page-head__actions > .btn--quiet:first-child { margin-left: -12px; }
}
/* « Retour » sous une fiche : dans la colonne des boutons de la fiche, à 16 px, et non seul 60 px plus bas. */
main.content > .card:has(> .card__title):not(.card--highlight):has(+ .actions) { padding-bottom: 0; }
main.content > .card:has(> .card__title) + .actions { margin-top: 16px; padding-left: 240px; }
@media (max-width: 980px) { main.content > .card:has(> .card__title) + .actions { padding-left: 0; } }

/* ---------- K02 et K14. Téléphone : l'assistant vit dans la barre du haut (assistant.css), plus rien à réserver en bas ---------- */
@media (max-width: 640px) {
  body.ardz-assistant-present .topbar__inner { padding-right: 68px; }
  body.ardz-assistant-present .footer__inner { padding-bottom: 22px; }
}
/* ---------- Fin de la relecture de la revue design 2 du 20/09/2026 ---------- */

/* Repli « lignes précédentes » sous un tableau (page Licence) : même langage que les questions fréquentes, sans marge parasite. */
.more-rows { margin-top: 12px; }
.more-rows > div { padding-top: 12px; }

/* ---------- Picto de carte (22/09/2026) : un petit dessin au trait de la charte à droite du titre ----------
   Décoratif (aria-hidden), posé en absolu : aucune règle de mise en page existante n'en dépend. La place est
   réservée par le retrait à droite et par la taille fixée du dessin : rien ne saute au chargement. Sous 560 px,
   la largeur sert au texte et le dessin disparaît. Aucune couleur n'est écrite ici : le trait vient du SVG. */
.card--picto { position: relative; padding-right: 96px; }
.card__picto { position: absolute; top: 20px; right: 20px; width: 56px; height: 42px; line-height: 0; pointer-events: none; }
.card__picto .illu { width: 56px; height: 42px; }
@media (max-width: 560px) {
  .card--picto { padding-right: 24px; }
  .card__picto { display: none; }
}

/* ---- Boîte de confirmation dans la page (public/app.js, data-confirm) : remplace celle du navigateur ---- */
.confirm { border: 0; padding: 0; background: transparent; max-width: min(92vw, 440px); width: 100%; }
.confirm::backdrop { background: rgba(23, 42, 48, .45); }
.confirm__form { background: var(--cream); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 24px; box-shadow: 0 24px 60px rgba(23, 42, 48, .25); }
.confirm__text { margin: 0 0 20px; font-size: 1.02rem; line-height: 1.5; }
.confirm__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.confirm__actions .btn { min-height: 44px; }
@media (max-width: 480px) { .confirm__actions { flex-direction: column-reverse; } .confirm__actions .btn { width: 100%; } }


/* Carte à picto posée en section (deux colonnes) : le dessin ne flotte plus à droite au-dessus du texte, il prend
   place sous le titre, dans la colonne de gauche. Sous 980 px (sections en bloc), il suit le titre ; sous 560 px, masqué. */
.content > .card--picto:has(> .card__title),
.stack > .card--picto:has(> .card__title) { padding-right: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.content > .card--picto:has(> .card__title) > .card__title,
.stack > .card--picto:has(> .card__title) > .card__title { grid-row: 1; }
.content > .card--picto:has(> .card__title) > .card__picto,
.stack > .card--picto:has(> .card__title) > .card__picto { position: static; grid-column: 1; grid-row: 2; justify-self: start; margin-top: 12px; }
.content > .card--picto:has(> .card__title) > .card__body,
.stack > .card--picto:has(> .card__title) > .card__body { grid-column: 2; grid-row: 1 / span 3; }
.content > .card--picto:has(> .card__title) > .card__footer,
.stack > .card--picto:has(> .card__title) > .card__footer { grid-column: 2; grid-row: 4; }
@media (max-width: 980px) {
  .content > .card--picto:has(> .card__title),
  .stack > .card--picto:has(> .card__title) { display: flex; flex-direction: column; }
  .content > .card--picto:has(> .card__title) > .card__title, .stack > .card--picto:has(> .card__title) > .card__title { order: 1; }
  .content > .card--picto:has(> .card__title) > .card__picto,
  .stack > .card--picto:has(> .card__title) > .card__picto { position: static; order: 2; margin: 0 0 14px; }
  .content > .card--picto:has(> .card__title) > .card__body, .stack > .card--picto:has(> .card__title) > .card__body { order: 3; }
  .content > .card--picto:has(> .card__title) > .card__footer, .stack > .card--picto:has(> .card__title) > .card__footer { order: 4; }
}


/* ---- Demandes de réservation (offre Menu, src/views/carte-reservations.ts) ----
   Cet écran charge public/carte.css (src/modules/carte-reservations.ts) ; ses règles de mise en page vivent pourtant
   ici, à côté de celles des tableaux en fiches qu'elles complètent. Le bloc « Répondre » d'une ligne du tableau est un
   <details> ; celui de la première demande nouvelle est ouvert d'office, pour que le
   bouton principal de l'écran soit visible sans un clic de plus. */
/* Audit visuel du 05/10/2026 (I2, I3) : une demande est un <tbody> de deux lignes, ses informations puis sa réponse
   sur toute la largeur (« Répondre » à gauche, Exporter et Effacer discrets à droite). Le message pour le client et
   les deux boutons tiennent sur une ligne au bureau, s'empilent sur téléphone. */
.resa-decide > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; list-style: none; }
.resa-decide > summary::-webkit-details-marker { display: none; }
/* Chevron au trait (le triangle natif disparaît avec display: inline-flex) : vers la droite fermé, vers le bas ouvert. */
.resa-decide > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--ember); border-bottom: 2px solid var(--ember); transform: rotate(-45deg); transition: transform .15s ease; }
.resa-decide[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.resa-decide > summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--r-field); }
.resa-decide[open] > summary { margin-bottom: 4px; }
.resa-decide > .form { margin: 0; }
.resa-decide__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.resa-decide__form > .field { flex: 1 1 320px; max-width: 520px; min-width: 0; }
/* Zone de texte et non champ d'une ligne : Entrée y passe à la ligne, elle n'envoie jamais le formulaire (dont le
   premier bouton est « Confirmer »). Relecture de sécurité du 05/10/2026. */
.resa-decide__message { display: block; min-height: 46px; line-height: 1.45; resize: vertical; }
main.content .resa-decide__form > .actions { margin: 0; padding: 0; border: 0; }
.resa-reponse__ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 24px; }
.resa-reponse__ligne > .resa-decide { flex: 1 1 480px; min-width: 0; }
.resa-reponse__ligne > .actions { margin: 0; }
/* « Effacer » (suppression sans retour) à 24 px d'« Exporter » : pas de clic de l'un pour l'autre. */
.resa-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-left: auto; }
.resa-outils .btn--quiet { padding-inline: 10px; }
.resa-effacer .btn--quiet { color: var(--err); }
.resa-effacer .btn--quiet:hover { color: #84200f; background: var(--err-bg); }
.resa-contact { display: grid; justify-items: start; min-width: 0; }
.resa-contact__tel { white-space: nowrap; }
/* Bureau : la ligne d'informations et sa réponse forment un seul bloc ; un filet sépare deux demandes. */
main.content .resa-liste tbody.resa-demande > tr:first-child > td { border-bottom: 0; padding-bottom: 6px; }
main.content .resa-liste tbody.resa-demande > tr.resa-reponse > td { padding-top: 0; border-bottom: 0; white-space: normal; font-weight: 400; }
main.content .resa-liste tbody.resa-demande + tbody.resa-demande > tr:first-child > td { border-top: 1px solid var(--line); }
main.content .resa-liste tbody.resa-demande:hover td { background: #fffaf6; }
@media (max-width: 760px) {
  /* Téléphone : le <tbody> est la fiche ; ses deux lignes perdent le cadre que les fiches donnent à chaque <tr>. */
  main.content .resa-liste tbody.resa-demande { margin: 0 0 16px; padding: 4px 16px 8px; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; box-shadow: var(--shadow-1); }
  main.content .resa-liste tbody.resa-demande:last-child { margin-bottom: 0; }
  main.content .resa-liste tbody.resa-demande > tr { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  main.content .resa-liste tbody.resa-demande + tbody.resa-demande > tr:first-child > td { border-top: 0; }
  main.content .resa-liste tbody.resa-demande > tr.resa-reponse > td { display: block; padding-top: 8px; border-top: 1px solid var(--line); }
  main.content .resa-liste tbody.resa-demande:hover td { background: transparent; }
  main.content .resa-liste .resa-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .resa-decide__form > .field { flex-basis: 100%; max-width: none; }
  .resa-outils { margin-left: -10px; }
}

/* Sélecteur de langue FR / EN (src/views/layout.ts, langSwitchHtml) : formulaire POST sans script, deux boutons. */
.langswitch { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.langswitch__btn { min-width: 40px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.langswitch__btn:hover { background: #f4ecdf; color: var(--ink); }
.langswitch__btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.langswitch__btn.is-current { background: var(--ink); color: #fff; cursor: default; }
.topbar__links .langswitch, .topbar__account .langswitch { flex: 0 0 auto; }
@media (max-width: 480px) { .langswitch__btn { min-width: 34px; min-height: 32px; padding: 4px 8px; } }
/* Sous 720 px, la barre du haut n'a plus la place du sélecteur : il reste dans le pied de page, sur toutes les pages. */
.footer__lang { display: flex; align-items: center; }
@media (max-width: 720px) { .topbar .langswitch { display: none; } }

/* ---------- Badges officiels des magasins d'applications (src/views/magasins.ts, 29/09/2026) ----------
   Apple exige un badge noir non modifié, d'au moins 40 px de haut, avec un espace libre autour (ici 12 px, soit un
   quart de la hauteur). Le badge est un lien, pas un bouton : il ne prend jamais le terracotta des boutons. */
.magasin-badges { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 14px 0 0; }
.magasin-badge { display: inline-block; padding: 12px 0; line-height: 0; border-radius: 8px; }
.magasin-badge img { display: block; height: 48px; width: auto; }
/* Google Play : l'image porte une marge transparente ; elle est agrandie pour que son cadre noir ait les 48 px du badge
   Apple (src/views/magasins.ts, BADGE_HAUTEUR_GOOGLE ; comme la vitrine). La marge de l'image remplace une part de
   l'espace libre : le lien garde la même hauteur que celui d'Apple. */
.magasin-badge img.magasin-badge__img--google-fr { height: 63px; }
.magasin-badge img.magasin-badge__img--google-en { height: 71px; }
.magasin-badge--google { padding-block: 4px; }
.magasin-badge--google:has(.magasin-badge__img--google-en) { padding-block: 0; }
.magasin-badge:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.app-magasin .magasin-badge { justify-self: start; }

/* Widget anti-robot Cloudflare Turnstile (src/turnstile.ts), inscription : place réservée, pas de saut à l'apparition. */
.turnstile-bloc { margin: 16px 0; min-height: 65px; }