/* Identité « Sous-bois doré » : forêt profonde et lumière dorée, reprises du logo et des photos. */
:root {
  --foret: #142019;
  --sous-bois: #1d2e24;
  --sous-bois-bord: #2c4234;
  --mousse: #3e5a45;
  --or: #c9a15a;
  --or-fonce: #8a6a2f;
  --or-clair: #efe6d2;
  --lin: #f4f1ea;
  --blanc: #ffffff;
  --encre: #17201a;
  --texte: #3e4842;
  --pierre: #59645c;
  --brume: #b9c2b9;
  --clair-sur-sombre: #dce3da;
  --trait: #e2ded3;
  --trait-fort: #dcd7ca;
  --pied: #0f1813;

  --rayon-s: 12px;
  --rayon: 20px;
  --rayon-l: 24px;
  --marge: clamp(20px, 4vw, 56px);
  --largeur: 1328px;
  --section: clamp(64px, 9vw, 112px);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--or-fonce);
}

a:hover {
  color: #5e4720;
}

:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  margin: 0;
}

/* Un élément masqué (attribut hidden) le reste, même si sa classe lui donne un affichage. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--rayon-s);
  background: var(--or);
  color: var(--foret);
  font-weight: 700;
  text-decoration: none;
}

.lien-evitement:focus {
  top: 16px;
}

/* Mise en page */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section {
  padding-block: var(--section);
}

.section--lin {
  background: var(--lin);
}

.section--sombre {
  background: var(--foret);
  color: var(--lin);
}

/* Typographie */
.surtitre {
  font-family: var(--font-texte);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-fonce);
}

.section--sombre .surtitre,
.sur-photo .surtitre {
  color: var(--or);
}

.titre-1 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.titre-2 {
  font-size: clamp(31px, 3.4vw, 48px);
}

.titre-3 {
  font-size: 25px;
}

.chapeau {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}

.texte {
  font-size: 17px;
  line-height: 1.75;
  color: var(--texte);
}

.section--sombre .texte {
  color: var(--brume);
}

.discret {
  font-size: 14px;
  color: var(--pierre);
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-texte);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--or {
  background: var(--or);
  color: var(--foret);
}

.btn--or:hover {
  background: #d8b46f;
  color: var(--foret);
}

.btn--sombre {
  background: var(--foret);
  color: var(--lin);
}

.btn--sombre:hover {
  background: var(--sous-bois);
  color: var(--lin);
}

.btn--contour {
  border-color: var(--encre);
  color: var(--encre);
}

.btn--contour:hover {
  background: var(--encre);
  color: var(--lin);
}

.btn--contour-clair {
  border-color: rgb(244 241 234 / 0.6);
  color: var(--lin);
}

.btn--contour-clair:hover {
  background: rgb(244 241 234 / 0.12);
  color: var(--lin);
}

.btn--plein {
  width: 100%;
}

.lien-fleche {
  font-weight: 700;
  text-decoration: none;
}

.lien-fleche:hover {
  text-decoration: underline;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* En-tête de section */
.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.entete-section > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
}

/* Défilement horizontal sur mobile (carrousels) */
@media (max-width: 720px) {
  .groupe-boutons .btn {
    flex: 1 1 100%;
  }

  .defile-mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--marge) * -1);
    padding-inline: var(--marge);
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .defile-mobile::-webkit-scrollbar {
    display: none;
  }
  .defile-mobile > * {
    flex: 0 0 82% !important;
    scroll-snap-align: start;
  }
}

/* ======================================================================
   En-tête et menu
   ====================================================================== */

.entete {
  z-index: 20;
  color: var(--lin);
}

.entete--superpose {
  position: absolute;
  inset: 0 0 auto;
}

.entete--solide {
  position: relative;
  background: var(--foret);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
}

.entete__marque {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--lin);
  text-decoration: none;
}

.entete__marque img {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.35));
}

.entete__marque span {
  font-family: var(--font-titre);
  font-size: 22px;
  font-weight: 500;
}

.entete__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entete__nav ul a {
  color: #e4e9e2;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.entete__nav ul a:hover {
  color: var(--blanc);
  border-bottom-color: rgb(201 161 90 / 0.5);
}

.entete__nav ul a[aria-current='page'] {
  color: var(--blanc);
  border-bottom-color: var(--or);
}

.entete__cta {
  min-height: 46px;
  padding: 0 22px;
  font-size: 15px;
}

.entete__cta[aria-current='page'] {
  box-shadow: 0 0 0 3px var(--foret), 0 0 0 5px var(--or);
}

.entete__burger {
  position: relative;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgb(244 241 234 / 0.3);
  background: rgb(244 241 234 / 0.12);
  color: var(--lin);
  cursor: pointer;
}

.icone-fermer,
.menu-ouvert .icone-ouvrir {
  display: none;
}

.menu-ouvert .icone-fermer {
  display: block;
}

.entete__infos {
  display: none;
}

@media (min-width: 1200px) {
  .entete__nav {
    display: flex;
    align-items: center;
    gap: 28px;
  }
}

@media (max-width: 1199px) {
  .entete__barre {
    padding-block: 16px;
  }

  .entete__marque img {
    width: 48px;
    height: 48px;
  }

  .entete__marque span {
    font-size: 19px;
  }

  .entete__burger {
    display: flex;
  }

  .entete__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    gap: 24px;
    padding: 100px var(--marge) 28px;
    overflow-y: auto;
    background: var(--foret);
  }

  .menu-ouvert {
    overflow: hidden;
  }

  /* Menu ouvert : la barre (logo + bouton fermer) reste visible même si la page a défilé. */
  .menu-ouvert .entete__barre {
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    background: var(--foret);
  }

  .menu-ouvert .entete__nav {
    display: flex;
  }

  .entete__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .entete__nav ul a {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 0;
    border-bottom: 1px solid #24352a;
    font-family: var(--font-titre);
    font-size: 28px;
    color: var(--lin);
  }

  .entete__nav ul a[aria-current='page'] {
    color: var(--or);
    border-bottom-color: #24352a;
  }

  .entete__cta {
    min-height: 56px;
    margin-top: auto;
  }

  .entete__infos {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    font-size: 14px;
    color: var(--brume);
  }
}

/* ======================================================================
   Pied de page
   ====================================================================== */

.pied {
  padding: 72px 0 36px;
  background: var(--pied);
  color: var(--brume);
}

.pied__haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.pied__marque {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 360px;
  font-size: 15px;
}

.pied__logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pied__logo img {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.35));
}

.pied__logo span {
  font-family: var(--font-titre);
  font-size: 22px;
  color: var(--lin);
}

.pied__colonne {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.pied__colonne h2 {
  font-family: var(--font-texte);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lin);
}

.pied__colonne a {
  color: var(--brume);
  text-decoration: none;
}

.pied__colonne a:hover {
  color: var(--lin);
  text-decoration: underline;
}

.pied__colonne .pied__resa {
  color: var(--or);
  font-weight: 700;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #24352a;
  font-size: 13px;
  line-height: 1.6;
}

.pied__bas p a {
  color: var(--or);
  font-weight: 700;
}

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.pied__legal a {
  color: var(--brume);
}

.pied__demo {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--mousse);
  font-size: 12px;
}

@media (max-width: 720px) {
  .pied {
    padding-top: 48px;
  }

  .pied__haut {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
  }

  .pied__marque {
    grid-column: 1 / -1;
  }

  .pied__colonne:last-child {
    grid-column: 1 / -1;
  }
}

/* ======================================================================
   Grand bandeau photo du haut des pages
   ====================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--foret);
  color: var(--lin);
}

.hero--grand {
  min-height: min(860px, 100svh);
}

.hero--moyen {
  min-height: 560px;
}

.hero--petit {
  min-height: 440px;
}

.hero .hero__photo,
.hero .hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__voile {
  position: absolute;
  inset: 0;
}

.hero--uniforme .hero__voile {
  background: rgb(14 22 17 / 0.68);
}

.hero--lateral .hero__voile {
  background: linear-gradient(90deg, rgb(14 22 17 / 0.9) 0%, rgb(14 22 17 / 0.6) 48%, rgb(14 22 17 / 0.15) 100%);
}

.hero__contenu {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hero__texte {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
}

.hero--grand .hero__texte {
  gap: 28px;
  max-width: 660px;
}

.hero__intro {
  max-width: 580px;
  color: var(--clair-sur-sombre);
}

@media (max-width: 720px) {
  .hero--lateral .hero__voile {
    background: linear-gradient(180deg, rgb(14 22 17 / 0.55) 0%, rgb(14 22 17 / 0.35) 35%, rgb(14 22 17 / 0.92) 100%);
  }

  .hero__contenu {
    align-items: flex-end;
    padding-top: 110px;
  }

  .hero--moyen,
  .hero--petit {
    min-height: 400px;
  }
}

/* ======================================================================
   Pages de texte (mentions légales, confidentialité, 404)
   ====================================================================== */

.page-texte {
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: var(--section);
}

.page-texte__corps {
  font-size: 17px;
  line-height: 1.75;
  color: var(--texte);
}

.page-texte__corps h2 {
  margin: 1.8em 0 0.5em;
  font-size: 26px;
  color: var(--encre);
}

.page-texte__corps p,
.page-texte__corps ul {
  margin: 0 0 1em;
}

.page-texte__corps .encadre {
  padding: 16px 20px;
  border-radius: var(--rayon-s);
  background: var(--or-clair);
  color: #4f3c17;
}

.page-texte__corps .tableau-defilant {
  margin: 0 0 1em;
  overflow-x: auto;
}

.page-texte__corps table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.page-texte__corps th,
.page-texte__corps td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}

.page-texte__corps th {
  color: var(--encre);
}

.page-texte__corps .lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--or-fonce);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.page-texte__corps .a-completer {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--or-clair);
  color: #6b5222;
  font-weight: 600;
}

/* ======================================================================
   Témoignage
   ====================================================================== */

.temoignage {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 32px;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--blanc);
}

.temoignage blockquote {
  margin: 0;
  font-family: var(--font-titre);
  font-size: 21px;
  font-style: italic;
  line-height: 1.5;
}

.temoignage figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.temoignage figcaption > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
}

.temoignage .temoignage__photo,
.temoignage__initiale {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.temoignage__initiale {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7ebe3;
  color: var(--mousse);
  font-weight: 700;
  font-size: 18px;
}

@media (max-width: 720px) {
  .temoignage {
    padding: 24px;
  }

  .temoignage blockquote {
    font-size: 18px;
  }
}

/* ======================================================================
   Carte d'une activité (accueil)
   ====================================================================== */

.carte-service {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  background: var(--lin);
  border-radius: var(--rayon);
  overflow: hidden;
}

.carte-service .carte-service__photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.carte-service__corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 26px;
}

.carte-service h3 a {
  color: inherit;
  text-decoration: none;
}

.carte-service h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.carte-service p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pierre);
}

.carte-service__pied {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
}

.carte-service__pied strong {
  font-family: var(--font-titre);
  font-size: 24px;
  font-weight: 600;
  color: var(--encre);
}

.carte-service__pied a {
  font-size: 15px;
}

/* ======================================================================
   Carte d'un article (accueil, actualités, articles)
   ====================================================================== */

.carte-article {
  position: relative;
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
}

.carte-article--horizontal {
  flex: 1 1 520px;
  flex-direction: row;
  flex-wrap: wrap;
}

.carte-article .carte-article__photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.carte-article--horizontal .carte-article__photo {
  flex: 1 1 220px;
  width: 220px;
  height: auto;
  min-height: 260px;
}

.carte-article__corps {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 28px;
}

.carte-article h3 {
  font-size: 23px;
  line-height: 1.3;
}

.carte-article h3 a {
  color: inherit;
  text-decoration: none;
}

/* Toute la carte est cliquable, mais un seul lien pour les lecteurs d'écran. */
.carte-article h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.carte-article:hover h3 a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.carte-article p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pierre);
}

.carte-article .lien-fleche {
  margin-top: auto;
  font-size: 15px;
  color: var(--or-fonce);
}

/* ======================================================================
   Carte d'accès (OpenStreetMap au clic)
   ====================================================================== */

.carte {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: #dde4d8;
}

.carte__fond {
  position: absolute;
  inset: 0;
}

.carte__invite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  margin: 24px;
  padding: 24px;
  border-radius: var(--rayon);
  background: rgb(255 255 255 / 0.94);
  text-align: center;
  font-size: 15px;
}

.carte__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.carte__actions .btn {
  min-height: 46px;
  padding: 0 20px;
  font-size: 15px;
}

.carte__note {
  font-size: 12px;
  color: var(--pierre);
}

.carte iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ======================================================================
   Vidéo de l'accueil
   ====================================================================== */

.video {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.video__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: var(--foret);
}

.video__cadre iframe,
.video__cadre video,
.video__lancer {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Une vidéo en hauteur (téléphone) reste entière, sur fond vert forêt. */
.video__cadre video {
  object-fit: contain;
}

.video__lancer {
  position: relative;
  padding: 0;
  background: none;
  cursor: pointer;
}

.video__lancer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video__lancer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(20 32 25 / 0) 40%, rgb(20 32 25 / 0.45));
}

.video__bouton {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--or);
  color: var(--foret);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.3);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.video__bouton svg {
  margin-left: 5px;
}

.video__lancer:hover img {
  transform: scale(1.02);
}

.video__lancer:hover .video__bouton,
.video__lancer:focus-visible .video__bouton {
  transform: translate(-50%, -50%) scale(1.08);
}

.video__lancer:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: -3px;
}

.video a {
  color: var(--or-fonce);
  font-weight: 600;
}

@media (max-width: 720px) {
  .video__bouton {
    width: 64px;
    height: 64px;
  }

  .video__bouton svg {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video__lancer img,
  .video__bouton {
    transition: none;
  }
}

/* ======================================================================
   Bandeau de consentement à la mesure d'audience
   ====================================================================== */

.consentement {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  padding: 20px 22px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte);
  box-shadow: 0 18px 48px rgb(20 32 25 / 0.22);
}

.consentement h2 {
  margin: 0;
  font-size: 20px;
  color: var(--encre);
}

.consentement p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.consentement a {
  color: var(--or-fonce);
  font-weight: 600;
}

.consentement__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consentement__boutons .btn {
  flex: 1 1 140px;
}

/* ======================================================================
   Badges des moyens de paiement (démonstration)
   ====================================================================== */

.badge-paiement {
  display: block;
  flex: none;
}