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

/* Fond sur html : la zone visible quand on tire la page sur iPhone reste sombre (pas de bande blanche) */
html {
    background: var(--surface);
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
}

/* Défilement doux activé par site.js après le chargement : une arrivée sur /#ancre est immédiate */
html.defilement-doux {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--encre);
    font-family: var(--font-texte);
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-titre);
    font-weight: 400;
    line-height: 1.1;
}

/* Mot mis en avant dans un titre : gras doré (charte) */
h1 strong,
h2 strong,
h3 strong {
    font-weight: 700;
    color: var(--encre-accent);
}

p {
    margin: 0;
}

a {
    color: inherit;
}

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

:focus-visible {
    outline: 2px solid var(--bois-chene-dore);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Titre mis au focus par Blazor après navigation (FocusOnNavigate) : pas de cadre */
[tabindex="-1"]:focus-visible {
    outline: none;
}

@view-transition {
    navigation: auto;
}

section[id] {
    scroll-margin-top: 72px;
}

/* Gabarit commun des sections : titre centré, filet fin, texte (charte) */
.section {
    position: relative;
    padding: clamp(72px, 10vw, 128px) 24px;
    overflow: hidden;
}

.section-profonde {
    background: var(--surface-profonde);
}

.conteneur {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
}

.section-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 56px;
    text-align: center;
}

.section-entete h2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
}

.section-entete p {
    max-width: 38em;
}

.filet {
    width: min(160px, 33%);
    margin: 0;
    border: 0;
    border-top: 1px solid var(--filet);
}

/* Éléments séparés par le « | » de la charte ; un par ligne sur mobile pour rester centré */
.ligne-separee {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ligne-separee li + li::before {
    content: "|";
    margin: 0 12px;
}

@media (max-width: 640px) {
    .ligne-separee {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .ligne-separee li + li::before {
        content: none;
    }
}

/* Pages de texte (mentions légales, confidentialité, CGU) */
.page-texte {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 160px;
}

.page-texte h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
}

.page-texte h2 {
    margin: 40px 0 12px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--encre-accent);
}

.page-texte p {
    font-size: 1rem;
}

.page-texte a {
    color: var(--encre-accent);
}

.page-texte mark {
    padding: 0 6px;
    background: var(--bois-lin-clair);
    color: var(--bois-wenge);
}

.chapeau {
    font-family: var(--font-titre);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--encre-accent);
}

.bouton {
    display: inline-block;
    min-height: 44px;
    padding: 16px 36px;
    border: 1px solid var(--bois-chene-dore);
    background: var(--bois-chene-dore);
    color: var(--anthracite);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bouton:hover,
.bouton-contour {
    background: transparent;
    color: var(--bois-chene-dore);
}

.bouton-contour:hover {
    background: var(--bois-chene-dore);
    color: var(--anthracite);
}

/* Scroll reveal : classe .in posée par site.js (Intersection Observer).
   Masqué seulement si le script a démarré (classe .js), pour rester lisible sans JavaScript. */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.defilement-doux {
        scroll-behavior: auto;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bouton {
        transition: none;
    }
}
@media (max-width: 640px) {
    .ligne-separee {
        gap: 0;
    }
}

/* Page d'une réalisation */
.realisation {
    padding-top: 104px;
}

.realisation-retour {
    margin: 0 0 24px;
    font-size: 0.875rem;
}

.realisation-retour a {
    color: var(--encre-accent);
    text-decoration: none;
}

.realisation h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    text-transform: uppercase;
}

.realisation-brouillon {
    padding: 8px 16px;
    background: var(--bois-lin-clair);
    color: var(--bois-wenge);
}

.realisation-texte {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 44em;
    margin: 0 auto 56px;
}

/* Mosaïque à hauteurs libres : chaque photo garde ses proportions */
.realisation-photos {
    columns: 3 300px;
    column-gap: 16px;
}

.realisation-photo {
    display: block;
    margin-bottom: 16px;
    break-inside: avoid;
    overflow: hidden;
}

.realisation-photo img {
    width: 100%;
    transition: transform 0.6s ease;
}

.realisation-photo:hover img {
    transform: scale(1.03);
}

.realisation-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 72px;
    text-align: center;
    font-family: var(--font-titre);
    font-size: 1.5rem;
}

.visionneuse {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 56px 16px;
    border: 0;
    background: rgb(20 20 20 / 0.94);
}

.visionneuse::backdrop {
    background: rgb(20 20 20 / 0.94);
}

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

.visionneuse img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.visionneuse button {
    position: absolute;
    min-width: 48px;
    min-height: 48px;
    border: 1px solid var(--bois-chene-dore);
    background: rgb(38 38 38 / 0.8);
    color: var(--bois-chene-dore);
    font: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.visionneuse-fermer {
    top: 12px;
    right: 12px;
}

.visionneuse-precedente {
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}

.visionneuse-suivante {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .realisation-photo img {
        transition: none;
    }

    .realisation-photo:hover img {
        transform: none;
    }
}

/* Pages sans grande photo en haut (réalisation, pages légales, merci) : la barre de navigation a d'emblée
   le fond qu'elle prend au défilement sur l'accueil */
body:not(:has(.hero)) .nav {
    background: var(--surface-profonde);
    border-bottom-color: rgb(232 190 139 / 0.25);
}