/*
- style.css — « La Vie à Mulhouse » & « Services Pratiques »
- Thème sombre, rouge #ff3b30 en accent principal.
- Police : Bricolage Grotesque (titres), hébergée sur le site.
 */

 @font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --noir: #050505;
  --surface: #0e0e10;
  --surface-2: #161618;
  --bord: #26262a;
  --bord-fort: #3a3a40;
  --texte: #f3f3f1;
  --doux: #b2b2ba;
  --faible: #8c8c95;
  --rouge: #ff3b30;
  --rouge-clair: #ff6b61;
  --papier: #fbfbfa;
  --encre: #121214;
  --encre-doux: #55555d;
  --jaune: #ffe500;

  --police-titre: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --marge: clamp(16px, 4vw, 40px);
  --rayon: 28px;
  --ombre: 0 24px 70px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte);
  background:
    radial-gradient(900px 480px at 85% -8%, rgba(255, 59, 48, .16), transparent 62%),
    radial-gradient(700px 420px at -10% 4%, rgba(255, 255, 255, .05), transparent 60%),
    var(--noir);
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

::selection { background: var(--rouge); color: #fff; }

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, a, input { outline-offset: 3px; }
:focus-visible { outline: 3px solid #fff; }

.conteneur { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--marge); }
.sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête ---------- */

.entete { position: relative; z-index: 20; padding: clamp(20px, 5vw, 44px) 0 24px; }

.titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: clamp(2.6rem, 9.5vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.045em;
}
.titre__fin { font-weight: 300; color: #e4e4e6; letter-spacing: -.035em; }

.intro {
  margin: 18px 0 0;
  max-width: none;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: var(--doux);
}
.intro strong { color: var(--texte); font-weight: 500; }

/* ---------- Contenu Principal & Grille Services ---------- */

.principal { flex: 1; padding-bottom: 40px; }

.sections-services {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 1.5rem;
}

.groupe-service__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: -.02em;
}

.grille-liens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Style de base des cartes */
.carte-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.carte-lien:hover {
  background-color: var(--surface-2);
  transform: translateY(-3px);
}

.carte-lien__contenu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.carte-lien__contenu strong {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.carte-lien__contenu span {
  font-size: 0.85rem;
  color: var(--doux);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-lien__fleche {
  font-size: 1.2rem;
  color: var(--faible);
  transition: color 0.2s ease, transform 0.2s ease;
  margin-left: 1rem;
  flex: none;
}

.carte-lien:hover .carte-lien__fleche {
  color: #ffffff;
  transform: translate(2px, -2px);
}

/* ---------- Couleurs par Catégorie ---------- */

/* 🏥 Santé & Urgences : Rouge / Rose */
.groupe-service--sante .carte-lien {
  border-left: 4px solid #ff3b30;
}
.groupe-service--sante .carte-lien:hover {
  border-color: #ff3b30;
  box-shadow: 0 6px 24px rgba(255, 59, 48, 0.18);
}
.groupe-service--sante .carte-lien:hover .carte-lien__fleche {
  color: #ff3b30;
}

/* 🏛️ Administrations : Bleu */
.groupe-service--admin .carte-lien {
  border-left: 4px solid #007aff;
}
.groupe-service--admin .carte-lien:hover {
  border-color: #007aff;
  box-shadow: 0 6px 24px rgba(0, 122, 255, 0.18);
}
.groupe-service--admin .carte-lien:hover .carte-lien__fleche {
  color: #007aff;
}

/* 🛒 Commerces : Orange */
.groupe-service--commerces .carte-lien {
  border-left: 4px solid #ff9500;
}
.groupe-service--commerces .carte-lien:hover {
  border-color: #ff9500;
  box-shadow: 0 6px 24px rgba(255, 149, 0, 0.18);
}
.groupe-service--commerces .carte-lien:hover .carte-lien__fleche {
  color: #ff9500;
}

/* 🔨 Bricolage : Vert */
.groupe-service--bricolage .carte-lien {
  border-left: 4px solid #34c759;
}
.groupe-service--bricolage .carte-lien:hover {
  border-color: #34c759;
  box-shadow: 0 6px 24px rgba(52, 199, 89, 0.18);
}
.groupe-service--bricolage .carte-lien:hover .carte-lien__fleche {
  color: #34c759;
}

/* 🚌 Transports : Cyan */
.groupe-service--transports .carte-lien {
  border-left: 4px solid #5ac8fa;
}
.groupe-service--transports .carte-lien:hover {
  border-color: #5ac8fa;
  box-shadow: 0 6px 24px rgba(90, 200, 250, 0.18);
}
.groupe-service--transports .carte-lien:hover .carte-lien__fleche {
  color: #5ac8fa;
}

/* 🎟️ Loisirs : Violet */
.groupe-service--loisirs .carte-lien {
  border-left: 4px solid #af52de;
}
.groupe-service--loisirs .carte-lien:hover {
  border-color: #af52de;
  box-shadow: 0 6px 24px rgba(175, 82, 222, 0.18);
}
.groupe-service--loisirs .carte-lien:hover .carte-lien__fleche {
  color: #af52de;
}

/* ---------- Pied de page ---------- */

.pied {
  margin-top: auto;
  padding: 24px 0 32px;
  border-top: 1px solid #141416;
  font-size: 12.5px;
  color: var(--faible);
}
.pied__ligne {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: center;
}
@media (min-width: 768px) {
  .pied__ligne {
    flex-direction: row;
    text-align: left;
  }
}

/* Accessibilité pour mouvements réduits */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carte-lien { transition: none; }
}

/* Bouton de contact webmaster dans l'intro */
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background-color: var(--rouge);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-contact:hover {
  background-color: var(--rouge-clair);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.3);
}

.btn-contact:visited {
  color: #ffffff !important;
}