/* ====== Variables ====== */
:root{
  --inc-primary: #0b8787; /* couleur principale à ajuster */
  --inc-text: #1a1a1a;
  --inc-bg: #ffffff;
  --inc-soft: rgba(0,0,0,.06);
  --inc-radius: 16px;
  --inc-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* ====== Badges CTA ====== */
.badge-cta{ display:inline-flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0 }
.badge-cta a{
  border-radius:9999px; padding:.8rem 1.2rem; font-weight:700; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.12); line-height:1; display:inline-flex; align-items:center; justify-content:center
}
.badge-a{ background:var(--inc-primary); color:#fff }
.badge-b{ background:#fff; color:var(--inc-text); border:2px solid var(--inc-primary) }
.badge-cta a:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.16) }
.badge-note{ font-size:.9rem; opacity:.8; margin-top:.35rem }

/* ====== Frise ====== */
.incub-timeline{ display:grid; grid-template-columns:repeat(7,minmax(140px,1fr)); gap:1rem; counter-reset:step }
.incub-step{
  background:var(--inc-bg); border-radius:var(--inc-radius); padding:1rem; box-shadow:var(--inc-shadow);
  position:relative; min-height:140px
}
.incub-step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-12px; left:-12px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--inc-primary); color:#fff; font-weight:700
}
@media (max-width:992px){ .incub-timeline{ grid-template-columns:1fr } }

/* ====== Tuiles & cartes ====== */
.tile, .profile-card{
  background:#fff; border-radius:var(--inc-radius); padding:1rem; box-shadow:var(--inc-shadow)
}
.tile h3, .profile-card h3{ margin:.25rem 0 .5rem 0; font-size:1.1rem }

/* ====== Intro Incubateur – ajouts ====== */
.inc-head { display:grid; gap:.5rem; margin: 0 0 .75rem 0 }
.inc-head h1, .inc-head h2 { margin:0; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height:1.2; color: var(--inc-text) }

.inc-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(11,135,135,.12); color: var(--inc-primary);
  padding:.4rem .65rem; border-radius:9999px; font-weight:700; font-size:.92rem;
  border:1px solid rgba(11,135,135,.25)
}

.inc-lead{ margin:.35rem 0 0 0; max-width: 900px; color:#334155; font-size:1.05rem; line-height:1.7 }

.inc-card{
  background:#fff; border-radius: var(--inc-radius); box-shadow: var(--inc-shadow);
  padding: 1.15rem 1.15rem 1rem; border:1px solid var(--inc-soft)
}
.inc-card p{ margin:.4rem 0; color:#334155; line-height:1.75 }
.inc-card ul{ margin:.25rem 0 0 1.25rem; color:#334155; line-height:1.7 }
.inc-card li{ margin:.3rem 0 }

.inc-highlight{
  background: #fff; border-left: 4px solid var(--inc-primary);
  padding: .75rem 1rem; border-radius: 10px; margin-top:.35rem
}

/* rangée de CTA réutilisant tes styles de badges */
.inc-cta { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem }
@media (max-width: 720px){ .inc-cta{ flex-direction:column; align-items:stretch } }

/* ====== Ombres colorées pour toutes les cartes ====== */
.inc-card,
.tile,
.profile-card {
  background:#fff;
  border-radius: var(--inc-radius);
  box-shadow: 0 6px 16px rgba(221,237,235,0.6), 0 12px 28px rgba(221,237,235,0.8);
  border:1px solid rgba(11,135,135,.12);
  transition: transform .35s cubic-bezier(.25,1.25,.5,1), 
              box-shadow .3s ease, 
              background .3s ease;
  cursor: pointer;
}

/* Hover effet : élévation + ombre accentuée + fond éclairci */
.inc-card:hover,
.tile:hover,
.profile-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 22px rgba(221,237,235,0.75), 0 18px 34px rgba(221,237,235,0.9);
  background: #f8fdfc; /* blanc légèrement teinté vert pâle */
}

/* Zoom sur le contenu (titres & icônes) */
.inc-card h3,
.tile h3,
.profile-card h3 {
  transition: transform .25s cubic-bezier(.25,1.25,.5,1), color .25s ease;
}

.inc-card:hover h3,
.tile:hover h3,
.profile-card:hover h3 {
  transform: scale(1.07);
  color: var(--inc-primary);
}

/* Icônes si présentes */
.inc-card .ic, .tile .ic, .profile-card .ic {
  transition: transform .25s cubic-bezier(.25,1.25,.5,1);
}

.inc-card:hover .ic,
.tile:hover .ic,
.profile-card:hover .ic {
  transform: scale(1.15) rotate(-3deg);
}

/* ===== CARD pleine largeur Procès fictif ===== */
.card.fullwidth {
  /* La card prend toute la largeur de la grille */
  grid-column: 1 / -1;

  /* Gestion du contenu */
  position: relative;
  overflow: hidden;
  display: grid;
  gap: .75rem;
  align-items: center;

  /* Couleurs et texte */
  color: #fff;

  /* Espacement et arrondis */
  padding: 2rem 1.5rem;
  border-radius: var(--rif-radius);

  /* Image de fond (à remplacer par l'URL de ton image) */
  background: url('https://media.lyon-france.com/1280x852/6358447/22134824.jpg') center/cover no-repeat;

  /* Ombre discrète */
  box-shadow: var(--rif-shadow);
}

/* Overlay semi-transparent pour lisibilité du texte */
.card.fullwidth::before {
  content: "";
  position: absolute;
  inset: 0; /* couvre toute la card */
  background: rgba(11,135,135,.7); /* vert sombre semi-transparent */
  border-radius: var(--rif-radius);
  z-index: 0; /* en arrière-plan */
}

/* Contenu au-dessus de l’overlay */
.card.fullwidth .content {
  position: relative;
  z-index: 1;
}

/* Ligne du haut : icône + titre */
.card.fullwidth .top {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Icône circulaire */
.card.fullwidth .ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.15); /* fond clair transparent */
  color: #fff;
  font-size: 1.4rem;
}

/* Titre */
.card.fullwidth h3 {
  margin: 0;
  font-size: 1.3rem;
}

/* Texte descriptif */
.card.fullwidth p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  opacity: .95; /* légèrement atténué pour contraste doux */
}

/* Bouton CTA */
.card.fullwidth .cta-row .btn {
  background: #fff;            /* fond blanc */
  color: var(--rif-primary);   /* texte vert charte */
  font-weight: 700;
  border: 2px solid var(--rif-primary);
}

/* Effet hover uniquement sur le bouton (classique) */
.card.fullwidth .cta-row .btn:hover {
  background: var(--rif-primary);
  color: #fff;
}

/* Espacement au-dessus de la card pleine largeur */
.card.fullwidth {
  margin-top: 1.5rem; /* ajuste la valeur (1rem, 2rem…) selon l'effet voulu */
}

/* ===== INTRO – RIF 2025 ===== */

/* Structure générale */
#rif-intro-hero .intro-head { 
  display: grid; 
  gap: .4rem; 
}
#rif-intro-hero .intro-head h2 { 
  margin: 0; 
  font-size: clamp(1.6rem, 3vw, 2.1rem); 
  line-height: 1.2; 
  color: var(--rif-dark); 
}
#rif-intro-hero .intro-sub { 
  margin: 0; 
  font-size: 1rem; 
  color: var(--rif-muted); 
}
#rif-intro-hero .intro-lead { 
  margin: .75rem 0 1rem 0; 
  font-size: 1.08rem; 
  line-height: 1.75; 
  color: var(--rif-muted); 
  max-width: 980px; 
}

/* Programme (liste “Au programme”) */
#rif-intro-hero .program {
  display: grid; 
  gap: .65rem; 
  margin: 1rem 0 1.2rem 0;
  padding: 0; 
  list-style: none; 
  max-width: 1000px;
}
#rif-intro-hero .program li {
  display: grid; 
  grid-template-columns: 28px 1fr; 
  align-items: start; 
  gap: .6rem;
  background: var(--rif-white); 
  border: 1px solid rgba(11,135,135,.12);
  border-radius: 12px; 
  padding: .65rem .75rem; 
  box-shadow: var(--rif-soft-shadow);
}
#rif-intro-hero .program .b {
  width: 28px; 
  height: 28px; 
  border-radius: 999px; 
  display: grid; 
  place-items: center;
  background: rgba(11,135,135,.12); 
  color: var(--rif-primary); 
  font-weight: 800; 
  font-size: .9rem;
}

/* Titre “Trois axes” */
#rif-intro-hero .axes-title { 
  margin: 1.2rem 0 .6rem 0; 
  font-size: 1.15rem; 
  color: var(--rif-dark); 
  font-weight: 700; 
}

/* Grille des axes (cards) */
#rif-intro-hero .axes-grid {
  display: grid; 
  gap: 1rem; 
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  #rif-intro-hero .axes-grid { grid-template-columns: 1fr; }
}
#rif-intro-hero .axis-card {
  background: var(--rif-white);
  border: 1px solid rgba(11,135,135,.12);
  border-radius: var(--rif-radius);
  box-shadow: var(--rif-shadow);
  padding: 1rem;
  display: grid; 
  gap: .55rem;
}
#rif-intro-hero .axis-card .top {
  display: grid; 
  grid-template-columns: 44px 1fr; 
  gap: .75rem; 
  align-items: center;
}
#rif-intro-hero .axis-card .ic {
  width: 44px; 
  height: 44px; 
  border-radius: 50%;
  display: grid; 
  place-items: center;
  background: rgba(11,135,135,.10); 
  color: var(--rif-primary); 
  font-size: 1.2rem;
}
#rif-intro-hero .axis-card h3 { 
  margin: 0; 
  font-size: 1.06rem; 
  color: var(--rif-dark); 
}
#rif-intro-hero .axis-card p { 
  margin: 0; 
  font-size: .98rem; 
  line-height: 1.55; 
  color: var(--rif-muted); 
}

/* ===== Amélioration de lisibilité pour la card pleine largeur ===== */
.card.fullwidth{
  /* Image de fond : remplace l'URL ci-dessous si besoin */
  background: url('https://media.lyon-france.com/1280x852/6358447/22134824.jpg') center/cover no-repeat;
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: var(--rif-radius);
  padding: 2rem 1.5rem;
  /* petite ombre pour le relief */
  box-shadow: var(--rif-shadow);
}

/* Overlay vert sombre : un peu plus dense pour le contraste */
.card.fullwidth::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.20) 25%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.35) 100%),
    rgba(11,135,135,.68); /* ajuste .60 → .75 selon ta photo */
  z-index:0;
}

/* Contenu au-dessus de l'overlay + largeur de ligne raisonnable */
.card.fullwidth .content{
  position:relative; z-index:1;
  max-width: 980px;
}

/* Couleurs de texte spécifiques à cette card (on force du clair) */
.card.fullwidth h3{ color:#fff; }
.card.fullwidth p{ color: rgba(255,255,255,.95); }

/* Boost lisibilité fine (surtout sur photos détaillées) */
.card.fullwidth h3,
.card.fullwidth p{
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Icône : cercle plus clair pour ressortir sur fond sombre */
.card.fullwidth .ic{
  background: rgba(255,255,255,.18);
  color:#fff;
}

/* Bouton : style "ghost" adapté à fond sombre */
.card.fullwidth .cta-row .btn{
  background: rgba(255,255,255,.92);
  color: var(--rif-primary);
  border-color: transparent;
}
.card.fullwidth .cta-row .btn:hover{
  background: var(--rif-primary);
  color:#fff;
}

/* Variante mobile : overlay un poil plus sombre pour compenser les écrans */
@media (max-width: 640px){
  .card.fullwidth::before{
    background:
      linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.24) 25%, rgba(0,0,0,.36) 60%, rgba(0,0,0,.42) 100%),
      rgba(11,135,135,.72);
  }
}