/*
Theme Name: Fibralex
Theme URI: https://fibralex.ma
Author: Fibralex
Author URI: https://fibralex.ma
Description: Thème WordPress one-page bilingue (Français / Arabe) pour Fibralex — matériel professionnel pour le plâtre & le staff, Beni-Mellal, Maroc. Converti depuis la maquette « Site Fibralex ».
Version: 1.2.2
Requires at least: 6.0
Tested up to: 6.5
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: fibralex
Tags: one-page, business, bilingual, rtl-language-support, custom-logo, custom-menu
*/

/* ============================================================
   FONTS — Cairo (arabe) auto-hébergé, extrait de la maquette.
   Space Grotesk + Space Mono sont chargés via Google Fonts
   (voir functions.php).
   ============================================================ */
/* Cairo · arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Cairo · latin-ext */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cairo · latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   BASE RESETS (repris de la maquette)
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; background: #F4F2EC; font-family: 'Space Grotesk', system-ui, sans-serif; color: #241D16; overflow-x: hidden; }
img { max-width: 100%; }
::selection { background: #84C23F; color: #15271B; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.42); }

/* ============================================================
   KEYFRAMES (maquette)
   ============================================================ */
@keyframes fx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fx-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fx-twinkle { 0%,100% { opacity:.65; transform: scale(.92) rotate(-4deg); } 50% { opacity:1; transform: scale(1.08) rotate(6deg); } }
@keyframes fx-pulse   { 0% { box-shadow:0 0 0 0 rgba(132,194,63,.5); } 70% { box-shadow:0 0 0 16px rgba(132,194,63,0); } 100% { box-shadow:0 0 0 0 rgba(132,194,63,0); } }

/* ============================================================
   LANGUE — bascule FR / AR.
   Les deux langues sont dans le DOM ; on masque celle qui n'est
   pas active. On ne touche jamais au `display` de l'élément
   visible, pour préserver son display naturel (block/inline...).
   ============================================================ */
[data-lang="fr"] [data-lang-only="ar"] { display: none !important; }
[data-lang="ar"] [data-lang-only="fr"] { display: none !important; }

/* Boutons de bascule de langue */
.lang-switch { display: flex; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; overflow: hidden; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; }
.lang-btn { padding: 7px 11px; background: transparent; color: rgba(255,255,255,.82); border: none; cursor: pointer; transition: .2s; }
[data-lang="fr"] .lang-btn--fr { background: #84C23F; color: #15271B; }
[data-lang="ar"] .lang-btn--ar { background: #84C23F; color: #15271B; }

/* ============================================================
   EN-TÊTE FIXE + état "scrolled"
   ============================================================ */
.site-nav {
  background: rgba(15,28,19,0);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  border: 1px solid rgba(255,255,255,0);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.is-scrolled .site-nav {
  background: rgba(15,28,19,0.92);
  box-shadow: 0 14px 44px -26px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Logo personnalisé (Apparence → Identité du site → Logo) calé sur la maquette */
.site-logo, .custom-logo-link { display: flex; align-items: center; }
.custom-logo {
  height: 29px !important;
  width: auto !important;
  max-width: 170px;
  display: block;
}

/* ============================================================
   ÉTATS HOVER / FOCUS (remplacent les attributs style-hover/-focus)
   ============================================================ */
.fx-nav-link { transition: color .2s; }
.fx-nav-link:hover { color: #9BD455; }

.fx-btn { transition: .2s; }
.fx-btn:hover { background: #9BD455; transform: translateY(-2px); }
.fx-btn--nav:hover { transform: translateY(-1px); }

.fx-btn-outline { transition: .2s; }
.fx-btn-outline:hover { border-color: #84C23F; background: rgba(132,194,63,.1); }

.fx-btn-dark { transition: .2s; }
.fx-btn-dark:hover { background: #1F3A28; transform: translateY(-2px); }

.fx-card { transition: transform .25s, box-shadow .25s; }
.fx-card:hover { transform: translateY(-7px); box-shadow: 0 28px 56px -30px rgba(36,29,22,.45); }

.fx-order { transition: .2s; }
.fx-order:hover { gap: 12px; color: #5C8A2E; }

.fx-contact-row { transition: .2s; }
.fx-contact-row:hover { padding-left: 8px; }

.fx-foot-link { transition: color .2s; }
.fx-foot-link:hover { color: #9BD455; }

.fx-input { transition: .2s; }
.fx-input:focus { border-color: #84C23F; background: rgba(132,194,63,.06); }

.fx-fab { transition: transform .2s; }
.fx-fab:hover { transform: scale(1.08); }

/* ============================================================
   MENU MOBILE
   ============================================================ */
.nav-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; width: 40px; height: 38px; cursor: pointer; color: #fff; align-items: center; justify-content: center; }
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 980px) {
  .site-nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    background: rgba(15,28,19,0.97);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
    display: none !important;
  }
  .site-nav__links.open { display: flex !important; }
  .site-nav__links a { padding: 10px 4px; }
  .nav-toggle { display: inline-flex; }
}

/* ============================================================
   GRILLES RESPONSIVE (les colonnes fixes de la maquette se
   réorganisent sur mobile)
   ============================================================ */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr !important; gap: 36px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* ---- Téléphone ---- */
@media (max-width: 640px) {
  /* Rythme vertical resserré : moins de vide entre les sections */
  .fibralex-wrap > section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .fibralex-wrap > .hero-section {
    padding-top: 100px !important;
    padding-bottom: 0 !important;
  }
  footer { padding-left: 20px !important; padding-right: 20px !important; padding-top: 48px !important; }

  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px 24px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }

  /* Colonnes internes (Atouts / Usages) empilées pour respirer */
  .fx-grid-2sm { grid-template-columns: 1fr !important; gap: 22px !important; }

  /* Étapes savoir-faire : bordures latérales -> séparateurs horizontaux */
  .savoir-cell {
    padding: 24px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .savoir-cell:last-child { border-bottom: none; }

  /* En-tête plus compact */
  header { padding: 10px 14px !important; }
}

/* Très petits écrans */
@media (max-width: 380px) {
  .lang-switch { font-size: 11px; }
  .fibralex-wrap > section { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Réduit les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}