/* Roboto hébergée sur le site (sous-ensemble latin, licence dans fonts/OFL.txt).
   Seules deux graisses sont utilisées : 100 (fw-lighter) et 400. Toutes deux préchargées dans layout_base.html. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(/fonts/roboto-latin-100-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/roboto-latin-400-normal.woff2) format('woff2');
}

/* Utilitaires Bootstrap utilisés par le site mais absents de bootstrap-grid (repris tels quels de bootstrap.min.css 5.3.3).
   Pour une nouvelle classe Bootstrap qui ne fait pas d'effet, vérifier qu'elle est dans bootstrap-grid, sinon l'ajouter ici. */
.img-fluid { max-width: 100%; height: auto; }
.overflow-hidden { overflow: hidden !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.fw-lighter { font-weight: lighter !important; }
.text-center { text-align: center !important; }
.text-decoration-none { text-decoration: none !important; }
.text-reset { --bs-text-opacity: 1; color: inherit !important; }
.visually-hidden { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; position: absolute !important; }

@media (min-width: 992px) {
  .float-lg-end { float: right !important; }
  .text-lg-start { text-align: left !important; }
  .text-lg-end { text-align: right !important; }
}

:root {
  --bs-font-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Transition entre les pages, sans JS : fondu enchaîné du contenu (Chrome, Edge, Safari 18.2+ ;
   les autres navigateurs gardent la navigation classique). L'en-tête (logo + menu) reste en place. */
@view-transition {
    navigation: auto;
}

/* Espace au-dessus du logo, identique sur toutes les pages : 24px, puis 32px à partir de lg */
.entete {
    view-transition-name: entete;
    padding-top: 24px;
}

@media screen and (min-width: 992px) {
    .entete {
        padding-top: 32px;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .4s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* Largeur de la grille de /projets/ : toute la largeur du conteneur (100cqi), sauf sur un écran peu haut
   (portable) où elle rétrécit pour que les vignettes 4:5 ET leur légende tiennent dans la hauteur.
   280px = en-tête (32 + 110) + pt-4 (24) + légende (≈ 55) + marge (pied de page compris) ; 3 colonnes de largeur 4/5 de la hauteur + 2 gouttières de 24px.
   Utilisée aussi par le menu (lg) pour rester aligné sur la dernière vignette. */
:root {
    --largeur_grille: min(100cqi, max(600px, (100dvh - 280px) * 4 / 5 * 3 + 48px));
}

.base_container {
    min-height: 100dvh !important;
    container-type: inline-size;
}

body {
    overflow-y: scroll;
}

/* Hauteur fixe : la place du logo est réservée avant son chargement */
#logo {
    height: 110px;
    width: auto;
}

/* Image de l'accueil au format 3:2 : 490px de haut = 736px de large */
#home {
    width: 736px;
    height: auto;
    transition: transform .7s ease;
}

/* Écran peu haut (portable) : comme la grille de /projets/ (voir --largeur_grille), l'image prend au plus
   la hauteur 100dvh - 280px, donc la même hauteur que les vignettes, pour que le titre reste visible */
@media screen and (min-width: 768px) {
    #home {
        width: min(736px, max(345px, (100dvh - 280px) * 3 / 2));
    }
}

#home:hover {
    filter: blur(1px);
    transform: scale(1.05);
    transition: transform .7s ease;
}

.ul_menu {
    list-style-type: none;
}

.li_menu {
    display: inline;
    font-size: 0.9rem;
}

.li_menu a {
    text-decoration: none;
}

.active {
    text-decoration: underline !important;
    text-underline-position: under;
}

.espace_projets {
    flex: 1 1 0;
}

/* Espace entre le logo et les images de / et de /projets/ : il ne dépend que de la hauteur de l'écran,
   pour que le haut des images soit au même endroit sur les deux pages. 800px ≈ hauteur de la page Projets
   (en-tête + grille + pied) : la grille reste à peu près centrée, avec au plus 24px (pt-4) + 96px sous le logo. */
.espace_haut {
    flex: 0 0 auto;
    height: clamp(0px, calc((100dvh - 800px) / 2), 96px);
}

.menu_projets {
    display: grid;
    gap: 32px 24px;
    grid-template-columns: minmax(0, 1fr);
}

.menu_projets img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    transition: transform .7s ease;
}

.menu_projets img:hover {
    transform: scale(1.05);
    transition: transform .7s ease;
}

/* Page projet, à partir de lg : zone centrée de 2/3 de la largeur (photos de 856px en xxl), mais jamais moins
   que sa largeur à 1200px (736px, photos verticales de 356px). Entre 992 et 1199px, le conteneur Bootstrap reste
   à 960px : sans ce minimum, les colonnes tomberaient à 296px et les blocs de texte dépasseraient leur photo. */
@media screen and (min-width: 992px) {
    .contenu_projet {
        width: max(736px, (100% + var(--bs-gutter-x)) * 2 / 3 - var(--bs-gutter-x));
        align-self: center;
    }
}

/* Page projet : recadre au format 2:3 une photo d'un autre format, pour l'aligner sur sa voisine */
.contenu_projet img.format_2_3 {
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

/* Page projet : texte justifié dans sa colonne, avec césure (lang="fr") pour éviter les grands blancs entre les mots */
.texte_justifie {
    text-align: justify;
    hyphens: auto;
}

/* À côté d'une photo (lg) : paragraphes plus espacés, pour que le bloc s'approche de la hauteur de la photo.
   Pas de marge sous le dernier, pour que le bloc soit bien centré verticalement (my-auto) */
@media (min-width: 992px) {
    .texte_justifie > p {
        margin-bottom: 2rem;
    }
    .texte_justifie > p:last-child {
        margin-bottom: 0;
    }
}

/* Page interne des photos : vignettes au format d'origine (pas de recadrage), 2 colonnes, 3 à partir de md */
.grille_photos {
    display: grid;
    gap: 24px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.grille_photos img {
    display: block;
    width: 100%;
    height: auto;
}

/* Statut de la photo en noir dans la légende grise ; « non publiée » en badge, pour qu'on la repère d'un coup d'œil */
.statut_photo {
    color: #000;
}

/* Description (alt) de la photo, sur sa propre ligne sous le nom du fichier */
.alt_photo {
    display: block;
    margin-top: 2px;
    font-style: italic;
}

.photo_non_publiee .statut_photo {
    padding: 1px 6px;
    border-radius: 3px;
    background: #000;
    color: #fff;
}

@media screen and (min-width: 768px) {
    .grille_photos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.legende_projet {
    margin-top: 14px;
    text-align: center;
}

.legende_titre {
    font-size: 0.95rem;
}

.legende_lieu {
    font-size: 0.75rem;
    color: #5c636a;
}

.legende_lieu sup {
    line-height: 0;
}

/* Titre <h1> qui garde l'apparence du texte autour (ex. « Sophia Charles » sur la page Info) */
.titre_texte {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin-bottom: 1rem;
}

.fs-7 {
    font-size: 0.9rem;
}

.titre_welcome {
    font-size: 0.9rem;
}

.footer {
    font-size: 0.75rem;
}

@media screen and (min-width: 768px) {
    .menu_projets {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: var(--largeur_grille);
        align-self: center;
    }
}

/* Le menu recule d'autant que la grille rétrécit, pour rester aligné sur le bord droit de la dernière vignette */
@media screen and (min-width: 992px) {
    .col_menu {
        padding-right: calc(var(--bs-gutter-x) * .5 + (100cqi - var(--largeur_grille)) / 2);
    }
}

@media screen and (min-width: 992px) {
    #sc_portrait {
        max-width: 300px;
    }
}

@media screen and (max-width: 576px) {
    #logo {
        height: 80px;
    }
}