/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #3b7047, #567d59, #4d8761, #2f5740);
    color: antiquewhite;
    font-family: Arial, sans-serif;
}

/* Content Styles */
main {
    width: 100%;
    max-width: 1400px; /* Augmenter la largeur maximale */
    margin: 0 auto;
    padding: 10px; /* Réduire les marges latérales */
}

.content {

    margin-top: var(--header-height);
}
.page {
    background-color: #3b7047;
    min-height: 100vh;
}


.banner {
    border: 3px solid sandybrown;
    border-radius: 10px;
    position: relative;
    background-image: url('/images/banner.png'); /* Chemin vers ton image de bannière */
    background-size: cover;
    background-position: center;
    height: 800px; /* Ajuste la hauteur de la bannière */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: floralwhite;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Couche semi-transparente pour améliorer la lisibilité */
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-content {
    z-index: 1;
    max-height : 100%;
    max-width: 100%; /* Limite la largeur pour un meilleur rendu */
    padding: 20px;
}

.banner-title {
    font-size: 3em; /* Ajuste la taille du texte */
    margin: 0 0 20px 0;
    color: ivory;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 2);
}


.site-subtitle {
    font-size: 2em; /* Ajuste la taille du texte */
    margin: 0 0 20px 0;
    color: gold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.2);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espace entre les boutons */
}

.proof-section {
    background-color: #1F4939; /* Fond sombre pour le style steampunk */
    border: 2px solid sandybrown; /* Bordure de couleur steampunk */
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    color: antiquewhite;
    border-radius: 10px;
}

.proof-title {
    font-size: 2em;
    margin-bottom: 10px;
}

.proof-text {
    font-size: 1.2em;
}



.section {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7); /* Ajout d'une superposition sombre */
    color: antiquewhite;
    border-radius: 10px;
    max-width: 1200px;
    z-index: 1;
    margin: 20px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-image: url('/images/texture.png');
    background-size: cover;
    position: relative;
}

    .section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6); /* Superposition sombre */
        border-radius: 10px;
    }

    .section h2 {
        font-size: 2.5em;
        color: #ECDAAF;
        text-align: center;
        margin-bottom: 20px;
        position: relative;
        z-index: 2; /* Assure que le texte est au-dessus de l'overlay */
        padding: 20px;
        background-color: #1f4939; /* Fond sombre pour un effet métallique */
        border: 5px solid #a67c52; /* Bordure cuivre */
        border-radius: 15px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.7), inset 0 0 10px #000000; /* Ombres interne et externe pour un effet 3D */
        text-transform: uppercase; /* Mettre le texte en majuscule pour plus d'impact */
        letter-spacing: 1.5px; /* Espacement des lettres pour un effet plus aérien */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Ombre portée pour un effet de relief */
        position: relative;
        overflow: hidden;
    }

        .section h2:hover {
            background-color: #485d55; /* Légère modification de la couleur de fond au survol */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), inset 0 0 15px #000000; /* Effet de survol accentué */
        }

    .section h3 {
        font-size: 2em;
        color: gold;
        margin-top: 20px;
        position: relative;
        z-index: 2;
    }

    .section h3 {
        font-size: 2em;
        color: chocolate;
        margin-top: 20px;
        position: relative;
        z-index: 2;
    }

    .section h4 {
        font-size: 1.3em;
        color: chocolate;
        margin-top: 20px;
        position: relative;
        z-index: 2;
    }


    .section ul {
        list-style-type: disc;
        padding-left: 40px;
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
    }

    .section li {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 1.2em;
        color: darkslategrey;
    }

    .section p {
        font-size: 1.2em;
        margin: 20px;
        position: relative;
        z-index: 2;
    }

.paragraphe {
    padding: 20px;
    border-radius: 10px;
    position: relative;
    color: darkslategrey ;
        z-index: 2; /* Texte au-dessus des éléments décoratifs */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 10px #000000; /* Ombres interne et externe pour un effet 3D */
    text-transform: none; /* Évite la mise en majuscules automatique */
    letter-spacing: normal; /* Espacement normal des lettres */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Ombre portée pour un effet de relief */
    background-color: antiquewhite;
    border: 3px solid #a67c52; /* Bordure cuivre */
}
    .paragraphe::before,
    .paragraphe::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        background: url('/images/gear.png') no-repeat center center; /* Image d'un engrenage */
        background-size: contain;
        z-index: -1; /* Derrière le texte */
    }

    .paragraphe::before {
        left: -15px;
        top: -15px; /* Positionne l'engrenage à gauche du texte */
    }

    .paragraphe::after {
        right: -15px;
        bottom: -15px;
        transform: translateY(0); /* Positionne l'engrenage à droite du texte */
    }

    .paragraphe:hover {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), inset 0 0 15px #000000; /* Effet de survol accentué */
    }

        .paragraphe:hover::before {
            transform: translateY(300%) rotate(360deg); /* Animation de rotation des engrenages au survol */
            transition: transform 0.8s ease-in-out;
        }

        .paragraphe:hover::after {
            transform: translateY(-300%) rotate(360deg); /* Animation de rotation des engrenages au survol */
            transition: transform 0.8s ease-in-out;
        }


.separator {
    display: block;
    height: 2px;
    width: 90%;
    background: sandybrown;
    margin: 20px auto; /* Espace autour de la séparation */
}

.container {
    margin: 50px 50px;
    text-align: center;
}

.cta-button {
    background-color: darkgoldenrod; /* Couleur de fond métallique */
    color: antiquewhite; /* Couleur du texte */
    font-size: 1.5em;
    font-weight: bold;
    padding: 15px 30px;
    border: 3px solid #a67c52; /* Bordure de couleur cuivre */
    border-radius: 12px; /* Bordure arrondie pour un effet rivet */
    box-shadow: inset 0 0 5px #1c1c1c, /* Ombre interne pour effet d'enfoncement */
    0 10px 15px rgba(0, 0, 0, 0.5); /* Ombre externe pour effet de surélévation */
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%; /* Prend la largeur complète */
    max-width: 100%; /* Empêche le débordement sur mobile */
}

    /* Effet de survol */
    .cta-button:hover {
        background-color: #5c6b7c; /* Change légèrement la couleur de fond au survol */
        color: #f8f1e4;
        transform: translateY(-5px); /* Déplace le bouton vers le haut */
        box-shadow: inset 0 0 5px #1c1c1c, 0 15px 20px rgba(0, 0, 0, 0.6); /* Augmente l'ombre pour un effet de surélévation plus prononcé */
    }

    /* Effet d'animation "pulse" sur le bouton */
    .cta-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300%;
        height: 300%;
        background: radial-gradient(circle, rgba(166, 124, 82, 0.75), transparent 70%);
        opacity: 0;
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        transform: translate(-50%, -50%) scale(0.5);
        z-index: 0;
    }

    .cta-button:hover::before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Texte du bouton */
    .cta-button span {
        position: relative;
        z-index: 1;
    }

    /* Bordures stylisées (engrenages ou rivets simulés) */
    .cta-button::after {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border: 2px dashed #a67c52; /* Bordure intérieure pour un effet steampunk */
        border-radius: 14px;
        opacity: 0.7;
        transition: opacity 0.2s ease-in-out;
    }

    .cta-button:hover::after {
        opacity: 1;
    }


.contact-form-container {
    position: relative; /* Position relative pour que le z-index soit appliqué */
    z-index: 10; /* Un z-index supérieur pour passer le formulaire en premier plan */
    background-color: rgba(68, 68, 68, 0.8);
    padding: 20px;
    border-radius: 10px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-title {
    font-size: 1.8em;
    color: sandybrown;
    margin-bottom: 15px;
    text-align: center;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1/3 pour les labels, 2/3 pour les inputs */
    gap: 20px; /* Espace entre les éléments */
    align-items: center; /* Aligne verticalement les éléments */
    margin : 20px;
}

    .form-grid label {
        font-size: 1.2em;
        color: antiquewhite;
        justify-self: end; /* Aligne les labels à droite */
    }

    .form-grid input,
    .form-grid textarea {
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #888;
        background-color: #555;
        color: antiquewhite;
        font-size: 1em;
        width: 100%; /* Prend toute la largeur disponible */
    }


@media (max-width: 768px) {
    .cta-button {
        font-size: 1.2em; /* Réduit légèrement la taille de la police pour mobile */
        padding: 10px 20px; /* Ajuste le padding pour un meilleur rendu sur mobile */
        display:inline-block;
    }

    .section h2 {
        font-size: 1.2em;
    }

    .section h3 {
        font-size: 1.1em;
    }

    .section h4 {
        font-size: 0.9em;
    }

    .section p {
        font-size: 0.8em;
    }

    .section li {
        font-size: 0.8em;
    }

}


code {
    color: #c02d76;
}

/* Présentation du développeur et projets récents */
.section-eyebrow {
    color: #d4af37 !important;
    font-size: 0.9rem !important;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 8px !important;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    z-index: 2;
}

.section-introduction {
    color: antiquewhite;
    margin: 0 auto 24px !important;
    max-width: 780px;
    text-align: center;
}

.developer-lead {
    font-size: 1.35rem !important;
    line-height: 1.65;
}

.developer-highlights {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 28px 20px 8px;
}

.developer-highlight {
    background: rgba(31, 73, 57, 0.09);
    border-left: 4px solid #a67c52;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
}

.developer-highlight strong {
    color: #1f4939;
    font-size: 1.1rem;
}

.developer-highlight span {
    line-height: 1.5;
}

.developer-method {
    background: rgba(31, 73, 57, 0.07);
    border-radius: 8px;
    margin: 24px 20px;
    padding: 18px 18px 18px 48px !important;
}

.developer-method li {
    color: #2f443c;
    line-height: 1.5;
}

.developer-actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.text-link,
.project-link {
    color: #1f4939;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.text-link:hover,
.project-link:hover {
    color: #8b4513;
}

.recent-projects-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
    z-index: 2;
}

.recent-project-card {
    background: #f7efdf;
    border: 2px solid #a67c52;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    color: #2f443c;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    padding: 22px;
}

.recent-project-card::before {
    background: #1f4939;
    content: '';
    height: 7px;
    margin: -22px -22px 18px;
}

.recent-project-card.cafechrono-project::before {
    background: #7a4027;
}

.recent-project-card.touch-project::before {
    background: #3d4f75;
}

.project-status {
    align-self: flex-start;
    background: rgba(31, 73, 57, 0.1);
    border-radius: 999px;
    color: #1f4939;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    text-transform: uppercase;
}

.project-monogram,
.project-logo {
    align-items: center;
    align-self: center;
    background: #1f4939;
    border: 3px solid #d4af37;
    border-radius: 50%;
    color: antiquewhite;
    display: flex;
    font-family: Georgia, serif;
    font-size: 2.4rem;
    font-weight: 700;
    height: 84px;
    justify-content: center;
    margin: 20px 0 6px;
    object-fit: cover;
    width: 84px;
}

.cafechrono-project .project-monogram {
    background: #7a4027;
}

.recent-project-card h3 {
    color: #8b4513;
    font-size: 1.7rem;
    margin: 12px 0 4px;
    text-align: center;
}

.recent-project-card p {
    color: #2f443c;
    font-size: 1rem;
    line-height: 1.6;
    margin: 12px 0;
}

.project-benefit {
    border-top: 1px solid rgba(47, 68, 60, 0.2);
    color: #59675f;
    font-size: 0.92rem;
    font-style: italic;
    margin-top: auto;
    padding-top: 14px;
}

.project-link {
    margin-top: auto;
    padding-top: 12px;
    text-align: center;
}

@media (max-width: 768px) {
    .developer-highlights,
    .recent-projects-grid {
        grid-template-columns: 1fr;
    }

    .developer-highlights {
        margin-left: 0;
        margin-right: 0;
    }

    .developer-lead {
        font-size: 1rem !important;
    }

    .developer-method {
        margin-left: 0;
        margin-right: 0;
        padding-left: 36px !important;
    }
}

/* Harmonisation avec le thème sombre chargé par le site */
.section .developer-highlight {
    background: rgba(196, 154, 74, 0.06);
    border-left-color: var(--color-brass, #c49a4a);
}

.section .developer-highlight strong,
.section .text-link,
.section .project-link {
    color: var(--color-brass-light, #e0bc6a);
}

.section .developer-highlight span,
.section .developer-method li {
    color: var(--color-parchment, #d9c79f);
}

.section .developer-method {
    background: rgba(9, 13, 9, 0.34);
}

.section .recent-project-card {
    background: linear-gradient(155deg, rgba(45, 54, 40, 0.98), rgba(18, 23, 17, 0.99));
    border-color: rgba(196, 154, 74, 0.42);
    color: var(--color-text, #f4ecd8);
}

.section .recent-project-card h3 {
    color: var(--color-brass-light, #e0bc6a);
}

.section .recent-project-card p {
    color: var(--color-parchment, #d9c79f);
    font-size: 1rem;
    line-height: 1.6;
    margin: 12px 0;
}

.section .recent-project-card .project-benefit {
    border-top-color: rgba(196, 154, 74, 0.25);
    color: var(--color-muted, #b9aa86);
}

/* Page Services et tarifs */
.pricing-intro .section-introduction {
    max-width: 860px;
}

.pricing-jump-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.pricing-jump-links a,
.pricing-inline-link {
    border: 1px solid rgba(196, 154, 74, 0.45);
    border-radius: 999px;
    color: var(--color-brass-light, #e0bc6a);
    font-weight: 700;
    padding: 0.65rem 1rem;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.pricing-jump-links a:hover,
.pricing-inline-link:hover {
    background: rgba(196, 154, 74, 0.12);
    border-color: var(--color-brass-light, #e0bc6a);
    transform: translateY(-2px);
}

.pricing-category {
    scroll-margin-top: calc(var(--header-height, 86px) + 1rem);
}

.pricing-category-intro {
    max-width: 850px;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.1rem, 2.5vw, 1.7rem);
    border: 1px solid rgba(196, 154, 74, 0.28);
    border-radius: var(--radius-lg, 1.25rem);
    background: linear-gradient(155deg, rgba(45, 54, 40, 0.96), rgba(17, 22, 16, 0.98));
    box-shadow: var(--shadow-sm, 0 0.35rem 1.1rem rgba(0, 0, 0, 0.24));
}

.pricing-card-featured {
    border-color: rgba(196, 154, 74, 0.58);
    background:
        linear-gradient(130deg, rgba(94, 127, 69, 0.16), transparent 45%),
        linear-gradient(155deg, rgba(45, 54, 40, 0.98), rgba(17, 22, 16, 0.99));
}


.pricing-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
}

.pricing-label,
.pricing-size {
    color: var(--color-muted, #b9aa86);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.pricing-card-heading h3,
.application-offer-heading h3 {
    margin-top: 0.35rem;
}

.pricing-amount {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    color: var(--color-text, #f4ecd8);
    text-align: right;
}

.pricing-amount strong {
    color: var(--color-brass-light, #e0bc6a);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.75rem, 3.2vw, 2.45rem);
    font-weight: 600;
    line-height: 1;
}

.pricing-amount span {
    color: var(--color-muted, #b9aa86);
    font-size: 0.9rem;
}

.section .pricing-features {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.section .pricing-features li {
    margin: 0;
    color: var(--color-parchment, #d9c79f);
}

.pricing-note,
.pricing-scope-note {
    margin-top: 1.25rem !important;
    padding: 0.8rem 1rem;
    border-left: 3px solid rgba(196, 154, 74, 0.62);
    border-radius: 0 var(--radius-sm, 0.5rem) var(--radius-sm, 0.5rem) 0;
    background: rgba(9, 13, 9, 0.28);
    color: var(--color-muted, #b9aa86) !important;
    font-size: 0.92rem !important;
}

.pricing-subtitle {
    margin: 2rem 0 1rem !important;
}

.pricing-options-grid,
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.85rem, 2vw, 1.25rem);
}

.pricing-option {
    display: flex;
    flex-direction: column;
    padding: 1.1rem;
    border: 1px solid rgba(244, 236, 216, 0.12);
    border-radius: var(--radius-md, 0.8rem);
    background: rgba(9, 13, 9, 0.28);
}

.pricing-option h4 {
    margin-top: 0;
}

.section .pricing-option p {
    flex: 1;
    color: var(--color-parchment, #d9c79f);
}

.pricing-option strong {
    margin-top: 0.75rem;
    color: var(--color-brass-light, #e0bc6a);
    font-size: 1.2rem;
}

.application-offer {
    margin-top: 1.8rem;
}

.application-offer-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.application-icon {
    display: inline-flex;
    width: 3.2rem;
    height: 3.2rem;
    flex: 0 0 3.2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 154, 74, 0.52);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(94, 127, 69, 0.55), rgba(34, 45, 29, 0.92));
    color: var(--color-text, #f4ecd8);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.desktop-icon {
    background: linear-gradient(145deg, rgba(180, 106, 60, 0.5), rgba(72, 42, 25, 0.92));
}

.combined-icon {
    background: linear-gradient(145deg, rgba(79, 127, 133, 0.6), rgba(31, 62, 67, 0.94));
}

.application-separator {
    height: 1px;
    margin: 2.4rem 0;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 74, 0.46), transparent);
}

.section .pricing-card > p {
    color: var(--color-parchment, #d9c79f);
}

.pricing-card .pricing-inline-link {
    align-self: flex-start;
    margin-top: auto;
}

.pricing-contact .paragraphe {
    text-align: center;
}

@media (max-width: 900px) {
    .pricing-options-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pricing-card-heading {
        flex-direction: column;
    }

    .pricing-amount {
        text-align: left;
    }

    .pricing-jump-links {
        align-items: stretch;
        flex-direction: column;
    }

    .pricing-jump-links a {
        text-align: center;
    }

    .application-offer-heading {
        align-items: flex-start;
    }
}

/* Applications mobiles intégrées au portfolio */
.portfolio-sites-section .card-site-title {
    font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
    line-height: 1.25;
}

.portfolio-mobile-apps-section {
    scroll-margin-top: calc(var(--header-height, 86px) + 1rem);
}

.mobile-apps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.mobile-app-card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.1rem, 2.6vw, 1.6rem);
    border: 1px solid rgba(196, 154, 74, 0.32);
    border-radius: var(--radius-lg, 1.25rem);
    background: linear-gradient(155deg, rgba(45, 54, 40, 0.97), rgba(17, 22, 16, 0.99));
    box-shadow: var(--shadow-sm, 0 0.35rem 1.1rem rgba(0, 0, 0, 0.24));
}

.mobile-app-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-app-heading h3 {
    margin: 0.45rem 0 0;
}

.mobile-app-image {
    width: 5rem;
    height: 5rem;
    flex: 0 0 5rem;
    border: 2px solid rgba(196, 154, 74, 0.5);
    border-radius: 1.1rem;
    background: rgba(9, 13, 9, 0.38);
    object-fit: cover;
}

.mobile-app-logo {
    padding: 0.45rem;
    object-fit: contain;
}

.section .mobile-app-card > p,
.section .mobile-app-card li {
    color: var(--color-parchment, #d9c79f);
}

.mobile-app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
}

.secondary-project-link {
    color: var(--color-muted, #b9aa86);
    font-size: 0.9rem;
}

@media (max-width: 760px) {
    .mobile-apps-grid {
        grid-template-columns: 1fr;
    }

    .mobile-app-heading {
        align-items: flex-start;
    }
}

/* Projets mobiles et multiplateformes du portfolio */
.mobile-app-monogram {
    display: inline-flex;
    width: 5rem;
    height: 5rem;
    flex: 0 0 5rem;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(196, 154, 74, 0.5);
    border-radius: 1.1rem;
    color: var(--color-text, #f4ecd8);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 700;
}

.cafechrono-monogram {
    background: linear-gradient(145deg, #8a5838, #4c2e20);
}

.reva-monogram {
    background: linear-gradient(145deg, #6f8d50, #30442b);
}

.hybrid-project-card {
    padding: clamp(1.15rem, 3vw, 1.8rem);
    border: 1px solid rgba(196, 154, 74, 0.36);
    border-radius: var(--radius-lg, 1.25rem);
    background:
        linear-gradient(135deg, rgba(94, 127, 69, 0.14), transparent 44%),
        linear-gradient(155deg, rgba(45, 54, 40, 0.97), rgba(17, 22, 16, 0.99));
    box-shadow: var(--shadow-sm, 0 0.35rem 1.1rem rgba(0, 0, 0, 0.24));
}

.section .hybrid-project-card > p,
.section .hybrid-project-card li {
    color: var(--color-parchment, #d9c79f);
}

.hybrid-features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin: 1.25rem 0;
}

.hybrid-features-grid > div {
    padding: 1rem;
    border: 1px solid rgba(244, 236, 216, 0.1);
    border-radius: var(--radius-md, 0.8rem);
    background: rgba(9, 13, 9, 0.25);
}

.hybrid-features-grid h4 {
    margin-top: 0;
}

@media (max-width: 700px) {
    .hybrid-features-grid {
        grid-template-columns: 1fr;
    }
}

/* Ancrage local à Gibret et remise landaise */
.local-offer-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    margin: clamp(1rem, 2vw, 1.5rem) 0;
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid rgba(196, 154, 74, 0.48);
    border-radius: var(--radius-lg, 1.25rem);
    background:
        linear-gradient(115deg, rgba(94, 127, 69, 0.28), transparent 48%),
        linear-gradient(155deg, rgba(40, 48, 36, 0.98), rgba(19, 24, 18, 0.99));
    box-shadow: var(--shadow-sm, 0 0.35rem 1.1rem rgba(0, 0, 0, 0.24));
}

.local-offer-place {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-parchment, #d9c79f);
    font-size: 0.9rem;
    font-weight: 700;
}

.local-offer-dot {
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--color-brass-light, #e0bc6a);
    border-radius: 50%;
    background: var(--color-moss, #5e7f45);
    box-shadow: 0 0 0 4px rgba(196, 154, 74, 0.1);
}

.local-offer-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    align-items: baseline;
}

.local-offer-copy strong {
    color: var(--color-brass-light, #e0bc6a);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 600;
}

.local-offer-copy span {
    color: var(--color-text, #f4ecd8);
}

.local-offer-link {
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(224, 188, 106, 0.52);
    border-radius: var(--radius-md, 0.8rem);
    color: var(--color-brass-light, #e0bc6a);
    font-size: 0.84rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
}

.local-offer-link:hover {
    background: rgba(196, 154, 74, 0.12);
    border-color: var(--color-brass-light, #e0bc6a);
}

.landes-discount {
    display: flex;
    gap: 1rem;
    align-items: center;
    max-width: 850px;
    margin: 1.4rem auto;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(196, 154, 74, 0.42);
    border-radius: var(--radius-md, 0.8rem);
    background: rgba(94, 127, 69, 0.13);
    text-align: left;
}

.landes-discount-value {
    flex: 0 0 auto;
    color: var(--color-brass-light, #e0bc6a);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 700;
}

.landes-discount strong {
    color: var(--color-text, #f4ecd8);
}

.section .landes-discount p {
    margin: 0.3rem 0 0;
    color: var(--color-parchment, #d9c79f);
    font-size: 0.94rem;
}

.footer-location {
    margin-top: 0.65rem;
    color: var(--color-brass-light, #e0bc6a);
    font-weight: 700;
}

@media (max-width: 760px) {
    .local-offer-banner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .local-offer-place,
    .local-offer-copy {
        justify-content: center;
    }

    .landes-discount {
        align-items: flex-start;
        flex-direction: column;
    }
}