/* ==========================================================================
   OPTERIA : premier écran de l'accueil « Le carton magique » (16/10/2026, demande Axel)
   Plein écran sur fond clair #FEFDF9 : au centre, le film de Bobby qui sort de son carton (publications, relances, comptes, site web),
   posé directement sur la page, sans cadre, sans ombre, sans coins arrondis. À gauche le mot qui suit le film (hero-carton.js),
   à droite « Vous validez. » fixe avec une coche orange. L'accroche arrive au défilement, comme avant.
   Le fond du film est #FEFDF9 ; mix-blend-mode: darken (le plus foncé des deux) le fond dans la page sans assombrir la teinte,
   là où multiply donnerait un rectangle un peu plus foncé sur ce fond crème.
   Mode nuit : le film ne peut pas se fondre dans un fond sombre, le premier écran garde donc son fond clair et son encre foncée.
   Remplace da-hero-etoiles.css (archivé dans outils/ancien-da-hero-etoiles.css).
   ========================================================================== */
.hero--carton { --hc-fond: #FEFDF9; position: relative; display: block; min-height: 0; padding: 0; background: var(--hc-fond); color: var(--ink); overflow: hidden; isolation: isolate; }
.hc-ouverture { --hc-haut: 40px; --hc-w: min(58vw, calc((100vh - 150px) * 16 / 9), 1240px); --hc-w: min(58vw, calc((100svh - 150px) * 16 / 9), 1240px);
  position: relative; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 520px; max-height: 1080px; padding: var(--hc-haut) 3vw 0; }
.hc-scene { position: relative; width: var(--hc-w); aspect-ratio: 16 / 9; }
.hc-film, .hc-fixe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; background: transparent; mix-blend-mode: darken; pointer-events: none; }
.hc-fixe { display: none; }
/* les objets qui sortent du cadre (cœurs, briques) s'effacent doucement vers les bords au lieu d'être coupés net (fondu, pas d'ombre) */
.hc-film, .hc-fixe { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-composite: intersect; }
.hero--carton .hg-mot { position: absolute; top: calc(50% + var(--hc-haut) / 2); transform: translateY(-50%); z-index: 1;
  font-size: clamp(32px, 3.6vw, 68px); font-weight: 400; letter-spacing: -.045em; line-height: 1; color: #191919; white-space: pre; pointer-events: none; }
.hero--carton .hg-mot--g { right: calc(50% + var(--hc-w) * .275); text-align: right; }
.hero--carton .hg-mot--d { left: calc(50% + var(--hc-w) * .275); text-align: left; }
.hc-coche { display: inline-block; width: .78em; height: .78em; margin-left: .22em; vertical-align: -.04em; color: #FB4D17; }
.hero--carton .hg-souris { position: absolute; left: 50%; bottom: 22px; width: 22px; height: 34px; margin-left: -11px; border: 1.5px solid rgba(25,25,25,.4); border-radius: 12px; opacity: .8; transition: opacity .2s; z-index: 1; }
.hero--carton .hg-souris:hover, .hero--carton .hg-souris:focus-visible { opacity: 1; }
.hero--carton .hg-souris span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: rgba(25,25,25,.6); animation: hg-roulette 1.8s ease-in-out infinite; }
@keyframes hg-roulette { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 70% { opacity: 1; transform: translateY(8px); } 100% { opacity: 0; transform: translateY(10px); } }

/* l'accroche, juste après, sur le même fond clair */
.hero--carton .hg-texte { position: relative; text-align: center; padding-top: 24px; padding-bottom: 96px; scroll-margin-top: 72px; }
.hero--carton .hg-texte .meta { color: var(--ink-2); margin-bottom: 18px; }
.hero--carton .hg-texte .hero__titre { color: var(--ink); max-width: 980px; margin: 0 auto; }
.hero--carton .hg-texte .p { max-width: 680px; margin: 22px auto 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--muet, rgba(53,53,53,.72)); text-wrap: balance; }
.hero--carton .hg-texte .actions { justify-content: center; margin-top: 30px; }

/* les logos clients juste dessous passent eux aussi sur fond clair (en mode jour), pour ne pas couper l'accueil d'une bande noire */
html:not([data-theme="nuit"]) .hero--carton + .brands--hero, html:not([data-theme="nuit"]) .hero--carton + .brands--hero::before { background: linear-gradient(180deg, #FEFDF9 55%, #fff); }   /* fondu très doux vers le blanc de la suite de la page */
html:not([data-theme="nuit"]) .hero--carton + .brands--hero .brands__label { color: var(--ink-2); }
html:not([data-theme="nuit"]) .hero--carton + .brands--hero .marquee__track img, html:not([data-theme="nuit"]) .hero--carton + .brands--hero .marquee__track img:hover { filter: brightness(0); opacity: .55; }

/* mode nuit : le premier écran reste clair (le film est tourné sur fond clair), le reste de la page suit le thème */
html[data-theme="nuit"] .hero--carton {
  --paper: #fff; --paper-2: #edede8; --card: #fff; --ink: #292929; --ink-2: #6f6f6c; --ink-3: #8e8e8a; --texte: #353535; --muet: rgba(53,53,53,.72);
  --line: rgba(0,0,0,.12); --line-2: rgba(0,0,0,.16); --g-100: #edede8; --g-150: #dbdbd2; --g-200: #d0d0c8; color-scheme: light;
  background: var(--hc-fond); color: var(--ink); }
html[data-theme="nuit"] .hero--carton .hg-texte .p { color: rgba(53,53,53,.72); }
html[data-theme="nuit"] .hero--carton .btn.btn:not(.nav__cta) { background: #191919; color: #fff; }
html[data-theme="nuit"] .hero--carton .btn.btn:not(.nav__cta):hover { background: #3a3a3a; color: #fff; }
html[data-theme="nuit"] .hero--carton .btn.btn--ghost:not(.nav__cta) { background: #dbdbd2; color: #292929; }
html[data-theme="nuit"] .hero--carton .btn.btn--ghost:not(.nav__cta):hover { background: #d0d0c8; color: #292929; }
html[data-theme="nuit"] .hero--carton :is(a, button):focus-visible { outline-color: #191919; }

/* animations réduites : l'image fixe (Bobby tend sa photo, coche orange) remplace le film, le mot reste « Bobby exécute. » */
@media (prefers-reduced-motion: reduce) {
  .hc-film { display: none; }
  .hc-fixe { display: block; }
  .hero--carton .hg-souris span { animation: none; }
}

/* tablette : le film un peu plus large, les mots un peu plus petits */
@media (max-width: 1100px) {
  .hc-ouverture { --hc-w: min(62vw, calc((100svh - 150px) * 16 / 9)); }
  .hero--carton .hg-mot { font-size: clamp(24px, 3.3vw, 40px); }
  .hero--carton .hg-mot--g { right: calc(50% + var(--hc-w) * .28); }
  .hero--carton .hg-mot--d { left: calc(50% + var(--hc-w) * .28); }
}
/* le titre court du téléphone : caché sur ordinateur */
.hc-titre-mob { display: none; }
/* téléphone (refait le 16/10/2026, demande Maxime) : tout le message tient dans le premier écran.
   Titre « Votre premier salarié IA », film plus court (Bobby recadré au centre), une seule ligne de bénéfice qui suit le film,
   puis le bouton Démo. Plus de « Vous validez. » ni de bulle « mode nuit » ici ; le lanceur du chat se retire tant que ce premier écran est visible. */
@media (max-width: 759px) {
  .hc-ouverture { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0;
    height: auto; min-height: 0; max-height: none; padding: 92px 20px 0; }
  .hc-titre-mob { display: block; order: 0; margin: 0; font-size: clamp(30px, 8.4vw, 36px); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; text-align: center; color: #191919; text-wrap: balance; }
  .hc-titre-mob span { color: #FB4D17; }
  .hc-scene { order: 1; width: 100vw; height: clamp(230px, 42svh, 380px); aspect-ratio: auto; overflow: hidden; }
  .hc-film, .hc-fixe { left: 50%; right: auto; width: auto; height: 100%; aspect-ratio: 16 / 9; transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
  .hero--carton .hg-mot { position: static; transform: none; font-size: clamp(22px, 6.2vw, 26px); letter-spacing: -.035em; text-align: center; }
  .hero--carton .hg-mot--g { order: 2; min-height: 1.2em; }
  .hero--carton .hg-mot--d, .hero--carton .hg-souris { display: none; }
  /* l'accroche suit sans défiler : le bouton d'abord, le texte ensuite ; le h1 reste pour les moteurs et les lecteurs d'écran */
  .hero--carton .hg-texte { display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 48px; }
  .hero--carton .hg-texte .hero__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hero--carton .hg-texte .actions { order: 1; margin-top: 0; }
  .hero--carton .hg-texte .actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero--carton .hg-texte .p { order: 2; margin-top: 26px; }
  .hero--carton .hg-texte .meta { order: 3; margin: 16px 0 0; }
  body:has(.hero--carton) .theme-bulle { display: none; }
  html.hc-en-vue .bw-lanceur { opacity: 0; pointer-events: none; transform: scale(.8); }
}
}