/* Les Tondeuses Laineuses — feuille de style (octobre 2026) */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --pre: #22423a;          /* vert salopette de berger */
  --pre-fonce: #182f29;
  --herbe: #3d6a56;
  --laine: #ecebe4;        /* fond de section, laine lavée */
  --laine-chaude: #eae4d6; /* laine brute de la photo d'en-tête */
  --papier: #f8f8f4;
  --boucle: #f1c232;       /* jaune des boucles d'oreille */
  --fauve: #6e3b24;        /* tête des Solognotes */
  --encre: #1d2925;
  --encre-douce: #46524c;
  --filet: rgba(34, 66, 58, 0.18);

  --titre: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --largeur: 1180px;
  --marge: clamp(1.25rem, 4vw, 2.5rem);
  --rayon: 14px;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

a { color: var(--herbe); text-underline-offset: 0.18em; }
a:hover { color: var(--pre); }

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

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 600;
  color: var(--pre);
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

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

.enveloppe {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section { padding-block: clamp(4rem, 9vw, 7rem); }

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(248, 248, 244, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}

.entete .enveloppe {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--pre);
  text-decoration: none;
  white-space: nowrap;
}
.marque img { width: 34px; height: 34px; mix-blend-mode: multiply; }

.nav {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
  font-size: 0.95rem;
}
.nav a { color: var(--encre); text-decoration: none; }
.nav a:hover { color: var(--herbe); text-decoration: underline; }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7em 1.15em;
  border-radius: 999px;
  background: var(--boucle);
  color: var(--encre);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.bouton:hover { background: #e4b21c; color: var(--encre); }
.bouton svg { width: 1.05em; height: 1.05em; flex: none; }

.bouton--ligne {
  background: transparent;
  color: var(--pre);
  box-shadow: inset 0 0 0 2px var(--pre);
}
.bouton--ligne:hover { background: var(--pre); color: #fff; }

.entete .bouton { padding: 0.5em 1em; font-size: 0.95rem; }

@media (max-width: 960px) {
  .nav { display: none; }
  .entete .bouton { margin-left: auto; }
}
@media (max-width: 420px) {
  .marque span { font-size: 1rem; }
  .entete .bouton { padding: 0.5em 0.8em; }
}

/* ---------- Héros ---------- */

.heros {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  min-height: min(84vh, 800px);
  background: var(--laine-chaude);
}

.heros__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 42%;
}

.heros__texte {
  align-self: center;
  padding: 3rem var(--marge) 3.5rem clamp(2rem, 4vw, 4rem);
  max-width: 620px;
}

.heros h1 {
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 1.4rem;
}
.heros h1 span { display: block; }

.heros__accroche {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--encre);
  margin-bottom: 2.25rem;
  max-width: 26ch;
}

/* Boucle d'identification : l'étiquette jaune portée par les brebis */
.boucle {
  display: block;
  width: fit-content;
  position: relative;
  background: var(--boucle);
  color: var(--encre);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 1.7em 1.3em 1em;
  border-radius: 0.7em 0.7em 1.5em 1.5em;
  max-width: 10rem;
  text-align: center;
  transform: rotate(-3deg);
  transform-origin: 50% 0;
  -webkit-mask: radial-gradient(circle at 50% 0.85em, transparent 0.34em, #000 0.37em);
          mask: radial-gradient(circle at 50% 0.85em, transparent 0.34em, #000 0.37em);
  margin-bottom: 2rem;
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 860px) {
  .heros { display: block; min-height: 0; }
  .heros__photo { height: auto; aspect-ratio: 4 / 3; object-position: 34% 50%; }
  .heros__texte { position: relative; max-width: none; padding: 2.25rem var(--marge) 3rem; }
  .heros__accroche { max-width: none; }
  .boucle { position: absolute; top: -3.4rem; right: var(--marge); margin: 0; font-size: 0.85rem; }
}

/* ---------- Introduction ---------- */

.intro .enveloppe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.intro__texte {
  max-width: 62ch;
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  line-height: 1.6;
}
.intro__texte strong { color: var(--pre); }

@media (min-width: 960px) {
  .intro .enveloppe { grid-template-columns: 1fr 2fr; }
  .intro__texte { grid-column: 2; }
}

/* ---------- Services ---------- */

.services { background: var(--laine); }

.services__grille {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}

.service img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon);
  margin-bottom: 1.1rem;
  background: #d9dbd2;
}
.service p { color: var(--encre-douce); }

@media (min-width: 620px) {
  .services__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service--principal { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .services__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service--principal {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.75rem;
    align-items: stretch;
  }
  .service--principal img { margin-bottom: 0; height: 100%; aspect-ratio: auto; min-height: 300px; }
  .service--principal > div { align-self: end; }
  .service--principal h3 { font-size: 1.65rem; }
}

/* ---------- Les Solognotes ---------- */

.troupeau { position: relative; background: var(--pre); }

.troupeau__photo {
  width: 100%;
  height: clamp(420px, 78vh, 760px);
  object-fit: cover;
  object-position: 50% 30%;
}

.troupeau__texte {
  position: absolute;
  left: max(var(--marge), calc((100vw - var(--largeur)) / 2));
  bottom: clamp(2rem, 5vw, 4rem);
  max-width: 34rem;
  background: var(--pre);
  color: #fff;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--rayon);
  font-size: 1.12rem;
}
.troupeau__texte h2 { color: #fff; margin-bottom: 1rem; }

@media (max-width: 760px) {
  .troupeau__photo { height: auto; aspect-ratio: 3 / 2; }
  .troupeau__texte {
    position: static;
    max-width: none;
    border-radius: 0;
    padding: 2.25rem var(--marge) 3rem;
  }
}

/* ---------- Pourquoi choisir l'éco-pâturage ---------- */

.avantage {
  display: grid;
  gap: 0.75rem 3rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--filet);
}
.avantage:last-child { border-bottom: 1px solid var(--filet); }
.avantage h3 { margin: 0; }
.avantage__texte { max-width: 68ch; }

@media (min-width: 860px) {
  .avantage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .avantage h3 { font-size: 1.45rem; }
}

/* ---------- Bien-être animal ---------- */

.bien-etre {
  display: grid;
  background: var(--pre);
  color: #fff;
}

.bien-etre__photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 30% 55%;
}

.bien-etre__texte {
  padding: clamp(3rem, 7vw, 5.5rem) var(--marge);
  max-width: 40rem;
}
.bien-etre__texte h2 { color: #fff; }
.bien-etre__texte strong { color: var(--boucle); font-weight: 600; }

.puces { list-style: none; margin: 0 0 1em; padding: 0; }
.puces li { position: relative; padding-left: 1.5em; margin-bottom: 0.35em; }
.puces li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--boucle);
}

.bien-etre a:focus-visible,
.contact a:focus-visible,
.pied a:focus-visible { outline-color: var(--boucle); }

@media (min-width: 900px) {
  .bien-etre { grid-template-columns: 1fr 1fr; }
  .bien-etre__photo { min-height: 640px; }
}

/* ---------- Entreprises et collectivités ---------- */

.entreprises h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.18;
  max-width: 30ch;
}

.entreprises__corps {
  display: grid;
  gap: 2rem 4rem;
}

.entreprises .puces li { margin-bottom: 0.9em; }
.entreprises .puces li::before { background: var(--herbe); }

@media (min-width: 960px) {
  .entreprises__corps { grid-template-columns: 1fr 1fr; }
}

/* ---------- Contact ---------- */

.contact {
  background: var(--pre);
  color: #fff;
}
.contact h2 { color: #fff; }

.coordonnees {
  display: grid;
  gap: 1.75rem 3rem;
  margin: 0;
}
.coordonnees dt { font-size: 0.95rem; color: rgba(255, 255, 255, 0.72); margin-bottom: 0.3rem; }
.coordonnees dd {
  margin: 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.coordonnees a { color: #fff; text-decoration-color: var(--boucle); text-decoration-thickness: 2px; }
.coordonnees a:hover { color: var(--boucle); }

@media (min-width: 900px) {
  .coordonnees { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(3rem, 6vw, 5.5rem); }
  .coordonnees dd { overflow-wrap: normal; }
}

/* ---------- Pied de page ---------- */

.pied {
  background:
    linear-gradient(rgba(24, 47, 41, 0.9), rgba(24, 47, 41, 0.9)),
    url("img/brebis-ecopaturage-960.jpg") 85% 50% / cover;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  padding-block: 2rem;
  text-align: center;
}
.pied a { color: #fff; }

/* ---------- Mentions légales ---------- */

.page-titre {
  background: var(--laine);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.page-titre h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; }

.retour { margin: 1.5rem 0 0; }

.mentions { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mentions .enveloppe { max-width: calc(820px + 2 * var(--marge)); }
.mentions h2 {
  font-size: 1.55rem;
  margin: 2.75rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filet);
}
.mentions h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem 1.5rem;
  margin: 0;
}
.fiche dt { font-weight: 600; color: var(--pre); }
.fiche dd { margin: 0 0 0.75rem; overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .fiche { grid-template-columns: 15rem minmax(0, 1fr); }
  .fiche dd { margin: 0 0 0.4rem; }
}

@media print {
  .entete, .heros__actions, .boucle { display: none; }
  .bien-etre, .contact, .troupeau__texte { background: none; color: #000; }
}

/* Mobile : le bouton d'appel de l'en-tête ne garde que l'icône */
@media (max-width: 520px) {
  .entete .bouton { padding: 0.65em; }
  .entete .bouton__libelle {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
.page-titre .enveloppe { max-width: calc(820px + 2 * var(--marge)); }