/*
Theme Name: AquaFire Blog
Theme URI: https://aquafire-vs.ch/
Author: Aquafire sarl
Author URI: https://aquafire-vs.ch/
Description: Theme de blog aux couleurs et a l'identite d'Aquafire sarl (Saxon, Valais). Concu pour que le visiteur qui arrive sur "Blog" ait l'impression de rester sur le site principal. Tous les liens du menu (sauf Blog) renvoient vers le site principal.
Version: 1.1.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aquafire
*/

/* =========================================================================
   PALETTE — couleurs prelevees sur aquafire-vs.ch (header clair, footer sombre,
   accent cuivre/rouille du logo, bleu de la goutte d'eau).
   Pour ajuster une couleur, modifiez uniquement les variables ci-dessous.
   ========================================================================= */
:root {
  --af-topbar:       #3B3038; /* fine barre sombre en haut de page */
  --af-header-bg:    #F7F6F4; /* fond clair du header (sous la texture rayee) */
  --af-body-bg:      #FFFFFF; /* fond du contenu */
  --af-text:         #2B2B2B; /* texte principal */
  --af-muted:        #6B6B6B; /* texte secondaire / meta */
  --af-accent:       #C65130; /* cuivre / rouille — liens de nav, accents */
  --af-accent-hover: #9E3E22; /* cuivre fonce au survol */
  --af-blue:         #5E93B3; /* bleu de la goutte d'eau */
  --af-border:       #E2DDD7; /* filets / bordures claires */
  --af-footer-bg:    #171717; /* fond sombre du footer */
  --af-footer-text:  #FFFFFF; /* texte du footer */
  --af-footer-muted: #B8B8B8; /* texte secondaire du footer */

  --af-maxwidth: 1180px;
  --af-radius: 4px;
  /* Texte courant */
  --af-font: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  /* Menu, logo et titres — police du site principal */
  --af-font-head: "Prompt", "Poppins", "Segoe UI", Arial, sans-serif;

  /* --- Effet raye (texture plâtre balaye) ---
     Pour la remplacer : deposez votre image dans /assets et changez le nom ici.
     Pour la desactiver : mettez --af-texture: none; */
  --af-texture: url("assets/texture.jpg");
  --af-logo-height: 160px;   /* hauteur du logo dans le header (site : 299x160) */
}

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

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

body {
  margin: 0;
  background: var(--af-body-bg);
  color: var(--af-text);
  font-family: var(--af-font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--af-accent); text-decoration: none; }
a:hover, a:focus { color: var(--af-accent-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; color: var(--af-text); font-weight: 600; }

.af-container {
  width: 100%;
  max-width: var(--af-maxwidth);
  margin: 0 auto;
  padding: 0 20px;
}

/* Accessibilite : lien d'evitement */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--af-accent); color: #fff; padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ============================ TOP BAR ============================ */
.af-topbar { height: 8px; background: var(--af-topbar); width: 100%; }

/* ============================ HEADER ============================ */
/* Fond raye : la texture est posee par-dessus la couleur de fond.
   Si le fichier /assets/texture.jpg est absent, on garde simplement
   la couleur unie — le header ne casse jamais. */
.af-header {
  position: relative;
  background-color: var(--af-header-bg);
  background-image: var(--af-texture);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--af-border);
}
.af-header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 20px 10px;
  text-align: center;
}

/* Zone logo — largeur bornee pour ne jamais casser */
.af-branding { max-width: 100%; }
.af-logo-link { display: inline-block; line-height: 0; }
.af-logo-img {
  height: var(--af-logo-height);   /* taille du logo du site : 299 x 160 */
  max-height: var(--af-logo-height);
  width: auto;
  max-width: 90vw;
  object-fit: contain;
}
/* Repli texte si aucun logo n'est defini */
.af-site-title {
  margin: 0;
  font-family: var(--af-font-head);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  color: var(--af-blue);
  word-break: break-word;      /* titre long -> passe a la ligne, pas de debordement */
  overflow-wrap: anywhere;
  max-width: 90vw;
}
.af-site-title a { color: inherit; text-decoration: none; }
.af-site-title .af-title-accent { color: var(--af-accent); }
.af-site-desc { margin: 4px 0 0; color: var(--af-muted); font-size: 14px; }

/* ============================ NAVIGATION ============================ */
.af-nav { width: 100%; }
.af-nav-toggle {
  display: none;
  margin: 0 auto;
  background: transparent;
  border: 1px solid var(--af-accent);
  color: var(--af-accent);
  padding: 8px 14px;
  border-radius: var(--af-radius);
  font-family: var(--af-font-head);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.af-menu {
  list-style: none;
  margin: 0;
  padding: 6px 0 8px;
  display: flex;
  flex-wrap: wrap;                 /* le menu ne chevauche jamais : il passe a la ligne */
  justify-content: center;
  align-items: center;
  gap: 2px 40px;
}
.af-menu > li { position: relative; }
.af-menu a {
  display: inline-block;
  font-family: var(--af-font-head);
  color: var(--af-accent);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 16px;
  font-weight: 400;
  padding: 10px 2px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.af-menu a:hover, .af-menu a:focus { color: var(--af-accent-hover); }

/* Onglet actif (BLOG) — souligne, comme sur le site */
.af-menu .af-current > a,
.af-menu .af-current > a:hover {
  color: var(--af-accent);
  border-bottom-width: 1px;
  border-bottom-color: var(--af-accent);
  font-weight: 400;
}

/* Sous-menu deroulant "NOS PRODUITS" */
.af-has-children > .af-submenu-toggle {
  background: none; border: none; color: inherit; font: inherit;
  cursor: pointer; padding: 0 0 0 4px;
}
.af-submenu {
  list-style: none;
  margin: 0; padding: 8px 0;
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: none;
  z-index: 200;
  text-align: left;
}
.af-has-children:hover > .af-submenu,
.af-has-children:focus-within > .af-submenu { display: block; }
.af-submenu li { display: block; }
.af-submenu a {
  display: block;
  font-family: var(--af-font-head);
  padding: 8px 18px;
  border-bottom: none;
  white-space: normal;
  letter-spacing: .02em;
  font-size: 14px;
}
.af-submenu a:hover { background: var(--af-header-bg); }

/* ============================ LAYOUT PRINCIPAL ============================ */
.af-site-content { padding: 40px 0 56px; }
.af-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}
.af-layout.af-no-sidebar { grid-template-columns: minmax(0, 1fr); }

/* ============================ ARTICLES ============================ */
.af-page-title {
  font-size: 28px;
  margin: 0 0 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--af-accent);
}
.af-post {
  margin: 0 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--af-border);
}
.af-post:last-child { border-bottom: none; }
.af-post-title { font-size: 24px; margin: 0 0 8px; }
.af-post-title a { color: var(--af-text); }
.af-post-title a:hover { color: var(--af-accent); text-decoration: none; }
.af-post-meta {
  color: var(--af-muted);
  font-size: 13.5px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.af-post-meta a { color: var(--af-muted); }
.af-post-thumb { margin: 0 0 18px; }
.af-post-thumb img { width: 100%; border-radius: var(--af-radius); display: block; }
.af-entry { font-size: 16.5px; }
.af-entry p { margin: 0 0 1.1em; }
.af-entry img { border-radius: var(--af-radius); }
.af-entry a { text-decoration: underline; }
.af-entry h2 { font-size: 22px; margin: 1.4em 0 .5em; }
.af-entry h3 { font-size: 19px; margin: 1.3em 0 .5em; }
.af-entry blockquote {
  margin: 1.4em 0; padding: 4px 20px;
  border-left: 4px solid var(--af-accent);
  color: var(--af-muted); font-style: italic;
}
.af-entry ul, .af-entry ol { padding-left: 1.3em; }
.af-entry code { background: var(--af-header-bg); padding: 2px 6px; border-radius: 3px; font-size: .9em; }
.af-entry pre { background: #1f1f1f; color: #f2f2f2; padding: 16px; border-radius: var(--af-radius); overflow: auto; }

.af-readmore {
  display: inline-block;
  margin-top: 8px;
  color: var(--af-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 13.5px;
}
.af-readmore:hover { text-decoration: none; color: var(--af-accent-hover); }

/* Boutons */
.af-btn {
  display: inline-block;
  background: var(--af-accent);
  color: #fff;
  padding: 11px 22px;
  border-radius: var(--af-radius);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 14px;
  border: none; cursor: pointer;
}
.af-btn:hover { background: var(--af-accent-hover); color: #fff; text-decoration: none; }

/* Pagination */
.af-pagination { margin-top: 20px; }
.af-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px 6px 0;
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  color: var(--af-accent);
}
.af-pagination .page-numbers.current {
  background: var(--af-accent); color: #fff; border-color: var(--af-accent);
}
.af-pagination a.page-numbers:hover { background: var(--af-header-bg); text-decoration: none; }
.af-post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.af-post-nav a { font-weight: 600; }

/* ============================ SIDEBAR ============================ */
.af-sidebar .widget {
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--af-border);
}
.af-sidebar .widget:last-child { border-bottom: none; }
.af-sidebar .widget-title {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 14px;
  color: var(--af-text);
  border-left: 3px solid var(--af-accent);
  padding-left: 10px;
}
.af-sidebar ul { list-style: none; margin: 0; padding: 0; }
.af-sidebar ul li { padding: 5px 0; border-bottom: 1px dotted var(--af-border); }
.af-sidebar ul li:last-child { border-bottom: none; }
.af-sidebar a { color: var(--af-text); }
.af-sidebar a:hover { color: var(--af-accent); }

/* Formulaire de recherche */
.af-searchform { display: flex; gap: 8px; }
.af-searchform input[type="search"] {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  font: inherit;
}
.af-searchform button {
  background: var(--af-accent); color: #fff; border: none;
  padding: 10px 16px; border-radius: var(--af-radius); cursor: pointer; font: inherit;
}
.af-searchform button:hover { background: var(--af-accent-hover); }

/* ============================ COMMENTAIRES ============================ */
.af-comments { margin-top: 48px; }
.af-comments-title { font-size: 22px; margin-bottom: 20px; }
.af-comments .commentlist { list-style: none; margin: 0; padding: 0; }
.af-comments .commentlist ul.children { list-style: none; margin: 0 0 0 28px; padding: 0; }
.af-comments .comment-body {
  background: var(--af-header-bg);
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  padding: 16px 18px; margin-bottom: 18px;
}
.af-comments .comment-author { font-weight: 600; }
.af-comments .comment-meta { font-size: 12.5px; color: var(--af-muted); }
.af-comments .comment-meta a { color: var(--af-muted); }
.af-comment-respond {
  margin-top: 28px; padding: 24px;
  background: var(--af-header-bg); border-radius: var(--af-radius);
  border: 1px solid var(--af-border);
}
.af-comment-respond input[type="text"],
.af-comment-respond input[type="email"],
.af-comment-respond input[type="url"],
.af-comment-respond textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--af-border);
  border-radius: var(--af-radius); font: inherit; margin-bottom: 14px;
}

/* ============================ 404 / RECHERCHE VIDE ============================ */
.af-notfound { text-align: center; padding: 40px 0; }
.af-notfound h1 { font-size: 72px; color: var(--af-accent); margin: 0; }
.af-notfound .af-searchform { max-width: 420px; margin: 24px auto 0; }

/* ============================ FOOTER ============================ */
.af-footer {
  background: var(--af-footer-bg);
  color: var(--af-footer-text);
  padding: 48px 0 28px;
}
.af-footer a { color: var(--af-footer-text); }
.af-footer a:hover { color: var(--af-blue); }
.af-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  text-align: center;
}
.af-footer-assoc { text-align: center; }
.af-footer h2, .af-footer h3 {
  color: var(--af-footer-text);
  font-size: 15px; text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 16px;
}
.af-assoc-logos { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.af-assoc-logos img { max-height: 70px; width: auto; }
.af-assoc-logos a { font-weight: 600; }

.af-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.af-footer-logo img { max-height: 78px; width: auto; }
.af-footer-address { font-weight: 600; }
.af-footer-address a { text-decoration: underline; }
.af-footer-hours { color: var(--af-footer-muted); font-size: 14px; line-height: 1.7; }

.af-social { display: flex; gap: 18px; justify-content: center; }
.af-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
}
.af-social a:hover { background: var(--af-blue); border-color: var(--af-blue); }
.af-social svg { width: 18px; height: 18px; fill: currentColor; }

.af-legal { text-align: center; }
.af-legal a { text-decoration: underline; }
.af-footer-bottom {
  text-align: center;
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: var(--af-footer-muted); font-size: 13px;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .af-layout { grid-template-columns: 1fr; }
  .af-footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --af-logo-height: 128px; }
}

@media (max-width: 720px) {
  :root { --af-logo-height: 104px; }
  .af-nav-toggle { display: inline-block; }
  .af-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: center;
  }
  .af-menu.af-open { display: flex; }
  .af-menu > li { width: 100%; border-bottom: 1px solid var(--af-border); }
  .af-menu a { display: block; padding: 12px; border-bottom: none; }
  .af-submenu {
    position: static; transform: none; display: block;
    box-shadow: none; border: none; min-width: 0; background: transparent; padding: 0 0 8px;
  }
  .af-submenu a { color: var(--af-muted); }
  .af-menu .af-current > a { border-bottom: none; text-decoration: underline; }
}