/* ==========================================================================
   Ossature : barre supérieure collante, largeurs, pied de page.
   ========================================================================== */

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  /* `max()` tient compte des encoches et bords arrondis des téléphones. */
  padding-inline: max(var(--sp-4), env(safe-area-inset-left), env(safe-area-inset-right));
}

@media (min-width: 48em) {
  .wrap { padding-inline: var(--sp-6); }
}

/* --- Barre supérieure ---------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  color: var(--fg);
  flex: none;
}

.brand__img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.topbar__nav::-webkit-scrollbar { display: none; }

.topbar__nav a {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--fg-secondary);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.topbar__nav a:hover { color: var(--fg); background: var(--bg-muted); }

.topbar__nav a[aria-current="page"] {
  color: var(--fg);
  font-weight: 500;
}

.topbar__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: var(--sp-3);
  right: var(--sp-3);
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-full);
}

/* Les deux rubriques tiennent à côté du logo, même sur un petit écran : on
   garde une seule ligne et on réduit simplement les libellés. */
@media (max-width: 40em) {
  .topbar__inner { gap: var(--sp-3); }

  /* Cible tactile confortable pour le retour à l'accueil. */
  .brand { font-size: var(--fs-base); min-height: 44px; }
  .brand__img { width: 26px; height: 26px; }

  .topbar__nav { gap: 0; }
  .topbar__nav a { padding: var(--sp-2); font-size: var(--fs-sm); }
}

@media (max-width: 24em) {
  /* Sous cette largeur, on resserre encore la navigation. */
  .topbar__nav a { padding-inline: var(--sp-1); font-size: var(--fs-xs); }
}

/* --- Corps --------------------------------------------------------------- */

.main { flex: 1; padding-block: var(--sp-10) var(--sp-16); }

@media (min-width: 48em) {
  .main { padding-block: var(--sp-12) var(--sp-16); }
}

/* --- Zone de travail -----------------------------------------------------
   `minmax(0, …)` et `min-width: 0` sont indispensables : par défaut un enfant
   de grille refuse de devenir plus étroit que son contenu, et le sélecteur de
   rayon élargissait alors la colonne jusqu'à déborder de la page.
   ------------------------------------------------------------------------ */

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.workspace > * { min-width: 0; }

/* Une seule colonne : le formulaire en haut, la liste en dessous, sur toutes
   les largeurs. La liste a besoin de toute la place disponible. */
.workspace__main { margin-top: var(--sp-10); }

/* --- Pied de page -------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding-block: var(--sp-10) var(--sp-8);
  font-size: var(--fs-base);
  color: var(--fg-secondary);
  /* Accent strip at top */
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-border) 100%);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Bloc d'identité à gauche, colonnes de liens à droite. */
.footer__top {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 52em) {
  .footer__top {
    grid-template-columns: minmax(16rem, 1fr) auto;
    gap: var(--sp-12);
    align-items: start;
  }
}

.footer__brand { display: grid; gap: var(--sp-3); justify-items: start; }

.footer__brand p {
  max-width: 34rem;
  font-weight: 400;
  line-height: 1.65;
}

.footer__cols {
  display: grid;
  gap: var(--sp-6) var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

@media (min-width: 52em) {
  .footer__cols { grid-template-columns: repeat(3, minmax(10rem, max-content)); }
}

.footer__cols h2 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}

.footer__cols ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.footer__cols a {
  display: inline-block;
  padding-block: 2px;
  color: var(--fg-secondary);
  font-weight: 400;
}

.footer__cols a:hover { color: var(--fg); }

.footer__cols a[aria-current="page"] { color: var(--fg); font-weight: 500; }

/* Mention de licence, sous le libellé du lien. */
.footer__ext {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

/* --- Bas de page --------------------------------------------------------- */

.footer__bottom {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

@media (min-width: 52em) {
  .footer__bottom {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--sp-8);
  }
}

.footer__note {
  max-width: 42rem;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--fg-secondary);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--fg-muted);
}

@media (min-width: 52em) {
  .footer__legal { justify-content: flex-end; }
}

/* --- Signature de l'éditeur ---------------------------------------------- */

.editor {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg-secondary);
  transition: color 0.18s;
}

.editor:hover { color: var(--fg); }

/* Le monogramme hérite de la couleur du texte : il suit donc le thème. */
/* Proportions calées sur la viewBox (900 × 770). */
.editor__mark {
  width: 20px;
  height: 17px;
  color: currentColor;
}

.editor b { font-weight: 600; }

.footer__licences { white-space: nowrap; }

/* --- Adaptations mobiles -------------------------------------------------- */

@media (max-width: 40em) {
  .main { padding-block: var(--sp-8) var(--sp-12); }

  .footer { padding-block: var(--sp-8) var(--sp-6); }

  /* Deux colonnes de liens plutôt qu'une seule très longue. */
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }

  /* Liens de pied de page : hauteur de doigt, pas de hauteur de souris. */
  .footer__cols a { display: flex; align-items: center; min-height: 40px; padding-block: 0; }
  .footer__brand .brand { min-height: 44px; }
  .editor { min-height: 44px; }

  .footer__bottom { margin-top: var(--sp-8); }
}

@media (max-width: 22em) {
  .footer__cols { grid-template-columns: 1fr; }
}