:root {
    --beige: #bfb998;
    --beige-clair: #dfdcc3;
    --jaune: #f4cb2f;
    --jaune-clair: #f3ebaa;
    --gris-fonce: #414648;
    --blanc-casse: #fafaf4;
    --gris-median: #b1b5b6;
    --gris-clair: #d1d5d7;
    --fond: #f9f8f6;
    --blanc: #ffffff;
    --bleu: rgb(230, 244, 250);
    --bleu-fonce: #12a4d9;
}

html {
    scroll-behavior: smooth;
}

body {
    counter-reset: section;
    font-family: Arial, sans-serif;
    margin: 1rem;
    background-color: var(--fond);
    background-image: url('../images/CoupDePelle_bg.jpg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-attachment: fixed;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
}

section#par_annee {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: space-between;
}

details {
    flex: 1 1 30%;
    /*    flex: 1 1 calc(33.333% - 1rem); */
    /* 3 colonnes responsives */
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* summary::before {
  counter-increment: section; 
  content: "Section " counter(section) " : ";  
}*/

details[open] {
    background-color: var(--jaune-clair);
    border-color: var(--jaune);
}

summary {
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

details:first-of-type summary /*,
details:last-of-type summary */ {
    list-style: none;

    &::after {
        content: "(Cliquer pour voir les détails)";
        float: right;
        font-size: .5em;
        color: var(--gris-clair);
        text-decoration: 1px dotted var(--gris-clair);
        padding: 0 5px;
        margin-inline-start: 5px;
        display: inline;
    }

    [open] &::after {
        content: "(Fermer)";
        color: var(--gris-median);
    }
}

details>summary {
    list-style-type: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

details>summary::before {
    content: '➔';
    color: var(--jaune);
    font-weight: 600;
    padding-right: 1em;
}

details[open]>summary::before {
    content: '⏷';
    color: var(--jaune);
    font-weight: 600;
    padding-right: 1em;
}

details#Publicite {
    background-color: var(--bleu);
    border-color: var(--bleu-fonce);
}
details#Publicite > summary::before{
    content: "🌊";
}
details#Publicite[open]{
    content: "🌊";
}

details#Publicite > summary::after{
    content: "Publicité";
    text-align: right;
    float: right;
}

ul {
    padding-left: 1rem;
    margin: 0;
}

li {
    list-style-type: none;
    padding: 0.3rem 0;
    border-bottom: 1px dotted var(--gris-fonce);
}

.introduction {
    font-size: 1.5em;
}

.secteur:first-child::before {
    content: "Secteur: ";
    font-weight: 700;
}
.secteur_detail::before {
    content: "Information complémentaire: ";
    font-weight: 700;
}

.lieux {
    display: block;
}

.lieux:first-child::before {
    content: "Lieu(x): ";
    font-weight: 700;
}

.contenu::before {
    content: "Mots clés: ";
    font-weight: 700;
}

.contenu span::after {
    content: ", ";
}

.contenu span:last-child::after {
    content: " ";
}

.ecole:first-child::before {
    content: "École: ";
    font-weight: 700;
}

.client:first-child::before {
    content: "Client: ";
    font-weight: 700;
}

#Exemples_Missions>summary {
    font-size: 1.5em;
}

a.discret {
    color: var(--gris-fonce);
    text-decoration: 3px dotted var(--gris-fonce);
    float: right;
}

footer {
    color: var(--gris-median);
    font-size: 1em;
}

.mobile-only {
        display: none;
    }

/* Options de développement
@media (min-width: 390px) {
    body::before {
        content: "(min-width: 390px)";
        color: #000;
        background-color: #fff;
        width: 100%;
    }
}

@media (max-width: 390px) {
    body::before {
        content: "(max-width: 390px)";
        color: #000;
        background-color: #fff;
        width: 100%;
    }
}

@media (min-width: 391px) and (max-width: 767px) {
    body::before {
        content: "(min-width: 391px) and (max-width: 767px)";
        color: #000;
        background-color: #fff;
        width: 100%;
    }
}

@media (min-width: 768px) {
    body::before {
        content: "(min-width: 768px)";
        color: #000;
        background-color: #fff;
        width: 100%;
    }
}

@media (min-width: 992px) {
    body::before {
        content: "(min-width: 992px)";
        color: #000;
        background-color: #fff;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    body::before {
        content: "(min-width: 1200px)";
        color: #000;
        background-color: #fff;
        width: 100%;
    }
}
*/

@media (max-width: 900px) {
    details {
        flex: 1 1 calc(50% - 1rem);
        /* 2 colonnes en tablette */
    }
}

@media (max-width: 600px) {
    details {
        flex: 1 1 100%;
        /* 1 colonne sur mobile */
    }

    .hide-sm {
        display: none;
    }

    .mobile-only {
        display: block;
        background: var(--blanc);
        border: 1px solid var(--gris-clair);
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        width: 100%;
    }
}