/* ============================================================
   ZONEDEVIE.COM — style-autres.css  (design V2 optimisé SEO)
   Styles généraux du site
   Optimisé Core Web Vitals + accessibilité + UX éditoriale
   ============================================================ */


/* ================================
   CONTENEUR GLOBAL
================================ */

#contenu-principal{
  width:100%;
  contain:layout style;
}


/* ================================
   TYPOGRAPHIE EDITORIALE
================================ */

p{
  max-width:70ch;
  text-wrap:pretty;
}

h1,h2,h3,h4{
  line-height:1.3;
  text-wrap:balance;
}

h1{
  font-family:var(--font-titre);
  font-weight:800;
}

h2{
  font-family:var(--font-titre);
  font-weight:700;
}

h3{
  font-family:var(--font-titre);
}


/* ================================
   LISTES
================================ */

ul,ol{
  padding-left:1.4rem;
}

li{
  margin-bottom:.35rem;
}

.article-corps ul li::marker{
  color:var(--vert-moyen);
}


/* ================================
   IMAGES
================================ */

figure{
  margin:2rem 0;
}

figure img{
  border-radius:var(--rayon);
  box-shadow:var(--ombre-sm);
}

figcaption{
  text-align:center;
  font-size:.85rem;
  color:var(--texte-leger);
  margin-top:.45rem;
  font-style:italic;
}


/* ================================
   BOUTONS
================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;

  padding:.65rem 1.25rem;

  border-radius:12px;
  border:none;

  background:linear-gradient(
    135deg,
    var(--vert-moyen),
    var(--vert-fonce)
  );

  color:#fff;

  font-family:var(--font-corps);
  font-size:.9rem;
  font-weight:700;

  cursor:pointer;
  text-decoration:none;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    opacity var(--transition);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--ombre-sm);
  opacity:.95;
  text-decoration:none;
}

.btn-secondaire{
  background:var(--terre);
}


/* ================================
   FORMULAIRES
================================ */

input,
textarea,
select{

  font-family:var(--font-corps);
  font-size:max(1rem,16px);

  padding:.6rem .8rem;

  border-radius:10px;
  border:1px solid var(--bordure);

  background:var(--blanc);
  color:var(--texte);

  transition:
    border-color var(--transition),
    box-shadow var(--transition);

}

input:focus,
textarea:focus,
select:focus{

  outline:none;

  border-color:var(--vert-moyen);

  box-shadow:0 0 0 3px rgba(141,184,154,.3);

}

textarea{
  width:100%;
  min-height:120px;
  resize:vertical;
}


/* ================================
   TABLEAUX (articles santé / nutrition)
================================ */

table{

  width:100%;
  border-collapse:collapse;

  margin:2rem 0;

  font-size:.95rem;

  border-radius:var(--rayon);
  overflow:hidden;

  box-shadow:var(--ombre-sm);
}

th{

  background:var(--vert-pale);

  color:var(--vert-fonce);

  text-align:left;

  padding:.65rem .8rem;

  font-weight:700;

}

td{

  padding:.65rem .8rem;

  border-top:1px solid var(--bordure);

}

tr:nth-child(even){
  background:rgba(0,0,0,.02);
}


/* ================================
   BLOCS INFORMATION
================================ */

.note{

  background:var(--creme);

  border-left:4px solid var(--ocre);

  padding:1rem 1.2rem;

  margin:1.6rem 0;

  border-radius:0 var(--rayon) var(--rayon) 0;

  font-size:.95rem;
}


/* ================================
   CLASSES UTILITAIRES
================================ */

.centre{
  text-align:center;
}

.texte-doux{
  color:var(--texte-doux);
}

.texte-leger{
  color:var(--texte-leger);
}

.marge-haut{
  margin-top:2rem;
}

.marge-bas{
  margin-bottom:2rem;
}


/* ================================
   SEPARATEUR EDITORIAL
================================ */

hr{

  border:none;

  border-top:1px solid var(--bordure);

  margin:2.2rem 0;

  opacity:.6;

}


/* ================================
   LIENS EDITORIAUX (SEO UX)
================================ */

.article-corps a{

  text-decoration:underline;

  text-decoration-thickness:1px;

  text-underline-offset:2px;

}

.article-corps a:hover{

  text-decoration-thickness:2px;

}


/* ================================
   RESPONSIVE
================================ */

@media (max-width:700px){

  p{
    max-width:100%;
  }

  table{
    font-size:.9rem;
  }

  .btn{
    width:100%;
  }

}

/* ================================
   BARRE DE RECHERCHE
================================ */

.recherche-site{
  width:100%;
  max-width:100%;
}

.recherche-site form{
  display:flex;
  width:100%;
  gap:6px;
}

.recherche-site input[type="search"],
.recherche-site input[type="text"]{

  flex:1;
  min-width:0;   /* empêche le débordement */

  padding:.55rem .8rem;

  border-radius:10px;
  border:1px solid var(--bordure);

  font-family:var(--font-corps);
  font-size:max(1rem,16px);

}

.recherche-site button{

  flex-shrink:0;

  padding:.55rem .9rem;

  border:none;
  border-radius:10px;

  background:var(--vert-moyen);
  color:white;

  cursor:pointer;

}
.sidebar form{
  width:100%;
}

.sidebar input{
  width:100%;
  max-width:100%;
}
input,
textarea,
select{
  max-width:100%;
}