/* ===== Gabarit hub services (page pilier /services/) =====
   Styles spécifiques, scopés sous .tpl-hub-services — n'altère pas le socle style.css. */

/* entête de page : photo + voile bleu, fil d'Ariane, H1, intro */
.tpl-hub-services .hub-hero { position: relative; display: flex; align-items: center; min-height: 42vh; background: #16283A; overflow: hidden; }
.tpl-hub-services .hub-hero .bg { position: absolute; inset: 0; background-position: center; background-size: cover; }
.tpl-hub-services .hub-hero .veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,37,52,.96) 0%, rgba(24,52,74,.82) 55%, rgba(31,66,92,.44) 100%); }
.tpl-hub-services .hub-hero .container { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 56px; }
.tpl-hub-services .hub-hero .fil { font-size: 13.5px; color: rgba(255,255,255,.72); font-weight: 500; padding: 0; }
.tpl-hub-services .hub-hero .fil a { color: rgba(255,255,255,.85); text-decoration: none; }
.tpl-hub-services .hub-hero .fil a:hover { color: #fff; }
.tpl-hub-services .hub-hero .fil .sep { color: #8FC1E3; margin: 0 8px; font-family: 'Montserrat'; font-weight: 700; }
.tpl-hub-services .hub-hero h1 { color: #fff; font-size: clamp(30px, 3.9vw, 48px); font-weight: 700; margin-top: 16px; max-width: 22ch; }
.tpl-hub-services .hub-hero h1 em { font-style: normal; color: #8FC1E3; }
.tpl-hub-services .hub-hero .intro { margin-top: 16px; font-size: 17px; color: rgba(255,255,255,.88); max-width: 58ch; }
.tpl-hub-services .hub-hero .cap-photo { position: absolute; right: 20px; bottom: 14px; font-size: 11px; color: rgba(255,255,255,.55); z-index: 2; }

/* cartes services — fond gris pour alterner avec l'intro blanche */
.tpl-hub-services .hub-cartes { background: var(--fond); }

/* intro pilier — prose lisible, largeur de lecture confortable */
.tpl-hub-services .hub-intro { max-width: 860px; margin-top: 26px; }
.tpl-hub-services .hub-intro p { margin: 14px 0; color: var(--ink); }
.tpl-hub-services .hub-intro p:first-child { margin-top: 0; }

/* intro « Un métier » : colonne texte + photo (la moitié droite n'est plus vide) */
.tpl-hub-services .hub-intro { max-width: none; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.tpl-hub-services .hub-intro > div > p:first-child { margin-top: 0; }
.tpl-hub-services .hub-intro img { border-radius: var(--r); box-shadow: 0 24px 60px rgba(36,70,95,.16); }
@media (max-width: 900px) { .tpl-hub-services .hub-intro { grid-template-columns: 1fr; } }