/* Aurora : gabarit des pages services (freelance, agence, Divi, maintenance, audit, formation, hébergement, IA).
   Reprend les blocs de l'accueil (page.css) ; ne contient que ce qui est propre aux pages services. */

/* ---------- En-tête : fil d'Ariane, titre, carte « en bref » sur la trame ---------- */
.hero--service { min-height: 0; padding: 144px 0 var(--espace-4); }
.hero--service .hero__grille { grid-template-columns: minmax(0, 1fr) 380px; }
.hero--service .hero__titre { max-width: 820px; text-wrap: balance; }
@media (min-width: 1200px) { .hero--service .hero__titre { font-size: 64px; } }
.hero__accent { color: var(--violet); }

.fil-ariane { margin-bottom: var(--espace-3); color: var(--texte-secondaire); }
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0; padding: 0; list-style: none; }
.fil-ariane li { display: inline-flex; align-items: center; gap: 12px; }
.fil-ariane li + li::before { content: ""; width: 4px; height: 4px; background: var(--violet); }
.fil-ariane a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); color: var(--texte-secondaire); text-decoration: none; transition: color var(--au-duree-survol) var(--au-ease); }
.fil-ariane a:hover { color: var(--blanc); }
.fil-ariane [aria-current] { color: var(--blanc); }

.service-bref { gap: 0; padding: var(--espace-4); }
.service-bref__chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4) var(--espace-3); margin: 0; }
.service-bref__chiffres div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.service-bref__valeur { font-size: 40px; line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; color: var(--blanc); white-space: nowrap; }
.service-bref__chiffres dd { margin: 0; color: var(--texte-secondaire); }
.service-bref__note { margin-top: var(--espace-4); padding-top: var(--espace-3); border-top: 1px solid var(--ligne); }

/* ---------- Grilles de cartes ---------- */
.service-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.service-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-carte { gap: var(--espace-2); }
.service-carte .au-carte__titre { margin-top: var(--espace-1); }
.problemes__grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Comparaison (freelance ou agence, Aurora ou hébergeur classique) ---------- */
.comparaison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); max-width: 1040px; margin: 0 auto; }
.comparaison__carte { gap: var(--espace-3); padding: var(--espace-5); }
.comparaison__carte .h3 { color: var(--au-titre); }
.comparaison__carte--autre .au-liste li::before { background: transparent; box-shadow: inset 0 0 0 1px var(--texte-secondaire); }

/* ---------- Texte et points (agence) ---------- */
.partenaire { display: grid; grid-template-columns: 7fr 5fr; gap: var(--espace-6) var(--espace-8); align-items: start; }
.partenaire__texte { display: flex; flex-direction: column; gap: var(--espace-3); color: var(--texte-secondaire); }
.partenaire__texte .corps-l:first-child { color: var(--blanc); }
.partenaire__points { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.partenaire__points li { display: flex; flex-direction: column; gap: var(--espace-1); padding: var(--espace-3) 0; border-top: 1px solid var(--ligne-nuit); }
.partenaire__points .h3 { display: flex; align-items: center; gap: 12px; color: var(--blanc); }
.partenaire__points .h3::before { content: ""; flex: none; width: var(--carre); height: var(--carre); background: var(--violet); }
.partenaire__points .corps { color: var(--texte-secondaire); }

/* ---------- Sections de couleur : Divi 5, formules, livrables, références ---------- */
.divi__atouts--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.divi__atouts--6 .au-carte { min-height: 0; }
.divi__conclusion { max-width: 640px; color: var(--blanc); }

.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); align-items: stretch; }
.formule { gap: var(--espace-3); padding: var(--espace-5); }
.formule .h3 { color: var(--blanc); }
.formule__pour { color: var(--texte-secondaire); }
.formule__lien { margin-top: auto; align-self: flex-start; }

.offre { display: grid; grid-template-columns: 5fr 7fr; gap: var(--espace-6) var(--espace-8); align-items: start; padding: var(--espace-6); }
.offre__prix { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-2); }
.offre__prix .h3 { color: var(--blanc); }
.offre__montant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.offre__valeur { font-size: 96px; line-height: 0.95; font-weight: 500; letter-spacing: -0.05em; color: var(--blanc); white-space: nowrap; }
.offre__montant .corps-l { color: var(--blanc); }
.offre__ttc, .offre__pour { margin: 0; color: var(--texte-secondaire); }
.offre__pour { margin-bottom: var(--espace-2); }
.offre__liste { gap: var(--espace-2); padding-top: var(--espace-1); }
.offre__liste li { color: var(--blanc); }

.livrables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gouttiere); margin: 0; padding: 0; list-style: none; }
.livrables li { display: flex; align-items: baseline; gap: var(--espace-2); padding: var(--espace-3) 0; border-top: 1px solid var(--nuit); color: var(--nuit); }
.livrables__carre { flex: none; width: var(--carre); height: var(--carre); background: var(--nuit); transform: translateY(-2px); }

.references .au-pastille { color: var(--nuit); }

/* ---------- Avis et services liés ---------- */
.avis-service { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); align-items: start; }
.avis-service .au-avis { width: auto; }
.avis-service__tous { display: flex; justify-content: center; margin: var(--espace-5) 0 0; }

.lie { gap: var(--espace-2); }
.lie .au-lien { margin-top: auto; }
.tous-services { display: flex; flex-direction: column; gap: var(--espace-2); margin-top: var(--espace-8); padding-top: var(--espace-5); border-top: 1px solid var(--ligne); }
.tous-services__titre { color: var(--texte-secondaire); }
.tous-services ul { margin: 0; padding: 0; list-style: none; }
.tous-services a.au-pastille { color: var(--blanc); text-decoration: none; transition: border-color var(--au-duree-survol) var(--au-ease), color var(--au-duree-survol) var(--au-ease); }
.tous-services a.au-pastille:hover { border-color: var(--violet); color: var(--violet); }
.tous-services__actif { border-color: transparent; background: var(--nuit); color: var(--violet); }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1199px) {
  .hero--service { padding-top: 128px; }
  .hero--service .hero__grille { grid-template-columns: minmax(0, 1fr); }
  .service-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problemes__grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partenaire { grid-template-columns: minmax(0, 1fr); }
  .divi__atouts--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formules, .avis-service { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .offre { grid-template-columns: minmax(0, 1fr); padding: var(--espace-5); }
}
@media (max-width: 809px) {
  .hero--service { padding-top: 112px; }
  .service-bref { padding: var(--espace-3); }
  .service-bref__valeur { font-size: 32px; }
  .service-grille, .service-grille--4, .problemes__grille--4, .comparaison, .livrables, .divi__atouts--6 { grid-template-columns: minmax(0, 1fr); }
  .comparaison__carte, .formule, .offre { padding: var(--espace-3); }
  .offre__valeur { font-size: 72px; }
}

/* Réalisations : les cartes du carrousel de l'accueil, posées en grille */
.realisations-service { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.realisations-service .carrousel__carte { user-select: auto; }
.realisations-service .projet__scene { aspect-ratio: 16 / 11; }
.realisation--perso .projet__ecran img { height: 100%; object-fit: cover; object-position: top; }
div.carrousel__carte .projet__fenetre { transform: none; }
@media (max-width: 1199px) { .realisations-service { grid-template-columns: repeat(2, minmax(0, 1fr)); } .realisations-service > :nth-child(3) { display: none; } }
@media (max-width: 767px) { .realisations-service { grid-template-columns: minmax(0, 1fr); gap: var(--espace-5); } .realisations-service > :nth-child(3) { display: flex; } }