/* ============================================================
   YLLY — Text Block (rédactionnel centré + résumé optionnel)
   Figma: NovCast > node 970:17230
   Variantes: white (default) | grey (yl-text--grey)
   ============================================================ */

.yl-text {
    background-color: var(--color-surface-white);
    color: var(--color-text-default);
    padding-block: var(--section-py-md);
}

.yl-text--grey {
    background-color: var(--color-surface-default);
}

.yl-text__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 62px;
    margin-inline: auto;
    max-width: 1240px;
    padding-inline: clamp(24px, 5vw, 60px);
}

/* Head : title + body */
.yl-text__head {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

/* Title — Instrument Sans SemiBold 32px, LS -0.64px, LH 1, centré */
.yl-text__title {
    color: var(--color-text-default);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.64px;
    line-height: 1;
    margin: 0;
    max-width: 900px;
    text-align: center;
}

/* Body — Instrument Sans Medium 18px, LS -0.09px, LH 1.7, centré, max 900px */
.yl-text__body {
    color: var(--color-text-default);
    display: flex;
    flex-direction: column;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    gap: 24px;
    letter-spacing: -0.09px;
    line-height: 1.7;
    max-width: 900px;
    text-align: center;
    width: 100%;
}

.yl-text__body p {
    margin: 0;
}

/* Bold inline — Instrument Sans Bold (override le wysiwyg) */
.yl-text__body strong,
.yl-text__body b {
    color: var(--color-text-default);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;
}

.yl-text__body em,
.yl-text__body i {
    font-style: italic;
}

.yl-text__body a {
    color: var(--color-surface-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.yl-text__body a:hover {
    color: var(--color-orange-500);
}

.yl-text__body ul,
.yl-text__body ol {
    margin: 0;
    padding-left: 24px;
    text-align: left;
}

.yl-text__body li {
    margin-bottom: 8px;
}

/* Résumé box — fond gris var(--color-surface-default), bordure gauche 5px orange var(--color-orange-500) */
.yl-text__resume {
    background-color: var(--color-surface-default);
    border-left: 5px solid var(--color-orange-500);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    padding: 24px 32px;
    width: 100%;
    max-width: 900px;
}

/* En variante grey, l'encart inverse pour rester visible (passe en blanc) */
.yl-text--grey .yl-text__resume {
    background-color: var(--color-surface-white);
}

/* Résumé title — Instrument Sans Bold 18px, LH 1.7 */
.yl-text__resume-title {
    color: var(--color-text-default);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.09px;
    line-height: 1.7;
    margin: 0;
}

/* Résumé body — Instrument Sans SemiBold 16px, LS -0.048px, LH 1.6 */
.yl-text__resume-body {
    color: var(--color-text-default);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.048px;
    line-height: 1.6;
}

.yl-text__resume-body p {
    margin: 0;
}

.yl-text__resume-body p + p {
    margin-top: 12px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .yl-text__inner {
        gap: 40px;
    }

    .yl-text__head {
        gap: 24px;
    }

    .yl-text__title {
        font-size: 26px;
        letter-spacing: -0.52px;
    }

    .yl-text__body {
        font-size: 16px;
        gap: 18px;
    }

    .yl-text__resume {
        padding: 20px 24px;
    }

    .yl-text__resume-title {
        font-size: 16px;
    }

    .yl-text__resume-body {
        font-size: 14px;
    }
}

/* ============================================================
   Tableaux dans le corps de texte
   ------------------------------------------------------------
   Le bloc accepte du HTML libre : la page /ai-info publie des
   grilles de prix, de delais et de resultats clients. Sans regle
   dediee, ces tableaux tombent au style par defaut du navigateur.
   Mise en forme sobre, alignee sur la typographie du bloc.
   ============================================================ */
.yl-text__body table {
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-block: 24px;
    text-align: left;
    width: 100%;
}

.yl-text__body th,
.yl-text__body td {
    border-bottom: 1px solid var(--color-stroke-default);
    padding: 12px 16px;
    vertical-align: top;
}

.yl-text__body th {
    color: var(--color-text-default);
    font-weight: var(--font-weight-semibold);
}

.yl-text__body thead th {
    border-bottom-width: 2px;
}

.yl-text__body tbody tr:last-child td {
    border-bottom: none;
}

/* Les tableaux debordent sur mobile : on les fait defiler seuls
   plutot que d'elargir la page. */
.yl-text__table-wrap {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    width: 100%;
}

/* ============================================================
   Variante ferree a gauche — align = left
   ------------------------------------------------------------
   Le bloc centre son contenu par defaut, ce qui convient aux
   pages editoriales. Sur les pages denses et factuelles — mentions
   legales, confidentialite, /ai-info — le centrage nuit a la
   lecture : longs paragraphes, listes et tableaux se lisent ferres
   a gauche. La largeur de lecture est ramenee a 820px.
   ============================================================ */
.yl-text--left .yl-text__inner {
    align-items: flex-start;
}

.yl-text--left .yl-text__head {
    align-items: flex-start;
    max-width: 820px;
    text-align: left;
}

.yl-text--left .yl-text__title,
.yl-text--left .yl-text__body {
    text-align: left;
}

/* Les tableaux gardent la pleine largeur du bloc : ils portent des
   colonnes, pas du texte courant. */
.yl-text--left .yl-text__table-wrap,
.yl-text--left .yl-text__body table {
    max-width: none;
    width: 100%;
}

/* Les titres de section d'une page longue ont besoin d'air au-dessus. */
.yl-text--left .yl-text__body h2,
.yl-text--left .yl-text__body h3 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-block: 16px 0;
}

.yl-text--left .yl-text__body h2 { font-size: var(--font-size-h4); }
.yl-text--left .yl-text__body h3 { font-size: var(--font-size-lg); }

/* Corps ferré à gauche, titre centré — ISO Figma 970:17230 (retour Fabio, 31/08/2026) */
.yl-text__body, .yl-text__resume { text-align: left; }
.yl-text__resume { width: 100%; }

/* Sur /references, le bloc texte précède la barre de filtres : on resserre
   le bas seulement, le haut garde son rythme (retour design 08/09/2026) */
.yl-text:has(+ .yl-projects-grid) {
    padding-block: var(--section-py-md) 28px;
}