/* ---------------------------------------------------------
   LES BERGERIES DE SÈTE — styles propres à : 08-carnet-de-bord
   Chargé après main.css.
   --------------------------------------------------------- */

.scroll-cue{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.8);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue i{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));animation:cue 2.4s ease-in-out infinite}
.pathcard h3{color:#fff;font-size:clamp(26px,3.2vw,38px);font-weight:300}
@media (max-width:760px){
  .scroll-cue{display:none}
}
.pathcard h3{white-space:nowrap;font-size:clamp(19px,2.3vw,27px)}
/* ======== PAGE CARNET DE BORD (WordPress) ======== */
.hero--carnet{min-height:100svh}
.hero--carnet .hero__inner{max-width:720px}
/* filtres de catégorie */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:clamp(34px,4.4vw,50px)}
.filter{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;
  padding:11px 22px;border:1px solid var(--line-strong);border-radius:30px;background:transparent;color:var(--ink-soft);
  cursor:pointer;transition:.28s var(--ease)}
.filter:hover{border-color:var(--terra);color:var(--terra)}
.filter.is-active{background:var(--pine);border-color:var(--pine);color:var(--cream)}
/* grille d articles */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.post:hover{box-shadow:var(--shadow-soft);transform:translateY(-4px)}
.post[hidden]{display:none}
.post__ph{display:block;height:210px;overflow:hidden}
.post__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post:hover .post__ph img{transform:scale(1.05)}
.post__body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.post__cat{align-self:flex-start;font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:9.5px;color:var(--olive);border:1px solid var(--line-strong);
  border-radius:20px;padding:4px 12px;margin-bottom:14px}
.post h3{font-size:clamp(20px,2vw,24px);font-weight:400;line-height:1.24;margin-bottom:10px}
.post h3 a:hover{color:var(--terra)}
.post__x{font-size:14px;color:var(--ink-soft);font-weight:300;line-height:1.65;margin-bottom:16px}
.post__meta{font-size:11px;letter-spacing:.06em;color:var(--ink-mute);margin-bottom:18px}
.post__meta .dot{margin:0 7px;color:var(--line-strong)}
.post .link-arrow{margin-top:auto}
.posts__empty{text-align:center;margin-top:40px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-mute)}
/* gabarit article */
.tpl{max-width:760px;margin:clamp(34px,4.4vw,52px) auto 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(30px,4vw,52px)}
.tpl__head{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:24px}
.tpl__head h3{font-size:clamp(24px,3vw,34px);font-weight:300;margin:4px 0 12px;line-height:1.2}
.tpl__chapo{font-family:var(--serif);font-size:clamp(18px,2vw,22px);font-style:italic;color:var(--pine);
  line-height:1.55;margin-bottom:22px}
.tpl__body p{font-size:15px;color:var(--ink-soft);font-weight:300;line-height:1.8;margin-bottom:16px}
.tpl__cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.tpl__cta span{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-mute)}
@media(max-width:1000px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.posts{grid-template-columns:1fr}.tpl__cta{flex-direction:column;align-items:flex-start}}
/* ---- Indicateur de défilement : souris + point qui descend et remonte ---- */
.scroll-cue{color:rgba(255,255,255,.88);gap:11px;left:50%;right:auto;transform:translateX(-50%);
  align-items:center;bottom:clamp(26px,4vh,46px);z-index:11}
.scroll-cue i{display:none}
@keyframes scrollDot{
  0%  {transform:translateY(0);   opacity:0}
  18% {opacity:1}
  50% {transform:translateY(14px);opacity:1}
  82% {opacity:1}
  100%{transform:translateY(0);   opacity:0}
}
@media(max-width:760px){
  .scroll-cue{display:none}
}