/* ============================================================
   seo.css — styles propres à la couche SEO (pages secondaires).
   Le design system (polices Geist, boutons, textes) vient de
   design.css (copie auto-hébergée des chunks du One Page) :
   même typographie, mêmes couleurs, mêmes boutons.
   Palette : blanc #fff dominant, encre #0a0a0a, indigo #6366f1,
   lignes #e5e5e5, fonds doux #fafafa.
   ============================================================ */

:root {
    --encre: #0a0a0a;
    --indigo: #6366f1;
    --indigo-fonce: #4f46e5;
    --ligne: #e5e5e5;
    --doux: #fafafa;
    --gris: #6b7280;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: #fff;
    color: var(--encre);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; /* même police que l'accueil */
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
/* Les classes bouton du design system vivent dans des @layer CSS (Tailwind v4) :
   les styles non couchés l'emportent, on ré-affirme donc le texte blanc. */
a.btn-primary, a.btn-indigo { color: #fff; }
img { max-width: 100%; }

.seo-conteneur {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Navigation (même esprit que le One Page) ---------- */
.seo-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ligne);
}
.seo-nav-inner {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.seo-logo {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--encre);
}
.seo-logo span { color: var(--indigo); }
.seo-nav-liens { display: flex; align-items: center; gap: 4px; }
.seo-nav-liens a {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: #374151;
    transition: color .2s, background .2s;
}
.seo-nav-liens a:hover { color: var(--encre); background: #f4f4f5; }
.seo-nav-liens a.actif { color: var(--indigo); background: #eef2ff; }
.seo-nav .btn-primary { padding: .625rem 1.25rem; font-size: .875rem; }
.seo-nav-actions { display: flex; align-items: center; gap: .75rem; }
.seo-burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-right: -8px;
    color: var(--encre);
    cursor: pointer;
}
.seo-burger svg { width: 24px; height: 24px; display: block; }
@media (max-width: 900px) {
    .seo-burger { display: inline-flex; }
    .seo-nav-liens {
        display: none;
        position: absolute;
        top: 70px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 20px 20px;
        background: #fff;
        border-bottom: 1px solid var(--ligne);
        box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .15);
    }
    .seo-nav-liens.ouvert { display: flex; }
    .seo-nav-liens a { padding: 14px 0; border-radius: 0; font-size: 1rem; border-bottom: 1px solid #f4f4f5; }
    .seo-nav-liens a:hover, .seo-nav-liens a.actif { background: none; }
}
@media (max-width: 639px) {
    .seo-nav-actions .btn-primary { display: none; }
}

/* ---------- Fil d'Ariane ---------- */
.seo-fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--gris);
    margin-top: 18px;
}
.seo-fil a:hover { color: var(--indigo); }
.seo-fil .sep { color: #d1d5db; }
.seo-fil .actuel { color: var(--encre); font-weight: 600; }

/* ---------- En-tête de page ---------- */
.seo-hero {
    padding: 128px 0 56px;
    border-bottom: 1px solid #f0f0f2;
}
.seo-hero h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.03em;
    margin: 14px 0 18px;
}
.seo-hero h1 em {
    font-style: normal;
    color: var(--indigo);
}
.seo-hero .chapeau {
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    color: #4b5563;
    max-width: 46rem;
    margin: 0;
}
.seo-hero .seo-fil { margin-top: 26px; }

/* ---------- Sections et prose ---------- */
.seo-section { padding: 64px 0; }
.seo-section.alt { background: var(--doux); border-top: 1px solid #f0f0f2; border-bottom: 1px solid #f0f0f2; }
.seo-section h2 {
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    letter-spacing: -.025em;
    line-height: 1.15;
    margin: 0 0 18px;
}
.seo-section h3 {
    font-size: 1.12rem;
    letter-spacing: -.015em;
    margin: 26px 0 10px;
}
.seo-prose p { color: #374151; margin: 0 0 14px; }
.seo-prose ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.seo-prose ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    color: #374151;
}
.seo-prose ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: .55em;
    width: 7px; height: 7px;
    border-radius: 2px;
    background: var(--indigo);
}
.seo-prose strong { color: var(--encre); }
.seo-prose a.lien {
    color: var(--indigo-fonce);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #c7d2fe;
    text-underline-offset: 3px;
}
.seo-prose a.lien:hover { text-decoration-color: var(--indigo); }

.seo-deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
@media (max-width: 800px) { .seo-deux-colonnes { grid-template-columns: 1fr; } }

/* ---------- Cartes ---------- */
.seo-grille { display: grid; gap: 18px; }
.seo-grille.c2 { grid-template-columns: 1fr 1fr; }
.seo-grille.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .seo-grille.c3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .seo-grille.c2, .seo-grille.c3 { grid-template-columns: 1fr; } }

.seo-carte {
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: 16px;
    padding: 22px;
    transition: border-color .2s, transform .2s;
}
.seo-carte:hover { border-color: #c7d2fe; }
.seo-carte h3 { margin-top: 0; }
.seo-carte p { color: #4b5563; font-size: .95rem; margin: 0 0 10px; }
.seo-carte .suite { color: var(--indigo-fonce); font-weight: 600; font-size: .9rem; }
.seo-carte.sombre { background: #0a0a0a; border-color: #0a0a0a; }
.seo-carte.sombre h3 { color: #fff; }
.seo-carte.sombre p { color: #d1d5db; }
.seo-section.alt .seo-carte { background: #fff; }

.seo-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--indigo-fonce);
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 10px;
}

.seo-num {
    font-size: .8rem;
    font-weight: 700;
    color: var(--indigo);
    letter-spacing: .1em;
    margin-bottom: 8px;
}

/* ---------- Étapes / timeline ---------- */
.seo-timeline { position: relative; padding-left: 26px; }
.seo-timeline::before {
    content: "";
    position: absolute;
    left: 6px; top: 6px; bottom: 6px;
    width: 2px;
    background: #e9e9ee;
}
.seo-timeline .etape { position: relative; padding-bottom: 30px; }
.seo-timeline .etape:last-child { padding-bottom: 0; }
.seo-timeline .etape::before {
    content: "";
    position: absolute;
    left: -26px; top: 6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--indigo);
}
.seo-timeline .periode {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--indigo);
}
.seo-timeline h3 { margin: 4px 0 4px; font-size: 1.08rem; }
.seo-timeline .lieu { font-size: .875rem; color: var(--gris); margin-bottom: 6px; }
.seo-timeline p { color: #4b5563; margin: 0; font-size: .95rem; }

/* ---------- Image de couverture projet ---------- */
.seo-figure {
    margin: 0;
    border: 1px solid var(--ligne);
    border-radius: 18px;
    overflow: hidden;
    background: var(--doux);
}
.seo-figure img { display: block; width: 100%; height: auto; }
.seo-figure figcaption {
    font-size: .8rem;
    color: var(--gris);
    padding: 10px 16px;
    border-top: 1px solid #f0f0f2;
}

/* ---------- Encart clé / devis ---------- */
.seo-encart {
    background: #0a0a0a;
    color: #fff;
    border-radius: 20px;
    padding: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.seo-encart h2 { color: #fff; margin: 0 0 6px; }
.seo-encart p { color: #d1d5db; margin: 0; max-width: 34rem; }

/* ---------- Boutons ---------- */
.btn-retour {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--encre);
    font-weight: 600;
    font-size: .92rem;
    border: 1.5px solid var(--ligne);
    border-radius: 999px;
    padding: 10px 20px;
    transition: border-color .2s, color .2s;
}
.btn-retour:hover { border-color: var(--indigo); color: var(--indigo-fonce); }

/* ---------- Pied de page ---------- */
.seo-footer {
    background: #0a0a0a;
    color: #d1d5db;
    margin-top: 80px;
    padding: 56px 0 30px;
    font-size: .9rem;
}
.seo-footer-grille {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 34px;
    padding-bottom: 34px;
    border-bottom: 1px solid #232326;
}
@media (max-width: 800px) { .seo-footer-grille { grid-template-columns: 1fr 1fr; } }
.seo-footer h4 {
    color: #fff;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.seo-footer a { display: block; margin-bottom: 9px; color: #9ca3af; }
.seo-footer a:hover { color: #fff; }
.seo-footer .marque { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.seo-footer .marque span { color: var(--indigo); }
.seo-footer .apropo { max-width: 30rem; line-height: 1.65; }
.seo-footer-bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding-top: 22px;
    font-size: .82rem;
    color: #6b7280;
}

/* ---------- Formulaire (page contact) ---------- */
.seo-form { display: grid; gap: 16px; }
.seo-form .ligne2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .seo-form .ligne2 { grid-template-columns: 1fr; } }
.seo-champ { display: grid; gap: 6px; }
.seo-form .form-label { margin-bottom: 0; }
.champ-erreur { display: none; color: #dc2626; font-size: .8rem; margin: 4px 0 0; }
.form-boite-erreur {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: .9rem;
}
.form-boite-succes {
    display: none;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-radius: 12px;
    padding: 18px 20px;
    font-size: .95rem;
}