/* ============================================================
   SECTION — META ADS EN CHIFFRES
   Fond clair (couleur du site). Icônes Meta flottantes, sans
   fond bleu. Deux dashboards. En bas, le mockup mobile qui
   glisse doucement, chevauché par la section blanche suivante.
   ============================================================ */

.meta{
  position:relative;
  padding:72px 0 0;               /* pas de padding bas : le mockup remonte sous la section suivante */
  background:var(--panel);
  overflow:hidden;
  --grain-opacity:.16;
}

/* icônes Meta flottantes (fond transparent, juste les tuiles) */
.meta__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.meta__icon{
  position:absolute; display:block;
  filter:drop-shadow(0 18px 32px rgba(20,40,60,.16));
  animation:meta-float var(--t, 9s) ease-in-out infinite;
  animation-delay:var(--delay, 0s);
}
.meta__icon--1{ width:88px;  top:9%;  left:5%;   opacity:.92; --t:9s }
.meta__icon--2{ width:56px;  top:52%; left:11%;  opacity:.5;  --t:11s; --delay:-3s; filter:blur(1.5px) drop-shadow(0 12px 20px rgba(20,40,60,.14)) }
.meta__icon--3{ width:104px; top:7%;  right:6%;  opacity:.94; --t:10s; --delay:-5s }
.meta__icon--4{ width:66px;  top:46%; right:9%;  opacity:.42; --t:12s; --delay:-1.5s; filter:blur(2.5px) drop-shadow(0 12px 20px rgba(20,40,60,.14)) }
@keyframes meta-float{ 50%{ transform:translateY(-16px) rotate(4deg) } }

/* voile clair qui dégage le texte des icônes */
.meta::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(60% 40% at 50% 6%, var(--panel) 40%, transparent 74%);
}

.meta__inner{
  position:relative; z-index:3;
  width:min(var(--page-max), 100%);
  margin:0 auto;
  padding-inline:max(24px, calc((100% - var(--page-max)) / 2));
}

/* ---------- en-tête ---------- */
.meta__head{ max-width:640px; margin:0 auto; text-align:center }
.meta__eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:16px; padding:5px 12px;
  border-radius:999px;
  background:rgba(24,119,242,.1);
  box-shadow:0 0 0 1px rgba(24,119,242,.24) inset;
  font-size:10px; font-weight:800; letter-spacing:.12em;
  color:#1877F2;
}
.meta__eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:#1877F2 }

.meta__head h2{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:700; line-height:1.16; letter-spacing:-.032em;
}
.meta__head h2 em{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  color:var(--brand); font-size:1.05em; letter-spacing:-.005em;
}
.meta__lead{
  margin-top:14px;
  font-size:12.5px; line-height:1.75; font-weight:500;
  color:var(--ink-soft);
}
.meta__lead b{ color:var(--brand); font-weight:700 }

/* ---------- bandeau de KPI ---------- */
.meta__kpis{
  margin:34px auto 0; max-width:660px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.mkpi{
  padding:18px 16px 16px;
  border-radius:16px;
  background:#FBFAF7;
  box-shadow:0 0 0 1px #E9E7E1 inset, 0 12px 26px -20px rgba(15,25,20,.3);
  text-align:center;
}
.mkpi b{
  display:block;
  font-family:var(--font-mono);
  font-size:24px; font-weight:600; letter-spacing:-.01em; line-height:1.05;
  font-variant-numeric:tabular-nums;
  color:var(--brand);
}
.mkpi i{
  display:block; margin-top:7px; font-style:normal;
  font-size:9px; font-weight:700; letter-spacing:.1em;
  color:var(--ink-mute);
}

/* ---------- les deux dashboards ---------- */
.meta__shots{
  margin-top:40px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.mshot{
  position:relative;
  border-radius:16px; overflow:hidden;
  background:#F1EFEA;
  box-shadow:0 0 0 1px #E6E3DC inset, 0 20px 44px -26px rgba(15,25,20,.4);
  transition:transform .6s var(--ease-out), box-shadow .6s ease;
}
.mshot:hover{
  transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(24,119,242,.35) inset, 0 30px 52px -26px rgba(24,119,242,.4);
}
.mshot__chrome{ display:flex; gap:6px; padding:11px 13px; background:#EDEBE5 }
.mshot__chrome span{ width:9px; height:9px; border-radius:50%; background:#D6D3CB }
.mshot__frame{ position:relative; overflow:hidden }
.mshot__frame img{ width:100%; display:block }
.mshot__frame::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(104deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform:translateX(-120%);
}
.mshot:hover .mshot__frame::after{
  transform:translateX(120%);
  transition:transform 1.1s cubic-bezier(.32,.66,.28,1);
}
.mshot__tag{
  position:absolute; z-index:3; left:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px #E4E1DA inset, 0 4px 10px rgba(15,25,20,.12);
  backdrop-filter:blur(4px);
  font-size:9.5px; font-weight:700; letter-spacing:.02em; color:#2c3630;
}
.mshot__tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:#1877F2 }

.meta__note{
  margin:22px auto 0; max-width:660px; text-align:center;
  font-size:10.5px; line-height:1.6; color:var(--ink-mute);
}

/* ---------- mockup mobile en bas ----------
   Affiché uniquement sur mobile. La section s'agrandit en hauteur
   pour l'accueillir, et le bas du téléphone est volontairement
   rogné par overflow:hidden : aucune bordure d'image visible.
   Un masque fond les côtés et le haut dans le fond de section. */
.meta__phone{
  position:relative; z-index:2;
  margin-top:34px;
  height:240px;                    /* zone visible ; le reste sort du cadre */
  display:none;                    /* mobile uniquement (activé plus bas) */
  overflow:hidden;
}
.meta__phone img{
  position:absolute; left:50%; top:14px;
  width:230px;
  transform:translateX(-50%);
  /* les bords de l'image se fondent dans le fond : pas de rectangle visible */
  -webkit-mask-image:radial-gradient(120% 96% at 50% 42%, #000 62%, transparent 82%);
          mask-image:radial-gradient(120% 96% at 50% 42%, #000 62%, transparent 82%);
  animation:phone-sway 6s ease-in-out infinite;
}
@keyframes phone-sway{
  0%,100%{ transform:translateX(calc(-50% - 13px)) rotate(-2.5deg) }
  50%    { transform:translateX(calc(-50% + 13px)) rotate(2.5deg) }
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .meta{ padding-top:56px }
  .meta__shots{ grid-template-columns:1fr; gap:14px }
  .meta__phone{ display:block }
  /* on ne garde que les 2 icônes hautes : les basses tombaient sur les dashboards */
  .meta__icon--2, .meta__icon--4{ display:none }
  .meta__icon--1{ width:56px; top:2%; left:3% }
  .meta__icon--3{ width:64px; top:1%; right:4% }
}
@media (max-width:640px){
  .meta__inner{ padding-inline:16px }
  .meta__lead{ font-size:12px }
  .meta__kpis{ gap:9px }
  .mkpi{ padding:14px 10px 13px }
  .mkpi b{ font-size:19px }
  .mkpi i{ font-size:8px; letter-spacing:.07em }
  .meta__phone{ height:210px }
  .meta__phone img{ width:198px }
}

@media (prefers-reduced-motion:reduce){
  .meta__icon, .meta__phone img{ animation:none }
}