/** Shopify CDN: Minification failed

Line 12:0 Unexpected "<"
Line 113:4 Unexpected "<"
Line 133:15 Expected ":"
Line 134:15 Unexpected "("
Line 135:23 Expected ":"
Line 137:23 Expected ":"
Line 140:4 Unexpected "<"

**/
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Noir</title>
    <style>
        body {
            font-family: 'Century Gothic', sans-serif;
            background-color: #222;
            color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .accordion {
            width: 80%;
            max-width: 600px;
            margin-top: 2.5rem;
            margin-bottom: 0;
            border-top: 0.1rem solid rgba(255, 255, 255, 0.08);
            border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
        }

        .accordion-item {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: #000;
            color: #000;
        }

        .accordion-header {
            font-size: 18px;
            padding: 10px;
            cursor: pointer;
            background-color: #333;
            border-bottom: 1px solid #ccc;
        }

        .accordion-content {
            display: none;
            padding: 10px;
            font-size: 16px;
          color: #000;
        }

        .accordion summary {
            display: flex;
            position: relative;
            line-height: 1;
            padding: 1.5rem 0;
        }

        .accordion .summary__title {
            display: flex;
            flex: 1;
        }

        .accordion .summary__title + .icon-caret {
            height: calc(var(--font-heading-scale) * 0.6rem);
        }

        .accordion + .accordion {
            margin-top: 0;
            border-top: none;
        }

        .accordion__title {
            display: inline-block;
            max-width: calc(100% - 6rem);
            min-height: 1.6rem;
            margin: 0;
            word-break: break-word;
        }

        .accordion .svg-wrapper {
            align-self: center;
            fill: rgb(255, 255, 255);
            height: calc(var(--font-heading-scale) * 2rem);
            margin-right: calc(var(--font-heading-scale) * 1rem);
            width: calc(var(--font-heading-scale) * 2rem);
        }

        .accordion details[open] > summary .icon-caret {
            transform: rotate(180deg);
        }

        .accordion__content {
            margin-bottom: 1.5rem;
            word-break: break-word;
            overflow-x: auto;
            padding: 0 0.6rem;
            color: #000;
            font-family: 'Century Gothic', sans-serif;
        }

        .accordion__content img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">Titre 1</div>
            <div class="accordion-content accordion__content">Contenu du premier élément.</div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">Titre 2</div>
            <div class="accordion-content accordion__content">Contenu du deuxième élément.</div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">Titre 3</div>
            <div class="accordion-content accordion__content">Contenu du troisième élément.</div>
        </div>
    </div>

    <script>
        function toggleAccordion(element) {
            let content = element.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        }
    </script>
</body>
</html>
