:root{
  --brand:#d91e2c; --ink:#1f2937; --muted:#6b7280; --bg:#f8fafc; --card:#ffffff; --line:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
     background:var(--bg); color:var(--ink); line-height:1.6}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:24px}
.narrow{max-width:800px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){ .grid-2{grid-template-columns:1fr} }

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.5px}
.brand span{color:var(--brand)}
.menu a{padding:14px 10px;display:inline-block;color:inherit;text-decoration:none}
.menu a.active{color:var(--brand);font-weight:600}

/* Burger for mobile */
#nav-toggle{display:none}
.burger{display:none;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}
@media (max-width:760px){
  .burger{display:block}
  .menu{position:absolute;top:56px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:none}
  #nav-toggle:checked ~ .menu{display:block}
  .menu a{display:block;padding:14px 24px}
}

/* Hero */
.hero{padding:56px 0 28px}
.badge{display:inline-block;background:#fee2e2;color:#7f1d1d;padding:4px 10px;border-radius:999px;font-size:12px}
.lead{color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:24px auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.shadow{box-shadow:0 10px 20px rgba(0,0,0,.05)}

/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:10px;border:1px solid var(--ink);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.link{border-color:transparent;padding:0;color:var(--brand)}
.btn.primary:hover{filter:brightness(.95)}
.card:hover{transform:translateY(-2px);transition:transform .2s ease}

/* Lists */
ul.bullets{padding-left:18px}
ul.ticks{list-style:none;padding:0}
ul.ticks li{padding-left:26px;position:relative;margin:8px 0}
ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#fff;margin-top:28px}
.footer-grid{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* Forms */
.form label{display:block}
.form input,.form select,.form textarea{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff
}
.form-note{font-size:12px;color:var(--muted);margin-top:8px}

/* Animations (reveal on scroll) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Reviews widget */
.reviews{text-align:center;margin:56px auto}
.reviews .stars{color:#fbbf24;font-size:24px;margin:8px 0 12px}
.reviews blockquote{font-style:italic;margin:16px auto;max-width:640px;color:var(--muted)}
.reviews cite{display:block;margin-top:8px;color:var(--ink);font-weight:600}
.review-cta{display:flex;gap:12px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:12px}

/* Accessibility tweaks */
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline:2px solid var(--brand);outline-offset:2px
}
form.form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
form.form label {
  font-weight: 600;
}
form.form input,
form.form select,
form.form textarea {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
}
form.form button {
  align-self: flex-start;
}
form.form .form-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* ===== Services page spacing & rhythm ===== */
.page-services .container{
  padding-top: 40px;
  padding-bottom: 64px;
}

.page-services h1{
  margin: 0 0 28px;
  letter-spacing: .2px;
}

.service-card{
  padding: 24px 22px;
  margin: 18px 0 22px;               /* espace entre les cartes */
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #fff, #fff) padding-box,
    linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0)) border-box;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

.service-card h2{
  margin: 0 0 10px;
  line-height: 1.25;
}

.service-card p{
  margin: 0 0 12px;
  color: var(--muted);
}

.service-card ul{
  margin: 8px 0 0;
  padding-left: 18px;
}

@media (min-width: 900px){
  .service-card{
    padding: 28px 26px;
    margin: 22px 0 26px;
  }
}

/* ===== Footer cleanup (links, spacing, look) ===== */
.site-footer{
  background: #f9fafb;
  border-top: 1px solid var(--line);
}

.footer-grid{
  padding-top: 18px;
  padding-bottom: 18px;
  align-items: flex-start;
}

.site-footer nav{
  display: flex;
  gap: 18px;
}

/* Liens footer: stop au bleu/violet moches */
.site-footer a,
.site-footer a:visited{
  color: var(--ink);
  text-decoration: none;
}

.site-footer a:hover{
  color: var(--brand);
  text-decoration: underline;
}

/* Petite barre douce au-dessus du footer pour séparer visuellement */
.site-footer::before{
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, rgba(217,30,44,.18), rgba(217,30,44,0));
}

/* ===== Animation au survol des cartes Services ===== */
.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  transition: transform .3s ease, box-shadow .3s ease;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(217,30,44,0.1), rgba(217,30,44,0));
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: inherit;
}

.service-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card h2 {
  transition: color .3s ease;
}

.service-card:hover h2 {
  color: var(--brand);
}
/* ===== Animation au survol des cartes d'accueil ===== */
.cards .card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 5px 12px rgba(0,0,0,0.05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}

.cards .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(217,30,44,0.1), rgba(217,30,44,0));
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: inherit;
}

.cards .card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  border-color: rgba(217,30,44,0.3);
}

.cards .card:hover::before {
  opacity: 1;
}

.cards .card h2 {
  transition: color .3s ease;
}

.cards .card:hover h2 {
  color: var(--brand);
}
/* Fix clics bloqués par l'overlay des cartes */
.cards .card,
.service-card{
  position: relative;
  z-index: 0;            /* crée une base propre */
  isolation: isolate;    /* sépare le contexte d'empilement */
}

.cards .card::before,
.service-card::before{
  pointer-events: none;  /* ne mange plus les clics */
  z-index: -1;           /* passe sous le contenu */
}

/* Optionnel: s'assurer que le lien reste au-dessus si besoin */
.cards .card a,
.service-card a{
  position: relative;
  z-index: 1;
}


/* ===== Elfsight Reviews Widget Integration ===== */
.reviews {
  text-align: center;
  margin: 56px auto;
  padding-bottom: 40px;
}

.reviews h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.reviews .lead {
  color: var(--muted);
  margin-bottom: 28px;
}

.elfsight-app-64f2e65d-fb06-4983-8312-5ca349ed95bc {
  margin: 0 auto;
  max-width: 700px;
}