/*
Theme Name: KrediTrust
Theme URI: https://kreditrust.com
Author: KrediTrust
Description: Thème WordPress pour KrediTrust, plateforme d'avis clients et de vérification de sites sérieux.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kreditrust
*/

:root{
  --bg: #FFFFFF;
  --bg-raised: #F4F7FB;
  --ink: #0B1F3A;
  --ink-soft: #51617D;
  --line: #DCE3EE;
  --verified: #1450C4;
  --verified-dark: #0B3585;
  --seal: #E8A93B;
  --seal-dark: #B9821F;
  --danger: #B3402C;

  --font-display: 'Space Grotesk', 'Public Sans', -apple-system, Segoe UI, sans-serif;
  --font-body: 'Public Sans', -apple-system, Segoe UI, sans-serif;

  --measure: 68ch;
}

*{ box-sizing: border-box; }
html{ background: var(--bg); }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}
img{ max-width: 100%; height: auto; display:block; }
a{ color: var(--verified-dark); text-decoration-thickness: 1px; }
a:hover{ color: var(--verified); }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -.01em;
}
h1{ font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 600; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3{ font-size: 1.25rem; }
p{ max-width: var(--measure); }

.container{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header{
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  border-top: 3px solid var(--verified);
}
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 0;
}
.site-title{
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -.01em;
  margin: 0;
}
.site-title a{ color: var(--ink); text-decoration:none; }
.site-title .mark{ color: var(--verified); }
.primary-nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
.primary-nav a{
  color: var(--ink-soft); text-decoration:none; font-size:.95rem;
}
.primary-nav a:hover{ color: var(--verified-dark); }

/* ---------- Hero / search ---------- */
.hero{
  padding: 76px 0 56px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg) 100%);
}
.hero h1{ max-width: 16ch; }
.hero .lede{ color: var(--ink-soft); font-size: 1.15rem; max-width: 52ch; }

/* ---------- Logo ---------- */
.site-logo img{ max-height: 52px; width:auto; }
.brand-mark{ display:flex; align-items:center; gap:10px; color: var(--ink); text-decoration:none; }
.brand-seal{ width: 34px; height: 34px; color: var(--verified); flex-shrink:0; }
.brand-mark span{ font-family: var(--font-display); font-size: 1.5rem; letter-spacing:-.01em; font-weight:600; }
.brand-mark .mark{ color: var(--verified); }

/* ---------- Hero slider ---------- */
.hero-slider{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-slider-track{ position: relative; height: 460px; }
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  opacity:0; visibility:hidden;
  transition: opacity .7s ease;
  background-color: var(--ink);
  background-size: cover; background-position:center;
}
.hero-slide.is-active{ opacity:1; visibility:visible; }
.hero-slide.has-pattern{
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.08) 0, transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(232,169,59,.18) 0, transparent 46%),
    linear-gradient(135deg, #0B3585 0%, #061B45 75%);
}
.hero-slide-inner{ position:relative; z-index:2; color: #F3F1E7; }
.hero-slide-inner h1{ color:#fff; max-width: 18ch; }
.hero-slide-inner .lede{ color: rgba(243,241,231,.86); }
.hero-slide .btn-primary{ margin-top: 6px; }

.hero-search-wrap{ position: relative; z-index: 3; margin-top: -64px; }
.hero-search-card{
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 26px 28px 20px;
  max-width: 620px;
  box-shadow: 0 8px 24px rgba(27,37,33,.12);
}
.hero-search-card .search-form{ max-width: none; margin-top:0; }

.hero-dots{
  position:absolute; bottom: 96px; left:0; right:0; z-index:3;
  display:flex; justify-content:center; gap:8px;
}
.hero-dot{
  width:8px; height:8px; border-radius:50%; border: 1px solid rgba(255,255,255,.7);
  background: transparent; padding:0; cursor:pointer;
}
.hero-dot.is-active{ background: #fff; }

.trust-strip{
  list-style:none; display:flex; gap: 28px; margin: 18px 0 0; padding:0;
  font-size: .85rem; color: var(--ink-soft);
}
.trust-strip li{ position:relative; padding-left: 16px; }
.trust-strip li::before{
  content:''; position:absolute; left:0; top:.45em;
  width:7px; height:7px; border-radius:50%; background: var(--verified);
}

/* ---------- Stats band ---------- */
.stats-band{ background: var(--bg-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat-icon{ width:36px; height:36px; color: var(--verified); margin-bottom:6px; }
.stat-icon svg{ width:100%; height:100%; }
.stat strong{ font-family: var(--font-display); font-size:1.05rem; font-weight:500; }
.stat span:not(.stat-icon){ color: var(--ink-soft); font-size:.9rem; }

@media (max-width: 780px){
  .hero-slider-track{ height: 560px; }
  .hero-search-wrap{ margin-top: -40px; }
  .stats-grid{ grid-template-columns: 1fr; }
}

.search-form{
  display:flex; gap:0; margin-top: 28px; max-width: 560px;
  border: 1.5px solid var(--ink); background: var(--bg-raised);
}
.search-form input[type="search"]{
  flex:1; border:none; background:transparent; padding: 14px 16px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
}
.search-form input[type="search"]:focus{ outline: 2px solid var(--verified); outline-offset: -2px; }
.search-form button{
  border: none; background: var(--ink); color: var(--bg-raised);
  padding: 0 22px; font-family: var(--font-body); font-size: .95rem; cursor: pointer;
}
.search-form button:hover{ background: var(--verified-dark); }

/* ---------- Dossier / entreprise card ---------- */
.dossier{
  border: 1px solid var(--line);
  background: var(--bg-raised);
  padding: 32px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items:center;
  box-shadow: 0 1px 0 var(--line);
}
.seal{
  width: 68px; height: 68px; border-radius: 50%;
  border: 1.5px solid var(--seal);
  display:flex; align-items:center; justify-content:center;
  color: var(--seal-dark); font-family: var(--font-display); font-weight:600;
  font-size:.7rem; letter-spacing: .01em;
  text-align:center; line-height:1.1; flex-shrink:0;
}
.dossier h2{ margin-bottom: 4px; }
.dossier .meta{ color: var(--ink-soft); font-size: .9rem; }
.rating-summary{ text-align:right; }
.rating-number{
  font-family: var(--font-display); font-size: 2.4rem; color: var(--verified-dark); line-height:1;
}
.rating-count{ color: var(--ink-soft); font-size: .85rem; }

.stars{ color: var(--seal); letter-spacing: 2px; font-size: 1.05rem; }
.stars .empty{ color: var(--line); }

/* ---------- Listing entries ---------- */
.entry-list{ list-style:none; margin:0; padding:0; }
.entry-list li{
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.entry-list li:first-child{ padding-top:0; }
.entry-list a.entry-title{
  font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); text-decoration:none;
}
.entry-list a.entry-title:hover{ color: var(--verified-dark); }
.entry-excerpt{ color: var(--ink-soft); margin: 6px 0 0; }

/* ---------- Reviews (comments) ---------- */
.review{
  border-left: 3px solid var(--line);
  padding: 4px 0 4px 20px;
  margin-bottom: 26px;
}
.review.verified{ border-left-color: var(--verified); }
.review-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.review-author{ font-weight: 600; }
.review-date{ color: var(--ink-soft); font-size: .85rem; }
.badge-verified{
  display:inline-flex; align-items:center; gap:5px;
  font-size: .75rem; color: var(--verified-dark);
  border: 1px solid var(--verified); border-radius: 999px;
  padding: 2px 9px;
}

.review-form{
  border: 1px solid var(--line); background: var(--bg-raised);
  padding: 28px; margin-top: 32px;
}
.rating-input{ display:flex; gap:6px; margin: 6px 0 18px; }
.rating-input label{ cursor:pointer; font-size: 1.6rem; color: var(--line); }
.rating-input input{ display:none; }
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label{ color: var(--seal); }

.review-form input[type="text"],
.review-form input[type="email"],
.review-form textarea{
  width:100%; border: 1px solid var(--line); background: #fff;
  padding: 11px 12px; font-family: var(--font-body); margin-bottom: 14px;
}
.review-form button{
  border:none; background: var(--verified); color:#fff;
  padding: 12px 26px; font-size: .95rem; cursor:pointer;
}
.review-form button:hover{ background: var(--verified-dark); }
.review-form--notice p{ color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 40px 0; margin-top: 64px;
  color: var(--ink-soft); font-size: .9rem;
}
.site-footer a{ color: var(--ink-soft); }
.footer-brand{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:600; color: var(--ink);
  margin-bottom: 6px;
}
.footer-brand .brand-seal{ color: var(--verified); }

/* ---------- Utility ---------- */
.section{ padding: 48px 0; }
.section + .section{ border-top: 1px solid var(--line); }
.btn{
  display:inline-block; border: 1.5px solid var(--ink); color: var(--ink);
  padding: 10px 20px; text-decoration:none; font-size: .9rem;
}
.btn:hover{ background: var(--ink); color: var(--bg-raised); }
.btn-primary{ background: var(--verified); border-color: var(--verified); color:#fff; }
.btn-primary:hover{ background: var(--verified-dark); border-color: var(--verified-dark); color:#fff; }

@media (max-width: 640px){
  .dossier{ grid-template-columns: auto 1fr; }
  .rating-summary{ grid-column: 1 / -1; text-align:left; margin-top:10px; }
  .primary-nav ul{ gap:16px; flex-wrap:wrap; }
}
:focus-visible{ outline: 2px solid var(--verified); outline-offset: 2px; }