/* ============================================================
   YLLY Title — Frontend styles
   Figma: NovCast > node 957:10241
   CSS reformate depuis une version minifiee sans source :
   reformatage verifie semantiquement neutre.
   ============================================================ */

.yl-title {
    background-color:var(--color-surface-default);
    padding-block: var(--section-py-lg);
}

.yl-title__inner {
    margin-inline:auto;
    max-width:1440px;
    padding-inline:clamp(24px,6vw,120px);
}

.yl-title__header {
    margin-bottom:clamp(40px,5vw,64px);
    text-align:center;
}

/* Overline ISO les autres blocs (retour design 11/09/2026) : étoile orange
   et libellé en noir, plus de pastille rose ni de texte orange. */
.yl-title__overline {
    align-items:center;
    background-color:transparent;
    border-radius:70px;
    color:var(--color-text-default);
    display:inline-flex;
    font-family:'Instrument Sans',sans-serif;
    font-size:16px;
    font-weight:600;
    gap:10px;
    justify-content:center;
    letter-spacing:-0.048px;
    line-height:1.6;
    margin-bottom:16px;
    padding:6px 19px 6px 6px;
    text-transform:uppercase;
}

.yl-title__title {
    color:var(--color-text-default);
    font-size:clamp(28px,3.5vw,var(--font-size-display));
    letter-spacing:-.04em;
    line-height:var(--line-height-heading);
    margin:0;
}

.yl-title__title-bold {
    display:block;
    font-family:'Instrument Sans',sans-serif;
    font-weight:600;
}

.yl-title__title-italic {
    display:block;
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:700;
}

.yl-title__grid {
    display:grid;
    gap:var(--space-12);
    grid-template-columns:repeat(4,1fr);
}

.yl-title__card {
    background-color:var(--color-surface-white);
    border-radius:var(--radius-card);border:1px solid var(--color-stroke-default);
    display:flex;
    flex-direction:column;
    gap:var(--space-16);
    padding:var(--space-24);
    transition:box-shadow .2s,transform .2s;
}

.yl-title__card:hover {
    box-shadow:0 8px 32px rgba(37,28,69,.1);
    transform:translateY(-3px);
}

.yl-title__icon-wrap {
    align-items:center;
    background-color:rgba(214,53,0,.06);
    border-radius:var(--radius-md);
    display:flex;
    height:48px;
    justify-content:center;
    width:48px;
}

.yl-title__icon-wrap svg {
    height:32px;
    width:32px;
}

.yl-title__card-title {
    color:var(--color-text-default);
    font-family:'Instrument Sans',sans-serif;
    font-size:var(--font-size-lg);
    font-weight:600;
    letter-spacing:-.02em;
    line-height:var(--line-height-lg);
    margin:0;
}

.yl-title__card-desc {
    color:var(--color-text-default);
    font-family:'Instrument Sans',sans-serif;
    font-size:var(--font-size-xs);
    font-weight:400;
    line-height:var(--line-height-xs);
    margin:0;
}

@media (max-width:1100px) {
    .yl-title__grid {
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:640px) {
    .yl-title__grid {
        grid-template-columns:1fr;
    }
}

/* ============================================================
   Variante blanche — theme = white
   ------------------------------------------------------------
   Le bloc est gris par defaut, avec des cartes blanches. Quand il
   suit un autre bloc gris (solutions-expertises sur la page
   Marketing Digital, par exemple), les deux aplats se confondent :
   on inverse alors le rapport, section blanche et cartes grises.
   La bordure passe au gris bleute pour rester visible.
   ============================================================ */
.yl-title--white {
    background-color: var(--color-surface-white);
}

.yl-title--white .yl-title__card {
    background-color: var(--color-surface-default);
    border-color: var(--color-stroke-light);
}

.yl-title--white .yl-title__card:hover {
    box-shadow: 0 8px 32px rgba(37, 28, 69, .12);
}

/* Étoile de l'overline, ISO expertise-projets et testimonials (11/09/2026) */
.yl-title__overline-star {
    display: block;
    flex-shrink: 0;
    height: 15px;
    transform: rotate(30deg);
    width: 15px;
}