/* =============================================================================
   main.css : feuille de style commune à toutes les pages HORS MODULES
   (accueil, guides, pages légales, vision, inscription, connexion…).

   Contenu : charte graphique de Tunisie HUB (docs/charte-graphique.md) :
   variables de couleurs et de typographie, mode sombre, touche d'orange,
   classes utilitaires de la charte, logo, pages légales.

   Chargée par app/Views/layouts/_home_theme.php, après app.min.css.
   Les modules (CV, article, dashboard, vitrine…) gardent leur propre feuille
   dans css/modules/ ou leur propre thème.

   Fichier écrit à la main : ne PAS le mettre dans la compilation Tailwind.
   Appelé avec \App\Core\Asset::url('css/main.css') (numéro de version automatique).
   ============================================================================= */

:root{
  box-sizing:border-box;
  --bg:#ffffff; --fg:#0f172a; --muted:#5b6472;
  --card-bg:#f6f8fb; --border:#e6e9ee;
  --accent:#1d4ed8; --accent-dark:#1e3a8a; --accent-soft:#eaf0fe;
  /* Touche d'orange (charte, section 2) : décor discret ; le bleu garde les actions et le focus clavier */
  --orange:#f97316; --orange-texte:#c2410c; --orange-soft:#fff3e8; --orange-puce:#ea580c;
  --titre-bleu:var(--accent-dark);  /* petits titres bleus : foncé en clair, plus vif en sombre (lisibilité) */
  --rayon-bouton:.75rem;            /* même arrondi que les boutons, pour tout bloc « bouton-like » */
  /* Typographie : titres (Plus Jakarta Sans) et texte courant (Inter) */
  --font-titles:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  /* Réglage 3 (test) : texte courant en Plus Jakarta Sans. Pour revenir à Inter : remplacer par 'Inter',system-ui,-apple-system,sans-serif */
  --font-body:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  /* Réglage 1 (test) : graisse des titres 700. Pour revenir à l'ancien rendu : 800 */
  --titre-poids:700;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1220; --fg:#e7ecf3; --muted:#9aa5b4;
    --card-bg:#121b2e; --border:#223049;
    --accent:#5b8dfb; --accent-dark:#3b63c9; --accent-soft:#16233d;
    --orange:#fb923c; --orange-texte:#fdba74; --orange-soft:#2a1c10; --orange-puce:#f97316; --titre-bleu:var(--accent);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1220; --fg:#e7ecf3; --muted:#9aa5b4;
  --card-bg:#121b2e; --border:#223049;
  --accent:#5b8dfb; --accent-dark:#3b63c9; --accent-soft:#16233d;
    --orange:#fb923c; --orange-texte:#fdba74; --orange-soft:#2a1c10; --orange-puce:#f97316; --titre-bleu:var(--accent);
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);}
/* Réglage 4 (test) : texte libre légèrement agrandi, sans toucher aux titres ni aux cadres.
   À poser (classe txt-corps) sur les paragraphes hors cadre. « font-size-adjust » règle la hauteur des minuscules
   de Plus Jakarta Sans sur celle d'Inter (0.546) : les lettres paraissent ~2 % plus grandes, et les tailles
   Tailwind responsive (text-sm, sm:text-base…) restent intactes. Pour annuler : supprimer cette règle. */
.txt-corps{font-size-adjust:.546;}

/* ---------- Touche d'orange : classes à poser dans les vues (aucune ne s'applique toute seule) ---------- */
/* Lien dont le soulignement orange s'étire au survol (navbar, pied de page, liens de texte) */
.lien-orange{background:linear-gradient(var(--orange),var(--orange)) left bottom / 0 2px no-repeat; padding-bottom:3px; transition:background-size .25s ease, color .2s;}
.lien-orange:hover{background-size:100% 2px; color:var(--fg);}
/* Carte ou bloc dont la bordure passe en orange au survol */
.survol-orange:hover{border-color:var(--orange);}
/* Titre de section : petit trait orange dessous */
.titre-section::after{content:""; display:block; width:3rem; height:3px; margin:.875rem auto 0; border-radius:2px; background:var(--orange);}
/* Bouton secondaire : contour orange au survol (« !important » car la bordure est posée en attribut style) */
.btn-sec-orange:hover{border-color:var(--orange) !important;}
/* Lien à flèche : la flèche glisse et devient orange au survol */
.lien-fleche-orange svg{transition:transform .2s;}
.lien-fleche-orange:hover svg{transform:translateX(4px); color:var(--orange);}
/* Ligne de réassurance du hero : petites coches orange */
.reassurance{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem; margin:0 0 1.75rem; padding:0; list-style:none; font-size:.8125rem; font-weight:600; color:var(--muted);}
.reassurance li{display:inline-flex; align-items:center; gap:.5rem;}
.reassurance li::before{
  content:""; width:.9rem; height:.9rem; flex:none; background:var(--orange-puce);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Bandeau d'appel à l'action : filet orange de 1 px en haut, bas arrondi comme les boutons */
.cta-band{border-top:1px solid var(--orange); border-radius:0 0 var(--rayon-bouton) var(--rayon-bouton);}
.btn-blanc-orange{transition:transform .2s, box-shadow .2s;}
.btn-blanc-orange:hover{transform:translateY(-2px); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 70%, transparent);}
.btn-contour-orange{transition:transform .2s, border-color .2s;}
.btn-contour-orange:hover{transform:translateY(-2px); border-color:var(--orange);}
/* Chiffres clés : bande à fond alterné, icône en traits dans un rond orange pâle */
.bande-stats{background:var(--card-bg); border-block:1px solid var(--border);}
.bande-stats .card{background:var(--bg);}
/* Valeur d'un chiffre clé : taille qui s'adapte à la largeur de l'écran (« 24 gouvernorats » ne doit pas déborder de sa carte) */
.stat-valeur{font-size:clamp(1rem, 4.4vw, 1.5rem); line-height:1.25; overflow-wrap:break-word; hyphens:auto;}
.icone-orange{width:2.75rem; height:2.75rem; margin:0 auto .5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--orange-soft);}
.icone-orange svg{width:1.375rem; height:1.375rem; stroke:var(--orange); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
@media (prefers-reduced-motion: reduce){ .lien-orange,.lien-fleche-orange svg,.btn-blanc-orange,.btn-contour-orange{transition:none;} }
body{background:var(--bg); color:var(--fg); font-family:var(--font-body);}
h1,h2,h3{font-family:var(--font-titles); font-weight:var(--titre-poids);}
/* Réglage 2 (test) : resserrement des lettres limité aux grands titres (h1, h2), pas aux h3 */
h1,h2{letter-spacing:-.02em;}
.card{background:var(--card-bg); border:1px solid var(--border);}
.topbar{top:env(safe-area-inset-top,0px);}
/* Logo TunisieHUB : version claire par défaut, version sombre en mode sombre (auto ou data-theme) */
.brand-logo{display:block; height:2.75rem; width:auto;}
.brand-logo.logo-sombre{display:none;}
@media (min-width:768px){ .brand-logo{height:3rem;} }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-logo.logo-clair{display:none;}
  :root:not([data-theme="light"]) .brand-logo.logo-sombre{display:block;}
}
:root[data-theme="dark"] .brand-logo.logo-clair{display:none;}
:root[data-theme="dark"] .brand-logo.logo-sombre{display:block;}
/* ---------- PROVISOIRE : bascule clair/sombre pour comparer les rendus (à retirer avec le bouton de _home_navbar.php) ----------
   La case cachée #bascule-theme (navbar) inverse le thème du système : système clair -> page sombre, système sombre -> page claire.
   Sans JavaScript ; l'état revient au thème du système quand on recharge ou change de page. */
.bascule-theme{display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border:1px solid var(--border); border-radius:.5rem; color:var(--muted); cursor:pointer; transition:border-color .2s, color .2s;}
.bascule-theme:hover{border-color:var(--orange); color:var(--fg);}
.bascule-theme svg{width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
html:has(#bascule-theme:focus-visible) .bascule-theme{outline:2px solid var(--accent); outline-offset:3px;}
@media (prefers-color-scheme: dark){
  html:has(#bascule-theme:checked){ --bg:#ffffff; --fg:#0f172a; --muted:#5b6472; --card-bg:#f6f8fb; --border:#e6e9ee; --accent:#1d4ed8; --accent-dark:#1e3a8a; --accent-soft:#eaf0fe; --orange:#f97316; --orange-texte:#c2410c; --orange-soft:#fff3e8; --orange-puce:#ea580c; --titre-bleu:var(--accent-dark); }
  html:has(#bascule-theme:checked) .brand-logo.logo-clair{display:block;}
  html:has(#bascule-theme:checked) .brand-logo.logo-sombre{display:none;}
}
@media (prefers-color-scheme: light){
  html:has(#bascule-theme:checked){ --bg:#0b1220; --fg:#e7ecf3; --muted:#9aa5b4; --card-bg:#121b2e; --border:#223049; --accent:#5b8dfb; --accent-dark:#3b63c9; --accent-soft:#16233d; --orange:#fb923c; --orange-texte:#fdba74; --orange-soft:#2a1c10; --orange-puce:#f97316; --titre-bleu:var(--accent); }
  html:has(#bascule-theme:checked) .brand-logo.logo-clair{display:none;}
  html:has(#bascule-theme:checked) .brand-logo.logo-sombre{display:block;}
}
::selection{background:var(--accent-soft); color:var(--accent-dark);}
/* Pages légales (layout « legal ») */
.legal-prose h2{font-size:1.25rem;font-weight:800;margin:2.25rem 0 .75rem;color:var(--accent-dark);}
.legal-prose h3{font-size:1rem;font-weight:700;margin:1.5rem 0 .5rem;}
.legal-prose p,.legal-prose li,.legal-prose dd{line-height:1.75;color:var(--muted);}
.legal-prose p{margin:.75rem 0;}
.legal-prose ul,.legal-prose ol{margin:.75rem 0 .75rem 1.25rem;}
.legal-prose ul{list-style:disc;} .legal-prose ol{list-style:decimal;}
.legal-prose li{margin:.35rem 0;}
.legal-prose strong,.legal-prose dt{color:var(--fg);font-weight:600;}
.legal-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.legal-prose .note{border:1px solid var(--border);background:var(--accent-soft);border-radius:.75rem;padding:1rem 1.25rem;margin:1.25rem 0;}
.legal-prose .note p{margin:0;color:var(--fg);}
.legal-prose dl{border:1px solid var(--border);border-radius:.75rem;overflow:hidden;margin:1rem 0;}
.legal-prose dl > div{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);}
.legal-prose dl > div:last-child{border-bottom:0;}
.legal-prose .tablewrap{overflow-x:auto;margin:1rem 0;}
.legal-prose table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:34rem;}
.legal-prose th,.legal-prose td{text-align:left;padding:.65rem .8rem;border:1px solid var(--border);vertical-align:top;color:var(--muted);}
.legal-prose th{background:var(--card-bg);color:var(--fg);font-weight:600;}
.legal-prose .ph{background:var(--accent-soft);color:var(--accent-dark);padding:0 .35rem;border-radius:.25rem;}
@media (max-width:560px){ .legal-prose dl > div{grid-template-columns:1fr;gap:.15rem;} }