/* =========================================================
   Pauvil Élagage — GENERAL.CSS (full rewrite)
   Palette inspirée du logo : verts + crème
   ========================================================= */

/* ----------------------
   0) Variables & palette
   ---------------------- */
:root{
  /* Couleurs principales */
	--ColorNumberOne: #0c5b37;
    --ColorNumber2: #1d9a69;
    --ColorNumber3: #85b869;
    --ColorNumber4: #e9f2e6;
    --ColorNumber5: #125d32;
  /* Couleurs secondaires */
    --colorText: #ffffff;
    --colorText2: #0a3f2a;

  /* Divers */
  --radius: 20px;
  --shadow-soft: 0 4px 8px rgba(255,255,255,.18), 0 6px 20px rgba(220,230,220,.18);
  --shadow-strong: 4px 4px 18px rgba(0,0,0,.35), 0 30px 60px rgba(0,0,0,.25);
}

/* Amortir les animations si l’utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* -----------
   1) Globales
   ----------- */
html{ scroll-behavior: smooth; }

body{
  color: var(--colorText);
  margin: 0;
  font-family: Lato, Arial, sans-serif;
  background: linear-gradient(114deg, var(--ColorNumberOne), var(--ColorNumber2), var(--ColorNumberOne), var(--ColorNumber3));
  background-size: 200% 200%;
  animation: gradient 20s ease infinite;
}

/* Conteneur scrollable interne (le site est conçu ainsi) */
.Body{
	scroll-behavior: smooth;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
   color: var(--colorText);
  margin: 0;
  font-family: Lato, Arial, sans-serif;
  background: linear-gradient(114deg, var(--ColorNumberOne), var(--ColorNumber2), var(--ColorNumberOne), var(--ColorNumber3));
  background-size: 200% 200%;
  animation: gradient 20s ease infinite;

}

/* Mode portrait : on permet des images de fond “contain” si besoin */
@media (orientation: portrait){
  .Body{ background-size: contain; }
}

/* Scrollbars masquées (Chrome/Safari/Opera) */
::-webkit-scrollbar{ display:none; }
/* Firefox, IE/Edge legacy */
body, .Body{
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Liens */
a{ color: var(--colorText); text-decoration: none; }
a:hover{ color: #cfd8d1; }
a[href^="tel"]{ color: inherit; text-decoration: none; }

/* Sélection de texte */
::selection{ background: rgba(133,184,105,.35); }

/* -------------
   2) Typographie
   ------------- */
h1,h2,h3{ margin:0; }
p{
  margin: 0;
  padding: 1vh;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.supertitle{
  font-size: 2.5rem;
  text-transform: uppercase;
  padding: 1vh;
  text-align: center;
}
.title{
  font-size: 2rem;
  text-transform: uppercase;
  padding: 1vh;
  text-align: center;
}
.subtitle{
  font-size: 1.5rem;
  text-align: center;
  padding: 1vh;
}

/* Titres de section grands (bandeau) */
.GrandTitre{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--ColorNumber4);
  background: #00000026;
  height: 15vh;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* RWD typos */
@media (orientation: portrait){
  .supertitle{ font-size: 2rem; padding: 3vh; }
  .title{ font-size: 1.5rem; }
  .subtitle{ font-size: 1.2rem; padding: 3vh; }
  .GrandTitre{ height: 12vh; font-size: 2rem; letter-spacing: .08em; }
}
@media (orientation: landscape) and (max-width:1024px){
  .supertitle{ font-size:1.5rem; }
  .title{ font-size:1.2rem; }
  .subtitle{ font-size:1.1rem; }
}

/* ---------------
   3) Éléments divers
   --------------- */
hr{
  border: 0;
  height: 10px;
  background: var(--colorText);
  margin: .5em auto;
}
.line-break{
  border-bottom: 3px solid var(--colorText);
  width: 60vw;
  margin: 0 auto 6vh;
}

/* Images + rendu net */
img{
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: -webkit-optimize-contrast;
  max-width: 100%;
  height: auto;
}

/* Thèmes alternatifs */
.alternative{
  background: linear-gradient(114deg, var(--ColorNumber2), var(--ColorNumberOne), var(--ColorNumber2), var(--ColorNumberOne));
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
  color: var(--colorText2);
}
.alternative2{ background: #000000c2; }

/* -----------
   4) Layouts
   ----------- */
.flex{ display:flex; flex-direction:column; justify-content:space-around; align-items:center; text-align:center; padding:2vh; }

.Format80{ width:80vw; margin:3vh 10vw; }
.Format60{ width:60vw; margin-left:16vw; }
.Format60bis{ width:60vw; margin:3vh 20vw; background:#4c819dcf; height:60vh; }
.Format20{ width:20vw; height:20vw; margin:3vh 40vw; }

@media (orientation: portrait){
  .Format60{ width:94vw; margin-left:0; }
  .Format60bis{ width:80vw; margin:3vh 10vw; height:60vh; }
  .Format20{ width:40vw; height:40vw; margin:3vh 30vw; }
}

/* Grille générique */
.row{
  display:flex; justify-content:center; flex-wrap:wrap;
  position:relative; width:92%; margin:4%;
}
.column, .column1{ flex: 40%; margin:20px; display:grid; align-content:center; max-width:80vw; justify-content:center; justify-items:center; }
.column2{ flex: 30%; margin:20px; display:grid; align-content:center; max-width:80vw; justify-content:center; justify-items:center; }

/* -------------
   5) Médias
   ------------- */
.Photo{
  width: 30vw; border-radius: 12%;
  display:flex; align-items:center; justify-content:center;
  float:right; margin:5vh;
  box-shadow: var(--shadow-soft);
}
.Photo img{ width:95%; border-radius: 12%; }

.Photo2{
  width:15vw; border-radius:12%;
  background: linear-gradient(114deg, #292f3f, #bf8b4e, #8d6c49, #f6ad54);
  display:flex; align-items:center; justify-content:center;
  float:left; margin:5vh;
}
.Photo2 img{ width:95%; border-radius:12%; }

/* RWD médias */
@media (orientation: portrait){
  .Photo, .Photo2{ width:70vw; float:none; margin:4% 4% 4% 7%; }
}

/* -------------
   6) Effets
   ------------- */
.shadow{ box-shadow: var(--shadow-soft); }
.shadow2{ box-shadow: var(--shadow-strong); }
.radius{ border-radius: 2vh; }

@keyframes gradient{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* -----------------------
   7) CTA flottant (Boutique)
   ----------------------- */
.Boutique{
  position: fixed;
  left: 75vw;
  margin-top: 75vh;
  width: 20vw; height: 12vh;
  display:flex; justify-content:center; align-items:center;
  background: var(--ColorNumber2);
  border: 5px ridge var(--ColorNumber4);
  border-radius: 50px;
  z-index: 1000; opacity: .78;
  transition: .25s ease-in-out;
}
.Boutique:hover{ opacity:.96; transform: translateY(-2px); }
.Boutique a{
  display:flex; gap:.6em; align-items:center; justify-content:center;
  text-transform: uppercase; color: var(--colorText);
}
.Boutique img{ width:15%; }

@media (orientation: portrait){
  .Boutique{ width:70vw; height:10vh; left:15vw; margin-top:80vh; }
}

/* -------------------------
   8) Formulaires (contact)
   ------------------------- */
input, textarea{
  width: 30vw;
  padding: 10px 14px;
  margin: 8px 0;
  box-sizing: border-box;
  background: transparent;
  color: var(--colorText);
  border: 1px solid var(--ColorNumber4);
  border-radius: 12px;
  outline: none;
}
input::placeholder, textarea::placeholder{ color: #e3efe7; opacity: .85; font-style: italic; }
input:focus, textarea:focus{ box-shadow: 0 0 0 3px rgba(133,184,105,.35); }

.ButtonForm{
  width: 30vw;
  padding: 14px 18px;
  margin: 6px 0;
  border-radius: 999px;
  background: transparent;
  color: var(--colorText);
  border: 2px solid var(--ColorNumber4);
  cursor: pointer;
  transition: .2s ease;
}
.ButtonForm:hover{ background: rgba(233,242,230,.12); }

@media (orientation: portrait){
  input, textarea{ width:80vw; }
  .ButtonForm{ width:50vw; }
}

/* --------------------------
   9) Sections “Article”
   -------------------------- */
#SectionArticle{
  min-width: 90vw; max-width: 90vw; margin-left: 5vw;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  padding: 10px; position: relative; border-radius: 3vh; color: var(--colorText);
}
#SectionArticleText{
  display:grid; align-content:center; justify-items:center; color: var(--colorText);
}

/* Présentation 2 colonnes */
.rowPresentation{
  display:flex; flex-wrap:wrap; width:90vw; justify-content:center;
}
.columnPresentationA{
  flex:60%; padding:2vh; margin:2vh;
  display:flex; flex-direction:column; align-items:center;
  hyphens:auto; text-align:justify; color:white;
}
.columnPresentationA .title{ font-size:2rem; text-align:center; margin:2vh; }
.columnPresentationA .text{ text-align:justify; margin:2vh; }
.columnPresentationA ul{ max-width:30vw; margin:2vh; }
.columnPresentationA ul .title{ font-size:1.1rem; text-align:center; margin:2vh; font-weight:700; }

@media (orientation: portrait){
  .columnPresentationA .title{ font-size:1.3rem; }
  .columnPresentationA ul{ max-width:50vw; margin:2vh; font-size:1rem; }
}

.columnPresentationB{
  flex:25%; padding:3vh; margin:3vh;
  display:flex; align-items:center; flex-direction:column;
  color:white; border-radius:3vh; height: fit-content;
}

/* -------------
   10) Sous-menu
   ------------- */
.underMenu{ font-size:2rem; padding:2vh; }
.underMenu li{ margin:0 0 2vh 0; }
.underMenu a{ color:white; text-decoration: underline; }
@media (orientation: portrait){ .underMenu{ font-size:1.3rem; } }

/* --------
   11) Pied
   -------- */
#footer{
  background: #000;
  display:flex; justify-content:center; align-items:center;
  height: 10vh; color: #fff; text-align:center;
}
#footer p{ font-size:12px; margin:0; padding:0 10px; }
#footer a{ color:#8abf9c; text-decoration:underline; }

/* ---------------------------
   12) Helpers utilitaires
   --------------------------- */
.margin-top-10{ padding-top:10px; }
#BaliseH1{ width:92%; margin:4%; }

/* Désactivation éventuelle d’un fond image ancien */
#prefond{ display:none; }
#fond{ display:none; }

/* Fin du fichier */