/* Généré depuis resources/css/perles.css par « php artisan vitrine:compiler » — ne pas modifier ici. */
:root {
    --p-toile: #f2ece4; 
    --p-toile-froid: #eceaf4; 
    --p-cerne: #1b1715; 
    --p-noir: #0f0d0c; 
    --p-ivoire: #ead9c2;
    --p-ivoire-clair: #f1e8d9;
    --p-ivoire-ombre: #d8ba95;
    --p-rouge: #4f0203;
    --p-rouge-clair: #7a0206;
    --p-rouge-ombre: #350202;
    --p-marine: #172253; 
    --p-ciel: #51c4f4;
    --p-ciel-clair: #7fd5f7;
    --p-azur: #1877a8;
    --p-or: #a16428;
    --p-or-clair: #b4783a;
    --p-terre: #301b15;
    --p-rose: #d9a891;
    --p-chair: #d9bd8f;
    --p-sable: #ebe5d3; 
    --p-sable-fil: #d0c5a8;
    --p-cordon: #c9bb9b; 
    --p-nacre: #d8d2ce; 
    --p-nacre-ombre: #bcb2a8;
    --p-bouteille: #1c301a; 
    --p-bouteille-fil: #0f1a0e;
    --p-emeraude: #296336;
    --p-emeraude-clair: #337647;
    --p-feuille-marine: #202131; 
    --p-jaune: #e8d737; 
    --p-cobalt: #024e81; 
    --p-cobalt-nuit: #012844;
    --p-cobalt-clair: #1f709b;
    --p-safran: #d4a504; 
    --p-safran-ombre: #8a6a02;
    --p-orange: #ae4805; 
    --p-rose-echarpe: #dca6aa;
    --p-flamme: #8e191a; 
    --p-pas: 9px;
}
.perles-rocaille {
    --p-perle: var(--p-ivoire);
    --p-fil: #cbb69c;
    --p-trou: rgba(0, 0, 0, 0.3);
    --p-reflet: rgba(255, 255, 255, 0.55);
    --p-arete: rgba(0, 0, 0, 0.3);
    --_h: calc(var(--p-pas) * 1.7320508);
    --_r: calc(var(--p-pas) * 0.48);
    --_lx: calc(50% - var(--p-pas) * 0.15);
    --_ly: calc(50% - var(--p-pas) * 0.16);
    --_lr: calc(var(--p-pas) * 0.2);
    background-color: var(--p-fil);
    background-image:
        radial-gradient(circle var(--_lr) at var(--_lx) var(--_ly), var(--p-reflet) 0 30%, transparent 100%),
        radial-gradient(
            circle var(--_r) at 50% 50%,
            var(--p-trou) 0 20%,
            var(--p-perle) 32% 76%,
            var(--p-arete) 94%,
            transparent 100%
        ),
            radial-gradient(circle var(--_lr) at var(--_lx) var(--_ly), var(--p-reflet) 0 30%, transparent 100%),
        radial-gradient(
            circle var(--_r) at 50% 50%,
            var(--p-trou) 0 20%,
            var(--p-perle) 32% 76%,
            var(--p-arete) 94%,
            transparent 100%
        );
    background-size: var(--p-pas) var(--_h);
    background-position:
        0 0,
        0 0,
        calc(var(--p-pas) / 2) calc(var(--_h) / 2),
        calc(var(--p-pas) / 2) calc(var(--_h) / 2);
    background-repeat: repeat;
}
.perles-rocaille--ivoire {
    --p-perle: var(--p-ivoire);
    --p-fil: #cbb69c;
}
.perles-rocaille--rouge {
    --p-perle: var(--p-rouge);
    --p-fil: #2e0202;
    --p-reflet: rgba(255, 176, 156, 0.42);
}
.perles-rocaille--ciel {
    --p-perle: var(--p-ciel);
    --p-fil: #2e9dcd;
}
.perles-rocaille--or {
    --p-perle: var(--p-or);
    --p-fil: #5e3a17;
}
.perles-rocaille--marine {
    --p-perle: var(--p-marine);
    --p-fil: #0a0f26;
    --p-reflet: rgba(190, 205, 255, 0.4);
}
.perles-rocaille--noir {
    --p-perle: #23201e;
    --p-fil: var(--p-noir);
    --p-reflet: rgba(255, 255, 255, 0.26);
}
.perles-rocaille--sable {
    --p-perle: #f0ead9;
    --p-fil: #ddd4bd;
    --p-trou: rgba(0, 0, 0, 0.16);
    --p-arete: rgba(0, 0, 0, 0.18);
    --p-reflet: rgba(255, 255, 255, 0.65);
}
.perles-rocaille--nacre {
    --p-perle: #ddd7d2;
    --p-fil: #c9c0b7;
    --p-trou: rgba(0, 0, 0, 0.14);
    --p-arete: rgba(0, 0, 0, 0.16);
    --p-reflet: rgba(255, 255, 255, 0.75);
}
.perles-rocaille--bouteille {
    --p-perle: var(--p-bouteille);
    --p-fil: var(--p-bouteille-fil);
    --p-reflet: rgba(220, 255, 210, 0.3);
}
.perles-rocaille--cobalt {
    --p-perle: var(--p-cobalt);
    --p-fil: var(--p-cobalt-nuit);
    --p-reflet: rgba(160, 215, 255, 0.4);
}
.perles-rocaille--safran {
    --p-perle: var(--p-safran);
    --p-fil: var(--p-safran-ombre);
    --p-reflet: rgba(255, 240, 180, 0.55);
}
.perles-rocaille--fin {
    --p-pas: 6px;
}
.perles-rocaille--macro {
    --p-pas: 22px;
}
.perles-voile {
    --p-voile-opacite: 0.14;
    --_h: calc(var(--p-pas) * 1.7320508);
    --_r: calc(var(--p-pas) * 0.48);
    position: relative;
    isolation: isolate;
}
.perles-voile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--p-voile-opacite);
    background-image:
        radial-gradient(
            circle var(--_r) at 50% 50%,
            rgba(0, 0, 0, 0.5) 0 20%,
            currentColor 32% 76%,
            rgba(0, 0, 0, 0.4) 94%,
            transparent 100%
        ),
        radial-gradient(
            circle var(--_r) at 50% 50%,
            rgba(0, 0, 0, 0.5) 0 20%,
            currentColor 32% 76%,
            rgba(0, 0, 0, 0.4) 94%,
            transparent 100%
        );
    background-size: var(--p-pas) var(--_h);
    background-position:
        0 0,
        calc(var(--p-pas) / 2) calc(var(--_h) / 2);
}
.perles-semis {
    --p-semis-src: url("../assets/patterns/perles-semis.svg");
    --p-semis-taille: 128px;
    --p-semis-opacite: 1;
    position: relative;
    isolation: isolate;
}
.perles-semis::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--p-semis-opacite);
    background-image: var(--p-semis-src);
    background-size: var(--p-semis-taille) var(--p-semis-taille);
    background-repeat: repeat;
}
.perles-semis--losange {
    --p-semis-src: url("../assets/patterns/perles-semis-losange.svg");
}
.perles-vaguelettes {
    --p-vague-src: url("../assets/patterns/perles-vaguelettes.svg");
    --p-vague-taille: 140px;
    --p-vague-opacite: 1;
    position: relative;
    isolation: isolate;
}
.perles-vaguelettes::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--p-vague-opacite);
    background-image: var(--p-vague-src);
    background-size: var(--p-vague-taille) var(--p-vague-taille);
    background-repeat: repeat;
}
.perles-sentiers {
    --p-sentiers-taille: 240px;
    --p-sentiers-opacite: 1;
    position: relative;
    isolation: isolate;
}
.perles-sentiers::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--p-sentiers-opacite);
    background-image: url("../assets/patterns/perles-sentiers.svg");
    background-size: var(--p-sentiers-taille) var(--p-sentiers-taille);
    background-repeat: repeat;
}
.perles-hachures {
    --p-hach-taille: 96px;
    background-color: var(--p-safran-ombre);
    background-image: url("../assets/patterns/perles-hachures-safran.svg");
    background-size: var(--p-hach-taille) var(--p-hach-taille);
    background-repeat: repeat;
}
.perles-hachures--cobalt {
    background-color: var(--p-cobalt-nuit);
    background-image: url("../assets/patterns/perles-hachures-cobalt.svg");
}
.perles-hachures--nacre {
    background-color: #aca29a;
    background-image: url("../assets/patterns/perles-hachures-nacre.svg");
}
.perles-crible {
    --p-crible-taille: 120px;
    background-color: var(--p-cobalt-nuit);
    background-image: url("../assets/patterns/perles-crible-cobalt.svg");
    background-size: var(--p-crible-taille) var(--p-crible-taille);
    background-repeat: repeat;
}
.perles-lisiere {
    position: relative;
}
.perles-lisiere::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 92px;
    pointer-events: none;
    background-image: url("../assets/patterns/perles-lisiere.svg");
    background-size: 280px 92px;
    background-repeat: repeat-x;
    background-position: top;
}
.perles-lisiere--bas::before {
    top: auto;
    bottom: 0;
    transform: scaleY(-1);
}
.perles-courbes {
    --p-courbes-src: url("../assets/patterns/perles-courbes.svg");
    --p-courbes-taille: 120px;
    background-color: var(--p-rouge-ombre);
    background-image: var(--p-courbes-src);
    background-size: var(--p-courbes-taille) var(--p-courbes-taille);
    background-repeat: repeat;
}
.perles-courbes--ivoire {
    --p-courbes-src: url("../assets/patterns/perles-courbes-ivoire.svg");
    background-color: #b9a184;
}
.perles-courbes-masque {
    --p-courbes-src: url("../assets/patterns/perles-courbes.svg");
    --p-courbes-taille: 120px;
    background-color: currentColor;
    -webkit-mask: var(--p-courbes-src) repeat 0 0 / var(--p-courbes-taille) var(--p-courbes-taille);
    mask: var(--p-courbes-src) repeat 0 0 / var(--p-courbes-taille) var(--p-courbes-taille);
}
.perles-filet {
    --p-filet-perle: var(--p-cerne);
    --p-filet-pas: 9px;
    height: var(--p-filet-pas);
    border: 0;
    margin: 0;
    background-color: transparent;
    background-image:
        radial-gradient(
            circle calc(var(--p-filet-pas) * 0.16) at calc(50% - var(--p-filet-pas) * 0.15)
                calc(50% - var(--p-filet-pas) * 0.16),
            rgba(255, 255, 255, 0.5) 0 35%,
            transparent 100%
        ),
        radial-gradient(
            circle calc(var(--p-filet-pas) * 0.5) at 50% 50%,
            rgba(0, 0, 0, 0.45) 0 19%,
            var(--p-filet-perle) 31% 78%,
            rgba(0, 0, 0, 0.38) 95%,
            transparent 100%
        );
    background-size: var(--p-filet-pas) var(--p-filet-pas);
    background-repeat: repeat-x;
    background-position: center;
}
.perles-filet--ivoire {
    --p-filet-perle: var(--p-ivoire);
}
.perles-filet--rouge {
    --p-filet-perle: var(--p-rouge-clair);
}
.perles-filet--or {
    --p-filet-perle: var(--p-or);
}
.perles-filet--marine {
    --p-filet-perle: var(--p-marine);
}
.perles-filet--fondu {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.perles-cerne {
    --p-cerne-perle: var(--p-cerne);
    --p-cerne-pas: 6.5px;
    position: relative;
}
.perles-cerne::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: calc(var(--p-cerne-pas) * 0.5);
    background-image:
        radial-gradient(
            circle calc(var(--p-cerne-pas) * 0.15) at calc(50% - var(--p-cerne-pas) * 0.15)
                calc(50% - var(--p-cerne-pas) * 0.16),
            rgba(255, 255, 255, 0.45) 0 35%,
            transparent 100%
        ),
        radial-gradient(
            circle calc(var(--p-cerne-pas) * 0.5) at 50% 50%,
            rgba(0, 0, 0, 0.5) 0 19%,
            var(--p-cerne-perle) 31% 78%,
            rgba(0, 0, 0, 0.45) 95%,
            transparent 100%
        );
    background-size: var(--p-cerne-pas) var(--p-cerne-pas);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.perles-cerne--rouge {
    --p-cerne-perle: var(--p-rouge-clair);
}
.perles-cerne--or {
    --p-cerne-perle: var(--p-or);
}
.perles-carte {
    background: var(--p-toile);
    padding: 14px;
    border-radius: 2px;
    box-shadow:
        0 1px 2px rgba(15, 13, 12, 0.06),
        0 8px 24px -12px rgba(15, 13, 12, 0.28);
    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease;
}
.perles-carte:hover,
.perles-carte:focus-within {
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgba(15, 13, 12, 0.08),
        0 18px 40px -16px rgba(15, 13, 12, 0.4);
}
.perles-carte img {
    display: block;
    width: 100%;
    height: auto;
}
.perles-carte__filet {
    height: 7px;
    margin-top: 12px;
    opacity: 0;
    transform: scaleX(0.7);
    transform-origin: left center;
    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    background-image: radial-gradient(
        circle 3.5px at 50% 50%,
        rgba(0, 0, 0, 0.45) 0 19%,
        var(--p-rouge-clair) 31% 78%,
        rgba(0, 0, 0, 0.38) 95%,
        transparent 100%
    );
    background-size: 7px 7px;
    background-repeat: repeat-x;
}
.perles-carte:hover .perles-carte__filet,
.perles-carte:focus-within .perles-carte__filet {
    opacity: 1;
    transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
    .perles-carte,
    .perles-carte__filet {
        transition: none;
    }
    .perles-carte:hover,
    .perles-carte:focus-within {
        transform: none;
    }
    .perles-carte__filet {
        transform: none;
    }
}
@media (prefers-reduced-transparency: reduce) {
    .perles-voile {
        --p-voile-opacite: 0.07;
    }
}
@media print {
    .perles-rocaille,
    .perles-courbes,
    .perles-hachures,
    .perles-crible,
    .perles-filet {
        background-image: none;
    }
    .perles-voile::before,
    .perles-semis::before,
    .perles-vaguelettes::before,
    .perles-sentiers::before,
    .perles-lisiere::before,
    .perles-cerne::after {
        display: none;
    }
}