/* Créalix — styles communs. Repris du <style> de la maquette Claude Design (35-crealix, 21/09/2026),
   plus les hovers (style-hover → classes) et le menu responsive (état React → media query). */
html { scroll-behavior: smooth; }
body { margin: 0; background: #0E1417; color: #F4F8FA; font-family: Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
* { box-sizing: border-box; }
a { color: #2FC4D6; text-decoration: none; }
a:hover { color: #8AE6F1; }
img { display: block; max-width: 100%; }
input, textarea, button, select { font: inherit; color: inherit; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

@keyframes riseIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wipeIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes slideL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes growW { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes parY { from { transform: translate3d(0,-7%,0) scale(1.14); } to { transform: translate3d(0,7%,0) scale(1.14); } }
@keyframes kb { 0% { opacity: 0; transform: scale(1.02); } 6% { opacity: 1; } 26% { opacity: 1; } 34% { opacity: 0; transform: scale(1.14); } 100% { opacity: 0; transform: scale(1.14); } }
@keyframes word { 0% { opacity: 0; transform: translateY(26px); } 3.3% { opacity: 1; transform: translateY(0); } 15% { opacity: 1; transform: translateY(0); } 19% { opacity: 0; transform: translateY(-24px); } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes scanline { 0% { transform: translateY(-120%); } 100% { transform: translateY(1200%); } }
@keyframes introLogo { 0% { opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(1.18); filter: blur(6px); } 60% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); filter: blur(0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); filter: blur(0); } }
@keyframes introOut { to { transform: translateY(-102%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@supports not (animation-timeline: view()) {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .kb-slide { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* hovers de la maquette (attribut style-hover) */
.lk { color: #C4D1D8; }            .lk:hover { color: var(--ac,#2FC4D6); }
.lk2 { color: #BCCAD1; }           .lk2:hover { color: var(--ac,#2FC4D6); }
.btn-ac:hover { background: #8AE6F1 !important; color: #06171B; }
.bd-ac:hover { border-color: var(--ac,#2FC4D6) !important; color: var(--ac,#2FC4D6); background: rgba(47,196,214,.08); }
.card:hover { border-color: rgba(47,196,214,.55) !important; }
.card img { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.card:hover img { transform: scale(1.07); }
.zoom img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.zoom:hover img { transform: scale(1.06); }
.dot:hover { background: var(--ac,#2FC4D6) !important; }
.card, .card h3 { color: inherit; }

/* menu : large / étroit (la maquette bascule à 900px) */
.nav-narrow { display: none !important; }
@media (max-width: 900px) {
  .nav-wide { display: none !important; }
  .nav-narrow { display: flex !important; }
  #fab-call { display: none !important; }
}
#menu-mobile a:hover { color: var(--ac,#2FC4D6); }

/* formulaire */
.champ { background: #0D1418; border: 1px solid #263338; border-radius: 6px; padding: 14px 16px; font-size: 16px; letter-spacing: 0; text-transform: none; color: #F4F8FA; width: 100%; }
.champ:focus { outline: 2px solid rgba(47,196,214,.55); outline-offset: 1px; border-color: var(--ac,#2FC4D6); }
.etiq { display: grid; gap: 8px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #8DA1A9; }
select.champ { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8DA1A9 50%), linear-gradient(135deg, #8DA1A9 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

/* texte courant des pages intérieures */
.prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: #B9C8D0; text-wrap: pretty; }
.prose h2 { margin: 44px 0 16px; font-family: 'Archivo Black', sans-serif; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.06; text-transform: uppercase; letter-spacing: -.01em; color: #F4F8FA; }
.prose h3 { margin: 30px 0 10px; font-family: 'Archivo Black', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: .01em; color: #F4F8FA; }
.prose ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.prose li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: #DCE6EA; }
.prose li::before { content: "—"; color: var(--ac,#2FC4D6); font-weight: 700; flex-shrink: 0; }
.prose a { color: var(--ac,#2FC4D6); border-bottom: 1px solid rgba(47,196,214,.35); }
.prose strong { color: #F4F8FA; }

/* hero sur petit téléphone : « TERRASSEMENTS » (13 lettres) doit tenir sur la ligne (défaut hérité de la maquette) */
@media (max-width: 480px) {
  #top h1 { font-size: 30px !important; }
  #top h1 > span:last-child { height: 34px !important; }
}

/* sous-menu Services (survol, clavier, tactile) */
.sm-panel { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.sm:hover .sm-panel, .sm:focus-within .sm-panel, .sm.sm-open .sm-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.sm-item:hover { background: rgba(47,196,214,.1); color: #F4F8FA; }
/* icônes (contact, footer) */
.ico-c svg, .ico-l svg { width: 22px; height: 22px; display: block; }
.ico-l { display: inline-flex; align-items: center; gap: 10px; }
.ico-l svg { width: 16px; height: 16px; color: var(--ac,#2FC4D6); flex-shrink: 0; }
/* formulaire à étapes */
#ct-etapes li.et-on { color: #C4D1D8; }
#ct-etapes li.et-on .et-barre { background: var(--ac,#2FC4D6); }
#ct-etapes li.et-cur { color: var(--ac,#2FC4D6); }
.choix:hover { border-color: rgba(47,196,214,.55); }
.choix:has(input:checked), .choix.choix-on { border-color: var(--ac,#2FC4D6); background: rgba(47,196,214,.1); box-shadow: 0 0 0 1px var(--ac,#2FC4D6) inset; }
.choix:has(input:focus-visible) { outline: 2px solid rgba(47,196,214,.55); outline-offset: 2px; }
@media (max-width: 480px) { .logo-h { width: 60px !important; height: 60px !important; } }

/* ═══ Blog « digeste » BE WEB — variables du standard mappées sur le thème Créalix ═══ */
:root { --color-accent: #2FC4D6; --color-accent-dark: #8AE6F1; --color-text: #F4F8FA; --color-muted: #A5B6BE; --color-border: #1C272D; --color-dark: #F4F8FA; --radius: 8px; --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 24px; --space-5: 36px; --space-6: 56px; }
.article-meta { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #7F949C; margin: 0 0 18px; }
.publish-gate__locked { border: 1px solid #24343B; border-radius: 8px; padding: 22px; color: #B9C8D0; }
.article-body h2 { scroll-margin-top: 110px; }
.article-body h3 { color: var(--color-text); }
.article-body ul { list-style: none; }
.article-body ul li { position: relative; display: block; padding-left: 1.2rem; }
.article-body ul li::before { content: '•'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
.article-body a:not(.btn):not(.reno-btn) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; border: 0; }
.article-body a:not(.btn):not(.reno-btn):hover { color: var(--color-accent-dark); }
.article-brief { margin: var(--space-4) 0 var(--space-5); padding: var(--space-4) var(--space-5); background: rgba(47,196,214,.07); border-left: 4px solid var(--color-accent); border-radius: var(--radius); }
.article-brief h2 { margin: 0 0 var(--space-3); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .3em; color: var(--color-accent); }
.article-brief ul { margin: 0; display: grid; gap: var(--space-2); }
.article-toc { margin: var(--space-4) 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: #121A1F; }
.article-toc h2 { margin: 0 0 var(--space-2); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .3em; color: var(--color-muted); }
.article-toc ol { margin: 0; padding-left: 1.3rem; color: #DCE6EA; }
.article-toc li { margin-bottom: 6px; font-size: 16px; }
.article-quote { margin: var(--space-5) 0; padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: 4px solid var(--color-accent); font-size: 1.22rem; line-height: 1.5; font-weight: 600; color: var(--color-text); }
.article-faq { margin-top: var(--space-3); display: grid; border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); padding: 18px 0; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font-size: 18px; font-weight: 600; color: #EDF3F6; }
.faq-item summary::after { content: '+'; color: var(--color-accent); }
.faq-item[open] summary::after { content: '–'; }
.faq-answer p { margin: 14px 0 0; }
.article-realisations { margin: var(--space-6) 0; padding: var(--space-6) var(--space-5); text-align: center; background: linear-gradient(160deg, rgba(47,196,214,0.10), rgba(47,196,214,0.03)); border: 1px solid rgba(47,196,214,0.28); border-radius: calc(var(--radius) * 1.4); }
.reno-eyebrow { display: inline-block; margin-bottom: var(--space-2); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: var(--color-accent); }
.article-realisations h3 { margin: 0 0 var(--space-2); font-family: 'Archivo Black', sans-serif; font-size: 1.4rem; text-transform: uppercase; }
.reno-sub { margin: 0 auto var(--space-4); max-width: 460px; color: var(--color-muted); font-size: 0.95rem; }
.reno-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.article-realisations a.reno-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.4rem; background: var(--color-accent); color: #06171B; text-decoration: none; font-weight: 700; font-size: 0.95rem; border-radius: 4px; box-shadow: 0 4px 14px rgba(47,196,214,0.30); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.article-realisations a.reno-btn span { transition: transform .18s ease; }
.article-realisations a.reno-btn:hover { background: var(--color-accent-dark); color: #06171B; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(47,196,214,0.38); }
.article-realisations a.reno-btn:hover span { transform: translateX(4px); }
.article-more ul, .article-zones p { font-size: 16px; }
.article-cta { margin: var(--space-6) 0 0; padding: var(--space-5); border: 1px solid rgba(47,196,214,.4); background: rgba(47,196,214,.08); border-radius: 10px; }
.article-cta h3 { margin: 0 0 10px; font-family: 'Archivo Black', sans-serif; font-size: 22px; text-transform: uppercase; }
.article-cta p { margin: 0 0 18px; }
.btn.btn-primary { display: inline-block; background: var(--color-accent); color: #06171B; font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 4px; letter-spacing: .03em; text-decoration: none; }
.btn.btn-primary:hover { background: var(--color-accent-dark); color: #06171B; }
/* cartes blog (index + accueil) */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.blog-card { display: block; border: 1px solid #1C272D; border-radius: 8px; background: #121A1F; padding: 28px; color: #F4F8FA; overflow: hidden; }
.blog-card:hover { border-color: rgba(47,196,214,.55); color: #F4F8FA; }
.blog-card__img { display: block; width: calc(100% + 56px); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; margin: -28px -28px 18px; border-radius: 8px 8px 0 0; }
.blog-card__date { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--color-accent); }
.blog-card h3 { margin: 10px 0; font-family: 'Archivo Black', sans-serif; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; color: #F4F8FA; line-height: 1.15; }
.blog-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #9FB0B8; }
.blog-card__lire { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-accent); }
.blog-grid:has(.blog-card:not([style*="display:none"]):not([style*="display: none"])) + .blog-vide { display: none; }
@media (max-width: 768px) { .blog-card { padding: 22px; } .blog-card__img { width: calc(100% + 44px); margin: -22px -22px 16px; } }
.article-toc ol { list-style: decimal; }
.article-toc li { display: list-item; padding-left: 0; }
.article-toc li::before { content: none; }