/* index.css — Page HOME uniquement
   Objectif: NE PAS toucher au header/footer (gérés par /css/main-header.css auto-chargé par site_header.php),
   donc pas de .site-header/.site-footer/.container global/.btn global ici.
*/

:root{
  --hc-bg:#0b0c10;
  --hc-text:#eaeff5;
  --hc-sub:#aab2bf;

  --hc-violet:#8b5cf6;
  --hc-violet-ring:rgba(139,92,246,.35);

  --hc-accent:#e1c3a8;

  /* Large desktop: let the hero breathe (closer to screen edges) */
  --container-w: min(1560px, 98vw);

  /* Small safety margin used when we intentionally go “almost edge-to-edge” */
  --home-gutter: 86px;

  /* On small screens, keep gutters modest */
}

/* Reset minimal */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body.page-home{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;

  color:var(--hc-text);
  background:var(--hc-bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

body.page-home main{ flex:1 0 auto; min-height:0; }

/* ✅ Neutralise les <br> injectés par tes partials (sans impacter le header) */
body.page-home > br{ display:none !important; }
body.page-home .site-header + br{ display:none !important; }
body.page-home .site-footer + br{ display:none !important; }

/* Background */
body.page-home::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  /* ✅ image versionnée via --hc-bg-img (injecté par head_assets/site_header) */
  background:var(--hc-bg-img, url("../../images/Basic-Fond2.jpg")) center 22% / cover no-repeat;
  background-attachment:fixed;
}
@media (max-width:600px){
  body.page-home::before{ position:absolute; background-attachment:scroll; }
}

/* A11y */
.skip-link{
  position:absolute;
  left:8px;
  top:-40px;
  padding:8px 12px;
  background:#111317;
  color:#eaeff5;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  transition:top .15s ease;
  z-index:9999;
}
.skip-link:focus{ top:8px; }

/* IMPORTANT : on ne touche pas .container global (utilisé par le header).
   On limite au contenu. */
body.page-home main .container{
  width:var(--container-w);
  margin-inline:auto;
}

/* Hero (home) : largeur quasi pleine page pour pousser le bloc gauche vers le bord gauche
   et le bloc droit vers le bord droit (desktop). */
body.page-home main .container.hero-grid{
  width:100%;
  margin-inline:0;
  padding-inline: var(--home-gutter);
}


/* Descend le contenu (2 colonnes) pour respirer sous la nav,
   sans toucher au header/footer (scopé page-home). */
body.page-home .hero-grid{ padding-top: clamp(60px, 1vh, 180px); }

body.page-home .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(18px, 2.5vw, 34px);
  align-items:center;
}

/* Top line in HERO: left pill + right brand (desktop/web) */
body.page-home .hero-topline{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

body.page-home .hero-topline .pill{ margin-bottom:0; }

/* Reuse the brand look outside of the right card */
body.page-home .hero-topline .intro-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  justify-content:flex-end;
  text-align:right;
}
body.page-home .hero-topline .intro-brand-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(26,31,41,.92);
  border:1px solid rgba(255,255,255,.25);
  color:var(--hc-accent);
  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
body.page-home .hero-topline .intro-brand-name{
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  letter-spacing:.3px;
}

/* Bloc gauche : fond "glass" pour la lisibilité sur l'image (sans couvrir le centre) */
body.page-home .hero-left{
  width: 100%;
  max-width: 520px;
  padding: 22px 22px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(139,92,246,.18), transparent 55%),
    linear-gradient(180deg, rgba(11,12,16,.72), rgba(11,12,16,.56));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 52px rgba(0,0,0,.38);
  backdrop-filter: blur(14px) saturate(125%);
}

@media (max-width:980px){
  body.page-home .hero-grid{ padding-top: clamp(38px, 7vh, 110px); }
  body.page-home .hero-left{ max-width: 100%; }
}

body.page-home .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(139,92,246,.15);
  border:1px solid rgba(139,92,246,.35);
  color:#eaeff5;
  font-weight:800;
  margin-bottom:1.25%;
}

body.page-home .hero-title{ margin:0 0 1%; font-size:210%; line-height:1.1; }
body.page-home .hero-title span{ display:block; }
body.page-home .hero-title .dash{ opacity:.9; color:var(--hc-accent); }

body.page-home .sub{ color:var(--hc-sub); font-size:112%; }
body.page-home .cta-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* Founders callout (home) */
body.page-home .founders-callout{
  margin-top: 16px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(225,195,168,.10);
  border: 1px solid rgba(225,195,168,.28);
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
}
body.page-home .founders-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
body.page-home .founders-line{
  color: rgba(255,255,255,.88);
  font-size: 0.95rem;
  line-height: 1.35;
  margin: 4px 0;
}
body.page-home .founders-small{
  color: rgba(255,255,255,.70);
  font-size: 0.85rem;
  line-height: 1.35;
  margin-top: 6px;
}

@media (max-width:980px){
  body.page-home .hero-grid{ grid-template-columns:1fr; }
  body.page-home .hero-topline{ flex-wrap:wrap; }
  body.page-home .hero-topline .intro-brand{ margin-left:auto; }
}

@media (max-height:800px){
  body.page-home .hero{ padding:1.25% 0 2.25%; }
  body.page-home .hero-title{ font-size:180%; }
  body.page-home .sub{ font-size:100%; }
}

/* ─────────────────────────────
   HOME — FLOW
───────────────────────────── */
body.page-home .flow-grid{
  width:var(--container-w);
  margin-inline:auto;
  display:grid;
  gap:1.5%;
  grid-template-columns:repeat(4, minmax(0,1fr));
}

@media (max-width:1200px){ body.page-home .flow-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:920px){  body.page-home .flow-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){  body.page-home .flow-grid{ grid-template-columns:1fr; } }

body.page-home .flow-card{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:1.25% 1.25% 1.5%;
  background:rgba(17,19,23,.78);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:transform .12s ease, border-color .15s ease, box-shadow .12s ease;
}
body.page-home .flow-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 14px 32px rgba(0,0,0,.34);
}

body.page-home .flow-intro-card{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 1rem;
  background:transparent;
  box-shadow:none;
  border:none;
}

/* On ne redéfinit pas .btn (fourni par main-header.css), on ajuste juste ce bouton */
body.page-home .btn-intro{
  display:inline-block;
  font-size:1.25rem;
  padding:1.1rem 3rem;
  border-radius:999px;
  text-align:center;
  text-decoration:none;
}
/* HOME — HERO (bloc explicatif à droite) */
body.page-home .hero-grid{ align-items:flex-start; }

body.page-home .hero-right{
  align-self:start;
  justify-self:end;
  /* Réduit la largeur du bloc de droite pour libérer le centre (l'image reste "clean") */
  width:min(420px, 100%);
  /* Par défaut, pas de décalage (évite l'overflow horizontal sur tablette) */
  margin-right:0;
}


/* Bloc "Ce qui change avec HerCall" */
body.page-home .hero-right .dashboard-blocks{
  width:100%;
  border-radius:20px;
  border:1px solid rgba(165,180,252,0.70);
  padding:14px 18px 16px;
  box-shadow:
    0 22px 56px rgba(15,23,42,0.95),
    0 0 0 1px rgba(15,23,42,0.95) inset;
  display:flex;
}

body.page-home .blocks-inner{ width:100%; max-height:none; overflow:visible; }
body.page-home .blocks-header{ text-align:left; margin-bottom:14px; }
body.page-home .blocks-header h2{ margin:0 0 4px; font-size:20px; color:#f9fafb; }
body.page-home .blocks-header p{ margin:0; font-size:13.5px; color:var(--hc-sub); }

body.page-home .blocks-grid{ display:flex; flex-direction:column; gap:10px; }

body.page-home .block-card{
  backdrop-filter:saturate(130%) blur(10px);
  background:
    radial-gradient(circle at 0% 0%, rgba(147,197,253,0.45), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(165,180,252,0.55), transparent 25%),
    linear-gradient(145deg, rgba(15,23,42,0.96), rgba(15,23,42,0.90));
  border-radius:16px;
  border:1px solid rgba(165,180,252,0.55);
  padding:12px 12px 10px;
  box-shadow:
    0 16px 40px rgba(15,23,42,0.75),
    0 0 0 1px rgba(15,23,42,0.70) inset;
}

body.page-home .block-card h3{ margin:0 0 6px; font-size:1.05rem; color:#e5e7eb; font-family:calibri; }
body.page-home .block-card ul{ margin:0; padding-left:18px; }
body.page-home .block-card li{ font-size:0.95rem; line-height:1.5; color:white; margin-bottom:3px; }
body.page-home .block-card li:last-child{ margin-bottom:0; }

body.page-home .blocks-grid .block-card:nth-child(1) h3{ color:#f9a8d4; }
body.page-home .blocks-grid .block-card:nth-child(2) h3{ color:#93c5fd; }
body.page-home .blocks-grid .block-card:nth-child(3) h3{ color:#a5b4fc; }

@media (max-width:980px){
  body.page-home .hero-right{ justify-self:stretch; margin-right:0; width:100%; }
  body.page-home .hero-right .dashboard-blocks{ max-width:100%; margin-top:16px; }
}

@media (max-width:620px){
  body.page-home .btn-intro{ margin-top: clamp(36px, 9vh, 130px); }
}

/* ─────────────────────────────
   HOME — HERO (carte INTRO à droite)
   (déplacée depuis intro.php, styles copiés et SCOPÉS pour ne pas impacter le hero gauche)
───────────────────────────── */

body.page-home .hero-right .hero-poem.hero-poem--compact{
  max-width:600px;
  padding: 22px 20px;
  border-radius:24px;
  background: radial-gradient(circle at top left, rgba(255,192,203,0.55), rgba(137,72,179,0.25));
  color:#fff;
  backdrop-filter:blur(14px);
  box-shadow:0 22px 60px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  gap: 10px;
}

body.page-home .hero-right .hero-poem .intro-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

body.page-home .hero-right .hero-poem .intro-brand-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(26,31,41,.92);
  border:1px solid rgba(255,255,255,.25);
  color:var(--hc-accent);
  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

body.page-home .hero-right .hero-poem .intro-brand.tiny .intro-brand-mark{
  width:28px;
  height:28px;
  font-size:12px;
}

body.page-home .hero-right .hero-poem .intro-brand-name{
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  letter-spacing:.3px;
}

body.page-home .hero-right .hero-poem .hero-eyebrow{
  margin:0;
  font-size: clamp(13px, 3.4vw, 15px);
  line-height:1.25;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#fff;
}

body.page-home .hero-right .hero-poem .hero-title{
  margin:0;
  font-size: clamp(18px, 4.4vw, 22px);
  line-height:1.15;
  font-weight:800;
  color:rgba(255,255,255,.92);
}

body.page-home .hero-right .hero-poem .hero-sub{
  margin:0;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height:1.5;
  color: rgba(255,255,255,.92);
}

body.page-home .hero-right .hero-poem .hero-tags{
  text-align:center;
  margin-top: 6px;
}

body.page-home .hero-right .hero-poem .hero-tag{
  display:inline-block;
  margin: 6px 6px 0 0;
  font-size: 12px;
  padding: 6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3);
  font-weight:800;
  white-space:nowrap;
}

body.page-home .hero-right .hero-poem .hero-tag-her{ background:#f9a8d4; color:#020617; }
body.page-home .hero-right .hero-poem .hero-tag-him{ background:#93c5fd; color:#020617; }
body.page-home .hero-right .hero-poem .hero-tag-both{ background:#a5b4fc; color:#020617; }

body.page-home .hero-right .hero-poem .hero-actions{
  display:flex;
  justify-content:center;
  margin-top: 2px;
}

body.page-home .hero-right .hero-poem .hero-actions .intro-cta{
  width: min(420px, 100%);
  min-height: 48px;
  padding: 12px 18px;
}

/* Small screens: avoid overly large side padding */
@media (max-width: 600px){
  :root{ --home-gutter: 12px; }
}