/* ======================================================
   Iliade Digital — Front Page (Premium Site Map)
   File: assets/css/front-page.css
   Depends: variables.css + styles.css (globals)
   ====================================================== */

/* ======================================================
   HERO
   ====================================================== */

.il-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% 25%, rgba(23,160,81,.14), transparent 60%),
    radial-gradient(900px 420px at 80% 30%, rgba(47,128,237,.10), transparent 60%),
    linear-gradient(var(--white, #fff), var(--white, #fff));
  border-bottom: 1px solid var(--line, #E6E8EE);
}

/* IMPORTANT: overlay du hero TOUJOURS derrière le contenu */
.il-hero::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: var(--hero-bg, linear-gradient(135deg, rgba(23,160,81,.12), rgba(16,19,35,0) 55%));
  pointer-events:none;
  z-index: 0;
}

/* Contenu au-dessus de l’overlay */
.il-hero__grid{
  position: relative;
  z-index: 1;
  padding-block: clamp(34px, 5vw, 74px);
  display:grid;
  gap: clamp(18px, 3vw, 32px);
}

@media (min-width: 980px){
  .il-hero__grid{
    grid-template-columns: 1.1fr .9fr;
    align-items:center;
  }
}

.il-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  font-family: var(--font-head, inherit);
  color: var(--brand-green, #17A051);
  margin: 0 0 10px;
}
.il-kicker::before{
  content:"";
  width: 26px;
  height: 10px;
  border-radius: 999px;
  background: rgba(23,160,81,.18);
  border: 1px solid var(--alpha-brand-22, rgba(23,160,81,.22));
}

.il-hero__lead{
  font-size: clamp(16px, 1.35vw, 18px);
  color: var(--muted, #666672);
  max-width: 62ch;
}

.il-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 18px;
}

.il-hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}

.il-badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--line, #E6E8EE);
  background: rgba(255,255,255,.70);
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: var(--shadow-sm, 0 10px 24px rgba(16,19,35,.08));
}
.il-badge__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-green, #17A051);
  box-shadow: 0 0 0 5px rgba(23,160,81,.16);
}
.il-badge__muted{
  color: var(--muted, #666672);
  font-weight: 600;
}

/* Right mock panel */
.il-hero__media{
  display:flex;
  justify-content:center;
}

.il-hero__panel{
  position: relative;
  width: min(520px, 100%);
  border-radius: var(--r-18, 18px);
  border: 1px solid var(--line, #E6E8EE);
  background: var(--panel-bg, rgba(255,255,255,.72));
  box-shadow: var(--shadow-md, 0 14px 34px rgba(16,19,35,.12));
  overflow:hidden;
}

.il-hero__panelTop{
  position: relative;
  z-index: 4;
  display:flex;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--line, #E6E8EE);
  background: var(--alpha-ink-03, rgba(16,19,35,.03));
}

.il-pill{
  display:inline-flex;
  align-items:center;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-green, #17A051);
  color: var(--white, #fff);
  font-weight: 800;
  font-family: var(--font-head, inherit);
  font-size: 13px;
}
.il-pill--soft{
  background: var(--pill-soft-bg, rgba(23,160,81,.10));
  color: var(--brand-green, #17A051);
  border: 1px solid var(--pill-soft-brd, rgba(23,160,81,.18));
}

.il-hero__mock{
  position: relative;
  z-index: 1;
  padding: 16px;
  display:grid;
  gap: 12px;
}

/* Les “3 petites barres” */
.il-hero__mockLine{
  position: relative;
  z-index: 3;
  height: 12px;
  border-radius: 999px;
  background: var(--alpha-ink-06, rgba(16,19,35,.06));
}
.il-hero__mockLine:nth-child(2){ width: 88%; }
.il-hero__mockLine:nth-child(3){ width: 72%; }

/* Chart container */
.il-hero__mockChart{
  position: relative;
  z-index: 1;
  height: 160px;
  border-radius: var(--r-16, 16px);
  border: 1px solid var(--alpha-ink-08, rgba(16,19,35,.08));
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--alpha-brand-10, rgba(23,160,81,.10)), rgba(23,160,81,0)),
    repeating-linear-gradient(90deg, var(--alpha-ink-06, rgba(16,19,35,.06)) 0 1px, transparent 1px 28px);
}

.il-hero__mockChart::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  opacity: .40;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(16,19,35,.08) 0 1px,
      transparent 1px 32px
    );
}

.il-hero__mockChart svg{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  pointer-events:none;
  z-index: 1;
  background: transparent !important;
}

/* Animation hidden by default */
.il-hero__mockChart .il-chart-area,
.il-hero__mockChart .il-chart-path,
.il-hero__mockChart .il-chart-dots{
  opacity: 0;
}

/* Visible + anim when hero in view */
.il-hero.is-inview .il-hero__mockChart .il-chart-area{
  opacity: 1;
  transition: opacity 420ms var(--ease, cubic-bezier(.2,.8,.2,1));
}
.il-hero.is-inview .il-hero__mockChart .il-chart-dots{
  opacity: 1;
  transition: opacity 420ms var(--ease, cubic-bezier(.2,.8,.2,1));
  transition-delay: 180ms;
}
.il-hero.is-inview .il-hero__mockChart .il-chart-path{
  opacity: 1;
  transition: stroke-dashoffset 900ms var(--ease, cubic-bezier(.2,.8,.2,1));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .il-hero.is-inview .il-hero__mockChart .il-chart-path{
    transition: none !important;
  }
}

/* Mobile tuning */
@media (max-width: 980px){
  .il-hero__media{ justify-content: stretch; }
  .il-hero__panel{
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  .il-hero__panelTop{ padding: 12px; }
  .il-hero__mock{ padding: 14px; gap: 10px; }
  .il-hero__mockLine{ height: 10px; }
  .il-hero__mockChart{ height: 148px; }
}

@media (max-width: 520px){
  .il-hero__mock{ padding: 12px; gap: 8px; }
  .il-hero__mockChart{ height: 140px; }
}

/* ======================================================
   SECTION HEAD / CARDS HOVER
   ====================================================== */

.il-sectionHead{
  display:grid;
  gap: 6px;
  margin-bottom: 18px;
}

.il-card--hover{
  transition: transform var(--t-med, .25s) var(--ease, cubic-bezier(.2,.8,.2,1)),
              box-shadow var(--t-med, .25s) var(--ease, cubic-bezier(.2,.8,.2,1)),
              border-color var(--t-med, .25s) var(--ease, cubic-bezier(.2,.8,.2,1));
}
.il-card--hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 14px 34px rgba(16,19,35,.12));
  border-color: var(--alpha-brand-25, rgba(23,160,81,.25));
}

/* CTA box */
.il-ctaBox{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: clamp(16px, 3vw, 26px);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E6E8EE);
  border-radius: var(--r-20, 20px);
  box-shadow: var(--shadow-sm, 0 10px 24px rgba(16,19,35,.08));
}
.il-ctaBox__txt{ max-width: 62ch; }
.il-ctaBox__btns{ display:flex; flex-wrap:wrap; gap: 12px; }




/* ======================================================
   HERO BG (image mise en avant)
   ====================================================== */
.il-hero{
  position: relative;
  overflow: hidden;
}

.il-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.il-hero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02); /* évite les bords blancs */
}

/* voile premium pour garder la lisibilité */
.il-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(1000px 500px at 20% 20%, rgba(23,160,81,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.92));
}

/* remet ton contenu au-dessus */
.il-hero .il-container,
.il-hero__grid{
  position: relative;
  z-index: 2;
}




/* ======================================================
   TOOLS MARQUEE — BARRE SEULE (100% JS COMPATIBLE)
   ====================================================== */

.il-tools{
  position: relative;
  padding-block: clamp(22px, 3vw, 40px);
  background: none;
  border: none;
  overflow: hidden;
}

.il-marquee{
  position: relative;
  overflow: hidden;
}

.il-marquee__fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 6vw, 64px);
  z-index: 3;
  pointer-events: none;
}

.il-marquee__fade--l{
  left: 0;
  background: linear-gradient(90deg, var(--bg, #fff), rgba(255,255,255,0));
}

.il-marquee__fade--r{
  right: 0;
  background: linear-gradient(270deg, var(--bg, #fff), rgba(255,255,255,0));
}

.il-marquee__viewport{
  overflow: hidden;
  padding: 14px 8px;
}

/* Track */
[data-il-marquee-track]{
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}

[data-il-marquee-track].is-ready{
  animation: il-marquee var(--il-marquee-speed, 28s) linear infinite;
}

@keyframes il-marquee{
  from { transform: translate3d(0,0,0); }
  to {
    transform: translate3d(calc(-1 * var(--il-marquee-distance, 600px)), 0, 0);
  }
}

@media (hover:hover){
  .il-marquee:hover [data-il-marquee-track].is-ready{
    animation-play-state: paused;
  }
}

/* ======================================================
   ITEM (pill premium)
   ====================================================== */

.il-tool{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* ✅ meilleure régularité quand le nom est masqué */
  min-height: 56px;
  padding: 10px 14px;



  transition:
    transform var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}



/* ======================================================
   ICON (SVG plus gros)
   ====================================================== */

.il-tool__icon{
  width: 44px;   /* ✅ plus gros */
  height: 44px;  /* ✅ plus gros */
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.il-tool__icon img{
  width: 36px;   /* ✅ plus gros */
  height: 36px;  /* ✅ plus gros */
  object-fit: contain;
  display: block;

  /* rendu plus clean sur icônes */
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

/* ======================================================
   NAME (affiché seulement si pas d'image côté PHP)
   ====================================================== */

.il-tool__name{
  font-family: var(--font-head, inherit);
  font-weight: 800;
  font-size: var(--fs-13, 13px);
  letter-spacing: -0.01em;
  color: var(--muted);
  white-space: nowrap;
}

/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 520px){
  .il-marquee__viewport{ padding: 12px 6px; }
  [data-il-marquee-track]{ gap: 10px; }

  .il-tool{
    min-height: 50px;
    padding: 8px 12px;
  }

  .il-tool__icon{
    width: 40px;
    height: 40px;
  }

  .il-tool__icon img{
    width: 32px;
    height: 32px;
  }

  .il-tool__name{
    font-size: 12px;
  }
}

/* ======================================================
   REDUCED MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce){
  [data-il-marquee-track].is-ready{
    animation: none !important;
  }
  [data-il-marquee-track]{
    transform: none !important;
  }
}



/* ======================================================
   CRÉATION (focus premium)
   ====================================================== */

.il-section--creation{
  padding-block: clamp(34px, 5vw, 78px);
  background: var(--bg, #fff);
  border-top: 1px solid var(--line, #E6E8EE);
  border-bottom: 1px solid var(--line, #E6E8EE);
}

.il-creationGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 18px);
  margin-top: 10px;
}

.il-creationCard{
  border-radius: var(--r-18, 18px);
  border: 1px solid var(--line, #E6E8EE);
  background: rgba(255,255,255,.92);
  padding: 18px;
}

.il-creationCard h3{
  margin: 0 0 8px;
  font-family: var(--font-head, inherit);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.il-creationSplit{
  margin-top: clamp(18px, 3vw, 28px);
  display:grid;
  gap: clamp(14px, 2.5vw, 22px);
}

@media (min-width: 980px){
  .il-creationSplit{
    grid-template-columns: 1.05fr .95fr;
    align-items:start;
  }
}

.il-checklist{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}

.il-checklist li{
  position: relative;
  padding-left: 30px;
  color: var(--muted, #666672);
  line-height: var(--lh, 1.6);
}

.il-checklist li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .35em;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(23,160,81,.12);
  border: 1px solid rgba(23,160,81,.18);
  box-shadow: 0 10px 24px rgba(23,160,81,.10);
}

.il-checklist li::after{
  content:"";
  position:absolute;
  left: 6px;
  top: .60em;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--brand-green, #17A051);
  border-bottom: 2px solid var(--brand-green, #17A051);
  transform: rotate(-45deg);
}

.il-inlineCta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 16px;
}
.il-inlineCta--center{
  justify-content:center;
  margin-top: 22px;
}

.il-miniPanel{
  border-radius: var(--r-20, 20px);
  border: 1px solid var(--line, #E6E8EE);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-sm, 0 10px 24px rgba(16,19,35,.08));
  overflow:hidden;
}

.il-miniPanel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #E6E8EE);
  background: rgba(16,19,35,.03);
}

.il-miniPill{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(23,160,81,.12);
  border: 1px solid rgba(23,160,81,.18);
  color: var(--brand-green, #17A051);
  font-weight: 900;
  font-size: 12px;
}

.il-miniPanel__grid{
  padding: 14px 16px 16px;
  display:grid;
  gap: 12px;
}

.il-miniItem{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items:start;
}

.il-miniItem span{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(23,160,81,.10);
  border: 1px solid rgba(23,160,81,.18);
}

.il-miniItem strong{
  display:block;
  font-weight: 900;
  color: var(--text, #111827);
}
.il-miniItem em{
  display:block;
  font-style: normal;
  color: var(--muted, #666672);
  margin-top: 2px;
}


/* =========================
   CREATION — KPI icons grid
   ========================= */

.il-section--creation .il-creationGrid--kpi{
  display: grid;
  gap: clamp(12px, 2.2vw, 18px);
  margin-top: clamp(10px, 2vw, 16px);
  margin-bottom: clamp(18px, 3vw, 28px);
}

/* 2 colonnes tablette/desktop, 1 colonne mobile */
@media (min-width: 720px){
  .il-section--creation .il-creationGrid--kpi{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* carte KPI */
.il-section--creation .il-creationCard--kpi{
  padding: clamp(14px, 2.4vw, 18px);
  display: grid;
  gap: 8px;
}

/* icone au-dessus */
.il-section--creation .il-kpiIconWrap{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}

.il-section--creation .il-kpiIcon{
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

/* Titres et textes (alignés) */
.il-section--creation .il-creationCard--kpi h3{
  margin: 0;
  line-height: 1.15;
}

.il-section--creation .il-creationCard--kpi p{
  margin: 0;
}

/* Ajustement mobile : icône légèrement plus petite */
@media (max-width: 420px){
  .il-section--creation .il-kpiIconWrap,
  .il-section--creation .il-kpiIcon{
    width: 52px;
    height: 52px;
  }
}


/* =========================
   CREATION — background pattern (dev/features)
   ========================= */

.il-section--creation{
  position: relative;
  overflow: hidden; /* évite que le pattern déborde sur les côtés */
}

/* Pattern en arrière-plan */
.il-section--creation::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* 1) halos verts (soft) + 2) grille fine (architecture) + 3) micro-points (nodes) */
  background:
    radial-gradient(900px 420px at 12% 8%, rgba(23,160,81,.14), transparent 60%),
    radial-gradient(760px 360px at 88% 22%, rgba(23,160,81,.10), transparent 62%),

    linear-gradient(to right, rgba(16,19,35,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,19,35,.06) 1px, transparent 1px),

    radial-gradient(rgba(16,19,35,.10) 1px, transparent 1px);

  background-size:
    auto,
    auto,
    56px 56px,
    56px 56px,
    28px 28px;

  background-position:
    center,
    center,
    center,
    center,
    14px 14px;

  opacity: .55; /* ajuste ici si tu veux plus/moins visible */
}

/* Assure que le contenu reste au-dessus du pattern */
.il-section--creation > .il-container{
  position: relative;
  z-index: 1;
}

/* Mobile: pattern plus discret */
@media (max-width: 720px){
  .il-section--creation::before{
    opacity: .42;
    background-size:
      auto,
      auto,
      64px 64px,
      64px 64px,
      32px 32px;
  }
}

/* Accessibilité: réduit les effets visuels si demandé */
@media (prefers-reduced-motion: reduce){
  .il-section--creation::before{
    opacity: .48;
  }
}








/* ======================================================
   SERVICES (premium + animation)
   ====================================================== */

#services.il-section{
  padding-block: clamp(34px, 5vw, 70px);
  position: relative;
}

#services.il-section::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 380px at 18% 25%, rgba(23,160,81,.10), transparent 60%),
    radial-gradient(900px 380px at 82% 30%, rgba(47,128,237,.07), transparent 60%);
  opacity: .9;
}

#services .il-grid{ position: relative; }

#services .il-card{
  position: relative;
  border-radius: var(--r-18, 18px);
  background: rgba(255,255,255,.85);
  overflow: hidden;
}

#services .il-card::before{
  content:"";
  position:absolute;
  inset: -40% -20%;
  background: radial-gradient(closest-side, rgba(23,160,81,.16), transparent 70%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-med, .25s) var(--ease, cubic-bezier(.2,.8,.2,1)),
              transform var(--t-med, .25s) var(--ease, cubic-bezier(.2,.8,.2,1));
  pointer-events:none;
}

#services .il-card::after{
  content:"";
  position:absolute;
  left: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-14, 14px);
  background: rgba(23,160,81,.10);
  border: 1px solid rgba(23,160,81,.18);
  box-shadow: 0 14px 30px rgba(23,160,81,.12);
  pointer-events:none;

  display:flex;
  align-items:center;
  justify-content:center;
  font-family: dashicons;
  font-size: 22px;
  line-height: 1;
  color: var(--brand-green, #17A051);
}

#services .il-card h3{
  margin: 0 0 8px;
  padding-left: 64px;
  font-family: var(--font-head, inherit);
  font-weight: 900;
  letter-spacing: -0.01em;
}
#services .il-card .il-muted{
  margin: 0;
  padding-left: 64px;
}

#services .il-grid--3 > article:nth-child(1)::after{ content: "\f179"; }
#services .il-grid--3 > article:nth-child(2)::after{ content: "\f472"; }
#services .il-grid--3 > article:nth-child(3)::after{ content: "\f491"; }

@media (hover: hover){
  #services .il-card--hover:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 14px 34px rgba(16,19,35,.12));
    border-color: rgba(23,160,81,.25);
  }
  #services .il-card--hover:hover::before{
    opacity: 1;
    transform: translateY(0);
  }
}

#services .il-sectionHead,
#services .il-card{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease, cubic-bezier(.2,.8,.2,1)),
              transform 520ms var(--ease, cubic-bezier(.2,.8,.2,1));
  will-change: opacity, transform;
}
#services.is-inview .il-sectionHead{ opacity: 1; transform: translateY(0); }
#services.is-inview .il-card{ opacity: 1; transform: translateY(0); }
#services.is-inview .il-card:nth-child(1){ transition-delay: 120ms; }
#services.is-inview .il-card:nth-child(2){ transition-delay: 200ms; }
#services.is-inview .il-card:nth-child(3){ transition-delay: 280ms; }

@media (max-width: 520px){
  #services .il-card::after{
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
  #services .il-card h3,
  #services .il-card .il-muted{
    padding-left: 60px;
  }
}

@media (prefers-reduced-motion: reduce){
  #services .il-sectionHead,
  #services .il-card{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}





/* =========================
   SERVICES — premium section
   ========================= */

.il-section--services{
  position: relative;
  overflow: hidden;
}

/* Pattern “dev/features” très léger */
.il-section--services::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(23,160,81,.12), transparent 60%),
    radial-gradient(760px 360px at 85% 22%, rgba(23,160,81,.08), transparent 62%),
    linear-gradient(to right, rgba(16,19,35,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,19,35,.06) 1px, transparent 1px);
  background-size: auto, auto, 60px 60px, 60px 60px;
  opacity: .55;
}

.il-section--services > .il-container{
  position: relative;
  z-index: 1;
}

/* ===== Cards (main services) ===== */
.il-services-main .il-serviceCard{
  display: grid;
  gap: 10px;
  padding: clamp(14px, 2.2vw, 18px);
  transform: translateZ(0);
}

.il-serviceCard__icon{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}

.il-serviceCard__img{
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

.il-serviceCard__micro{
  font-size: 13px;
  opacity: .75;
}

/* “signature” animation verte (underline qui se déploie) */
.il-services-main .il-serviceCard h3{
  position: relative;
  display: inline-block;
  margin: 0;
}

.il-services-main .il-serviceCard h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 2px;
  width: 100%;
  background: var(--il-green, #17A051);
  transform: scaleX(.08);
  transform-origin: left;
  opacity: .9;
  transition: transform .32s ease;
}

.il-services-main .il-serviceCard:hover h3::after{
  transform: scaleX(1);
}

/* ===== Types cards (vitrine / ecom / sur mesure) ===== */
.il-services-types .il-typeCard{
  padding: clamp(14px, 2.2vw, 18px);
  display: grid;
  gap: 10px;
}

.il-typeCard__icon{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}

.il-typeCard__img{
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

.il-typeCard__bullets{
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.il-typeCard__bullets li{
  font-size: 13px;
  opacity: .78;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.il-typeCard__bullets li::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--il-green, #17A051);
  opacity: .9;
}

/* ===== Reveal animation (scroll) ===== */
.il-revealGroup [data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .48s ease, transform .48s ease;
}

.il-revealGroup [data-reveal].is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger léger */
.il-revealGroup [data-reveal].is-in{
  transition-delay: var(--il-reveal-delay, 0ms);
}

/* Mobile: pattern plus discret */
@media (max-width: 720px){
  .il-section--services::before{
    opacity: .42;
    background-size: auto, auto, 68px 68px, 68px 68px;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .il-revealGroup [data-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .il-services-main .il-serviceCard h3::after{
    transition: none;
  }
}
/* =========================
   SERVICES — reveal premium
   ========================= */

.il-section--services .il-services-main .il-card,
.il-section--services .il-services-types .service-card{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: var(--il-reveal-delay, 0ms);
  will-change: transform, opacity;
}

/* quand la section est visible */
.il-section--services.is-inview .il-services-main .il-card,
.il-section--services.is-inview .il-services-types .service-card{
  opacity: 1;
  transform: translateY(0);
}

/* Petit détail “signature” vert sur hover (sobre, pas d’ombre) */
.il-section--services .il-card h3,
.il-section--services .service-card h3{
  position: relative;
  display: inline-block;
}

.il-section--services .il-card h3::after,
.il-section--services .service-card h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 2px;
  width: 100%;
  background: var(--il-green, #17A051);
  transform: scaleX(.08);
  transform-origin: left;
  opacity: .9;
  transition: transform .28s ease;
}

.il-section--services .il-card:hover h3::after,
.il-section--services .service-card:hover h3::after{
  transform: scaleX(1);
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .il-section--services .il-services-main .il-card,
  .il-section--services .il-services-types .service-card{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .il-section--services .il-card h3::after,
  .il-section--services .service-card h3::after{
    transition: none;
    transform: scaleX(1);
    opacity: .55;
  }
}
/* ✅ Fallback mobile : si le JS/IO ne déclenche pas, on n'affiche pas "rien" */
@media (max-width: 719px){
  #services .il-kpiCard{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}



/* =========================================================
   SERVICES — KPI cards (images header) — front-page
   ========================================================= */

.il-servicesKpi{
  --il-green: #17A051;
  --il-border: rgba(16,19,35,.10);
  --il-bg: rgba(255,255,255,.72);
  --il-soft: rgba(16,19,35,.04);
  --il-shadow: 0 14px 42px rgba(16,19,35,.10);
}

#services .il-kpiGrid{
  display: grid;
  gap: 14px;
}

@media (min-width: 720px){
  #services .il-kpiGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px){
  #services .il-kpiGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* Séparateur pleine largeur entre les 2 lignes */
#services .il-kpiSep{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px 6px;
  opacity: .95;
}

#services .il-kpiSep::before,
#services .il-kpiSep::after{
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(16,19,35,.10);
}

#services .il-kpiSep span{
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(16,19,35,.70);
}

/* Card */
#services .il-kpiCard{
  border: 1px solid var(--il-border);
  border-radius: 16px;
  background: var(--il-bg);
  overflow: hidden;
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Highlight (centre) */
#services .il-kpiCard--featured{
  border-color: rgba(23,160,81,.45);
  background: linear-gradient(180deg, rgba(23,160,81,.08), rgba(255,255,255,.72));
}

/* Header image */
#services .il-kpiMedia{
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(23,160,81,.06);
}

#services .il-kpiMedia__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tag */
#services .il-kpiTag{
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,19,35,.10);
  color: rgba(16,19,35,.72);
  font-size: 13px;
  line-height: 1;
  backdrop-filter: blur(6px);
}

/* Body */
#services .il-kpiBody{
  padding: 14px 14px 16px;
}

#services .il-kpiTitle{
  margin: 0 0 6px;
}

#services .il-kpiDesc{
  margin: 0 0 12px;
  color: rgba(16,19,35,.72);
}

#services .il-kpiList{
  margin: 0 0 14px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

#services .il-kpiFoot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#services .il-kpiMicro{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--il-soft);
  border: 1px solid rgba(16,19,35,.10);
  color: rgba(16,19,35,.72);
  font-size: 13px;
}

/* Hover premium (desktop) */
@media (hover:hover) and (pointer:fine){
  #services .il-kpiCard{
    transform: translateY(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  #services .il-kpiCard:hover{
    transform: translateY(-2px);
    box-shadow: var(--il-shadow);
    border-color: rgba(23,160,81,.28);
  }
}

/* =========================================================
   Reveal (ton système) — #services.is-inview + stagger
   ========================================================= */
#services .il-kpiCard{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s cubic-bezier(.2,.75,.2,1),
    transform .55s cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--il-reveal-delay, 0ms);
  will-change: opacity, transform;
}

#services.is-inview .il-kpiCard{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  #services .il-kpiCard{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}



/* ======================================================
   ÉTAPES / RÉALISATIONS / GARANTIES / SERVICES GRID
   (tes blocs: conservés)
   ====================================================== */

/* --- Étapes --- */
.section-etapes{
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg-soft);
}

.section-etapes .hb-container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

.section-etapes__header{
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-etapes__header h2{
  font-family: var(--font-head);
  font-size: clamp(var(--fs-24), 3vw, var(--fs-40));
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--text);
}

.section-etapes__header p{
  font-size: var(--fs-16);
  line-height: var(--lh);
  color: var(--muted);
  margin: 0;
}

.etapes-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
 
.etape-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  padding: 22px 22px 26px;
  transition:
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.etape-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--pill-soft-brd);
}

.etape-step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 26px;
  padding-inline: 10px;
  margin-bottom: 14px;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-green);
  background: var(--pill-soft-bg);
  border: 1px solid var(--pill-soft-brd);
  border-radius: 999px;
}

.etape-card h3{
  font-family: var(--font-head);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text);
}

.etape-card p{
  font-size: var(--fs-14);
  line-height: var(--lh);
  color: var(--muted);
  margin: 0;
}

.section-etapes__cta{
  margin-top: clamp(36px, 6vw, 64px);
}

.section-etapes__cta .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding-inline: 28px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--white);
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-2));
  border-radius: var(--btn-r);
  text-decoration: none;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
}

.section-etapes__cta .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  filter: brightness(1.05);
}

.section-etapes__cta .btn-primary:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}











/* --- Réalisations --- */
.section-realisations{
  position: relative;
  padding-block: clamp(48px, 7vw, 96px);
  background: #ffffff;
}

.section-realisations .hb-container{
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 24px);
  box-sizing: border-box;
}

.section-realisations .section-header{
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-realisations .section-header h2{
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #111827;
}

.section-realisations .section-header p{
  font-size: 1rem;
  line-height: 1.6;
  color: #6b7280;
  margin: 0;
}

.section-realisations .card-realisations-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

@media (max-width: 640px){
  .section-realisations{
    padding-block: 48px;
  }
  .section-realisations .section-header{
    margin-bottom: 32px;
  }
}

/* --- Services grid (déjà utilisé) --- */
.services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.service-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.service-card h3{
  font-family: var(--font-head);
  font-size: var(--fs-18);
  margin-bottom: 10px;
}

.service-card p{
  font-size: var(--fs-14);
  color: var(--muted);
  line-height: var(--lh);
}

.il-section--services{
  position: relative;
}

.il-services-main{
  margin-bottom: clamp(32px, 5vw, 56px);
}

.il-services-sep{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 48px);
  color: var(--muted);
  font-size: var(--fs-14);
  font-weight: 600;
}

.il-services-sep::before,
.il-services-sep::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.il-services-sep span{
  white-space: nowrap;
}

.il-services-types .service-card{
  background: var(--surface-2);
}

.il-services-types .service-card h3{
  font-size: var(--fs-16);
}

.il-services-types .service-card p{
  font-size: var(--fs-14);
}

/* --- Garanties --- */
.section-garanties{
  padding-block: var(--section-pad);
  background:
    radial-gradient(800px 300px at 10% 0%, rgba(23,160,81,.10), transparent 60%),
    var(--bg-soft);
}

.section-garanties .hb-container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-garanties__header{
  max-width: 720px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.section-garanties__header h2{
  font-family: var(--font-head);
  font-size: clamp(var(--fs-24), 3vw, var(--fs-40));
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text);
}

.section-garanties__header p{
  font-size: var(--fs-16);
  line-height: var(--lh);
  color: var(--muted);
  margin: 0;
}

.garanties-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.garantie-item{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(1.1) blur(2px);
  transition:
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.garantie-item:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--pill-soft-brd);
}

.garantie-icon{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--brand-green);
  background: var(--pill-soft-bg);
  border: 1px solid var(--pill-soft-brd);
  border-radius: 50%;
}

.garantie-content h3{
  font-family: var(--font-head);
  font-size: var(--fs-18);
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}

.garantie-content p{
  font-size: var(--fs-14);
  line-height: var(--lh);
  color: var(--muted);
  margin: 0;
}

/* ======================================================
   BLOG (home)
   ====================================================== */

.il-section--blog{
  padding-block: clamp(34px, 5vw, 78px);
  background: var(--bg-soft, #F7F8FB);
}

.il-blogGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 2vw, 18px);
}

.il-blogCard{
  border-radius: var(--r-18, 18px);
  border: 1px solid var(--line, #E6E8EE);
  background: rgba(255,255,255,.92);
  overflow:hidden;
}

.il-blogCard__link{
  display:block;
  padding: 18px 18px 16px;
  text-decoration:none;
}

.il-blogCard__meta{
  color: var(--muted, #666672);
  font-weight: 700;
  font-size: 12px;
}

.il-blogCard__title{
  margin: 8px 0 8px;
  font-family: var(--font-head, inherit);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text, #111827);
}

.il-blogCard__excerpt{
  margin: 0;
}

.il-blogCard__cta{
  display:inline-flex;
  margin-top: 12px;
  font-weight: 800;
  color: var(--brand-green, #17A051);
}

/* ======================================================
   CONTACT CTA (final)
   ====================================================== */

.il-section--contactCta{
  padding-block: clamp(28px, 4vw, 56px);
  background: var(--bg, #fff);
}

.il-contactCta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: clamp(16px, 3vw, 26px);
  border-radius: var(--r-20, 20px);
  border: 1px solid var(--line, #E6E8EE);
  background:
    radial-gradient(700px 220px at 12% 0%, rgba(23,160,81,.12), transparent 60%),
    rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm, 0 10px 24px rgba(16,19,35,.08));
}

.il-contactCta__txt{
  max-width: 68ch;
}

.il-contactCta__btns{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}

/* ======================================================
   FIX MOBILE — HOME (Plan + Cards)
   Patch: améliore lisibilité + largeur + wraps
   ====================================================== */

/* 1) Évite les “mots coupés” moches sur mobile */
/* ✅ SAFE WRAP (premium) — pas de césure automatique */
.il-front,
.il-front *{
  word-break: normal;
  overflow-wrap: break-word; /* évite les débordements (URLs, etc.) */
  hyphens: none;             /* STOP césure type réser- va- tions */
  -webkit-hyphens: none;
}

/* ✅ Fix grid: autoriser le wrap normal dans les colonnes */
.il-creationSplit,
.il-miniPanel__grid,
.il-miniItem{
  min-width: 0;
}

.il-miniItem{
  grid-template-columns: 40px minmax(0, 1fr);
}

.il-miniItem strong,
.il-miniItem em{
  min-width: 0;
}

/* Override ciblé : pas de césure sur les blocs à risque */
.il-miniItem,
.il-miniItem strong,
.il-miniItem em,
.il-planCard,
.il-planCard *{
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
}

/* 2) PLAN DU SITE : force un vrai layout mobile (1 colonne) */
@media (max-width: 720px){
  .il-planGrid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .il-planGrid .il-planCard{
    grid-column: auto !important;
    min-height: auto !important;
  }
}

/* 3) Cartes Plan : meilleure respiration + CTA toujours visible */
@media (max-width: 720px){
  .il-planCard{
    padding: 16px 16px 14px !important;
  }
  .il-planCard h3{
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 1.15 !important;
    margin: 10px 0 8px !important;
  }
  .il-planCard .il-muted{
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .il-planCard__cta{
    margin-top: 10px !important;
  }
}

/* 4) Corrige l’effet “texte en colonne” (virgules/retours trop agressifs)
      => on garde des lignes propres sans casser les mots */
@media (max-width: 520px){
  .il-planCard .il-muted{
    max-width: 100% !important;
  }
}

/* 5) Options fréquentes : icône + texte alignés, plus compact */
@media (max-width: 720px){
  .il-miniPanel__grid{
    gap: 10px !important;
  }
  .il-miniItem{
    grid-template-columns: 40px 1fr !important;
    align-items: center !important;
  }
  .il-miniItem span{
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }
  .il-miniItem strong{
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .il-miniItem em{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* 6) Sécurité anti “débordement horizontal” (scroll sideways) */
.il-front{
  overflow-x: hidden;
}


/* ======================================================
   PATCH MOBILE — Front Page
   Fix: césure / mots cassés (réser- va- tions...)
   À coller EN BAS de assets/css/front-page.css
   ====================================================== */

@media (max-width: 640px){

  /* Le split doit respirer : 1 colonne sur mobile */
  .il-creationSplit{
    grid-template-columns: 1fr !important;
  }

  /* Le panneau mini doit rester lisible */
  .il-miniPanel{
    width: 100%;
    max-width: 100%;
  }

  /* Grille interne : empêcher la colonne texte d'être écrasée */
  .il-miniItem{
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: start;
  }

  /* Icône un peu plus stable */
  .il-miniItem span{
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  /* ✅ Fix principal: empêcher les mots de se casser verticalement */
  .il-miniItem strong,
  .il-miniItem em,
  .il-miniItem{
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  /* Forcer le texte à “wrap” proprement, pas lettre par lettre */
  .il-miniItem em{
    white-space: normal;
    line-height: 1.35;
  }

  /* Si un style global impose break-all sur tout le site, on neutralise ici */
  .il-creationSplit__right,
  .il-miniPanel__grid{
    word-break: normal !important;
    overflow-wrap: break-word; /* wrap par mots si vraiment nécessaire */
    hyphens: none !important;
  }
}

/* ======================================================
   PATCH DEFINITIF — MOBILE WORD WRAP / HYPHENS
   Objectif: STOP "réser- va- tions" & texte en colonne
   À coller TOUT EN BAS de assets/css/front-page.css
   ====================================================== */

/* Notes admin visibles (uniquement si le HTML existe) */
.il-adminNote{
  margin-top: 14px;
  border: 1px dashed rgba(23,160,81,.35);
  background: rgba(23,160,81,.06);
  border-radius: 14px;
  padding: 12px 12px 10px;
}
.il-adminNote strong{
  display:block;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--text, #111827);
}
.il-adminNote__meta{
  font-size: 12px;
  opacity: .85;
  margin-bottom: 8px;
}
.il-adminNote__prompt{
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.45;
}

/* ✅ On évite les règles globales dangereuses sur tout .il-front */
.il-front{ overflow-x: hidden; }

/* Important: ne JAMAIS mettre hyphens:auto sur * si tu veux un rendu propre */
.il-front,
.il-front *{
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* --- Fix ciblé sur le bloc qui bug sur ta capture --- */
.il-miniPanel__grid,
.il-miniItem,
.il-miniItem strong,
.il-miniItem em{
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Le truc qui manque souvent: min-width:0 pour autoriser un wrap normal */
.il-miniItem{ grid-template-columns: 40px minmax(0, 1fr) !important; }
.il-miniItem strong,
.il-miniItem em{ min-width: 0; }

/* Mobile layout: forcer une colonne et respirer */
@media (max-width: 720px){
  .il-creationSplit{
    grid-template-columns: 1fr !important;
  }
  .il-creationSplit__right{ margin-top: 6px; }

  .il-miniPanel__grid{ gap: 10px !important; }
  .il-miniItem{
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }
  .il-miniItem span{
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
  }
  .il-miniItem strong{
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .il-miniItem em{
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
}

/* Bonus: plan du site en 1 colonne sur mobile */
@media (max-width: 720px){
  .il-planGrid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .il-planGrid .il-planCard{
    grid-column: auto !important;
    min-height: auto !important;
  }
}



/* ✅ FIX: forcer strong + em dans la colonne texte */
.il-miniItem strong,
.il-miniItem em{
  grid-column: 2;
}

/* ✅ l'icône reste en colonne 1 */
.il-miniItem > span{
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* ✅ wrap propre + pas de césure dégueu */
.il-miniItem strong,
.il-miniItem em{
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}



/* ======================================================
   ESPACEMENT ENTRE BLOCS — Options fréquentes (mobile)
   Image + titre + sous-titre = 1 bloc
   ====================================================== */

@media (max-width: 720px){

  /* 1) Chaque option = un bloc bien séparé */
  .il-miniItem{
    margin-bottom: 14px; /* 👈 espace ENTRE les blocs */
  }

  /* 2) On enlève l’espace après le dernier bloc */
  .il-miniItem:last-child{
    margin-bottom: 0;
  }

}

@media (max-width: 720px){
  .il-miniItem{
    margin-bottom: 16px;
  }
}











/* =========================================
   PLAN HERO OVERLAY (chips animés)
   ========================================= */
.il-planHero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.il-planMedia{
  margin: 0;
}

.il-planMedia__img{
  display: block;
  width: 100%;
  height: auto;
}

/* ✅ SUPPRIME le voile : image “pure” */
.il-planHero::after{
  content: none;
}

/* overlay */
.il-planOverlay{
  position:absolute;
  inset:0;
  pointer-events:none; /* on active le clic seulement sur les chips */
}

/* ✅ Chips responsive + anti-débordement */
.il-planChip{
  position:absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%) translateY(10px) scale(.98);
  opacity: 0;
  filter: blur(8px);

  pointer-events:auto;
  text-decoration:none;

  /* ✅ ne déborde jamais */
  max-width: min(320px, calc(100% - 24px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* ✅ taille fluide (desktop → mobile) */
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.1;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow:
    0 14px 40px rgba(16,19,35,.22),
    0 8px 22px rgba(16,19,35,.16);

  color: rgba(16,19,35,.92);
  font-weight: 700;
  letter-spacing: .2px;

  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.9,.2,1),
    filter .55s ease,
    background .25s ease,
    border-color .25s ease;
}

.il-planChip:hover{
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.90);
  transform: translate(-50%, -50%) translateY(0) scale(1.02);
}

.il-planChip--primary{
  background: rgba(23,160,81,.92);
  border-color: rgba(23,160,81,.75);
  color: #fff;
}

.il-planChip--primary:hover{
  background: rgba(23,160,81,.98);
  border-color: rgba(23,160,81,.95);
}

/* état visible (trigger JS) */
.il-planHero.is-inview .il-planChip.is-on{
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) translateY(0) scale(1);
}

/* ✅ Mobile : police plus petite + padding + limite largeur + placement plus sûr */
@media (max-width: 768px){
  .il-planChip{
    font-size: 12px;
    padding: 8px 10px;
    letter-spacing: .15px;
    max-width: calc(100% - 20px);
  }
}

/* ✅ Très petit écran : encore plus strict */
@media (max-width: 420px){
  .il-planChip{
    font-size: 11px;
    padding: 7px 9px;
    max-width: calc(100% - 16px);
  }
}

/* ✅ Safe-area iPhone (évite que ça colle aux bords sur encoches) */
@supports (padding: env(safe-area-inset-left)){
  .il-planChip{
    max-width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

/* accessibilité : reduced motion */
@media (prefers-reduced-motion: reduce){
  .il-planChip{
    transition: none !important;
    filter: none !important;
  }
  .il-planHero.is-inview .il-planChip{
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
}