/* =====================================================================================================================
   YC Creations — bloc « Les outils au service de vos idées » (Accueil et Services) : 4 colonnes, entrée en cascade
   ===================================================================================================================== */
/* ===== NOS OUTILS : trois colonnes ouvertes, sans cadre ni carte, séparées par de fins filets.
     Le logo flotte seul au-dessus d'un reflet de lumière ; le nom et un paragraphe de même longueur dessous.
     Survol : le logo se soulève, son reflet s'allume, un trait Bleu YC → Or YC se dessine sous le nom.
     Entrée en cascade au scroll (toolsRef). Aucun mouvement continu au repos. ===== */
.tl-section{position:relative; padding:var(--section) 64px; display:flex; flex-direction:column; gap:80px;}
.tl-head{display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center;}
.tl-head .yc-badge{align-self:center;}
.tl-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); width:100%;}
.tl-item{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:32px; padding:8px 48px;}
.tl-item + .tl-item::before{content:''; position:absolute; left:0; top:4%; bottom:4%; width:1px; background:linear-gradient(180deg, transparent, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent);}
/* logo libre, sans tuile : il flotte au-dessus d'un reflet elliptique */
.tl-logo{position:relative; width:112px; height:112px; display:flex; align-items:center; justify-content:center;}
.tl-logo img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 18px 26px rgba(0,0,0,0.5)); transition:transform .8s cubic-bezier(.22,1,.36,1), filter .8s ease;}
.tl-logo::after{content:''; position:absolute; left:10%; right:10%; bottom:-22px; height:14px; border-radius:50%; background:radial-gradient(closest-side, rgba(110,193,228,0.45), transparent); opacity:.3; transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);}
.tl-item:hover .tl-logo img{transform:translateY(-10px) scale(1.06); filter:drop-shadow(0 28px 34px rgba(0,0,0,0.55));}
.tl-item:hover .tl-logo::after{opacity:1; transform:scaleX(1.2);}
/* nom + trait qui se dessine au survol */
.tl-body{display:flex; flex-direction:column; align-items:center; gap:16px;}
.tl-name{position:relative; padding-bottom:12px; font-family:'Nohemi',sans-serif; font-weight:300; font-size:32px; line-height:1.1; letter-spacing:-0.02em; color:#fff;}
.tl-name::after{content:''; position:absolute; left:50%; bottom:0; width:40px; height:1px; margin-left:-20px; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC)); transform:scaleX(0.4); opacity:.5; transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;}
.tl-item:hover .tl-name::after{transform:scaleX(1.6); opacity:1;}
.tl-desc{margin:0; max-width:30ch; font-size:16px; line-height:1.7; color:var(--texte-corps); text-wrap:balance;}
/* entrée en cascade (classes posées par toolsRef ; sans script, tout reste visible) */
.tl-section.tl-ready .tl-item{opacity:0; transform:translateY(24px); filter:blur(8px);}
.tl-section.tl-ready.is-in .tl-item{opacity:1; transform:none; filter:none; transition:opacity .9s ease calc(var(--i) * .14s), transform 1.1s cubic-bezier(.22,1,.36,1) calc(var(--i) * .14s), filter .9s ease calc(var(--i) * .14s);}
@media (max-width:1024px){
  .tl-item{padding:8px 24px;}
  .tl-logo{width:88px; height:88px;}
  .tl-name{font-size:24px;}
}
@media (max-width:767px){
  .tl-section{padding:80px 24px; gap:48px;}
  .tl-row{grid-template-columns:minmax(0,1fr); row-gap:56px;}
  .tl-item{padding:0;}
  .tl-item + .tl-item::before{left:25%; right:25%; top:-28px; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);}
  .tl-logo{width:80px; height:80px;}
}
@media (prefers-reduced-motion: reduce){
  .tl-section.tl-ready .tl-item{opacity:1; transform:none; filter:none;}
}
/* ===== OUTILS : 4 colonnes ===== */
.tl-row{grid-template-columns:repeat(4, minmax(0,1fr));}
.tl-desc{font-size:16px; letter-spacing:0.01em;}
@media (min-width:768px) and (max-width:1024px){
  .tl-row{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:56px;}
  .tl-item:nth-child(3)::before{display:none;}
}
@media (max-width:767px){
  .tl-row{grid-template-columns:minmax(0,1fr);}
}
/* ===== OUTILS : taille intermédiaire (logos 88 px, nom 24 px, accroche 16 px), rangée resserrée au centre ===== */
.tl-section{gap:64px !important;}
.tl-row{max-width:1040px; margin:0 auto;}
.tl-item{gap:24px; padding:0 32px;}
.tl-item + .tl-item::before{top:10%; bottom:10%;}
.tl-logo{width:88px; height:88px;}
.tl-logo img{filter:drop-shadow(0 14px 20px rgba(0,0,0,0.48));}
.tl-logo::after{bottom:-18px; height:10px;}
.tl-item:hover .tl-logo img{transform:translateY(-8px) scale(1.05); filter:drop-shadow(0 22px 28px rgba(0,0,0,0.52));}
.tl-body{gap:12px;}
.tl-name{font-size:24px; padding-bottom:10px;}
.tl-name::after{width:34px; margin-left:-17px;}
.tl-desc{font-size:16px !important; line-height:1.5; color:var(--muted);}
@media (max-width:1024px){
  .tl-logo{width:72px; height:72px;}
  .tl-name{font-size:24px;}
}
@media (max-width:767px){
  .tl-section{gap:48px !important;}
  .tl-row{row-gap:48px !important;}
  .tl-logo{width:72px; height:72px;}
  .tl-item + .tl-item::before{top:-24px;}
}