/*
 * societe.css — page « Qui sommes-nous ».
 *
 * Chargée après services.css, dont la page reprend l'essentiel du vocabulaire
 * (bandeau d'accroche, étapes numérotées, cartes, grilles). Ne figure ici que
 * ce qui n'appartient qu'à cette page : l'accroche corail, les variantes de
 * cartes, la boucle du cycle de vie, la carte des valeurs et les pastilles ADN.
 *
 * Sommaire
 *   1. Accroche et sous-titres
 *   2. Variantes de cartes
 *   3. Boucle du cycle de vie
 *   4. Carte des valeurs
 *   5. Pastilles ADN
 *   6. Responsive
 */

/* ---------------------------------------------------------- 1. Accroche */

.societe-accroche {
    max-width: 900px;
    margin: 64px auto 0;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--corail);
}

.societe-sous-titre {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--titre);
}

.accent-corail-fort {
    color: var(--corail-vif);
}

/* ---------------------------------------------------------- 2. Variantes de cartes */

/* Carte sombre des domaines d'expertise : icône dans une pastille translucide. */
.carte-service--bordee {
    border: 1px solid rgba(255, 255, 255, .06);
}

.carte-service__pastille {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    color: var(--bleu);
    font-size: 20px;
}

.carte-service--bordee .carte-service__titre {
    font-size: 18px;
}

.carte-service--bordee p {
    color: var(--sur-sombre);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 12px;
}

/* Carte rose des trois approches de réalisation. */
.carte-service--rose {
    background: #FFEDE9;
}

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

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

.carte-service__icone--corail {
    color: var(--corail-vif);
}

/* ---------------------------------------------------------- 3. Boucle du cycle de vie */

/*
 * Sur grand écran, les sept étapes sont posées sur un tracé en boucle : le
 * conteneur garde un rapport fixe et chaque carte est placée en pourcentage,
 * comme sur la maquette. Sous 992 px, tout retombe en grille et le tracé
 * disparaît : la liste ordonnée reste lisible et l'ordre est déjà porté par les
 * numéros.
 */
.parcours {
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin: 30px auto 0;
}

.parcours__trace {
    position: absolute;
    inset: 15% 1%;
    width: 98%;
    height: 70%;
    overflow: visible;
}

.parcours__trait {
    fill: none;
    stroke-width: 40;
    stroke-linecap: round;
}

.parcours__trait--corail {
    stroke: var(--corail-vif);
}

.parcours__trait--bleu {
    stroke: var(--bleu);
}

.parcours__etapes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.parcours__etape {
    background: var(--fond);
    border: 1px solid var(--bordure-2);
    border-radius: var(--rayon-l);
    /* Ombre large et marquée, doublée d'une ombre courte qui dessine le bord :
       les cartes blanches doivent se détacher nettement du fond. */
    box-shadow:
        0 20px 44px rgba(20, 30, 45, .2),
        0 4px 12px rgba(20, 30, 45, .1);
    padding: 12px 13px 13px;
}

.parcours__entete {
    display: flex;
    align-items: center;
    gap: 10px;
}

.parcours__numero {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--titre-police);
    font-weight: 800;
    font-size: 12px;
}

.parcours__numero--corail {
    background: var(--corail-vif);
}

.parcours__numero--bleu {
    background: var(--bleu);
}

.parcours__titre {
    font-family: var(--titre-police);
    font-weight: 800;
    font-size: 15px;
    color: var(--titre);
}

.parcours__illustration {
    width: 100%;
    height: 46px;
    object-fit: contain;
    display: block;
    margin-top: 6px;
}

.parcours__texte {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--texte-doux);
    margin-top: 6px;
}

@media (min-width: 992px) {
    .parcours {
        aspect-ratio: 2.05;
        min-height: 534px;
    }

    .parcours__etapes {
        position: absolute;
        inset: 0;
    }

    .parcours__etape {
        position: absolute;
        transform: translate(-50%, -50%);
        width: 20%;
        min-width: 180px;
        max-width: 214px;
    }

    /* Les trois étapes de conception, en haut, de gauche à droite. */
    .parcours__etape--1 {
        left: 22%;
        top: 19%;
    }

    .parcours__etape--2 {
        left: 50%;
        top: 19%;
    }

    .parcours__etape--3 {
        left: 78%;
        top: 19%;
    }

    /* Puis la boucle redescend par la droite et revient par la gauche. */
    .parcours__etape--4 {
        left: 89%;
        top: 57%;
    }

    .parcours__etape--5 {
        left: 65%;
        top: 79%;
    }

    .parcours__etape--6 {
        left: 35%;
        top: 79%;
    }

    .parcours__etape--7 {
        left: 11%;
        top: 57%;
    }
}

@media (max-width: 991.98px) {
    .parcours__trace {
        display: none;
    }

    .parcours__etapes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }

    .parcours__texte {
        font-size: 13px;
    }
}

/* ---------------------------------------------------------- 4. Carte des valeurs */

.carte-valeurs {
    margin-top: 24px;
    background: var(--bleu-nuit);
    border-radius: var(--rayon-xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    align-items: stretch;
}

.carte-valeurs__texte {
    padding: 56px;
}

.carte-valeurs__titre {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #FFFFFF;
}

.carte-valeurs__chapo {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sur-sombre);
    margin-top: 8px;
    padding-right: 50px;
}

.carte-valeurs__liste {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carte-valeurs__liste li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: #FFFFFF;
}

/* Puce carrée bleu pâle, comme sur la maquette. */
.carte-valeurs__liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #BCE4FC;
}

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

/* ---------------------------------------------------------- 5. Pastilles ADN */

.pastilles-adn {
    list-style: none;
    margin: 30px auto 0;
    padding: 0 150px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.pastilles-adn__item {
    background: var(--fond-gris);
    border-radius: var(--rayon);
    padding: 14px 18px;
    min-width: 140px;
    text-align: center;
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 15px;
    color: var(--titre);
}

/* ---------------------------------------------------------- 6. Responsive */

@media (max-width: 991.98px) {
    .carte-valeurs {
        grid-template-columns: 1fr;
    }

    .carte-valeurs__texte {
        padding: 36px 28px;
    }

    .carte-valeurs__chapo {
        padding-right: 0;
    }

    .carte-valeurs__visuel {
        height: 260px;
    }

    .pastilles-adn {
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    .societe-accroche {
        margin-top: 40px;
    }

    .pastilles-adn__item {
        min-width: 0;
        flex: 1 1 45%;
        font-size: 14px;
    }
}