/* ============================================================
   SECTION 2 — LES RÉGIES (Meta Ads / Google Ads)
   ============================================================ */

.regies{
  padding:64px 46px 60px;
  background:var(--panel);
  --grain-opacity:.22;
}

.regies__head{ max-width:600px; margin:0 auto; text-align:center }
.regies__head h2{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:700; line-height:1.16; letter-spacing:-.032em;
}
.regies__head h2 em{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  color:var(--brand); font-size:1.05em; letter-spacing:-.005em;
}
.regies__head p{
  margin-top:14px;
  font-size:12.5px; line-height:1.75; font-weight:500;
  color:var(--ink-soft);
}

.regies__grid{
  margin-top:52px;
  display:grid;
  grid-template-columns:1fr 1px 1fr;   /* la colonne de 1px est le filet séparateur */
}
.regies__sep{
  background:linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

.regie-card{
  display:block; padding:0 34px;
  color:inherit; text-decoration:none; cursor:pointer;
  transition:transform .55s var(--ease-out);
}
/* Spécificité volontairement à 3 classes : .reveal.in impose transform:none
   et écraserait un simple .regie-card:hover (même poids, déclaré après). */
/* la carte n'est plus un lien : le hover reste subtil */

.regie-card__media{
  position:relative;
  aspect-ratio:3/2; border-radius:var(--radius-card);
  background:#eeece8; overflow:hidden;
  box-shadow:0 14px 30px -16px rgba(15,20,17,.35);
  transition:box-shadow .55s var(--ease-out);
}
.regie-card:hover .regie-card__media{
  box-shadow:0 30px 52px -22px rgba(9,73,47,.45);
}
.regie-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease-out), filter .55s ease;
}
.regie-card:hover .regie-card__media img{
  transform:scale(1.065);
  filter:saturate(1.06) contrast(1.02);
}

/* reflet qui balaie l'image */
.regie-card__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(102deg, transparent 34%, rgba(255,255,255,.42) 48%, transparent 64%);
  transform:translateX(-115%);
}
.regie-card:hover .regie-card__media::after{
  transform:translateX(115%);
  transition:transform .95s cubic-bezier(.32,.66,.28,1);
}

/* liseré vert qui se dessine à l'intérieur du cadre */
.regie-card__media::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:var(--radius-card);
  box-shadow:0 0 0 0 rgba(62,207,142,0) inset;
  transition:box-shadow .5s ease;
}
.regie-card:hover .regie-card__media::before{
  box-shadow:0 0 0 2px rgba(62,207,142,.55) inset;
}

.regie-card h3{
  display:flex; align-items:center; gap:12px;
  margin-top:24px;
  font-size:clamp(21px, 2.2vw, 27px);
  font-weight:700; letter-spacing:-.03em;
  transition:color .4s ease;
}
.regie-card:hover h3{ color:var(--brand) }

.regie-card__arrow{
  display:inline-grid; place-items:center; flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  background:rgba(9,73,47,.07); color:#1a1d1b;
  transition:transform .4s var(--ease-spring), background .4s ease, color .4s ease, box-shadow .4s ease;
}
.regie-card__arrow svg{ width:17px; height:17px }
.regie-card:hover .regie-card__arrow{
  transform:translateX(9px);
  background:var(--brand); color:#fff;
  box-shadow:0 8px 18px -8px rgba(9,73,47,.65);
}

.regie-card > p{
  max-width:34ch; margin-top:10px;
  font-size:12px; line-height:1.72; font-weight:500;
  color:var(--ink-mute);
  transition:color .4s ease;
}
.regie-card:hover > p{ color:#5f645d }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .regies{ padding:48px 26px 44px; border-radius:24px }
  .regies__grid{
    grid-template-columns:1fr;
    gap:36px; margin-top:38px;
    justify-items:center;
  }
  .regie-card{ width:100%; max-width:480px; padding:0 }
  .regies__sep{
    width:100%; height:1px;
    background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  }
}

@media (max-width:640px){
  .regies{ padding:40px 16px 36px; border-radius:22px }
  .regies__head p{ font-size:11.5px }
  .regie-card h3{ margin-top:18px }
}


/* ---------- CTA « Parlons chiffres » (lien souligné, PAS un bouton) ---------- */
.regie-card__cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px;
  font-size:13px; font-weight:700; letter-spacing:-.01em;
  color:var(--brand); text-decoration:none;
  position:relative;
}
.regie-card__cta::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:100%; height:2px; background:var(--brand-soft);
  transform:scaleX(1); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.regie-card__cta span{
  display:inline-grid; place-items:center; width:18px; height:18px;
  transition:transform .35s var(--ease-spring);
}
.regie-card__cta span svg{ width:15px; height:15px }
.regie-card__cta:hover::after{ transform:scaleX(1.06) }
.regie-card__cta:hover span{ transform:translateX(5px) }