/* /public_html/assets/css/public-home.css */

/* =========================================================
   PUBLIC HOME — HERO FULLSCREEN OVERLAY + CARDS + FOOTER
   Objectifs:
   - Hero = 100% écran (sous navbar), image pleine largeur/hauteur
   - Texte PAR-DESSUS l’image (jamais en dessous)
   - Réseaux = icônes seules (couleurs réelles)
   - Logo footer = switch selon html[data-theme]
   =======================================================*/

#public-view .hero { margin-top: 0; }

/* =========================================================
   HERO — FULLSCREEN OVERLAY (layout + styles complets)
   - image full bleed
   - texte au-dessus
   - intro lisible clair/sombre
========================================================= */

#public-view .hero { margin-top: 0; }

#public-view .hero.hero--image{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  height: calc(100svh - var(--app-navbar-h));
  min-height: 520px;
}

/* Image full bleed */
#public-view .hero.hero--image .hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#public-view .hero.hero--image .hero-media-frame{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-surface);
}

#public-view .hero.hero--image .hero-media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  filter: saturate(1.06) contrast(1.05);
}

/* Overlay lisibilité */
#public-view .hero.hero--image .hero-media-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 22% 18%,
      color-mix(in srgb, var(--color-accent-soft) 26%, transparent),
      transparent 60%
    ),
    linear-gradient(90deg,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.42) 52%,
      rgba(0,0,0,0.12) 100%
    );
}

html[data-theme="light"] #public-view .hero.hero--image .hero-media-frame::before{
  background:
    radial-gradient(900px 520px at 22% 18%,
      color-mix(in srgb, var(--color-accent-soft) 16%, transparent),
      transparent 62%
    ),
    linear-gradient(90deg,
      rgba(255,255,255,0.78) 0%,
      rgba(255,255,255,0.38) 55%,
      rgba(255,255,255,0.10) 100%
    );
}

/* Texte au-dessus */
#public-view .hero.hero--image .hero-inner{
  position: relative;
  z-index: 2;
  height: 100%;

  width: min(1120px, calc(100% - 2 * var(--space-4)));
  margin: 0 auto;

  display: flex;
  align-items: center;

  padding: clamp(var(--space-6), 10vh, var(--space-8)) 0;
}

#public-view .hero.hero--image .hero-text{
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Kicker / Title / Subtitle */
#public-view .hero-kicker{
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

#public-view .hero-title{
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.03;
  margin: 0;
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

html[data-theme="light"] #public-view .hero-title{
  text-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

#public-view .hero-subtitle{
  margin: 0;
  font-size: 1.02rem;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

html[data-theme="light"] #public-view .hero-subtitle{
  text-shadow: 0 10px 22px rgba(0,0,0,0.14);
}

/* Actions */
#public-view .hero-actions{
  display:flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Badges glass */
#public-view .hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

#public-view .hero-badge{
  display:inline-flex;
  align-items:center;
  gap: 0.5rem;

  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-pill);

  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
  background: color-mix(in srgb, rgba(0,0,0,0.32) 80%, transparent);
  color: color-mix(in srgb, var(--color-text) 92%, transparent);

  font-size: 0.9rem;
  backdrop-filter: blur(8px);
}

html[data-theme="light"] #public-view .hero-badge{
  background: color-mix(in srgb, rgba(255,255,255,0.50) 85%, transparent);
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

#public-view .hero-badge i{
  font-size: 1rem;
  color: var(--color-accent);
}

/* -------------------------
   SECTIONS PUBLIC
-------------------------- */
#public-view .section--public{
  margin-top: var(--space-6);
}

#public-view .dashboard-layout{
  display:grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 900px){
  #public-view .dashboard-layout{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#public-view .dashboard-card{
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-4);

  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}

#public-view .dashboard-card-accent{
  background: radial-gradient(
    900px 420px at 20% 10%,
    color-mix(in srgb, var(--color-accent-soft) 40%, transparent),
    var(--color-surface-soft)
  );
}

/* Hit-area */
#public-view .dashboard-card-hit{
  position:absolute;
  inset:0;
  z-index:3;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
}

#public-view .dashboard-card-hit:focus{ outline:none; }
#public-view .dashboard-card-hit:focus-visible{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Contenu sous hit */
#public-view .dashboard-card > *:not(.dashboard-card-hit){
  position: relative;
  z-index:2;
}

@media (hover:hover) and (pointer:fine){
  #public-view .dashboard-card-clickable:hover{
    transform: translateY(-1px);

    border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-border-subtle) 30%);

    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent),
      0 0 16px color-mix(in srgb, var(--color-accent) 35%, transparent),
      var(--shadow-soft);

    /* pas de recolor de fond */
    background: inherit;
  }
}

#public-view .dashboard-card-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;

  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  border: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-3);
}

#public-view .dashboard-card-icon i{
  font-size: 1.15rem;
  color: var(--color-accent);
}

#public-view .dashboard-card-title{
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  line-height: 1.2;
}

#public-view .dashboard-card-text{
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Sécurité: si un CTA traîne encore, on le cache */
#public-view .dashboard-card-cta{ display:none !important; }

/* =========================
   FOOTER — LOGO INLINE (noir en clair, blanc en sombre)
========================= */
#public-view .public-footer-logo{
  width: 150px;
  position: relative;
  color: #0b0f1a; /* clair = noir */
}

html[data-theme="dark"] #public-view .public-footer-logo{
  color: #ffffff; /* sombre = blanc */
}

#public-view .public-footer-logo .footer-logo-inline{
  display: block;
  width: 100%;
}

/* Le SVG inline prend la couleur via currentColor */
#public-view .public-footer-logo svg{
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.98;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}

/* Force la recoloration même si le SVG a des fill codés en dur */
#public-view .public-footer-logo svg,
#public-view .public-footer-logo svg *{
  fill: currentColor !important;
  stroke: currentColor !important; /* au cas où */
}

html[data-theme="dark"] #public-view .public-footer-logo svg{
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
}

#public-view .public-footer-title{
  margin:0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#public-view .public-footer-subtitle{
  margin:0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* colonnes */
#public-view .public-footer-cols{
  display:grid;
  gap: var(--space-4);
}

@media (min-width: 860px){
  #public-view .public-footer-inner{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
    align-items: start;
  }
  #public-view .public-footer-cols{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#public-view .public-footer-col-title{
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

#public-view .public-footer-line{
  margin: 0.35rem 0;
  display:flex;
  align-items:center;
  gap: 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

#public-view .public-footer-line i{ color: var(--color-accent); }

/* Accès */
#public-view .public-footer-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap: 0.5rem;

  width: 100%;
  border: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.8rem;
  margin: 0.35rem 0;

  cursor:pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

@media (hover:hover) and (pointer:fine){
  #public-view .public-footer-link:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-subtle);
    border-color: color-mix(in srgb, var(--color-border-subtle) 60%, var(--color-accent) 40%);
  }
}

/* Réseaux : icônes seules */
#public-view .public-socials{
  display:flex;
  align-items:center;
  gap: 0.85rem;
  padding-top: 0.25rem;
}

#public-view .public-social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: 42px;
  height: 42px;

  border: 0;
  background: transparent;
  text-decoration: none;
  cursor: pointer;

  transition: transform 140ms ease, filter 140ms ease;
}

#public-view .public-social-icon i{ font-size: 1.35rem; }

/* couleurs réelles */
#public-view .public-social-icon.is-facebook i{ color: #1877F2; }
#public-view .public-social-icon.is-instagram i{
  color: #E1306C;
  filter: drop-shadow(0 6px 14px rgba(225,48,108,0.22));
}

@media (hover:hover) and (pointer:fine){
  #public-view .public-social-icon:hover{
    transform: translateY(-1px) scale(1.06);
    filter: brightness(1.06);
  }
}

#public-view .public-social-icon:focus{ outline:none; }
#public-view .public-social-icon:focus-visible{
  border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* bas footer */
#public-view .public-footer-bottom{
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

#public-view .public-footer-bottom p{
  margin:0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* =========================
   FOOTER — RESPIRATION
========================= */

/* un peu plus d'air global */
#public-view .public-footer{
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
}

/* grille footer : plus de gap entre bloc logo et colonnes */
#public-view .public-footer-inner{
  display: grid;
  gap: var(--space-5);
}

/* bloc brand : espace et alignement clean */
#public-view .public-footer-brand{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* le logo un poil moins "collé" au reste */
#public-view .public-footer-logo{
  margin-bottom: var(--space-2);
}

/* on garde juste la baseline, un peu plus subtile */
#public-view .public-footer-subtitle{
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.35;
}

/* comme on a supprimé le titre, on neutralise au cas où */
#public-view .public-footer-title{ display: none; }

.public-footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.public-footer-legal{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.public-footer-legal-link{
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-text-muted);
  text-decoration: none;
}

.public-footer-legal-link:hover{
  color: var(--color-text);
  text-decoration: underline;
}

.public-footer-legal-sep{
  opacity: .5;
}