/* =============================================================
   MOCarchitecture : feuille de style commune à toutes les pages
   ============================================================= */

/* Police Quicksand : la version light sert de graisse normale,
   la version medium remplace le faux gras fabriqué par le navigateur */
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-light.ttf') format('truetype');
    font-weight: 100 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Medium.ttf') format('truetype');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}

/* Couleurs et tailles de texte. Les tailles sont en rem : elles suivent le zoom
   du navigateur et grandissent un peu avec l'écran sans devenir illisibles */
:root {
    --texte: #333;
    --fond: #fff;
    --taille-petite: clamp(0.8rem, 0.75rem + 0.15vw, 0.9rem);
    --taille-texte: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
    --taille-titre: clamp(1.125rem, 0.9rem + 0.6vw, 1.75rem);
}

/* Réinitialisation des styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* En-tête, contenu, pied de page : le pied reste en bas sans chevaucher le contenu */
body {
    font-family: 'Quicksand', Arial, sans-serif;
    background-color: var(--fond);
    color: var(--texte);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

main {
    flex: 1;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Contour affiché seulement pendant la navigation au clavier */
:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

/* Tirets autour des titres de projet (« _ Gris béton _ »),
   ignorés par les lecteurs d'écran */
.project-title::before {
    content: "_\00a0";
    content: "_\00a0" / "";
}

.project-title::after {
    content: "\00a0_";
    content: "\00a0_" / "";
}


/* ----- Accueil ----- */

.page-accueil header {
    text-align: center;
    padding: clamp(0.75rem, 3vh, 2rem) 1rem 0;
}

.logo {
    font-weight: normal;
    line-height: 1.1;
}

.logo .moc {
    font-weight: 100;
    font-size: clamp(3rem, 12vmin, 7.5rem);
}

.logo .architecture {
    font-size: clamp(1.5rem, 6vmin, 3.75rem);
}

.page-accueil main {
    display: flex;
    align-items: center;
    padding: 1.5rem 0;
}

/* Carrousel des projets : la liste défile horizontalement et s'arrête sur un projet */
.carousel {
    display: flex;
    align-items: center;
    width: 100%;
    padding-inline: 12vmax;
}

.carousel-arrow {
    flex: none;
    width: clamp(2.5rem, 3.2vw, 3.5rem);
    padding: 0.25rem;
}

.carousel-arrow[aria-disabled="true"] {
    opacity: 0.25;
    cursor: default;
}

.gallery-slider {
    flex: 1;
    min-width: 0;
    display: flex;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.gallery-slider::-webkit-scrollbar {
    display: none;
}

.gallery-slider > li {
    flex: 0 0 calc(100% / 3);
    scroll-snap-align: start;
    padding: 0.5rem;
}

.project-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.project-content img {
    width: 75%;
    transition: opacity 0.3s;
}

a.project-content:hover img {
    opacity: 0.8;
}

.gallery-slider .project-title {
    font-size: var(--taille-titre);
    font-style: italic;
    font-weight: 300;
    line-height: 1.3;
    margin-top: 0.75rem;
}

.gallery-slider .project-name,
.gallery-slider .project-phase {
    font-size: var(--taille-petite);
    font-weight: 100;
}

.gallery-slider .project-phase {
    font-style: italic;
}


/* ----- Pages projet ----- */

.page-projet header {
    height: 10vh;
    min-height: 4.5rem;
}

.home-button {
    position: absolute;
    top: clamp(1rem, 7vh, 4rem);
    left: 5vw;
    width: clamp(2.75rem, 3vw, 3.5rem);
    padding: 0.25rem;
}

.project-section {
    text-align: center;
    padding: 0 clamp(1rem, 3vw, 3rem) 1rem;
}

.project-image img {
    width: clamp(200px, 25vw, 340px);
    margin: 0 auto;
}

.project-section .project-title {
    font-size: clamp(1.375rem, 0.9rem + 1vw, 2rem);
    font-style: italic;
    font-weight: 300;
    margin-top: 1rem;
}

.project-section .project-name {
    font-size: var(--taille-texte);
    font-weight: 100;
}

.project-description {
    font-size: var(--taille-texte);
    font-style: italic;
    font-weight: 100;
    max-width: min(90%, 36rem);
    margin: 1.5rem auto 2.5rem;
}

/* Mosaïque de photos : 3 colonnes, ou 6 avec la classe cols-6.
   Les classes posées sur chaque lien règlent la place de la photo (voir plus bas) */
.gallery {
    --colonnes: 3;
    display: grid;
    grid-template-columns: repeat(var(--colonnes), 1fr);
    gap: max(2vw, 30px);
    width: max(42vw, 640px);
    max-width: 100%;
    margin: 0 auto;
}

.gallery.cols-6 {
    --colonnes: 6;
}

.gallery a {
    align-self: start;
}

.gallery img {
    width: 100%;
    transition: opacity 0.3s;
}


/* ----- Visionneuse photo (créée par script.js sur les pages projet) ----- */

.overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: none;
    background: transparent;
    color: #fff;
    overflow: hidden;
}

.overlay[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay::backdrop {
    background-color: rgba(137, 156, 162, 0.4);
}

/* Pendant l'affichage : la page ne défile plus et les photos de fond s'estompent */
body:has(.overlay[open]) {
    overflow: hidden;
}

body:has(.overlay[open]) .gallery img {
    opacity: 0.2;
}

.overlay-img {
    max-width: 70%;
    max-height: 70%;
}

.overlay-prev,
.overlay-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(3rem, 7vw, 7rem);
}

.overlay-prev {
    left: 5%;
}

.overlay-next {
    right: 5%;
}

.overlay-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
}

.overlay-close svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
}

.overlay :focus-visible {
    outline-color: var(--texte);
}


/* ----- Pied de page ----- */

footer {
    text-align: center;
    padding: 1.5rem 1rem 1rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-details a {
    font-size: var(--taille-texte);
    line-height: 1.4;
    padding: 0.2rem 0.5rem;
}

.contact-details a:hover,
.copyright-details a:hover {
    text-decoration: underline;
}

.contact-details .email {
    font-weight: 500;
}

.contact-details .instagram {
    font-style: italic;
}

.copyright-details {
    margin-top: 0.75rem;
    font-size: var(--taille-petite);
}

.copyright-details .moc {
    font-weight: 100;
}

.copyright-details .architecture {
    font-size: 0.8em;
}


/* ----- Mentions légales ----- */

.legal {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 clamp(1rem, 5vw, 2rem) 2rem;
    font-size: var(--taille-texte);
}

.legal h1 {
    font-size: clamp(1.375rem, 0.9rem + 1vw, 2rem);
    font-style: italic;
    font-weight: 300;
    text-align: center;
    margin-bottom: 1.5rem;
}

.legal h2 {
    font-size: 1.05em;
    font-weight: 500;
    margin: 2rem 0 0.5rem;
}

.legal p + p {
    margin-top: 0.5rem;
}

.legal a {
    text-decoration: underline;
}


/* ----- Grands écrans : mosaïque des pages projet ----- */

/* span-2 à span-6 : largeur de la photo en colonnes ; rows-2, rows-4 : hauteur en rangées */
@media (min-width: 769px) {
    .gallery .span-2 { grid-column: span 2; }
    .gallery .span-3 { grid-column: span 3; }
    .gallery .span-4 { grid-column: span 4; }
    .gallery .span-6 { grid-column: span 6; }
    .gallery .rows-2 { grid-row: span 2; }
    .gallery .rows-4 { grid-row: span 4; }
}


/* ----- Téléphones et petites tablettes ----- */

@media (max-width: 768px) {
    .page-accueil header {
        padding-top: 9vh;
    }

    .logo .moc {
        font-size: 15vw;
    }

    .logo .architecture {
        font-size: 8vw;
    }

    .carousel {
        padding-inline: 4vmin;
    }

    .gallery-slider > li {
        flex-basis: 100%;
    }

    /* Le bouton retour reste visible pendant le défilement des photos */
    .home-button {
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 50%;
        padding: 0.5rem;
    }

    .project-image img {
        width: 55vw;
    }

    /* Une photo par ligne, sur toute la largeur */
    .gallery {
        grid-template-columns: 1fr;
        gap: 1rem;
        width: 100%;
    }

    .overlay-img {
        max-width: 92%;
        max-height: 75%;
    }

    .overlay-prev,
    .overlay-next {
        top: auto;
        bottom: 1.5rem;
        transform: none;
        width: 3rem;
    }

    .overlay-prev {
        left: 1.5rem;
    }

    .overlay-next {
        right: 1.5rem;
    }
}


/* Animations désactivées si le visiteur l'a demandé dans son système */
@media (prefers-reduced-motion: reduce) {
    .gallery-slider {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}