/* =========================================================================
   brand.css — Surcouche NAMES LEGAL par-dessus la charte Anw (theme.css figé).
   Chargé APRÈS theme.css. Contient uniquement ce que les tokens n'exposent pas :
   couleur d'accent foncée du footer, logo navbar, menu mobile de .public-nav.
   ========================================================================= */

:root {
  /* --bs-primary-rgb a déménagé dans theme/theme-bs-bridge.css : il manquait
     aussi à la console et à l'admin plateforme, qui ne chargent pas ce fichier. */
  --names-dark: #132a31;   /* accent foncé du logo (footer, sections sombres) */
}

/* ----- Sections de landing (padding généreux + variante fond doux) ----- */
.lp-section { padding: 4.5rem 0; }
.lp-section--alt { background: var(--app-surface-muted); }
.lp-section__head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
@media (max-width: 767.98px) { .lp-section { padding: 3rem 0; } }

/* ----- Footer marketing aux couleurs de marque (foncé) ----- */
.site-footer { background: var(--names-dark); }

/* La couture tissée précède le footer : elle doit lui être jointive, sinon le
   margin-top de .site-footer creuse une bande vide entre les deux. On reporte
   donc la marge sur la couture. */
.nl-seam + .site-footer { margin-top: 0; }
.nl-seam:has(+ .site-footer) { margin-top: 80px; }

/* ----- Logo bi-variante (surfaces dont le fond bascule avec le thème) -----
   Le lettrage du logo est peint en dur dans le SVG : -light a un lettrage
   foncé (#132a30), -dark un lettrage blanc. Une seule <img> statique devient
   donc illisible dès que le fond bascule. On sert les deux variantes et on
   masque la mauvaise selon data-bs-theme.
   NB : impossible d'utiliser <picture media="(prefers-color-scheme…)"> — le
   thème du site vient de data-bs-theme (localStorage), pas du réglage OS.
   Le `:root` du premier sélecteur n'est pas décoratif : il porte les trois
   règles à la même spécificité (0,2,0), au-dessus des règles de taille par
   conteneur du type `.auth-card__brand img` (0,1,1). Sans lui, la variante
   censée être masquée réapparaît et les deux logos s'affichent côte à côte. */
:root .nl-logo-auto__dark { display: none; }
[data-bs-theme="dark"] .nl-logo-auto__light { display: none; }
[data-bs-theme="dark"] .nl-logo-auto__dark { display: block; }

/* ----- Logo image dans la navbar publique ----- */
.public-nav__brand img { height: 32px; width: auto; display: block; }
.public-nav__brand { gap: 0; }

/* ----- Hero de l'accueil : promesse à gauche, démo live à droite -----
   .hero du kit est centré et sur fond opaque ; en tête d'étoffe il devient
   transparent (motifs.css) et ici il passe en deux colonnes alignées à gauche. */
.nl-hero-split__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
  text-align: left;
}
.nl-hero-split .hero__actions,
.nl-hero-split .hero__trust { justify-content: flex-start; }
.nl-hero-split .hero__desc { margin-left: 0; margin-right: 0; }

@media (max-width: 991.98px) {
  .nl-hero-split__grid { grid-template-columns: 1fr; gap: 2.25rem; text-align: center; }
  .nl-hero-split .hero__actions,
  .nl-hero-split .hero__trust { justify-content: center; }
}

/* Cadre de navigateur : la barre d'adresse porte le sous-domaine promis, c'est
   elle qui rend la promesse concrète — pas la capture. */
.nl-browser {
  margin: 0;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: #0e1b1f;
  border: 1px solid rgba(233, 220, 194, .18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.nl-browser__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .75rem;
  background: rgba(233, 220, 194, .07);
  border-bottom: 1px solid rgba(233, 220, 194, .12);
}
/* Trois pastilles en un seul élément : c'est du décor, pas trois objets. */
.nl-browser__dots {
  width: 2.4rem; height: .55rem; flex: none;
  background:
    radial-gradient(circle 4px at 4px 50%,  rgba(233,220,194,.55) 98%, transparent 100%),
    radial-gradient(circle 4px at 19px 50%, rgba(233,220,194,.35) 98%, transparent 100%),
    radial-gradient(circle 4px at 34px 50%, rgba(233,220,194,.22) 98%, transparent 100%);
}
.nl-browser__url {
  flex: 1;
  padding: .2rem .6rem;
  border-radius: var(--radius-pill, 999px);
  background: rgba(0, 0, 0, .28);
  color: var(--nl-ecru, #e9dcc2);
  font-size: .78rem;
  letter-spacing: .01em;
}
/* Même technique que .theme-thumb : rendu large puis réduit, pour montrer la
   mise en page desktop du thème et non sa version mobile écrasée. */
.nl-browser__screen {
  position: relative;
  display: block;
  height: 340px;
  overflow: hidden;
  background: #fff;
}
.nl-browser__screen iframe {
  position: absolute;
  top: 0; left: 0;
  width: calc(100% / 0.42);
  height: calc(340px / 0.42);
  transform: scale(0.42);
  transform-origin: top left;
  border: 0;
  pointer-events: none;
  /* Les deux iframes sont empilées : la cachée charge le thème suivant en
     coulisse, puis on croise les opacités. Sans ça, changer le src d'une
     iframe unique ferait clignoter un écran blanc à chaque rotation. */
  opacity: 0;
  transition: opacity .45s ease;
}
.nl-browser__screen iframe.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nl-browser__screen iframe { transition: none; }
}
.nl-browser__caption {
  padding: .5rem .75rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .62);
  text-align: center;
}
@media (max-width: 575.98px) {
  .nl-browser__screen { height: 250px; }
  .nl-browser__screen iframe { height: calc(250px / 0.42); }
}

/* ----- Vignette d'aperçu live d'un thème (main/components/theme_thumb.html) --
   L'iframe est rendue à ~3× la largeur de la carte puis réduite : le thème s'y
   dessine en mise en page desktop, pas en mise en page mobile écrasée.
   Partagé par la galerie et la page Fonctionnalités — était inline dans le
   template de la galerie. */
.theme-thumb {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  background: var(--app-surface-muted, #f1f3f5);
  border-bottom: 1px solid var(--app-border, #dee2e6);
}
.theme-thumb iframe {
  position: absolute;
  top: 0; left: 0;
  width: calc(100% / 0.32);
  height: calc(200px / 0.32);
  transform: scale(0.32);
  transform-origin: top left;
  border: 0;
  /* L'iframe ne doit jamais capter le clic : c'est le lien qui l'a. */
  pointer-events: none;
}
.theme-thumb__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #fff;
  font-weight: 600;
  opacity: 0;
  background: rgba(19, 42, 49, 0);
  transition: opacity .15s ease, background .15s ease;
}
.theme-thumb:hover .theme-thumb__hint,
.theme-thumb:focus-visible .theme-thumb__hint {
  opacity: 1;
  background: rgba(19, 42, 49, .45);
}

/* ----- Logo dans les cartes d'authentification (login, register, reset…) ----- */
.auth-card__brand img { height: 28px; width: auto; display: block; }

/* Colonne centrée de main/base_auth.html : empile les messages au-dessus de la
   carte. .auth-shell est une grille pleine hauteur ; c'est cet enfant unique
   qui porte le centrage (le `margin:auto` de .auth-card ne centre plus dès
   qu'un bandeau de message le précède). */
.auth-shell__inner {
  margin: auto;
  width: 100%;
  max-width: 400px;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ----- Navbar publique : menu déroulant sur mobile -----
   theme.css masque .public-nav__menu et affiche .public-nav__hamburger sous 992px ;
   on révèle le menu en panneau vertical quand .public-nav est .is-open. */
@media (min-width: 992px) {
  .public-nav__hamburger { display: none; }
}
@media (max-width: 991.98px) {
  .public-nav.is-open .public-nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 1rem;
    z-index: 300;
  }
  .public-nav.is-open .public-nav__menu > li { width: 100%; }
  /* Dans le panneau mobile, un déroulant en position absolue se poserait
     par-dessus le reste du menu. On le déplie en liste indentée. */
  .public-nav.is-open .public-nav__menu .dropdown-menu {
    position: static;
    display: block;
    float: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 .9rem;
    margin: 0;
  }
  /* Le chevron ne veut rien dire quand le sous-menu est déjà déplié. */
  .public-nav.is-open .public-nav__menu .dropdown-toggle::after { display: none; }
  .public-nav.is-open .public-nav__menu .public-nav__link { display: block; padding: 0.5rem 0; }
  /* Les contrôles (langue/thème/auth) passés dans le menu s'empilent proprement */
  .public-nav.is-open .public-nav__menu .nav-ctl { width: 100%; }
  .public-nav.is-open .public-nav__menu .nav-ctl .btn { width: 100%; justify-content: center; }
}