@charset "utf-8";

/* =========================================================================
   Au Coin du Bois — feuille de style unique.

   Direction : « forêt sombre ». Page presque blanche, bandeaux vert sapin
   profond, un seul accent bois. Le vert dit le bois et le végétal sans passer
   par le beige, et laisse les photos de chantier porter la couleur chaude.

   Titres en Fraunces (serif variable, taillée pour les grands corps), texte
   courant en Public Sans. Les deux sont auto-hébergées.
   ========================================================================= */

@import url("../fonts/fonts.css");

:root {
    /* Fond : blanc très légèrement froid, jamais crème. */
    --page: #FBFCFA;
    --page-creux: #F1F4EF;
    --trait: #DCE2D8;

    /* Structure : vert sapin profond, les bandeaux qui portent le site. */
    --sapin: #16241B;
    --sapin-fonce: #0E1712;
    --sur-sapin: #F2F5EF;
    --sur-sapin-doux: #A9B3A4;

    /* Bois : un seul accent, décliné clair sur fond sombre. */
    --bois: #8A5A2B;          /* sur fond clair : contraste 5,7:1 */
    --bois-clair: #C08D4C;    /* sur fond sapin : contraste 5,5:1 */

    --encre: #12180F;
    --encre-doux: #4A5546;

    --marge: clamp(1.25rem, 5vw, 5rem);
    --largeur: 80rem;
    --mesure: 33rem;

    --t-xs: 0.8125rem;
    --t-s: 0.9375rem;
    --t-base: 1.0625rem;
    --t-m: 1.1875rem;
    --t-l: clamp(1.375rem, 1.05rem + 1.4vw, 1.9rem);
    --t-xl: clamp(1.9rem, 1.25rem + 2.9vw, 3.1rem);
    --t-2xl: clamp(2.6rem, 1.5rem + 4.8vw, 4.75rem);
}

/* Fraunces : on fige les axes une fois pour toutes. SOFT adoucit les angles,
   WONK active les formes penchées des italiques optiques. */
.titre, h1, h2, h3, h4 {
    font-family: Fraunces, Georgia, "Times New Roman", serif;
    font-variation-settings: "SOFT" 30, "WONK" 1;
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.012em;
    margin: 0;
    text-wrap: balance;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--page);
    color: var(--encre);
    font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--t-base);
    line-height: 1.68;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

a { color: var(--bois); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--sapin); }

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

.saut-contenu {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--sapin); color: var(--sur-sapin); padding: 0.7rem 1.1rem;
}
.saut-contenu:focus { left: 0; }

/* ---------- Trame ---------- */
.page { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); }

.bloc { padding-block: clamp(3.5rem, 8vw, 7rem); }
.bloc--serre { padding-block: clamp(2.5rem, 5vw, 4.25rem); }

.sapin { background: var(--sapin); color: var(--sur-sapin); }
.sapin h1, .sapin h2, .sapin h3 { color: var(--sur-sapin); }
.sapin a { color: var(--bois-clair); }
.sapin a:hover { color: var(--sur-sapin); }

.creux { background: var(--page-creux); }

.mesure { max-width: var(--mesure); }

/* Titre de section : un filet fin plutôt qu'une étiquette en capitales. */
.titre-bloc {
    font-size: var(--t-xl);
    padding-top: 1.15rem;
    border-top: 1px solid var(--trait);
    margin-bottom: 1.35rem;
}
.sapin .titre-bloc { border-top-color: color-mix(in srgb, var(--sur-sapin-doux) 40%, transparent); }

.chapeau { font-size: var(--t-m); max-width: var(--mesure); color: var(--encre-doux); }
.sapin .chapeau { color: var(--sur-sapin-doux); }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-block;
    font-family: "Public Sans", sans-serif;
    font-weight: 600;
    font-size: var(--t-s);
    letter-spacing: 0.005em;
    padding: 0.85rem 1.6rem;
    border: 1px solid var(--sapin);
    border-radius: 2px;
    background: var(--sapin);
    color: var(--sur-sapin);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bouton:hover { background: var(--bois); border-color: var(--bois); color: #fff; }

.bouton--creux { background: transparent; color: var(--sapin); }
.bouton--creux:hover { background: var(--sapin); color: var(--sur-sapin); border-color: var(--sapin); }

.sapin .bouton { background: var(--bois-clair); border-color: var(--bois-clair); color: var(--sapin-fonce); }
.sapin .bouton:hover { background: var(--sur-sapin); border-color: var(--sur-sapin); color: var(--sapin-fonce); }
.sapin .bouton--creux { background: transparent; color: var(--sur-sapin); border-color: color-mix(in srgb, var(--sur-sapin) 45%, transparent); }
.sapin .bouton--creux:hover { background: var(--sur-sapin); color: var(--sapin-fonce); border-color: var(--sur-sapin); }

.boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ---------- En-tête ---------- */
.entete { background: var(--sapin); color: var(--sur-sapin); position: sticky; top: 0; z-index: 50; }

.entete__interieur {
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 4.75rem; flex-wrap: wrap; padding-block: 0.65rem;
}

.marque { display: flex; align-items: center; gap: 0.75rem; color: var(--sur-sapin); text-decoration: none; margin-right: auto; }
.marque__losange { width: 2.35rem; height: 2.35rem; flex: none; color: var(--bois-clair); }
.marque__nom {
    font-family: Fraunces, Georgia, serif;
    font-variation-settings: "SOFT" 30, "WONK" 1;
    font-weight: 600; font-size: 1.28rem; letter-spacing: -0.01em; line-height: 1.12;
}
.marque__metier {
    display: block;
    font-family: "Public Sans", sans-serif; font-weight: 400;
    font-size: var(--t-xs); letter-spacing: 0.01em; color: var(--sur-sapin-doux);
}

.navigation { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 2rem); flex-wrap: wrap; }
.navigation a {
    color: var(--sur-sapin); text-decoration: none; font-size: var(--t-s);
    padding-block: 0.35rem; border-bottom: 1px solid transparent;
}
.navigation a:hover { border-bottom-color: var(--bois-clair); color: var(--sur-sapin); }
.navigation a[aria-current="page"] { border-bottom-color: var(--bois-clair); }

.navigation__appel {
    font-weight: 600; white-space: nowrap;
    border: 1px solid var(--bois-clair) !important;
    border-radius: 2px; padding: 0.42rem 0.95rem !important;
    color: var(--bois-clair) !important;
}
.navigation__appel:hover { background: var(--bois-clair); color: var(--sapin-fonce) !important; }

/* ---------- Ouverture ---------- */
.ouverture__grille {
    display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center;
    padding-block: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 62rem) { .ouverture__grille { grid-template-columns: 1fr 1.02fr; } }

.ouverture__titre {
    font-size: var(--t-2xl);
    font-weight: 600;
    letter-spacing: -0.021em;
    margin-bottom: 1.5rem;
}
.ouverture__texte { font-size: var(--t-m); max-width: 30rem; color: var(--encre-doux); }

.ouverture__matieres {
    margin-top: 2.2rem; padding-top: 1.1rem;
    border-top: 1px solid var(--trait);
    font-size: var(--t-s); color: var(--encre-doux); max-width: 30rem;
}

.ouverture__photo { border-radius: 2px; overflow: hidden; background: var(--page-creux); }
.ouverture__photo img { width: 100%; }

/* ---------- Le dessous : l'argument technique, en bandeau sapin ---------- */
.dessous__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) { .dessous__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }
.dessous__photo { border-radius: 2px; overflow: hidden; }
.dessous__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 62%; }

.dessous__liste { list-style: none; margin: 1.7rem 0 0; padding: 0; display: grid; gap: 0.6rem; max-width: 30rem; }
.dessous__liste li { padding-left: 1.4rem; position: relative; color: var(--sur-sapin-doux); font-size: var(--t-s); }
/* Le losange reprend la forme du logo, il n'est pas décoratif au hasard. */
.dessous__liste li::before {
    content: ""; position: absolute; left: 0; top: 0.64em;
    width: 0.4rem; height: 0.4rem; background: var(--bois-clair); transform: rotate(45deg);
}

/* ---------- Grilles photo-portées, sans boîte ni ombre ---------- */
/* 3 colonnes fixes au-delà de 64rem, jamais auto-fill : les deux grilles du
   site comptent 6 éléments, et un auto-fill donnait 4 colonnes sur grand écran,
   donc une deuxième rangée de 2 éléments orphelins. */
.grille {
    display: grid; gap: clamp(1.75rem, 3vw, 2.75rem);
    grid-template-columns: 1fr;
    margin: 0; padding: 0; list-style: none;
}
@media (min-width: 40rem) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grille { grid-template-columns: repeat(3, 1fr); } }

.fiche { margin: 0; }
.fiche a { text-decoration: none; color: inherit; display: block; }
.fiche a:hover .fiche__titre { color: var(--bois); }

.fiche__photo {
    border-radius: 2px; overflow: hidden; background: var(--page-creux);
    aspect-ratio: 4 / 5; margin-bottom: 1rem;
}
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; }

.fiche__titre {
    font-family: Fraunces, Georgia, serif;
    font-variation-settings: "SOFT" 30, "WONK" 1;
    font-weight: 600; font-size: var(--t-l); line-height: 1.1;
    letter-spacing: -0.012em; margin: 0 0 0.4rem; transition: color 0.15s ease;
}
.fiche__lieu { font-size: var(--t-s); color: var(--bois); margin: 0 0 0.5rem; }
.fiche__texte { font-size: var(--t-s); margin: 0; color: var(--encre-doux); }

/* ---------- Déroulé de chantier : une vraie séquence, donc numérotée ---------- */
.deroule { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); counter-reset: etape; }
@media (min-width: 48rem) { .deroule { grid-template-columns: repeat(3, 1fr); } }

.deroule > li { counter-increment: etape; padding-top: 1.1rem; border-top: 1px solid var(--trait); }
.deroule__etape {
    font-size: var(--t-s); font-weight: 600; color: var(--bois);
    display: block; margin-bottom: 0.35rem;
}
.deroule__etape::before { content: counter(etape) ". "; }
.deroule h3 { font-size: var(--t-l); margin-bottom: 0.55rem; }
.deroule p { font-size: var(--t-s); margin-bottom: 0; color: var(--encre-doux); }

/* ---------- Communes ---------- */
.communes { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 46rem; }
.communes li {
    border: 1px solid var(--trait); border-radius: 2px;
    padding: 0.34rem 0.78rem; font-size: var(--t-s); background: var(--page);
}
.sapin .communes li { border-color: color-mix(in srgb, var(--sur-sapin-doux) 35%, transparent); background: transparent; color: var(--sur-sapin-doux); }

/* ---------- Pages internes ---------- */
.entete-page { padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.entete-page h1 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.021em; margin-bottom: 1.1rem; }

.fil { font-size: var(--t-s); margin-bottom: 1.5rem; color: var(--encre-doux); }
.fil a { color: inherit; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.fil li + li::before { content: "/"; margin-right: 0.4rem; color: var(--trait); }

.metier { padding-block: clamp(2.75rem, 5vw, 4.25rem); border-top: 1px solid var(--trait); }
.metier__grille { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 56rem) { .metier__grille { grid-template-columns: 21rem minmax(0, 1fr); } }
.metier h2 { font-size: var(--t-xl); margin-bottom: 1rem; }
.metier__photo { border-radius: 2px; overflow: hidden; background: var(--page-creux); }
.metier__liste { font-size: var(--t-s); padding-left: 1.15rem; margin: 0.5rem 0 0; color: var(--encre-doux); }
.metier__soustitre { font-size: var(--t-s); font-weight: 600; color: var(--bois); margin-top: 1.5rem; }

.etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.3rem 0 0; padding: 0; }
.etiquettes li {
    font-size: var(--t-xs); border: 1px solid var(--trait); border-radius: 2px;
    padding: 0.26rem 0.62rem; color: var(--encre-doux);
}

/* Réalisation détaillée */
.realisation { padding-block: clamp(3rem, 5vw, 4.75rem); border-top: 1px solid var(--trait); }
.realisation__haut { display: grid; gap: 1.3rem clamp(2rem, 4vw, 3.5rem); margin-bottom: 2rem; }
@media (min-width: 56rem) { .realisation__haut { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.realisation h2 { font-size: var(--t-xl); margin-bottom: 0.45rem; }
.realisation__lieu { color: var(--bois); font-size: var(--t-s); margin-bottom: 0; }
.realisation__hors { color: var(--encre-doux); font-size: var(--t-s); font-style: italic; margin: 0.5rem 0 0; }
.realisation__texte { max-width: var(--mesure); }
.realisation__texte p { font-size: var(--t-s); color: var(--encre-doux); }

.chiffres { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; padding: 0; }
.chiffres li {
    font-size: var(--t-s); font-weight: 600;
    background: var(--sapin); color: var(--sur-sapin);
    border-radius: 2px; padding: 0.3rem 0.75rem;
}

.pellicule { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.pellicule li { border-radius: 2px; overflow: hidden; background: var(--page-creux); }
.pellicule img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Contact ---------- */
.contact__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 56rem) { .contact__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.coordonnees { margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.coordonnees dt { font-size: var(--t-s); font-weight: 600; color: var(--bois); margin-bottom: 0.2rem; }
.coordonnees dd { margin: 0; }
.coordonnees__valeur {
    font-family: Fraunces, Georgia, serif;
    font-variation-settings: "SOFT" 30, "WONK" 1;
    font-weight: 600; font-size: var(--t-l); letter-spacing: -0.012em;
    color: var(--encre); text-decoration: none;
}
a.coordonnees__valeur:hover { color: var(--bois); }

.rappel { background: var(--page-creux); border-left: 2px solid var(--bois); border-radius: 0 2px 2px 0; padding: 1.5rem 1.6rem; }
.rappel h2 { font-size: var(--t-l); margin-bottom: 0.8rem; }
.rappel ol { margin: 0; padding-left: 1.2rem; font-size: var(--t-s); color: var(--encre-doux); }
.rappel li { margin-bottom: 0.4rem; }

/* ---------- Pied de page ---------- */
.pied { background: var(--sapin-fonce); color: var(--sur-sapin-doux); font-size: var(--t-s); }
.pied a { color: var(--sur-sapin); }
.pied a:hover { color: var(--bois-clair); }
.pied h2 { font-size: var(--t-m); color: var(--sur-sapin); margin-bottom: 0.8rem; }
.pied__grille { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding-block: clamp(2.75rem, 5vw, 3.75rem); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pied__bas {
    border-top: 1px solid color-mix(in srgb, var(--sur-sapin-doux) 22%, transparent);
    padding-block: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--t-xs);
}

/* ---------- Contenu éditorial simple ---------- */
.texte-long { max-width: 42rem; padding-block: clamp(2rem, 4vw, 3rem); }
.texte-long h2 { font-size: var(--t-l); margin: 2.4rem 0 0.75rem; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long p, .texte-long li { font-size: var(--t-s); color: var(--encre-doux); }