/* Couleurs reprises de l'ancien site */
:root {
    --texte: #464646;
    --accent: #2f4f9e;
    --annee: #580584;
    --fond-photo: #f1f1f1;
}

/* Police du titre, hébergée sur le site (licence libre OFL) */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("montserrat-400.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

/* Un élément marqué « hidden » reste caché, quel que soit son style */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    line-height: 1.5;
    color: #212529;
    background: #fff;
}

a { color: inherit; text-decoration: none; transition: all .2s ease-in-out; }

/* ---------- Titre (identique à l'ancien site) ---------- */

.nom_photographe {
    margin: 8vh 0 0;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 4.2vh;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 6px;
    word-spacing: 15px;
}

/* ---------- Menu en une ligne (identique à l'ancien site) ---------- */

.titres_albums {
    margin-top: 3.7vh;
    margin-bottom: 6vh;
    text-align: center;
    font-size: 2.4vh;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.lien_album,
.lien_annee,
.icones { margin: 0 1.5rem; }

.lien_album { color: var(--texte); }
.lien_album:hover,
.lien_album.actif { color: var(--accent); padding-bottom: 3px; border-bottom: 1px solid var(--accent); }

.lien_annee { color: var(--annee); }
.lien_annee:hover,
.lien_annee.actif { padding-bottom: 3px; border-bottom: 1px solid var(--annee); }

/* Cadenas et Instagram : côte à côte, centrés à la même hauteur */
.icones {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    vertical-align: middle;
}

.icone {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--texte);
    cursor: pointer;
    transition: color .2s ease-in-out;
}
.icone:hover { color: var(--accent); }
.icone:focus:not(:focus-visible) { outline: none; }

.icone svg,
.menu-mobile summary svg {
    display: block;
    width: 3vh;
    height: 3vh;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icone svg .plein { fill: currentColor; }

/* Menu mobile : une flèche qui déplie la liste (comme avant) */
.menu-mobile { display: none; }
.menu-mobile summary { display: inline-block; list-style: none; cursor: pointer; color: var(--texte); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile[open] summary svg { transform: rotate(180deg); }
.menu-mobile nav { padding-top: 1.5rem; }
.menu-mobile nav > a { display: block; width: fit-content; margin: 0 auto 1rem; }
.menu-mobile .icones { display: flex; justify-content: center; margin: 0 auto 1rem; }

@media (max-width: 575.98px) {
    .menu-bureau { display: none; }
    .menu-mobile { display: block; }
}

/* ---------- Grille de photos (masonry en colonnes, comme avant) ---------- */

.masonry {
    column-count: 3;
    column-gap: 1.5em;
    margin: 1.5em;
    padding: 0;
    font-size: .85em;
}

.item {
    display: inline-block;
    width: 100%;
    margin: 0 0 1.3em;
    padding: .9em;
    background: #fff;
    break-inside: avoid;
}

.item a { display: block; }

/* width/height dans le HTML : la place est réservée avant le chargement,
   la grille ne « saute » pas pendant que les photos arrivent. */
.item img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--fond-photo);
}

.vide { text-align: center; color: var(--texte); }

@media (max-width: 520px) {
    .masonry { column-count: 1; }
    .nom_photographe { font-size: 4vh; }
    .titres_albums { margin-top: 4.7vh; font-size: 2vh; letter-spacing: 4px; }
}
@media (min-width: 521px) and (max-width: 768px) {
    .masonry { column-count: 2; }
    .titres_albums { margin-top: 4vh; font-size: 2vh; }
}
@media (min-width: 769px) and (max-width: 1200px) {
    .masonry { column-count: 2; }
}

/* ---------- Fenêtre du cadenas ---------- */

.fenetre {
    width: calc(100% - 2rem);
    max-width: 22rem;
    padding: 2.5rem 2rem 2rem;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 5px 11px rgba(0, 0, 0, .18), 0 4px 15px rgba(0, 0, 0, .15);
    text-align: center;
    color: #212529;
}
.fenetre::backdrop { background: rgba(0, 0, 0, .5); }
.fenetre-titre { margin: 0 0 1.5rem; font-size: 1.25rem; font-weight: 400; }
.fenetre-texte { margin: -.75rem 0 1.5rem; color: #666; }
.fenetre a.bouton { display: inline-block; }
.fenetre label { display: block; text-align: left; font-size: .85rem; color: #757575; }
.fenetre input[type="password"] {
    width: 100%;
    margin-bottom: 1.5rem;
    padding: .4rem 0;
    border: 0;
    border-bottom: 1px solid #ced4da;
    font: inherit;
    font-size: 1.1rem;
    letter-spacing: 3px;
    text-align: center;
    outline: none;
}
.fenetre input[type="password"]:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }

.bouton {
    padding: .84rem 2.14rem;
    border: 0;
    border-radius: .125rem;
    background: #59698d;
    color: #fff;
    font: inherit;
    font-size: .81rem;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .12);
    transition: background-color .2s ease-in-out;
}
.bouton:hover { background: #32adb5; }

.fermer {
    position: absolute;
    top: .5rem;
    right: .75rem;
    padding: .25rem .5rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.75rem;
    line-height: 1;
    opacity: .6;
    cursor: pointer;
}
.fermer:hover { opacity: 1; }

/* ---------- Visionneuse plein écran ---------- */

.visionneuse {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: calc(3rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: rgba(20, 20, 20, .95);
    color: #eee;
}
.visionneuse[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.visionneuse::backdrop { background: transparent; }
.visionneuse img {
    max-width: 100%;
    max-height: calc(100% - 3rem);
    object-fit: contain;
}
.visionneuse .legende { min-height: 1.5em; margin: 1rem 0 0; font-size: .9rem; letter-spacing: 1px; text-align: center; }
.visionneuse .fermer { top: calc(.75rem + env(safe-area-inset-top, 0px)); right: 1rem; font-size: 2.25rem; }
.visionneuse .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 1rem;
    border: 0;
    background: none;
    color: #eee;
    font-size: 3rem;
    line-height: 1;
    opacity: .6;
    cursor: pointer;
}
.visionneuse .nav:hover { opacity: 1; }
.visionneuse .precedente { left: 0; }
.visionneuse .suivante { right: 0; }
@media (max-width: 575.98px) {
    .visionneuse .nav { display: none; } /* sur téléphone : on glisse du doigt */
}

/* ---------- Message après la saisie d'un code ---------- */

.avis {
    position: fixed;
    left: 50%;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    margin: 0;
    padding: .9rem 1.4rem;
    border-radius: 4px;
    background: #2f96b4;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    animation: disparaitre 5s forwards;
}
@keyframes disparaitre {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}