/* MelMoMa Custom Theme - Overrides Bootstrap colors */

:root {
    /* Couleurs MelMoMa */
    --melmoma-gold: #c9a227;
    --melmoma-gold-light: #d4b545;
    --melmoma-gold-dark: #a8871e;
    --melmoma-green-dark: #1a2f23;
    --melmoma-green-darker: #0f1c15;
    --melmoma-green-light: #2a4a38;

    /* Override Bootstrap variables */
    --bs-primary: #c9a227;
    --bs-primary-rgb: 201, 162, 39;
    --bs-secondary: #2a4a38;
    --bs-secondary-rgb: 42, 74, 56;
    --bs-dark: #1a2f23;
    --bs-dark-rgb: 26, 47, 35;
}

/* Primary color overrides */
.text-primary {
    color: var(--melmoma-gold) !important;
}

.bg-primary {
    background-color: var(--melmoma-gold) !important;
}

.btn-primary {
    background-color: var(--melmoma-gold) !important;
    border-color: var(--melmoma-gold) !important;
    color: var(--melmoma-green-dark) !important;
}

/* Les ombres des boutons (repos, survol, appui) sont dans « Finitions premium », en fin de
   fichier : le halo or sans décalage qui était forcé ici les empêchait de s'appliquer. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--melmoma-gold-light) !important;
    border-color: var(--melmoma-gold-light) !important;
    color: var(--melmoma-green-dark) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--melmoma-gold-dark) !important;
    border-color: var(--melmoma-gold-dark) !important;
    color: var(--melmoma-green-dark) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--melmoma-gold) !important;
    border-color: var(--melmoma-gold) !important;
    color: var(--melmoma-green-dark) !important;
    opacity: 0.65;
}

/* --mm-or-texte : l'or du texte et du contour, qui passe au doré clair sur les fonds verts
   (voir « Finitions premium ») ; l'or plein y tombait à 4,1 : 1. */
.btn-outline-primary {
    color: var(--mm-or-texte, var(--melmoma-gold)) !important;
    border-color: var(--mm-or-texte, var(--melmoma-gold)) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    background-color: var(--melmoma-gold) !important;
    border-color: var(--melmoma-gold) !important;
    color: var(--melmoma-green-dark) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:first-child:active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--melmoma-gold-dark) !important;
    border-color: var(--melmoma-gold-dark) !important;
    color: var(--melmoma-green-dark) !important;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--melmoma-gold) !important;
    border-color: var(--melmoma-gold) !important;
    background-color: transparent !important;
    opacity: 0.65;
}

/* Secondary color overrides */
.bg-secondary {
    background-color: var(--melmoma-green-light) !important;
}

/* Dark color overrides */
.bg-dark {
    background-color: var(--melmoma-green-dark) !important;
}

.navbar-dark {
    background-color: var(--melmoma-green-dark);
}

/* Spinner */
#spinner {
    background-color: var(--melmoma-green-dark) !important;
}

.spinner-grow.text-primary {
    color: var(--melmoma-gold) !important;
}

/* Navbar brand */
.navbar-brand h2 {
    color: var(--melmoma-gold) !important;
}

/* Navigation links */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--melmoma-gold) !important;
}

/* Title decorative lines */
.title .title-left h5::after,
.title .title-center h5::before,
.title .title-center h5::after,
.title .title-right h5::before {
    border-bottom-color: var(--melmoma-gold);
}

.title .title-left h1,
.title .title-center h1,
.title .title-right h1 {
    border-bottom-color: var(--melmoma-gold);
}

/* Service items gradient */
.service-item.service-item-left {
    background: linear-gradient(to right, var(--melmoma-green-light), var(--melmoma-green-dark));
}

.service-item.service-item-right {
    background: linear-gradient(to left, var(--melmoma-green-light), var(--melmoma-green-dark));
}

@media (max-width: 767.98px) {
    .service-item.service-item-left,
    .service-item.service-item-right {
        background: linear-gradient(to bottom, var(--melmoma-green-light), var(--melmoma-green-dark));
    }
}

/* Testimonial carousel */
.testimonial-carousel .owl-dots .owl-dot {
    background: var(--melmoma-green-dark);
}

/* Form controls */
.form-control,
.form-select {
    border: 1px solid rgba(201, 162, 39, 0.3) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--melmoma-gold) !important;
    box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.25);
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(201, 162, 39, 0.5) !important;
}

/* Form floating labels - better visibility */
.form-floating > .form-control,
.form-floating > .form-select {
    border: 1px solid rgba(201, 162, 39, 0.3) !important;
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--melmoma-gold) !important;
}

/* Back to top button */
.back-to-top {
    color: var(--melmoma-gold);
    border-color: var(--melmoma-gold);
}

.back-to-top:hover {
    background-color: var(--melmoma-gold);
    color: var(--melmoma-green-dark);
}

/* Links */
a.border-bottom {
    color: var(--melmoma-gold);
    border-bottom-color: var(--melmoma-gold) !important;
}

a.border-bottom:hover {
    color: var(--melmoma-gold-light);
}

/* List group items */
.list-group-item.bg-dark {
    background-color: var(--melmoma-green-dark) !important;
}

/* Dropdown menu */
.dropdown-menu {
    background-color: var(--melmoma-green-dark);
    border-color: var(--melmoma-green-light);
}

.dropdown-item {
    color: #fff;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--melmoma-green-light);
    color: var(--melmoma-gold);
}

/* Footer */
.footer {
    background-color: var(--melmoma-green-darker);
}

/* Carousel caption overlay */
.carousel-caption {
    background: rgba(26, 47, 35, 0.85);
}

/* Team/Portfolio item hover */
.team-item .team-body .team-before,
.team-item .team-body .team-after {
    background: rgba(26, 47, 35, 0.9);
}

.team-item .team-name {
    background: rgba(26, 47, 35, 0.9);
}

/* Page header */
.page-header {
    background: linear-gradient(rgba(26, 47, 35, 0.85), rgba(26, 47, 35, 0.85)), url(../img/carousel-1.jpg) top center no-repeat;
    background-size: cover;
}

/* Social buttons */
.btn-lg-square.btn-outline-primary {
    color: var(--melmoma-gold);
    border-color: var(--melmoma-gold);
}

.btn-lg-square.btn-outline-primary:hover {
    background-color: var(--melmoma-gold);
    color: var(--melmoma-green-dark);
}

/* MelMoMa Logo styling */
.melmoma-logo {
    height: 50px;
    width: auto;
    margin-right: 10px;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

/* Portfolio card styling (replacing team stats) */
.portfolio-item .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 47, 35, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-item .portfolio-overlay h5 {
    color: var(--melmoma-gold);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.portfolio-item .portfolio-overlay span {
    color: #fff;
    font-size: 14px;
}

/* ============================================
   CORRECTION DES COULEURS RESIDUELLES
   ============================================ */

/* Liens généraux */
a {
    color: var(--melmoma-gold);
}

a:hover,
a:focus {
    color: var(--melmoma-gold-light);
}

/* Focus visible global - supprimer les couleurs Bootstrap par défaut */
*:focus-visible {
    outline-color: var(--melmoma-gold) !important;
}

/* Bouton close (fermer) */
.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.25) !important;
}

/* Checkbox et Radio buttons */
.form-check-input:checked {
    background-color: var(--melmoma-gold) !important;
    border-color: var(--melmoma-gold) !important;
}

.form-check-input:focus {
    border-color: var(--melmoma-gold) !important;
    box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.25) !important;
}

.form-check-input:active {
    filter: brightness(90%);
}

/* Form switch */
.form-switch .form-check-input:checked {
    background-color: var(--melmoma-gold) !important;
}

/* Range input */
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(201, 162, 39, 0.25) !important;
}

.form-range::-webkit-slider-thumb {
    background: var(--melmoma-gold) !important;
}

.form-range::-moz-range-thumb {
    background: var(--melmoma-gold) !important;
}

/* Pagination */
.page-link {
    color: var(--melmoma-gold) !important;
}

.page-link:hover,
.page-link:focus {
    color: var(--melmoma-gold-dark) !important;
    background-color: rgba(201, 162, 39, 0.1) !important;
    border-color: var(--melmoma-gold) !important;
}

.page-item.active .page-link {
    background-color: var(--melmoma-gold) !important;
    border-color: var(--melmoma-gold) !important;
    color: var(--melmoma-green-dark) !important;
}

.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.25) !important;
}

/* Alerts */
.alert-primary {
    color: var(--melmoma-green-dark) !important;
    background-color: rgba(201, 162, 39, 0.2) !important;
    border-color: var(--melmoma-gold) !important;
}

.alert-success {
    background-color: rgba(42, 74, 56, 0.3) !important;
    border-color: var(--melmoma-green-light) !important;
    color: #d4edda !important;
}

/* Progress bar */
.progress-bar {
    background-color: var(--melmoma-gold) !important;
}

/* Nav tabs et pills */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--melmoma-gold) !important;
    border-color: var(--melmoma-gold) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--melmoma-gold-light) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--melmoma-gold) !important;
    color: var(--melmoma-green-dark) !important;
}

/* Accordion */
.accordion-button:not(.collapsed) {
    color: var(--melmoma-gold) !important;
    background-color: rgba(201, 162, 39, 0.1) !important;
}

.accordion-button:focus {
    border-color: var(--melmoma-gold) !important;
    box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.25) !important;
}

/* List group */
.list-group-item.active {
    background-color: var(--melmoma-gold) !important;
    border-color: var(--melmoma-gold) !important;
    color: var(--melmoma-green-dark) !important;
}

/* Badge */
.badge.bg-primary {
    background-color: var(--melmoma-gold) !important;
    color: var(--melmoma-green-dark) !important;
}

/* Spinner */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--melmoma-gold) !important;
}

/* Tooltips */
.tooltip .tooltip-inner {
    background-color: var(--melmoma-green-dark) !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--melmoma-green-dark) !important;
}

/* Selection de texte */
::selection {
    background-color: var(--melmoma-gold);
    color: var(--melmoma-green-dark);
}

::-moz-selection {
    background-color: var(--melmoma-gold);
    color: var(--melmoma-green-dark);
}

/* Scrollbar personnalisée (navigateurs webkit) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--melmoma-green-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--melmoma-gold);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--melmoma-gold-light);
}

/* ===== Formulaires : champ piège anti-robots =====
   Hors écran plutôt que display:none : certains robots ignorent les champs masqués. */
.champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Audit impeccable du 11 octobre 2026 (docs/audit-impeccable-2026-10-11.md)
   ========================================================================== */

/* Textes lisibles sur les fonds verts et noirs : une teinte tirée du vert, pas un gris
   (5,7 : 1 sur le vert clair, 8,2 : 1 sur le vert sombre). L'or en petit corps sur le vert
   clair passe au doré clair (4,9 : 1). */
:root {
    --melmoma-texte: #b9c8bf;
    --melmoma-texte-doux: #aab8b0;
}
body { color: var(--melmoma-texte); }
.form-text, .text-muted, .form-label small { color: var(--melmoma-texte-doux) !important; }
.bg-secondary .text-primary, .form-section .form-section-title, .bg-secondary small.text-primary,
.service-item .text-primary {
    color: var(--melmoma-gold-light) !important;
}

/* Le focus clavier se voit partout (le thème d'origine le retirait du menu). */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, .navbar-toggler:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--melmoma-gold-light) !important;
    outline-offset: 3px;
}
::selection { background: var(--melmoma-gold); color: var(--melmoma-green-dark); }

/* Les sur-titres sont des paragraphes (un seul h1 par page) : même allure que l'ancien h5. */
.title .title-left .surtitre, .title .title-center .surtitre, .title .title-right .surtitre {
    position: relative; display: inline-block; margin-bottom: .5rem;
    font-family: "Josefin Sans", sans-serif; font-size: 18px; font-weight: 300; line-height: 1.2; color: #fff;
}
.title .title-left .surtitre::after, .title .title-center .surtitre::before,
.title .title-center .surtitre::after, .title .title-right .surtitre::before {
    position: absolute; content: ""; width: 500%; height: 0; top: 9px;
    border-bottom: 1px solid var(--melmoma-gold);
}
.title .title-left .surtitre::after, .title .title-center .surtitre::after { left: calc(100% + 15px); }
.title .title-right .surtitre::before, .title .title-center .surtitre::before { right: calc(100% + 15px); }
.title .title-left h2, .title .title-center h2, .title .title-right h2 { border-bottom: 1px solid var(--melmoma-gold); }
.navbar-brand .h2 { margin-bottom: 0; }
.portfolio-item .portfolio-overlay h3, .portfolio-item .portfolio-overlay h4 { color: #fff; }

/* Les grands paragraphes d'introduction respirent. */
p.fs-5, .lead { line-height: 1.6; }

/* Sur téléphone, le bouton « retour en haut » quitte le texte. */
@media (max-width: 576px) {
    .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* « Réduire les animations » : les éléments apparaissent d'emblée, le carrousel ne glisse plus.
   Les changements d'état (survol, focus) restent, sans délai. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .wow, .animated { animation: none !important; visibility: visible !important; opacity: 1 !important; }
    .carousel-item, .carousel-fade .carousel-item { transition: none !important; }
    .btn, .nav-link, .back-to-top { transition-duration: 0s !important; }
}

/* Champs de formulaire sur fond vert : saisie, étiquettes flottantes et exemples lisibles. */
.form-control, .form-select { color: var(--melmoma-texte); }
.form-control::placeholder { color: var(--melmoma-texte-doux); opacity: 1; }
.form-floating > label, .form-check-label { color: var(--melmoma-texte); }

/* ===== Commande : envoi des fichiers un par un (commander.js) ===== */
/* Le bilan « commande reçue, des fichiers manquent » : ni une réussite pleine ni une erreur.
   Texte crème sur fond or assombri (9 : 1 environ), liens en doré clair. */
.alert-warning {
    background-color: rgba(201, 162, 39, 0.14) !important;
    border-color: var(--melmoma-gold) !important;
    color: #f3ead0 !important;
}
.alert-warning a { color: var(--melmoma-gold-light); }
/* Un champ à corriger : le rouge de Bootstrap ne se lit pas sur le vert (2 : 1). */
.alerte-champ { margin-top: .25rem; font-size: .875em; color: #ffb4a6; }
.envoi-progression { max-width: 420px; margin-left: auto; margin-right: auto; }
.envoi-progression .progress { height: 6px; background-color: rgba(255, 255, 255, 0.12); }
.envoi-progression .progress-bar { transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) {
    .envoi-progression .progress-bar { transition: none; }
}

/* ==========================================================================
   Finitions premium — 29 octobre 2026
   Même site, mieux fini : contours d'un pixel éclairés par le haut, profondeur en couches,
   reflet sur l'arête haute, relief discret au survol des seuls éléments cliquables.
   Le métier vient de Magnific ; l'apparence reste celle de MelMoMa (or, verts, Josefin Sans,
   Work Sans, mêmes tailles et mêmes espacements). Aucune couleur hors de la palette : l'or,
   les verts et le blanc, en transparence. Les ombres prennent le vert le plus foncé.
   ========================================================================== */

:root {
    /* Contours d'un pixel */
    --mm-trait: rgba(255, 255, 255, 0.16);
    --mm-trait-or: rgba(201, 162, 39, 0.28);
    /* L'anneau d'une carte : la lumière tombe sur l'arête haute, un reflet or ferme le bas. */
    --mm-contour-lumiere: linear-gradient(180deg,
        rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.07) 28%,
        rgba(255, 255, 255, 0.03) 62%, rgba(201, 162, 39, 0.22) 100%);
    /* Le même anneau, réveillé à l'or (survol d'une carte cliquable). */
    --mm-contour-or: linear-gradient(180deg,
        rgba(212, 181, 69, 0.90) 0%, rgba(201, 162, 39, 0.40) 35%,
        rgba(201, 162, 39, 0.22) 70%, rgba(212, 181, 69, 0.60) 100%);
    /* Un filet horizontal qui s'éteint vers les bords (barre de navigation, pied de page). */
    --mm-filet-or: linear-gradient(90deg,
        rgba(201, 162, 39, 0) 0%, rgba(201, 162, 39, 0.45) 50%, rgba(201, 162, 39, 0) 100%);
    --mm-filet-clair: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.09) 25%,
        rgba(255, 255, 255, 0.09) 75%, rgba(255, 255, 255, 0) 100%);

    /* Reflets intérieurs et voiles */
    --mm-reflet: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --mm-reflet-or: inset 0 1px 0 rgba(255, 246, 214, 0.55), inset 0 -1px 0 rgba(15, 28, 21, 0.22);
    --mm-reflet-contour: inset 0 1px 0 rgba(255, 236, 170, 0.12);
    --mm-voile: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 40%);
    --mm-brillance: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
    --mm-fond-contour: linear-gradient(180deg, rgba(201, 162, 39, 0.07) 0%, rgba(201, 162, 39, 0.02) 100%);
    --mm-creux: inset 0 1px 2px rgba(15, 28, 21, 0.45);
    --mm-fond-champ: linear-gradient(rgba(15, 28, 21, 0.22), rgba(15, 28, 21, 0.22));

    /* Ombres en couches : une de contact, une courte, une de portée. Jamais lourdes. */
    --mm-ombre-repos: 0 1px 1px rgba(15, 28, 21, 0.35), 0 3px 6px -2px rgba(15, 28, 21, 0.40),
        0 14px 28px -14px rgba(15, 28, 21, 0.75);
    --mm-ombre-levee: 0 1px 1px rgba(15, 28, 21, 0.35), 0 6px 12px -4px rgba(15, 28, 21, 0.50),
        0 26px 44px -18px rgba(15, 28, 21, 0.90);
    /* Boutons : élévation neutre ; l'or reste dans le bouton et son contour, jamais en halo. */
    --mm-ombre-bouton: 0 1px 1px rgba(15, 28, 21, 0.45), 0 3px 6px -2px rgba(15, 28, 21, 0.45),
        0 8px 16px -8px rgba(15, 28, 21, 0.80);
    --mm-ombre-bouton-levee: 0 1px 1px rgba(15, 28, 21, 0.45), 0 5px 10px -3px rgba(15, 28, 21, 0.50),
        0 14px 24px -10px rgba(15, 28, 21, 0.90);
    --mm-ombre-appui: inset 0 1px 2px rgba(15, 28, 21, 0.35), 0 1px 1px rgba(15, 28, 21, 0.30);
    --mm-ombre-flottante: var(--mm-reflet), 0 2px 4px rgba(15, 28, 21, 0.45), 0 10px 22px -8px rgba(15, 28, 21, 0.85);

    /* Rayons : ceux du gabarit, rendus explicites (cartes et champs 10 px, boutons en pilule). */
    --mm-rayon-carte: 10px;

    /* Mouvement : court, une décélération franche, rien qui rebondisse. */
    --mm-courbe: cubic-bezier(0.22, 1, 0.36, 1);
    --mm-duree: 0.2s;
    --mm-duree-carte: 0.35s;
    --mm-levage-bouton: -1px;
    --mm-levage-carte: -3px;
    --mm-zoom-image: 1.04;
    --mm-pousse-fleche: 3px;

    /* L'or des textes et contours de boutons ; doré clair sur les fonds verts (ci-dessous). */
    --mm-or-texte: var(--melmoma-gold);
}

/* Sur le vert clair, l'or plein n'atteint que 4,1 : 1 ; le doré clair donne 4,9 : 1. */
.bg-secondary, .form-section, .service-item {
    --mm-or-texte: var(--melmoma-gold-light);
}

/* --- L'anneau d'un pixel ---------------------------------------------------------------
   Peint par un pseudo-élément dont le centre est retiré par un masque : il suit tous les
   rayons, même ceux, asymétriques, des bandeaux de services, et il accepte un dégradé
   (une bordure ne le peut pas sans perdre ses coins arrondis). */
.carte::before,
a > .carte::after,
.service-item::after,
body .form-section::before,
.team-item::before,
.team-item::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--mm-contour-lumiere);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* --- Cartes (services, processus, valeurs, contact, témoignages, équipe, commandes) -------- */
.carte {
    position: relative;
    background-image: var(--mm-voile);
    box-shadow: var(--mm-reflet), var(--mm-ombre-repos);
}

/* Carte qui est un lien (page 404) : elle se soulève et son anneau passe à l'or.
   Son petit texte héritait de l'or du lien (4,1 : 1) : doré clair. */
a > .carte {
    color: var(--melmoma-gold-light);
    transition: transform var(--mm-duree-carte) var(--mm-courbe),
        box-shadow var(--mm-duree-carte) var(--mm-courbe);
}
a > .carte::after {
    background: var(--mm-contour-or);
    opacity: 0;
    transition: opacity var(--mm-duree-carte) var(--mm-courbe);
}
a:is(:hover, :focus-visible) > .carte {
    box-shadow: var(--mm-reflet), var(--mm-ombre-levee);
}
a:is(:hover, :focus-visible) > .carte::after { opacity: 1; }
@media (hover: hover) {
    a:hover > .carte { transform: translateY(var(--mm-levage-carte)); }
}

/* Pastilles or des cartes (icônes, numéros d'étape) : un relief de pièce frappée. */
.rounded-circle.bg-primary {
    background-image: var(--mm-brillance);
    box-shadow: var(--mm-reflet-or), 0 4px 10px -4px rgba(15, 28, 21, 0.70);
}

/* Cartouche or posé sur une photo (« Fondateur et designer », page Équipe) : son titre
   héritait du blanc des titres (2,4 : 1). Sur l'or, le texte est vert foncé (charte). */
.bg-primary.text-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--melmoma-green-dark); }

/* --- Bandeaux de services ------------------------------------------------------------- */
.service-item {
    box-shadow: var(--mm-reflet), var(--mm-ombre-repos);
}
/* Un filet or, décollé de l'image ronde : la monture d'un médaillon. */
.service-item .service-img img {
    outline: 1px solid var(--mm-trait-or);
    outline-offset: 6px;
}

/* --- Réalisations (portfolio) ------------------------------------------------------------ */
.team-item {
    border-radius: var(--mm-rayon-carte);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--mm-ombre-repos);
    transition: transform var(--mm-duree-carte) var(--mm-courbe),
        box-shadow var(--mm-duree-carte) var(--mm-courbe);
}
.team-item::before,
.team-item::after { z-index: 2; }
.team-item::before {
    background: var(--mm-contour-or);
    opacity: 0;
    transition: opacity var(--mm-duree-carte) var(--mm-courbe);
}
.team-item .team-body img {
    transition: transform 0.6s var(--mm-courbe);
}
.team-item .team-name {
    box-shadow: inset 0 1px 0 var(--mm-trait-or);
}
.team-item .team-name > * {
    transition: color var(--mm-duree) var(--mm-courbe);
}
.team-item:is(:hover, :focus-within) { box-shadow: var(--mm-ombre-levee); }
.team-item:is(:hover, :focus-within)::before { opacity: 1; }
.team-item:is(:hover, :focus-within) .team-name > * { color: var(--melmoma-gold-light); }
@media (hover: hover) {
    .team-item:hover { transform: translateY(var(--mm-levage-carte)); }
    .team-item:hover .team-body img { transform: scale(var(--mm-zoom-image)); }
}
/* La carte rogne ce qui dépasse : le contour de focus des liens qu'elle contient passe dedans. */
.team-item a:focus-visible { outline-offset: -4px; }

/* --- Boutons ------------------------------------------------------------------------------
   Transitions ciblées et courtes (le gabarit animait tout en 0,5 s). */
.btn {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: var(--mm-duree);
    transition-timing-function: var(--mm-courbe);
}
/* Contours fins : un pixel au lieu de deux. Les boutons contour retrouvent ainsi la hauteur
   des boutons pleins posés à côté d'eux. `!important` : la classe utilitaire `.border-2` de
   Bootstrap l'impose. */
.btn.border-2 { border-width: 1px !important; }

/* Plein or : une brillance qui descend du haut, l'arête haute éclairée, une ombre neutre courte. */
.btn.btn-primary {
    background-image: var(--mm-brillance);
    box-shadow: var(--mm-reflet-or), var(--mm-ombre-bouton);
}
.btn.btn-primary:is(:hover, :focus) {
    box-shadow: var(--mm-reflet-or), var(--mm-ombre-bouton-levee);
}
.btn.btn-primary:is(:active, .active, :active:focus) {
    background-image: none;
    box-shadow: var(--mm-ombre-appui);
}

/* Contour or : un pixel, un fond d'or à peine teinté (aucun sur les fonds verts, où il
   ferait tomber le contraste du texte), l'arête haute éclairée. Au survol il se remplit d'or,
   comme avant, avec la même brillance que le bouton plein. */
.btn.btn-outline-primary {
    background-image: var(--mm-fond-contour);
    box-shadow: var(--mm-reflet-contour);
}
:is(.bg-secondary, .form-section, .service-item) .btn.btn-outline-primary { background-image: none; }
.btn.btn-outline-primary:is(:hover, :focus),
:is(.bg-secondary, .form-section, .service-item) .btn.btn-outline-primary:is(:hover, :focus) {
    background-image: var(--mm-brillance);
    box-shadow: var(--mm-reflet-or), var(--mm-ombre-bouton);
}
.btn.btn-outline-primary:is(:active, .active, :active:focus) {
    background-image: none;
    box-shadow: var(--mm-ombre-appui);
}

@media (hover: hover) {
    .btn.btn-primary:hover,
    .btn.btn-outline-primary:hover { transform: translateY(var(--mm-levage-bouton)); }
}
.btn:is(:disabled, .disabled) { box-shadow: none; transform: none; }

/* La flèche « En savoir plus → » avance d'un pas au survol. */
.btn .fa-arrow-right { transition: transform var(--mm-duree) var(--mm-courbe); }
.btn:is(:hover, :focus-visible) .fa-arrow-right { transform: translateX(var(--mm-pousse-fleche)); }

/* Ronds à icône (réseaux, retour en haut) : contour d'un pixel (règle .border-2 ci-dessus).
   Le retour en haut flotte au-dessus du texte : un fond vert sombre et une ombre portée le
   détachent de ce qu'il recouvre. */
.btn.back-to-top {
    background-image: linear-gradient(rgba(15, 28, 21, 0.86), rgba(15, 28, 21, 0.86));
    box-shadow: var(--mm-ombre-flottante);
}
.btn.back-to-top:is(:hover, :focus) {
    background-image: var(--mm-brillance);
    box-shadow: var(--mm-reflet-or), var(--mm-ombre-bouton-levee);
}

/* --- Barre de navigation ---------------------------------------------------------------- */
.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--mm-filet-clair);
    pointer-events: none;
}
/* Collée en haut au défilement (main.js), elle gagne un filet or qui s'éteint vers les bords. */
.navbar.position-fixed::after { background: var(--mm-filet-or); }
.navbar .navbar-nav .nav-link {
    transition: color var(--mm-duree) var(--mm-courbe);
}
.navbar-dark .navbar-toggler {
    border-color: var(--mm-trait);
    border-radius: var(--mm-rayon-carte);
    box-shadow: var(--mm-reflet);
    transition: border-color var(--mm-duree) var(--mm-courbe);
}
.navbar-dark .navbar-toggler:hover { border-color: var(--mm-trait-or); }

/* --- Pied de page ----------------------------------------------------------------------- */
.footer { position: relative; }
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--mm-filet-or);
    pointer-events: none;
}

/* --- Formulaires (contact, demande de projet, commande) --------------------------------------
   `body .form-section` : la feuille intégrée aux deux pages de commande passe après celle-ci
   et remet le fond à plat ; un cran de spécificité suffit, sans `!important`. */
body .form-section {
    position: relative;
    background-image: var(--mm-voile);
    box-shadow: var(--mm-reflet), var(--mm-ombre-repos);
}
.form-section-title {
    border-image: linear-gradient(90deg, rgba(201, 162, 39, 0.50), rgba(201, 162, 39, 0.06)) 1;
}

/* Champs : gravés dans leur bloc (un fond un peu plus sombre, une ombre intérieure en haut).
   Le texte y gagne du contraste. La liste déroulante garde sa flèche, redessinée en doré
   clair : celle de Bootstrap, gris foncé, ne se voyait pas sur le vert. */
.form-control,
.form-select {
    /* Icônes natives (calendrier, liste ouverte) dessinées pour un fond sombre. */
    color-scheme: dark;
}
.form-control {
    background-image: var(--mm-fond-champ);
    box-shadow: var(--mm-creux);
}
/* `select.form-control` : la liste du formulaire de contact, qui n'avait aucune flèche. */
.form-select,
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d4b545' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M3.5 6 8 10.5 12.5 6'/%3e%3c/svg%3e"),
        var(--mm-fond-champ);
    background-repeat: no-repeat, no-repeat;
    background-position: right 0.75rem center, 0 0;
    background-size: 16px 12px, 100% 100%;
    box-shadow: var(--mm-creux);
}
select.form-control,
.form-floating > select.form-control { padding-right: 2.25rem; }
/* Au focus : la bordure passe à l'or (règle du thème) et le contour clavier de l'audit
   s'ajoute ; pas de halo en plus. */
.form-control:focus,
.form-select:focus {
    box-shadow: var(--mm-creux);
}
/* Le bouton « Choisir un fichier » : Bootstrap le peint gris clair, il prend l'or (4,7 : 1). */
.form-control::file-selector-button,
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: rgba(201, 162, 39, 0.10);
    color: var(--melmoma-gold-light);
}
/* Cases et boutons radio : le blanc du navigateur cède à un creux vert cerclé d'or. */
.form-check-input:not(:checked) {
    background-color: rgba(15, 28, 21, 0.35);
    border-color: rgba(201, 162, 39, 0.55);
}

/* --- Témoignages : la photo du témoignage affiché reçoit une monture or. ------------------ */
.testimonial-carousel .owl-dots .owl-dot.active {
    outline: 1px solid rgba(201, 162, 39, 0.55);
    outline-offset: 3px;
}

/* --- Réduire les animations : plus de levage, de zoom ni de glissement ; les changements
   d'état (couleur, contour, ombre) restent, sans délai. Le fond du pied de page cesse de
   défiler. ------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --mm-levage-bouton: 0px;
        --mm-levage-carte: 0px;
        --mm-zoom-image: 1;
        --mm-pousse-fleche: 0px;
    }
    .team-item, .team-item::before, .team-item .team-body img, .team-item .team-name > *,
    a > .carte, a > .carte::after, .btn .fa-arrow-right,
    .navbar .navbar-nav .nav-link, .navbar-dark .navbar-toggler {
        transition: none;
    }
    .footer { animation: none; }
}

/* ==========================================================================
   Mobile — 31 octobre 2026
   Audit à 360, 390, 414 et 768 px de large et en paysage (844 × 390) : docs/audit-mobile-2026-10-31.md.
   Mêmes textes, même identité ; seules la place et les tailles changent sur petit écran.
   Le modèle : les bandeaux mobiles soignés (Magnific et ses pairs) — un titre sur deux lignes au
   plus, une phrase d'accroche au corps du texte courant, un seul bouton bien visible.
   ========================================================================== */

/* --- Le retour en haut n'apparaît qu'après 300 px de défilement (main.js pose `.visible`). -- */
.btn.back-to-top { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.btn.back-to-top.visible { opacity: 1; visibility: visible; }

/* --- Écrans tactiles, menu replié (téléphone, paysage compris, et tablette). --------------- */
@media (max-width: 991.98px) {
    /* Le menu ouvert offre aussi « Démarrer un projet » (il était caché). */
    .nav-cta { padding: 0 1.5rem 1.5rem; }
    .nav-cta .btn { display: block; width: 100%; padding-top: .75rem; padding-bottom: .75rem; }
    /* 44 px de haut au moins pour le doigt : bouton du menu, « En savoir plus », icônes du contact. */
    .navbar-dark .navbar-toggler { min-height: 44px; }
    .btn.px-4:not([class*="py-"]) { padding-top: .6rem; padding-bottom: .6rem; }
    .table td a[aria-label] {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-right: 0 !important;
    }
}

/* Les deux traits du bandeau d'accueil n'existent que sur téléphone (les flèches restent au-delà). */
#header-carousel .carousel-indicators { margin-bottom: .5rem; }
#header-carousel .carousel-indicators [data-bs-target] {
    width: 28px; height: 3px; margin: 0 6px;
    /* Bordures transparentes : la cible fait 43 px de haut pour le doigt, le trait en fait 3. */
    border-top-width: 20px; border-bottom-width: 20px;
    background-color: #fff; opacity: .45;
}
#header-carousel .carousel-indicators .active { background-color: var(--melmoma-gold); opacity: 1; }
@media (min-width: 768px) {
    #header-carousel .carousel-indicators { display: none; }
}

@media (max-width: 767.98px) {
    /* La barre : un logo un peu moins haut rend 10 px à l'écran. */
    .melmoma-logo { height: 42px; }
    .navbar-brand .h2 { font-size: 1.375rem; }

    /* --- Bandeau d'accueil ---------------------------------------------------------------- */
    /* La barre (66 px ici) recouvre le haut du bandeau : le texte part juste dessous. Les 100 px
       du thème, centrés en plus, poussaient le bouton de la 2e diapositive hors du bandeau. */
    #header-carousel .carousel-caption { padding: 5.25rem 20px 3.25rem; }
    /* `mx-5 px-5` laissait 198 px au titre sur un écran de 390 : un mot par ligne. */
    #header-carousel .title { margin: 0 0 1.25rem !important; padding: 0 !important; max-width: 100%; }
    #header-carousel .display-1 { font-size: clamp(2rem, 9.5vw, 2.625rem); line-height: 1.08; padding-bottom: .5rem; }
    #header-carousel .surtitre { font-size: 14px; }
    #header-carousel .surtitre::before, #header-carousel .surtitre::after { top: 7px; }
    #header-carousel .carousel-caption p.fs-5 {
        font-size: 1.0625rem !important; line-height: 1.55; max-width: 34ch; margin-bottom: 2rem !important;
    }
    /* Le retour à la ligne voulu sur grand écran coupe mal une phrase étroite : il s'efface. */
    #header-carousel .carousel-caption p.fs-5 br { display: none; }
    #header-carousel .carousel-caption .btn { padding: .875rem 2rem !important; }
    /* Les flèches prenaient 10 % de chaque côté sur toute la hauteur ; le doigt fait glisser. */
    #header-carousel .carousel-control-prev, #header-carousel .carousel-control-next { display: none; }

    /* --- En-tête des autres pages : 425 px pour un titre d'un mot, ramenés à 230 environ
       (dont les 66 px de la barre qui le recouvre). ------------------------------------------ */
    .page-header { padding-top: 6.5rem; padding-bottom: 3rem !important; }
    .page-header .container { padding-top: 0 !important; padding-bottom: 0 !important; }
    .page-header .display-4 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
    .page-header .breadcrumb { font-size: .875rem; }

    /* --- Titres des sections et bandes d'appel : un cran plus bas qu'au bureau. ------------- */
    .title .surtitre { font-size: 15px; }
    .title .surtitre::before, .title .surtitre::after { top: 8px; }
    .title h2.h1 { font-size: clamp(1.5rem, 6.4vw, 1.75rem); }
    h2.display-4 { font-size: clamp(1.625rem, 7.5vw, 2rem); }
    p.fs-5 { font-size: 1.0625rem !important; }
}
@media (max-width: 575.98px) {
    /* Deux boutons qui passent l'un sous l'autre s'alignent au lieu de garder le retrait prévu
       pour une même ligne. */
    .btn + .btn.ms-3 { margin-left: 0 !important; margin-top: .75rem; }
    /* Contact : l'adresse e-mail sortait de l'écran de 360 px. Elle se coupe avant l'arobase
       (`<wbr>` dans contact.html) ; les libellés de gauche restent sur une ligne. */
    .table td a { overflow-wrap: anywhere; }
    .table td:first-child { white-space: nowrap; }
}

/* --- Téléphone en paysage : le bandeau tient dans l'écran, barre comprise. ----------------- */
@media (orientation: landscape) and (max-height: 520px) {
    #header-carousel .carousel-item {
        position: relative; min-height: 320px; height: 100vh; height: 100svh;
    }
    #header-carousel .carousel-item img {
        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    }
    #header-carousel .carousel-caption { padding: 5.5rem 20px 1.5rem; }
    #header-carousel .title { margin-bottom: .75rem !important; }
    #header-carousel .display-1 { font-size: clamp(2rem, 6.5vw, 3rem); line-height: 1.08; }
    #header-carousel .carousel-caption p.fs-5 { font-size: 1rem !important; margin-bottom: 1rem !important; }
    #header-carousel .carousel-caption .btn { padding: .625rem 1.75rem !important; }
    .page-header { padding-top: 6.25rem; padding-bottom: 2rem !important; }
    .page-header .container { padding-top: 0 !important; padding-bottom: 0 !important; }
}