/* ============================================================
   DealFabric DS — Composant · Médias, placeholders, animation
   Les maquettes portent des zones grises assumées (.ph, .z) en
   attente des visuels. Elles restent dans le système : tant
   qu une image manque, le bloc garde son volume.
   ============================================================ */

/* ---------- Zone visuelle en attente ---------- */
#top .df .df-ph{
  display:flex;
  align-items:flex-end;
  border-radius:var(--df-r-md);
  background:var(--df-obj);
  min-height:120px;
}
#top .df .df-ph__t{
  font-size:var(--df-eyebrow);
  letter-spacing:.06em;
  line-height:1.5;
  padding:14px 16px;
  max-width:340px;
  color:var(--df-grey);
}
#top .df .df-ph-sm{ min-height:88px; }
#top .df .df-ph-md{ min-height:200px; border-radius:var(--df-r-lg); }
#top .df .df-ph-lg{ min-height:320px; border-radius:var(--df-r-lg); }
#top .df .df-ph-xl{ min-height:430px; border-radius:var(--df-r-lg); }
#top .df .df-ph-flat{ background:var(--df-grey-bg); }

/* Sur fond sombre, le degrade clair jure. Rien a faire ici : le
   placeholder lit --df-obj, que chaque contexte sombre remappe sur
   sa propre teinte de carte. Cette regle-ci existait avant, ecrite
   « .df .df-night .df-ph » — elle demandait que df-night soit
   DESCENDANT de df, alors que les deux classes sont posees sur la
   meme Color Section. Elle ne s appliquait jamais. */
#top .df .df-ph__t{ color:var(--df-ink-2); }

/* ============================================================
   df-img-obj — l objet chrome sur son fond clair
   ------------------------------------------------------------
   Le motif des cartes de la page d accueil : un PNG detoure,
   agrandi jusqu a deborder, que le cadre recoupe. Le fond est un
   degrade clair qui court du blanc en haut a gauche vers le bleu
   pale en bas a droite.

     Colonne  df-img-obj   (element Image d Enfold)

   Le PNG doit avoir un FOND TRANSPARENT : c est le degrade qui
   fait l arriere-plan. Un JPG le masquerait entierement.

   Le recadrage vient de « object-fit:cover » : l image remplit le
   cadre et ce qui depasse est coupe. --df-img-obj-zoom l agrandit
   au-dela, pour retrouver le cadrage serre de la maquette.

   Reglages, a poser sur la colonne :
     --df-img-obj-ratio  proportions du cadre  (defaut 16 / 11)
     --df-img-obj-zoom   agrandissement        (defaut 1.2)
     --df-img-obj-rot    inclinaison           (defaut -12deg)
     --df-img-obj-pos    point de cadrage      (defaut center)
     --df-img-obj-fond   le degrade lui-meme

   L inclinaison fait pivoter l objet dans son cadre, qui reste
   droit. L agrandissement compense le vide que la rotation
   creuserait aux angles : baisser l un sans baisser l autre
   laisse apparaitre le degrade dans les coins.
   ============================================================ */

#top .df .df-img-obj{
  border-radius:var(--df-r-lg);
  overflow:hidden;
  background:var(--df-img-obj-fond,
    linear-gradient(110deg, #FFFFFF -0.01%, #FBFCFD 42.01%, #EDF4F9 85.02%));
}
#top .df .df-img-obj img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--df-img-obj-ratio, 16 / 11);
  object-fit:cover;
  object-position:var(--df-img-obj-pos, center);
  transform:rotate(var(--df-img-obj-rot, -12deg))
            scale(var(--df-img-obj-zoom, 1.2));
  border-radius:0;
}

/* Meme neutralisation que pour df-card-visual : l element Image
   d Enfold empile trois boites, dont une en inline-block qui se
   retracte a la largeur du fichier. Sans ca, l image ne remplit
   pas le cadre. */
#top .df .df-img-obj.avia-image-container{ max-width:none; margin-bottom:0; }
#top .df .df-img-obj .avia-image-container-inner,
#top .df .df-img-obj .avia-image-overlay-wrap,
#top .df .df-img-obj a.avia_image{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
}


/* ---------- Image réelle, une fois livrée ---------- */
#top .df .df-img{
  width:100%;
  border-radius:var(--df-r-md);
  overflow:hidden;
}
#top .df .df-img-lg{ border-radius:var(--df-r-lg); }
#top .df .df-img img{ width:100%; height:auto; display:block; }

/* Rapports imposés, pour que la page ne saute pas au chargement */
#top .df .df-ratio-16-9{ aspect-ratio:16/9; }
#top .df .df-ratio-4-3 { aspect-ratio:4/3; }
#top .df .df-ratio-1-1 { aspect-ratio:1/1; }
#top .df .df-ratio-16-9 img,
#top .df .df-ratio-4-3 img,
#top .df .df-ratio-1-1 img{ height:100%; object-fit:cover; }

/* ---------- Icône encadrée ---------- */
#top .df .df-ic{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--df-line);
  border-radius:var(--df-r-sm);
  margin-bottom:18px;
}
#top .df .df-ic svg{ width:16px; height:16px; fill:var(--df-ink); }
#top .df-night .df-ic svg{ fill:var(--df-n-text); }

/* ---------- Apparition au défilement ----------
   Piloté par js/df-reveal.js.
   L état masqué n existe que sous html.df-js, classe posée par
   JavaScript en tête de <head> (voir php/dealfabric-ds.php).
   Sans JavaScript, ou en mouvement réduit, le contenu est visible :
   jamais de blocage à opacité zéro. */
html.df-js #top .df .df-rv{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s var(--df-ease), transform .8s var(--df-ease);
}
html.df-js #top .df .df-rv.df-rv--in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html.df-js #top .df .df-rv{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* ============================================================
   df-visual — bandeau illustre : degrade en CSS, PNG par-dessus
   ------------------------------------------------------------
   A poser sur l element IMAGE (Enfold place la classe sur
   .avia-image-container).

   Pourquoi ne pas exporter le tout en JPG depuis Figma : le
   degrade y est aplati avec l illustration, et la compression
   JPEG detruit les degrades doux du rendu chrome — d ou les
   aplats et le bruit. En separant les deux couches, le degrade
   reste vectoriel et le PNG garde son alpha et sa finesse.

   Figma sort quelque chose comme :
     background: url(...) 183px 34px / 64% 241% no-repeat,
                 linear-gradient(85deg, #FFF, #F6F9FC, #EDF4F9);
   Les valeurs absolues n y survivraient pas au responsive : on
   garde la meme intention en pourcentages, et le PNG reste un
   element Image, donc remplacable depuis la mediatheque.

   Reglages :
     --df-visual-height  hauteur du bandeau       (defaut 132px)
     --df-visual-h       hauteur du PNG           (defaut 250%)
     --df-visual-x       debord a droite          (defaut -8%)
     --df-visual-y       decalage vertical        (defaut 80%)
     --df-visual-rot     rotation du PNG          (defaut 0)
     --df-visual-bg      le degrade

   Hauteur FIXE et non aspect-ratio : le bandeau doit mesurer la
   meme chose dans une carte large ou etroite, sinon deux cartes
   cote a cote n auraient pas la meme hauteur d illustration.
   ============================================================ */

#top .df .df-visual{
  position:relative;
  overflow:hidden;
  border-radius:var(--df-r-md);
  height:var(--df-visual-height, 132px);
  background:var(--df-visual-bg,
    linear-gradient(85deg, #FFFFFF 0%, #F6F9FC 34.58%, #EDF4F9 69.16%));
  margin:0;
}

/* Enfold empile deux conteneurs entre la classe et le <img> */
#top .df .df-visual .avia-image-container-inner,
#top .df .df-visual .avia-image-overlay-wrap{
  height:100%;
  width:100%;
  margin:0;
}

#top .df .df-visual img{
  position:absolute;
  top:var(--df-visual-y, 80%);
  right:var(--df-visual-x, -8%);
  transform:translateY(-50%) rotate(var(--df-visual-rot, 0deg));
  height:var(--df-visual-h, 250%);
  width:auto;
  max-width:none;
  margin:0;
  border-radius:0;
}

/* Inclinaisons. La rotation part du centre de l image : combinee
   au debord, elle fait pointer la fleche vers le haut sans sortir
   du cadre. */
#top .df .df-visual-tilt img{  --df-visual-rot:-17deg; }
#top .df .df-visual-tilt-2 img{ --df-visual-rot:-22deg; }
#top .df .df-visual-tilt-down img{ --df-visual-rot:12deg; }

/* Illustration a gauche plutot qu a droite */
#top .df .df-visual-left img{
  right:auto;
  left:var(--df-visual-x, -8%);
}

/* Variante sombre — pour un bandeau dans une section nuit */
#top .df .df-visual-night{
  --df-visual-bg:linear-gradient(85deg, #0E1621 0%, #0B1E33 46%, #173A5E 100%);
}

@media (max-width:700px){
  #top .df .df-visual{ height:var(--df-visual-height-sm, 110px); }
}