/*************************
 * CSS custom properties *
 *************************/
:root {
    /* Define color variables by what the colors look like. */

    /* --color-brand-yellow: #ffcc38; */
    --color-brand-yellow: #fbd538;
    --color-brand-blue: #3E5559;

    /* Full white. */
    --color-white: hsl(0, 0%, 100%);

    /* Full black. */
    --color-black: hsl(0, 0%, 0%);

    /* An almost black color. */
    --color-dark: hsl(0, 0%, 13%);

    /* A very bright color. */
    --color-light: var(--color-white);

    /* Measure */
    --measure: 65ch;

    /**
   * Modular scale.
   *
   * This scale is used to determine the dimensions of many
   * things across the layout (widths, paddings, etc.).
   */
    --ratio: 1.3;

    --s-7: calc(var(--s0) / pow(var(--ratio), 7));
    --s-6: calc(var(--s0) / pow(var(--ratio), 6));
    --s-5: calc(var(--s0) / pow(var(--ratio), 5));
    --s-4: calc(var(--s0) / pow(var(--ratio), 4));
    --s-3: calc(var(--s0) / pow(var(--ratio), 3));
    --s-2: calc(var(--s0) / pow(var(--ratio), 2));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s0) * pow(var(--ratio), 2));
    --s3: calc(var(--s0) * pow(var(--ratio), 3));
    --s4: calc(var(--s0) * pow(var(--ratio), 4));
    --s5: calc(var(--s0) * pow(var(--ratio), 5));
    --s6: calc(var(--s0) * pow(var(--ratio), 6));

    /* Line heights */
    --line-height: var(--ratio);
    --line-height-small: calc(0.8 * var(--ratio));

    /* Font stacks */
    --font-stack-based-on-geomanist: 'geomanist', Helvetica, Arial, sans-serif;
    --font-stack-based-on-wotfard: 'wotfard', Helvetica, Arial, sans-serif;
    --font-stack-based-on-silka-mono: 'silka-mono', Monaco, Courier New, monospace;

    --font-stack-headings: var(--font-stack-based-on-geomanist);
    --font-stack-text: var(--font-stack-based-on-wotfard);
    --font-stack-monospace: var(--font-stack-based-on-silka-mono);


    line-height: var(--line-height);
    font-size: calc(0.280vw + 1em);
    font-family: var(--font-stack-text);
    background-color: var(--color-light);
    color: var(--color-dark);


    --slant-size: 5.4vw;
}



/*************************
 * Font face definitions *
 *************************/

/* Geomanist */
@font-face {
    font-family: 'geomanist';
    src: url('./fonts/geomanist/geomanist--bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'geomanist';
    src: url('./fonts/geomanist/geomanist--bold-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

/* Wotfard */
@font-face {
    font-family: 'wotfard';
    src: url('./fonts/wotfard/wotfard--regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'wotfard';
    src: url('./fonts/wotfard/wotfard--regular-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'wotfard';
    src: url('./fonts/wotfard/wotfard--medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'wotfard';
    src: url('./fonts/wotfard/wotfard--medium-italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
}

/* Silka Mono */
@font-face {
    font-family: 'silka-mono';
    src: url('./fonts/silka-mono/silka-mono--bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}



/* Set correct settings so that browsers use custom fonts properly. */
h1,
h2,
h3 {
    font-family: var(--font-stack-headings);
}
em {
    font-style: italic;
}
strong {
    font-weight: 500;
}




/***************
 * Base styles *
 ***************/

/**
 * 1. Change how the box model is handled on the root element.
 * 2. Set the root font size to 10px, thus resulting in 1rem = 10px.
 *
 * The default font size of browsers is usually 16px. Using the
 * ‘target ÷ context’ formula, we get 10px = 0.625em. This
 * makes 1rem equals to 10px, thus greatly easing any
 * rem-based calculations later on.
 */
html {
    box-sizing: border-box;
    /* 1 */
    font-size: 0.625em;
    /* 2 */
}

/**
 * Make all elements from the DOM inherit from the parent box-sizing.
 * Since `*` has a specificity of 0, it doesn’t override the `html`
 * value making all elements inherit from the rule just above.
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*::before,
*::after {
    box-sizing: inherit;
    /* background-color: inherit; */
    font-family: inherit;
    color: inherit;
    overflow-wrap: break-word;
    margin: 0;
    padding: 0;
    border: 0 solid;
}


body {
    position: relative;
    margin-inline: auto;
    /* max-width: var(--measure); */
}

.menu-control {
    padding: 0.25em 0.5em;
    border: 2px solid currentColor;
    font-weight: 500;
}
.menu-control:link,
.menu-control:visited {
    color: var(--color-black);
}
.menu-control[href="#menu"] {
    position: absolute;
    top: var(--s0);
    right: var(--s0);
    z-index: 1;
}
.menu-control[href="#menu"] {
    position: absolute;
    top: var(--s0);
    right: var(--s0);
    z-index: 1;
}
.menu-control[href="#debut-de-la-page"] {
    /* position: absolute;
    top: var(--s0);
    right: var(--s0);
    z-index: 1; */
    display: inline-block;
    margin-top: var(--s0);
}

@media all and (min-width: 35em) {
    body {
        display: grid;
    }
    /* Move the site menu at the top of the page. */
    [role="navigation"] {
        grid-row: 1;
    }
    /*
        Hide the links that allow back and forth between
        the start of the page and the menu.
    */
    .menu-control[href] {
        display: none;
    }
}



.homepage-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 18vh; */
    padding-top: var(--s1);
    padding-bottom: var(--slant-size);
    background-color: var(--color-brand-yellow);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--slant-size)),
        0 100%
    );
}

.homepage-header .tagline {
    padding-top: var(--s0);
    padding-bottom: var(--s0);
    padding-inline: var(--s0);
    rotate: -3deg;
    transform-origin: center;
    font-size: calc(0.8vw + 1em);
    font-weight: 500;
    text-align: center;
    /* outline: 1px dotted black; */
}
.homepage-header .tagline .logo {
    display: block;
    margin-top: var(--s-5);
    margin-bottom: var(--s-5);
    font-size: 1.75em;
    line-height: var(--line-height);
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url('./img/logo-droit-sans-slogan.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}


.header {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    /* height: 18vh; */
    padding-top: var(--s1);
    padding-inline: var(--s0);
    padding-bottom: var(--slant-size);
    background-color: var(--color-brand-yellow);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--slant-size)),
        0 100%
    );
}
@media all and (min-width: 35em) {
    .header {
        justify-content: center;
    }
}

.homepage-header .site-name {
    font-size: 0;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.header h1.site-name {
    max-inline-size: 537px;
    height: calc(4vw + 3rem);
    aspect-ratio: 372 / 102;
    font-size: 0;
    color: transparent;
    background-image: url('./img/logo.svg');
    background-repeat: no-repeat;
    background-size: contain;
    /* background-color: rgba(0, 0, 0, .1); */
}



.menu {
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-brand-yellow);
    padding: 0 var(--s0) var(--s0);
    border-top: 4px solid currentColor;
}
.menu ul {
    list-style-type: none;
}
.menu li + li {
    border-top: 1px solid #000;
}
.menu li a:link,
.menu li a:visited {
    display: block;
    padding-block: var(--s0);
    font-weight: 500;
    color: var(--color-black);
}

@media all and (min-width: 35em) {
    .menu {
        width: auto;
        min-height: auto;
        padding-top: var(--s0);
        /* border-top: none; */
    }
    .menu ul {
        display: flex;
        flex-wrap: wrap;
        column-gap: 2rem;
        row-gap: 1rem;
        justify-content: flex-end;
    }
    .menu li + li {
        border-top: none;
    }
    .menu li a:link,
    .menu li a:visited {
        display: inline;
        padding-block: 0;
    }
}


.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-top: var(--s0);
    padding-bottom: var(--s0);
    padding-inline: var(--s0);
}
.content * {
    margin-block: 0;
}
.content * + * {
    margin-block-start: var(--s0);
}


blockquote > * {
    margin-left: var(--s1);
    font-style: italic;
}


.footer {
    padding-top: var(--slant-size);
    background-color: var(--color-brand-yellow);
    clip-path: polygon(
        0 var(--slant-size),
        100% 0,
        100% 100%,
        0 100%
    );
}

.footer > .contact {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-top: var(--s0);
    padding-inline: var(--s0);
}
.footer > .contact > * {
    margin-block: 0;
}
.footer > .contact > * + * {
    margin-block-start: var(--s0);
}


.footer > .legal-stuff {
    margin-top: var(--s0);
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
    padding-inline: var(--s0);
    max-inline-size: var(--measure);
    margin-inline: auto;
    border-top: 1px solid var(--color-black);
}
.footer > .legal-stuff p {
    font-size: 0.8em;
}


.contact .contact-details {
    display: grid;
    column-gap: var(--s-4);
    row-gap: var(--s0);
    grid-template-columns: min-content auto;
}


/* .content-inner {
    max-width: var(--measure);
} */


/* .menu {
  border-right: 1px solid #ccc;
} */


a:link,
a:visited {
    color: var(--color-brand-blue);
    text-decoration: none;
    transition: box-shadow .2s;
}

a:hover {
    color: var(--color-black);
    box-shadow: 0 4px currentColor;
    transition: box-shadow .1s;
    outline: none;
}
a:focus {
    color: var(--color-black);
    box-shadow: none;
    outline: 4px solid currentColor;
    outline-offset: 2px;
    transition: all 0s;
}

.content a:link {
    box-shadow: 0 2px currentColor;
}
.content a:hover {
    /* color: var(--color-black); */
    box-shadow: 0 4px currentColor;
    /* transition: box-shadow .1s; */
}
.content a:focus {
    box-shadow: none;
}



img {
    max-width: 100%;
}



.content ul {
    /* list-style-type: circle; */
    margin-left: var(--s1);
}

/* .content ul li {
    line-height: calc(var(--line-height) * 1.15);
} */



/* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */
details {
    padding-left: var(--s0);
    padding-bottom: var(--s-1);
    border-block-end: 1px solid var(--color-brand-blue);
}
details summary {
    /* padding: var(--s0); */
    position: relative;
    left: calc(-1 * var(--s0));
    /* background-color: #ddd; */
    cursor: pointer;
}
details summary:hover,
details summary:focus {
    font-weight: 500;
}

/* details summary > * {
    display: inline;
} */



.monospace-font {
    font-family: var(--font-stack-monospace);
    font-weight: bold;
}



.beneficiaries {
    position: relative;
    margin-block: var(--s2);
    padding: var(--s0);
    border: 2px solid var(--color-black);
    border-radius: var(--s-3);
    overflow: hidden;
}
.beneficiaries::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: var(--color-brand-yellow) url(./img/cog-pattern.svg) 0 0 repeat;
    background-size: 60px 60px;
    transform: rotate(-3deg);
}

.donations-counter {
    max-inline-size: 80%;
    margin-inline: auto;
    font-size: 1.5rem;
    text-align: center;
}
.donations-counter > span {
    font-size: 2rem;
    font-weight: bold;
}



.call-for-proposals {
    position: relative;
    margin-block: var(--s2);
    padding: var(--s0);
    border: 2px solid var(--color-black);
    font-size: 1.2rem;
    border-radius: var(--s-3);
    overflow: hidden;
}
.call-for-proposals::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: var(--color-brand-yellow) url(./img/cog-pattern.svg) 0 0 repeat;
    background-size: 60px 60px;
    transform: rotate(-3deg);
}

.next-call-date {
    font-size: 0.9rem;
}

.big-button {
    display: block;
    padding: var(--s0);
    color: var(--color-brand-yellow) !important;
    background-color: var(--color-brand-blue);
    border-radius: var(--s-3);
    text-align: center;
    text-decoration: none !important;
}
.big-button:hover,
.big-button:focus {
    background-color: var(--color-black);
}



.call-for-proposals-top-banner {
    padding: var(--s0);
    background-color: var(--color-black);
    color: var(--color-brand-yellow);
    text-align: center;
}
.call-for-proposals-top-banner a {
    color: var(--color-brand-yellow);
}



.is-homepage .intro {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}



.pictos {
    margin-top: var(--s3);
    margin-bottom: var(--s3);
}
.pictos span {
    color: var(--color-brand-blue);
    text-shadow: none;
    box-shadow: 0 2px currentColor;
    transition: box-shadow .2s;
}
@media all and (min-width: 35em) {
    .pictos span {
        font-size: .8em;
    }
}
.pictos .item:hover span {
    color: var(--color-brand-blue);
    box-shadow: 0 4px currentColor;
    transition: box-shadow .1s;
}
.pictos .item :is(img, div) {
    position: relative;
    top: 0;
    left: 0;
    transition: top .2s, left .2s, text-shadow .2s, filter .2s;
}
.pictos .item:hover :is(img, div) {
    top: -2px;
    left: -2px;
    text-shadow:
        1px 1px 0 var(--color-brand-yellow),
        3px 3px 0 var(--color-brand-yellow);
    transition: top .1s, left .1s, text-shadow .1s;
}
.pictos .item:hover img {
    filter:
        drop-shadow(1px 1px 0 var(--color-brand-yellow))
        drop-shadow(3px 3px 0 var(--color-brand-yellow));
    transition: top .1s, left .1s, filter .1s;
}
.pictos a:link,
.pictos a:visited {
    color: var(--color-black);
    box-shadow: none;
}
.pictos img {
    min-width: 5rem;
    max-width: 30%;
}
.pictos > .item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s0);
    align-items: center;
}
.pictos > .item:nth-of-type(odd) {
    justify-content: flex-start;
}
.pictos > .item:nth-of-type(even) {
    justify-content: flex-end;
}
@media all and (min-width: 35em) {
    .pictos > .item:nth-of-type(odd) {
        rotate: -3deg;
    }
    .pictos > .item:nth-of-type(even) {
        rotate: 3deg;
    }
    .pictos {
        font-size: 1.5rem;
    }
}
.pictos > .item:nth-of-type(odd) > :first-child,
.pictos > .item:nth-of-type(even) > :last-child {
    margin-top: 0;
    flex-grow: 1;
}
.pictos > .item:nth-of-type(odd) > :last-child,
.pictos > .item:nth-of-type(even) > :first-child {
    margin-top: 0;
    flex-basis: 0;
    flex-grow: 999;
    min-width: 50%;
    /* max-width: 80%; */
}
.pictos em {
    font-style: normal;
    font-weight: 500;
}



.content hr {
    width: 50%;
    margin-inline: auto;
    border: 2px solid var(--color-black);
    margin-block: var(--s0);
}



strong.highlight {
    background-color: var(--color-brand-yellow);
    box-shadow: 0 0 0 2px var(--color-brand-yellow);
    box-decoration-break: clone;
}
.is-homepage strong.highlight {
    position: relative;
    background-color: transparent;
    box-shadow: none;
}
.is-homepage strong.highlight::after {
    position: absolute;
    top: 3px;
    left: 0;
    z-index: -1;
    content: '';
    width: 100%;
    height: 1em;
    background-color: var(--color-brand-yellow);
    box-shadow: 0 0 0 4px var(--color-brand-yellow);
    rotate: -1deg;
}

/* strong.highlight {
    position: relative;
    height: 1em;
    background-color: var(--color-brand-yellow);
    /* box-shadow: 0 0 0 4px var(--color-brand-yellow); */
    outline: 4px solid var(--color-brand-yellow);
    clip-path: polygon(
        -20% 10%,
        120% -20%,
        120% 90%,
        -20% 120%
    );
} */