/*
Theme Name:   INEDI Child
Theme URI:    https://inedi.fr
Description:  Child theme INEDI — basé sur Hello Elementor. Charte graphique officielle INEDI 2026.
Author:       Département Produits & Outil — INEDI
Template:     hello-elementor
Version:      1.0.1
Text Domain:  inedi-child
*/

/* ============================================================
   IMPORT GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Gantari:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   VARIABLES CSS — CHARTE INEDI 2026
   Utilisables dans Elementor via var(--inedi-xxx)
   ============================================================ */
:root {
  --inedi-groupe:        #1E2330;
  --inedi-groupe-80:     #2E3547;
  --inedi-groupe-20:     rgba(30,35,48,0.15);
  --inedi-groupe-07:     rgba(30,35,48,0.07);

  --inedi-invest:        #C8570A;
  --inedi-invest-80:     #A04508;
  --inedi-invest-20:     rgba(200,87,10,0.15);
  --inedi-invest-07:     rgba(200,87,10,0.07);

  --inedi-finance:       #0A6E4F;
  --inedi-finance-80:    #085840;
  --inedi-finance-20:    rgba(10,110,79,0.15);
  --inedi-finance-07:    rgba(10,110,79,0.07);

  --inedi-citoyen:       #1A3FAA;
  --inedi-citoyen-80:    #153288;
  --inedi-citoyen-20:    rgba(26,63,170,0.15);
  --inedi-citoyen-07:    rgba(26,63,170,0.07);

  --inedi-bg:            #F4F2EE;
  --inedi-bg-warm:       #EAE7E0;
  --inedi-white:         #FFFFFF;
  --inedi-ink:           #1E2330;
  --inedi-ink-60:        rgba(30,35,48,0.6);
  --inedi-ink-30:        rgba(30,35,48,0.3);
  --inedi-line:          rgba(30,35,48,0.12);

  --font-display:        'Gantari', sans-serif;
  --font-body:           'DM Sans', sans-serif;
  --font-mono:           'DM Mono', monospace;

  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           16px;
  --radius-full:         9999px;

  --shadow-sm:           0 1px 4px rgba(30,35,48,0.08);
  --shadow-md:           0 4px 16px rgba(30,35,48,0.10);
  --shadow-lg:           0 8px 32px rgba(30,35,48,0.12);

  --transition:          0.18s ease;
}

/* ============================================================
   BASE — uniquement ce qui ne touche pas aux widgets Elementor
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--inedi-bg);
  color: var(--inedi-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHIE — UNIQUEMENT via classes Elementor
   On ne touche PAS h1-h6 ni p directement
   pour éviter tout conflit avec les styles inline Elementor
   ============================================================ */

/* Fonts appliquées uniquement aux widgets heading Elementor */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Font body appliquée uniquement aux widgets texte Elementor */
.elementor-widget-text-editor .elementor-widget-container {
  font-family: var(--font-body);
  line-height: 1.65;
}

/* Boutons Elementor — font uniquement, pas de couleur ni taille */
.elementor-button {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition) !important;
}

/* ============================================================
   FOND GLOBAL
   ============================================================ */
.elementor-page,
#page,
.site {
  background-color: var(--inedi-bg);
}

/* ============================================================
   NAVIGATION — fond ardoise uniquement si pas stylée par Elementor
   ============================================================ */
.site-header {
  background: var(--inedi-groupe);
}

/* ============================================================
   BADGES VERTICALES
   Classes à appliquer dans le champ "Classe CSS" d'Elementor
   Elles ne touchent QUE les éléments qui les ont explicitement
   ============================================================ */
.badge-invest {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  background: var(--inedi-invest-20) !important;
  color: var(--inedi-invest) !important;
  display: inline-block !important;
}

.badge-finance {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  background: var(--inedi-finance-20) !important;
  color: var(--inedi-finance) !important;
  display: inline-block !important;
}

.badge-citoyen {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  background: var(--inedi-citoyen-20) !important;
  color: var(--inedi-citoyen) !important;
  display: inline-block !important;
}

/* ============================================================
   CARD PRODUIT
   Classe à appliquer sur la colonne Elementor
   ============================================================ */
.inedi-card {
  background: var(--inedi-white) !important;
  border: 1px solid var(--inedi-line) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
}

.inedi-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   LIENS — uniquement hors Elementor
   (Elementor gère ses propres couleurs de lien)
   ============================================================ */
a:not([class*="elementor"]) {
  color: var(--inedi-groupe);
  text-decoration: none;
  transition: color var(--transition);
}

/* Survol par défaut : ardoise (groupe) */
a:not([class*="elementor"]):hover {
  color: var(--inedi-groupe);
}

.verticale-invest a:not([class*="elementor"]):hover {
  color: var(--inedi-invest);
}
.verticale-finance a:not([class*="elementor"]):hover {
  color: var(--inedi-finance);
}
.verticale-citoyen a:not([class*="elementor"]):hover {
  color: var(--inedi-citoyen);
}

/* La navigation garde son survol ardoise sur toutes les pages */
#inedi-header .inedi-nav-list > li > a:hover {
  color: #1E2330 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--inedi-groupe);
  color: rgba(255,255,255,0.45);
}

.site-footer a {
  color: rgba(255,255,255,0.45);
  transition: color var(--transition);
}

.site-footer a:hover { color: white; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .elementor-widget-heading .elementor-heading-title {
    letter-spacing: -0.01em;
  }
}

/* ============================================================
   BANDEAU ADMIN WORDPRESS
   Compense la hauteur du bandeau quand l'utilisateur
   est connecté, pour que le sticky header reste visible.
   ============================================================ */
.admin-bar .inedi-site-header {
  top: 32px; /* hauteur du bandeau admin desktop */
}
.admin-bar .inedi-resources-filters {
  top: calc(72px + 32px); /* header + bandeau */
}
@media screen and (max-width: 782px) {
  .admin-bar .inedi-site-header {
    top: 46px; /* bandeau admin mobile */
  }
  .admin-bar .inedi-resources-filters {
    top: calc(72px + 46px);
  }
}

/* ============================================================
   HEROS PAR VERTICALE
   DEGRADES SUR LES HEROS
   ============================================================ */

.hero-investissement {
  background:
    linear-gradient(235deg, rgba(200,87,10,0.28) 0%, rgba(200,87,10,0) 55%),
    #1E2330 !important;
}

.hero-finances {
  background:
    linear-gradient(235deg, rgba(10,110,79,0.28) 0%, rgba(10,110,79,0) 55%),
    #1E2330 !important;
}

.hero-citoyens {
  background:
    linear-gradient(235deg, rgba(26,63,170,0.28) 0%, rgba(26,63,170,0) 55%),
    #1E2330 !important;
}

.hero-inedi {
  background:
    linear-gradient(235deg, rgba(244, 242, 238,0.18) 0%, rgba(244, 242, 238,0) 55%),
    #1E2330 !important;
}