/* Block: services-showcase
   Service phare en vitrine (texte + photo), 4 services en fiches
   horizontales, bandeau specialite en pied de section. */

.tull-services__inner { max-width: 1240px; margin: 0 auto; }

/* theme.json plafonne h2 a 30px (--wp--preset--font-size--h-2) ; la maquette
   donne 40px aux titres de section. On reprend la valeur de la maquette,
   comme .tull-pillars__title. */
.tull-services__title {
    text-align: center;
    margin: 0 0 48px;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    text-wrap: balance;
}

/* ---- Service phare ---- */
.tull-services__featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
    border-radius: 0 0 0 40px;
    overflow: hidden;
    margin-bottom: 20px;
}
.tull-services__featured-text { padding: clamp(32px, 4.5vw, 56px); }
.tull-services__featured-title {
    color: var(--wp--preset--color--white);
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 6px;
}
.tull-services__featured-sub {
    color: var(--wp--preset--color--primary);
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 18px;
}
.tull-services__featured-text p { color: rgba(255, 255, 255, .78); }
.tull-services__featured-cta { margin-top: 8px; }
a.tull-services__featured-cta:hover,
.tull-services__featured-cta:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--primary);
}

.tull-services__featured-visual { position: relative; min-height: 280px; }
.tull-services__featured-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Degrade lateral : la photo se fond dans le panneau sombre. */
.tull-services__featured-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--wp--preset--color--dark) 0%, transparent 35%);
}

/* ---- Grille de services ---- */
.tull-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.tull-services__card {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--dark);
    border: 1px solid #E9ECF2;
    border-radius: 0 0 0 24px;
    padding: 32px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: start;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tull-services__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(29, 33, 52, .12);
    border-color: transparent;
}
.tull-services__card:hover .tull-icon-box {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}
.tull-services__card-title {
    font-size: 20px;
    margin: 2px 0 10px;
    color: var(--wp--preset--color--dark);
}
.tull-services__card-text {
    color: #4B5265;
    font-size: 15px;
    margin: 0;
}
.tull-services__card .tull-text-link { margin-top: 16px; }

/* ---- Bandeau specialite ---- */
.tull-services__highlight {
    margin-top: 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(24px, 3vw, 40px);
    align-items: center;
    background: rgba(207, 43, 89, .07);
    border: 1px solid rgba(207, 43, 89, .14);
    border-radius: 0 0 0 24px;
    padding: clamp(28px, 4vw, 44px);
}
/* Selecteurs composes pour la meme raison que ci-dessus : `.tull-icon-box`
   et `.tull-icon-box svg` de _shared.css passent apres ce fichier. */
.tull-icon-box.tull-icon-box--lg { width: 64px; height: 64px; }
.tull-icon-box.tull-icon-box--lg svg { width: 30px; height: 30px; }
.tull-services__highlight-title {
    font-size: 20px;
    margin: 0 0 10px;
    color: var(--wp--preset--color--dark);
}
.tull-services__highlight-text {
    margin: 0;
    color: #4B5265;
    font-size: 15px;
}
.tull-services__highlight-cta { white-space: nowrap; }

/* Sur fond sombre, les cartes blanches deviennent des surfaces translucides. */
.tull-section--dark .tull-services__card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: var(--wp--preset--color--white);
}
.tull-section--dark .tull-services__card-title,
.tull-section--dark .tull-services__highlight-title { color: var(--wp--preset--color--white); }
.tull-section--dark .tull-services__card-text,
.tull-section--dark .tull-services__highlight-text { color: rgba(255, 255, 255, .72); }

@media (max-width: 960px) {
    .tull-services__featured { grid-template-columns: 1fr; }
    .tull-services__featured-visual { min-height: 220px; order: -1; }
    .tull-services__featured-visual::after {
        background: linear-gradient(0deg, var(--wp--preset--color--dark) 0%, transparent 40%);
    }
    .tull-services__grid { grid-template-columns: 1fr; }
    .tull-services__highlight { grid-template-columns: auto 1fr; }
    .tull-services__highlight-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 620px) {
    .tull-services__card { grid-template-columns: 1fr; }
    .tull-services__highlight { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .tull-services__featured { border-radius: 0 0 0 28px; }
    .tull-services__featured-text { padding: 28px 22px; }
    .tull-services__card { padding: 24px 20px; gap: 16px; }
    .tull-services__highlight { padding: 24px 20px; gap: 18px; }
}

/* ---------------------------------------------------------------------------
   Ajouts pages service (2026-09) : liste a coches dans les cartes + panneau
   sombre de cloture de section.
   --------------------------------------------------------------------------- */

/* Le texte de carte est desormais un bloc (plusieurs paragraphes possibles). */
.tull-services__card-text p { margin: 0 0 12px; }
.tull-services__card-text p:last-child { margin-bottom: 0; }

/* Respiration entre le texte de la carte et les coches : le dernier
   paragraphe a sa marge basse a 0, l'ecart vient donc entierement d'ici.
   Selecteur compose (0-2-0) : le CSS des blocs est inline AVANT main.css,
   donc `.tull-checks { margin: 0 }` de _shared.css (0-1-0, source plus
   tardive) gagnerait sur un simple `.tull-services__card-checks`. */
.tull-services__card .tull-services__card-checks { margin-top: 24px; }

/* Disposition "vertical" (maquette des pages service) : l'icone passe au-dessus
   du texte. Le corps de carte etant deja une colonne flex, il suffit de
   repasser la carte sur une seule colonne de grille. */
.tull-services__grid--vertical .tull-services__card {
    grid-template-columns: 1fr;
    /* Les cartes d'une meme ligne ont la hauteur de la plus haute. Sans
       `grid-template-rows`, l'espace en trop est reparti sur les deux lignes
       auto : la pastille d'icone se retrouvait poussee vers le bas, avec un
       ecart icone/titre different d'une carte a l'autre. Ici la ligne de
       l'icone garde sa hauteur et c'est le corps qui absorbe le reste (ce qui
       laisse aussi le lien "Decouvrir" colle en pied). */
    grid-template-rows: auto 1fr;
    gap: 20px;
}

/* Cartes de hauteurs inegales : le lien "En savoir plus" reste colle en pied.
   Declare apres la regle margin-top: 16px plus haut (meme specificite). */
.tull-services__card-body {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
.tull-services__card .tull-text-link {
    margin-top: auto;
    padding-top: 24px;
    align-self: flex-start;
}

/* ---- Panneau sombre de cloture (ex. "Une informatique qui evolue") ---- */
.tull-services__panel {
    margin-top: 20px;
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
    border-radius: 0 0 0 24px;
    padding: clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
/* Sur fond sombre le panneau a besoin d'un lisere pour se detacher. */
.tull-section--dark .tull-services__panel { border: 1px solid rgba(255, 255, 255, .12); }

.tull-services__panel-title {
    color: var(--wp--preset--color--white);
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 20px;
}
.tull-services__panel-text p {
    color: rgba(255, 255, 255, .78);
    margin: 0 0 16px;
}
.tull-services__panel-text p:last-child { margin-bottom: 0; }

.tull-services__panel-cta { margin-top: 24px; }
a.tull-services__panel-cta:hover,
.tull-services__panel-cta:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--primary);
}

@media (max-width: 900px) {
    .tull-services__panel { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .tull-services__panel { padding: 26px 22px; border-radius: 0 0 0 20px; }
}

/* ---- Disposition "row" : 1 carte par ligne, marqueur a gauche ----
   Les cartes perdent leur encadre et sont separees par un simple filet : sur
   3 blocs de texte long (page Nos engagements), l'encadre alourdissait la page.
   La piste du marqueur est FIXE et non `auto` : chaque carte etant sa propre
   grille, une piste `auto` ne ferait coincider les colonnes de texte que par
   chance (elle se dimensionne au contenu du marqueur). */
.tull-services__grid--row {
    grid-template-columns: 1fr;
    gap: 0;
}
.tull-services__grid--row .tull-services__card {
    background: transparent;
    border: 0;
    border-top: 1px solid #E9ECF2;
    border-radius: 0;
    padding: clamp(36px, 4.5vw, 60px) 0;
    grid-template-columns: clamp(72px, 7.5vw, 116px) 1fr;
    gap: clamp(20px, 3vw, 44px);
}
.tull-services__grid--row .tull-services__card:first-child {
    border-top: 0;
    padding-top: 0;
}
.tull-services__grid--row .tull-services__card:last-child { padding-bottom: 0; }
/* Pas de carte a soulever : on neutralise le survol de la variante encadree. */
.tull-services__grid--row .tull-services__card:hover {
    transform: none;
    box-shadow: none;
    border-color: #E9ECF2;
}
.tull-services__grid--row .tull-services__card:first-child:hover { border-top-color: transparent; }
.tull-services__grid--row .tull-services__card-title {
    font-size: clamp(23px, 2.4vw, 32px);
    line-height: 1.25;
    margin: 0 0 16px;
}
/* Marge du helper partage .tull-checks : 24px apres un paragraphe qui a deja
   16px de marge basse faisait 40px. Selecteur compose pour passer devant la
   regle `.tull-services__card .tull-services__card-checks` ci-dessus. */
.tull-services__grid--row .tull-services__card .tull-services__card-checks { margin-top: 4px; }

/* Grand chiffre en filigrane (champ `numbered`) */
.tull-services__card-num {
    font-size: clamp(46px, 6vw, 88px);
    font-weight: 700;
    /* line-height 1 : sous 1, le glyphe remonte hors de sa boite et le chiffre
       ne s'aligne plus sur la capitale du titre voisin. */
    line-height: 1;
    color: rgba(207, 43, 89, .28);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.tull-section--dark .tull-services__card-num { color: rgba(255, 255, 255, .22); }

/* Encadre de cloture de carte (champ `goal`) */
.tull-services__card-goal {
    margin: 24px 0 0;
    background: rgba(207, 43, 89, .07);
    border: 1px solid rgba(207, 43, 89, .14);
    border-radius: 0 0 0 18px;
    padding: 18px 22px;
    color: var(--wp--preset--color--dark);
    font-weight: 600;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.45;
}
.tull-section--dark .tull-services__card-goal {
    color: var(--wp--preset--color--white);
    background: rgba(207, 43, 89, .16);
    border-color: rgba(207, 43, 89, .3);
}

/* Mobile : le marqueur passe au-dessus du titre. A 28% d'opacite et grande
   taille il ressemblait a un artefact -> plus petit, plus dense, colle au titre. */
@media (max-width: 760px) {
    .tull-services__grid--row .tull-services__card {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .tull-services__card-num {
        font-size: 34px;
        color: rgba(207, 43, 89, .45);
    }
    .tull-section--dark .tull-services__card-num { color: rgba(255, 255, 255, .4); }
    .tull-services__card-goal { padding: 16px 18px; }
}

/* Chapo de section (champ `lead`) */
.tull-services__lead {
    max-width: 820px;
    margin: -8px auto clamp(32px, 4vw, 48px);
    text-align: center;
}
.tull-services__lead > :last-child { margin-bottom: 0; }

/* 1re carte pleine largeur (champ `first_wide`) : met un service phare en
   avant sans passer par la vitrine, qui elle exige une photo. */
.tull-services__grid--first-wide .tull-services__card:first-child {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    gap: clamp(22px, 3vw, 36px);
    background: var(--wp--preset--color--gray-light);
    border-color: #E4E7EE;
}
.tull-services__grid--first-wide .tull-services__card:first-child .tull-icon-box { margin-bottom: 0; }
.tull-services__grid--first-wide .tull-services__card:first-child .tull-services__card-title {
    font-size: clamp(22px, 2.2vw, 26px);
}
@media (max-width: 900px) {
    .tull-services__grid--first-wide .tull-services__card:first-child {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}