.elementor-9701 .elementor-element.elementor-element-7a93e8a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:54px;--padding-bottom:54px;--padding-left:54px;--padding-right:54px;}.elementor-9701 .elementor-element.elementor-element-7a93e8a.e-con{--align-self:center;}.elementor-9701 .elementor-element.elementor-element-2b33f83{--display:flex;}.elementor-9701 .elementor-element.elementor-element-740ab24.elementor-element{--align-self:center;}.elementor-9701 .elementor-element.elementor-element-7b69e44{text-align:center;}.elementor-9701 .elementor-element.elementor-element-7b69e44 .elementor-heading-title{font-size:50px;}.elementor-9701 .elementor-element.elementor-element-5d8d186{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-9701 .elementor-element.elementor-element-a50490e{--grid-row-gap:100px;--grid-column-gap:100px;}.elementor-9701 .elementor-element.elementor-element-a50490e > .elementor-widget-container{padding:8px 8px 8px 8px;}.elementor-9701 .elementor-element.elementor-element-a50490e .elementor-post__thumbnail__link{width:100%;}.elementor-9701 .elementor-element.elementor-element-a50490e .elementor-post__meta-data span + span:before{content:"•";}.elementor-9701 .elementor-element.elementor-element-a50490e .elementor-post__text{margin-top:20px;}.elementor-9701 .elementor-element.elementor-element-a50490e .elementor-post__badge{right:0;}.elementor-9701 .elementor-element.elementor-element-a50490e .elementor-post__card .elementor-post__badge{margin:20px;}.elementor-9701 .elementor-element.elementor-element-a50490e .elementor-pagination{text-align:center;margin-top:0px;}body:not(.rtl) .elementor-9701 .elementor-element.elementor-element-a50490e .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-9701 .elementor-element.elementor-element-a50490e .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-9701 .elementor-element.elementor-element-a50490e .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-9701 .elementor-element.elementor-element-a50490e .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}@media(max-width:767px){.elementor-9701 .elementor-element.elementor-element-a50490e .elementor-post__thumbnail__link{width:100%;}}@media(min-width:768px){.elementor-9701 .elementor-element.elementor-element-7a93e8a{--content-width:1600px;}}/* Start custom CSS for heading, class: .elementor-element-7b69e44 */.neon-gradient {
  background: linear-gradient(90deg, #ff7448, #ff4848, #6248ff, #ff7448);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  animation: neonMove 4s linear infinite;
  font-weight: inherit; /* garde ta police et son poids */
}

@keyframes neonMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for archive-posts, class: .elementor-element-a50490e *//* =======================================================
   BLOG CARDS – Elementor (appliquer la classe : blog-cards)
   ======================================================= */

.blog-cards{
  --radius: 18px;
  --radius-btn: 12px;
  --border: #E7ECF2;
  --shade: 0 8px 18px rgba(15,17,21,.06), 0 2px 6px rgba(15,17,21,.05);
  --shade-hover: 0 12px 24px rgba(15,17,21,.08), 0 4px 10px rgba(15,17,21,.06);

  --ink: #0f1115;        /* titres */
  --muted: #5B616E;      /* extrait */
  --muted-2: #7A808B;    /* méta */
  --panel: #F1F4F8;      /* fond image si vide */

  --brand: #F76332;      /* orange agence */
  --seo: #6248FF;        /* violet SEO */
  --design: #E63946;     /* rouge Design */
}

/* -------- Carte -------- */
.blog-cards .elementor-post{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shade);
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-cards .elementor-post:hover{
  transform:translateY(-4px);
  box-shadow:var(--shade-hover);
}

/* =======================================================
   IMAGE – robuste pour toutes structures Elementor
   ======================================================= */
.blog-cards .elementor-post__thumbnail{
  position:relative;
  background:var(--panel);
  aspect-ratio: 16 / 9;          /* ← change ici (ex: 2/1, 4/3) */
  overflow:hidden;
}

/* si Elementor met un <a> autour */
.blog-cards .elementor-post__thumbnail__link{
  position:absolute; inset:0; display:block;
}

/* couvre 100% (img direct, picture, etc.) */
.blog-cards .elementor-post__thumbnail img,
.blog-cards .elementor-post__thumbnail picture,
.blog-cards .elementor-post__thumbnail picture img,
.blog-cards .elementor-post__thumbnail__link img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

/* fallback si wrapper interne injecté */
.blog-cards .elementor-post__thumbnail > *{
  position:absolute; inset:0;
}

/* zoom doux au hover */
.blog-cards .elementor-post:hover .elementor-post__thumbnail img{
  transform:scale(1.02);
}

/* =======================================================
   BADGE CATEGORIE – coin haut gauche de l’image
   ======================================================= */
.blog-cards .elementor-post__thumbnail,
.blog-cards .elementor-post__thumbnail__link{ position:relative; }

.blog-cards .elementor-post__terms,
.blog-cards .elementor-post__badge{
  position:absolute !important;
  top:16px !important; left:16px !important;
  right:auto !important; bottom:auto !important;
  z-index:3;
  display:inline-flex; gap:8px; flex-wrap:wrap;
}

.blog-cards .elementor-post__terms a,
.blog-cards .elementor-post__badge{
  background:#111; color:#fff !important; text-decoration:none !important;
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* Couleurs par slug WordPress (ajuste selon tes catégories) */
.blog-cards .elementor-post.category-marketing .elementor-post__terms a,
.blog-cards .elementor-post.category-marketing-digital .elementor-post__terms a,
.blog-cards .elementor-post.category-digital .elementor-post__terms a,
.blog-cards .elementor-post.category-marketing .elementor-post__badge,
.blog-cards .elementor-post.category-marketing-digital .elementor-post__badge,
.blog-cards .elementor-post.category-digital .elementor-post__badge{ background:var(--brand); }

.blog-cards .elementor-post.category-seo .elementor-post__terms a,
.blog-cards .elementor-post.category-seo .elementor-post__badge{ background:var(--seo); }

.blog-cards .elementor-post.category-design .elementor-post__terms a,
.blog-cards .elementor-post.category-ux .elementor-post__terms a,
.blog-cards .elementor-post.category-ui .elementor-post__terms a,
.blog-cards .elementor-post.category-design .elementor-post__badge{ background:var(--design); }

/* =======================================================
   CONTENU
   ======================================================= */
.blog-cards .elementor-post__text{ padding:28px; }

.blog-cards .elementor-post__title{
  margin:0 0 12px; color:var(--ink); font-weight:800; line-height:1.25;
  font-size:26px; letter-spacing:-.2px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* Hover titre corrigé → change juste en orange, sans réduire */
.blog-cards .elementor-post__title a,
.blog-cards .elementor-post__title a:visited{
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color .25s ease;
}
.blog-cards .elementor-post__title a:hover,
.blog-cards .elementor-post__title a:focus-visible{
  color: var(--brand) !important;   /* orange au hover */
  text-decoration: none !important;
  transform: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.blog-cards .elementor-post__excerpt{
  margin:0 0 18px; color:var(--muted); font-size:15px; line-height:1.65;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}

/* Méta (auteur + date) */
.blog-cards .elementor-post__meta-data{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  color:var(--muted-2); font-size:14px; margin-bottom:14px;
}
.blog-cards .elementor-post__meta-data > span{ display:inline-flex; gap:8px; align-items:center; }
.blog-cards .elementor-post__meta-data .elementor-post-author:before{content:"👤"; font-size:16px;}
.blog-cards .elementor-post__meta-data .elementor-post-date:before{content:"📅"; font-size:16px;}

/* =======================================================
   BOUTON – ghost par défaut, orange plein au hover
   ======================================================= */
.blog-cards .elementor-post__read-more{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 18px;
  border:1px solid var(--border); border-radius:var(--radius-btn);
  font-weight:700; font-size:15px;
  color:var(--ink); background:#fff; text-decoration:none !important;
  transition:all .25s ease;
}
.blog-cards .elementor-post__read-more:after{
  content:"→"; transition:transform .25s ease;
}
.blog-cards .elementor-post__read-more:hover{
  color:#fff; background:var(--brand); border-color:var(--brand);
}
.blog-cards .elementor-post__read-more:hover:after{
  transform:translateX(3px); color:#fff;
}

/* =======================================================
   GRILLE & RESPONSIVE
   ======================================================= */
.blog-cards .elementor-posts-container{ gap:28px !important; }

@media (max-width:1024px){
  .blog-cards .elementor-post__title{ font-size:24px; }
  .blog-cards .elementor-post__thumbnail{ aspect-ratio: 2 / 1; } /* ratio un peu plus large sur tablette */
}
@media (max-width:640px){
  .blog-cards .elementor-post__title{ font-size:20px; }
  .blog-cards .elementor-post__excerpt{ font-size:14px; }
  .blog-cards .elementor-post__thumbnail{ aspect-ratio: 16 / 10; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5d8d186 *//* HERO : fond bleu ciel très doux */
.ry-gradient-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* garantit que ::before passe au-dessus du fond */
  background: linear-gradient(180deg, #f7fbff 0%, #e6f0ff 100%); /* base plus bleutée */
}

/* Halos bleu ciel (plus présents) */
.ry-gradient-bg::before {
  content: "";
  position: absolute;
  inset: -22%;
  background:
    /* bleu > coin haut-droit */
    radial-gradient(1300px 900px at 86% 12%, rgba(74, 118, 255, 0.20) 0%, transparent 60%),
    /* bleu clair > bas-droit */
    radial-gradient(1050px 760px at 80% 84%, rgba(140, 180, 255, 0.16) 0%, transparent 62%),
    /* bleu très pâle > haut-gauche */
    radial-gradient(950px 700px at 18% 14%, rgba(190, 212, 255, 0.14) 0%, transparent 58%);
  filter: blur(52px);
  pointer-events: none;
  z-index: 0;
}

/* Contenu au-dessus */
.ry-gradient-bg > * { position: relative; z-index: 1; }

/* Si Elementor masque le fond avec un overlay, on le neutralise */
.ry-gradient-bg > .elementor-background-overlay {
  background: transparent !important;
  opacity: 0 !important;
}

/* Ajuste la force du bleu si besoin :
   monte 0.20/0.16/0.14 -> 0.24 pour plus visible, ou baisse pour adoucir. *//* End custom CSS */