/*
Theme Name: Relior
Theme URI: https://relior.fr
Description: Theme enfant Relior (base ListingHive). Branding bleu-blanc-rouge, dominante bleu royal. On vous relie au bon pro.
Author: Relior
Template: listinghive
Version: 1.0.0
Text Domain: relior
*/

:root{
  --relior-bleu:#0a2fa0;        /* bleu royal */
  --relior-bleu-fonce:#071c5e;
  --relior-rouge:#e11d2a;
  --relior-gris-clair:#f5f7fb;
}

/* ---- Marque (wordmark Reli + or) ---- */
.relior-wordmark{font-weight:800;letter-spacing:.4px;text-decoration:none;font-size:1.5rem;}
.relior-wordmark .reli{color:var(--relior-bleu);}
.relior-wordmark .or{color:var(--relior-rouge);}

/* ---- Couleur primaire : bleu royal partout ---- */
.button.button--primary,.hp-button.button--primary,
button[type="submit"],.button--primary:not(:disabled){
  background-color:var(--relior-bleu)!important;border-color:var(--relior-bleu)!important;color:#fff!important;}
.button.button--primary:hover,button[type="submit"]:hover{
  background-color:var(--relior-bleu-fonce)!important;border-color:var(--relior-bleu-fonce)!important;}
a{color:var(--relior-bleu);}
a:hover{color:var(--relior-bleu-fonce);}
.hp-rating__icon,.star-rating{color:var(--relior-rouge)!important;}

/* ================= PAGE D'ACCUEIL ================= */
.relior-container{max-width:1140px;margin:0 auto;padding:0 1rem;}

.relior-hero{background:linear-gradient(135deg,var(--relior-bleu) 0%,var(--relior-bleu-fonce) 100%);
  color:#fff;padding:4.5rem 0 4rem;}
.relior-hero h1{font-weight:800;font-size:2.4rem;line-height:1.15;color:#fff;margin:0;}
.relior-hero .relior-lead{opacity:.93;font-size:1.15rem;max-width:640px;margin:1rem 0 1.6rem;}
.relior-barre{height:5px;width:90px;background:var(--relior-rouge);border-radius:3px;margin:1.1rem 0;}
.relior-cta{display:flex;gap:.8rem;flex-wrap:wrap;}

.relior-btn{display:inline-block;padding:.8rem 1.5rem;border-radius:8px;font-weight:700;text-decoration:none;}
.relior-btn-rouge{background:var(--relior-rouge);color:#fff;}
.relior-btn-rouge:hover{filter:brightness(.92);color:#fff;}
.relior-btn-ghost{background:transparent;color:#fff;border:2px solid #fff;}
.relior-btn-ghost:hover{background:#fff;color:var(--relior-bleu);}

.relior-section{padding:3.5rem 0;}
.relior-section-grise{background:var(--relior-gris-clair);}
.relior-section h2{font-weight:800;color:var(--relior-bleu-fonce);text-align:center;margin-bottom:.4rem;}
.relior-sub{text-align:center;color:#5b6472;margin-bottom:2rem;}

.relior-metiers{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;}
@media(max-width:900px){.relior-metiers{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.relior-metiers{grid-template-columns:repeat(2,1fr);}}
.relior-metier{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-decoration:none;color:#1a2230;
  border:1px solid #e7ebf3;border-radius:14px;padding:1.3rem .6rem;text-align:center;transition:.15s;}
.relior-metier:hover{border-color:var(--relior-bleu);transform:translateY(-3px);box-shadow:0 8px 20px rgba(10,47,160,.12);color:var(--relior-bleu);}
.relior-metier .ic{font-size:1.9rem;}
.relior-metier .nm{font-weight:600;font-size:.95rem;}

.relior-faces{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
@media(max-width:768px){.relior-faces{grid-template-columns:1fr;}}
.relior-face{background:#fff;border-radius:16px;padding:1.8rem;box-shadow:0 10px 30px rgba(7,28,94,.10);}
.relior-face h3{color:var(--relior-bleu-fonce);font-weight:700;}

.relior-etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center;}
@media(max-width:768px){.relior-etapes{grid-template-columns:1fr 1fr;}}
.relior-num{width:44px;height:44px;border-radius:50%;background:var(--relior-bleu);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin:0 auto .7rem;}

/* Badges */
.relior-badge-verifie{display:inline-block;background:var(--relior-bleu);color:#fff;font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:999px;}