/* =======================================================================
   HERO PAGE D'ACCUEIL - digital-m.fr
   Prefixe : dm-hero
   Charge uniquement sur is_front_page() via dm_conditional_page_css()
   Animation des logos LLM : 100% CSS, aucun JavaScript requis
   Encodage : UTF-8 no BOM - Zero caractere non-ASCII dans ce fichier
   ======================================================================= */

/* ============================================================
   1. STRUCTURE
   ============================================================ */

.dm-hero {
  background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 55%, #16213e 100%);
  position: relative;
  overflow: hidden;
  padding: 70px 24px;
}

/* Halo orange haut-droite */
.dm-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255,106,28,.22) 0%, transparent 65%);
  pointer-events: none;
}

/* Halo jaune bas-gauche */
.dm-hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(252,231,33,.13) 0%, transparent 65%);
  pointer-events: none;
}

/* Layout 2 colonnes */
.dm-hero__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.dm-hero__left {
  flex: 1 1 50%;
  max-width: 55%;
  text-align: left;
}

.dm-hero__right {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dm-hero__img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   2. PASTILLE "SOYEZ CITE PAR"
   Les variables ci-dessous pilotent toute la sequence.
   Equivalences avec l'ancien script JS :
     --dm-first  <=  FIRST_LOGO_DELAY (etait 2500ms)
     --dm-step   <=  STANDARD_DELAY   (etait 500ms)
     --dm-reveal <=  duree fermeture du slot (etait 400ms)
   ============================================================ */

.dm-hero__citation {
  --dm-first:  .70s;   /* pause sur le 1er logo (ChatGPT) */
  --dm-step:   .22s;   /* rotation des logos 2 a 7 */
  --dm-reveal: .45s;   /* ouverture de la rangee finale */
  --dm-logo:   28px;   /* taille des logos */

  /* Fin du defile = pause + 6 rotations + marge de sortie du 7e logo */
  --dm-cycle: calc(var(--dm-first) + var(--dm-step) * 6 + .30s);

  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(255,106,28,.18);
  border: 1px solid rgba(255,106,28,.4);
  border-radius: 50px;
  padding: 8px 18px;
  margin-bottom: 28px;
}

.dm-hero__citation-start {
  color: #ff9a5c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   3. PHASE 1 : le slot, les logos defilent un par un
   L'etat de base est l'etat FINAL (slot referme et invisible).
   Si un optimiseur CSS supprime les keyframes, le slot reste
   masque : aucun risque de bloc fantome dans la pastille.
   ============================================================ */

.dm-hero__logo-slot {
  position: relative;
  flex: 0 0 auto;
  width: 0;
  height: var(--dm-logo);
  margin-right: -10px;
  opacity: 0;
  animation: dmHeroSlotWrap var(--dm-cycle) linear;
}

@keyframes dmHeroSlotWrap {
  0%, 92% {
    width: var(--dm-logo);
    margin-right: 0;
    opacity: 1;
  }
  100% {
    width: 0;
    margin-right: -10px;
    opacity: 0;
  }
}

.dm-hero__logo-item {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dm-logo);
  height: var(--dm-logo);
  object-fit: contain;
  opacity: 0;
  animation: dmHeroSlotItem calc(var(--dm-step) * 1.5) ease backwards;
}

/* --- Logo 1 : ChatGPT, mis en avant avec une pause longue --- */
.dm-hero__logo-item:nth-child(1) {
  animation-name: dmHeroSlotFirst;
  animation-duration: calc(var(--dm-first) + var(--dm-step) * .5);
  animation-delay: 0s;
}

@keyframes dmHeroSlotFirst {
  0%   { opacity: 0; transform: translateY(5px)  scale(.85); }
  12%  { opacity: 1; transform: translateY(0)    scale(1);   }
  88%  { opacity: 1; transform: translateY(0)    scale(1);   }
  100% { opacity: 0; transform: translateY(-5px) scale(.85); }
}

/* --- Logos 2 a 7 : rotation reguliere --- */
.dm-hero__logo-item:nth-child(2) { animation-delay: var(--dm-first); }
.dm-hero__logo-item:nth-child(3) { animation-delay: calc(var(--dm-first) + var(--dm-step) * 1); }
.dm-hero__logo-item:nth-child(4) { animation-delay: calc(var(--dm-first) + var(--dm-step) * 2); }
.dm-hero__logo-item:nth-child(5) { animation-delay: calc(var(--dm-first) + var(--dm-step) * 3); }
.dm-hero__logo-item:nth-child(6) { animation-delay: calc(var(--dm-first) + var(--dm-step) * 4); }
.dm-hero__logo-item:nth-child(7) { animation-delay: calc(var(--dm-first) + var(--dm-step) * 5); }

@keyframes dmHeroSlotItem {
  0%   { opacity: 0; transform: translateY(5px)  scale(.85); }
  28%  { opacity: 1; transform: translateY(0)    scale(1);   }
  66%  { opacity: 1; transform: translateY(0)    scale(1);   }
  100% { opacity: 0; transform: translateY(-5px) scale(.85); }
}

/* ============================================================
   4. PHASE 2 : la rangee finale s'ouvre, puis les 7 logos
   apparaissent en cascade.
   max-width 300px : largeur reelle du contenu = 244px desktop
   et 202px mobile, donc aucun risque de rognage.
   ============================================================ */

.dm-hero__logos-final {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  max-width: 300px;
  animation: dmHeroFinalOpen var(--dm-reveal) ease var(--dm-cycle) backwards;
}

@keyframes dmHeroFinalOpen {
  from { max-width: 0; }
}

.dm-hero__logo-final {
  width: var(--dm-logo);
  height: var(--dm-logo);
  object-fit: contain;
  flex-shrink: 0;
  animation: dmHeroLogoIn .35s ease backwards;
}

.dm-hero__logo-final:nth-child(1) { animation-delay: calc(var(--dm-cycle) + .00s); }
.dm-hero__logo-final:nth-child(2) { animation-delay: calc(var(--dm-cycle) + .05s); }
.dm-hero__logo-final:nth-child(3) { animation-delay: calc(var(--dm-cycle) + .10s); }
.dm-hero__logo-final:nth-child(4) { animation-delay: calc(var(--dm-cycle) + .15s); }
.dm-hero__logo-final:nth-child(5) { animation-delay: calc(var(--dm-cycle) + .20s); }
.dm-hero__logo-final:nth-child(6) { animation-delay: calc(var(--dm-cycle) + .25s); }
.dm-hero__logo-final:nth-child(7) { animation-delay: calc(var(--dm-cycle) + .30s); }

@keyframes dmHeroLogoIn {
  from { opacity: 0; transform: translateY(5px); }
}

/* ============================================================
   5. TITRE H1
   Largeur de base a 100% et keyframe "from" a 0 : si les
   keyframes sont supprimees, le soulignement reste visible.
   ============================================================ */

.dm-hero__h1 {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 16px;
}

.dm-hero__underline span,
.dm-hero__underline--alt span {
  position: relative;
  display: inline-block;
}

.dm-hero__underline span::after,
.dm-hero__underline--alt span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  animation: dmHeroUnderline .6s ease .30s backwards;
}

.dm-hero__underline span::after {
  background: #ff6a1c;
}

.dm-hero__underline--alt span::after {
  background: #fce721;
  animation-delay: .70s;
}

@keyframes dmHeroUnderline {
  from { width: 0; }
}

/* ============================================================
   6. SOUS-TITRE, TELEPHONE, CTA
   ============================================================ */

.dm-hero__h2 {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 400;
  color: rgba(255,255,255,.65);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.dm-hero__phone {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 28px;
}

.dm-hero__phone a {
  color: #ff6a1c;
  text-decoration: none;
  transition: color .3s ease;
}

.dm-hero__phone a:hover {
  color: #fce721;
  text-decoration: none;
}

.dm-hero__cta {
  display: flex;
}

.dm-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff6a1c, #fce721);
  color: #0d0d1a !important;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 6px 24px rgba(255,106,28,.35);
  border: none;
}

.dm-hero__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255,106,28,.5);
  color: #0d0d1a !important;
  text-decoration: none;
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
  .dm-hero__inner { gap: 28px; }
  .dm-hero__left  { max-width: 58%; }
}

@media (max-width: 767px) {
  .dm-hero {
    padding: 48px 20px 56px;
    
  }

  .dm-hero__inner { flex-direction: column; }
  .dm-hero__right { display: none; }
  .dm-hero__left  { max-width: 100%; text-align: center; }
  .dm-hero__cta   { justify-content: center; }
  .dm-hero__h1    { font-size: clamp(22px, 6vw, 32px); }

  /* Une seule variable a redefinir : toute l'animation suit */
  .dm-hero__citation {
    justify-content: center;
    --dm-logo: 22px;
  }
}

/* ============================================================
   8. ACCESSIBILITE
   Animation desactivee si l'utilisateur la refuse au niveau OS.
   Le slot est masque, la rangee finale reste affichee.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .dm-hero__logo-slot {
    display: none;
  }

  .dm-hero__logo-item,
  .dm-hero__logos-final,
  .dm-hero__logo-final,
  .dm-hero__underline span::after,
  .dm-hero__underline--alt span::after {
    animation: none;
  }
}