/* =========================================================
   FREKI – CSS FINAL (CONSOLIDÉ)
   Palette : #2E0249 (Violet), #D69E2E (Or), #FFFFFF (Blanc)
   ========================================================= */

/* ---- 1. VARIABLES & RESET ---- */
:root {
  --bg: #FDFCFE;           /* Fond de page clair */
  --bg-soft: #FFFFFF;      /* Fond des cartes */
  --text: #2D2432;         /* Texte sombre */
  --muted: #6C6375;        /* Texte gris */
  
  --brand-purple: #2E0249; /* VIOLET (Marque) */
  --brand-gold: #D69E2E;   /* OR (Accent) */
  --border: #E8E2ED;
  
  --shadow: 0 10px 20px -5px rgba(46, 2, 73, 0.1), 0 5px 10px -3px rgba(0, 0, 0, 0.05);
  --header-h: 72px;        /* Hauteur header (ajustée par JS) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
ul { list-style: none; padding: 0; margin: 0; }

.container { width: min(1100px, 92%); margin: 0 auto; }

/* =========================================
   TYPOGRAPHIE UNIFORME (MODERNE)
   ========================================= */

/* On applique la même police partout */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif; /* Même police que le corps */
  font-weight: 800; /* Très gras pour bien détacher les titres */
  margin-top: 0;
  line-height: 1.2;
  color: var(--brand-purple); /* On s'assure que les titres sont violets par défaut */
  letter-spacing: -0.5px; /* Astuce pro : on resserre un peu les lettres pour un effet "compact" */
}

/* Ajustement spécifique pour le grand titre de la page d'accueil */
.hero h1 {
  font-weight: 900; /* Encore plus gras pour l'impact */
  letter-spacing: -1px;
}

/* Le texte courant (paragraphes) */
.lead {
  font-size: 1.15rem;
  color: var(--muted);
  margin-bottom: 2rem;
  font-weight: 400; /* Normal */
}

.muted {
  color: var(--muted);
}

/* =========================================================
   2. BOUTONS GÉNÉRIQUES (Corps de page)
   ========================================================= */
.btn {
  display: inline-block;
  background: var(--brand-purple);
  color: #FFFFFF;
  border: 1px solid var(--brand-purple);
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
  text-align: center;
}

.btn:hover {
  background: #FFFFFF;
  color: var(--brand-purple);
  border-color: var(--brand-purple);
  transform: translateY(-2px);
}

/* Bouton Ghost (Fond transparent) */
.btn.ghost {
  background: transparent;
  color: var(--brand-purple);
  border: 1px solid var(--brand-purple);
}
.btn.ghost:hover {
  background: var(--brand-purple);
  color: #FFFFFF;
}

/* =========================================================
   3. HEADER & NAVIGATION (Violet)
   ========================================================= */

.site-header {
  position: fixed; /* Header Fixe */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: var(--brand-purple);
  border-bottom: 1px solid var(--brand-gold);
  padding: 0.5rem 0; /* Header compact */
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px; /* Hauteur fixe du contenu */
}

/* LOGO */
.logo { display: flex; align-items: center; }
.logo-img {
  max-height: 50px;
  width: auto;
  filter: brightness(0) invert(1); /* Logo devient BLANC */
}

/* NAVIGATION (Desktop) */
.site-nav ul {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.site-nav a {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--brand-gold); /* OR */
  opacity: 1;
}

/* --- LE BOUTON "PARLER DE VOTRE PROJET" (HEADER) --- */
/* On utilise une spécificité forte pour forcer le BLANC */
.site-header .site-nav a.btn.nav-cta {
  background-color: #FFFFFF !important;   /* FOND BLANC */
  color: var(--brand-purple) !important;  /* TEXTE VIOLET */
  border: 1px solid #FFFFFF !important;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  opacity: 1;
}

.site-header .site-nav a.btn.nav-cta:hover {
  background-color: var(--brand-gold) !important; /* FOND OR */
  border-color: var(--brand-gold) !important;
  color: #000000 !important;                      /* TEXTE NOIR */
  transform: translateY(-2px);
}

/* BURGER (Caché sur PC) */
.nav-toggle { display: none; }

/* =========================================================
   4. RESPONSIVE / MOBILE (Tablettes et Mobiles)
   ========================================================= */
@media (max-width: 900px) {
  
  /* Afficher le Burger */
  .nav-toggle {
    display: block;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
  }

  /* Cacher le menu par défaut */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; /* Juste sous le header */
    left: 0;
    right: 0;
    background-color: var(--brand-purple); /* Fond Violet */
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 2rem 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }

  /* QUAND JS AJOUTE LA CLASSE "open" (via site-include.js) */
  .site-nav.open {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    text-align: center;
  }
  
  /* Ajustement du bouton CTA sur mobile */
  .site-header .site-nav a.btn.nav-cta {
    display: inline-block;
    width: auto;
  }
}

/* =========================================================
   5. SECTIONS PAGE D'ACCUEIL
   ========================================================= */

/* Hero */
.hero {
  padding: 8rem 0 4rem; /* Marge haute pour compenser le header fixe */
  text-align: center;
  background: radial-gradient(circle at top right, rgba(46, 2, 73, 0.05), transparent 40%);
}
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 700;
  color: var(--brand-purple); text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 1rem;
  background: rgba(46, 2, 73, 0.06); padding: 0.3rem 0.8rem; border-radius: 50px;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--brand-purple);
  max-width: 20ch; margin: 0 auto 1rem;
}
.hero-cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

.trust {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem;
  margin-top: 3rem;
}
.trust li {
  font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;
}
.trust li::before { content: "✓"; color: var(--brand-gold); font-weight: 900; }


/* Grille Services */
.section { padding: 4rem 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: stretch;
}

.card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-purple);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease;
}
.card:hover { transform: translateY(-7px); }

/* Contenu Carte */
.card span.muted {
  display: block;
  font-size: 0.9rem !important; 
  font-weight: 800 !important; 
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--brand-gold) !important;
  opacity: 1 !important;
  margin-bottom: 0.75rem !important;
}

.card h3 { margin: 0 0 1rem; min-height: 3rem; display: flex; align-items: center; justify-content: center; }
.card p.muted { margin: 0 0 1rem; flex-grow: 1; }
.card .actions { margin-top: auto; padding-top: 1.5rem; width: 100%; }

/* Icônes */
.card-icon {
  width: 48px; height: 48px; margin: 0 auto 1.5rem; display: block;
  color: var(--brand-purple); /* VIOLET sur fond blanc */
}


/* Section Finale (Split) */
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .split-grid { grid-template-columns: 2fr 1fr; }
}

/* Carte Audit (Violette) */
.card.emphasis {
  background-color: var(--brand-purple) !important;
  border: none !important;
  border-top: 4px solid var(--brand-gold) !important;
  color: #FFFFFF;
  align-items: center !important; /* Force le centrage */
  text-align: center !important;
}
.card.emphasis h2 { color: #FFFFFF; }
.card.emphasis p, .card.emphasis .lead { color: #e0e0e0; }

/* Bouton sur carte violette (Blanc) */
.card.emphasis .actions .btn {
  background-color: #FFFFFF !important;
  color: var(--brand-purple) !important;
  border: none !important;
}
.card.emphasis .actions .btn:hover {
  background-color: var(--brand-gold) !important;
  color: #000000 !important;
}
/* Icône sur carte violette (OR) */
.card.emphasis .card-icon { color: var(--brand-gold) !important; }


/* =========================================================
   6. FOOTER
   ========================================================= */
.minimal-footer {
  background-color: var(--brand-purple); 
  border-top: 1px solid var(--brand-gold);
  padding: 3rem 0; margin-top: 4rem;
  text-align: center; color: #fff;
}

.footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.footer-nav a {
  color: #ffffff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9;
}
.footer-nav a:hover { color: var(--brand-gold); opacity: 1; }
.footer-nav .separator { color: var(--brand-gold); opacity: 0.8; }

.footer-copy p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); margin: 0; }
.footer-copy strong { color: #fff; }

/* =========================================================
   7. FORMULAIRES & CONTACT (TAILLES NATURELLES / ALIGNÉ HAUT)
   ========================================================= */

/* --- LE CONTENEUR GRILLE (SPLIT) --- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr; /* Mobile : Empilé */
  gap: 2rem;
  
  /* CHANGEMENT ICI : 'start' aligne tout en haut. 
     Chaque colonne aura sa propre hauteur naturelle. */
  align-items: start; 
  
  margin-top: 2rem;
}

/* Sur Desktop (> 900px) : On passe en 2 colonnes */
@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1.8fr 1fr; 
    gap: 3rem;
  }
}

/* --- COLONNE GAUCHE : LE FORMULAIRE --- */
.form-box {
  background-color: #ffffff;
  
  /* STYLE CARTE FREKI */
  border-top: 4px solid var(--brand-purple);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  
  padding: 2.5rem;
  width: 100%;
  /* Pas de height forcée, il s'adapte au contenu */
}

/* Titres des champs */
.form-box label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--brand-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Champs (Inputs) */
.form-box input,
.form-box select,
.form-box textarea {
  width: 100%;
  padding: 1rem;
  background-color: #F8F7FA;
  border: 1px solid #E5E0EB;
  border-radius: 8px;
  color: #333;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

/* Focus */
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 4px rgba(46, 2, 73, 0.1);
}

.form-box ::placeholder { color: #aaa; }

/* Bouton Formulaire */
.form-submit-wrapper { text-align: center; margin-top: 1rem; }
.form-box .btn { width: 100%; font-size: 1.1rem; padding: 1rem 2rem; }
@media(min-width: 768px) { .form-box .btn { width: auto; min-width: 250px; } }

.fineprint {
  font-size: 0.85rem; color: var(--muted); margin-top: 1.5rem;
  text-align: center; display: block;
}

/* La Carte Coordonnées */
.contact-card {
  background: #ffffff;
  
  /* STYLE IDENTIQUE AU FORMULAIRE */
  border-top: 4px solid var(--brand-purple);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  
  /* Hauteur naturelle */
}

.contact-card h3 { 
  color: var(--brand-purple); 
  margin-bottom: 2rem; 
  font-size: 1.4rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}

/* Éléments de contact */
.contact-item { margin-bottom: 2rem; }
.contact-item:last-child { margin-bottom: 0; }

.contact-label {
  display: block; font-size: 0.85rem; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 0.5rem; letter-spacing: 1px;
}

.link-highlight { 
  font-weight: 700; color: var(--brand-purple); font-size: 1.1rem; 
  border-bottom: 2px solid var(--brand-gold);
}
.link-highlight:hover { background-color: var(--brand-gold); color: #000; border-color: transparent;}

/* Bouton WhatsApp */
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  background-color: #25D366; color: #fff; font-weight: 700;
  padding: 0.8rem 1.2rem; border-radius: 50px;
  transition: transform 0.2s ease; font-size: 0.95rem;
}
.btn-whatsapp:hover { transform: translateY(-2px); filter: brightness(105%); }

/* --- MESSAGES DE FEEDBACK (Succès / Erreur) --- */
.notice {
  padding: 1rem;
  margin: 0 auto 2rem;
  border-radius: 8px;
  max-width: 100%; /* S'adapte à la colonne */
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.notice.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.notice.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}


/* =========================================================
   8. PAGE À PROPOS (SPÉCIFIQUE)
   ========================================================= */

/* Section "Histoire / Branding" (Fond Gris) */
.bg-brand {
  background-color: #F8F7FA;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Grille spécifique BIO (Variante de contact-layout) */
/* On veut que le texte soit centré verticalement par rapport à la photo */
.bio-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center; /* C'est la différence : centré verticalement */
  margin-bottom: 3rem;
}
@media (min-width: 900px) {
  .bio-layout {
    grid-template-columns: 1.2fr 1fr; /* Texte un peu plus large que la photo */
  }
}

/* Image de profil */
.bio-img-wrapper {
  position: relative;
}
.bio-img-wrapper img {
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 4px solid #fff; /* Cadre blanc autour de la photo */
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
/* Décoration violette derrière la photo */
.bio-img-wrapper::before {
  content: "";
  position: absolute;
  top: 20px; right: -15px;
  width: 100%; height: 100%;
  border: 3px solid var(--brand-purple);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.3;
}
@media (max-width: 900px) { .bio-img-wrapper::before { display: none; } } /* On cache la déco sur mobile */

/* Liste à puces stylisée (pour tes valeurs) */
.check-list li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}
.check-list li::before {
  content: "✓";
  color: var(--brand-gold);
  font-weight: 900;
  position: absolute;
  left: 0;
}