/* Accueil : thème clair du héros, onglets Expertises, portfolio. Animations : js/home.js */
.page-home {
  --mf-bg: #ffffff; --mf-ink: #16110f; --mf-nav: #3a3330; --mf-body: #4a4340; --mf-muted: #7a716d;
  --mf-line: rgba(22,17,15,.1); --mf-line2: rgba(22,17,15,.22); --mf-kicker: #d61f2e; --mf-panel: #ffffff;
  --mf-hover: rgba(238,39,55,.06); --mf-clogo: grayscale(1) contrast(1.2); --mf-cblend: multiply; --mf-glow: .4;
  /* Onglets Expertises : état de départ (onglet 1 actif), mis à jour par home.js */
  --ex-op0: 1; --ex-op1: .45; --ex-op2: .45;
  --ex-ar0: rotate(0deg); --ex-ar1: rotate(45deg); --ex-ar2: rotate(45deg);
  --ex-w0: 0%; --ex-w1: 0%; --ex-w2: 0%;
  --ex-t0: none; --ex-t1: none; --ex-t2: none;
  --ex-op0v: 1; --ex-op1v: 0; --ex-op2v: 0;
  --ex-sc0: scale(1); --ex-sc1: scale(1.04); --ex-sc2: scale(1.04);
  --ex-rows0: 1fr; --ex-rows1: 0fr; --ex-rows2: 0fr;
}
.home-hero { position: relative; min-height: 100vh; background: transparent; color: var(--mf-ink); display: flex; flex-direction: column; }
.home-hero__glow { position: absolute; top: 0; left: 0; right: 0; height: max(100vh, 900px); pointer-events: none;
  background: radial-gradient(85% 65% at 0% 100%, rgba(238,39,55,.6) 0%, rgba(253,157,101,.18) 40%, transparent 72%); opacity: var(--mf-glow, 1); }

/* Portfolio : la capture défile au survol (durée selon la hauteur de la page capturée) */
[data-pf]:hover, [data-pf]:focus-visible { --pf-pos: 50% 100%; }
[data-pf="0"]:hover, [data-pf="0"]:focus-visible { --pf-tr: object-position 26s cubic-bezier(.45,0,.55,1); }
[data-pf="1"]:hover, [data-pf="1"]:focus-visible { --pf-tr: object-position 11s cubic-bezier(.45,0,.55,1); }
[data-pf="2"]:hover, [data-pf="2"]:focus-visible { --pf-tr: object-position 16s cubic-bezier(.45,0,.55,1); }
[data-pf="3"]:hover, [data-pf="3"]:focus-visible { --pf-tr: object-position 16s cubic-bezier(.45,0,.55,1); }

/* Comme dans l'export : tout le contenu de l'accueil repose sur le fond du thème (blanc),
   les sections sans fond propre (ex. CTA Bodylink) ne laissent pas voir le fond sombre du site. */
.page-home #main { position: relative; background: var(--mf-bg); color: var(--mf-ink); overflow-x: clip; }   /* clip : les cartes latérales du héros ne créent pas de défilement horizontal */

/* Header de l'accueil (ordinateur) : même header flottant que les autres pages (site.css). */

/* Header de l'accueil (mobile), comme dans l'export : verre fumé sur le héros sombre, logo blanc et burger clair ;
   une fois la page défilée (ou le menu ouvert), verre clair, logo foncé. */

@media (max-width: 819px) {
  /* Héros + bande avis Google et logos = 100vh (stories en haut, bande en bas). Avec viewport-fit=cover (layout.php),
     100vh couvre tout l'écran de l'iPhone, y compris sous la barre Safari ; le haut des stories tient compte de la barre d'état. */
  .page-home .home-hero { min-height: 0; height: 100vh; }
  .page-home [data-stack] { --st-top: calc(64px + env(safe-area-inset-top, 0px)) !important; }
  .page-home .home-hero > [data-ref="heroRef"] { flex: 1 1 0; min-height: 0 !important; }
  .page-home [data-stack] { height: 100% !important; }
  /* Story « site web » : téléphone dézoomé pour le voir en entier, il s'arrête au-dessus du titre */
  .st-site { container-type: size; }
  .st-site__phone { width: min(90cqw, calc((100cqh - 48px - var(--st-top, 0px) - 112px) * 1206 / 2378)) !important; }
  .st-site__fade { height: 30% !important; background: linear-gradient(0deg, #0f0e0e 0, #0f0e0e 90px, rgba(15,14,14,0) 100%) !important; }
  .page-home .hdr, .page-home .hdr.is-scrolled { top: calc(10px + env(safe-area-inset-top, 0px)); left: 2.5%; right: 2.5%; border-radius: 16px; border: 0;
    background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.45); }
  .page-home .hdr__bar, .page-home .hdr.is-scrolled .hdr__bar { padding: 10px 10px 10px 16px; }
  .page-home .hdr__logo { position: relative; }
  .page-home .hdr__logo img { width: min(clamp(170px,18vw,260px),55vw); height: 22px; object-fit: contain; object-position: left center; }
  .page-home .hdr:not(.is-solid) .hdr__logo img:first-child { visibility: hidden; }
  .page-home .hdr:not(.is-solid) .hdr__logo-light { display: block; position: absolute; inset: 0; }
  .page-home .hdr:not(.is-solid) .hdr__burger { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.4); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .page-home .hdr.is-solid { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 1px 0 rgba(255,255,255,.95), 0 0 18px rgba(255,255,255,.35), 0 12px 30px -14px rgba(0,0,0,.35); }
  .page-home .hdr.is-nav { background: #fff; border-radius: 16px 16px 0 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}