/* steeve-multiservices.fr — feuille de style du site, chargée seule par Helix Ultimate
   (templates/shaper_helixultimate/css/custom.css). Source : Sites\steeve-multiservices\gabarit\custom.css.
   Reprend la maquette (Sites\steeve-multiservices\maquette\steeve.css) : bleu, rouge, crème. Aucun style dans les pages. */
:root {
  --bleu: #17348a;
  --bleu-fonce: #0f2260;
  --rouge: #d9262c;
  --rouge-fonce: #b51a20;
  --creme: #f6f0e1;
  --encre: #17203a;
  --gris: #5b6478;
  --blanc: #ffffff;
  --rayon: 14px;
}
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html, body { overflow-x: clip; }
body.helix-ultimate {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--encre);
  background: var(--creme);
  line-height: 1.55;
}
body.helix-ultimate .body-innerwrapper { background: var(--creme); }

/* Le cadre de Helix : son en-tête et son pied sont remplacés par les modules « En-tête » et « Pied de page » */
#sp-header, #sp-footer .sp-copyright, #sp-title:empty, #sp-top-bar .social-icons { display: none; }
/* Le partage vers les réseaux de Helix porte la classe d-flex de Bootstrap, elle-même en !important */
.article-details .article-ratings-social-share { display: none !important; }
#sp-top-bar { position: sticky; top: 0; z-index: 20; padding: 0; background: var(--bleu); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
#sp-top-bar > .container, #sp-top-bar .container-inner, #sp-footer > .container { max-width: none; padding: 0; }
#sp-top-bar .row, #sp-footer .row { margin: 0; }
#sp-top-bar [class*="col-"], #sp-footer [class*="col-"] { padding: 0; flex: 0 0 100%; max-width: 100%; }
#sp-top2 { display: none; }
#sp-footer { padding: 0; background: var(--bleu-fonce); }
#sp-main-body { padding: 0; }
body.itemid-101 #sp-main-body > .container { max-width: none; padding: 0; }
body.itemid-101 #sp-main-body .row { margin: 0; }
body.itemid-101 #sp-component { padding: 0; }
body.itemid-101 .article-details .article-header,
body.itemid-101 .article-details .article-info,
body.itemid-101 .article-details .article-can-edit { display: none; }

.steeve-entete img, .steeve-accueil img { max-width: 100%; height: auto; display: block; }
.steeve-entete a, .steeve-accueil a, .steeve-pied a { color: inherit; }
/* Helix colore les liens de sa barre du haut et de son pied par leur identifiant : on reprend la main au même niveau */
#sp-top-bar .steeve-entete a, #sp-top-bar .steeve-entete a:hover { color: var(--blanc); }
#sp-footer .steeve-pied a, #sp-footer .steeve-pied a:hover { color: #cfd8f5; }
.steeve-mentions a { color: var(--bleu); text-decoration: underline; }
.conteneur { width: min(1100px, 100% - 32px); margin-inline: auto; }

/* En-tête */
.steeve-entete { color: var(--blanc); }
.steeve-entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.steeve-entete .marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.steeve-entete .marque img { width: 52px; }
.steeve-entete .marque strong { font-size: 1.05rem; line-height: 1.1; display: block; letter-spacing: .02em; }
.steeve-entete .marque small { font-size: .72rem; opacity: .85; display: block; }
.steeve-entete .menu { display: none; gap: 22px; }
.steeve-entete .menu a { text-decoration: none; font-weight: 600; font-size: .95rem; }
.steeve-entete .menu a:hover { color: #ffd9d9; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; text-decoration: none;
  background: var(--rouge); color: var(--blanc) !important;
  box-shadow: 0 3px 0 var(--rouge-fonce);
}
.bouton:hover { background: var(--rouge-fonce); }
.bouton.clair { background: var(--blanc); color: var(--bleu) !important; box-shadow: 0 3px 0 #c9cfe3; }
.bouton.clair:hover { background: #eef1fb; }
.steeve-entete .bouton { padding: 9px 14px; font-size: .9rem; white-space: nowrap; }
@media (max-width: 480px) { .steeve-entete .marque small { display: none; } .steeve-entete .marque img { width: 44px; } }

/* Accueil */
.steeve-accueil h1, .steeve-accueil h2, .steeve-accueil h3 { font-family: inherit; }
.steeve-accueil .accueil { background: linear-gradient(180deg, var(--bleu) 0%, var(--bleu-fonce) 100%); color: var(--blanc); overflow: hidden; }
.steeve-accueil .accueil .conteneur { display: grid; gap: 8px; padding: 28px 0 0; }
.steeve-accueil .accueil h1 { font-size: clamp(1.9rem, 7vw, 3.1rem); line-height: 1.08; margin: 0 0 12px; color: var(--blanc); font-weight: 800; }
.steeve-accueil .accueil h1 span { color: #ff8b8f; }
.steeve-accueil .accueil p { font-size: 1.08rem; margin: 0 0 18px; max-width: 34em; }
.steeve-accueil .accueil .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.steeve-accueil .accueil .vehicule { justify-self: center; width: min(520px, 100%); margin-bottom: -6px; }
.steeve-accueil .bande-route { height: 14px; background: repeating-linear-gradient(90deg, var(--blanc) 0 38px, transparent 38px 70px), var(--rouge); }

/* Sections */
.steeve-accueil .section { padding: 46px 0; }
.steeve-accueil .section h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.15; margin: 0 0 8px; color: var(--bleu); font-weight: 800; }
.steeve-accueil .section .chapeau { color: var(--gris); margin: 0 0 26px; max-width: 40em; }
.steeve-accueil .section.sombre { background: var(--bleu); color: var(--blanc); }
.steeve-accueil .section.sombre h2, .steeve-accueil .section.sombre h3 { color: var(--blanc); }
.steeve-accueil .section.sombre .chapeau { color: #cfd8f5; }

/* Les métiers */
.steeve-accueil .metiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.steeve-accueil .metier {
  background: var(--blanc); border-radius: var(--rayon); padding: 18px 14px;
  text-decoration: none; border-bottom: 4px solid var(--rouge);
  box-shadow: 0 2px 8px rgba(23, 52, 138, .1);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s;
}
.steeve-accueil .metier:hover { transform: translateY(-3px); }
.steeve-accueil .metier .icone { font-size: 1.9rem; line-height: 1; }
.steeve-accueil .metier h3 { margin: 0; font-size: 1.05rem; color: var(--bleu); }
.steeve-accueil .metier p { margin: 0; font-size: .86rem; color: var(--gris); }

/* Étapes */
.steeve-accueil .etapes { display: grid; gap: 14px; counter-reset: etape; }
.steeve-accueil .etape { background: rgba(255, 255, 255, .1); border-radius: var(--rayon); padding: 18px 18px 18px 70px; position: relative; }
.steeve-accueil .etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; left: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--rouge); color: var(--blanc); font-weight: 800; display: grid; place-items: center;
}
.steeve-accueil .etape h3 { margin: 0 0 4px; font-size: 1.1rem; }
.steeve-accueil .etape p { margin: 0; color: #dfe5fa; font-size: .95rem; }

/* Le Combi */
.steeve-accueil .combi { display: grid; gap: 22px; align-items: center; }
.steeve-accueil .combi .photo { background: var(--blanc); border-radius: var(--rayon); padding: 14px; box-shadow: 0 2px 10px rgba(23, 52, 138, .15); }
.steeve-accueil .combi blockquote { margin: 0 0 14px; padding-left: 14px; border-left: 5px solid var(--rouge); font-size: 1.15rem; font-weight: 600; color: var(--bleu); }

/* Secteur */
.steeve-accueil .zone { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.steeve-accueil .zone li { background: var(--blanc); border-radius: 999px; padding: 7px 14px; font-size: .9rem; font-weight: 600; color: var(--bleu); box-shadow: 0 1px 4px rgba(23, 52, 138, .15); }

/* Devis */
.steeve-accueil .contacts { display: grid; gap: 12px; }
.steeve-accueil .contact { background: rgba(255, 255, 255, .12); border-radius: var(--rayon); padding: 14px 16px; text-decoration: none; display: block; color: var(--blanc); }
.steeve-accueil .contact:hover { background: rgba(255, 255, 255, .2); }
.steeve-accueil .contact strong { display: block; font-size: 1.15rem; }

/* Mentions légales */
.steeve-mentions h2 { font-size: 1.25rem; color: var(--bleu); margin: 28px 0 8px; }
body:not(.itemid-101) #sp-main-body { padding: 40px 0 60px; }
body:not(.itemid-101) .article-details .article-header h1 { color: var(--bleu); }

/* Pied */
.steeve-pied { color: #cfd8f5; padding: 26px 0 90px; font-size: .88rem; }
.steeve-pied .conteneur { display: grid; gap: 6px; }
.steeve-pied p { margin: 0; }
.steeve-pied strong { color: var(--blanc); }
.steeve-pied a { text-decoration: underline; }

/* Barre d'appel collée en bas, téléphone seulement */
.appel-fixe {
  position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 12px; background: var(--blanc); box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}
.appel-fixe .bouton { padding: 12px 8px; }

@media (min-width: 760px) {
  .steeve-entete .menu { display: flex; }
  .steeve-accueil .accueil .conteneur { grid-template-columns: 1.1fr .9fr; align-items: end; padding-top: 48px; gap: 30px; }
  .steeve-accueil .accueil .vehicule { margin-bottom: -8px; }
  .steeve-accueil .metiers { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .steeve-accueil .etapes { grid-template-columns: repeat(3, 1fr); }
  .steeve-accueil .combi { grid-template-columns: .9fr 1.1fr; gap: 40px; }
  .steeve-accueil .contacts { grid-template-columns: repeat(3, 1fr); }
  .appel-fixe { display: none; }
  .steeve-pied { padding-bottom: 26px; }
}