# We'll create a cleaned, consolidated CSS for the user's site.
# The new file will be saved as /mnt/data/style.cleaned.css

css = """
/* =========================================
   Base design system & resets (cleaned)
   ========================================= */
:root{
  --brand:#059669;         /* emerald-600 */
  --brand-dark:#047857;    /* emerald-700 */
  --text:#111827;          /* gray-900 */
  --muted:#6b7280;         /* gray-500/600 mix */
  --border:#e5e7eb;        /* gray-200 */
  --card:#f9fafb;          /* gray-50 */
  --maxw: 1000px;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.65;
}
img{border-radius:1.25rem;max-width:100%;height:auto;display:block}

/* Focus */
a:focus,button:focus,input:focus,select:focus,textarea:focus{
  outline:2px dashed var(--brand);
  outline-offset:3px;
}

/* Utilities */
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.08)}

/* Global form feedback */
input,select,textarea{transition:box-shadow .2s,border-color .2s}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(5,150,105,.15);
}

/* =========================================
   Layout containers
   ========================================= */
.container{max-width:var(--maxw);margin:auto;padding:24px}
header,main,footer{display:block}

/* =========================================
   Navigation / Breadcrumbs
   ========================================= */
.breadcrumbs{font-size:.95rem;color:var(--muted);margin:8px 0 0}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}

/* Scrollspy (if used) */
#main-nav a.active{color:var(--brand-dark);position:relative}
#main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--brand-dark);
}

/* =========================================
   Article styles
   ========================================= */
.article-header{display:grid;gap:12px;margin-top:8px;margin-bottom:24px}
.article-header h1{line-height:1.25;margin:0}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
.cover{width:100%;border-radius:14px;background:var(--card);border:1px solid var(--border);overflow:hidden}
.cover img{width:100%;height:auto;display:block;border-radius:0}

.toc{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin:24px 0}
.toc strong{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:18px}

h2{margin-top:32px}
h3{margin-top:20px}
ul,ol{padding-left:20px}
blockquote{border-left:4px solid var(--border);margin:16px 0;padding:8px 16px;color:var(--muted);background:#fff;border-radius:8px}

details{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;margin:10px 0}
summary{cursor:pointer;font-weight:600}

.tags{margin-top:16px;font-size:.95rem;color:var(--muted)}

.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--brand);color:#fff;font-weight:600}
.btn.secondary{background:#ffffff;color:var(--text)}

/* =========================================
   HERO — single, deduped implementation
   ========================================= */
.hero-blend{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); /* texte | image */
  align-items:stretch;
  gap:2rem;
  min-height:clamp(420px,60vh,640px);
  padding:clamp(1rem,2vh,2rem) 0;
}
.hero-blend__content{
  display:flex;flex-direction:column;justify-content:center;
  max-width:720px;
}
.hero-blend__media{
  position:relative;overflow:hidden;border-radius:1rem;
}
.hero-blend__img{
  width:100%;height:100%;object-fit:cover;object-position:60% center;display:block;border-radius:0;
}
.hero-blend__fade{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.88) 22%,rgba(255,255,255,.55) 40%,rgba(255,255,255,0) 65%);
}
@media (max-width:768px){
  .hero-blend{grid-template-columns:1fr;min-height:auto}
}

/* =========================================
   Réassurance pills — single, deduped implementation
   ========================================= */
.reassurance-pills{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.25rem;
  padding:0;margin:2rem 0 0;list-style:none;
}
.pill{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.6rem;
  background:#fff;color:#1f2937;padding:1rem 1.25rem;border:1px solid var(--border);
  border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.06);
  flex:1 1 260px;max-width:300px;box-sizing:border-box;text-align:center;
}
.pill-icon{font-size:1.15rem;line-height:1;flex-shrink:0}
.pill-text{font-size:.95rem;line-height:1.4}
.pill-text b{display:block;font-size:1rem;color:#111827;margin-bottom:.15rem}
@media (min-width:1024px){
  .pill{flex-basis:270px;max-width:320px}
}

/* =========================================
   Footer
   ========================================= */
footer{margin-top:40px;border-top:1px solid var(--border);background:#fff}
"""

with open('/mnt/data/style.cleaned.css','w', encoding='utf-8') as f:
    f.write(css)

print("Saved cleaned CSS to /mnt/data/style.cleaned.css")

/* ===========================
   Mise en page article
   =========================== */

/* Forcer la largeur de l’article, même si .container est globalement full width */
main.container.article,
header .container,
footer .container{
  max-width: var(--maxw, 1000px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* Rythme typographique + lisibilité */
.article h1{margin: 0 0 8px; line-height: 1.2}
.article h2{margin-top: 32px}
.article h3{margin-top: 20px}
.article p{max-width: 72ch}

/* Image de couverture bien cadrée */
.article .cover{border:1px solid var(--border,#e5e7eb); border-radius:14px; overflow:hidden}
.article .cover img{display:block; width:100%; height:auto; border-radius:0}

/* Métadonnées sous le titre */
.article .meta{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted,#6b7280); font-size:.95rem}

/* ===========================
   Sommaire (ToC) élégant
   =========================== */
.article .toc{
  background: var(--card,#f9fafb);
  border: 1px solid var(--border,#e5e7eb);
  border-radius: 12px;
  padding: 16px 16px 12px;
  margin: 24px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.article .toc strong{
  display:block; margin-bottom:6px; font-size:1rem; letter-spacing:.2px;
}

/* Liste numérotée propre avec espace et clic confortable */
.article .toc ol{
  list-style: none;
  margin: 0;
  padding-left: 0;
  counter-reset: toc;
}
.article .toc li{
  counter-increment: toc;
  margin: 6px 0;
}
.article .toc li::before{
  content: counter(toc) ".";
  display:inline-block;
  width: 1.6em;
  color: var(--muted,#6b7280);
}
.article .toc a{
  color: var(--brand,#059669);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px dashed transparent;
}
.article .toc a:hover{
  color: var(--brand-dark,#047857);
  border-bottom-color: currentColor;
}

/* ===========================
   Éléments de contenu
   =========================== */
.article blockquote{
  border-left:4px solid var(--border,#e5e7eb);
  padding:8px 16px;
  margin:16px 0;
  background:#fff;
  color:var(--muted,#6b7280);
  border-radius:8px;
}

.article details{
  background:#fff;
  border:1px solid var(--border,#e5e7eb);
  border-radius:10px;
  padding:12px;
  margin:10px 0;
}
.article summary{cursor:pointer; font-weight:600}

.article .tags{margin-top:16px; font-size:.95rem; color:var(--muted,#6b7280)}

/* Boutons CTA si tu les utilises */
.article .btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  border:1px solid var(--border,#e5e7eb);
  background: var(--brand,#059669); color:#fff; font-weight:600;
}
.article .btn.secondary{background:#fff; color:var(--text,#111827)}

/* Titres article = look "home", sans Tailwind */
.article h1{
  color:var(--text,#111827);
  font-weight:800;             /* extrabold */
  letter-spacing:-.02em;
  line-height:1.15;            /* leading-tight */
  margin:.25rem 0 1rem;
  /* ≈ text-5xl -> md:text-7xl */
  font-size:clamp(2.5rem, 5vw, 4.5rem);
}
.article h2{
  color:var(--text,#111827);
  font-weight:800;             /* extrabold comme sur la home */
  letter-spacing:-.01em;
  line-height:1.25;
  margin:2rem 0 .75rem;
  /* ≈ text-3xl -> md:text-4xl */
  font-size:clamp(1.875rem, 2.8vw, 2.25rem);
}
.article h3{
  color:var(--text,#111827);
  font-weight:700;             /* bold */
  line-height:1.3;
  margin:1.25rem 0 .5rem;
  /* ≈ text-2xl */
  font-size:clamp(1.25rem, 2vw, 1.5rem);
}