/* ============================================
   GIROUD CARRELAGE - Styles Spécifiques
   ============================================ */

/* ----------------------------------------
   PAGE ACCUEIL - Hero
   ---------------------------------------- */

.hero-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-lig), 0.15);
    border: 2px solid hsla(var(--accent-hue), var(--accent-sat), var(--accent-lig), 0.3);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-accent-primary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
}

.hero-cta {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.scroll-mouse {
    width: 28px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-wheel {
    width: 4px;
    height: 10px;
    background: var(--color-accent-primary);
    border-radius: 2px;
    animation: scrollWheel 1.8s ease-in-out infinite;
}

@keyframes scrollWheel {
    0% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.3; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

.scroll-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: var(--letter-spacing-widest);
    font-weight: var(--font-weight-medium);
}

/* ----------------------------------------
   PAGE ACCUEIL - Triptyque Cards
   ---------------------------------------- */

.triptyque-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    align-items: stretch;
    max-width: 1600px;
    margin: 0 auto;
}

.triptyque-card {
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

.triptyque-card-inner {
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

/* Carte claire (gauche) */
.triptyque-light {
    background: linear-gradient(180deg, var(--color-card-light-top) 0%, var(--color-card-light-bottom) 100%);
}

.triptyque-light .triptyque-stat {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    line-height: 1;
    font-style: italic;
    font-family: 'Georgia', 'Times New Roman', serif;
    white-space: nowrap;
}

.triptyque-light .triptyque-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-navy);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    font-weight: var(--font-weight-semibold);
}

.triptyque-light p {
    color: var(--color-navy);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-relaxed);
    text-align: center;
}

.triptyque-light .triptyque-btn {
    color: var(--color-navy);
    border: 3px solid var(--color-navy);
}

/* Carte bleue (centre) */
.triptyque-blue {
    background: linear-gradient(180deg, var(--color-card-blue-top) 0%, var(--color-card-blue-mid) 50%, var(--color-card-blue-bottom) 100%);
}

.triptyque-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-xs);
}

.triptyque-icon svg {
    width: 120px;
    height: 120px;
}

.triptyque-icon-text {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-sm);
    color: var(--color-accent-primary);
    letter-spacing: var(--letter-spacing-wider);
    font-weight: var(--font-weight-semibold);
}

.triptyque-italic {
    font-style: italic;
    color: var(--color-accent-primary);
    font-size: var(--font-size-3xl);
    font-family: 'Georgia', 'Times New Roman', serif;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
}

.triptyque-blue .triptyque-italic {
    color: var(--color-text-primary);
}

.triptyque-blue p {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-relaxed);
    text-align: center;
}

.triptyque-blue .triptyque-btn {
    color: var(--color-text-primary);
    border: 3px solid var(--color-text-primary);
}

/* Carte dorée (droite) */
.triptyque-gold {
    background: linear-gradient(180deg, var(--color-card-gold-top) 0%, var(--color-card-gold-mid) 50%, var(--color-card-gold-bottom) 100%);
}

.triptyque-gold .triptyque-stat {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    line-height: 1;
    font-style: italic;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.triptyque-gold .triptyque-stat-sub {
    font-size: var(--font-size-xl);
    color: var(--color-navy);
    font-style: italic;
    font-family: 'Georgia', 'Times New Roman', serif;
    margin-top: -4px;
}

.triptyque-gold h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-navy);
    font-style: italic;
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: var(--line-height-tight);
}

.triptyque-gold p {
    color: #1E2A7A;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-relaxed);
    text-align: center;
}

.triptyque-gold .triptyque-btn {
    color: var(--color-navy);
    border: 3px solid var(--color-navy);
}

/* Bouton commun triptyque */
.triptyque-btn {
    text-transform: uppercase;
    display: inline-block;
    padding: 10px var(--spacing-lg);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    margin-top: auto;
    cursor: default;
}

/* Séparateur carte gauche */
.triptyque-separator {
    width: 60px;
    height: 2px;
    background: var(--color-navy);
    opacity: 0.3;
    margin: var(--spacing-xs) 0;
}

/* ----------------------------------------
   PAGE ACCUEIL - Services / Équipe
   ---------------------------------------- */

.services-section {
    position: relative;
    overflow: hidden;
}

.services-intro-card {
    background: linear-gradient(180deg, var(--color-card-blue-top) 0%, var(--color-card-blue-mid) 50%, var(--color-card-blue-bottom) 100%);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.services-content {
    max-width: 900px;
    margin: 0 auto;
}

.services-content p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
}

.services-content p.text-accent {
    color: var(--color-accent-primary);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-sm);
}

/* Bandeau image services */
.services-banner {
    position: relative;
    height: 200px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

.services-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-xl);
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.3);
    z-index: 4;
    pointer-events: none;
}

.services-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.services-banner-img.active {
    opacity: 1;
}

/* Bandeau image éco (entre sustainability et réseau) */
.eco-banner {
    position: relative;
    height: 200px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

.eco-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-xl);
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.3);
    z-index: 4;
    pointer-events: none;
}

.eco-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bandeau image réseau (dans la section réseau de confiance) */
.network-banner {
    position: relative;
    height: 200px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

.network-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-xl);
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.3);
    z-index: 4;
    pointer-events: none;
}

.network-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------
   PAGE ACCUEIL - Sustainability
   ---------------------------------------- */

.sustainability-section {
    text-align: center;
}

.sustainability-content {
    background: linear-gradient(180deg, var(--color-sustain-card-top), var(--color-sustain-card-mid), var(--color-sustain-card-bottom));
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-2xl) var(--spacing-xl);
    box-shadow: var(--shadow-card);
}


.sustainability-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--color-sustain-1-top), var(--color-sustain-1-mid), var(--color-sustain-1-bottom));
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sustainability-circle svg {
    width: 65%;
    height: 65%;
}

.sustainability-content .stat-number,
.sustainability-content .stat-sublabel,
.sustainability-content h2,
.sustainability-content p,
.sustainability-leaf {
    position: relative;
    z-index: 1;
}

.sustainability-square {
    position: absolute;
    background: linear-gradient(180deg, var(--color-sustain-card-top), var(--color-sustain-card-mid), var(--color-sustain-card-bottom));
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    box-shadow: var(--shadow-card);
}

.sustainability-bg-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--border-radius-xl);
    pointer-events: none;
    z-index: 0;
}

.sustainability-bg-leaf {
    position: absolute;
    width: 600px;
    height: 600px;
    pointer-events: none;
    opacity: 0.5;
}

.sustainability-bg-sprout {
    bottom: -120px;
    left: -40px;
}

.sustainability-bg-leaf-2 {
    bottom: -120px;
    right: -30px;
}

.sustainability-content .stat-number {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    display: block;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: var(--spacing-sm);
}

.sustainability-content .stat-sublabel {
    display: block;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-lg);
}

.sustainability-content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
}

.sustainability-content p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ----------------------------------------
   PAGE ACCUEIL - Réseau de Confiance
   ---------------------------------------- */

.network-card {
    background: linear-gradient(180deg, var(--color-card-blue-top) 0%, var(--color-card-blue-mid) 50%, var(--color-card-blue-bottom) 100%);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-2xl);
}

.network-card .network-text,
.network-card .network-icons {
    position: relative;
    z-index: 1;
}

.network-card .network-text p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    text-align: center;
}

.network-icons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.network-icon-card {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}

.network-icon-card:hover {
    transform: translateY(-4px);
}

.network-icon-card svg {
    width: 52px;
    height: 52px;
    color: var(--color-text-secondary);
    stroke-width: 1.2;
}

/* ----------------------------------------
   PAGE ACCUEIL - Partenaires Card
   ---------------------------------------- */

.partners-card {
    background: linear-gradient(180deg, var(--color-card-blue-top) 0%, var(--color-card-blue-mid) 50%, var(--color-card-blue-bottom) 100%);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
}

/* ----------------------------------------
   PAGE ACCUEIL - Réalisations CTA
   ---------------------------------------- */

.realisations-cta {
    position: relative;
    padding: var(--spacing-3xl) 0;
    text-align: center;
}

.realisations-card {
    background: linear-gradient(180deg, var(--color-card-blue-top) 0%, var(--color-card-blue-mid) 50%, var(--color-card-blue-bottom) 100%);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
}

.realisations-card .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: var(--spacing-xl);
}

.realisations-cta h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-sm);
}

.realisations-cta p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* ----------------------------------------
   PAGE ACCUEIL - Contact CTA
   ---------------------------------------- */

.contact-cta {
    text-align: center;
}

.cta-content {
    background: linear-gradient(180deg, var(--color-card-blue-top) 0%, var(--color-card-blue-mid) 50%, var(--color-card-blue-bottom) 100%);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-2xl) var(--spacing-xl);
}

.cta-content h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-xs);
}

.cta-content p:not(.review-text) {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* ----------------------------------------
   PAGE GALERIE
   ---------------------------------------- */

.galerie-section {
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
}

.galerie-section .section-subtitle {
    font-size: var(--font-size-base);
}

.gallery-empty {
    text-align: center;
    padding: var(--spacing-4xl) 0;
    color: var(--color-text-muted);
}

.gallery-cta-card {
    text-align: center;
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-2xl) var(--spacing-xl);
    background: linear-gradient(180deg, var(--color-card-blue-top) 0%, var(--color-card-blue-mid) 50%, var(--color-card-blue-bottom) 100%);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
}

.gallery-cta-card h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
}

.gallery-cta-card p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
}

/* ----------------------------------------
   PAGE CONTACT
   ---------------------------------------- */

.contact-section {
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
}

.contact-map {
    margin-top: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    height: 400px;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Horaires */
.horaires-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.horaires-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.horaires-list li span:first-child {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* ----------------------------------------
   MENTIONS LEGALES / POLITIQUE
   ---------------------------------------- */

.legal-section {
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-xl);
}

.legal-content h2 {
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
    color: var(--color-accent-primary);
}

.legal-content h3 {
    font-size: var(--font-size-lg);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
}

.legal-content p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
}

.legal-content ul {
    list-style: disc;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.legal-content ul li {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 4px;
}

.legal-content a {
    color: var(--color-accent-primary);
}

/* ----------------------------------------
   PAGE MERCI
   ---------------------------------------- */

.merci-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.merci-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
}

.merci-section h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-sm);
}

.merci-section p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* ----------------------------------------
   PAGE 404
   ---------------------------------------- */

.error-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.error-code {
    font-size: 8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

/* ----------------------------------------
   FORM MESSAGES
   ---------------------------------------- */

.form-message {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    text-align: center;
}

.form-message.success {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.form-message.error {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */

@media (max-width: 1024px) {
    .triptyque-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .realisations-cta {
        padding: var(--spacing-2xl) 0;
    }

    .network-icons {
        flex-wrap: wrap;
        gap: var(--spacing-lg);
    }

    .network-icon-card svg {
        width: 48px;
        height: 48px;
    }
}