/*
 * services.css — pages éditoriales de présentation de l'offre.
 *
 * Chargée par les quatre pages de service (App Mobile, Solution Web, IA,
 * Notre expertise) et par « Qui sommes-nous », qui partagent le même
 * vocabulaire : bandeau d'accroche, sections alternées clair/sombre, cartes de
 * contenu, cartes dépliantes et étapes numérotées.
 *
 * Ce qui n'appartient qu'à « Qui sommes-nous » (bloc ambition, boucle du cycle
 * de vie, carte des valeurs, pastilles ADN) reste dans societe.css.
 *
 * Sommaire
 *   1. Bandeau d'accroche
 *   2. Sections et titres
 *   3. Grilles et listes de contenu
 *   4. Cartes de contenu
 *   5. Cartes dépliantes
 *   6. Étapes numérotées
 *   7. Chaîne d'icônes
 *   8. Responsive
 */

/* ---------------------------------------------------------- 1. Bandeau d'accroche */

/*
 * Le fond pastel court sur toute la largeur : il est donc posé sur la section
 * elle-même, hors `container-fluid`, et c'est la grille intérieure qui reprend
 * le cadrage des pages.
 */
.service-hero {
    background: var(--bleu-pastel);
    padding: 52px 0;
}

.service-hero__grille {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: center;
    min-height: 390px;
}

.service-hero__titre {
    font-size: 42px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--titre);
}

.service-hero__titre em {
    font-style: normal;
    color: var(--bleu);
}

.service-hero__chapo {
    font-size: 16px;
    line-height: 1.7;
    color: var(--texte-doux);
    margin-top: 18px;
    max-width: 640px;
}

.service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.service-hero__visuel {
    height: 390px;
    border-radius: var(--rayon-xl);
    overflow: hidden;
    border: 1px solid var(--bordure-2);
    background: var(--fond-gris);
}

.service-hero__visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Accroche centrée, sans visuel : « Notre expertise » et « Qui sommes-nous ». */
.service-entete {
    padding: 52px 0 10px;
    text-align: center;
}

.service-entete__titre {
    font-size: 42px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--titre);
    max-width: 1040px;
    margin: 0 auto;
}

.service-entete__chapo {
    font-size: 17px;
    line-height: 1.7;
    color: var(--texte-doux);
    max-width: 860px;
    margin: 18px auto 0;
}

/* ---------------------------------------------------------- 2. Sections et titres */

.service-section {
    padding-top: 70px;
}

.service-section__titre {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.service-section__sous-titre {
    font-size: 19px;
    font-weight: 800;
    color: var(--titre);
}

/*
 * Section sur fond bleu nuit. Deux variantes de cadrage : pleine largeur
 * (`--pleine`, le fond touche les bords de la fenêtre) ou encadrée
 * (`--encadree`, une carte arrondie dans la gouttière des pages).
 */
.service-section--sombre {
    /* Redéfinit la couleur du corps de texte pour tout ce que la section contient. */
    --service-texte: #BCD4E6;

    background: var(--bleu-nuit);
    padding: 70px 0;
    margin-top: 70px;
}

.service-section--sombre .service-section__titre,
.service-section--sombre .service-section__sous-titre {
    color: #FFFFFF;
}

.service-section--sombre p,
.service-section--sombre li {
    color: var(--service-texte);
}

.service-section--encadree {
    border-radius: var(--rayon-xl);
    padding: 70px var(--gouttiere);
}

/* ---------------------------------------------------------- 3. Grilles et listes */

/*
 * Les grilles sont écrites en mobile d'abord : une seule colonne par défaut,
 * l'écartement de la grille tenant lieu de marge basse entre les blocs. Elles
 * se déplient d'un coup au palier `md` de Bootstrap (768 px), sans étape
 * intermédiaire à deux colonnes — trois cartes doivent tenir sur une ligne dès
 * qu'on est sur un ordinateur.
 */
.service-grille,
.service-grille--cartes,
.service-grille--deux-cartes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.service-grille {
    gap: 48px;
    margin-top: 16px;
}

.service-grille--cartes {
    gap: 18px;
    margin-top: 36px;
}

.service-grille--deux-cartes {
    gap: 18px;
    margin-top: 44px;
}

@media (min-width: 768px) {
    .service-grille,
    .service-grille--deux-cartes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-grille--large-gauche {
        grid-template-columns: 1.2fr .8fr;
    }

    .service-grille--cartes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Colonne de paragraphes : l'espacement vertical est porté par la colonne. */
.service-colonne {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/*
 * La couleur du corps de texte passe par un jeton, pas par une règle plus
 * spécifique : une section sombre le redéfinit une fois, et tout ce qu'elle
 * contient suit — sans avoir à répéter un sélecteur par composant, ni à parier
 * sur l'ordre de déclaration. Les fragments mis en couleur (`.accent-corail`,
 * `.accent-bleu`) fixent la leur et ne sont donc pas concernés.
 */
.service-colonne p,
.service-texte,
.liste-puces li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--service-texte, var(--texte-doux));
    font-family: var(--corps-police);
}

.service-colonne__titre {
    font-size: 15px;
    font-weight: 800;
    color: var(--service-texte, var(--texte-doux));
    font-family: var(--corps-police);
}

.liste-puces {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 0;
    padding-left: 22px;
}

/* Mise en avant d'un fragment de phrase, aux deux couleurs de la marque. */
.accent-bleu {
    color: var(--bleu);
}

.accent-corail {
    color: #FF8177;
}

.service-icone-corail {
    color: #FF8177;
    font-size: 15px;
    margin-right: 9px;
}

/* ---------------------------------------------------------- 4. Cartes de contenu */

.carte-service {
    border-radius: var(--rayon-l);
    padding: 32px;
    display: flex;
    flex-direction: column;
    background: var(--bleu-nuit);
}

.carte-service__titre {
    font-size: 19px;
    font-weight: 800;
    color: #FFFFFF;
}

.carte-service p {
    color: #BCD4E6;
    font-size: 14.5px;
    line-height: 1.6;
    margin-top: 10px;
}

/* Même carte, sur fond pastel : les « trois approches » d'App Mobile. */
.carte-service--claire {
    background: var(--bleu-pastel);
}

.carte-service--claire .carte-service__titre {
    color: var(--titre);
    font-size: 18px;
}

.carte-service--claire p {
    color: var(--texte-gris);
    font-size: 14px;
    margin-top: 12px;
}

.carte-service__entete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carte-service__icone {
    flex: none;
    font-size: 22px;
    color: var(--bleu);
}

/* Carte large à titre proéminent : les deux blocs de bas de Solution Web. */
.carte-mise-en-avant {
    border-radius: var(--rayon-l);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bleu-pastel);
}

.carte-mise-en-avant__titre {
    font-size: 32px;
    font-weight: 800;
    color: var(--titre);
}

.carte-mise-en-avant p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--texte-doux);
    font-family: var(--corps-police);
}

/* ---------------------------------------------------------- 5. Cartes dépliantes */

/*
 * Carte sombre repliable (IA, Notre expertise). Comme la FAQ, elle s'appuie sur
 * `<details>` : sans JavaScript, la carte s'ouvre quand même.
 */
.carte-depliante {
    border-radius: var(--rayon-l);
    background: var(--bleu-nuit);
    overflow: hidden;
}

.carte-depliante__entete {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 100px;
    padding: 20px 24px;
    cursor: pointer;
    font-family: var(--titre-police);
    list-style: none;
}

.carte-depliante__entete::-webkit-details-marker {
    display: none;
}

.carte-depliante__titre {
    flex: 1;
    font-size: 17px;
    font-weight: 800;
    color: #FFFFFF;
}

.carte-depliante__chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #7FD0FA;
    font-size: 11px;
    transition: transform .2s ease;
}

.carte-depliante[open] .carte-depliante__chevron {
    transform: rotate(180deg);
}

.carte-depliante__corps {
    padding: 0 24px 24px;
}

.carte-depliante__corps p {
    color: #BCD4E6;
    font-size: 14.5px;
    line-height: 1.6;
}

.carte-depliante__corps p + p {
    margin-top: 12px;
}

/* ---------------------------------------------------------- 6. Étapes numérotées */

.etape {
    display: flex;
    align-items: center;
    gap: 14px;
}

.etape__numero {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #FFEDE9;
    color: var(--corail);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--titre-police);
    font-weight: 800;
    font-size: 15px;
}

.etape__numero i {
    font-size: 16px;
}

.etape__titre {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Sur « Qui sommes-nous » les étapes sont des sous-titres, pas des titres. */
.etape__titre--petit {
    font-size: 22px;
}

.service-section--sombre .etape__titre {
    color: #FFFFFF;
}

/*
 * Le corps d'une étape est retiré vers l'intérieur : la maquette aligne le
 * texte sur le titre, pas sur la pastille numérotée.
 */
.etape__corps {
    padding-left: 52px;
    margin-top: 16px;
}

/* ---------------------------------------------------------- 7. Chaîne d'icônes */

/* « Idée → Conception → Application mobile », sur la page App Mobile. */
.chaine-icones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 44px;
    flex-wrap: wrap;
}

.chaine-icones__etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: none;
    max-width: 120px;
    text-align: center;
}

.chaine-icones__pastille {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFEDE9;
    color: var(--corail);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.chaine-icones__libelle {
    font-size: 12px;
    font-weight: 700;
    color: var(--corail);
    font-family: var(--titre-police);
}

.chaine-icones__lien {
    flex: none;
    width: 90px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 22px;
    color: var(--bordure-tiret);
    font-size: 11px;
}

.chaine-icones__trait {
    flex: 1;
    height: 0;
    border-top: 2px dashed var(--bordure-tiret);
}

/* ---------------------------------------------------------- 7 bis. Blocs divers */

/*
 * Bandeau rose « ambition » : un visuel et un texte, le fond courant sur toute
 * la largeur. Partagé par « Notre expertise » et « Qui sommes-nous ».
 */
.bloc-ambition {
    background: #FFEDE9;
    margin-top: 40px;
}

/* Titre d'étape au-dessus du bloc : même respiration qu'une section de service. */
.bloc-ambition__entete {
    padding-top: 70px;
}

.bloc-ambition__grille {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 48px;
    align-items: center;
    padding: 48px var(--gouttiere);
    max-width: var(--largeur-max);
    margin: 0 auto;
}

.bloc-ambition__visuel {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--fond-gris);
}

.bloc-ambition__visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Variante illustration : le visuel respire au lieu d'être recadré. */
.bloc-ambition__visuel--contenu {
    background: var(--fond);
}

.bloc-ambition__visuel--contenu img {
    object-fit: contain;
    padding: 8%;
}

.bloc-ambition__texte {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 30px;
}

.bloc-ambition__texte p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--texte-doux);
}

/*
 * `align-self` est indispensable : le conteneur est un flex en colonne, dont
 * l'étirement par défaut écraserait le `width: auto` et déformerait le logo.
 */
.bloc-ambition__logo {
    align-self: flex-start;
    height: 32px;
    width: auto;
    display: block;
    margin-bottom: 2px;
}

.bloc-ambition__titre {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Visuel intercalé dans une colonne de texte (Solution Web). */
.service-visuel-secondaire {
    margin-top: 14px;
    border-radius: var(--rayon);
    overflow: hidden;
    height: 150px;
    background: var(--fond-gris);
}

.service-visuel-secondaire img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bouton en pied de colonne : il ne doit pas s'étirer sur toute la largeur. */
.service-section__actions {
    display: flex;
    margin-top: 28px;
}

.service-colonne__bouton {
    align-self: flex-start;
    margin-top: auto;
}

/* Texte long réparti sur deux colonnes typographiques (étape 1 de l'expertise). */
.colonnes-deux {
    column-count: 2;
    column-gap: 48px;
}

.colonnes-deux > * {
    break-inside: avoid;
}

.colonnes-deux > * + * {
    margin-top: 14px;
}

.service-section--compacte {
    padding-top: 36px;
}

/* Liste d'exigences : des articles séparés, chacun titre + paragraphes. */
.exigences {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.exigence {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exigence__numero {
    color: var(--bleu);
}

.exigence p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--service-texte, var(--texte-doux));
    font-family: var(--corps-police);
}

.exigence__visuel {
    margin: 0;
    border-radius: var(--rayon);
    overflow: hidden;
    height: 120px;
    background: var(--fond-gris);
}

.exigence__visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------- 8. Responsive */

/*
 * Les grilles de contenu se replient d'elles-mêmes au palier `md` (voir la
 * section 3). Restent ici les paliers propres au reste de la page : le bandeau
 * d'accroche, dont la mise en deux colonnes ne tient plus dès la tablette, et
 * les tailles de titres.
 */
@media (max-width: 991.98px) {
    .service-hero__grille {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .service-grille {
        gap: 32px;
    }

    .service-hero__titre,
    .service-entete__titre {
        font-size: 32px;
    }

    .service-hero__visuel {
        height: 260px;
    }

    .service-section__titre,
    .etape__titre {
        font-size: 26px;
    }

    .carte-mise-en-avant__titre {
        font-size: 26px;
    }

    .service-section--encadree {
        padding: 48px 28px;
    }

    .bloc-ambition__grille {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px var(--gouttiere);
    }

    .bloc-ambition__texte {
        padding: 0;
    }

    .colonnes-deux {
        column-count: 1;
    }
}

@media (max-width: 767.98px) {
    .service-section,
    .bloc-ambition__entete {
        padding-top: 48px;
    }

    .service-section--sombre {
        padding: 48px 0;
        margin-top: 48px;
    }

    .etape__corps {
        padding-left: 0;
    }

    .etape__titre {
        font-size: 22px;
    }

    /* La chaîne d'icônes passe à la verticale : les traits n'ont plus de sens. */
    .chaine-icones {
        flex-direction: column;
    }

    .chaine-icones__lien {
        width: auto;
        padding-bottom: 0;
        transform: rotate(90deg);
    }
}