/*** Table of content ***/

/*

1. Reset
2. Variables
3. Utilities
3. Layout
3. Typography

*/

/*** 1. Reset ***/

/* Most of these styling are meant to bring standard elements to a common bottom
line regarding their styling. */

/* Modern-normalize should be added here. */

/* Otherwise, these are mostly taken from https://tailwindcss.com/docs/preflight. */

/* These settings may disrupt third-party embedded code, like Google Map. Simply
   adjust when required. */
*,
::after,
::before,
::backdrop,
::file-selector-button {
    border-width: 0;
    border-style: solid;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

/* Disabling list default styling can prevent some accessibility features.
   Therefore, "real" list of items should have 'role="list"' in their HTML code.
*/
menu,
ol,
ul {
    list-style: none;
}

/* */
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

/* 1rem = 10px */
html { font-size: 62.5%; }
body { font-size: 1.6em; }

/*** 2. Variables ***/

:root {
    --blanc: #fffafa;
    --bleu: #4494d1;
    --brun: #a76756;
    --jaune: #f2bf5c;
    --lilas: #bfc0df;
    --noir: #263238;
    --orange: #e66b5f;
    --rose: #e8627e;
    --vert: #d1db82;
    --violet: #492354;
    --base-background-color: var(--blanc);
    --base-page-width: 95vw;
    --margin-header: 1rem;
    --margin-main: 1rem;
    --margin-footer: 1rem;
}

/* Media queries break-points should be:

   - min-width: 640px  => small
   - min-width: 768px  => medium
   - min-width: 1024px => large
   - min-width: 1280px => x-large
   - min-width: 1536px => 2x-large

   We follow the "mobile-first" principle, so the default styling should work
   fine on screens that are less than 640px wide. Media queries are used to
   alter the styling on larger screens.

   For reference, the resolution of my desktop screen is 1680x1050.
*/

/*** 3. Layout ***/


/*** 3. Typography ***/

/* Styling regarding the size, color and spacing of textual elements. */

:root {
    --base-font-color: var(--noir);
    --base-font-family: ui-sans-serif,
                        system-ui,
                        -apple-system,
                        linkMacSystemFont,
                        Segoe UI,
                        Roboto,
                        Helvetica Neue,
                        Arial,
                        Noto Sans,
                        sans-serif,
                        Apple Color Emoji,
                        Segoe UI Emoji,
                        Segoe UI Symbol,
                        Noto Color Emoji;
    --base-font-size: 1.75rem;
    --base-font-weight: normal;
    --base-line-height: 1.5;
    --base-link-color: var(--bleu);
    --base-link-visited-color: var(--bleu);
    --spacing: 1.75rem /* Spacing between paragraphs. Used for textual elements. */
}
@media (min-width: 1280px) { :root { --base-font-size: 2rem; } }

html {
    line-height: var(--base-line-height);
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--base-font-family);
    font-weight: var(--base-font-weight);
    font-feature-settings: normal;
}
body {
    background-color: var(--base-background-color);
    color: var(--base-font-color);
    line-height: inherit;
}

/* Headings */

/* <h1> is defined in the Layout section. */

h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    hyphens: auto;
    line-height: 1;
    overflow-wrap: break-word;
}
h2 {
    font-size: 3rem;
    margin-bottom: calc(var(--spacing) * 1.25); }
@media (min-width: 1280px) {
    h2 {
        font-size: 4rem;
        margin-bottom: calc(var(--spacing) * 1.75);
    }
}
h3 { font-size: 2rem; }

/* Paragraphs */
a:link,
a:visited {
    color: var(--bleu);
    text-decoration: underline;
}
p {
    font-size: var(--base-font-size);
    hyphens: auto;
    margin-bottom: var(--spacing);
    overflow-wrap: break-word;
}

/* Lists */

ul {
    padding-left: 1.75rem;
    list-style-type: disc;
    margin-bottom: var(--spacing);
}
li { font-size: var(--base-font-size) }

/* Others */

address, figcaption {
    font-size: var(--base-font-size);
}

/*** Layout ***/

/* The ".container" class defines the maximum width of the content, and center
   it. */

:root { --base-page-width: 95vw; }
@media (min-width: 640px) { :root { --base-page-width: 85vw; } }
@media (min-width: 1024px) { :root { --base-page-width: 85vw; } }
@media (min-width: 1280px) { :root { --base-page-width: 100rem; } }
@media (min-width: 1536px) { :root { --base-page-width: 100rem; } }

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--base-page-width);
}

/* L'en-tête du site. */

header {
    align-items: center;
    display: flex;
    height: 5rem;
    margin-bottom: 5rem;
}
@media (min-width: 640px) { header { justify-content: center; } }
@media (min-width: 1024px) { header { margin-top: 2.5rem; } }
@media (min-width: 1280px) { header { margin-top: 5rem; } }
header #logo-container { }
header #logo-container img {
    display: inline;
    height: 2rem;
    vertical-align: baseline;
    width: 2rem;
}
header #logo-container a {
    color: var(--noir);
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 0.5rem;
}
@media (min-width: 1280px) {
    header #logo-container img { height: 3rem; width: 3rem; }
    header #logo-container a { font-size: 4rem }
}

/* La section principale du site. Divisée en <section>. */

main { }

/* Une ligne séparatrice. */

        .divider {
            border-top: 1px solid var(--noir);
            margin: 5rem auto;
            width: 80%;
        }
        @media (min-width: 1024px) { .divider { margin: 10rem auto; } }

        /* La section "accueil". */

        #section-accueil img {
            /* Allow the image to overlap the container margin. */
            left: calc(((100vw - var(--base-page-width)) /2 ) * -1);
            max-width: 100vw;
            width: 100vw;
            position: relative;
        }
        #section-accueil h1 {
            font-size: 4.5rem;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 3rem;
            margin-top: 5rem;
            text-align: center;
        }
        #section-accueil p {
            text-align: center;
        }
        @media (min-width: 1024px) {
            #section-accueil {
                align-items: center;
                display: flex;
                flex-direction: row-reverse;
                gap: 5rem;
                margin: 10rem 0;
            }
            #section-accueil img {
                border-radius: 50px;
                position: static;
                width: 500px;
                z-index: 0;
            }
            #section-accueil h1 {
                margin-top: 0;
                text-align: left;
            }
            #section-accueil p {
                text-align: left;
            }
        }

        /* Section "services" */

        #section-services {
            margin-top: 3rem;
        }
        #section-services hgroup { text-align: center; }
        #section-services hgroup h2 { margin-bottom: 0; }
        #section-services hgroup p {
            font-variant-caps: all-small-caps;
            font-weight: bold;
        }
        #section-services img {
            margin-bottom: 3rem;
            margin-left: auto;
            margin-right: auto;
            max-height: 350px;
            max-width: 350px;
        }
        @media (min-width: 1024px) {
            #section-services {
                align-items: center;
                display: flex;
            }
            #section-services hgroup {
                text-align: left;
            }
            #section-services img {
                max-width: 500px;
            }
            #section-services div {
                width: 50%;
            }
        }

        /* Section "clienteles" */

        #section-clienteles hgroup { text-align: center; }
        #section-clienteles hgroup h2 { margin-bottom: 0; }
        #section-clienteles hgroup p {
            font-variant-caps: all-small-caps;
            font-weight: bold;
        }
        #section-clienteles img {
            margin-bottom: 3rem;
            margin-left: auto;
            margin-right: auto;
            min-height: 350px;
        }
        @media (min-width: 1024px) {
            #section-clienteles {
                align-items: center;
                display: flex;
                flex-direction: row-reverse;
            }
            #section-clienteles hgroup {
                text-align: left;
            }
            #section-clienteles img {
                max-width: 500px;
            }
            #section-clienteles div {
                width: 50%;
            }
        }


        /* Section "realisations" */

        #section-realisations { }
        #section-realisations h2 {
            margin-bottom: 5rem;
            text-align: center;
        }
        #section-realisations h3 { font-size: var(--base-font-size); }

        /* https://www.sitepoint.com/style-html-details-element/ */
        details {
            margin: 2rem 0;
            border-bottom: 1px solid var(--noir);
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }
        .details-content {
            margin-top: 2rem;
        }
        .details-content p {
            margin-bottom: 2rem;
        }
        .details-content ul {
            list-style-type: disc;
            padding-left: 2rem;
            margin-bottom: 2rem;
        }
        summary {
            align-items: top;
            cursor: pointer;
            font-size: var(--base-font-size);
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            list-style: none;
        }
        summary::after {
            content: '';
            width: 18px;
            height: 10px;
            background: url('images/fleche.svg') no-repeat;
            background-size: cover;
            transition: 0.2s;
        }
        summary::-webkit-details-marker { display: none; }
        details[open] > summary::after {
            transform: rotate(180deg);
        }
        .detail-date {
            font-weight: normal;
        }

        #qui-suis-je {
            margin-top: 5rem;
            padding: 5rem;
            background-color: var(--violet);
            color: var(--blanc);
            text-align: center;

            img {
                border-radius: 50%;
                max-height: 12rem;
                margin: 0 auto;
            }
            figcaption {
                margin: 3rem 0;
            }
        }

        #section-contact {
            margin-top: 10rem;
            text-align: center;
        }
        #section-contact a {
            background-color: var(--lilas);
            border-width: 5px;
            border-radius: 2%;
            color: var(--noir);
            font-size: 3.5rem;
            font-weight: bold;
            padding: 1rem;
            text-decoration-line: none;
        }
        #section-contact img {
            display: block;
            margin: 5rem auto;
            width: 400px;
        }
        #section-contact a img {
            display: inline;
            max-width: 40px;
            max-height: 40px;
            vertical-align: middle;
            padding-bottom: 5px;
        }


        footer {
            background-color: var(--noir);
            color: var(--blanc);
            padding-top: 3rem;
            padding-bottom: 3rem;
        }

        .footer-heading-1 {
            font-size: 2.25rem;
            font-weight: bold;
        }
        .footer-heading-2 {
            font-size: 2rem;
            font-weight: bold;
        }
        .footer-copyleft {
            font-size: 1.5rem;
            text-align: center;
        }
        footer address {
            font-style: normal;
            margin-bottom: 3rem;
        }
        footer address ul {
            list-style-type: none;
            padding-left: 0;
        }
        footer address ul li a:link {
            color: var(--blanc);
            text-decoration-line: underline;
        }
        footer address ul li img {
            display: inline;
            filter: invert(100%) brightness(75%);
            height: 18px;
            margin-right: 5px;
            width: 18px;
        }


        /*
  Utilities
       */

        .italic { font-style: italic; }
        .right { text-align: right; }

        .copyleft {
            display:inline-block;
            transform: rotateY(180deg);
        }