/* ==========================================================================
   Fibre Herd — nouvelle identité (ident1, 10/10/2026, demande de Bertrand).
   Chargé APRÈS site.css (et fh-app.css) sur toutes les pages.
   - Header : identique partout (pages publiques ET pages connectées via layout.php).
   - Accent olive, héros, cartes, footer : pages publiques seulement (body.fh-public).
   Logo : fibre-herd-logo.svg (fichier de Bertrand, inchangé). Ses silhouettes sont
   des trous du carré : sur un bandeau de la même couleur, on glisse dessous
   fibre-herd-silhouettes.svg (les 3 mêmes sous-chemins, remplis de blanc).
   ========================================================================== */
:root {
  --id-olive: #6E8B4A;      /* bandeau, logo, accents décoratifs */
  --id-olive-text: #5C7640; /* texte / fonds de bouton : AA (5,1:1 avec du blanc) */
  --id-ink: #2C3820;        /* « Fibre » */
  --id-herd: #F7F4EE;       /* « Herd » */
  --id-cream: #F6F3EC;      /* héros, pastille « Essayer » */
  --id-foot: #24301C;       /* footer */
}

/* ---------- Nom + marque (CSS de Bertrand, tel quel) ---------- */
.word { font-family: Palatino, "Iowan Old Style", "Times New Roman", serif; font-size: 42px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
.word .fibre { color: #2C3820; font-style: italic; }
.word .herd { color: #F7F4EE; }
.mark { position: relative; width: 72px; height: 72px; flex: none; }
.beast { position: fixed; z-index: 5; pointer-events: none; opacity: 0; }
/* Le bandeau est sticky en z-index 1100 (site.css) : avec z-index 5 les silhouettes
   en vol passeraient DESSOUS. On les remonte juste au-dessus du bandeau. */
body > img.beast { z-index: 1101; }

/* ---------- Header ---------- */
.fh-header.fh-idh,
.fh-header.fh-idh.is-scrolled {
  background: #6E8B4A !important;
  background-color: #6E8B4A !important;
  border-bottom: 0;
}
.fh-header.fh-idh.is-scrolled { box-shadow: 0 2px 12px rgba(28, 36, 16, .22); }
.fh-idh .fh-idh-inner {
  max-width: var(--fh-chrome-max, 1400px);
  margin: 0 auto;
  padding: 8px 24px;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 8px 28px;
  position: relative;
}
.fh-idh a.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
  line-height: 1;
}
.fh-idh a.brand:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 10px; }
.fh-idh .mark > img {
  position: absolute;
  inset: 0;
  width: 72px;
  height: 72px;
  max-width: none;
  object-fit: contain;
  display: block;
}
.fh-idh .mark > .mark-fond { display: none; }
/* Accueil : carré vide au chargement (posé par le script de tête seulement si JS +
   mouvement autorisé). Sans JS ou en mouvement réduit, la classe n'existe pas :
   le logo complet est visible d'emblée, jamais un carré vide. */
html.fh-mark-wait .fh-idh .mark > .mark-sil,
html.fh-mark-wait .fh-idh .mark > .mark-logo { visibility: hidden; }
html.fh-mark-wait .fh-idh .mark > .mark-fond { display: block; }

.fh-idh .fh-idh-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.fh-idh .fh-idh-nav .fh-nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  padding: 0;
}
.fh-header.fh-idh .fh-nav-list > li > a,
.fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn {
  /* 19 px gras : texte « grand » au sens WCAG, blanc sur #6E8B4A = 3,85:1 (AA grand texte). */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: transparent;
  padding: 8px 12px;
  border-radius: 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.fh-header.fh-idh .fh-nav-list > li > a:hover,
.fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:hover,
.fh-header.fh-idh .fh-nav-list > li > a:focus-visible,
.fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:focus-visible {
  background: transparent;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .55);
}
.fh-header.fh-idh .fh-nav-list > li > a:focus-visible,
.fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Lien actif souligné en blanc */
.fh-header.fh-idh .fh-nav-list > li > a[aria-current="page"],
.fh-header.fh-idh .fh-nav-list > li.is-active > button.fh-nav-btn,
.fh-header.fh-idh .fh-nav-list > li.is-active > a {
  color: #fff;
  background: transparent;
  font-weight: 700;
  border-bottom-color: #fff;
}
.fh-header.fh-idh .fh-nav-btn .fh-caret { font-size: 11px; opacity: .85; margin-left: 2px; }
.fh-header.fh-idh .fh-dropdown { top: calc(100% + 2px); }
.fh-header.fh-idh .fh-dropdown a { font-size: 15px; color: #2C3820; }
.fh-header.fh-idh .fh-dropdown a:hover,
.fh-header.fh-idh .fh-dropdown a:focus-visible,
.fh-header.fh-idh .fh-dropdown a[aria-current="page"] { background: #EEF2E6; color: #2C3820; }

/* Sélecteur de langue : même élément qu'avant (i18n.js), à droite du menu */
.fh-header.fh-idh .fh-lang-wrap {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  flex: none;
  color: #fff;
}
.fh-header.fh-idh .fh-lang-btn,
.fh-header.fh-idh .fh-lang-wrap:not([data-fh-lang-ui="1"]) select {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  font-size: 19px;
  font-weight: 700;
  padding: 6px 12px;
}
.fh-header.fh-idh .fh-lang-wrap:not([data-fh-lang-ui="1"]) select option { color: #2C3820; }
.fh-header.fh-idh .fh-lang-btn:hover,
.fh-header.fh-idh .fh-lang-wrap.is-open .fh-lang-btn { background: rgba(255, 255, 255, .12); border-color: #fff; }
.fh-header.fh-idh .fh-lang-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fh-header.fh-idh .fh-lang-caret { color: #fff; }
.fh-header.fh-idh .fh-lang-label { display: none; } /* drapeau seul ; le nom reste dans aria-label */
.fh-header.fh-idh .fh-lang-menu { right: 0; left: auto; }

/* Droite : Connexion (contour blanc) + Essayer (pastille crème) */
.fh-idh .fh-idh-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.fh-header.fh-idh .fh-header-account {
  position: static;
  top: auto;
  right: auto;
  margin: 0;
  gap: 10px;
}
.fh-header.fh-idh .fh-header-account-link,
.fh-header.fh-idh .fh-header-account-link--primary {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}
.fh-header.fh-idh .fh-header-account-link:hover,
.fh-header.fh-idh .fh-header-account-link:focus-visible,
.fh-header.fh-idh .fh-header-account-link[aria-current="page"] {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: #fff;
}
.fh-header.fh-idh .fh-header-account-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fh-header.fh-idh .fh-header-account-link .fh-header-account-icon { display: none; }
.fh-header.fh-idh.fh-header--in .fh-header-account-link .fh-header-account-icon { display: block; }
.fh-header.fh-idh .fh-header-logout { color: #fff; font-size: 19px; font-weight: 700; }
.fh-header.fh-idh .fh-header-logout:hover { color: #fff; }
.fh-idh a.fh-idh-try {
  display: inline-flex;
  align-items: center;
  background: #F6F3EC;
  color: #5C7640;
  border: 2px solid #F6F3EC;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.fh-idh a.fh-idh-try:hover,
.fh-idh a.fh-idh-try:focus-visible { background: #fff; border-color: #fff; color: #4F6637; }
.fh-idh a.fh-idh-try:focus-visible { outline: 2px solid #2C3820; outline-offset: 2px; }
/* Éleveur connecté : le compte remplace « Connexion », « Essayer » n'a plus lieu d'être. */
.fh-header.fh-idh.fh-header--in a.fh-idh-try { display: none; }

.fh-header.fh-idh .fh-nav-toggle {
  display: none;
  position: static;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}
.fh-header.fh-idh .fh-nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bureau intermédiaire : on resserre */
@media (max-width: 1180px) and (min-width: 901px) {
  .fh-idh .fh-idh-inner { gap: 8px 16px; padding: 8px 16px; }
  .fh-header.fh-idh .fh-nav-list > li > a,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn { padding: 8px 8px; }
  .fh-idh .word { font-size: 36px; }
}

/* Smartphone / tablette : logo + nom, puis Menu ; Connexion et Essayer restent visibles */
@media (max-width: 900px) {
  .fh-idh .fh-idh-inner {
    flex-wrap: wrap;
    padding: 8px 14px 10px;
    min-height: 0;
    gap: 8px 10px;
  }
  .fh-idh a.brand { order: 0; flex: 0 0 100%; justify-content: center; }
  .fh-header.fh-idh .fh-nav-toggle { display: inline-flex; order: 1; }
  .fh-idh .fh-idh-actions { order: 2; margin-left: auto; gap: 8px; }
  .fh-header.fh-idh .fh-nav-toggle,
  .fh-header.fh-idh .fh-header-account-link,
  .fh-idh a.fh-idh-try { font-size: 19px; padding: 6px 12px; }
  .fh-header.fh-idh .fh-header-account-name { max-width: 7rem; }
  .fh-header.fh-idh .fh-header-logout { display: none; } /* reste dans Mon compte */
  .fh-idh .fh-idh-nav {
    order: 3;
    flex: 0 0 calc(100% + 28px);
    margin: 4px -14px -10px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: #F6F3EC;
    padding: 6px 14px 12px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
  .fh-idh .fh-idh-inner.nav-open .fh-idh-nav { display: flex; }
  .fh-idh .fh-idh-nav .fh-nav-list { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .fh-header.fh-idh .fh-nav-list > li > a,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn {
    color: #2C3820;
    width: 100%;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid #E2E6DC;
  }
  .fh-header.fh-idh .fh-nav-list > li > a:hover,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:hover,
  .fh-header.fh-idh .fh-nav-list > li > a:focus-visible,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:focus-visible { color: #2C3820; border-bottom-color: #E2E6DC; }
  .fh-header.fh-idh .fh-nav-list > li > a:focus-visible,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:focus-visible { outline-color: #2C3820; }
  .fh-header.fh-idh .fh-nav-list > li > a[aria-current="page"],
  .fh-header.fh-idh .fh-nav-list > li.is-active > button.fh-nav-btn,
  .fh-header.fh-idh .fh-nav-list > li.is-active > a { color: #2C3820; border-bottom: 2px solid #5C7640; }
  .fh-header.fh-idh .fh-dropdown { background: transparent; padding: 0 0 6px 12px; }
  .fh-header.fh-idh .fh-dropdown a { font-size: 16px; }
  .fh-header.fh-idh .fh-lang-wrap { padding: 10px 0 0; width: 100%; color: #2C3820; }
  .fh-header.fh-idh .fh-lang-btn,
  .fh-header.fh-idh .fh-lang-wrap:not([data-fh-lang-ui="1"]) select { color: #2C3820; border-color: #B8C2A8; font-size: 16px; }
  .fh-header.fh-idh .fh-lang-caret { color: #2C3820; }
  .fh-header.fh-idh .fh-lang-label { display: inline; }
  .fh-header.fh-idh .fh-lang-menu { left: 0; right: auto; }
  /* Barre compacte au défilement : la ligne du logo se replie (la marque reste sur la page). */
  .fh-header.fh-idh.is-scrolled a.brand { display: none; }
}
@media (max-width: 380px) {
  .fh-idh .word { font-size: 36px; }
  .fh-header.fh-idh .fh-nav-toggle,
  .fh-header.fh-idh .fh-header-account-link,
  .fh-idh a.fh-idh-try { padding: 6px 9px; }
}

/* ==========================================================================
   Pages publiques seulement (body.fh-public) : accent olive, héros, cartes.
   Les pages connectées (layout.php hors pages publiques) gardent leur palette.
   ========================================================================== */
body.fh-site.fh-public {
  --fh-green: #6E8B4A;
  --fh-green-dark: #5C7640;
  --fh-green-soft: #EEF2E6;
}
body.fh-site.fh-public a { color: #5C7640; }
body.fh-site.fh-public a:hover { color: #3F5229; }
body.fh-public .fh-btn-primary,
body.fh-public a.fh-btn-primary {
  background: #5C7640;
  border-color: #5C7640;
  color: #fff;
}
body.fh-public .fh-btn-primary:hover,
body.fh-public a.fh-btn-primary:hover { background: #4F6637; border-color: #4F6637; color: #fff; }
body.fh-public .fh-signup-demo { border-color: #6E8B4A; }
body.fh-public .fh-hist rect,
body.fh-public .fh-hero2 .fh-hero2-col { fill: #6E8B4A; }
/* Le header garde ses couleurs (les règles a{} publiques ne doivent pas le toucher) */
body.fh-public .fh-header.fh-idh .fh-nav-list > li > a,
body.fh-public .fh-header.fh-idh .fh-header-account-link,
body.fh-public .fh-header.fh-idh .fh-header-logout { color: #fff; }
body.fh-public .fh-header.fh-idh .fh-dropdown a { color: #2C3820; }
body.fh-public .fh-header.fh-idh a.fh-idh-try { color: #5C7640; }
@media (max-width: 900px) {
  body.fh-public .fh-header.fh-idh .fh-nav-list > li > a { color: #2C3820; }
}

/* ---------- Accueil : héros crème ---------- */
body.fh-public .fh-hero2 {
  background: #F6F3EC;
  box-shadow: 0 0 0 100vmax #F6F3EC;
  clip-path: inset(0 -100vmax);
}
body.fh-public .fh-hero2 .fh-hero2-eyebrow {
  color: #5C7640;
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: none;
}
body.fh-public .fh-hero2 .fh-hero2-title { font-family: Palatino, "Iowan Old Style", "Times New Roman", serif; color: #2C3820; }
body.fh-public .fh-hero2 a.fh-hero2-cta {
  background: #5C7640;
  border-color: #5C7640;
  color: #fff;
}
body.fh-public .fh-hero2 a.fh-hero2-cta:hover,
body.fh-public .fh-hero2 a.fh-hero2-cta:focus-visible { background: #4F6637; border-color: #4F6637; color: #fff; }
body.fh-public .fh-hero2 .fh-hero2-cta-aside { color: #2C3820; }

/* Huit volets en quatre cartes (textes existants de la visite) */
.fh-volets {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.fh-volets > li {
  background: #fff;
  border: 1px solid #E2E6DC;
  border-top: 4px solid #6E8B4A;
  border-radius: 12px;
  padding: 14px 16px 12px;
  min-width: 0;
}
.fh-volets dl { margin: 0; }
.fh-volets dt {
  margin: 0;
  font-family: Palatino, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2C3820;
  overflow-wrap: anywhere;
}
.fh-volets dd { margin: 2px 0 10px; color: #4a4f42; font-size: .95rem; overflow-wrap: anywhere; }
.fh-volets dd:last-child { margin-bottom: 0; }
@media (max-width: 960px) { .fh-volets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fh-volets { grid-template-columns: 1fr; } }

/* ---------- Footer #24301C (toutes les pages : footer identique partout) ---------- */
.fh-footer.fh-idf {
  background: #24301C;
  color: #D3DCC6;
  border-top: 0;
  padding: 2.5rem 1.25rem 1.5rem;
}
.fh-footer.fh-idf .fh-footer-grid { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
.fh-footer.fh-idf .fh-footer-heading { color: #B9C9A0; }
.fh-footer.fh-idf a,
body.fh-site .fh-footer.fh-idf a { color: #E6EADF; text-decoration: none; }
.fh-footer.fh-idf a:hover,
body.fh-site .fh-footer.fh-idf a:hover,
.fh-footer.fh-idf a:focus-visible { color: #fff; text-decoration: underline; }
.fh-footer.fh-idf a[aria-current="page"],
body.fh-site .fh-footer.fh-idf a[aria-current="page"] { color: #fff; font-weight: 700; text-decoration: underline; }
.fh-footer.fh-idf .fh-footer-brand { color: #F7F4EE; margin-bottom: .5rem; }
.fh-footer.fh-idf .fh-footer-brand .word { font-size: 30px; }
.fh-footer.fh-idf .fh-footer-brand .word .fibre { color: #B9C9A0; }
.fh-footer.fh-idf .fh-footer-brand .word .herd { color: #F7F4EE; }
.fh-footer.fh-idf .fh-footer-desc { color: #D3DCC6; }
.fh-footer.fh-idf .fh-footer-sep { color: #6E8B4A; }
.fh-footer.fh-idf .fh-footer-bottom { border-top-color: rgba(211, 220, 198, .25); }
.fh-footer.fh-idf .fh-footer-copy { color: #D3DCC6; }
@media (max-width: 1100px) { .fh-footer.fh-idf .fh-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fh-footer.fh-idf .fh-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fh-footer.fh-idf .fh-footer-grid { grid-template-columns: 1fr; } }