/* ============================================================================
   MINOTERIE SUIRE — PAGES 2026 EN BLOCS
   Landing « Accompagnement boulanger bio » (Figma « LP 2026 - Suire », cadre
   1493:5856), puis pages de service et accueil 2026.

   Le thème « suire » est un thème BLOC : la page utilise le gabarit « page »
   (en-tête et pied de page du site, comme la maquette). Cette feuille est mise
   en file par functions.php (front + éditeur).

   Répartition des responsabilités (méthode Girardeau / Fouché / Batigne) :
   - fond, padding, largeur max, pleine largeur, gouttières
     = ATTRIBUTS des blocs Kadence (réglables dans l'éditeur) ;
   - typographie, encarts, arrondis, ombres, décor = cette feuille.

   Polices du thème (theme.json) : jakarta-plus (texte et titres),
   graduate (sur-titres et chiffres, c'est la police « à chasse fixe » de la
   maquette), santelia-script (réservée au reste du site, non utilisée ici :
   la maquette n'en met pas sur cette page).
   ========================================================================== */

:root {
    --su-bleu: #0033a0;
    --su-bleu-f: #002470;
    --su-vert: #009639;
    --su-vert-f: #006928;
    --su-brun: #907058;
    --su-brun-f: #382a1f;
    --su-brun-clair: #cea07e;
    --su-creme: #faf6f2;
    --su-creme-c: #f8ebd4;
    --su-texte: #3c3c3b;
    --su-filet: rgba(144, 112, 88, .28);
    --su-champ: #e6e3de;
    --su-ombre: 0 18px 40px rgba(56, 42, 31, .12);

    --su-titre: var(--wp--preset--font-family--jakarta-plus, "Plus Jakarta Sans", sans-serif);
    --su-mono: var(--wp--preset--font-family--graduate, "Graduate", serif);
}

/* Portée : la page 2026 au front comme dans l'éditeur de blocs. */
.su-hero, .su-vision, .su-stats, .su-services-intro, .su-services, .su-experts,
.su-values-intro, .su-values, .su-how, .su-testimonials-intro, .su-testimonials,
.su-cta, .su-partners-intro, .su-partners, .su-contact {
    font-family: var(--su-titre);
    color: var(--su-texte);
}

/* ============================================================================
   1. ÉLÉMENTS COMMUNS
   ========================================================================== */

/* Sur-titre : Graduate, majuscules, très espacé (maquette) */
.su-eyebrow {
    font-family: var(--su-mono);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--su-vert);
    margin: 0 0 14px;
}
.su-eyebrow--light { color: #fff; }
.su-how .su-eyebrow, .su-partners-intro .su-eyebrow { color: rgba(255, 255, 255, .92); }
.su-experts .su-eyebrow { color: var(--su-bleu); }

/* Titre de section : brun, le mot mis en avant passe en vert */
.su-title {
    font-family: var(--su-titre);
    font-size: 42px;
    line-height: 1.12;
    font-weight: 400;
    color: var(--su-brun);
    margin: 0 0 26px;
}
.su-title em { font-style: normal; font-weight: 700; color: var(--su-vert); }
.su-title strong, .su-hero__title strong { font-weight: 700; }
.su-title--light { color: #fff; }
.su-title--light em { color: var(--su-vert); }
.su-center { text-align: center; }
.su-center .su-eyebrow { letter-spacing: .14em; }

.su-text, .su-lead {
    font-size: 16px;
    line-height: 1.62;
    color: var(--su-texte);
    margin: 0 0 18px;
}
.su-lead { font-size: 17px; }
.su-text:last-child, .su-lead:last-child { margin-bottom: 0; }

/* ---- Boutons : plein bleu / contour vert, avec le décalage de la maquette -- */
.su-buttons { gap: 16px; flex-wrap: wrap; }
.su-btn .wp-block-button__link,
a.wp-block-button__link.su-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--su-mono);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 17px 30px;
    border-radius: 0;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s;
}
/* ⚠️ Le liseré incliné de la maquette est DÉJÀ posé par le thème
   (style.css : .wp-block-button a::after, rotate(2deg), couleurs héritées).
   On ne touche donc ni à ::before ni à ::after, sous peine de l'effacer :
   la flèche est écrite dans le libellé du bouton (voir _sland.php). */
.su-btn--primary .wp-block-button__link {
    background: var(--su-bleu);
    color: #fff;
}
.su-btn--primary .wp-block-button__link:hover { background: var(--su-bleu-f); }
.su-btn--outline .wp-block-button__link {
    background: #fff;
    color: var(--su-vert);
    border: 1px solid var(--su-vert);
}
.su-btn--outline .wp-block-button__link:hover { background: var(--su-vert); color: #fff; }


/* Lien fléché des cartes de services */
.su-link .wp-block-button__link {
    background: none;
    color: var(--su-bleu);
    font-family: var(--su-titre);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 0;
}
.su-link .wp-block-button__link::after { display: none; }   /* pas de liseré sur un lien */
.su-link .wp-block-button__link:hover { transform: none; }
.su-link .wp-block-button__link:hover { color: var(--su-vert); }

/* ============================================================================
   2. HERO
   ========================================================================== */
.su-hero__title {
    font-size: 44px;
    line-height: 1.18;
    font-weight: 400;
    color: var(--su-brun);
    margin: 0 0 26px;
}
.su-hero__title em { font-style: normal; font-weight: 700; color: var(--su-vert); }
.su-hero__para { font-size: 16px; line-height: 1.6; margin: 0 0 18px; }
.su-hero__col .su-buttons { margin-top: 30px; }

/* Photo inclinée façon tirage papier */
.su-hero__media { position: relative; }
.su-hero__photo { margin: 0; }
.su-hero__photo img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    border: 14px solid #fff;
    box-shadow: var(--su-ombre);
    transform: rotate(2deg);
}

/* Pastille verte « ★★★★★ 4,8/5 » */
.su-hero__rating {
    position: absolute !important;
    top: 118px;
    right: -18px;
    z-index: 2;
    width: 287px;
}
.su-hero__rating .kt-inside-inner-col { gap: 0 !important; }
.su-hero__stars { font-size: 15px; letter-spacing: 2px; color: #fff; margin: 0; }
.su-hero__score {
    font-size: 26px; font-weight: 700; color: #fff; margin: -2px 0 2px;
}
.su-hero__rating-text { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .92); margin: 0; }

/* Encart blanc « Notre ambition » */
.su-hero__ambition {
    position: absolute !important;
    left: -24px;
    bottom: 26px;
    z-index: 2;
    width: 486px;
    max-width: calc(100% + 24px);
    box-shadow: var(--su-ombre);
}
.su-hero__ambition-title {
    font-size: 19px; font-weight: 700; color: var(--su-bleu); margin: 0 0 6px;
}
.su-hero__ambition-text { font-size: 14px; line-height: 1.5; margin: 0; }

/* ============================================================================
   3. NOTRE VISION
   ========================================================================== */
.su-vision .su-text { font-size: 16px; line-height: 1.7; }
.su-vision__footer {
    font-size: 16px; line-height: 1.6; margin: 6px 0 0; color: var(--su-texte);
}
.su-vision__footer strong { color: var(--su-vert); font-weight: 700; }

/* ============================================================================
   4. DATES CLÉS (bandeau brun)
   ========================================================================== */
.su-stats .su-stat { text-align: center; }
.su-stat__num {
    font-family: var(--su-mono);
    font-size: 52px;
    line-height: 1;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: .04em;
}
.su-stat__txt { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .95); margin: 0; }

/* ============================================================================
   5. CARTES DE SERVICES
   ========================================================================== */
.su-card { box-shadow: var(--su-ombre); }
.su-card__img { margin: 0; }
.su-card__img img { display: block; width: 100%; height: 232px; object-fit: cover; }
.su-card__tag {
    display: inline-block;
    font-family: var(--su-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--su-vert-f);
    background: rgba(0, 150, 57, .12);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 16px;
}
.su-card__title {
    font-size: 21px;
    line-height: 1.28;
    font-weight: 700;
    color: var(--su-brun);
    margin: 0 0 12px;
}
.su-card__title em { font-style: normal; color: var(--su-bleu); }
.su-card__lead { font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--su-brun); margin: 0 0 10px; }
.su-card__text, .su-card p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }

/* « Voir plus… » : bloc natif Détails, sans JavaScript */
.su-card__plus { margin: 4px 0 0; border-top: 1px solid var(--su-filet); padding-top: 12px; }
.su-card__plus > summary {
    list-style: none;
    cursor: pointer;
    text-align: right;
    font-size: 14px;
    color: var(--su-vert);
    text-decoration: underline;
}
.su-card__plus > summary::-webkit-details-marker { display: none; }
.su-card__plus > summary::after { content: "Voir plus…"; }
.su-card__plus[open] > summary::after { content: "Voir moins"; }
/* le texte déplié s'affiche AVANT le « Voir moins » */
.su-card__plus[open] { display: flex; flex-direction: column; }
.su-card__plus[open] > summary { order: 2; margin-top: 10px; }
.su-card__plus p { font-size: 15px; line-height: 1.6; }
.su-card .su-buttons { margin-top: 18px; }

/* ============================================================================
   6. LE REGARD DE NOS EXPERTS
   ========================================================================== */
.su-experts__quote { font-size: 16px; line-height: 1.62; margin: 0 0 14px; }
.su-experts__person { font-size: 15px; font-style: italic; font-weight: 700; color: var(--su-brun-f); margin: 0; }
.su-polaroid { align-self: center; }
.su-experts__photo { margin: 0; }
.su-experts__photo img {
    display: block;
    width: 100%;
    height: 470px;
    object-fit: cover;
    border: 16px solid #fff;
    border-bottom-width: 42px;
    box-shadow: var(--su-ombre);
    transform: rotate(2.5deg);
}

/* ============================================================================
   7. NOS ENGAGEMENTS (4 cartes bleues)
   ========================================================================== */
.su-values .su-value { text-align: center; box-shadow: 0 10px 24px rgba(0, 51, 160, .14); }
/* Kadence ne force pas l'égalité de hauteur : sans ça, le bleu s'arrête au
   texte et laisse une bande blanche sous les cartes les plus courtes. */
.su-values .kt-row-column-wrap { align-items: stretch !important; }
.su-values .su-value, .su-values .su-value > .kt-inside-inner-col { height: 100%; }
.su-value__title { font-size: 21px; line-height: 1.2; font-weight: 700; color: #fff; margin: 0 0 14px; }
.su-value__text { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .92); margin: 0; }

/* ============================================================================
   8. POURQUOI NOUS CHOISIR (bandeau brun)
   ========================================================================== */
.su-how__image { margin: 34px 0 0; }
.su-how__image img { display: block; width: 100%; height: 232px; object-fit: cover; }
.su-step .kt-inside-inner-col { gap: 0 !important; }
.su-step__num {
    font-family: var(--su-mono);
    font-size: 40px;
    line-height: 1;
    color: #fff;
    margin: 0;
}
.su-step__title { font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.su-step__text { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .92); margin: 0; }

/* ============================================================================
   9. TÉMOIGNAGES
   ========================================================================== */
.su-testimonials .su-quote { box-shadow: var(--su-ombre); position: relative; }
.su-testimonials .su-quote::before {
    content: "“";
    position: absolute;
    top: 10px;
    left: 24px;
    font-size: 54px;
    line-height: 1;
    color: var(--su-bleu);
    opacity: .85;
}
.su-quote__text { font-size: 15px; line-height: 1.6; margin: 34px 0 22px; }
.su-quote__author .kt-inside-inner-col {
    display: grid !important;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px !important;
    align-items: center;
}
.su-quote__initials {
    grid-row: 1 / 3;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0, 150, 57, .12);
    font-size: 14px; font-weight: 700; color: var(--su-vert-f);
    margin: 0;
}
.su-quote__who { font-size: 15px; font-weight: 700; color: var(--su-bleu); margin: 0; align-self: end; }
.su-quote__post { font-size: 13px; color: var(--su-texte); margin: 0; align-self: start; }

/* ============================================================================
   10. UNE ÉQUIPE À VOS CÔTÉS
   ========================================================================== */
.su-cta__panel { align-self: center; }
.su-cta__media { padding: 0 !important; }
.su-cta__img { margin: 0; height: 100%; }
.su-cta__img img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; }

/* ============================================================================
   11. PARTENAIRES
   ========================================================================== */
.su-partners-intro .su-eyebrow { text-align: center; }
.su-partners .su-partner { box-shadow: 0 8px 20px rgba(56, 42, 31, .12); }
.su-partner__logo { margin: 0; }
.su-partner__logo img { display: block; width: 100%; height: 56px; object-fit: contain; }

/* ============================================================================
   12. CONTACT
   ========================================================================== */
.su-contact__col .su-text { margin-bottom: 16px; }
.su-contact__item { margin-top: 18px; }
.su-contact__item .kt-inside-inner-col { gap: 0 !important; }
/* la rangée Kadence est en 2 colonnes égales : on resserre celle de l'icône */
.su-contact__item .kt-row-column-wrap {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center;
}
.su-contact__icon { max-width: 48px; }
.su-contact__icon .kt-inside-inner-col {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(0, 150, 57, .12);
    position: relative;
}
.su-contact__icon .kt-inside-inner-col::after {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.su-contact__item--tel .su-contact__icon .kt-inside-inner-col::after { content: "☎"; }
.su-contact__item--mail .su-contact__icon .kt-inside-inner-col::after { content: "✉"; }
.su-contact__item--adresse .su-contact__icon .kt-inside-inner-col::after { content: "⌖"; }
.su-contact__label { font-size: 13px; color: var(--su-texte); margin: 0; }
.su-contact__value { font-size: 16px; font-weight: 700; color: var(--su-bleu); margin: 0; }
.su-contact__value a { color: inherit; text-decoration: none; }
.su-contact__value a:hover { text-decoration: underline; }

/* Formulaire Gravity Forms */
.su-form { box-shadow: var(--su-ombre); }
.su-form .gform_wrapper .gfield_label {
    font-family: var(--su-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--su-texte);
    font-weight: 400;
}
.su-form .gform_wrapper input[type="text"],
.su-form .gform_wrapper input[type="email"],
.su-form .gform_wrapper input[type="tel"],
.su-form .gform_wrapper select,
.su-form .gform_wrapper textarea {
    border: 1px solid var(--su-champ);
    border-radius: 2px;
    padding: 12px 14px;
    font-family: var(--su-titre);
    font-size: 15px;
}
/* Bouton d'envoi : GF rend un <button class="gform_button"> enveloppé dans
   .submit-button, que le thème dote déjà de son liseré incliné (style.css). */
.su-form .gform_footer { display: block; }
.su-form .submit-button { display: block; width: 100%; }
.su-form .gform_button {
    width: 100%;
    background: #fff;
    color: var(--su-vert);
    border: 1px solid var(--su-vert);
    font-family: var(--su-mono);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 17px 24px;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.su-form .gform_button:hover { background: var(--su-vert); color: #fff; }

/* Consentement RGPD : phrase courante, pas un libellé de champ */
.su-form .gform_wrapper .gfield_consent_label,
.su-form .gform_wrapper .gform-field-label--type-inline,
.su-form .gform_wrapper .gfield--type-consent label,
.su-form .gform_wrapper .gfield_consent_description {
    font-family: var(--su-titre) !important;
    font-size: 13px !important;
    line-height: 1.5;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Cartes de témoignages : même hauteur (comme les engagements) */
.su-testimonials .kt-row-column-wrap { align-items: stretch !important; }
.su-testimonials .su-quote, .su-testimonials .su-quote > .kt-inside-inner-col { height: 100%; }
.su-quote > .kt-inside-inner-col { display: flex !important; flex-direction: column; }
.su-quote__author { margin-top: auto !important; }

/* ============================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .su-title, .su-hero__title { font-size: 34px; }
    .su-hero__rating { top: 10px; right: 0; }
    .su-hero__ambition { position: static !important; width: 100%; max-width: 100%; margin-top: 18px; }
    .su-cta__panel { padding: 40px !important; }
}

@media (max-width: 767px) {
    .su-title, .su-hero__title { font-size: 28px; }
    .su-stat__num { font-size: 42px; }
    .su-hero__photo img { height: 320px; border-width: 10px; }
    .su-experts__photo img { height: 300px; border-width: 12px; border-bottom-width: 30px; }
    .su-hero__rating { position: static !important; width: 100%; margin-top: 16px; }
    .su-card__img img, .su-how__image img { height: 190px; }
    .su-buttons { gap: 12px; }
    .su-btn .wp-block-button__link { width: 100%; justify-content: center; }
}

/* Photo ronde des témoignages réels. */
.su-quote__avatar { grid-row: 1 / 3; margin: 0; }
.su-quote__avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }

/* ============================================================================
   14. PAGE « DÉVELOPPER VOTRE ACTIVITÉ » (maquette 1496:6943)
   ========================================================================== */
.su-split, .su-stats-intro, .su-experts-intro, .su-experts-cards, .su-trends-intro, .su-trends {
    font-family: var(--su-titre);
    color: var(--su-texte);
}

/* Variantes de couleur. */
.su-eyebrow--bleu { color: var(--su-bleu); }
.su-title em.su-em-bleu, .su-hero__title em.su-em-bleu { color: var(--su-bleu); }
.su-text--light, .su-text--light li { color: #fff; }
.su-split .su-hero__photo img { height: 440px; }

/* Liste à puces de la méthode. */
.su-list { margin: 0 0 0 20px; padding: 0; }
.su-list li { font-size: 16px; line-height: 1.62; margin: 0 0 6px; }

/* Encart bleu « Point fort ». */
.su-point-fort {
    position: absolute !important;
    left: -24px;
    bottom: 30px;
    z-index: 2;
    width: 486px;
    max-width: calc(100% + 24px);
    box-shadow: var(--su-ombre);
}
.su-point-fort__title { font-size: 21px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.su-point-fort__text { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .92); margin: 0; }

/* Bandeau des chiffres. */
.su-stats__title { text-align: center; margin: 0; }

/* Fiches « Vos interlocuteurs ». */
.su-experts-cards .kt-row-column-wrap { align-items: stretch !important; }
.su-expert { box-shadow: var(--su-ombre); }
.su-expert__head .kt-row-column-wrap { grid-template-columns: 120px minmax(0, 1fr) !important; }
.su-expert__initials {
    width: 120px; height: 120px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--su-creme);
    font-size: 44px; font-weight: 700; color: var(--su-bleu);
    margin: 0;
}
.su-expert__name { font-size: 26px; line-height: 1.2; color: var(--su-bleu); margin: 0 0 4px; }
.su-expert__job { font-size: 19px; font-weight: 700; color: var(--su-vert); margin: 0; }
.su-expert__bio { font-size: 15px; line-height: 1.6; margin: 18px 0 0; }
.su-expert__quote-box { margin-top: 22px; border: 1px solid var(--su-filet); position: relative; }
.su-expert__quote-box::before {
    content: "“"; position: absolute; top: -22px; left: 6px;
    font-size: 48px; line-height: 1; color: var(--su-vert);
}
.su-expert__quote { font-size: 16px; line-height: 1.55; font-style: italic; font-weight: 700; color: var(--su-brun); margin: 0; }

/* Cartes des tendances. */
.su-trends .kt-row-column-wrap { align-items: stretch !important; }
.su-trend__title { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--su-vert); margin: 0 0 12px; }
.su-trends__lead { max-width: 820px; }

@media (max-width: 1024px) {
    .su-point-fort { position: static !important; width: 100%; max-width: 100%; margin-top: 18px; }
}
@media (max-width: 767px) {
    .su-split .su-hero__photo img { height: 300px; }
    .su-expert__head .kt-row-column-wrap { grid-template-columns: 1fr !important; }
    .su-expert__initials { width: 90px; height: 90px; font-size: 32px; }
}

/* Pas de marge du thème bloc entre nos rangées. */
.wp-block-kadence-rowlayout[class*=" su-"] {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Accueil 2026 : bouton centré sous les cartes de services. */
.su-buttons--center { justify-content: center; }
.su-services--home .kt-row-column-wrap { align-items: stretch !important; }

/* Mobile : bandeau équipe sur toute la largeur. */
@media (max-width: 767px) {
    .su-cta > .kt-row-column-wrap { grid-template-columns: 1fr !important; }
    .su-cta__panel, .su-cta__panel > .kt-inside-inner-col { padding: 40px 20px !important; }
    .su-cta__img img { min-height: 260px; }
}

/* ============================================================================
   15/10/2026 — RETOURS PERRINE
   Pages Installation et Formation (gabarit Bocage, style Suire), décor de la
   maquette (graines et épis), centrage de la conviction et du lead des
   services, mots-clés des titres en bleu.
   ========================================================================== */

/* ---- Mots-clés des titres : bleu par défaut (maquette) ------------------- */
.su-title em { color: var(--su-bleu); }
.su-hero__title em { color: var(--su-vert); }          /* le hero reste en vert */
.su-title em.su-em-vert, .su-hero__title em.su-em-vert { color: var(--su-vert); }
.su-title--light em, .su-title--light em.su-em-bleu { color: #fff; }

/* ---- Conviction et lead des services : centrés --------------------------- */
.su-vision, .su-vision .su-text, .su-vision__footer,
.su-services-intro, .su-services-intro .su-lead { text-align: center; }
.su-vision .su-text, .su-services-intro .su-lead { margin-left: auto; margin-right: auto; }
.su-services-intro .su-lead { max-width: 760px; }

/* ---- Décor : graines et épis de la maquette ------------------------------ */
.su-vision, .su-stats, .su-trends-intro, .su-reseau, .su-parcours-intro, .su-services { position: relative; }
.su-vision::before, .su-trends-intro::before, .su-parcours-intro::before {
    content: ""; position: absolute; top: 46px; left: 40px;
    width: 120px; height: 86px;
    background: url('../icons/graines.svg') no-repeat center / contain;
    opacity: .9; pointer-events: none;
}
.su-trends-intro::before { background-image: url('../icons/blue-seeds.svg'); width: 104px; height: 74px; }
.su-stats::before {
    content: ""; position: absolute; top: 18px; left: 0;
    width: 210px; height: 140px;
    background: url('../icons/LightGraines.svg') no-repeat center / contain;
    opacity: .85; pointer-events: none;
}
.su-stats::after, .su-reseau::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: 170px; height: 260px;
    background: url('../icons/corncob.svg') no-repeat center bottom / contain;
    opacity: .55; pointer-events: none;
}
.su-reseau::after { right: 8px; bottom: -10px; height: 300px; }
.su-services .su-card:first-child::after {
    content: ""; position: absolute; top: 196px; right: 14px;
    width: 76px; height: 54px;
    background: url('../icons/graines.svg') no-repeat center / contain;
    opacity: .9; pointer-events: none; z-index: 2;
}
.su-services .su-card { position: relative; }
@media (max-width: 1024px) {
    .su-vision::before, .su-trends-intro::before, .su-parcours-intro::before,
    .su-stats::before, .su-stats::after, .su-reseau::after,
    .su-services .su-card:first-child::after { display: none; }
}

/* ---- Hero des pages de service ------------------------------------------ */
.su-hero__subtitle {
    font-size: 19px; line-height: 1.45; font-weight: 700;
    color: var(--su-vert); margin: -10px 0 20px;
}

/* ---- Bandeau de chiffres : variante 4 colonnes et note ------------------- */
.su-stats--4 .su-stat__num { font-size: 42px; }
.su-stats__note { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .92); margin: 0; }

/* ---- Chapeau de section -------------------------------------------------- */
.su-lead { font-size: 17px; line-height: 1.6; }

/* ---- Méthode : le numéro collé à son texte -------------------------------
   Une rangée Kadence à 2 colonnes est en 50/50 : sans cette grille, le numéro
   reste à gauche et son texte part à l'autre bout de la colonne. */
.su-step .kt-row-column-wrap {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    column-gap: 20px !important;
    align-items: start;
}
.su-step__col-num { max-width: 76px; }

/* ---- Parcours en 10 étapes ----------------------------------------------- */
.su-parcours .kt-row-column-wrap { align-items: start !important; }
.su-etape .kt-row-column-wrap { grid-template-columns: 54px minmax(0, 1fr) !important; align-items: start; }
.su-etape__num {
    font-family: var(--su-mono); font-size: 24px; line-height: 1.1;
    color: var(--su-vert); margin: 0;
}
.su-etape__title { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--su-bleu); margin: 0 0 4px; }
.su-etape__text { font-size: 15px; line-height: 1.55; margin: 0; }

/* ---- « Pourquoi nous ? » : 3 cartes bleues ------------------------------- */
.su-whys .su-why__title { font-size: 20px; }
.su-whys .su-why__text { font-size: 15px; }
.su-whys-cta .su-buttons { justify-content: center; }

@media (max-width: 767px) {
    .su-hero__subtitle { font-size: 17px; }
    .su-etape .kt-row-column-wrap { grid-template-columns: 44px minmax(0, 1fr) !important; }
    .su-stats--4 .su-stat__num { font-size: 36px; }
}