/* ===== Gabarit page service (pilote : visioconférence) =====
   Styles spécifiques, scopés sous .tpl-service — n'altère pas le socle style.css. */

/* entête de page : photo + voile bleu, fil d'Ariane, H1, intro — plus bas que le hero homepage */
.tpl-service .svc-hero { position: relative; display: flex; align-items: center; min-height: 46vh; background: #16283A; overflow: hidden; }
.tpl-service .svc-hero .bg { position: absolute; inset: 0; background-position: center 74%; background-size: cover; }
.tpl-service .svc-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-service .svc-hero .container { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 56px; }
.tpl-service .svc-hero .fil { font-size: 13.5px; color: rgba(255,255,255,.72); font-weight: 500; padding: 0; }
.tpl-service .svc-hero .fil a { color: rgba(255,255,255,.85); text-decoration: none; }
.tpl-service .svc-hero .fil a:hover { color: #fff; }
.tpl-service .svc-hero .fil .sep { color: #8FC1E3; margin: 0 8px; font-family: 'Montserrat'; font-weight: 700; }
.tpl-service .svc-hero h1 { color: #fff; font-size: clamp(30px, 3.9vw, 48px); font-weight: 700; margin-top: 16px; max-width: 22ch; }
.tpl-service .svc-hero h1 em { font-style: normal; color: #8FC1E3; }
.tpl-service .svc-hero .intro { margin-top: 16px; font-size: 17px; color: rgba(255,255,255,.88); max-width: 58ch; }
.tpl-service .svc-hero .cap-photo { position: absolute; right: 20px; bottom: 14px; font-size: 11px; color: rgba(255,255,255,.55); z-index: 2; }

/* vos enjeux — 3 cartes blanches sur fond gris */
.tpl-service .enjeux { background: var(--fond); }
.tpl-service .enjeux-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.tpl-service .enjeu { background: var(--paper); border: 1px solid var(--ligne); border-radius: var(--r); padding: 28px 24px; }
.tpl-service .enjeu .ic { width: 52px; height: 52px; border-radius: 12px; background: #E8F0F6; color: var(--avmd); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tpl-service .enjeu .ic svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tpl-service .enjeu h3 { font-size: 17.5px; }
.tpl-service .enjeu p { font-size: 14.5px; color: var(--muted); margin-top: 8px; }

/* l'offre — texte + photo, puis 4 cartes équipement, puis bénéfices en liste chevrons */
.tpl-service .offre-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; margin-top: 34px; }
/* Ratio unifié : les photos « offre » ont des sources hétérogènes (carré, 4:3, 3:2) — sans
   contrainte, les colonnes se désalignent (retour client 03/08). */
.tpl-service .offre-grid img { border-radius: var(--r); box-shadow: 0 24px 60px rgba(36,70,95,.16);
  width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tpl-service .offre-grid p { color: var(--muted); margin-top: 14px; }
.tpl-service .offre-grid p:first-child { margin-top: 0; }
.tpl-service .equip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.tpl-service .equip { background: var(--paper); border: 1px solid var(--ligne); border-radius: var(--r); padding: 24px 22px; }
.tpl-service .equip .ic { width: 46px; height: 46px; border-radius: 12px; background: #E8F0F6; color: var(--avmd); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.tpl-service .equip .ic svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tpl-service .equip h3 { font-size: 16px; }
.tpl-service .equip p { font-size: 14px; color: var(--muted); margin-top: 6px; }
.tpl-service .benefs { margin-top: 44px; background: var(--fond); border-radius: var(--r); padding: 30px clamp(22px, 3vw, 36px); }
.tpl-service .benefs h3 { font-size: 19px; }
.tpl-service .benefs ul { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }
.tpl-service .benefs li { font-size: 15px; color: var(--ink); padding-left: 22px; position: relative; }
.tpl-service .benefs li::before { content: '›'; position: absolute; left: 0; top: -1px; color: var(--avmd); font-family: 'Montserrat'; font-weight: 700; }

/* compatibilité — badges avec logos outils */
.tpl-service .compat { background: var(--fond); text-align: center; }
.tpl-service .compat .sec-t { justify-content: center; }
.tpl-service .compat .sec-sub { margin-left: auto; margin-right: auto; }
.tpl-service .badges { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.tpl-service .badge-outil { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: 14px 22px; font-family: 'Montserrat'; font-weight: 600; font-size: 15px; color: var(--marque); }
.tpl-service .badge-outil img { height: 28px; width: auto; }
.tpl-service .compat .note { font-size: 13.5px; color: var(--muted); margin-top: 18px; }

/* réalisations visioconférence — 3 cartes photo (base .sv, format photo plus haut) */
.tpl-service .refs .sv .ph { height: 0; padding-bottom: 62.5%; } /* 16/10 en padding-hack (aspect-ratio non fiable partout) */
.tpl-service .refs .sv .tag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--avmd); font-weight: 600; font-family: 'Montserrat'; }
.tpl-service .refs .sv h3 { margin-top: 4px; }

/* méthode — 4 étapes numérotées */
.tpl-service .methode { background: var(--fond); }
.tpl-service .met-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 38px; }
.tpl-service .met { background: var(--paper); border: 1px solid var(--ligne); border-radius: var(--r); padding: 26px 22px; position: relative; }
.tpl-service .met .num { font-family: 'Montserrat'; font-weight: 700; font-size: 34px; color: var(--avmd); line-height: 1; }
.tpl-service .met h3 { font-size: 17px; margin-top: 12px; }
.tpl-service .met p { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* mini-FAQ — accordéons details/summary */
.tpl-service .faq-list { margin-top: 34px; display: grid; gap: 14px; }
.tpl-service .faq-list details { background: var(--paper); border: 1px solid var(--ligne); border-radius: var(--r); padding: 0 24px; transition: border-color .3s; }
.tpl-service .faq-list details[open] { border-color: #BAD0DF; }
.tpl-service .faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; padding: 19px 0; font-family: 'Montserrat'; font-weight: 600; font-size: 16px; color: var(--marque); }
.tpl-service .faq-list summary::-webkit-details-marker { display: none; }
.tpl-service .faq-list summary .chev { color: var(--avmd); font-weight: 700; font-size: 19px; transition: transform .3s; flex: none; }
.tpl-service .faq-list details[open] summary .chev { transform: rotate(90deg); }
.tpl-service .faq-list details p { color: var(--muted); font-size: 15px; padding: 0 0 20px 31px; }

@media (max-width: 900px) {
  .tpl-service .enjeux-grid, .tpl-service .met-grid { grid-template-columns: 1fr; }
  .tpl-service .equip-grid { grid-template-columns: repeat(2, 1fr); }
  .tpl-service .offre-grid { grid-template-columns: 1fr; }
  .tpl-service .benefs ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .tpl-service .equip-grid { grid-template-columns: 1fr; } }