/* =========================================================================
   SoriaHR — Landing : peau « thème produit »
   Surcharge chargée après landing-page.css. La structure éditoriale (grille,
   figures numérotées, typo Archivo/Fragment Mono) reste ; la matière rejoint
   l'application : fond menthe clair, surfaces blanches arrondies, ombres
   douces, vert produit #036141, CTA sur le dégradé héros canonique.
   Pour revenir à la peau « papier », retirer ce lien dans App.razor.
   ========================================================================= */

:root {
  --paper: #fafdfb;
  --paper-high: #ffffff;
  --ink: #111713;
  --ink-soft: #3a4740;
  --ink-muted: #5b6b63;
  --ink-faint: #8b978f;

  --accent: #036141;
  --accent-deep: #054a33;
  --accent-bright: #9fc3ae;
  --accent-wash: #eaf2ec;

  --line: #e3ebe5;
  --line-strong: #c2d2c6;
  --line-paper: rgba(250, 253, 251, 0.26);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(15, 60, 40, 0.04), 0 1px 3px rgba(15, 60, 40, 0.06);
  --shadow-pop: 0 10px 28px rgba(15, 60, 40, 0.12), 0 2px 6px rgba(15, 60, 40, 0.06);
}

/* Trame de croix : teintée vert, très légère */
.landing-shell {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 31v10M31 36h10' stroke='%23036141' stroke-opacity='0.055' stroke-width='1'/%3E%3C/svg%3E")
    var(--paper);
}

/* ---- Boutons ------------------------------------------------------------ */

.landing-button {
  border-radius: var(--radius-sm);
}

.landing-button--primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(3, 97, 65, 0.22);
}

.landing-button--primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.landing-button--outline:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}

.landing-button--paper {
  color: var(--accent);
  box-shadow: 0 10px 26px rgba(6, 40, 27, 0.25);
}

.landing-button--paper:hover {
  background: var(--accent-wash);
  border-color: var(--accent-wash);
  color: var(--accent-deep);
}

/* ---- Figures : cartes blanches arrondies -------------------------------- */

.landing-fig {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) ease;
}

.landing-fig:hover {
  box-shadow: var(--shadow-pop);
}

/* Les marques de repérage d'imprimerie n'ont plus de sens sur des cartes */
.landing-fig::before,
.landing-fig::after {
  display: none;
}

/* ---- Grilles à filets : conteneurs arrondis ------------------------------ */

.landing-personas__grid,
.landing-journey__steps,
.landing-spaces__grid {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.landing-journey__connector span {
  border-radius: 999px;
}

.landing-sec__label::before {
  border-radius: 2px;
}

/* ---- Bandeau défilant : bande menthe ------------------------------------- */

.landing-ticker {
  background: var(--accent-wash);
}

.landing-ticker__seq {
  color: #1f5f3f;
}

.landing-ticker__seq i {
  color: var(--accent);
}

/* ---- Appel final : dégradé héros canonique du produit --------------------- */

.landing-cta {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 31v10M31 36h10' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(100deg, #19694d 0%, #2a7359 35%, #387b62 60%, #5e9583 85%, #7ea595 100%);
  color: #ffffff;
}

.landing-cta__meta {
  color: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.landing-cta__meta a {
  color: #ffffff;
}

.landing-cta h2 em {
  color: #c9f1dc;
}

.landing-cta__sub {
  color: rgba(255, 255, 255, 0.88);
}

.landing-button--ghost-paper {
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.landing-button--ghost-paper:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Pied de page : vert profond ------------------------------------------ */

.landing-footer {
  background: #0c3b2a;
  border-top: none;
}

.landing-footer__brand-name::after {
  border-radius: 2px;
}

.landing-footer__mark span {
  -webkit-text-stroke-color: rgba(250, 253, 251, 0.2);
}

/* ---- Sélection ------------------------------------------------------------ */

::selection {
  background: var(--accent);
  color: #ffffff;
}