/**
 * Composant — Sommaire d'ancres (nouveau design validé le 23/09/2026 ;
 * boutons alignés sur ceux des blocs le 23/09/2026).
 * Markup : _composants/sommaire.php. Documentation : COMPOSANTS.md.
 *
 * Langage visuel commun (DESIGNS.md) :
 *   - petit titre = sur-titre du Titre principal (capitales DM Sans 600,
 *     barre teal de 40px devant) ;
 *   - boutons = bouton du Titre principal (css/style-bloc-titre-principal.css,
 *     .bloc-titre-principal__cta) : même taille (220px au minimum, 13px 28px,
 *     DM Sans 14px 600), mêmes couleurs vert / blanc (contour) / gris /
 *     orange, même survol (dégradé qui glisse, reflet qui suit la souris via
 *     js/bloc-imagetexte.js). Couleur « lien » : .verdon-link-cta (style.css).
 *     Comme dans chaque bloc du thème, le design du bouton est recopié ici,
 *     sous une classe propre (.pphp-sommaire__cta) : toute évolution du
 *     bouton des blocs est à reporter dans ce fichier.
 */

.pphp-sommaire {
    --pphp-teal: #1F5C56;
    --pphp-teal-mid: #2D7A72;
    --pphp-teal-light: #3A9C92;
    --pphp-teal-rgb: 31, 92, 86;
    --pphp-ease: cubic-bezier(0.22, 1, 0.36, 1);

    padding: 2.5rem 0 1rem;
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.pphp-sommaire__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Petit titre : même style que .bloc-titre-principal__sur-titre, centré */
.pphp-sommaire__titre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 1.2rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pphp-teal);
}

.pphp-sommaire__titre::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 2px;
    background: var(--pphp-teal);
    flex-shrink: 0;
}

.pphp-sommaire__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pphp-sommaire__item {
    margin: 0;
    padding: 0;
}

.pphp-sommaire__item::before {
    content: none !important;
}

/* --- Bouton : copie de .bloc-titre-principal__cta --- */
.pphp-sommaire__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 13px 28px;
    min-width: 220px;
    border: none !important;
    border-radius: 3px !important;
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none !important;
    color: #fff !important;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    background-size: 200% 100% !important;
    background-position: 0% 0%;
    white-space: nowrap;
    transition: background-position 0.45s ease, transform 0.12s ease, box-shadow 0.25s ease;
}

.pphp-sommaire__cta::after {
    content: none !important;
    display: none !important;
}

/* Reflet qui suit la souris (--mx/--my via js/bloc-imagetexte.js) */
.pphp-sommaire__cta::before {
    content: '' !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, 0.18) 0%,
            transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.pphp-sommaire__cta:hover,
.pphp-sommaire__cta:focus {
    background-position: 100% 0% !important;
    color: #fff !important;
    text-decoration: none !important;
}

.pphp-sommaire__cta:hover::before {
    opacity: 1;
}

.pphp-sommaire__cta:active {
    transform: scale(0.97);
    filter: brightness(0.88);
}

.pphp-sommaire__cta > * {
    position: relative;
    z-index: 1;
}

/* Vert (teal) */
.pphp-sommaire__cta.verdon-cta:not(.verdon-cta--grey):not(.verdon-cta--orange) {
    background-color: var(--pphp-teal) !important;
    background-image: linear-gradient(to right,
            var(--pphp-teal-mid) 0%,
            var(--pphp-teal) 50%,
            #143F3A 100%) !important;
}

.pphp-sommaire__cta.verdon-cta:not(.verdon-cta--grey):not(.verdon-cta--orange):focus-visible {
    outline: 2px solid var(--pphp-teal);
    outline-offset: 3px;
}

/* Gris */
.pphp-sommaire__cta.verdon-cta--grey {
    background-color: #6b6b6b !important;
    background-image: linear-gradient(to right,
            #4a4a4a 0%,
            #6b6b6b 50%,
            #2e2e2e 100%) !important;
}

.pphp-sommaire__cta.verdon-cta--grey:focus-visible {
    outline: 2px solid #2e2e2e;
    outline-offset: 3px;
}

/* Orange */
.pphp-sommaire__cta.verdon-cta--orange {
    background-color: #E8833A !important;
    background-image: linear-gradient(to right,
            #D4722D 0%,
            #E8833A 50%,
            #B85F1E 100%) !important;
}

.pphp-sommaire__cta.verdon-cta--orange:focus-visible {
    outline: 2px solid #E8833A;
    outline-offset: 3px;
}

/* Blanc (contour teal) */
.pphp-sommaire__cta.verdon-cta-outline {
    background-color: #fff !important;
    background-image: none !important;
    border: 2px solid var(--pphp-teal-light) !important;
    color: var(--pphp-teal-mid) !important;
    padding: 11px 26px;
}

.pphp-sommaire__cta.verdon-cta-outline::before {
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(var(--pphp-teal-rgb), 0.08) 0%,
            transparent 60%);
}

.pphp-sommaire__cta.verdon-cta-outline:hover,
.pphp-sommaire__cta.verdon-cta-outline:focus {
    background-color: rgba(var(--pphp-teal-rgb), 0.06) !important;
    border-color: var(--pphp-teal-mid) !important;
    color: var(--pphp-teal) !important;
}

.pphp-sommaire__cta.verdon-cta-outline:focus-visible {
    outline: 2px solid var(--pphp-teal-light);
    outline-offset: 3px;
}

/* Pictogramme : à la hauteur du texte, pour que tous les boutons aient la
   même hauteur (avec ou sans pictogramme). */
.pphp-sommaire .pphp-icone {
    margin: -1px 0; /* 16 px dans une ligne de 14 px */
}

.pphp-sommaire .pphp-icone svg {
    width: 16px;
    height: 16px;
}

/* Lien texte : .verdon-link-cta (style.css), pictogramme aligné */
.pphp-sommaire__lien-texte {
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

/* Arrivée sur une section : le titre ne passe pas sous le menu fixe */
.pphp-ancre {
    scroll-margin-top: 110px;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.pphp-sommaire) {
        scroll-behavior: smooth;
    }
}

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

    .pphp-sommaire__cta::before {
        display: none !important;
    }
}

/* Mobile : une seule ligne qui défile, fondu à droite pour signaler la suite */
@media (max-width: 700px) {
    .pphp-sommaire {
        padding: 2rem 0 0.5rem;
    }

    .pphp-sommaire__titre {
        font-size: 12px;
        gap: 10px;
    }

    .pphp-sommaire__titre::before {
        width: 28px;
    }

    .pphp-sommaire__liste {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 10px;
        margin: 0 -20px;
        padding: 4px 20px 10px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        /* sans cela, l'aimantation colle le 1er bouton au bord de l'écran */
        scroll-padding-inline: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
        mask-image: linear-gradient(to right, #000 85%, transparent);
    }

    .pphp-sommaire__liste::-webkit-scrollbar {
        display: none;
    }

    .pphp-sommaire__item {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}