/* ============================================================
   Direction visuelle 2 — Végétale, grandes photos
   ------------------------------------------------------------
   Registre : magazine horticole. En-tête plein cadre en photo,
   palette terreuse (mousse, écorce, crème), sérif éditorial,
   grands blancs, arrondis organiques.

   PHOTOS
   ------
   Les variables --photo-hero et --photo-band ci-dessous ne
   contiennent que l'IMAGE. Le voile sombre qui garantit la
   lisibilité du texte est appliqué par la feuille, pas par la
   variable. Chemins relatifs à ce fichier
   (assets/css/themes/) → « ../../img/ », donc indépendants du
   préfixe d'installation. Dégradé de repli conservé en dernière
   position si l'image ne charge pas.

   Feuille complète et autonome. Permutation : voir ../main.css
   ============================================================ */

:root {
    --photo-hero:
        url("../../img/galery3.jpg"),
        linear-gradient(160deg, #3a7a4a 0%, #24512f 45%, #16301f 100%);
    --photo-band:
        url("../../img/galery2.jpg"),
        linear-gradient(160deg, #2f6b3f, #16301f);
    /* Voile sombre posé sur le diaporama d'en-tête (assets/css/site.css),
       identique à celui du fond .site-header ci-dessous. */
    --hero-overlay:
        linear-gradient(rgba(15, 30, 20, .30), rgba(15, 30, 20, .72));

    --bark:      #3c2f26;
    --moss:      #4c5f3a;
    --leaf:      #2f6b3f;
    --leaf-dark: #1f3d2b;
    --cream:     #f7f4ec;
    --cream-2:   #efe9db;
    --ink:       #26221d;
    --ink-soft:  #5c554b;
    --serif:     "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans:      system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.15rem;
    line-height: 1.75;
}

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

/* --- Lien d'évitement --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--leaf-dark);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 .6rem 0;
}
.skip-link:focus { left: 0; z-index: 10; }

/* --- En-tête plein cadre --- */
.site-header {
    position: relative;
    min-height: 40vh;
    padding: 1.5rem clamp(1.2rem, 5vw, 4rem);
    /* Voile sombre (lisibilité) au-dessus de la photo, puis dégradé de repli. */
    background-image:
        linear-gradient(rgba(15,30,20,.30), rgba(15,30,20,.72)),
        var(--photo-hero);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas:
        ".        ."
        "name     name"
        "baseline baseline"
        "nav      nav";
    gap: 1rem;
}
/* Cette direction a un en-tête plein cadre : on active le diaporama
   (mécanique dans assets/css/site.css). Les images recouvrent alors le
   fond .site-header ci-dessus, qui reste le repli si le dossier
   assets/img/hero/ est vide. */
.site-header .hero-slideshow { display: block; }
.site-name {
    grid-area: name;
    align-self: end;
    margin: 0;
    font-size: clamp(2.4rem, 1.5rem + 4vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.site-name a { color: #fff; text-decoration: none; }

.site-baseline {
    grid-area: baseline;
    margin: 0;
    font-family: var(--sans);
    font-size: 1rem;
    letter-spacing: .04em;
    opacity: .92;
}

/* --- Navigation principale --- */
.main-nav { grid-area: nav; }
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.main-nav a {
    display: block;
    padding: .55rem 1.05rem;
    border-radius: 2rem;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-family: var(--sans);
    font-size: .95rem;
    text-decoration: none;
}
.main-nav a:hover { background: rgba(255,255,255,.28); }
.main-nav a[aria-current="page"] {
    background: #fff;
    color: var(--leaf-dark);
    font-weight: 700;
}

/* --- Sélecteur de langue (fixe en haut à droite, visible au défilement) --- */
/* Le fond (voile sombre pour le contraste) épouse le texte des langues :
   marge intérieure juste suffisante, pas d'alignement sur le bord de page. */
.lang-switcher {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    padding: .3rem .7rem .35rem;
    background: rgba(15, 30, 20, .72);
    border-radius: 0 0 0 .5rem;
}
.lang-switcher ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .6rem;
    font-family: var(--sans);
    font-size: .85rem;
}
.lang-switcher a { color: #fff; opacity: .8; text-decoration: none; }
.lang-switcher a:hover { opacity: 1; }
.lang-switcher a[aria-current="true"] {
    opacity: 1;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Contenu --- */
main {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.2rem, 5vw, 3rem);
}
h1 {
    margin: 0 0 1.2rem;
    color: var(--leaf-dark);
    font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
    line-height: 1.15;
}
h1 + p {
    font-size: 1.3rem;
    color: var(--ink-soft);
}
h2 {
    position: relative;
    margin: 3rem 0 .8rem;
    padding-left: 1.7rem;
    color: var(--bark);
    font-size: 1.6rem;
}
h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 1rem;
    height: 1rem;
    background: var(--leaf);
    border-radius: 0 60% 60% 60%;   /* pastille « feuille » */
    transform: rotate(45deg);
}
p { margin: 0 0 1.2rem; }

main a { color: var(--leaf); text-underline-offset: 3px; }
main a:hover { color: var(--leaf-dark); }

section { margin-top: 1.5rem; }
address { font-style: normal; font-family: var(--sans); line-height: 1.9; }

/* --- Bande photo / pied de page --- */
.site-footer {
    margin-top: 4rem;
    padding: 3.5rem clamp(1.2rem, 5vw, 4rem);
    background-image:
        linear-gradient(rgba(15,30,20,.55), rgba(15,30,20,.55)),
        var(--photo-band);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    font-family: var(--sans);
}
.site-footer address strong {
    display: block;
    margin-bottom: .2rem;
    font-size: 1.1rem;
}
.site-footer a { color: #fff; }
.footer-public { margin-top: 1.4rem; }
.footer-rights { margin-top: 1.4rem; font-size: .85rem; opacity: .8; }

/* --- Petit écran --- */
@media (max-width: 40em) {
    body { font-size: 1.05rem; }
    .site-header { min-height: 44vh; }
    .site-name { font-size: clamp(2rem, 1.2rem + 6vw, 3rem); }
}