/*
 * Pages de contenu : services, articles, réalisations, villes, contact.
 * Elles partagent un seul gabarit — bandeau de titre, corps en deux colonnes,
 * blocs de fin — pour que le site reste reconnaissable en dehors de l'accueil.
 */

.tete-page {
    position: relative;
    padding-block: calc(var(--entete-h) + clamp(2.5rem, 7vh, 5rem)) clamp(2rem, 5vh, 3.5rem);
    overflow: clip;
}

.tete-page__contenu {
    position: relative;
    z-index: var(--z-contenu);
    display: grid;
    gap: 1.5rem;
    justify-items: start;
}

.tete-page__titre {
    /* Assez large pour ne pas laisser un grand blanc à droite sur ordinateur. */
    max-inline-size: 26ch;
}

.tete-page__chapo {
    max-inline-size: 72ch;
    font-size: var(--t-md);
}

.tete-page__punchline {
    font-family: var(--police-titre);
    font-size: var(--t-md);
    color: var(--texte-tres-doux);
    font-style: italic;
}

/* — Fil d'Ariane — */
.ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    color: var(--texte-tres-doux);
}

.ariane li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ariane li + li::before {
    content: "/";
    color: var(--trait-fort);
}

.ariane a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease-sortie);
}

.ariane a:hover {
    color: var(--texte);
}

.ariane [aria-current="page"] {
    color: var(--texte-doux);
}

/* — Corps de page — */
.corps-page {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: start;
}

.corps-page__annexe {
    display: grid;
    gap: 2rem;
    align-content: start;
}

@media (min-width: 62rem) {
    .corps-page {
        grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    }

    .corps-page__annexe {
        position: sticky;
        inset-block-start: calc(var(--entete-h) + 2rem);
    }
}

.encart {
    padding: 1.5rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background-color: color-mix(in srgb, var(--fond-eleve) 55%, transparent);
    display: grid;
    gap: 0.9rem;
}

.encart__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-base);
    letter-spacing: -0.01em;
}

.encart ul {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    font-size: var(--t-sm);
}

.encart a {
    color: var(--texte-doux);
    text-decoration: none;
    transition: color 0.3s var(--ease-sortie);
}

.encart a:hover {
    color: var(--texte);
}

/* — FAQ — */
.faq {
    display: grid;
    gap: 0;
    border-block-start: 1px solid var(--trait);
}

.faq__entree {
    border-block-end: 1px solid var(--trait);
}

.faq__question {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: clamp(1rem, 2.5vw, 1.6rem);
    font-family: var(--police-titre);
    font-size: var(--t-md);
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
    transition: color 0.3s var(--ease-sortie);
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question:hover {
    color: var(--accent-3);
}

/* Le signe s'ouvre en croix : un plus qui devient un moins. */
.faq__signe {
    position: relative;
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: 0.35em;
}

.faq__signe::before,
.faq__signe::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background: currentColor;
    transition: transform 0.4s var(--ease-sortie);
}

.faq__signe::after {
    transform: rotate(90deg);
}

.faq__entree[open] .faq__signe::after {
    transform: rotate(0deg);
}

.faq__reponse {
    overflow: hidden;
    color: var(--texte-doux);
    padding-block-end: 1.5rem;
    max-inline-size: 62ch;
}

.faq__reponse > * + * {
    margin-block-start: 0.9rem;
}

/* Dans une grille de cartes, le titre redescend d'un cran : c'est une phrase. */
.grille-cartes .carte__titre {
    font-size: var(--t-md);
    line-height: 1.15;
}

/* — Grilles de listes (réalisations, articles, villes) — */
.grille-cartes {
    display: grid;
    /* 20rem plutôt que 17 : en dessous, les titres de cas clients — qui sont
       des phrases, pas des étiquettes — se hachent en colonnes trop étroites. */
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: clamp(1.25rem, 3vw, 2.25rem);
    list-style: none;
    padding: 0;
}

.grille-cartes > li {
    display: grid;
}

/* — Bloc de résultats d'une réalisation — */
.resultats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.5rem;
    padding-block: 1.75rem;
    border-block: 1px solid var(--trait);
}

.resultats__valeur {
    font-family: var(--police-titre);
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1;
}

/* — Technologies — */
.technos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

/* — Le reste de l'offre : les pages sœurs, en cartes — */
.fratrie {
    display: grid;
    gap: 2rem;
}

.fratrie__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fratrie__carte {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.6rem;
    block-size: 100%;
    padding: 1.4rem;
    border: 1px solid var(--trait);
    border-radius: 1.1rem;
    background: var(--fond);
    color: var(--texte);
    text-decoration: none;
    transition:
        border-color 0.3s var(--ease-sortie),
        transform 0.3s var(--ease-sortie),
        box-shadow 0.3s var(--ease-sortie);
}

.fratrie__carte:is(:hover, :focus-visible) {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 1.2rem 2.4rem -1.4rem color-mix(in srgb, var(--accent) 45%, transparent);
}

.fratrie__picto {
    display: inline-grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

.fratrie__picto svg {
    inline-size: 1.4rem;
    block-size: 1.4rem;
}

.fratrie__nom {
    font-family: var(--police-titre);
    font-size: 1.15rem;
    font-weight: 700;
}

.fratrie__texte {
    font-size: var(--t-sm);
    color: var(--texte-doux);
}

.fratrie__fleche {
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .fratrie__carte {
        transition: none;
    }

    .fratrie__carte:is(:hover, :focus-visible) {
        transform: none;
    }
}

/* — Pied de page de contenu : maillage interne — */
.maillage {
    display: grid;
    gap: 1.5rem;
}

.maillage__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
}

.maillage__liste a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.9rem;
    border-block-start: 1px solid var(--trait);
    text-decoration: none;
    transition: padding-inline-start 0.4s var(--ease-sortie), color 0.3s var(--ease-sortie);
}

.maillage__liste a:hover {
    padding-inline-start: 0.5rem;
    color: var(--accent-3);
}

/* — Page de contact — */
.contact__grille {
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .contact__grille {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

.contact__coordonnees {
    display: grid;
    gap: 2rem;
}

.contact__bloc {
    display: grid;
    gap: 0.4rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--trait);
}

.contact__bloc a,
.contact__ville {
    font-family: var(--police-texte);
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    inline-size: fit-content;
}

.contact__bloc address {
    font-style: normal;
    color: var(--texte-doux);
}

/* — Message d'erreur 404 — */
.erreur {
    min-block-size: 70vh;
    display: grid;
    align-content: center;
    gap: 1.5rem;
    justify-items: start;
}

/*
 * Trois bénéfices côte à côte, chacun avec son icône (page cybersécurité). Écrits
 * dans le contenu éditable : <ul class="benefices">, un <li> par bénéfice avec
 * un <svg class="benefices__icone">, un <strong> et un <span>.
 */
.prose .benefices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin-block: 1.5rem;
    padding: 0;
    list-style: none;
}

.prose .benefices li {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg, 1rem);
    background: color-mix(in srgb, var(--fond-eleve) 62%, transparent);
}

.prose .benefices li::marker {
    content: none;
}

.prose .benefices__icone {
    color: var(--cyan);
}

.prose .benefices strong {
    font-family: var(--police-texte);
    font-size: var(--t-md);
    color: var(--texte);
}

.prose .benefices span {
    color: var(--texte-doux);
    font-size: var(--t-sm);
    line-height: 1.5;
}

/* Insigne de page (logo ExpertCyber) : sous les boutons sur mobile, dans le coin
   du bandeau sur grand écran. Le logo officiel est sur fond blanc : sa propre carte. */
.tete-page__insigne {
    display: block;
    inline-size: 9rem;
    padding: 0.6rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem -1rem rgb(0 0 0 / 0.6);
    transition: transform 0.5s var(--ease-sortie);
}

.tete-page__insigne:hover {
    transform: rotate(-2deg) scale(1.04);
}

.tete-page__insigne img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

@media (min-width: 60rem) {
    .tete-page__insigne {
        position: absolute;
        inset-block-end: 0;
        inset-inline-end: 0;
        inline-size: 11rem;
    }
}

/* — Nos secteurs : les départements, puis les communes par département — */
.departements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.9rem;
    margin: 0 0 clamp(2.5rem, 6vw, 4rem);
    padding: 0;
    list-style: none;
}

.departement {
    position: relative;
    display: grid;
    gap: 0.35rem;
    block-size: 100%;
    padding: 1.4rem 1.4rem 1.2rem;
    overflow: hidden;
    border: 1px solid rgb(15 8 65 / 0.1);
    border-radius: var(--rayon-lg);
    background: #fff;
    color: var(--texte);
    text-decoration: none;
    box-shadow: 0 18px 40px -32px rgb(15 8 65 / 0.4);
    transition: transform 0.4s var(--ease-sortie), border-color 0.4s var(--ease-sortie), box-shadow 0.4s var(--ease-sortie);
}

.departement:hover {
    transform: translateY(-4px);
    border-color: rgb(46 163 242 / 0.55);
    box-shadow: 0 0 0 4px rgb(46 163 242 / 0.1), 0 24px 46px -28px rgb(15 8 65 / 0.5);
}

/* Le numéro du département, en grand contour, comme une plaque. */
.departement__numero {
    font-family: var(--police-titre);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--electrique);
}

.departement__nom {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-md);
}

.departement__compte {
    color: var(--texte-tres-doux);
    font-size: var(--t-xs);
}

.departement .bouton__fleche {
    position: absolute;
    inset-block-start: 1.3rem;
    inset-inline-end: 1.4rem;
    color: var(--electrique);
}

.departement--vedette {
    border-color: transparent;
    background:
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.14) 1px, transparent 1.5px) 0 0 / 18px 18px,
        var(--electrique);
    color: #fff;
}

.departement--vedette .departement__numero {
    -webkit-text-stroke-color: #fff;
}

.departement--vedette :is(.departement__compte, .bouton__fleche) {
    color: rgb(255 255 255 / 0.8);
}

.secteurs__departement {
    margin-block: 2rem 0.75rem;
}

.secteurs__departement a {
    color: inherit;
    text-decoration: none;
}

.secteurs__departement a:hover {
    color: var(--electrique);
}

/*
 * Accueil, « 02 — Le groupe » (ancre le-groupe) : les quatre marques côte à
 * côte, en cartes blanches compactes ; repères des cartes en bleu.
 */
#le-groupe .grille-cartes {
    margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
    gap: 1rem;
}

@media (min-width: 64rem) {
    #le-groupe .grille-cartes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

#le-groupe .grille-cartes > .carte {
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    align-content: start;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.6rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background: var(--fond, #fff);
}

#le-groupe .carte__index {
    color: var(--electrique);
    font-weight: 600;
}

/* Le repère « 02 — Le groupe » comme « 01 — Le constat » : foncé, sans pastille. */
#le-groupe .surtitre {
    color: var(--encre);
}

#le-groupe .surtitre::before {
    content: none;
}

#le-groupe .carte__titre {
    font-size: var(--t-md);
}

#le-groupe .carte__texte {
    font-size: 0.9rem;
    line-height: 1.6;
}

#le-groupe .carte__lien {
    position: static;
    justify-self: start;
    color: var(--electrique);
    font-size: 0.95rem;
    font-weight: 600;
}

#le-groupe .carte__lien::after {
    display: none;
}

/* Toute la carte mène à la marque, pas seulement « Découvrir » (hors édition, où l'on clique pour écrire). */
html:not(.edition) #le-groupe .carte__lien::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

html:not(.edition) #le-groupe .grille-cartes > .carte:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -18px rgb(15 8 65 / 0.35);
}

/*
 * « Informatique et télécoms » (templates/page/solutions-it-telecom) : la
 * phrase d'accroche sous le titre, l'étape 4 qui mène à la hotline, puis la
 * hotline sur fond nuit (coordonnées en carte blanche, traitement à droite).
 */
.it-accroche {
    font-size: var(--t-md);
    color: var(--electrique);
}

.qui-carte--vedette {
    border-color: var(--electrique);
}

.it-hotline__cadre {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.it-hotline__entete {
    display: grid;
    gap: 1rem;
    max-inline-size: 48rem;
}

.it-hotline__intro {
    color: rgb(255 255 255 / 0.78);
}

.it-hotline__blocs {
    display: grid;
    gap: 1rem;
}

@media (min-width: 52rem) {
    .it-hotline__blocs {
        grid-template-columns: 1fr 1.4fr;
    }
}

.it-hotline__joindre,
.it-hotline__traitement {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: 1rem;
}

.it-hotline__joindre {
    background: #fff;
    color: var(--encre);
}

.it-hotline__traitement {
    border: 1px solid rgb(255 255 255 / 0.16);
}

.it-hotline__titre-bloc {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--electrique);
}

.it-hotline__traitement .it-hotline__titre-bloc {
    color: rgb(255 255 255 / 0.7);
}

.it-hotline__joindre dl {
    display: grid;
    gap: 0.2rem;
    margin: 0;
}

.it-hotline__joindre dt {
    margin-block-start: 0.6rem;
    font-size: var(--t-xs);
    color: rgb(15 8 65 / 0.6);
}

.it-hotline__joindre dd {
    margin: 0;
    font-weight: 600;
}

.it-hotline__joindre a {
    color: inherit;
}

.it-hotline__numero {
    font-family: var(--police-titre);
    font-size: var(--t-lg);
}

.it-hotline__traitement ol {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-hotline__traitement li {
    display: grid;
    gap: 0.3rem;
}

.it-hotline__traitement span {
    font-size: var(--t-sm);
    color: rgb(255 255 255 / 0.75);
}