/* =============================================================================
   Camabe — LES DEUX VITRINES (24/09/2026, soir ; une seule allure le 25/09).
   La vitrine de l'AVOCAT et celle du CLIENT ont la meme allure (decision du
   cabinet, 25/09) : l'encre du logo, barre et bandeau d'ouverture sombres,
   accent vert, lignes nettes, pied sombre. Ce qui les distingue est le menu,
   le bouton d'appel et le ton des textes, pas la couleur.
   Aucune couleur en dur : on permute les jetons du socle dans une zone donnee.
   <body class="vitrine vitrine--avocats | vitrine--clients"> est pose par tete.php.
   ========================================================================== */

/* ---- Les jetons gardes au niveau de la page, pour les permuter plus bas ---- */
.vitrine {
  --jour-encre: var(--encre);
  --jour-encre-douce: var(--encre-douce);
  --jour-papier: var(--papier);
  --jour-carte: var(--carte);
  --jour-trait: var(--trait);
  --jour-trait-fort: var(--trait-fort);
  --jour-papier-creux: var(--papier-creux);
  --jour-accent: var(--accent);
  --jour-accent-vif: var(--accent-vif);
  --jour-accent-pale: var(--accent-pale);
  --jour-sur-accent: var(--sur-accent);
  --nuit-fond: var(--encre);
  --nuit-texte: var(--papier);
}
:root[data-theme="dark"] .vitrine { --nuit-fond: var(--papier-creux); --nuit-texte: var(--encre); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vitrine { --nuit-fond: var(--papier-creux); --nuit-texte: var(--encre); }
}

/* Le selecteur d'espace (Avocat | Client), a part du menu : il dit ou l'on est. */
.espaces { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; padding: 3px; border: 1px solid var(--trait-fort); border-radius: 999px; }
.espaces__lien { padding: 4px 11px; border-radius: 999px; color: var(--encre-douce); font-size: .78rem; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.espaces__lien:hover { color: var(--encre); }
.espaces__lien[aria-current="true"] { background: var(--accent-pale); color: var(--accent); }
.espaces__lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.navigation-mobile__espace { border-top: 1px solid var(--trait); margin-top: 4px; }
@media (max-width: 1260px) { .espaces { display: none; } }
/* Le logo est une forme sombre ouverte sur du blanc : un fond clair, jour et nuit (comme l'accueil). */
.vitrine { --fond-logo: #ffffff; }
.marque .marque__icone { padding: 3px; border-radius: 9px; background: var(--fond-logo); }

/* ============================================= LES DEUX VITRINES == */

/* Une zone « nuit » : les jetons sont permutes, tout ce qui est dedans suit. */
.vitrine .barre,
.vitrine .hero,
.vitrine .page-intro,
.vitrine .pied {
  --encre: var(--nuit-texte);
  --encre-douce: color-mix(in srgb, var(--nuit-texte) 70%, transparent);
  --papier: var(--nuit-fond);
  --papier-creux: color-mix(in srgb, var(--nuit-texte) 7%, var(--nuit-fond));
  --carte: color-mix(in srgb, var(--nuit-texte) 6%, var(--nuit-fond));
  --trait: color-mix(in srgb, var(--nuit-texte) 13%, transparent);
  --trait-fort: color-mix(in srgb, var(--nuit-texte) 24%, transparent);
  --accent: color-mix(in srgb, var(--accent-vif) 82%, var(--nuit-texte));
  --accent-pale: color-mix(in srgb, var(--accent-vif) 20%, var(--nuit-fond));
  --sur-accent: var(--nuit-fond);
  background: var(--papier);
  color: var(--encre);
}
/* En haut de page, la barre se fond dans le bandeau d'ouverture : meme fond, pas de trait.
   Elle prend son fond des que la page defile (assets/js/portes.js pose .barre--defilee). */
.vitrine .barre { background: color-mix(in srgb, var(--nuit-fond) 94%, transparent); border-bottom-color: var(--trait); backdrop-filter: saturate(1.4) blur(10px); transition: background .25s ease, border-color .25s ease; }
/* .vitrine--bandeau : la page s'ouvre sur le bandeau sombre (pose par portes.js), sinon la barre garde son fond. */
.vitrine.vitrine--bandeau .barre:not(.barre--defilee) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
/* Le bandeau remonte sous la barre (seulement s'il ouvre la page). */
.vitrine #contenu > .hero:first-child,
.vitrine #contenu > .page-intro:first-child { margin-top: calc(-1 * var(--haut-barre, 69px)); }
.vitrine #contenu > .hero:first-child { padding-top: calc(clamp(64px, 10vw, 118px) + var(--haut-barre, 69px)); }
.vitrine #contenu > .page-intro:first-child { padding-top: calc(clamp(58px, 9vw, 108px) + var(--haut-barre, 69px)); }
.vitrine .barre .marque { color: var(--encre); }
.vitrine .barre__menu-plus { background: var(--carte); }
.vitrine .hero,
.vitrine .page-intro {
  background:
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--accent-vif) 22%, transparent), transparent 38%),
    linear-gradient(180deg, var(--nuit-fond), color-mix(in srgb, var(--nuit-fond) 88%, var(--accent-vif)));
  border-bottom: 0;
}
/* La piece montree dans le heros reste une feuille de papier, posee sur la nuit. */
.vitrine .hero .piece {
  --encre: var(--jour-encre);
  --encre-douce: var(--jour-encre-douce);
  --papier: var(--jour-papier);
  --papier-creux: var(--jour-papier-creux);
  --carte: var(--jour-carte);
  --trait: var(--jour-trait);
  --trait-fort: var(--jour-trait-fort);
  --accent: var(--jour-accent);
  --accent-vif: var(--jour-accent-vif);
  --accent-pale: var(--jour-accent-pale);
  --sur-accent: var(--jour-sur-accent);
  color: var(--encre);
}
.vitrine .bouton { border-radius: 8px; }
.vitrine .pied { border-top: 0; }
.vitrine .pied a:hover { color: var(--accent); }

/* ---- La barre : une ligne, toujours ; un peu plus large que le texte des pages ---- */
.barre__liens a, .barre__plus summary, .barre__cta { white-space: nowrap; }
.barre .barre__int { max-width: 1280px; gap: 16px; }
.barre__liens { gap: 20px; }