/* Page d'accueil (landing) — palette reprise de editor.css (--paper/--ink/--accent) pour rester
   cohérent visuellement avec l'éditeur, mais feuille de style dédiée : le contenu (mise en page
   marketing, sections pleine largeur) n'a rien à voir avec l'UI de l'éditeur lui-même.
   Refonte identité visuelle (2026-08-20) : mêmes tokens redéfinis en fond sombre + accent doré
   que css/editor.css (voir son commentaire de :root pour le détail) — account.css et blog.css
   réutilisent ce même bloc :root (chargés en plus de ce fichier sur leurs pages respectives),
   donc un seul endroit à faire évoluer pour les 3 fichiers. --surface (nouveau) remplace les
   anciens fonds de carte blancs (#fff) en dur. */
:root {
    --paper: #131110;
    --surface: #1E1B17;
    --ink: #F3ECE0;
    --ink-muted: #A99E8E;
    --line: #35302A;
    --accent: #9C7A42;
    --accent-soft: #251F15;
    --gold: #D9B77C;
    --danger: #E0685A;
    --danger-soft: rgba(224,104,90,0.14);
    --success: #5FAE84;
    --success-soft: rgba(95,174,132,0.14);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--paper); color: var(--ink); line-height: 1.5;
}
/* Grain léger sur tout le fond sombre (technique "polish" 2026-08-20, sur demande "rendre le
   design plus sexy") : un aplat noir uni sur un grand écran rend plat/bon marché — un bruit
   fractal SVG très subtil (feTurbulence, tuilé en 180x180) donne une texture presque
   imperceptible mais évite l'effet "capture d'écran d'un dégradé CSS". `mix-blend-mode: overlay`
   + `pointer-events: none` : n'affecte que le rendu visuel, jamais les clics, et se combine avec
   n'importe quelle couleur en dessous plutôt que de la recouvrir platement. */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

header.site-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; max-width: 1100px; margin: 0 auto;
}
/* Logo "Reno Design" (img/logo.png) : lettrage script fourni par l'utilisateur, détouré en PNG
   transparent (fond blanc source -> alpha, glyphes recolorés en crème var(--ink)) plutôt qu'une
   recréation en CSS/webfont — c'est le lettrage réel de l'identité, pas une approximation. Hauteur
   fixe, largeur automatique (le fichier a son propre ratio, ~525x379). */
.brand { display: flex; align-items: center; }
.brand-logo { height: 34px; width: auto; display: block; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 10px;
    font-weight: 800; font-size: 14px; text-decoration: none; border: none; cursor: pointer;
    font-family: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* Dégradé accent -> or (pas un aplat) + texte foncé (var(--paper)) plutôt que blanc : le texte
   blanc passait de justesse sur l'accent seul (~4:1) mais tombe sous le seuil lisible côté or
   clair du dégradé — un texte sombre reste très lisible sur toute la plage accent/or. Lift +
   halo doré au survol (transform + box-shadow), pas juste un changement de couleur. */
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--gold) 130%); color: var(--paper); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -6px rgba(217,183,124,0.45); filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--gold); }

.hero {
    padding: 60px 24px 40px; max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.hero h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; line-height: 1.12; margin: 0 0 18px; }
/* Texte en dégradé (pas un aplat var(--accent)) sur le mot clé du titre — même logique que les
   CTA ci-dessus, juste pour la lecture visuelle plutôt que pour un souci de contraste (c'est du
   gros texte, l'aplat passait déjà très bien). Fallback en couleur pleine (--gold) avant le
   dégradé : un navigateur qui ignore background-clip:text garde un titre lisible plutôt
   qu'invisible (color:transparent sans clip réel). */
.hero h1 span { color: var(--gold); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero h1 span {
        background: linear-gradient(100deg, var(--gold), var(--accent) 85%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
}
.hero p.lede { font-size: 17px; color: var(--ink-muted); margin: 0 0 28px; max-width: 46ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual {
    aspect-ratio: 4/3; border-radius: 20px; background:
        linear-gradient(135deg, var(--accent-soft), var(--surface) 60%);
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    /* Halo doré diffus + ombre de "profondeur" : un aplat encadré tout seul reste plat même
       avec le dégradé de fond ci-dessus — le halo est ce qui donne l'impression que la carte
       flotte au-dessus de la page plutôt que d'être juste posée dessus. */
    box-shadow: 0 0 100px -20px rgba(217,183,124,0.35), 0 24px 60px -20px rgba(0,0,0,0.55);
}
.hero-visual svg { width: 78%; height: 78%; position: relative; z-index: 1; }
/* Halo secondaire, plus serré, centré derrière le tracé : superposé au box-shadow externe
   ci-dessus pour un dégradé de lumière à deux échelles (large + resserré) plutôt qu'un seul
   anneau uniforme, plus proche d'un vrai éclairage que d'un simple filtre. */
.hero-visual::before {
    content: ""; position: absolute; inset: 10%; border-radius: 50%;
    background: radial-gradient(circle, rgba(217,183,124,0.22), transparent 70%);
    filter: blur(6px); pointer-events: none;
}

section.features { padding: 50px 24px; max-width: 1100px; margin: 0 auto; }
.section-eyebrow {
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 800;
    color: var(--accent); margin: 0 0 8px;
}
section.features h2 { font-size: 30px; font-weight: 800; margin: 0 0 34px; max-width: 26ch; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
    transform: translateY(-4px); border-color: var(--accent);
    box-shadow: 0 16px 34px -14px rgba(0,0,0,0.6), 0 0 0 1px rgba(156,122,66,0.25);
}
.feature-shot { display: block; width: 100%; height: auto; aspect-ratio: 900/604; object-fit: cover; background: var(--accent-soft); }
.feature-card h3 { font-size: 15px; font-weight: 800; margin: 14px 22px 6px; }
.feature-card p { font-size: 13.5px; color: var(--ink-muted); margin: 0 22px 22px; }

section.cta-band {
    background: linear-gradient(120deg, var(--accent), #7c6234 75%); color: #fff; padding: 56px 24px;
    text-align: center; margin-top: 30px; position: relative; overflow: hidden;
}
/* Même halo que .hero-visual, resserré sur le centre du bandeau plutôt qu'en fond plein —
   évite que le bandeau CTA (déjà la zone la plus saturée de couleur de la page) tourne à la
   flaque de couleur uniforme. */
section.cta-band::before {
    content: ""; position: absolute; inset: -20% -10% auto -10%; height: 140%;
    background: radial-gradient(ellipse at 50% 0%, rgba(217,183,124,0.35), transparent 65%);
    pointer-events: none;
}
section.cta-band > * { position: relative; z-index: 1; }
section.cta-band h2 { font-size: 26px; font-weight: 800; margin: 0 0 12px; }
section.cta-band p { color: rgba(255,255,255,0.85); margin: 0 0 26px; }
section.cta-band .btn-primary { background: var(--surface); color: var(--gold); }
section.cta-band .btn-primary:hover { box-shadow: 0 10px 28px -6px rgba(0,0,0,0.4); }

footer.site-footer {
    padding: 30px 24px; text-align: center; color: var(--ink-muted); font-size: 13px;
}

@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; padding-top: 30px; }
    .hero-visual { order: -1; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .feature-grid { grid-template-columns: 1fr; }
    header.site-header { flex-wrap: wrap; gap: 12px; }
}