/*
Theme Name: Hope Apprentissage
Theme URI: https://hope-apprentissage.be
Author: Hope Apprentissage
Author URI: https://hope-apprentissage.be
Description: Thème sur mesure pour Hope Apprentissage — 1ère plateforme collaborative belge dédiée aux troubles de l'apprentissage. Construit pour Elementor / Elementor Pro. Ce paquet couvre le Module 1 du planning de projet : Parcours Visiteur (Accueil + 3 régions : Bruxelles, Flandre, Wallonie).
Version: 0.1.0-module1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Requires Plugins: elementor
Text Domain: hope-apprentissage
License: Propriétaire — usage exclusif Hope Apprentissage
*/

/* =========================================================
   HOPE APPRENTISSAGE — Feuille de style commune
   Charte : Or lumineux / Or bronze / Écru / Ardoise
   Police texte : Lexend — Police titres : Nunito
   (Palette et polices à déclarer également dans
   Elementor > Réglages du site > Couleurs / Polices globales,
   voir README-INSTALLATION.md)
   ========================================================= */

:root{
  --or: #D4AF37;
  --or-fonce: #7A6332;
  --ecru: #F7F5F0;
  --ecru-2: #F0ECE2;
  --ardoise: #2C3E50;
  --ardoise-douce: #5b6b78;
  --bxl: #9B59B6;
  --bxl-fonce: #7d4696;
  --vla: #F1C40F;
  --vla-fonce: #a98a0c;
  --wal: #2ECC71;
  --wal-fonce: #219a56;
  --radius: 12px;
  --radius-lg: 20px;
  --ombre: 0 6px 20px rgba(122,99,50,0.10);
  --ombre-hover: 0 12px 28px rgba(122,99,50,0.18);
  --region: var(--or);
  --region-fonce: var(--or-fonce);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ecru);
  color:var(--ardoise);
  font-family:'Lexend', sans-serif;
  font-weight:400;
  line-height:1.6;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Nunito', sans-serif;
  font-weight:800;
  color:var(--or-fonce);
  line-height:1.25;
  margin:0 0 .5em;
}
h1{ font-weight:900; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

img,svg{ max-width:100%; display:block; }

ul.coeur-liste{ list-style:none; padding-left:0; margin:0; }
ul.coeur-liste li{ position:relative; padding-left:1.6em; margin-bottom:.6em; }
ul.coeur-liste li::before{
  content:"♥";
  position:absolute; left:0; top:0;
  color:var(--or);
  font-size:.95em;
}

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

/* ---------- Bandeau annonce essai ---------- */
.bandeau-essai{
  background:var(--ardoise);
  color:var(--ecru);
  text-align:center;
  font-size:.85rem;
  padding:6px 12px;
}
.bandeau-essai a{ text-decoration:underline; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,245,240,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #e7e0cf;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
  gap:16px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Nunito',sans-serif; font-weight:900;
  font-size:1.4rem; color:var(--or-fonce); white-space:nowrap;
}
.logo .coeur-icone{ width:34px; height:34px; flex-shrink:0; }
.nav-principale{
  display:flex; align-items:center; gap:22px;
  font-size:.92rem; font-weight:500; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
}
.nav-principale li{ display:flex; }
.nav-principale a{ opacity:.85; transition:opacity .2s; }
.nav-principale a:hover{ opacity:1; color:var(--or-fonce); }

.select-langue{
  border:1px solid #d8cfae; background:#fff; color:var(--ardoise);
  font-family:inherit; font-size:.85rem; padding:8px 12px;
  border-radius:var(--radius); font-weight:500;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius);
  font-weight:700; font-size:.95rem; border:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn-or{
  background:linear-gradient(135deg,var(--or),#c99a2e);
  color:#fff; box-shadow:var(--ombre);
}
.btn-or:hover{ transform:translateY(-2px); box-shadow:var(--ombre-hover); }
.btn-outline{
  background:transparent; border:2px solid var(--or); color:var(--or-fonce);
}
.btn-outline:hover{ background:var(--or); color:#fff; }
.btn-region{
  background:var(--region); color:#fff; box-shadow:var(--ombre);
}
.btn-region:hover{ transform:translateY(-2px); box-shadow:var(--ombre-hover); filter:brightness(0.96); }
.btn-sm{ padding:8px 16px; font-size:.82rem; }
.btn-bloc{ width:100%; }

/* ---------- Hero ---------- */
.hero{
  padding:56px 0 24px; text-align:center;
}
.hero .eyebrow{
  display:inline-block; padding:6px 16px; border-radius:99px;
  background:var(--ecru-2); color:var(--or-fonce); font-weight:600;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:18px; border:1px solid #e3d8ad;
}
.hero h1{ font-size:2.5rem; max-width:780px; margin-left:auto; margin-right:auto; }
.hero p.lead{ max-width:620px; margin:0 auto; color:var(--ardoise-douce); font-size:1.05rem; }

/* ---------- Cartes régions ---------- */
.regions{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin:44px 0 20px;
}
.carte-region{
  border-radius:var(--radius-lg);
  padding:38px 26px; text-align:center;
  color:#fff; position:relative; overflow:hidden;
  box-shadow:var(--ombre); transition:transform .2s, box-shadow .2s;
  border:none; display:block;
}
.carte-region:hover{ transform:translateY(-6px); box-shadow:var(--ombre-hover); }
.carte-region.bruxelles{ background:linear-gradient(160deg,var(--bxl),var(--bxl-fonce)); }
.carte-region.flandre{ background:linear-gradient(160deg,var(--vla),var(--vla-fonce)); color:var(--ardoise); }
.carte-region.wallonie{ background:linear-gradient(160deg,var(--wal),var(--wal-fonce)); }
.carte-region .nom{ font-family:'Nunito'; font-weight:900; font-size:1.6rem; margin-bottom:6px; }
.carte-region .sous{ font-size:.88rem; opacity:.9; }
.carte-region .fleche{ margin-top:18px; font-weight:700; font-size:.85rem; }

/* ---------- Compteur ---------- */
.compteur{
  text-align:center; padding:18px; background:var(--ecru-2);
  border-radius:var(--radius); font-weight:600; color:var(--or-fonce);
}
.compteur .chiffre{ font-family:'Nunito'; font-weight:900; font-size:1.3rem; color:var(--ardoise); }

/* ---------- Carrousel témoignages ---------- */
.carrousel-wrap{ overflow:hidden; margin:36px 0; position:relative; }
.carrousel-track{
  display:flex; gap:20px; width:max-content;
  animation:defiler 28s linear infinite;
}
.carrousel-wrap:hover .carrousel-track{ animation-play-state:paused; }
@keyframes defiler{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.temoignage-carte{
  background:#fff; border:1px solid #ece4cc; border-radius:var(--radius);
  padding:20px; width:300px; flex-shrink:0; box-shadow:var(--ombre);
}
.temoignage-carte .qui{ font-weight:700; color:var(--or-fonce); margin-top:10px; font-size:.85rem; }
.temoignage-carte .region-tag{
  display:inline-block; font-size:.7rem; font-weight:700; padding:3px 10px;
  border-radius:99px; color:#fff; margin-bottom:8px;
}

/* ---------- Section générique ---------- */
.section{ padding:56px 0; }
.section-titre{ text-align:center; margin-bottom:36px; }
.section-titre p{ color:var(--ardoise-douce); max-width:620px; margin:0 auto; }
.section-alt{ background:#fff; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ardoise); color:#e7e2d6; padding:44px 0 22px; margin-top:40px;
}
.site-footer a{ opacity:.8; }
.site-footer a:hover{ opacity:1; }
.footer-grille{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px;
}
.footer-grille h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-grille ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
.footer-bas{
  border-top:1px solid rgba(255,255,255,.15); padding-top:18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.8rem; opacity:.75;
}

/* ---------- Onglets régionaux ---------- */
.onglets-nav{
  display:flex; gap:6px; border-bottom:2px solid #eee2c0; margin-bottom:32px;
  overflow-x:auto;
}
.onglet-btn{
  background:none; border:none; padding:14px 20px; font-weight:600;
  color:var(--ardoise-douce); border-bottom:3px solid transparent; white-space:nowrap;
  font-size:.95rem;
}
.onglet-btn.actif{ color:var(--region-fonce); border-color:var(--region); }
.onglet-panneau{ display:none; }
.onglet-panneau.actif{ display:block; animation:apparaitre .35s ease; }
@keyframes apparaitre{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.bloc-etape{
  display:flex; gap:20px; background:#fff; border-radius:var(--radius);
  padding:22px; margin-bottom:18px; box-shadow:var(--ombre); align-items:flex-start;
}
.bloc-etape .num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--region); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Nunito'; font-weight:800;
}

.encadre-legal{
  background:var(--ecru-2); border-left:4px solid var(--or); border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px; font-size:.85rem; color:var(--ardoise-douce); margin:24px 0;
}

/* ---------- Recherche praticien / carte (aperçu Module 1, connecté en Module 2) ---------- */
.recherche-layout{ display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start; }
.panneau-filtres{
  background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--ombre);
  display:flex; flex-direction:column; gap:18px;
}
.panneau-filtres label{ font-weight:600; font-size:.85rem; display:block; margin-bottom:6px; }
.panneau-filtres input[type="text"], .panneau-filtres select{
  width:100%; padding:10px 12px; border:1px solid #ddd0a5; border-radius:var(--radius);
  font-family:inherit; background:var(--ecru);
}
.check-ligne{ display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:500; }
.chip-groupe{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid #ddd0a5; padding:6px 12px; border-radius:99px; font-size:.78rem;
  background:var(--ecru); font-weight:500;
}
.chip.actif{ background:var(--region); color:#fff; border-color:var(--region); }
.slider-radius{ width:100%; accent-color:var(--region); }

.carte-zone{
  background:linear-gradient(135deg,#e9f3ec,#f7f5f0);
  border-radius:var(--radius); min-height:460px; position:relative; overflow:hidden;
  box-shadow:var(--ombre); border:1px solid #e2ead0;
}
.carte-zone .carte-label{
  position:absolute; top:14px; left:14px; background:#fff; padding:6px 14px;
  border-radius:99px; font-size:.78rem; font-weight:700; box-shadow:var(--ombre);
}
.marqueur{
  position:absolute; width:16px; height:16px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25);
  cursor:pointer;
}
.marqueur:hover + .infobulle{ display:block; }
.infobulle{
  display:none; position:absolute; background:#fff; border-radius:var(--radius);
  padding:12px 14px; box-shadow:var(--ombre-hover); width:200px; z-index:5; font-size:.8rem;
}
.pastille{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.pastille.vert{ background:#2ECC71; } .pastille.jaune{ background:#F1C40F; } .pastille.rouge{ background:#E74C3C; }

.carte-praticien{
  background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--ombre);
  display:flex; gap:14px; margin-bottom:14px; align-items:center;
}
.avatar-rond{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:'Nunito'; font-weight:800; font-size:1.1rem;
}

/* ---------- Cartes contenu génériques ---------- */
.grille-cartes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.badges-filtre{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }

/* ---------- RTL (prêt pour Module 4 / Polylang AR) ---------- */
html[dir="rtl"] body{ font-family:'Lexend', 'Noto Naskh Arabic', sans-serif; }
html[dir="rtl"] ul.coeur-liste li{ padding-left:0; padding-right:1.6em; }
html[dir="rtl"] ul.coeur-liste li::before{ left:auto; right:0; }
html[dir="rtl"] .encadre-legal{ border-left:none; border-right:4px solid var(--or); border-radius:var(--radius) 0 0 var(--radius); }

/* ---------- Utilitaires ---------- */
.centre{ text-align:center; }
.mt-0{ margin-top:0; }
.petit{ font-size:.8rem; color:var(--ardoise-douce); }
.fil-ariane{ font-size:.82rem; color:var(--ardoise-douce); margin-bottom:18px; }
.fil-ariane a:hover{ color:var(--or-fonce); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .regions{ grid-template-columns:1fr; }
  .recherche-layout{ grid-template-columns:1fr; }
  .footer-grille{ grid-template-columns:1fr 1fr; }
  .nav-principale{ display:none; }
}

/* ---------- Focus visible accessibilité ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--bxl); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Admin / éditeur Elementor : cadre discret par widget Hope ---------- */
.elementor-editor-active .hope-onglets-regionaux,
.elementor-editor-active .hope-region-hero{
  outline: 1px dashed rgba(212,175,55,.4);
  outline-offset: 4px;
}