/* Mise en page inspirée du thème « Twenty Fourteen » de l’ancien site */
:root {
    --brun: #7b5f43;
    --brun-clair: #e4d8c6;
    --vert: #24890d;
    --vert-actif: #41a62a;
    --texte: #2b2b2b;
    --gris: #777;
    --largeur: 1226px;      /* 981 px × 1,25 */
    --col-gauche: 17.64%;   /* 173 / 981 : la colonne reste proportionnelle */
    --col-texte: 520px;     /* 416 px × 1,25 */
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background-color: #4b3b2b;           /* + image de fond répétée, définie dans l’en-tête */
    color: var(--texte);
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 19px;
}
img { max-width: 100%; height: auto; }
a { color: var(--vert); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cadre */
.page {
    max-width: var(--largeur); margin: 0 auto; min-height: 100vh; background: #fff;
    display: flex; flex-direction: column; box-shadow: 0 0 61px 12px rgba(0, 0, 0, .9);   /* ombre large sur le fond brun */
}
/* Bandeau-logo pleine largeur : le fond reproduit la colonne brune + la zone blanche */
.entete {
    display: block; aspect-ratio: 981 / 82; overflow: hidden;
    /* 173 / 981 = 17,64 % : la colonne brune suit l’image quand elle se redimensionne */
    background: linear-gradient(to right, var(--brun) 17.64%, #fff 17.64%);
}
.entete img { display: block; width: 100%; height: auto; max-width: none; }
/* Repli si l’image du logo est introuvable : bandeau de même hauteur avec le nom en texte */
.logo-texte { display: none; }
.entete.sans-logo { display: flex; align-items: center; }
.entete.sans-logo .logo-texte { display: block; width: var(--col-gauche); padding-left: 16px; box-sizing: border-box; color: #fff; font: 700 26px/1 Georgia, "Times New Roman", serif; letter-spacing: .04em; text-decoration: none; }

.corps { flex: 1; display: grid; grid-template-columns: var(--col-gauche) minmax(0, 1fr); }
.droite { min-width: 0; display: flex; flex-direction: column; }

/* Colonne de gauche */
.sidebar { background: var(--brun); color: #fff; padding: 20px 0 28px; }
.sidebar p { margin: 0; padding: 0 16px 0 23px; }
.site-titre { font-size: calc(14px + 2pt); font-weight: 700; }
.site-titre a { color: #fff; text-decoration: none; }
.site-baseline { margin-top: 8px !important; font-size: calc(10px + 2pt); line-height: 18px; text-transform: uppercase; color: var(--brun-clair); }
.widget-texte { margin-top: 14px; padding: 0 16px 0 23px; font-size: calc(10.5px + 2pt); line-height: 19px; }
.widget-texte p { padding: 0; margin: 0 0 10px; }
.widget-texte a { color: #fff; }
.appel { margin-top: 22px !important; font-size: calc(12px + 2pt); font-weight: 700; line-height: 22px; text-transform: uppercase; color: var(--brun-clair); }
.appel a { color: #fff; text-decoration: none; }
.nuage { margin-top: 22px; padding: 12px 12px 0 18px; border-top: 1px solid rgba(255,255,255,.35); }
.nuage h2 { margin: 0 0 8px; font-size: calc(9px + 2pt); line-height: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: var(--brun-clair); }
.nuage p { padding: 0; text-align: center; line-height: 1.25; }
.nuage a { display: inline-block; margin: 0 3px 3px; color: #fff; text-decoration: none; }
.nuage a:hover, .nuage a.active { color: #b9e8a8; text-decoration: underline; }

/* Menu */
.navbar { background: var(--brun); height: 38px; display: flex; justify-content: flex-end; position: relative; z-index: 20; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; }
.menu li { position: relative; }
.menu a {
    display: block; line-height: 38px; padding: 0 10px; color: #fff; text-decoration: none;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: -.01em;
}
.menu a:hover, .menu a.active { color: var(--vert-actif); }

.a-sous-menu { display: flex; align-items: center; }
.a-sous-menu > a { padding-right: 2px; }
/* Flèche du sous-menu : un <label> qui coche une case invisible (aucun JavaScript, fonctionne au toucher) */
.sm-case { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.deplier { display: flex; align-items: center; justify-content: center; width: 26px; height: 38px; color: #fff; cursor: pointer; }
.sm-case:focus-visible + .deplier { outline: 2px solid var(--vert-actif); outline-offset: -2px; }
.deplier::after { content: ""; display: inline-block; border: 3.5px solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: middle; transition: transform .15s; }
.sm-case:checked + .deplier::after { transform: rotate(180deg); }
.deplier:hover { color: var(--vert-actif); }
/* Replié par défaut ; ouvert au survol (souris) ou au clic sur la flèche */
/* « .menu » est répété pour l’emporter sur la règle « .menu ul { display: flex } » */
.menu .sous-menu { display: none; position: absolute; top: 38px; right: 0; z-index: 30; min-width: 190px; background: var(--brun); flex-direction: column; box-shadow: 0 3px 6px rgba(0,0,0,.3); }
/* Ouvert : par la case cochée (toucher, clavier) ; au survol seulement pour les appareils à souris,
   sinon le « survol » reste collé après un appui sur écran tactile */
.menu .sm-case:checked ~ .sous-menu { display: flex; }
@media (hover: hover) { .menu .a-sous-menu:hover > .sous-menu { display: flex; } .a-sous-menu:hover .deplier { color: var(--vert-actif); } }
.menu .sous-menu a { line-height: 20px; padding: 7px 14px; }

.recherche summary { list-style: none; cursor: pointer; width: 38px; height: 38px; background: var(--vert); display: grid; place-items: center; }
.recherche summary::-webkit-details-marker { display: none; }
.recherche form { position: absolute; right: 0; top: 38px; background: var(--vert); padding: 8px; }
.recherche input { font: inherit; padding: 6px 8px; border: 0; width: 200px; }

/* Contenu */
main { flex: 1; padding-bottom: 24px; }
.hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.titre-page, .colonne, .titre-entree { width: min(var(--col-texte), 100%); margin-left: auto; margin-right: auto; }
.titre-page, .colonne { padding-left: 24px; padding-right: 24px; }
.titre-page { position: relative; background: #fff; margin-top: -38px; }
.titre-page.sans-hero { margin-top: 24px; }
.titre-page h1 { margin: 0; padding: 12px 0 8px; font-size: 28px; line-height: 36px; font-weight: 300; text-transform: uppercase; color: var(--texte); }
.colonne h2 { font-size: 19px; line-height: 24px; font-weight: 700; margin: 14px 0 12px; color: var(--texte); }
.colonne h3 { font-size: 15px; margin: 18px 0 10px; }
.colonne p { margin: 0 0 19px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.bloc { overflow: hidden; margin-bottom: 8px; }
.bloc .flotte { float: left; width: 118px; margin: 4px 18px 10px 0; }
.colonne .bandeau { display: block; width: 100%; margin: 6px 0 20px; }

/* Page « Réalisations » : liste verticale, image pleine largeur + titre qui la chevauche */
.entree { margin-bottom: 78px; }
.entree-img { display: block; }
.entree-vide { display: block; aspect-ratio: 16 / 9; background: #e8e1d6; }
.entree-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e8e1d6; }
.titre-entree { position: relative; margin-top: -38px; margin-bottom: 0; padding: 12px 24px 8px; background: #fff;
    font-size: 28px; line-height: 36px; font-weight: 300; text-transform: uppercase; color: var(--texte); }
.titre-entree a { color: var(--texte); text-decoration: none; }
.titre-entree a:hover { color: var(--vert); }
.filtre-info { margin: 0; padding: 12px 24px; background: #f4efe8; }
.filtre-info + .filtre-info { border-top: 1px solid #e3dacb; }

.tags-fiche { list-style: none; margin: 14px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags-fiche a { display: inline-block; padding: 1px 10px; border: 1px solid #bba88f; border-radius: 99px; text-decoration: none; color: #5b4630; font-size: 12px; }
.tags-fiche a:hover { background: var(--brun); border-color: var(--brun); color: #fff; }
.mots-cles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 22px 0 8px; }
.mc-label { font-weight: 700; }
.mots-cles .tags-fiche { margin: 0; }
.photos { margin: 8px 0 12px; }
.photos figure { margin: 0 0 6px; }
/* Photos 02, 03… : 25 % moins larges que la photo principale, centrées */
.photos img { display: block; width: 75%; height: auto; margin: 0 auto; }
/* Flèches de navigation : plus grandes, zone de clic élargie */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: 18px 0 4px; }
.pager a, .retour a { display: inline-block; padding: 10px 0; font-size: 17px; line-height: 24px; text-decoration: none; }
.pager a:hover, .retour a:hover { text-decoration: underline; }
.retour { margin: 0 0 10px !important; text-align: left !important; }

.evt { margin: 0 0 14px !important; text-align: left !important; }
.evt-date { color: var(--gris); }
.note { color: var(--gris); font-style: italic; }

/* Contact */
address { font-style: normal; margin-bottom: 20px; }

.pied { text-align: center; font-size: 11px; color: var(--gris); padding: 8px 12px 18px; }
.pied p { margin: 0; }

/* Bandeau d’information « aucun cookie » : affiché sur toutes les pages, disparaît seul après 5 s */
.avis {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    padding: 10px 16px; background: #2f3441; color: #fff; font-size: 12px; line-height: 17px; text-align: center;
    animation: avis-sortie .6s ease 5s forwards;
}
.avis p { margin: 0; }
.avis strong { color: #7ee0c3; }
@keyframes avis-sortie {
    to { opacity: 0; visibility: hidden; transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .avis { animation-duration: .01s; }
}

/* Écrans étroits */
@media (max-width: 1007px) {
    /* Téléphone / tablette : le menu passe juste sous le logo, AVANT la colonne de gauche.
       « .droite » devient transparent pour que ses blocs (menu, contenu, pied) se rangent
       directement dans « .corps » ; l'ordre est alors fixé par « order ». */
    .corps { display: flex; flex-direction: column; }
    .droite { display: contents; }
    .navbar { order: 1; }
    .sidebar { order: 2; }
    main { order: 3; }
    .pied { order: 4; }
    .sidebar { padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, .2); }
    .sidebar p, .widget-texte { padding-left: 0; padding-right: 0; }
    .appel { margin-top: 14px !important; }
    .nuage { padding-left: 0; padding-right: 0; }
    .navbar { height: auto; flex-wrap: wrap; justify-content: space-between; }
    .menu ul { flex-wrap: wrap; }
    .menu .sous-menu { right: auto; left: 0; }
}
@media (max-width: 520px) {
    .photos img { width: 100%; }
    .titre-page h1, .titre-entree { font-size: 22px; line-height: 30px; }
    .bloc .flotte { float: none; display: block; margin: 0 0 12px; }
}

/* ------------------------------------------------------------------
   Diaporama sans JavaScript (voir includes/diaporama.php)
   Les boutons radio masqués mémorisent l’état ; le CSS fait le reste.
   ------------------------------------------------------------------ */
.diaporama { position: relative; margin: 8px 0 22px; }
.diaporama > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.diaporama > input:focus-visible ~ .viewport { outline: 3px solid var(--vert-actif); outline-offset: -3px; }

.diaporama .viewport { position: relative; width: 100%; aspect-ratio: 3 / 2; max-height: 78vh; overflow: hidden; background: transparent; }
.diaporama .viewport figure { position: absolute; inset: 0; margin: 0; opacity: 0; }
.diaporama .viewport figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.diaporama-seul .viewport figure { opacity: 1; }
.diaporama .viewport:hover figure { animation-play-state: paused; }       /* pause au survol */

/* Mode manuel : le défilement automatique s’arrête, seule la photo choisie reste visible */
.diaporama input.m:checked ~ .viewport figure { animation: none; opacity: 0; }

/* Flèches (affichées seulement en mode manuel, pour la photo en cours) */
.diaporama .fl {
    display: none; position: absolute; top: 50%; z-index: 5; width: 58px; height: 76px; margin-top: -38px;
    align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff;
    font-size: 48px; line-height: 1; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.diaporama .fl.prec { left: 0; }
.diaporama .fl.suiv { right: 0; }
.diaporama .fl:hover { background: rgba(0,0,0,.75); }

/* Barre de commandes */
.diaporama .controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 24px 0; }
.diaporama .etat-manuel { display: none; }
.diaporama input.m:checked ~ .controles .etat-auto { display: none; }
.diaporama input.m:checked ~ .controles .etat-manuel { display: inline-block; }
.diaporama .lecture { cursor: pointer; color: var(--vert); text-decoration: underline; font-weight: 700; }
.diaporama .points { display: flex; flex-wrap: wrap; gap: 6px; }
.diaporama .pt {
    display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #bba88f; border-radius: 50%;
    font-size: 12px; color: #5b4630; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.diaporama .pt:hover { background: #f4efe8; }

/* « Moins d’animations » : pas de défilement automatique, la 1re photo reste affichée */
@media (prefers-reduced-motion: reduce) {
    .diaporama .viewport figure { animation: none !important; }
    .diaporama .viewport figure:first-child { opacity: 1; }
    .diaporama input.m:checked ~ .viewport figure:first-child { opacity: 0; }
    .diaporama .etat-auto { display: none; }
}
@media (max-width: 520px) {
    .diaporama .fl { width: 44px; height: 60px; margin-top: -30px; font-size: 38px; }
    .diaporama .controles { padding: 12px 12px 0; }
}