/* ===========================
   Widget Grille Réalisation
   =========================== */

.custom-realisation-grid{
  display:flex; flex-wrap:wrap; gap:30px; justify-content:flex-start;
}

/* ---- Carte générique ---- */
.realisation-card{
  width:100%;
  max-width:300px;
  transition:transform .3s ease;
  overflow:hidden !important; /* clippe image/overlay */
}
.realisation-card:hover{ transform:translateY(-5px); }

/* ------- Carte classique ------- */
.realisation-image{ position:relative; }
.realisation-image img{ width:100%; height:auto; display:block; }

.realisation-category{
  position:absolute; bottom:10px; left:10px;
  background:#f76b1c; color:#fff; padding:5px 12px;
  border-radius:999px; font-size:12px; font-weight:500;
}

.realisation-content{ padding:15px 10px; }
.realisation-content h3{ font-size:16px; font-weight:600; margin:10px 0 15px; }
.realisation-content h3 a{ color:#002d55; text-decoration:none; }
.realisation-link{
  color:#f76b1c; font-weight:500; font-size:14px;
  text-decoration:none; padding-bottom:3px; display:inline-block;
}

/* ------- Variante : image de fond + overlay ------- */
.real-card--overlay{
  position:relative;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  min-height:280px; display:block; color:inherit;
  overflow:hidden !important;
}

/* ⚠️ PAS de couleur ici : Elementor la mettra au hover/focus via le contrôle "Fond de l’overlay" */
.real-card--overlay .overlay{
  position:relative; display:block; width:100%; height:100%; text-decoration:none;
  transition:background-color .25s ease, transform .25s ease;
  border-radius:inherit !important;
}

.real-card--overlay .overlay-inner{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:.5rem; padding:20px;
}

.real-card--overlay h3{ margin:0; font-size:18px; line-height:1.25; color:#fff; }
.real-card--overlay .realisation-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:#fff; text-decoration:none; }
.real-card--overlay .realisation-icon{ width:16px; height:16px; display:inline-block; }

.real-card--overlay .realisation-category{
  position:absolute; top:12px; left:12px; padding:6px 12px;
  background:#f76b1c; color:#fff; border-radius:999px; font-size:12px; font-weight:600;
}

/* Apparition douce du contenu */
.real-card--overlay .overlay-inner,
.real-card--overlay .realisation-category{
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.real-card--overlay:hover .overlay-inner,
.real-card--overlay:hover .realisation-category,
.real-card--overlay .overlay:focus-visible .overlay-inner,
.real-card--overlay .overlay:focus-visible .realisation-category{
  opacity:1; transform:translateY(0);
}
.real-card--overlay .overlay:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Icône overlay (inchangé) */
.real-card--overlay .real-overlay-icon{
  position:absolute; z-index:2; display:inline-block;
  width:44px; height:44px; opacity:0; transition:opacity .25s ease, transform .25s ease;
  --ovicon-off-top: 12px; --ovicon-off-right: 12px; --ovicon-off-bottom: 12px; --ovicon-off-left: 12px;
  --ovicon-pad: 6px;
  --ovicon-mar-top: 8px; --ovicon-mar-right: 8px; --ovicon-mar-bottom: 8px; --ovicon-mar-left: 8px;
}
.real-card--overlay .real-overlay-icon::before{
  content:""; position:absolute; inset:0; background:#fff; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.12); z-index:0;
}
.real-card--overlay .real-overlay-icon::after{
  content:""; position:absolute; inset:var(--ovicon-pad); background-color:#000;
  -webkit-mask-image:var(--ovicon-url); mask-image:var(--ovicon-url);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; z-index:1;
}
.real-card--overlay:hover .real-overlay-icon,
.real-card--overlay .overlay:focus-visible .real-overlay-icon{ opacity:1; }

/* Positions de l’icône (idem) */
.real-card--overlay .real-overlay-icon.pos-top-left{ top:calc(var(--ovicon-off-top) + var(--ovicon-mar-top)); left:calc(var(--ovicon-off-left) + var(--ovicon-mar-left)); }
.real-card--overlay .real-overlay-icon.pos-top-center{ top:calc(var(--ovicon-off-top) + var(--ovicon-mar-top)); left:50%; transform:translateX(-50%); }
.real-card--overlay .real-overlay-icon.pos-top-right{ top:calc(var(--ovicon-off-top) + var(--ovicon-mar-top)); right:calc(var(--ovicon-off-right) + var(--ovicon-mar-right)); }
.real-card--overlay .real-overlay-icon.pos-center-left{ top:50%; left:calc(var(--ovicon-off-left) + var(--ovicon-mar-left)); transform:translateY(-50%); }
.real-card--overlay .real-overlay-icon.pos-center{ top:50%; left:50%; transform:translate(-50%,-50%); }
.real-card--overlay .real-overlay-icon.pos-center-right{ top:50%; right:calc(var(--ovicon-off-right) + var(--ovicon-mar-right)); transform:translateY(-50%); }
.real-card--overlay .real-overlay-icon.pos-bottom-left{ bottom:calc(var(--ovicon-off-bottom) + var(--ovicon-mar-bottom)); left:calc(var(--ovicon-off-left) + var(--ovicon-mar-left)); }
.real-card--overlay .real-overlay-icon.pos-bottom-center{ bottom:calc(var(--ovicon-off-bottom) + var(--ovicon-mar-bottom)); left:50%; transform:translateX(-50%); }
.real-card--overlay .real-overlay-icon.pos-bottom-right{ bottom:calc(var(--ovicon-off-bottom) + var(--ovicon-mar-bottom)); right:calc(var(--ovicon-off-right) + var(--ovicon-mar-right)); }

/* Tactile : contenu visible */
@media (hover:none) and (pointer:coarse){
  .real-card--overlay .overlay-inner,
  .real-card--overlay .realisation-category,
  .real-card--overlay .real-overlay-icon{ opacity:1; transform:none; }
}