:root {
    --bg-color: #001212;
    --bg-alt: #000e0e;
    --accent-gold: #BFA65A;
    --accent-gold-bg: #BFA65A;
    --accent-blue: #4F66B8;
    --accent-red: #9D1437;
    --text-color: #f0f0f0;
    --text-muted: #99ADAD;
    --border-color: rgba(191, 166, 90, 0.2);
    --placeholder-color: rgba(240, 240, 240, 0.35);
    --transition-speed: 0.4s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: var(--bg-color); color: var(--text-color); font-family: 'Inter', sans-serif; overflow-x: hidden; line-height: 1.6; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* ─── ACCESSIBILITÉ ─── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* Champ piège anti-spam (honeypot) : invisible pour les humains, rempli par les robots */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; top: -40px; left: 0; background: var(--accent-gold-bg); color: #001212; padding: 10px; z-index: 2000; font-weight: bold; text-decoration: none; }
.skip-link:focus { top: 0; }
*:focus-visible { outline: 2px dashed var(--accent-gold); outline-offset: 4px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .reveal-text, .reveal-item { opacity: 1 !important; transform: none !important; }
    .marquee-content { animation-play-state: paused !important; }
}

/* ─── BOUTONS ─── */
.btn-primary, .btn-secondary, .btn-small { display: inline-block; padding: 0.5rem 1rem; font-family: inherit; font-size: 1rem; line-height: inherit; font-weight: bold; text-decoration: none; border-radius: 50px; transition: 0.3s; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--accent-gold-bg); color: #001212; }
.btn-primary:hover { background: #d4b96a; transform: translateY(-2px); }
.btn-secondary { background: transparent; color: #fff; border: 1px solid #fff; }
.btn-secondary:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); color: var(--accent-gold); border-color: var(--accent-gold); }
.btn-small { padding: 0.5rem 1rem; border: 1px solid var(--accent-gold); color: var(--accent-gold); }

/* ─── NAVBAR ─── */
.navbar { padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; z-index: 1000; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(0, 18, 18, 0.88); border-bottom: 1px solid var(--border-color); }
.logo-wrapper { display: flex; flex-direction: column; }
.logo { font-weight: 900; letter-spacing: 3px; font-size: 1rem; }
.logo-link { display: block; line-height: 0; }
.logo-link:hover .site-logo, .logo-link:focus-visible .site-logo { opacity: 0.8; }
.site-logo { height: 24px; width: auto; display: block; margin-left: -1px; transition: opacity 0.2s; }
.slogan { font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; color: var(--accent-gold); margin-top: 3px; opacity: 0.8; font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 1rem; transition: color 0.2s; }
.nav-links a:hover { color: var(--accent-gold); }
.nav-links a.nav-current, .mobile-nav-link.nav-current { color: var(--accent-gold); }

/* ─── BURGER ─── */
.burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1100; min-width: 44px; min-height: 44px; }
.burger span { display: block; width: 26px; height: 2px; background: var(--text-color); border-radius: 2px; transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease, background-color var(--transition-speed) ease; transform-origin: center; }
.burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── MOBILE MENU ─── */
.mobile-menu { position: fixed; inset: 0; background: #000e0e; z-index: 1100; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; gap: 2rem; opacity: 0; pointer-events: none; transform: translateY(-20px); transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease; padding: 7rem 5% 3rem; overflow-y: auto; }
.mobile-menu.is-open { opacity: 1; pointer-events: all; transform: translateY(0); }
.mobile-menu ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 2rem; }
.mobile-nav-link { color: var(--text-color); text-decoration: none; font-size: clamp(1.15rem, 4vw, 1.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; transition: color 0.2s; display: inline-block; }
.mobile-nav-link:hover { color: var(--accent-gold); }
.mobile-cta { color: #001212; background: var(--accent-gold-bg); border: 1px solid var(--accent-gold); padding: 0.9rem 2rem; border-radius: 50px; font-size: 1.15rem !important; font-weight: 800; margin-top: 0.5rem; }
.mobile-cta:hover { color: #001212; background: #d4b96a; }
.mobile-menu__close { position: absolute; top: 2rem; right: 5%; background: none; border: none; color: var(--text-color); font-size: 2.5rem; cursor: pointer; line-height: 1; transition: color 0.2s; }
.mobile-menu__close:hover { color: var(--accent-gold); }

/* ─── HERO ─── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 7rem 5% 3rem; }
h1 { font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 1.08; text-transform: uppercase; font-weight: 900; }
.outline {
    color: var(--bg-color);
    -webkit-text-fill-color: var(--bg-color);
    -webkit-text-stroke: 3.5px var(--accent-gold);
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    paint-order: stroke fill;
}
.hero-sub { margin: 2rem 0; font-size: 1.5rem; color: var(--text-muted); font-family: 'Cormorant Garamond', serif; font-style: italic; line-height: 1.4; }

/* ─── MARQUEE ─── */
.social-proof { padding: 3rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); overflow: hidden; }
.marquee-label { text-align: center; font-size: 1rem; letter-spacing: 3px; margin-bottom: 1.5rem; color: var(--text-muted); text-transform: uppercase; }
.marquee-container { overflow: hidden; width: 100%; }
.marquee-content { display: flex; align-items: center; gap: 4rem; animation: scroll-left 9s linear infinite; white-space: nowrap; }
.skill { font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 400; }
.project-tag { font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-gold); font-weight: 600; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ─── PORTFOLIO ─── */
.portfolio { padding: 8rem 0; }
.portfolio-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; margin-bottom: 4rem; }
.portfolio-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.filter-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); padding: 0.5rem 1rem; border-radius: 50px; cursor: pointer; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s; }
.filter-btn:hover, .filter-btn.active { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(191, 166, 90, 0.08); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 380px; gap: 2px; }
.portfolio-grid--three { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 420px; }
.project-card { position: relative; overflow: hidden; background: #001818; cursor: pointer; }
.project-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0%) brightness(0.9); transition: filter 0.8s ease, transform 0.8s ease; display: block; }
.project-card:hover img { filter: grayscale(100%) brightness(0.7); transform: scale(1.06); }
.project-info { position: absolute; inset: 0; padding: 2.5rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0,12,12,.88) 0%, rgba(0,12,12,.6) 55%, rgba(0,12,12,.22) 100%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.project-card:hover .project-info { opacity: 1; transform: translateY(0); }
.project-category { font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 0.5rem; font-weight: 600; }
.project-info h3 { font-size: 1.3rem; font-weight: 900; text-transform: uppercase; margin-bottom: 0.5rem; }
.project-info p { font-size: 1rem; color: rgba(255,255,255,0.7); margin-bottom: 1rem; max-width: 280px; }
.project-link { color: var(--accent-gold); text-decoration: none; font-size: 1rem; font-weight: 700; letter-spacing: 1px; transition: letter-spacing 0.3s; }
.project-link:hover { letter-spacing: 3px; }
.project-card--featured { grid-column: span 1; }
.project-card.is-hidden { display: none; }
.portfolio-cta { margin-top: 4rem; text-align: center; }

/* ─── ABOUT ─── */
.about { padding: 8rem 0; background: var(--bg-alt); }
.about-grid { display: grid; grid-template-columns: 200px 1fr; gap: 5rem; align-items: start; }
.about-label { font-size: 1rem; letter-spacing: 3px; color: var(--accent-gold); text-transform: uppercase; display: block; padding-top: 0.5rem; font-weight: 600; }
h3 { font-size: 1.3rem; }
.about-title { font-size: 2rem; font-weight: 800; margin-bottom: 2rem; line-height: 1.3; }
.about-content p { color: var(--text-muted); font-size: 1rem; line-height: 1.9; margin-bottom: 1.2rem; }
.about-details { display: flex; flex-direction: column; gap: 0.5rem; font-size: 1rem; color: var(--text-muted); border-left: 2px solid var(--border-color); padding-left: 1rem; margin-top: 2rem; }
/* Puces à étoiles maison plutôt que des emojis, pour rester cohérent avec le
   même système déjà utilisé dans les listes de prestations (.features). */
.about-details span { position: relative; padding-left: 1.7rem; }
.about-details span::before {
    content: '';
    position: absolute; left: 0; top: 0.15em;
    width: 1.05rem; height: 1.05rem;
    background-image: url('../img/ui/sparkle-1.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.about-details span:nth-child(2)::before { background-image: url('../img/ui/sparkle-2.webp'); }
.about-details span:nth-child(3)::before { background-image: url('../img/ui/sparkle-3.webp'); }

/* ─── SERVICES ─── */
.services { padding: 8rem 0; }
.section-title { font-size: 2rem; margin-bottom: 4rem; text-transform: uppercase; border-left: 4px solid var(--accent-gold); padding-left: 1.5rem; }

/* ─── BLOG : INDEX ─── */
.blog-hero { padding: 10rem 5% 3rem; max-width: 1200px; margin: 0 auto; }
.blog-hero .about-label { padding-top: 0; margin-bottom: 1rem; display: block; }
.blog-hero p { color: var(--text-muted); font-size: 1rem; margin-top: 1rem; line-height: 1.7; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 2rem 5% 8rem; }
.blog-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem; border: 1px solid var(--border-color); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color 0.3s; }
.blog-card:hover { border-color: var(--accent-gold); }
.blog-card .about-label { padding-top: 0; margin-bottom: 0.25rem; }
.blog-card h2 { font-size: 1.3rem; text-transform: none; line-height: 1.3; }
.blog-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; flex-grow: 1; }
.blog-card .read-more { color: var(--accent-gold); font-size: 1rem; font-weight: 700; }

/* ─── BLOG : ARTICLE ─── */
.article-wrapper { max-width: 840px; margin: 0 auto; padding: 10rem 5% 6rem; }
.article-back { display: inline-block; color: var(--text-muted); font-size: 1rem; text-decoration: none; margin-bottom: 2rem; }
.article-back:hover { color: var(--accent-gold); }
.article-wrapper .about-label { padding-top: 0; margin-bottom: 1rem; display: block; }
.article-title { font-size: 2.5rem; line-height: 1.15; text-transform: uppercase; font-weight: 900; margin-bottom: 2rem; }
.article-intro { font-size: 1.5rem; font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--text-muted); line-height: 1.6; margin-bottom: 3rem; }
.article-body h2 { font-size: 2rem; margin: 3rem 0 1rem; text-transform: uppercase; }
.article-body h3 { font-size: 1.3rem; margin: 2rem 0 0.75rem; color: var(--accent-gold); }
.article-body p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; }
.article-body a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { text-decoration-thickness: 2px; }
.article-body ul, .article-body ol { margin: 0 0 1.25rem 1.25rem; line-height: 1.75; font-size: 1rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body strong { color: var(--accent-gold); }
.article-closing { margin-top: 3rem; padding: 2rem; border-left: 2px solid var(--accent-gold); background: var(--bg-alt); border-radius: 0 12px 12px 0; }
.article-closing p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.5rem; color: var(--text-color); margin-bottom: 1.5rem; line-height: 1.5; }

@media (max-width: 600px) {
    .article-title { font-size: 1.8rem; }
    .article-intro { font-size: 1.25rem; }
    .article-body h2 { font-size: 1.5rem; }
    .article-closing p { font-size: 1.25rem; }
}
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4rem; }
.service-item h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--accent-gold); }

/* ─── PRICING ─── */
.pricing { padding: 8rem 0; background: var(--bg-alt); }
.pricing-intro { color: var(--text-muted); font-size: 1rem; margin-bottom: 3rem; line-height: 1.7; }
.pricing-grid-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pricing-grid-main.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 0 auto; }
.pricing-grid-main.cols-1 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
@media (max-width: 900px) {
    .pricing-grid-main { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .pricing-grid-main.cols-2 { grid-template-columns: 1fr; }
}
.pricing-card { padding: 3rem 2rem 5.5rem; border: 1px solid var(--border-color); border-radius: 20px; position: relative; transition: border-color 0.3s; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pricing-card h3 { font-size: 1.125rem; }
.pricing-card > a { margin-top: auto; }
.pricing-card:hover { border-color: rgba(191, 166, 90, 0.5); }
.pricing-card.highlighted { border-color: var(--accent-gold); background: rgba(191,166,90,0.04); }
/* Note ancrée en bas de carte (hauteur réservée dans le padding ci-dessus) :
   les boutons des 3 offres s'alignent sur la même ligne, avec ou sans note. */
.pricing-card-note { position: absolute; left: 2rem; right: 2rem; bottom: 1.75rem; font-size: 0.8rem; line-height: 1.4; color: var(--text-muted); margin-top: 0; }
.pricing-card-note + .pricing-card-note { margin-top: 0.25rem; }
.pricing-card-note a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 3px; }
.pricing-card-note a:hover { text-decoration-thickness: 2px; }
.pricing-card .features,
.pricing-card .a-la-carte-list { width: 100%; text-align: left; }

/* Duo d'offres solidaires (identité + site web) réunies dans UNE seule carte à
   bordure/badge unique, plutôt que deux cartes séparées portant chacune le
   même badge "Associations" - évite la répétition et le badge qui flotte
   entre deux cartes. Colonnes séparées par une ligne (verticale en rangée,
   horizontale une fois empilées sur mobile). */
.pricing-duo-card { padding: 3rem 2rem; border: 1px solid var(--border-color); border-radius: 20px; position: relative; transition: border-color 0.3s; max-width: 780px; margin: 0 auto 2.5rem; }
.pricing-duo-card:hover { border-color: rgba(191, 166, 90, 0.5); }
.pricing-duo-card.highlighted { border-color: var(--accent-gold); background: rgba(191,166,90,0.04); }
.pricing-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; position: relative; }
.pricing-duo-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pricing-duo-col h3 { font-size: 1.125rem; }
.pricing-duo-col > a { margin-top: auto; }
.pricing-duo-col .features { width: 100%; text-align: left; }
/* Trait de séparation centré dans l'espace entre les deux colonnes plutôt que
   collé au bord de l'une d'elles (un border sur la colonne se cale sur son
   propre bord, pas sur le milieu du gap). Fiable même si les deux colonnes
   n'ont pas la même hauteur, contrairement à un centrage en pourcentage. */
.pricing-duo-grid::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border-color); transform: translateX(-50%); }
/* La 2e colonne a naturellement du recul par rapport au trait central (la
   moitié du gap). La 1ère n'a rien d'équivalent par rapport au bord de la
   carte : on ajoute le même espace pour que les étoiles des deux colonnes
   démarrent avec le même retrait. */
.pricing-duo-col:first-child .features { padding-left: 1.25rem; }
@media (max-width: 700px) {
    .pricing-duo-col:first-child .features { padding-left: 0; }
    .pricing-duo-grid { grid-template-columns: 1fr; gap: 0; }
    .pricing-duo-grid::after { content: none; }
    .pricing-duo-col:first-child { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--border-color); }
}

/* Offre secondaire (Sur mesure / À la carte) : même famille visuelle que les
   cartes principales (bordure, coins arrondis, hover) mais en un seul bandeau
   pleine largeur, pour la distinguer des 3 offres phares sans la cacher. */
.pricing-secondary { margin-top: 2rem; }
.pricing-secondary-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; }
.pricing-secondary-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pricing-secondary-col > a { margin-top: auto; }
.pricing-secondary-col .price { font-size: 1.8rem; margin: 0.4rem 0 1.25rem; }
.pricing-secondary-col .pricing-card-sub { margin-bottom: 1.25rem; }
.pricing-secondary-col:first-child:not(:only-child) { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
@media (min-width: 900px) {
    .pricing-secondary-col:first-child .features { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.25rem; }
}

.icon-chevron { display: inline-block; font-size: 0.8em; transition: transform 0.3s ease; }
.accordion-header[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); }
.price { font-size: 2.5rem; font-weight: 800; margin: 1rem 0; color: var(--text-color); }
.price span { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--accent-gold-bg); color: #001212; padding: 0.2rem 1rem; border-radius: 20px; font-size: 1rem; font-weight: 900; white-space: nowrap; }
.features { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.features li { color: var(--text-muted); font-size: 1rem; padding-left: 1.7rem; position: relative; }
.features li::before {
    content: '';
    position: absolute; left: 0; top: 0.15em;
    width: 1.05rem; height: 1.05rem;
    background-image: url('../img/ui/sparkle-1.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.features li:nth-child(3n+2)::before { background-image: url('../img/ui/sparkle-2.webp'); }
.features li:nth-child(3n)::before { background-image: url('../img/ui/sparkle-3.webp'); }

/* ─── PRICING NOTE ─── */
.a-la-carte { margin-top: 4rem; padding: 2.5rem; border: 1px solid var(--border-color); border-radius: 20px; }
.a-la-carte h3 { color: var(--accent-gold); text-transform: uppercase; margin-bottom: 0.75rem; }
.a-la-carte > p { color: var(--text-muted); font-size: 1rem; margin-bottom: 1.5rem; }
.a-la-carte-list { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.a-la-carte-list li { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-color); font-size: 1rem; }
.a-la-carte-list li:last-child { border-bottom: none; padding-bottom: 0; }
.a-la-carte-list span { color: var(--text-muted); }
.a-la-carte-list strong { color: var(--accent-gold); font-weight: 700; white-space: nowrap; }

.pricing-note { margin-top: 2.5rem; padding: 1.2rem 1.5rem; border-left: 2px solid var(--accent-gold); color: var(--text-muted); font-size: 1.5rem; font-family: 'Cormorant Garamond', serif; line-height: 1.6; font-style: italic; }

/* ─── ILLUSTRATIONS AU TRAIT ───
   Icônes au trait doré, épaisseur alignée sur le contour des lettres .outline
   (-webkit-text-stroke: 3.5px). Le SVG étant mis à l'échelle (viewBox -> taille
   affichée), le stroke-width en unités viewBox est recalculé par icône pour
   obtenir ~3.5px réels une fois affiché :
   hero-illu  = 220px affiché / 200 viewBox -> 3.5 / 1.1  = 3.18
   heart-illu = 40px affiché  / 32 viewBox  -> 3.5 / 1.25 = 2.8 */
.ill-shape { fill: none; stroke: var(--accent-gold); stroke-linejoin: round; stroke-linecap: round; }
.ill-shape.fill-soft { fill: rgba(191, 166, 90, 0.16); }
.ill-dot { fill: var(--accent-gold); stroke: none; }
.ill-dot.alt { fill: #001212; stroke: var(--accent-gold); stroke-width: 2; }

.hero-illu { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: 220px; height: auto; opacity: 0.95; }
.hero-illu .ill-shape { stroke-width: 3.18; }
@media (max-width: 1100px) {
    .hero-illu { display: none; }
}

.pricing-note-wrap { display: flex; align-items: center; gap: 0.85rem; }
.heart-illu { width: 40px; height: auto; flex-shrink: 0; }
.heart-illu .ill-shape { stroke-width: 2.8; }
.pricing-note-wrap .pricing-note { margin-top: 0; }
/* Sur mobile, l'icône à côté du texte réduit trop la largeur disponible pour
   le paragraphe (police italique 1.5rem) : le texte se retrouve compressé
   dans une colonne étroite et s'étire sur beaucoup de lignes courtes.
   On empile l'icône au-dessus du texte pour lui rendre toute la largeur. */
@media (max-width: 700px) {
    .pricing-note-wrap { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .pricing-note { font-size: 1.25rem; }
}

/* ─── TESTIMONIALS ─── */
.testimonials { padding: 6rem 0; text-align: center; }
.testimonials .section-title { text-align: left; }
.testimonial-card { text-align: left; }
.quote { font-size: 1.5rem; font-style: italic; margin-bottom: 2rem; font-family: 'Cormorant Garamond', serif; color: var(--text-color); line-height: 1.5; }
.author { display: flex; flex-direction: column; gap: 0.3rem; }
.author span { color: var(--text-muted); font-size: 1rem; }
@media (max-width: 600px) {
    .quote { font-size: 1.25rem; }
}

/* ─── FAQ ─── */
.faq { padding: 8rem 0; }

/* ─── LEAD MAGNET ─── */
.lead-magnet { padding: 6rem 0; background: var(--bg-alt); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.lead-magnet-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.lead-magnet-content p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin: 1.5rem 0 2rem; max-width: 520px; }
.lead-form { display: flex; gap: 0.75rem; flex-wrap: wrap; max-width: 480px; }
.lead-form input {
    flex: 1 1 220px;
    padding: 0.9rem 1.2rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
}
.lead-form input:focus { outline: 2px dashed var(--accent-gold); outline-offset: 2px; border-color: var(--accent-gold); }
.lead-form input::placeholder { color: var(--placeholder-color); }
#lead-status { font-size: 1rem; padding: 0.5rem 0; min-height: 1.5rem; }
#lead-status.success { color: var(--accent-gold); }
#lead-status.error { color: var(--accent-red); }

.lead-magnet-visual { display: flex; justify-content: center; }
.pdf-mock {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 210 / 297;
    background: var(--bg-color);
    border: 1px solid var(--accent-gold);
    border-radius: 8px;
    padding: 2rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 12px 12px 0 rgba(191,166,90,0.12);
}
.pdf-mock-eyebrow { font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-gold); font-weight: 600; }
.pdf-mock-title { font-size: 1.4rem; font-weight: 900; text-transform: uppercase; line-height: 1.25; }
.pdf-mock-meta { margin-top: auto; font-size: 1rem; color: var(--text-muted); letter-spacing: 1px; }

@media (max-width: 900px) {
    .lead-magnet-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .lead-magnet-visual { order: -1; }
    .pdf-mock { max-width: 220px; }
}
/* Wraps some accordion trigger buttons (e.g. tarifs-detailles.html) in a heading tag for a11y outline purposes; neutralized so it has zero visual effect of its own */
.accordion-heading { margin: 0; font-size: inherit; font-weight: inherit; }
.accordion-header { width: 100%; text-align: left; padding: 2rem 0; background: none; border: none; color: var(--text-color); font-size: 1rem; cursor: pointer; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; transition: color 0.2s; font-family: inherit; }
.accordion-header:hover { color: var(--accent-gold); }
.accordion-content { max-height: 0; overflow: hidden; transition: 0.4s; color: var(--text-muted); }
.accordion-content p { padding: 1rem 0; line-height: 1.8; }

/* ─── FOOTER ─── */
.footer { padding: 8rem 5% 2rem; background: var(--bg-alt); border-top: 1px solid var(--border-color); text-align: center; }
.footer-cta { text-align: left; }
.footer-cta h2, .footer-cta > .footer-sub { text-align: center; }
.footer-cta h2 { font-size: 2rem; margin-bottom: 1rem; text-transform: uppercase; }
.footer-sub { color: var(--text-muted); font-size: 1rem; margin-bottom: 2rem; }
.footer-bottom { margin-top: 3rem; display: flex; justify-content: space-around; border-top: 1px solid var(--border-color); padding-top: 2rem; align-items: center; }
.footer-bottom a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent-gold); }
.socials { display: flex; gap: 2rem; }

.footer-columns { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; text-align: left; max-width: 1000px; margin: 0 auto; }
.footer-col-brand .footer-logo { font-weight: 900; letter-spacing: 3px; font-size: 1rem; }
.footer-col-brand .footer-tagline { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-gold); opacity: 0.8; font-weight: 600; margin: 0.5rem 0 1.5rem; }
.footer-col-brand .socials { gap: 1.25rem; }
.footer-col-brand .socials a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-col-brand .socials a:hover { color: var(--accent-gold); }
.footer-col h2, .footer-col h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-color); margin-bottom: 1.1rem; font-weight: 700; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col ul a, .footer-col ul span { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent-gold); }
.footer .footer-columns + .footer-bottom { margin-top: 2.5rem; justify-content: center; }
@media (max-width: 700px) {
    .footer-columns { grid-template-columns: 1fr; text-align: center; gap: 2.25rem; }
    .footer-col-brand .socials { justify-content: center; }
}

/* ─── COOKIE BANNER ─── */
.cookie-banner { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(200%); width: 90%; max-width: 640px; background: rgba(0,18,18,0.97); backdrop-filter: blur(10px); border: 1px solid var(--border-color); padding: 1.5rem 2rem; border-radius: 12px; z-index: 9999; display: flex; flex-direction: column; gap: 1.2rem; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cookie-banner.show { transform: translateX(-50%) translateY(0); }
.cookie-banner.is-hidden { display: none; }
/* Fond du bandeau toujours sombre (indépendant du thème du site) : son texte
   garde donc des couleurs claires fixes plutôt que var(--accent-gold)/
   var(--text-muted), qui s'inversent en thème clair et deviendraient illisibles
   sur ce fond resté sombre. */
.cookie-content h4 { color: #BFA65A; font-size: 1rem; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 2px; }
.cookie-content p { font-size: 1rem; color: rgba(240, 240, 240, 0.75); line-height: 1.6; }
.cookie-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.cookie-actions .btn-primary, .cookie-actions .btn-secondary { font-size: 1rem; margin: 0; }

/* ─── ANIMATIONS ─── */
.reveal-text, .reveal-item { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-text.active, .reveal-item.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 320px; }
    .portfolio-grid--three { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 360px; }
    .project-card--featured { grid-column: span 2; }
}
@media (max-width: 768px) {
    .nav-links { display: none; }
    .burger { display: flex; }
    /* Le slogan sous le logo passe sur 2-3 lignes en dessous de 480px environ
       (surtout depuis le passage à 1rem minimum), ce qui fait varier la hauteur
       de la navbar (position fixed) et fait chevaucher le contenu en dessous.
       On le masque en mode mobile : logo seul, nav compacte et toujours à la
       même hauteur. */
    .slogan { display: none; }
    .site-logo { height: 18px; }
    .portfolio-grid, .portfolio-grid--three { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .project-card--featured { grid-column: span 1; }
    .portfolio-header { flex-direction: column; align-items: flex-start; }
    .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-title { font-size: 1.4rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; }
}

/* Appareils tactiles (pas de souris, donc pas de survol) : quel que soit
   la taille d'écran (téléphone, tablette, portable tactile), le texte de
   chaque projet est sorti de l'image au lieu d'être superposé au survol
   — qui n'existe pas au doigt — pour rester toujours lisible. */
@media (hover: none) {
    .portfolio-grid, .portfolio-grid--three { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .project-card--featured { grid-column: span 1; }
    .project-card { display: flex; flex-direction: column; }
    .project-card img { height: 220px; }
    .project-info {
        position: static;
        opacity: 1;
        transform: none;
        background: var(--bg-alt);
        padding: 1.5rem;
    }
    .project-info p { max-width: none; color: var(--text-muted); }
}

/* ─── MOBILE FIRST FIXES ─── */

/* Hero : le contenu démarre sous la navbar */
.hero {
    padding-top: 5rem;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.hero-content { padding-top: 2rem; }

/* Boutons hero : compacts, sur une ligne, centrés sur mobile */
.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

@media (max-width: 768px) {
    /* Contenu hero visible dès le début, titre remonté */
    .hero { padding-top: 7.5rem; min-height: auto; }
    .hero-content { padding-top: 0.75rem; }

    /* Boutons plus petits, centrés, sur une ligne */
    .cta-group { justify-content: center; gap: 0.6rem; }
    .cta-group .btn-primary,
    .cta-group .btn-secondary {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        white-space: nowrap;
    }

    /* Texte hero lisible sur petit écran */
    h1 { font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1; }
    .hero-sub { font-size: 1.15rem; margin: 1.5rem 0; }

    /* Espacements de sections : 128px (8rem) est pensé pour desktop, trop vide sur mobile */
    .portfolio, .about, .services, .pricing, .faq, .simulator, .lead-magnet, .quiz { padding: 4.5rem 0; }
    .testimonials { padding: 3.5rem 0; }
    .footer { padding: 4.5rem 5% 2rem; }

    /* Bandeau défilant : le texte doré (1.8rem) déborde sur petit écran */
    /* project-tag et skill partagent maintenant la même taille (voir règle de base) */
    .marquee-content { gap: 2rem; }

    /* Trait déjà bien visible sur petit écran : on garde l'épaisseur d'origine */
    .outline { -webkit-text-stroke: 2px var(--accent-gold); }
}

/* ─── HERO MOBILE - boutons et alignement ─── */
@media (max-width: 480px) {
  .hero { padding: 7.5rem 5% 3rem; align-items: flex-start; }
  .hero-content { padding-top: 0.5rem; }
  h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .cta-group {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.6rem;
  }
  .cta-group .btn-primary,
  .cta-group .btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────
   THÈME CLAIR
   ───────────────────────────────────────── */
[data-theme="light"] {
    --bg-color: #f5f5f0;
    --bg-alt: #eaeae4;
    --text-color: #001212;
    --text-muted: #3a4d4d;
    --border-color: rgba(61, 107, 0, 0.2);
    --accent-gold: #7a6420;
    --placeholder-color: rgba(0, 18, 18, 0.4);
}
[data-theme="light"] .navbar { background-color: rgba(245,245,240,0.92); border-bottom: 1px solid rgba(0,0,0,0.08); }
[data-theme="light"] .mobile-menu { background: #f5f5f0; }
/* Les projets sur fond blanc/clair (logos) se fondaient dans le fond clair
   de la page : un léger contour + ombre leur donne une bordure de carte
   nette, indépendamment de la couleur de l'image affichée. */
[data-theme="light"] .project-card { background: #ddd; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
[data-theme="light"] .footer { border-top: 1px solid var(--border-color); }
[data-theme="light"] .btn-secondary { color: var(--text-color); border-color: var(--text-color); }
[data-theme="light"] .btn-secondary:hover { background: rgba(0,0,0,0.06); color: var(--accent-gold); border-color: var(--accent-gold); }
/* Le bandeau cookies garde un fond sombre fixe même en thème clair : son
   bouton "Refuser" doit donc rester clair, pas basculer avec .btn-secondary
   ci-dessus (sinon texte/bordure sombres sur fond resté sombre = illisible). */
[data-theme="light"] .cookie-banner .btn-secondary { color: #f0f0f0; border-color: rgba(240, 240, 240, 0.5); }
[data-theme="light"] .cookie-banner .btn-secondary:hover { background: rgba(255,255,255,0.08); color: var(--accent-gold-bg); border-color: var(--accent-gold-bg); }

/* ─── Bouton thème ─── */
.theme-toggle {
    background: none; border: none;
    color: var(--text-muted); cursor: pointer; font-size: 1.75rem;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.3s; flex-shrink: 0; padding: 0;
    /* zone cliquable confortable (44x44 min, repère d'accessibilité tactile)
       sans agrandir le symbole ni réintroduire de fond visible */
    min-width: 44px; min-height: 44px;
}
/* Symbole ◐ pivoté pour que la séparation clair/sombre soit horizontale
   (haut/bas) plutôt que verticale (gauche/droite). */
.theme-toggle { transform: rotate(90deg); }
.theme-toggle:hover { color: var(--accent-gold); }
.navbar-actions { display: flex; align-items: center; gap: 0.6rem; }

/* ─────────────────────────────────────────
   SIMULATEUR DE BUDGET
   ───────────────────────────────────────── */
.simulator { padding: 8rem 0; background: var(--bg-alt); }
.sim-intro { color: var(--text-muted); margin-bottom: 3rem; font-size: 1rem; line-height: 1.7; }

.simulator-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}

/* Contrôles */
.sim-controls { display: flex; flex-direction: column; gap: 2rem; }
.sim-field { display: flex; flex-direction: column; gap: 0.6rem; }
.sim-field label { font-size: 1rem; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; }
.sim-field label strong { color: var(--accent-gold); font-size: 1rem; }

.sim-field input[type="range"] {
    width: 100%; accent-color: var(--accent-gold); height: 4px; cursor: pointer;
    background: linear-gradient(to right, var(--accent-gold) 0%, var(--border-color) 0%);
    border-radius: 2px; -webkit-appearance: none; appearance: none;
}
.sim-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-gold); cursor: pointer;
    box-shadow: 0 0 0 3px rgba(191,166,90,0.2);
}
.sim-range-labels { display: flex; justify-content: space-between; font-size: 1rem; color: var(--text-muted); }

.sim-field select {
    background: var(--bg-color); color: var(--text-color);
    border: 1px solid var(--border-color); border-radius: 8px;
    padding: 0.8rem 1rem; font-size: 1rem; cursor: pointer;
    transition: border-color 0.2s; font-family: inherit;
}
.sim-field select:focus { outline: 2px dashed var(--accent-gold); outline-offset: 2px; border-color: var(--accent-gold); }
.sim-field select option { background-color: var(--bg-alt); color: var(--text-color); }

/* Résultats */
.simulator-results {
    background: var(--bg-color); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem;
}
.simulator-results h3 { font-size: 1.3rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 0.5rem; }
.sim-results-intro { font-size: 1rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.6; }
.result-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border-color); }
.result-label-group { display: flex; flex-direction: column; gap: 0.2rem; }
.result-label { color: var(--text-muted); font-size: 1rem; }
.result-sub { font-size: 1rem; color: var(--text-muted); opacity: 0.7; }
.result-value { font-size: 1.3rem; font-weight: 800; color: var(--text-color); white-space: nowrap; }
.result-group-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-gold); margin: 1.25rem 0 0; }
.result-subtotal { border-bottom: none; border-top: 1px solid var(--accent-gold); }
.result-item:has(+ .result-subtotal) { border-bottom: none; }
.result-subtotal .result-label { color: var(--text-color); font-weight: 700; }
.result-subtotal .result-value { color: var(--accent-gold); }
.result-savings { background: rgba(191,166,90,0.08); border-left: 3px solid var(--accent-gold); padding: 1rem; border-radius: 0 8px 8px 0; }
.result-savings p { font-size: 1rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.result-savings strong { font-size: 1.3rem; color: var(--accent-gold); }
.result-details { font-size: 1rem; color: var(--text-muted); line-height: 1.7; font-style: italic; }
.simulator-results .btn-primary { align-self: center; text-align: center; margin-top: 0.5rem; }

/* ─────────────────────────────────────────
   FORMULAIRE DE CONTACT
   ───────────────────────────────────────── */
.contact-form { max-width: 560px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.form-group input,
.form-group textarea,
.form-group select {
    background: rgba(255,255,255,0.06); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 0.9rem 1.1rem; color: var(--text-color);
    font-size: 1rem; font-family: inherit; resize: vertical; transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: 2px dashed var(--accent-gold); outline-offset: 2px; border-color: var(--accent-gold); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--placeholder-color); }
.form-group select option { background-color: var(--bg-alt); color: var(--text-color); }
.contact-form .btn-primary { align-self: center; margin-top: 1rem; margin-bottom: 0.3rem; }
.form-note { font-size: 1rem; color: var(--text-muted); text-align: center; }
.form-legend { font-size: 1rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.rdv-note { font-size: 1rem; color: var(--text-muted); margin-top: 2.5rem; text-align: center; }
.rdv-note a { color: var(--accent-gold); text-decoration: none; font-weight: 700; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.rdv-note a:hover { border-color: var(--accent-gold); }
#form-status { font-size: 1rem; padding: 0.5rem 0; min-height: 1.5rem; }
#form-status.success { color: var(--accent-gold); }
#form-status.error { color: #9d1437; }
#form-status a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ─── Responsive simulateur ─── */
@media (max-width: 900px) { .simulator-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────
   QUIZ IDENTITÉ
   ───────────────────────────────────────── */
.quiz { padding: 8rem 0; }
.quiz-intro { color: var(--text-muted); margin-bottom: 3rem; font-size: 1rem; line-height: 1.7; max-width: 760px; }

.quiz-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 760px; margin: 0 auto; }
.quiz-question { border: 1px solid var(--border-color); border-radius: 16px; padding: 1.75rem 2rem; }
.quiz-question legend { font-size: 1.1rem; font-weight: 700; line-height: 1.3; padding: 0 0.75rem; margin-left: -0.75rem; }
.quiz-question .quiz-options { margin-top: 0.25rem; }
.quiz-options { display: flex; flex-direction: column; gap: 0.75rem; }
.quiz-option {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 0.85rem 1.1rem; border: 1px solid var(--border-color); border-radius: 10px;
    cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; font-size: 1rem;
    color: var(--text-muted);
}
.quiz-option:hover { border-color: var(--accent-gold); }
.quiz-option:has(input:checked) { border-color: var(--accent-gold); background: rgba(191,166,90,0.06); color: var(--text-color); }
.quiz-option input[type="radio"] { accent-color: var(--accent-gold); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-form .btn-primary { align-self: center; margin-top: 0.5rem; }

.quiz-result {
    max-width: 760px; margin: 3rem auto 0; background: var(--bg-alt);
    border: 1px solid var(--accent-gold); border-radius: 20px; padding: 2.5rem; text-align: center;
}
.quiz-result h3 { font-size: 1.8rem; text-transform: uppercase; margin: 0.5rem 0 1rem; }
.quiz-result p { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; }
.quiz-result-examples a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 3px; }
.quiz-result-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
#quiz-restart {
    background: none; border: 1px solid var(--border-color); color: var(--text-muted);
    padding: 0.9rem 1.8rem; border-radius: 50px; cursor: pointer; font-family: inherit;
    font-size: 1rem; transition: border-color 0.2s, color 0.2s;
}
#quiz-restart:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
/* Le bouton clair/sombre reste visible sur mobile, regroupé avec le burger (voir .navbar-actions) */

/* ─── CURSEUR PERSONNALISÉ ───
   Activé uniquement en JS sur les appareils à souris (pointer fin) ;
   les écrans tactiles gardent le curseur natif. */
body.custom-cursor-active,
body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active input,
body.custom-cursor-active select,
body.custom-cursor-active textarea,
body.custom-cursor-active .project-row { cursor: none; }

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-gold-bg);
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
}
.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-hover {
    width: 44px;
    height: 44px;
    background: rgba(191, 166, 90, 0.12);
    border: 1px solid var(--accent-gold);
}
.custom-cursor.is-label {
    width: 66px;
    height: 66px;
    background: var(--accent-gold-bg);
    border: none;
}
.custom-cursor-label {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #001212;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.custom-cursor.is-label .custom-cursor-label { opacity: 1; }

/* ─── Pop-up de confirmation (formulaire de contact) ─── */
.success-modal { position: fixed; inset: 0; margin: auto; height: fit-content; border: 1px solid #BFA65A; border-radius: 16px; background: #001212; color: #f0f0f0; padding: 2.5rem 2rem 2rem; max-width: 420px; width: calc(100% - 2rem); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
.success-modal::backdrop { background: rgba(0, 18, 18, 0.6); backdrop-filter: blur(3px); }
.success-modal[open] { animation: successPop 0.35s ease-out; }
.success-modal__icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; background: #BFA65A; color: #001212; font-size: 2rem; font-weight: 900; line-height: 64px; }
.success-modal h2 { font-size: 1.6rem; text-transform: uppercase; margin-bottom: 0.75rem; color: #f0f0f0; }
.success-modal__text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.35rem; color: #BFA65A; margin-bottom: 0.5rem; }
.success-modal__sub { color: #99ADAD; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.75rem; }
.success-modal__close:focus-visible { outline: 2px solid #f0f0f0; outline-offset: 3px; }
@keyframes successPop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .success-modal[open] { animation: none; } }
#form-status.success { font-weight: 600; }