/*
 * Pages de présentation de Penta Com et de PentaTraining (mobile/penta-com-accueil.php, mobile/penta-training-accueil.php,
 * morceaux communs dans mobile/components/vitrine/vitrine_penta.php).
 * Allure de magazine, pas de page « faite par une IA » : photos pleine largeur, grands titres en capitales, filets,
 * texte courant. Ni cartes, ni numéros, ni pastilles, ni dégradés, ni ombres.
 * Couleurs : variables de l'appli (css/templates.css) et bleu nuit du magazine (mêmes valeurs que mobile_header.php).
 * Grille de 8 px, modes jour et nuit.
 */
html:root, html:root[data-layout-template] { --blue: #9db8d9; --sur-blue: #0d0f14; }
html:root[data-theme="light"], html:root[data-theme="light"][data-layout-template] { --blue: #0f2a4a; --sur-blue: #fff; }

.vp-corps {
    --vp-doux: color-mix(in srgb, var(--white) 72%, transparent);
    --vp-titres: 'Bebas Neue', 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --vp-accent: var(--blue);
    margin: 0; background: var(--ink); color: var(--white); overflow-x: clip;
    font-family: Inter, -apple-system, system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
}

/* En-tête : bande multisport, marque au centre, bascule jour / nuit à droite */
.vp-entete { position: sticky; top: 0; z-index: 10; background: var(--ink); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top, 0px); }
.vp-bande { display: flex; height: 4px; }
.vp-bande span { flex: 1; }
.vp-barre { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; height: 52px; margin: 0 auto; padding: 0 8px; }
.vp-vide, .vp-icone { width: 44px; height: 44px; }
.vp-icone { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--vp-doux); font-size: 17px; cursor: pointer; }
.vp-marque, .vp-marque-texte { font-family: var(--vp-titres); font-style: italic; letter-spacing: .02em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.vp-marque { font-size: 30px; line-height: 1; }
.vp-marque b, .vp-marque-texte b { font-weight: 400; color: var(--blue); margin-left: .12em; }

.vp { max-width: 1120px; margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom, 0px)); }

/* Une : la photo pleine largeur, puis le titre sous un filet épais, comme une ouverture d'article */
.vp-une { padding: 0 0 32px; }
.vp-une-photo { display: block; max-width: none; width: calc(100% + 32px); margin: 0 -16px; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; background: var(--ink3); }
.vp-une-texte { margin-top: 24px; padding-top: 12px; border-top: 4px solid var(--white); }
.vp-surtitre { margin: 0 0 8px; font-size: .8125rem; line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vp-accent); }
.vp-titre { margin: 0 0 16px; font-family: var(--vp-titres); font-weight: 400; font-size: 3.5rem; line-height: .92; text-transform: uppercase; color: var(--white); }
.vp-chapo { max-width: 36rem; margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--white); }
.vp-avis { margin: 16px 0 0; padding-left: 12px; border-left: 4px solid var(--vp-accent); font-size: .9375rem; line-height: 1.45; }
.vp-note { margin: 12px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--vp-doux); }

/* Boutons : rectangles francs, capitales */
.vp-actions { display: grid; gap: 8px; max-width: 400px; margin-top: 24px; }
.vp-bouton {
    display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 2px solid var(--blue); border-radius: 8px;
    background: var(--blue); color: var(--sur-blue); font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    transition: transform .14s ease-out;
}
.vp-bouton:active { transform: scale(.98); }
.vp-second { background: transparent; color: var(--white); border-color: var(--white); }
.vp-code { display: flex; align-items: center; min-height: 44px; color: var(--white); font-size: .9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Têtière de section : filet épais et titre en capitales */
.vp-section { padding: 0 0 32px; }
.vp-tetiere { margin: 0; padding: 8px 0 0; border-top: 4px solid var(--white); font-family: var(--vp-titres); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--white); }

/* Rubriques : une photo, un titre, une phrase, les outils en une ligne. Un filet entre deux rubriques. */
.vp-rubriques { margin: 0; padding: 0; list-style: none; }
.vp-rub { padding: 24px 0; border-bottom: 1px solid var(--rule2, var(--rule)); }
.vp-rub-photo { display: block; width: 100%; aspect-ratio: 3 / 2; margin: 0 0 16px; object-fit: cover; background: var(--ink3); }
.vp-rub-titre { margin: 0 0 8px; font-family: var(--vp-titres); font-weight: 400; font-size: 2.25rem; line-height: 1; text-transform: uppercase; color: var(--white); }
.vp-texte { max-width: 36rem; margin: 0 0 12px; font-size: 1rem; line-height: 1.5; color: var(--white); }
.vp-outils { margin: 0; padding: 0; list-style: none; font-size: .8125rem; line-height: 1.6; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vp-doux); }
.vp-outils li { display: inline; }
.vp-outils li + li::before { content: " / "; color: var(--vp-accent); }

/* Liens en lignes */
.vp-liens { margin: 0; padding: 0; list-style: none; }
.vp-liens a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--rule2, var(--rule)); color: var(--white); text-decoration: none; }
.vp-lien-texte { display: grid; gap: 2px; }
.vp-lien-texte strong { font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vp-lien-texte small { font-size: .8125rem; line-height: 1.4; color: var(--vp-doux); }
.vp-fleche { font-size: 1.5rem; line-height: 1; color: var(--vp-accent); transition: transform .14s ease-out; }
.vp-liens a:active .vp-fleche { transform: translateX(4px); }

/* Encadré (PentAnalyz, l'autre appli) : filet épais de couleur, pas de fond ni de cadre */
.vp-encadre { margin: 0 0 32px; padding-top: 12px; border-top: 4px solid var(--vp-accent); }
.vp-strava { --vp-accent: #fc4c02; }
.vp-encadre-photo { display: block; width: 100%; aspect-ratio: 3 / 2; margin: 4px 0 16px; object-fit: cover; background: var(--ink3); }
.vp-encadre-titre { margin: 0 0 12px; font-family: var(--vp-titres); font-weight: 400; font-size: 2.5rem; line-height: 1; text-transform: uppercase; color: var(--white); }
.vp-encadre-titre .vp-marque-texte { font-size: inherit; }
.vp-intertitre { margin: 24px 0 0; padding-top: 8px; border-top: 1px solid var(--rule2, var(--rule)); font-size: .8125rem; line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.vp-liste { margin: 0; padding: 0; list-style: none; }
.vp-liste li { position: relative; padding: 8px 0 8px 24px; font-size: 1rem; line-height: 1.5; }
.vp-liste li::before { content: "\2014"; position: absolute; left: 0; color: var(--vp-accent); }

.vp-fin { padding: 24px 0 32px; border-top: 4px solid var(--white); }
.vp-fin .vp-actions { margin-top: 0; }

.vp-pied { display: flex; flex-wrap: wrap; gap: 0 16px; border-top: 1px solid var(--rule); }
.vp-pied a { display: inline-flex; align-items: center; min-height: 44px; color: var(--vp-doux); font-size: .8125rem; text-decoration: none; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Ordinateur et tablette : la une sur deux colonnes, les rubriques photo d'un côté, texte de l'autre, en alternance */
@media (min-width: 760px) {
    .vp { padding-left: 32px; padding-right: 32px; }
    .vp-une { padding: 32px 0 48px; }
    .vp-une-illustree { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: end; }
    .vp-une-photo { order: 2; width: 100%; margin: 0; aspect-ratio: 4 / 3; }
    .vp-une-texte { margin-top: 0; }
    .vp-titre { font-size: 5rem; }
    .vp-actions { grid-template-columns: 1fr 1fr; max-width: 480px; }
    .vp-code { grid-column: 1 / -1; }
    .vp-section { padding-bottom: 48px; }
    .vp-tetiere { font-size: 2rem; }
    .vp-rub { padding: 32px 0; }
    .vp-rub-illustree { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; }
    .vp-rub-illustree:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .vp-rub-illustree:nth-child(even) .vp-rub-photo { order: 2; }
    .vp-rub-photo { margin: 0; }
    .vp-rub-titre { font-size: 3rem; }
    .vp-encadre { margin-bottom: 48px; }
    .vp-encadre-illustre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
    .vp-encadre-photo { margin: 4px 0 0; }
    .vp-encadre-titre { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-bouton, .vp-fleche { transition: none; }
    .vp-bouton:active, .vp-liens a:active .vp-fleche { transform: none; }
}