/*
Theme Name: Atelier des Petits Pas
Theme URI: https://atelierdespetitspas.com
Author: Atelier Numerik
Author URI: https://ateliernumerik.com
Description: Thème WordPress officiel de l'Atelier des Petits Pas — Centre d'expression et de créativité à Schaerbeek depuis 1995. Design glassmorphism chaleureux, typographie Gilroy, palette terracotta / laser blue / crème.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier-des-petits-pas
Tags: education, non-profit, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ================================
FONTS — Gilroy
================================ */
@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ================================
DESIGN TOKENS (HSL)
================================ */
:root {
--background: 30 100% 98%;
--foreground: 0 0% 6.7%;
--card: 0 0% 100%;
--card-foreground: 0 0% 6.7%;
--primary: 11 74% 55%;
--primary-foreground: 0 0% 100%;
--secondary: 216 76% 46%;
--secondary-foreground: 0 0% 100%;
--muted: 330 7% 95%;
--muted-foreground: 0 0% 32%;
--accent: 36 89% 90%;
--accent-foreground: 0 0% 6.7%;
--border: 30 20% 90%;
--input: 30 20% 88%;
--ring: 11 74% 55%;
--radius: 1.25rem;
--warm-bg: 36 89% 90%;
--shadow-card: 0 2px 16px -2px hsl(30 20% 50% / 0.08);
}

/* ================================
BASE
================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Gilroy', system-ui, -apple-system, sans-serif;
background: hsl(var(--background));
color: hsl(var(--foreground));
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Gilroy', sans-serif; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
a { color: "inherit"; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Tailwind Play CDN provides utility classes; the rules below extend it. */

/* Responsive layout fallbacks — keeps desktop rendering independent from Tailwind CDN/minifiers. */
.hero-grid,
.hero-cards,
.services-grid,
.testi-grid,
.enf-hero,
.enf-grid,
.adu-hero,
.pillar-grid,
.apr-hero,
.founder,
.story-grid,
.pillars,
.fc-grid,
.contact-grid,
.featured,
.art-grid {
display: grid;
grid-template-columns: 1fr;
}

.hero-grid { gap: 1.5rem; align-items: end; }
.hero-cards { gap: 1rem; }
.services-grid,
.enf-hero,
.adu-hero,
.pillar-grid,
.fc-grid { gap: 3rem; align-items: center; }
.testi-grid { gap: 1.5rem; }
.enf-grid,
.story-grid,
.pillars,
.contact-grid,
.art-grid { gap: 2rem; }
.apr-hero { gap: 2rem; align-items: end; }
.featured { gap: 0; }

@media (min-width: 640px) {
.row2 { grid-template-columns: 1fr 1fr !important; }
}

html.app-tablet .row2 { grid-template-columns: 1fr 1fr !important; }

@media (min-width: 768px) {
.enf-grid,
.art-grid,
.pillars { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.testi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2rem; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

html.app-tablet .enf-grid,
html.app-tablet .art-grid,
html.app-tablet .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html.app-tablet .testi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2rem; }
html.app-tablet .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

@media (min-width: 1024px) {
.hero-grid { grid-template-columns: 7fr 5fr !important; gap: 4rem; }
.hero-cards { grid-template-columns: 4fr 8fr !important; gap: 1.5rem; }
.services-grid { grid-template-columns: 1fr 1fr !important; gap: 6rem; }
.enf-hero,
.adu-hero { grid-template-columns: 7fr 5fr !important; }
.pillar-grid,
.story-grid,
.fc-grid { grid-template-columns: 1fr 1fr !important; gap: 4rem; }
.apr-hero { grid-template-columns: 8fr 4fr !important; gap: 4rem; }
.founder { grid-template-columns: 5fr 7fr !important; }
.founder > div:first-child { padding: 0 !important; }
.founder img { width: 100% !important; height: 100% !important; border-radius: 0 !important; border: 0 !important; }
.contact-grid { grid-template-columns: 3fr 2fr !important; }
.featured { grid-template-columns: 1fr 1.2fr !important; }
.art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

html.app-desktop .site-header-inner { padding: 0 2.5rem; }
html.app-desktop .site-logo img { height: 3.5rem; }
html.app-desktop .main-nav { display: flex; }
html.app-desktop .header-cta { display: inline-flex; }
html.app-desktop .menu-toggle { display: none; }
html.app-desktop .mobile-menu { display: none !important; }
html.app-desktop .site-footer-inner { padding: 5rem 2.5rem; }
html.app-desktop .site-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.app-desktop .hero-grid { grid-template-columns: 7fr 5fr !important; gap: 4rem; }
html.app-desktop .hero-cards { grid-template-columns: 4fr 8fr !important; gap: 1.5rem; }
html.app-desktop .services-grid { grid-template-columns: 1fr 1fr !important; gap: 6rem; }
html.app-desktop .enf-hero,
html.app-desktop .adu-hero { grid-template-columns: 7fr 5fr !important; }
html.app-desktop .pillar-grid,
html.app-desktop .story-grid,
html.app-desktop .fc-grid { grid-template-columns: 1fr 1fr !important; gap: 4rem; }
html.app-desktop .apr-hero { grid-template-columns: 8fr 4fr !important; gap: 4rem; }
html.app-desktop .founder { grid-template-columns: 5fr 7fr !important; }
html.app-desktop .founder > div:first-child { padding: 0 !important; }
html.app-desktop .founder img { width: 100% !important; height: 100% !important; border-radius: 0 !important; border: 0 !important; }
html.app-desktop .contact-grid { grid-template-columns: 3fr 2fr !important; }
html.app-desktop .featured { grid-template-columns: 1fr 1.2fr !important; }
html.app-desktop .art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* Utility extensions used by templates */
.text-balance { text-wrap: balance; }
.section-padding { padding: 5rem 1.5rem; }
@media (min-width: 768px) { .section-padding { padding: 7rem 2.5rem; } }
.container-narrow { max-width: 72rem; margin-left: auto; margin-right: auto; }

/* Marquee */
@keyframes marquee { 0% { transform: translateX(0);} 100% { transform: translateX(-50%);} }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-marquee-fast { animation: marquee 21s linear infinite; }

/* Fade up entrance */
@keyframes fade-up { from { opacity: 0; transform: translateY(24px);} to { opacity: 1; transform: translateY(0);} }
.fade-up { animation: fade-up 0.7s ease-out both; }

/* Forms */
input, textarea, select {
width: 100%;
font-family: inherit;
font-size: 1rem;
padding: 1.125rem 1.25rem;
border-radius: 1rem;
border: 1px solid hsl(var(--input));
background: hsl(var(--background));
color: hsl(var(--foreground));
transition: border-color .2s, box-shadow .2s;
min-height: 3.25rem;
box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
outline: none;
border-color: hsl(var(--ring));
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}

input::placeholder,
textarea::placeholder {
color: hsl(var(--muted-foreground) / 0.55);
font-size: 0.9375rem;
}

textarea {
min-height: 8rem;
resize: vertical;
}

/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: 0.875rem 1.75rem; border-radius: 9999px; font-weight: 600; font-size: 1rem;
transition: all .25s ease; border: 2px solid transparent; cursor: pointer; line-height: 1;
}
.btn-primary { background: transparent; border-color: #E35336; color: #E35336; }
.btn-primary:hover { background: #E35336; color: #FBECCF; filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 24px -8px hsl(var(--primary) / 0.5); }
.btn-secondary { background: transparent; border-color: #1961D0; color: #1961D0; }
.btn-secondary:hover { border-color: #1961D0); background: #1961D0; color: #FBECCF; filter: brightness(1.05); }
.btn-outline { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.btn-outline:hover { border-color: #e35336); background: #e35336; color: #FBECCF; filter: brightness(1.05); }
.btn-ghost-cream { border-color: #FBECCF; color: #FBECCF; background: transparent; }
.btn-ghost-cream:hover { background: #FBECCF; color: hsl(var(--secondary)); }

/* Site frame */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
background: hsl(var(--background) / 0.85); backdrop-filter: blur(12px);
border-bottom: 1px solid hsl(var(--border) / 0.4);
}
.site-header-inner {
max-width: 80rem; margin: 0 auto; height: 5rem;
display: flex; align-items: center; justify-content: space-between;
padding: 0 1rem;
}
@media (min-width: 1024px) { .site-header-inner { padding: 0 2.5rem; } }
.site-logo img { height: 2.75rem; width: auto; }
@media (min-width: 1024px) { .site-logo img { height: 3.5rem; } }

.main-nav { display: none; gap: .25rem; align-items: center; }
@media (min-width: 1024px) { .main-nav { display: flex; } }
.main-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: .25rem; }
.main-nav a {
position: relative; display: block; padding: .5rem 1rem;
font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground));
transition: color .2s;
}
.main-nav a:hover { color: #E35336; }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a,
.main-nav .current-page-ancestor > a {
color: hsl(var(--primary));
}
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after,
.main-nav .current-menu-parent > a::after,
.main-nav .current-page-ancestor > a::after {
content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0;
height: 2px; background: hsl(var(--primary)); border-radius: 2px;
}
.header-cta { display: none; }
@media (min-width: 1024px) { .header-cta { display: inline-flex; } }

.menu-toggle { display: inline-flex; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle button {
background: transparent; border: 0; padding: .5rem; cursor: pointer; color: hsl(var(--foreground));
}
.mobile-menu {
display: none;
background: hsl(var(--background));
border-bottom: 1px solid hsl(var(--border));
padding: 1rem;
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu a {
display: block; padding: .75rem 1rem; border-radius: 1rem; font-weight: 500;
color: hsl(var(--foreground) / 0.7);
}
.mobile-menu a:hover { background: hsl(var(--accent)); }
.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a {
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}

main.site-main { padding-top: 5rem; }

/* Footer */
.site-footer { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.site-footer-inner { max-width: 80rem; margin: 0 auto; padding: 3.5rem 1rem; }
@media (min-width: 1024px) { .site-footer-inner { padding: 5rem 2.5rem; } }
.site-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .site-footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .site-footer-grid { grid-template-columns: repeat(4,1fr); } }
.site-footer h4 {
font-size: .75rem; text-transform: uppercase; letter-spacing: .15em;
color: hsl(var(--secondary-foreground) / 0.4); margin-bottom: 1.5rem;
}
.site-footer a { color: hsl(var(--secondary-foreground) / 0.8); font-size: .875rem; transition: color .2s; }
.site-footer a:hover { color: hsl(var(--secondary-foreground)); }
.footer-bottom {
border-top: 1px solid hsl(var(--secondary-foreground) / 0.1);
padding: 1.25rem 1rem;
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
font-size: .75rem; color: hsl(var(--secondary-foreground) / 0.5);
max-width: 80rem; margin: 0 auto;
}
.footer-social {
display: inline-flex; align-items: center; gap: .75rem;
padding: .75rem 1.25rem; border-radius: 9999px;
border: 2px solid hsl(var(--secondary-foreground) / 0.3);
font-size: .875rem; font-weight: 600;
transition: all .2s;
}
.footer-social:hover { border-color: hsl(var(--accent)); background: hsl(var(--accent)); color: hsl(var(--secondary)) !important; }

/* Cards */
.card-soft {
background: hsl(var(--card)); border-radius: 1.5rem; padding: 2rem;
border: 1px solid hsl(var(--border) / 0.5); box-shadow: var(--shadow-card);
transition: box-shadow .3s, transform .3s;
}
.card-soft:hover { box-shadow: 0 12px 40px -8px hsl(var(--primary) / 0.12); }

/* Sections */
.bg-secondary-block { background: hsl(var(--secondary)); color: #fff; }
.bg-accent-block { background: hsl(var(--accent)); }
.bg-accent-soft { background: hsl(var(--accent) / 0.4); }

/* Pill/badge */
.pill {
display: inline-block; padding: .375rem 1rem; border-radius: 9999px;
font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.pill-primary { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.pill-secondary { background: hsl(var(--secondary) / 0.1); color: hsl(var(--secondary)); }
.pill-cream { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* Text colors */
.text-primary-c { color: hsl(var(--primary)); }
.text-secondary-c { color: hsl(var(--secondary)); }
.text-muted-c { color: hsl(var(--muted-foreground)); }

/* Article prose */
.prose-app { max-width: 70ch; }
.prose-app p { color: hsl(var(--muted-foreground)); font-size: 1.125rem; line-height: 1.75; margin: 0 0 1.5rem; }
.prose-app h2, .prose-app h3 { color: hsl(var(--foreground)); margin: 2.5rem 0 1rem; font-size: 1.5rem; }
.prose-app ul { padding-left: 1.5rem; color: hsl(var(--muted-foreground)); font-size: 1.125rem; line-height: 1.7; }
.prose-app strong { color: hsl(var(--foreground)); font-weight: 700; }
.prose-app a { color: hsl(var(--primary)); text-decoration: underline; }

/* Skip link */
.skip-link {
position: absolute; left: -9999px; top: .5rem;
background: hsl(var(--primary)); color: #fff; padding: .5rem 1rem; border-radius: .5rem; z-index: 100;
}
.skip-link:focus { left: .5rem; }

/* Utility helpers used in templates */
.aspect-16-9 { aspect-ratio: 16/9; }
.aspect-4-5 { aspect-ratio: 4/5; }
.aspect-4-3 { aspect-ratio: 4/3; }
.cover-img { width: 100%; height: 100%; object-fit: cover; }
.rounded-3 { border-radius: 2rem; }
.rounded-4 { border-radius: 2.5rem; }
.shadow-xl-soft { box-shadow: 0 24px 60px -20px hsl(0 0% 0% / 0.18); }

/* Form alerts */
.notice { padding: 1rem 1.25rem; border-radius: 1rem; margin-bottom: 1.5rem; font-weight: 600; }
.notice-success { background: hsl(140 60% 92%); color: hsl(140 60% 25%); }
.notice-error { background: hsl(0 80% 94%); color: hsl(0 70% 35%); }

/* WP comments / alignments */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.screen-reader-text {
position: absolute !important; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px; overflow: hidden;
}

/* Pagination */
.app-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; justify-content: center; }
.app-pagination a, .app-pagination span {
display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem;
padding: 0 .9rem; border-radius: 9999px; font-weight: 600; font-size: .875rem;
background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground));
}
.app-pagination .current { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }

/* ================================
ICON HOVER SWAP + LIFT
================================ */
.app-icon { position: relative; display: inline-block; vertical-align: top; line-height: 0; }
.app-icon img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease, transform .35s ease; }
.app-icon .i-base { position: relative; }
.app-icon .i-hover { position: absolute; inset: 0; opacity: 0; }
.app-icon:hover .i-base,
*:has(> .app-icon):hover > .app-icon .i-base { opacity: 0; }
.app-icon:hover .i-hover,
*:has(> .app-icon):hover > .app-icon .i-hover { opacity: 1; }
.app-icon:hover img,
*:has(> .app-icon):hover > .app-icon img { transform: translateY(-6px) scale(1.06); }

/* ================================
ENHANCED INTERACTIONS (v1.0.3)
================================ */

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Stronger card hover */
.card-soft { transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; }
.card-soft:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px -18px hsl(var(--primary) / 0.25);
border-color: hsl(var(--primary) / 0.25);
}

/* Hero cards (Enfance / Adultes / Actualités) — zoom + glow on hover */
.hero-card { position: relative; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; will-change: transform; }
.hero-card::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 80% 0%, rgba(255,255,255,.25), transparent 60%);
opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.hero-card:hover { transform: scale(1.05); box-shadow: 0 28px 60px -22px rgba(0,0,0,.35); }
.hero-card:hover::after { opacity: 1; }
.hero-card .hero-arrow { display: inline-block; transition: transform .35s ease; }
.hero-card:hover .hero-arrow { transform: translateX(6px); }

/* Article card hover (Actualités) */
.article-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.article-card .article-thumb { overflow: hidden; }
.article-card .article-thumb img { transition: transform .7s ease; width: 100%; height: 100%; object-fit: cover; }
.article-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -18px hsl(var(--primary) / 0.28); border-color: hsl(var(--primary) / 0.35); }
.article-card:hover .article-thumb img { transform: scale(1.07); }
.article-card .article-cta { transition: gap .25s ease, color .25s ease; }
.article-card:hover .article-cta { gap: .75rem; color: hsl(var(--primary)); }

/* Featured article card */
.featured { transition: transform .4s ease, box-shadow .4s ease; }
.featured:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -25px rgba(0,0,0,.4); }
.featured .article-thumb img { transition: transform .7s ease; }
.featured:hover .article-thumb img { transform: scale(1.05); }

/* Découvrir l'Atelier indicator */
.discover-indicator {
display: none; flex-direction: column; align-items: center; gap: .5rem;
margin: 5rem auto 0; color: hsl(var(--muted-foreground));
font-size: .875rem; font-weight: 500;
}
html.app-desktop .discover-indicator { display: flex; }
@keyframes app-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.discover-indicator svg { animation: app-bounce 1.5s ease-in-out infinite; }

/* Stats — entrance + counter */
.stats > div { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.stats > div.is-visible { opacity: 1; transform: translateY(0); }
.stats > div:nth-child(2) { transition-delay: .1s; }
.stats > div:nth-child(3) { transition-delay: .2s; }
.stats > div:nth-child(4) { transition-delay: .3s; }

/* Slideshow */
.app-slideshow {
position: relative; width: 100%; height: 100%;
border-radius: 2.5rem; overflow: hidden; background: hsl(var(--muted));
box-shadow: 0 24px 60px -20px rgba(0,0,0,.25);
}
.app-slideshow.aspect-4-5 { aspect-ratio: 4/5; }
.app-slideshow.aspect-4-3 { aspect-ratio: 4/3; }
.app-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.app-slide.is-active { opacity: 1; }
.app-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================
PRELOADER (round logo fill)
================================ */
.app-preloader {
position: fixed; inset: 0; z-index: 9999;
background: hsl(var(--background));
display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.25rem;
transition: opacity .5s ease, visibility .5s ease;
}
.app-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-preloader-logo {
position: relative; width: 6rem; height: 6rem;
}
.app-preloader-logo img {
position: absolute; inset: 0; width: 100%; height: 100%;
}
.app-preloader-logo .pl-base { opacity: .2; filter: grayscale(1); }
.app-preloader-logo .pl-fill {
animation: app-fill 1.4s ease-in-out infinite;
clip-path: inset(100% 0 0 0);
}
@keyframes app-fill {
0% { clip-path: inset(100% 0 0 0); }
60% { clip-path: inset(0% 0 0 0); }
100% { clip-path: inset(0% 0 100% 0); }
}
.app-preloader-label {
font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
font-weight: 700; color: hsl(var(--muted-foreground));
}

/* ================================
v1.0.4 — Contact list + button reset
================================ */
button { font-family: inherit; }
.btn { -webkit-appearance: none; appearance: none; }
.btn-send svg { transition: transform .25s ease; }
.btn-send:hover svg { transform: translateX(3px); }

.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-list li { display: flex; align-items: center; gap: 1rem; }
.contact-list .ci-box {
width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: 1.25rem;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .25s ease;
}
.contact-list li:hover .ci-box { transform: scale(1.08); }
.ci-primary { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }
.ci-secondary { background: hsl(var(--secondary) / 0.12); color: hsl(var(--secondary)); }
.ci-meta { display: flex; flex-direction: column; min-width: 0; }
.ci-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: .15rem; }
.ci-value { color: hsl(var(--foreground)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; transition: color .2s ease; }

.contact-card input,
.contact-card textarea,
.contact-card select {
padding-left: 1rem !important;
}

.contact-card textarea,
textarea#contact-message {
padding-top: 1rem !important;
}

/* Fix overflow contact page */
.contact-grid,
.contact-card,
.contact-map {
max-width: 100%;
}