/* Variante colorée d'OKLÉA (essai du 03/11/2026), posée par-dessus site.css.
   A : la terre cuite occupe l'ouverture de l'accueil et le bandeau final, gros chiffres.
   B : une teinte méditerranéenne par fonctionnalité (Biens terre cuite, Diffusion bleu mer, Visites olive,
       Ventes ocre, Pilotage grenat, Au quotidien ardoise). Toutes passent le contraste AA avec du texte blanc. */

:root {
  --t-biens: #b3461f;
  --t-diffusion: #1f5f8b;
  --t-visites: #55702a;
  --t-ventes: #96680f;
  --t-pilotage: #8e2c48;
  --t-quotidien: #2a3442;
}

/* Teinte de la page (l'accueil et les pages transverses gardent la terre cuite) */
body { --t: var(--t-biens); }
body[data-page="diffusion-demandes.html"] { --t: var(--t-diffusion); }
body[data-page="visites.html"] { --t: var(--t-visites); }
body[data-page="offres-ventes.html"] { --t: var(--t-ventes); }
body[data-page="pilotage.html"] { --t: var(--t-pilotage); }
body[data-page="au-quotidien.html"] { --t: var(--t-quotidien); }

/* Teinte des cases de l'accueil */
.cell[href="biens-mandats.html"] { --t: var(--t-biens); }
.cell[href="diffusion-demandes.html"] { --t: var(--t-diffusion); }
.cell[href="visites.html"] { --t: var(--t-visites); }
.cell[href="offres-ventes.html"] { --t: var(--t-ventes); }
.cell[href="pilotage.html"] { --t: var(--t-pilotage); }
.cell[href="au-quotidien.html"] { --t: var(--t-quotidien); }

/* L'accent suit la teinte, partout où une teinte est posée */
body, .cell {
  --accent: var(--t);
  --accent-soft: color-mix(in srgb, var(--t) 13%, var(--surface));
  --fill: var(--t);
  --on-fill: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body, :root:not([data-theme="light"]) .cell {
    --accent: color-mix(in srgb, var(--t) 52%, #ffffff);
    --accent-soft: color-mix(in srgb, var(--t) 30%, var(--surface));
    --fill: color-mix(in srgb, var(--t) 78%, #000000);
  }
}
:root[data-theme="dark"] body, :root[data-theme="dark"] .cell {
  --accent: color-mix(in srgb, var(--t) 52%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--t) 30%, var(--surface));
  --fill: color-mix(in srgb, var(--t) 78%, #000000);
}

/* Fonds teintés au lieu du gris */
.sec-alt { background: color-mix(in srgb, var(--t) 7%, var(--bg)); }

/* Navigation : une pastille de couleur par fonctionnalité */
.gnav-links a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.gnav-links a[href="biens-mandats.html"],
.gnav-links a[href="diffusion-demandes.html"],
.gnav-links a[href="visites.html"],
.gnav-links a[href="offres-ventes.html"],
.gnav-links a[href="pilotage.html"],
.gnav-links a[href="au-quotidien.html"] { display: inline-flex; align-items: center; gap: 6px; }
.gnav-links a[href="biens-mandats.html"]::before,
.gnav-links a[href="diffusion-demandes.html"]::before,
.gnav-links a[href="visites.html"]::before,
.gnav-links a[href="offres-ventes.html"]::before,
.gnav-links a[href="pilotage.html"]::before,
.gnav-links a[href="au-quotidien.html"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.gnav-links a[href="biens-mandats.html"]::before { background: var(--t-biens); }
.gnav-links a[href="diffusion-demandes.html"]::before { background: var(--t-diffusion); }
.gnav-links a[href="visites.html"]::before { background: var(--t-visites); }
.gnav-links a[href="offres-ventes.html"]::before { background: var(--t-ventes); }
.gnav-links a[href="pilotage.html"]::before { background: var(--t-pilotage); }
.gnav-links a[href="au-quotidien.html"]::before { background: var(--t-quotidien); }
.lnav strong { color: var(--accent); }

/* Ouverture pleine couleur, avec un halo de lumière discret */
.hero {
  background: radial-gradient(1100px 520px at 50% -12%, rgba(255, 255, 255, .20), transparent 62%), var(--fill);
  color: var(--on-fill);
}
.hero .sub { color: rgba(255, 255, 255, .84); }
.hero .btn-primary { background: #ffffff; color: var(--t); }
.hero .btn-primary:hover { background: rgba(255, 255, 255, .9); }
.hero .more { color: #ffffff; }
.hero .ui-cap { color: rgba(255, 255, 255, .75); }
.hero .ui, .hero .phone { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .55); border-color: transparent; }
.hero .hero-visual:empty { padding-bottom: 56px; margin-top: 0; }

/* Cases de l'accueil en aplats francs */
.cell, .cell.tint, .cell.acc { background: var(--fill); border-color: transparent; color: var(--on-fill); }
.cell p { color: rgba(255, 255, 255, .85); }
.cell .more { color: #ffffff; }
.cell .stamp { border-color: #ffffff; color: #ffffff; }
.cell .cell-visual .ui, .cell .notif { border-color: transparent; }

/* Bandeau de chiffres */
.chiffres-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 28px; }
.chiffres-grid > div { display: grid; gap: 8px; align-content: start; min-width: 0; border-top: 3px solid currentColor; padding-top: 18px; }
.chiffres-grid b { font-size: clamp(48px, 6.4vw, 80px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; font-variant-numeric: tabular-nums; }
.chiffres-grid span { color: var(--ink-soft); font-size: 15.5px; max-width: 26ch; }
.chiffres .c1 { color: var(--t-biens); }
.chiffres .c2 { color: var(--t-diffusion); }
.chiffres .c3 { color: var(--t-visites); }
.chiffres .c4 { color: var(--t-pilotage); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chiffres .c1 { color: color-mix(in srgb, var(--t-biens) 55%, #fff); }
  :root:not([data-theme="light"]) .chiffres .c2 { color: color-mix(in srgb, var(--t-diffusion) 55%, #fff); }
  :root:not([data-theme="light"]) .chiffres .c3 { color: color-mix(in srgb, var(--t-visites) 55%, #fff); }
  :root:not([data-theme="light"]) .chiffres .c4 { color: color-mix(in srgb, var(--t-pilotage) 55%, #fff); }
}
:root[data-theme="dark"] .chiffres .c1 { color: color-mix(in srgb, var(--t-biens) 55%, #fff); }
:root[data-theme="dark"] .chiffres .c2 { color: color-mix(in srgb, var(--t-diffusion) 55%, #fff); }
:root[data-theme="dark"] .chiffres .c3 { color: color-mix(in srgb, var(--t-visites) 55%, #fff); }
:root[data-theme="dark"] .chiffres .c4 { color: color-mix(in srgb, var(--t-pilotage) 55%, #fff); }
@media (max-width: 900px) { .chiffres-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .chiffres-grid { grid-template-columns: 1fr; } }

/* Les huit étapes : chaque carte prend la couleur de sa fonctionnalité */
#parcours .card { border-top: 4px solid var(--c, var(--t)); }
#parcours .card:nth-child(1), #parcours .card:nth-child(2), #parcours .card:nth-child(3) { --c: var(--t-biens); }
#parcours .card:nth-child(4), #parcours .card:nth-child(5) { --c: var(--t-diffusion); }
#parcours .card:nth-child(6) { --c: var(--t-visites); }
#parcours .card:nth-child(7), #parcours .card:nth-child(8) { --c: var(--t-ventes); }
#parcours .card .n { color: var(--c); font-size: 15px; font-weight: 600; }

/* Bandeau final pleine couleur */
.cta-band { background: radial-gradient(900px 420px at 50% 120%, rgba(255, 255, 255, .16), transparent 62%), var(--fill); color: var(--on-fill); }
.cta-band .sub { color: rgba(255, 255, 255, .84); }
.cta-band .btn-primary { background: #ffffff; color: var(--t); }
.cta-band .more { color: #ffffff; }

/* Détails : une fine barre de la teinte de la page */
.scroller .card { border-top: 3px solid var(--accent); }
.offer-col:not(.alt) { border-top: 4px solid var(--accent); }

/* Les aperçus gardent l'encre normale, même posés sur un fond coloré */
.hero .ui, .hero .phone, .cell .ui, .cell .notif, .cta-band .ui { color: var(--ink); }

/* Téléphone : la barre du haut prend la couleur du haut de page, puis redevient claire en descendant */
@media (max-width: 980px) {
  .gnav { transition: background-color .25s ease, border-color .25s ease; }
  html.sur-couleur .gnav:not(.open) { background: var(--fill); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.sur-couleur .gnav:not(.open) .logo-l, html.sur-couleur .gnav:not(.open) .logo-d { display: none; }
  html.sur-couleur .gnav:not(.open) .logo-w { display: block; }
  html.sur-couleur .gnav:not(.open) .menu-btn { color: #fff; }
  html.sur-couleur .gnav:not(.open) .gnav-demo { background: #fff; color: var(--t); }
  html.sur-couleur body::before { background: var(--fill); }
  /* Le halo descend un peu : pas de couture visible entre la barre et le haut de page */
  .hero { background: radial-gradient(640px 320px at 50% 38%, rgba(255, 255, 255, .16), transparent 70%), var(--fill); }
  .gnav.open .gnav-links a::before { width: 10px !important; height: 10px !important; }
}