/* Vitrine CLLC — feuille de style unique, sans dépendance. */
:root {
  --encre: #12302F;
  --encre-douce: #2F4442;
  --gris: #4A5553;
  --trait: #C9D3D1;
  --creme: #F3EFE6;
  --fond-sombre: #12302F;
  --carte-sombre: #1B4241;
  --texte-clair: #D5E0DE;
  --accent: #B4531A;
  --accent-fonce: #8F4013;
  --accent-clair: #F2B48C;
  --vert: #1F6F5C;
  --rayon: 12px;
  --largeur: 1200px;
  --titres: 'Archivo', system-ui, sans-serif;
  --texte: 'Source Sans 3', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texte); font-size: 17px; line-height: 1.55; color: var(--encre); background: #FFFFFF; }
img { max-width: 100%; height: auto; }
a { color: var(--encre); }
a:hover { color: #0A1E1D; }
h1, h2, h3 { font-family: var(--titres); line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding-inline: 24px; }
.section { padding-block: 88px; }
.section-creme { background: var(--creme); }
.section-sombre { background: var(--fond-sombre); color: #FFFFFF; }
.pile { display: flex; flex-direction: column; gap: 16px; }
.intro { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-bottom: 36px; }
.intro p, .chapo { color: var(--encre-douce); font-size: 19px; }
.section-sombre .chapo { color: var(--texte-clair); }
.surtitre { font-family: var(--titres); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-texte, var(--accent)); }
.section-sombre .surtitre { color: var(--accent-clair); }
h1 { font-weight: 800; font-size: clamp(38px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.01em; }
h2 { font-weight: 800; font-size: clamp(30px, 3.6vw, 40px); }
h3 { font-weight: 700; font-size: 21px; }

/* Lien d'évitement */
.evitement { position: absolute; left: -9999px; top: 8px; background: #FFFFFF; padding: 10px 16px; border-radius: 8px; z-index: 10; }
.evitement:focus { left: 8px; }

/* En-tête */
.entete { border-bottom: 1px solid #DDE3E1; background: #FFFFFF; }
.entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.logo img { display: block; height: 52px; width: auto; }
.navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-weight: 600; font-size: 16px; }
.navigation a { text-decoration: none; padding-block: 10px; }
.navigation a:not(.bouton) { position: relative; }
.navigation a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 2px; background: var(--accent); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 8px; font: inherit; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.bouton-principal { background: var(--accent); color: var(--sur-accent, #FFFFFF); }
.bouton-principal:hover { background: var(--accent-fonce); color: var(--sur-accent, #FFFFFF); }
.bouton-contour { border-color: currentColor; color: inherit; background: transparent; }
.section-sombre .bouton-contour { color: #FFFFFF; }
.section-sombre .bouton-contour:hover { background: #FFFFFF; color: var(--encre); }
.navigation .bouton { padding: 10px 18px; min-height: 44px; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* Bandeau d'accueil */
.bandeau .conteneur { padding-block: 88px 96px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.bandeau-texte { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.bandeau-texte .chapo { max-width: 620px; font-size: 20px; }
.engagements { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.engagement { background: var(--carte-sombre); border-radius: var(--rayon); padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.engagement strong { font-family: var(--titres); font-size: 19px; }
.engagement span { color: var(--texte-clair); font-size: 16px; }

/* Grilles et cartes */
.grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px; }
.carte { border: 1.5px solid var(--trait); border-radius: var(--rayon); padding: 26px; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; }
.carte p { color: var(--encre-douce); }
.carte .icone { width: 32px; height: 32px; stroke: var(--encre); }
.carte-prix { border: 0; border-top: 4px solid var(--vert); border-radius: 0 0 var(--rayon) var(--rayon); background: #F7F9F8; }
.prix { font-weight: 700; color: var(--vert); margin-top: auto; }
.carte a.lien-carte { font-weight: 700; margin-top: auto; }

/* Deux colonnes */
.deux-colonnes { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.deux-colonnes > .principal { flex: 999 1 520px; min-width: 0; }
.deux-colonnes > .secondaire { flex: 1 1 340px; }
.encadre { background: #FFFFFF; border-radius: var(--rayon); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.encadre ol, .encadre ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

/* Étapes */
.etape { display: flex; flex-direction: column; gap: 8px; }
.etape .numero { font-family: var(--titres); font-weight: 800; font-size: 36px; color: var(--accent-clair); line-height: 1; }
.etape strong { font-size: 19px; }
.etape span { color: var(--texte-clair); }

/* Liste de fonctions (page KPYLOT) */
.fonctions { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.fonctions li { padding-left: 28px; position: relative; }
.fonctions li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 3px solid var(--vert); border-bottom: 3px solid var(--vert); transform: rotate(-45deg); }
.fonctions strong { display: block; }
.badge { display: inline-block; font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--creme); color: var(--accent-fonce); }

/* Formulaire */
.contact { display: flex; flex-wrap: wrap; gap: 48px; }
.coordonnees { flex: 1 1 320px; display: flex; flex-direction: column; gap: 18px; }
.liste-coordonnees { margin: 8px 0 0; display: flex; flex-direction: column; gap: 16px; }
.liste-coordonnees dt { font-weight: 700; }
.liste-coordonnees dd { margin: 4px 0 0; color: var(--encre-douce); }
.formulaire { flex: 999 1 520px; min-width: 0; background: var(--creme); border-radius: var(--rayon); padding: 28px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.formulaire .pleine-largeur, .formulaire .erreurs-generales { grid-column: 1 / -1; }
.groupe { display: flex; flex-direction: column; gap: 6px; }
.groupe label { font-weight: 700; font-size: 15px; }
.groupe .obligatoire { color: var(--accent-texte, var(--accent-fonce)); }
.champ { font: inherit; padding: 12px 14px; border: 1.5px solid #8A9A97; border-radius: 8px; background: #FFFFFF; color: var(--encre); width: 100%; }
textarea.champ { resize: vertical; }
.erreur { color: #A3261B; font-size: 15px; margin: 0; padding: 0; list-style: none; }
.erreurs-generales { background: #FDECEA; color: #A3261B; border-radius: 8px; padding: 12px 16px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .bouton { justify-self: start; }
.mention { font-size: 14px; color: var(--gris); grid-column: 1 / -1; }

/* Pied de page */
.pied { background: #0C2221; color: var(--texte-clair); font-size: 15px; }
.pied .conteneur { padding-block: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.pied { background: #0B2624; }
.pied a { color: var(--texte-clair); }

/* Bandeau de coordonnées en haut de page */
.bandeau-contact { background: var(--fond-sombre); color: var(--texte-clair); font-size: 15px; }
.entete .bandeau-contact .conteneur { padding-block: 6px; justify-content: flex-start; gap: 4px 24px; }
.bandeau-contact a, .bandeau-contact span { color: #FFFFFF; text-decoration: none; padding-block: 6px; display: inline-flex; align-items: center; gap: 8px; }
.bandeau-contact .reseau-social { margin-left: auto; padding: 6px; }
.bandeau-contact a:hover { text-decoration: underline; color: #FFFFFF; }

/* Page Services */
.sommaire { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sommaire a { color: #FFFFFF; text-decoration: none; font-weight: 600; padding: 10px 16px; border: 1.5px solid #3E6664; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.sommaire a:hover { background: var(--carte-sombre); color: #FFFFFF; }
.section[id] { scroll-margin-top: 16px; }
.encadre-trait { border: 1.5px solid var(--trait); }
.encadre .prix { margin-top: 4px; }
.boutons-centre { justify-content: center; margin-top: 32px; }
.section-sombre .secondaire.boutons { align-self: center; }

/* Fiche d'identité (À propos) */
.fiche { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.fiche div { display: contents; }
.fiche dt { font-weight: 700; }
.fiche dd { margin: 0; color: var(--encre-douce); }

/* Pied de page en colonnes */
.pied .pied-colonnes { padding-block: 40px 24px; align-items: flex-start; justify-content: flex-start; gap: 28px 40px; }
.pied-bloc { display: flex; flex-direction: column; gap: 8px; }
.pied-bloc strong { color: #FFFFFF; font-family: var(--titres); font-size: 17px; }
.pied-logo { flex: 0 0 auto; }
.pied-logo img { display: block; height: 52px; width: auto; border-radius: 6px; }
.pied-coordonnees { flex: 1 1 320px; }
.pied-liens, .pied-social { padding-left: 32px; border-left: 1px solid #23403E; }
.pied-liens-grille { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 40px; }
.pied-liens-grille a { padding-block: 2px; }
.avec-picto { display: inline-flex; align-items: flex-start; gap: 10px; }
.pied-ligne { flex-wrap: wrap; gap: 6px 24px; }
.pied .picto { margin-top: 3px; }
@media (max-width: 760px) { .pied-liens, .pied-social { padding-left: 0; border-left: 0; } }
.pied .pied-bas { border-top: 1px solid #23403E; padding-block: 20px 28px; }

/* Page de remerciement et pages simples */
.page-simple { max-width: 760px; }
.page-simple .pile { gap: 20px; }

@media (max-width: 640px) {
  .section { padding-block: 64px; }
  .bandeau .conteneur { padding-block: 56px 64px; }
  .logo img { height: 44px; }
}
.fonctions + .boutons { margin-top: 32px; }

/* =============================================================================
   Pages d'activité : chaque activité a ses couleurs (classe theme-<slug>,
   posée sur <body> pour la page entière, ou sur une tuile pour la carte seule).
   ========================================================================== */
.theme-logiciels {
  --fond-sombre: #172554; --carte-sombre: #1F347A; --texte-clair: #DCE4FF;
  --accent: #2E56C9; --accent-fonce: #2342A0; --accent-clair: #A9BEFF; --creme: #EEF2FF; --vert: #2342A0;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
.theme-reseaux {
  --fond-sombre: #0B3640; --carte-sombre: #124B57; --texte-clair: #CDEBEF;
  --accent: #0A7380; --accent-fonce: #085C66; --accent-clair: #7FD8E0; --creme: #E7F5F6; --vert: #085C66;
}
.theme-videosurveillance {
  --fond-sombre: #15171C; --carte-sombre: #25282F; --texte-clair: #D3D6DD;
  --accent: #B42318; --accent-fonce: #8E1B12; --accent-clair: #FF9D8F; --creme: #F2F3F5; --vert: #8E1B12;
}
.theme-solaire {
  --fond-sombre: #102A43; --carte-sombre: #1B3A5C; --texte-clair: #D6E4F0;
  --accent: #F2A900; --accent-fonce: #FFBE2E; --sur-accent: #102A43; --accent-texte: #8A5A00; --accent-clair: #FFD166; --creme: #FFF6DE; --vert: #8A5A00;
}
.theme-materiel {
  --fond-sombre: #2A1B3D; --carte-sombre: #3B2856; --texte-clair: #E4DAF2;
  --accent: #6D3FC4; --accent-fonce: #5631A0; --accent-clair: #CDB8F7; --creme: #F4EFFB; --vert: #5631A0;
}
.theme-elevage {
  --fond-sombre: #22361F; --carte-sombre: #31492C; --texte-clair: #DDE8D6;
  --accent: #8A5A12; --accent-fonce: #6E470D; --accent-clair: #F1C76B; --creme: #F7F1E3; --vert: #3F6B2F;
}

/* Bandeau des pages d'activité */
.act-bandeau { background-color: var(--fond-sombre); color: #FFFFFF; }
.act-bandeau-grille { padding-block: 64px 80px; display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; }
.act-bandeau .bandeau-texte { gap: 20px; }
.act-bandeau .surtitre { color: var(--accent-clair); }
.act-bandeau .chapo { color: var(--texte-clair); }
.act-bandeau .bouton-contour { color: #FFFFFF; }
.act-bandeau .bouton-contour:hover { background: #FFFFFF; color: var(--fond-sombre); }
.act-illustration { flex: 1 1 280px; max-width: 420px; color: var(--accent-clair); }
.act-illustration svg { display: block; width: 100%; height: auto; }
.fil { align-self: flex-start; color: var(--texte-clair); font-weight: 600; font-size: 15px; text-decoration: none; padding-block: 8px; }
.fil::before { content: "← "; }
.fil:hover { color: #FFFFFF; text-decoration: underline; }

.theme-logiciels .act-bandeau {
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.theme-reseaux .act-bandeau { background-image: radial-gradient(rgba(255,255,255,.09) 1.5px, transparent 1.7px); background-size: 22px 22px; }
.theme-videosurveillance .act-bandeau { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px); }
.theme-solaire .act-bandeau { background-image: radial-gradient(circle at 82% 18%, rgba(242,169,0,.30), transparent 42%); }
.theme-materiel .act-bandeau { background-image: radial-gradient(circle at 8% 100%, rgba(205,184,247,.18), transparent 40%); }
.theme-elevage .act-bandeau { background-image: radial-gradient(ellipse at 50% 130%, rgba(241,199,107,.22), transparent 60%); }

/* Polices propres à certaines activités */
.theme-logiciels .surtitre, .theme-logiciels .code, .theme-logiciels .numero { font-family: var(--mono); letter-spacing: .02em; }
.theme-elevage h1, .theme-elevage h2, .theme-elevage h3 { font-family: 'Fraunces', Georgia, serif; letter-spacing: 0; }
.theme-elevage h1 { font-weight: 700; }

/* Blocs communs */
.carte-accent { border-top: 4px solid var(--accent); border-radius: 4px 4px var(--rayon) var(--rayon); }
.code { font-weight: 700; color: var(--accent-texte, var(--accent-fonce)); font-size: 15px; }
.section-sombre .intro p { color: var(--texte-clair); }
.offre { background: var(--carte-sombre); border-radius: var(--rayon); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.offre p { color: var(--texte-clair); }
.offre .prix { color: var(--accent-clair); margin-top: auto; }

.etapes-ligne, .frise, .categories, .tuiles, .coches { list-style: none; margin: 0; padding: 0; }
.etapes-ligne { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.etapes-ligne li { display: flex; flex-direction: column; gap: 8px; }
.etapes-ligne .numero { font-family: var(--titres); font-weight: 800; font-size: 36px; line-height: 1; color: var(--accent-texte, var(--accent-fonce)); }
.etapes-ligne strong { font-size: 19px; }
.etapes-ligne span:not(.numero) { color: var(--encre-douce); }
.section-sombre .etapes-ligne .numero { color: var(--accent-clair); }
.section-sombre .etapes-ligne span:not(.numero) { color: var(--texte-clair); }

.coches { display: flex; flex-direction: column; gap: 12px; }
.coches li { padding-left: 30px; position: relative; }
.coches li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 14px; height: 8px; border-left: 3px solid var(--accent-texte, var(--accent-fonce)); border-bottom: 3px solid var(--accent-texte, var(--accent-fonce)); transform: rotate(-45deg); }

.encart-prix { background: var(--carte-sombre); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 10px; color: var(--texte-clair); }
.encart-montant { font-family: var(--titres); font-weight: 800; font-size: 44px; line-height: 1; color: var(--accent-clair); }
.encart-prix .bouton { align-self: flex-start; margin-top: 8px; }

.blocs-numerotes { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.blocs-numerotes article { display: flex; flex-direction: column; gap: 10px; }
.blocs-numerotes p { color: var(--encre-douce); }
.grand-numero { font-family: var(--titres); font-weight: 800; font-size: 64px; line-height: 1; color: var(--accent-texte, var(--accent)); }

.frise { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: frise; }
.frise li { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 4px solid var(--accent); }
.frise .numero { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fond-sombre); color: var(--accent-clair); font-family: var(--titres); font-weight: 800; font-size: 20px; }
.frise strong { font-size: 19px; }
.frise span:not(.numero) { color: var(--encre-douce); }

.categories { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.categories li { background: var(--creme); border-radius: var(--rayon); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.categories strong { font-family: var(--titres); font-size: 19px; }
.categories span { color: var(--encre-douce); }

/* Tuiles d'activité (page Services et bas des pages d'activité) */
.tuiles { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.tuile { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--rayon); background: var(--fond-sombre); color: #FFFFFF; text-decoration: none; transition: transform .15s ease; }
.tuile:hover { color: #FFFFFF; transform: translateY(-3px); }
.tuile .icone { flex-shrink: 0; width: 36px; height: 36px; color: var(--accent-clair); }
.tuile strong { font-family: var(--titres); font-size: 22px; }
.tuile span { color: var(--texte-clair); }
.tuile .tuile-lien { margin-top: auto; padding-top: 8px; color: var(--accent-clair); font-weight: 700; }
.tuiles-compactes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.tuiles-compactes .tuile { padding: 20px; flex-direction: row; align-items: center; gap: 14px; }
.tuiles-compactes .tuile strong { font-size: 17px; }
.titre-autres { font-size: 26px; margin-bottom: 20px; }

@media (prefers-reduced-motion: reduce) { .tuile { transition: none; } .tuile:hover { transform: none; } }
@media (max-width: 640px) { .act-illustration { max-width: 260px; } .act-bandeau-grille { padding-block: 40px 56px; } }


/* =============================================================================
   Pictogrammes et flèches
   ========================================================================== */
.picto { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
.picto-grand { width: 26px; height: 26px; }
.fleche { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bouton .fleche, .bouton .picto { margin-left: 10px; }
.bouton .picto:first-child { margin: 0 10px 0 0; width: 18px; height: 18px; }
.titre-souligne::after { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--accent); margin-top: 14px; }

/* =============================================================================
   Page Services (maquette « Choisissez une activité »)
   ========================================================================== */
.sv-hero { position: relative; background: var(--fond-sombre); color: #FFFFFF; overflow: hidden; }
.sv-hero-grille { padding-block: 48px 48px; }
.sv-hero-texte { max-width: 600px; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.sv-hero .surtitre { color: var(--accent-clair); }
.sv-hero h1 { font-size: clamp(36px, 4.4vw, 50px); line-height: 1.08; }
.surligne { color: #5DD68D; }
.sv-hero .chapo { color: var(--texte-clair); font-size: 18px; }
.sv-puces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sv-puces a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 14px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 15px; }
.sv-puces a:hover { background: rgba(255,255,255,.1); color: #FFFFFF; }
.sv-puces .icone { width: 20px; height: 20px; }
.sv-puce-solaire .icone { color: #FFC83D; }
.sv-puce-elevage .icone { color: #5DD68D; }

.sv-hero-visuel { position: relative; }
.sv-hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 18% center; }
.sv-vignettes { display: flex; gap: 12px; padding: 12px 16px; }
.sv-vignettes img { flex: 1 1 0; min-width: 0; height: 100px; object-fit: cover; border: 3px solid #FFFFFF; border-radius: 10px; }
@media (min-width: 980px) {
  .sv-hero-grille { padding-block: 56px 64px; min-height: 420px; }
  .sv-hero-texte { max-width: 52%; }
  .sv-hero-visuel { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; }
  .sv-hero-photo { clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
  .sv-vignettes { position: absolute; left: 4%; right: 4%; bottom: 20px; padding: 0; }
}
@media (max-width: 979px) { .sv-hero-photo { height: 280px; } }

.sv-activites { background: #FAFBFB; padding-block: 56px 72px; }
.sv-activites .intro { margin-bottom: 28px; }
.sv-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.sv-carte { position: relative; overflow: hidden; height: 100%; min-height: 230px; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: #FFFFFF; border: 1px solid #E1E6E5; border-radius: 10px; box-shadow: 0 1px 3px rgba(18,48,47,.08); color: var(--encre); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.sv-carte:hover { color: var(--encre); box-shadow: 0 8px 24px rgba(18,48,47,.12); transform: translateY(-2px); }
.sv-carte > :not(.sv-carte-photo) { position: relative; max-width: 70%; }
.sv-carte > strong, .sv-carte > .sv-carte-lien { max-width: none; }
.sv-carte-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%); mask-image: linear-gradient(to right, transparent 0, #000 55%); }
.sv-pastille { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pastille-fond); color: var(--pastille-trait); margin-bottom: 6px; }
.sv-pastille .icone { width: 28px; height: 28px; stroke: currentColor; }
.sv-carte strong { font-family: var(--titres); font-size: 19px; }
.sv-carte-texte { color: var(--encre-douce); font-size: 16px; line-height: 1.45; }
.sv-carte-lien { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; color: #B4531A; font-weight: 700; white-space: nowrap; }
.sv-carte-lien .fleche { margin: 0; }
.sv-logiciels { --pastille-fond: #E1E9FF; --pastille-trait: #2E56C9; }
.sv-reseaux { --pastille-fond: #DDF4E5; --pastille-trait: #1E7A48; }
.sv-videosurveillance { --pastille-fond: #FFE2D3; --pastille-trait: #C2410C; }
.sv-solaire { --pastille-fond: #FFF0C2; --pastille-trait: #A86A00; }
.sv-materiel { --pastille-fond: #ECE3FF; --pastille-trait: #6D3FC4; }
.sv-elevage { --pastille-fond: #DAF3E2; --pastille-trait: #237A45; }

.sv-cta { position: relative; background-color: var(--fond-sombre); background-image: linear-gradient(to right, rgba(18,48,47,0) 0, var(--fond-sombre) 230px), url('../img/services/poignee.jpg'); background-position: left center, left center; background-size: auto, auto 100%; background-repeat: no-repeat; color: #FFFFFF; }
.sv-cta-grille { padding-block: 48px; padding-left: 230px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.sv-cta-texte { flex: 1 1 340px; display: flex; flex-direction: column; gap: 14px; }
.sv-cta-texte p { color: var(--texte-clair); }
.sv-cta-boutons { display: flex; flex-direction: column; gap: 12px; }
.sv-cta .bouton-contour { color: #FFFFFF; }
.sv-cta .bouton-contour:hover { background: #FFFFFF; color: var(--encre); }
@media (max-width: 760px) {
  .sv-cta { background-image: none; }
  .sv-cta-grille { padding-left: 24px; }
  .sv-carte > :not(.sv-carte-photo) { max-width: 70%; }
}
@media (prefers-reduced-motion: reduce) { .sv-carte { transition: none; } .sv-carte:hover { transform: none; } }

/* --------------------------------------------------------------------------
   Ajustements visuels CLLC — finition, lisibilité et adaptation mobile
   -------------------------------------------------------------------------- */
:root {
  --rayon: 14px;
  --largeur: 1240px;
  --ombre-carte: 0 8px 24px rgba(18, 48, 47, .06);
  --ombre-survol: 0 16px 34px rgba(18, 48, 47, .12);
}

html { scroll-padding-top: 24px; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #CDEFE0; color: #12302F; }

.entete { position: relative; z-index: 5; box-shadow: 0 2px 12px rgba(18, 48, 47, .035); }
.logo img, .pied-logo img { object-fit: contain; }
.navigation { gap: 6px 20px; }
.navigation a:not(.bouton) { transition: color .18s ease; }
.navigation a:not(.bouton):hover { color: var(--accent); }
.navigation a[aria-current="page"]::after { height: 3px; }
.bouton { gap: 8px; box-shadow: 0 2px 0 rgba(0,0,0,.04); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(18,48,47,.13); }
.bouton:active { transform: translateY(0); }

/* La page d'accueil respire davantage et les blocs restent bien alignés. */
.bandeau .conteneur { gap: clamp(32px, 5vw, 64px); }
.engagement { border: 1px solid rgba(255,255,255,.09); box-shadow: 0 10px 26px rgba(0,0,0,.08); transition: transform .18s ease, background .18s ease; }
.engagement:hover { transform: translateY(-2px); background: #204947; }
.carte { border-color: #E2E9E7; box-shadow: var(--ombre-carte); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.carte:hover { transform: translateY(-3px); border-color: #C4D5D0; box-shadow: var(--ombre-survol); }
.carte .icone { color: var(--vert); }

/* Page Services */
.sv-hero { isolation: isolate; background-image: radial-gradient(ellipse at 15% 0%, rgba(42,110,91,.22), transparent 45%); }
.sv-hero-grille { padding-block: 58px 62px; }
.sv-hero-texte { gap: 18px; }
.sv-hero h1 { max-width: 690px; letter-spacing: -.035em; }
.sv-hero .chapo { max-width: 610px; line-height: 1.58; }
.sv-hero-visuel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(18,48,47,.12), transparent 60%); }
.sv-vignettes { z-index: 2; }
.sv-vignettes img { box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: transform .2s ease; }
.sv-vignettes img:hover { transform: translateY(-3px); }
.sv-puces a { border-color: rgba(210,235,228,.34); background: rgba(255,255,255,.025); transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.sv-puces a:hover { border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.1); transform: translateY(-1px); }
.sv-activites { background: linear-gradient(180deg, #FFFFFF 0%, #F7FAF9 100%); }
.sv-activites .intro { max-width: 820px; margin-bottom: 34px; }
.sv-activites .intro p { max-width: 760px; }
.sv-cartes { gap: 22px; }
.sv-carte { min-height: 246px; padding: 24px; border-radius: 13px; box-shadow: 0 5px 18px rgba(18,48,47,.055); }
.sv-carte::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; border: 1px solid rgba(255,255,255,.5); }
.sv-carte:hover { border-color: #CBD9D5; box-shadow: 0 14px 30px rgba(18,48,47,.13); }
.sv-carte-photo { width: 42%; opacity: .88; transition: width .22s ease, opacity .22s ease; }
.sv-carte:hover .sv-carte-photo { width: 46%; opacity: 1; }
.sv-carte > :not(.sv-carte-photo) { max-width: 72%; }
.sv-carte strong { line-height: 1.25; }
.sv-carte-texte { line-height: 1.5; }
.sv-carte-lien { color: var(--accent-fonce); padding-top: 12px; }
.sv-carte-lien .fleche { transition: transform .18s ease; }
.sv-carte:hover .sv-carte-lien .fleche { transform: translateX(3px); }
.sv-cta { background-color: #0D2B29; }
.sv-cta-grille { padding-block: 54px; }
.sv-cta .titre-souligne::after { background: #E56A2D; }

/* Formulaires et bas de page plus nets. */
.formulaire { box-shadow: var(--ombre-carte); border: 1px solid #E7E4DA; }
.champ { transition: border-color .18s ease, box-shadow .18s ease; }
.champ:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(31,111,92,.13); }
.pied { background: linear-gradient(135deg, #0B2624 0%, #071D1C 100%); }
.pied a { text-underline-offset: 3px; }
.pied a:hover { color: #FFFFFF; }
.pied-bas { font-size: 14px; }

@media (min-width: 980px) {
  .sv-hero-grille { min-height: 438px; padding-block: 60px 66px; }
  .sv-hero-texte { max-width: 55%; }
  .sv-hero-visuel { width: 45%; }
  .sv-hero-photo { object-position: 25% center; }
}

@media (max-width: 900px) {
  .entete .conteneur { gap: 10px 18px; }
  .navigation { gap: 4px 14px; font-size: 15px; }
  .navigation .bouton { padding-inline: 14px; }
  .sv-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .conteneur { padding-inline: 20px; }
  .entete .bandeau-contact .conteneur { gap: 2px 14px; }
  .bandeau-contact { font-size: 13px; }
  .bandeau-contact .conteneur > span:nth-of-type(2), .bandeau-contact .reseau-social { display: none; }
  .entete > .conteneur { padding-block: 10px 12px; }
  .logo img { height: 42px; }
  .navigation { width: 100%; justify-content: flex-start; gap: 4px 16px; font-size: 14px; }
  .navigation a { padding-block: 7px; }
  .navigation .bouton { min-height: 40px; margin-top: 4px; }
  .bandeau .conteneur { padding-block: 48px 52px; gap: 30px; }
  .bandeau-texte .chapo, .intro p, .chapo { font-size: 17px; }
  .section { padding-block: 56px; }
  .sv-hero-grille { padding-block: 42px 34px; }
  .sv-hero-texte { gap: 16px; }
  .sv-hero h1 { font-size: clamp(32px, 8.5vw, 42px); }
  .sv-hero .chapo { font-size: 16px; }
  .sv-puces { gap: 8px; }
  .sv-puces a { min-height: 40px; padding: 7px 12px; font-size: 14px; }
  .sv-hero-photo { height: 230px; }
  .sv-vignettes { gap: 8px; padding: 10px 14px 16px; }
  .sv-vignettes img { height: 74px; border-width: 2px; }
  .sv-activites { padding-block: 44px 52px; }
  .sv-cartes { grid-template-columns: 1fr; gap: 14px; }
  .sv-carte { min-height: 218px; padding: 20px; }
  .sv-carte > :not(.sv-carte-photo) { max-width: 72%; }
  .sv-carte-photo { width: 40%; }
  .sv-cta-grille { padding-block: 38px; padding-left: 20px; gap: 22px; }
  .sv-cta-boutons { width: 100%; }
  .sv-cta-boutons .bouton { width: 100%; }
  .formulaire { padding: 20px; }
  .pied .pied-colonnes { padding-block: 32px 22px; gap: 24px; }
  .pied-coordonnees { flex-basis: 100%; }
  .pied-liens-grille { gap: 6px 24px; }
  .pied .pied-bas { flex-direction: column; gap: 12px; padding-block: 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* =============================================================================
   Optimisation des espaces : mise en page plus compacte et plus efficace
   ============================================================================= */
.section { padding-block: 60px; }
.intro { gap: 8px; margin-bottom: 24px; }
.intro p, .chapo { font-size: 18px; }
.grille, .grille-4 { gap: 16px; }
.carte { padding: 22px; gap: 8px; }
.deux-colonnes { gap: 32px; }
.encadre { padding: 22px; }
.contact { gap: 32px; align-items: flex-start; }
.coordonnees { gap: 14px; }
.liste-coordonnees { gap: 12px; }
.formulaire { padding: 24px; gap: 14px; }
.pied .pied-colonnes { padding-block: 28px 20px; gap: 24px 32px; }
.pied .pied-bas { padding-block: 16px 20px; }

/* Page Services : limiter la hauteur du bandeau et rapprocher les cartes */
.sv-hero-grille { padding-block: 42px 46px; }
.sv-activites { padding-block: 42px 48px; }
.sv-activites .intro { margin-bottom: 22px; }
.sv-cartes { gap: 16px; }
.sv-carte { min-height: 218px; padding: 20px; gap: 7px; }
.sv-pastille { width: 50px; height: 50px; margin-bottom: 3px; }
.sv-carte-lien { padding-top: 6px; }
.sv-cta-grille { padding-block: 38px; gap: 20px 28px; }
.sv-vignettes img { height: 86px; }

/* Pages d'activité : moins de hauteur vide autour du contenu */
.act-bandeau-grille { padding-block: 46px 54px; gap: 32px 44px; }
.act-bandeau .bandeau-texte { gap: 16px; }
.offre, .encart-prix { padding: 22px; }
.etapes-ligne, .frise { gap: 20px; }
.categories { gap: 12px; }
.categories li { padding: 18px 20px; }
.tuile { padding: 22px; }
.titre-autres { margin-bottom: 16px; }

@media (min-width: 980px) {
  .sv-hero-grille { min-height: 390px; padding-block: 44px 48px; }
  .sv-hero-texte { gap: 15px; }
  .sv-hero h1 { font-size: clamp(36px, 4vw, 48px); }
}

@media (max-width: 760px) {
  .section { padding-block: 44px; }
  .intro { margin-bottom: 20px; }
  .grille, .grille-4 { gap: 14px; }
  .carte { padding: 20px; }
  .contact { gap: 24px; }
  .formulaire { padding: 20px; gap: 12px; }
  .act-bandeau-grille { padding-block: 38px 42px; gap: 24px; }
  .sv-activites { padding-block: 36px 40px; }
  .sv-cartes { gap: 12px; }
  .sv-carte { min-height: 204px; padding: 18px; }
  .sv-cta-grille { padding-block: 32px; }
  .pied .pied-colonnes { padding-block: 24px 18px; gap: 20px; }
  .pied .pied-bas { padding-block: 14px 18px; }
}

@media (max-width: 640px) {
  .section { padding-block: 38px; }
  .bandeau .conteneur { padding-block: 40px 44px; gap: 24px; }
  .sv-hero-grille { padding-block: 34px 28px; }
  .sv-hero-texte { gap: 14px; }
  .sv-activites { padding-block: 32px 36px; }
  .sv-carte { min-height: 196px; padding: 17px; }
  .sv-cta-grille { padding-block: 28px; }
  .act-bandeau-grille { padding-block: 32px 36px; }
  .pied .pied-colonnes { padding-block: 22px 16px; }
  .pied .pied-bas { padding-block: 14px 16px; }
}