/* ========================================
   THÈME « BLANC SOBRE »
   ========================================

   ➜ POUR L'ACTIVER / LE DÉSACTIVER : Pages CMS › « Thèmes du site »
     › case « Blanc sobre » (contenu/themes.json › blanc_pro).
     Rien à modifier ici. Aperçu sans rien changer : ajouter ?theme=blanc à l'adresse d'une page
     (?theme=off pour revenir à l'affichage normal).

   Ce fichier n'est chargé que lorsque la case est cochée : scripts/generer-site.js ajoute
   alors la classe « theme-blanc » sur <html> et le lien vers ce fichier dans chaque page
   publiée (assets/socials.js fait de même en local). Toutes les règles commencent par
   html.theme-blanc pour passer devant les styles propres à chaque page.

   Principe : fond blanc partout, plus aucun bloc bleu plein. Le bleu sert de couleur secondaire
   (titres d'accroche, boutons, liens, icônes) ; le rose de la marque ne reste que sur quelques
   petits traits (soulignement du menu actif, filets sous les titres, sélection de texte).
   On change les variables de la marque : tout ce qui les utilise suit. Les blocs qui étaient
   bleu marine (bannières, chiffres clés, appels à l'action) passent sur fond blanc ou bleu
   à peine teinté, avec des textes foncés.

   Pour un blanc 100 % pur, mettre --bleu-pale à #FFFFFF.
*/

html.theme-blanc {
  --marine: #1A2744;        /* encre bleu nuit : textes et titres (jamais en aplat) */
  --bleu: #2B5BA8;          /* bleu secondaire : accents, boutons, liens */
  --bleu-fonce: #214886;    /* survol des boutons bleus */
  --bleu-pale: #F1F5FB;     /* bandes de section à peine teintées */
  --bleu-bord: #DAE5F4;     /* filets et bordures bleutés */
  --rose: #2B5BA8;          /* l'accent par défaut du site devient le bleu... */
  --rose-touche: #BE315B;   /* ...et le rose de la marque est réservé aux petites touches */
  --gray-bg: #F6F8FB;
  --gray-border: #E3E8F0;
  --gray-text: #566175;
  --fond: #FFFFFF;           /* fond de page */
  background: var(--fond);
}

/* Fond d'ambiance : halo bleu très léger + fine grille, sans rose */
html.theme-blanc body::before {
  background:
    radial-gradient(800px circle at 100% 0%, color-mix(in srgb, var(--bleu) 6%, transparent), transparent 55%),
    radial-gradient(700px circle at 0% 100%, color-mix(in srgb, var(--bleu) 4%, transparent), transparent 55%),
    linear-gradient(to right, rgba(26, 39, 68, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 39, 68, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}
html.theme-blanc .page-glow { display: none; }

/* ── LES TOUCHES DE ROSE (volontairement rares) ───────────────── */
html.theme-blanc ::selection { background: var(--rose-touche); color: #fff; }
html.theme-blanc nav a.active { border-bottom-color: var(--rose-touche); }
html.theme-blanc .section-accent,
html.theme-blanc .va-accent,
html.theme-blanc .rse-accent,
html.theme-blanc .contact-info-accent,
html.theme-blanc .hero-eyebrow::before { background: var(--rose-touche); }

/* ── EN-TÊTE, BOUTONS ─────────────────────────────────────────── */
html.theme-blanc header.scrolled { box-shadow: 0 2px 16px rgba(26, 39, 68, 0.07); }

html.theme-blanc .btn-solid-marine:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
html.theme-blanc .btn-rose:hover,
html.theme-blanc .btn-rose-sm:hover,
html.theme-blanc .cmodal-submit:hover,
html.theme-blanc .real-page .btn-r-primary:hover,
html.theme-blanc .real-page .local-banner:hover .local-banner-btn { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
html.theme-blanc .btn-rose:hover,
html.theme-blanc .btn-rose-sm:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--bleu) 28%, transparent); }

/* Boutons posés sur les anciennes bannières foncées */
html.theme-blanc .btn-hero-primary,
html.theme-blanc .btn-solid-white { background: var(--bleu); border-color: var(--bleu); color: #fff; }
html.theme-blanc .btn-hero-primary:hover,
html.theme-blanc .btn-solid-white:hover { background: #fff; border-color: var(--bleu); color: var(--bleu); box-shadow: 0 10px 24px color-mix(in srgb, var(--bleu) 18%, transparent); }
html.theme-blanc .btn-hero-secondary { color: var(--marine); border-color: rgba(26, 39, 68, 0.28); }
html.theme-blanc .btn-hero-secondary:hover { color: var(--bleu); border-color: var(--bleu); box-shadow: 0 10px 24px rgba(26, 39, 68, 0.08); }
html.theme-blanc .real-page .btn-r-outline-white { color: var(--marine); border-color: rgba(26, 39, 68, 0.28); }
html.theme-blanc .real-page .btn-r-outline-white:hover { background: var(--bleu); color: #fff; border-color: var(--bleu); }

html.theme-blanc .back-to-top { background: var(--bleu); box-shadow: 0 6px 20px color-mix(in srgb, var(--bleu) 25%, transparent); }
html.theme-blanc .back-to-top:hover { background: var(--bleu-fonce); }
html.theme-blanc .cmodal-overlay { background: rgba(26, 39, 68, 0.45); }

/* ── ANCIENNES BANNIÈRES FONCÉES → BLANC ─────────────────────── */
html.theme-blanc #hero,
html.theme-blanc .page-hero,
html.theme-blanc .contact-hero,
html.theme-blanc .service-hero,
html.theme-blanc .real-page .hero-r,
html.theme-blanc .real-page .hero-detail {
  background: linear-gradient(180deg, var(--fond) 0%, var(--bleu-pale) 100%);
  border-bottom: 1px solid var(--bleu-bord);
  color: var(--marine);
}
html.theme-blanc .real-page .hero-r,
html.theme-blanc .real-page .hero-detail { background-image: none; }

/* Bandes qui étaient bleu marine : blanc légèrement teinté, filets bleutés */
html.theme-blanc #chiffres,
html.theme-blanc #pourquoi,
html.theme-blanc #cta-finale,
html.theme-blanc .cta-finale,
html.theme-blanc #cta-je,
html.theme-blanc #rse,
html.theme-blanc #chiffres-ecole,
html.theme-blanc .real-page .cta-final-r {
  background: var(--bleu-pale);
  border-top: 1px solid var(--bleu-bord);
  border-bottom: 1px solid var(--bleu-bord);
  color: var(--marine);
}
html.theme-blanc .real-page .cta-final-r { background-image: none; }

/* Calques décoratifs foncés */
html.theme-blanc .hero-bg,
html.theme-blanc .hero-bg-img,
html.theme-blanc #chiffres::before,
html.theme-blanc #chiffres-ecole::before,
html.theme-blanc #rse::before { display: none; }
html.theme-blanc .hero-overlay { background: radial-gradient(900px 600px at 88% 8%, color-mix(in srgb, var(--bleu) 8%, transparent), transparent 62%); }
html.theme-blanc .page-hero::before { color: rgba(26, 39, 68, 0.035); }

/* Blocs foncés posés dans une page claire (citation, déontologie, appels à l'action) */
html.theme-blanc .je-definition-block,
html.theme-blanc .deon-block,
html.theme-blanc .domain-cta,
html.theme-blanc .service-cta {
  background: var(--bleu-pale);
  border: 1px solid var(--bleu-bord);
  color: var(--marine);
}
html.theme-blanc .je-definition-block::before { color: color-mix(in srgb, var(--bleu) 12%, transparent); }
html.theme-blanc .cnje-logo-box { background: #fff; border: 1px solid var(--bleu-bord); }
html.theme-blanc .cnje-logo-box span { color: var(--bleu); }

/* ── TEXTES DE CES ANCIENS BLOCS : de blanc à encre ──────────── */
/* titres */
html.theme-blanc .hero-title,
html.theme-blanc .page-hero-title,
html.theme-blanc .ch-title,
html.theme-blanc .service-title,
html.theme-blanc .vvc-title,
html.theme-blanc .chiffres-header-title,
html.theme-blanc .pourquoi-title,
html.theme-blanc .pourquoi-item-title,
html.theme-blanc .cta-text h2,
html.theme-blanc .cta-je-text h2,
html.theme-blanc .cta-finale-inner h2,
html.theme-blanc .rse-title,
html.theme-blanc .deon-title,
html.theme-blanc .je-def-quote,
html.theme-blanc .domain-cta p,
html.theme-blanc .service-cta h2,
html.theme-blanc .service-cta h3,
html.theme-blanc .chiffre-num,
html.theme-blanc .hero-iso strong,
html.theme-blanc .real-page .hero-r h1,
html.theme-blanc .real-page .hero-detail h1,
html.theme-blanc .real-page .cta-final-r h2,
html.theme-blanc .real-page .section-title.on-dark,
html.theme-blanc .real-page .section-title.on-dark strong,
html.theme-blanc .real-page .hero-stats .v,
html.theme-blanc .real-page .meta-row .val,
html.theme-blanc .real-page .client-pill .nm { color: var(--marine); }
/* mots mis en avant dans ces titres */
html.theme-blanc .vvc-title .bold,
html.theme-blanc .chiffres-header-title .bold,
html.theme-blanc .pourquoi-title .accent,
html.theme-blanc .rse-title .accent,
html.theme-blanc .deon-title .accent,
html.theme-blanc .real-page .breadcrumb .current,
html.theme-blanc .real-page .meta-row.is-accent .val { color: var(--bleu); }
/* petits libellés et accroches */
html.theme-blanc .hero-eyebrow,
html.theme-blanc .page-hero-eyebrow,
html.theme-blanc .ch-eyebrow,
html.theme-blanc .service-eyebrow,
html.theme-blanc .vvc-label,
html.theme-blanc .chiffres-header-label,
html.theme-blanc .rse-label,
html.theme-blanc .je-def-label { color: var(--bleu); }
html.theme-blanc .hero-sub,
html.theme-blanc .page-hero-sub,
html.theme-blanc .ch-sub,
html.theme-blanc .service-accroche,
html.theme-blanc .vvc-tagline,
html.theme-blanc .chiffre-label,
html.theme-blanc .chiffre-sub,
html.theme-blanc .pourquoi-item-desc,
html.theme-blanc .cta-text p,
html.theme-blanc .cta-je-text p,
html.theme-blanc .cta-finale-inner p,
html.theme-blanc .service-cta p,
html.theme-blanc .deon-text,
html.theme-blanc .je-def-source,
html.theme-blanc .domain-cta span,
html.theme-blanc .hero-iso span,
html.theme-blanc .rse-text p,
html.theme-blanc .real-page .lede.on-dark,
html.theme-blanc .real-page .cta-final-r p,
html.theme-blanc .real-page .hero-stats .l,
html.theme-blanc .real-page .meta-row .lbl,
html.theme-blanc .real-page .client-pill .lbl { color: var(--gray-text); }
html.theme-blanc .rse-text p:last-child { color: var(--marine); }
html.theme-blanc .service-breadcrumb,
html.theme-blanc .service-breadcrumb a,
html.theme-blanc .real-page .breadcrumb { color: var(--gray-text); }
html.theme-blanc .service-breadcrumb span { color: var(--gray-border); }
html.theme-blanc .service-breadcrumb a:hover,
html.theme-blanc .real-page .breadcrumb a:hover { color: var(--bleu); }

/* ── ACCUEIL : détails de la bannière ─────────────────────────── */
html.theme-blanc .hero-img-wrap {
  background: var(--gray-bg);
  border: 1px solid var(--gray-border);
  box-shadow: 0 18px 44px rgba(26, 39, 68, 0.12);
}
html.theme-blanc .hero-iso {
  background: #fff; border: 1px solid var(--bleu-bord);
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.10);
}
/* Pastille « 45+ ans » : blanche, un filet bleu à gauche */
html.theme-blanc .hero-badge {
  background: #fff; color: var(--gray-text);
  border: 1px solid var(--bleu-bord); border-left: 4px solid var(--bleu);
  box-shadow: 0 10px 28px rgba(26, 39, 68, 0.14);
}
html.theme-blanc .hero-badge strong { color: var(--marine); }

/* Bloc « Valeurs » (moitié gauche) */
html.theme-blanc .valeurs-visual { background: var(--bleu-pale); border-right: 1px solid var(--bleu-bord); }
html.theme-blanc .valeurs-visual::after { display: none; }

/* Chiffres clés : cartes blanches sur la bande teintée */
html.theme-blanc .chiffre-item { background: #fff; border: 1px solid var(--bleu-bord); }
html.theme-blanc .chiffre-item:hover { background: #fff; box-shadow: 0 10px 28px rgba(26, 39, 68, 0.08); }
html.theme-blanc .chiffre-num { color: var(--bleu); }

/* Pourquoi nous choisir */
html.theme-blanc .pourquoi-item { background: #fff; border: 1px solid var(--bleu-bord); }
html.theme-blanc .pourquoi-item:hover { background: #fff; border-color: var(--bleu); box-shadow: 0 10px 28px rgba(26, 39, 68, 0.08); }

/* Carte « Autre ? » des domaines d'expertise */
html.theme-blanc .expertise-card.rose-card { background: var(--bleu-pale); border-color: var(--bleu-bord); }

/* Logos partenaires : le survol révèle une description, sur fond clair */
html.theme-blanc .slider-chip .chip-desc { background: var(--bleu-pale); color: var(--marine); }
html.theme-blanc .actu-media { background: var(--gray-bg); }

/* ── PAGES LÉGALES, 404, PAGE PRESTATION : roses codés en dur ──── */
html.theme-blanc .legal-maj { background: var(--bleu-pale); }
html.theme-blanc .legal-section p a { border-bottom-color: color-mix(in srgb, var(--bleu) 28%, transparent); }
html.theme-blanc .livrable-icon { background: var(--bleu-pale); border: 1px solid var(--bleu-bord); }
html.theme-blanc .livrable-icon svg { stroke: var(--bleu); }

/* ── PRESTATIONS ──────────────────────────────────────────────── */
html.theme-blanc .service-pill.active,
html.theme-blanc .pill-ink { background: var(--bleu); border-color: var(--bleu); color: #fff; }
html.theme-blanc .service-pills.has-ink > .service-pill.active { background: transparent; }

/* ── NOTRE ÉQUIPE : photo de groupe sous un voile blanc ───────── */
html.theme-blanc .equipe-hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(241, 245, 251, 0.74) 100%); }
html.theme-blanc .equipe-hero { border-bottom: 1px solid var(--bleu-bord); }
html.theme-blanc .equipe-hero-inner { color: var(--marine); }
html.theme-blanc .equipe-hero-title { color: var(--marine); }
html.theme-blanc .equipe-hero-eyebrow { color: var(--bleu); }
html.theme-blanc .equipe-hero-subtitle { color: var(--marine); font-weight: 500; }
html.theme-blanc .bureau-photo::before { background: conic-gradient(var(--bleu-bord), var(--bleu), var(--bleu-bord)); }

/* ── NOTRE JUNIOR ─────────────────────────────────────────────── */
html.theme-blanc #rse::after { display: none; }
/* Mots mis en blanc « à la main » dans les textes de la page (ex. Gaia) */
html.theme-blanc #rse [style*="color:white"],
html.theme-blanc #rse [style*="color: white"] { color: var(--marine) !important; }

/* ── RÉALISATIONS ─────────────────────────────────────────────── */
html.theme-blanc .real-page .hero-stats,
html.theme-blanc .real-page .meta-panel,
html.theme-blanc .real-page .client-pill { background: #fff; border: 1px solid var(--bleu-bord); }
html.theme-blanc .real-page .hero-stats .row,
html.theme-blanc .real-page .meta-row { border-bottom-color: var(--gray-border); }
html.theme-blanc .real-page .hero-tag { background: #fff; border-color: var(--bleu-bord); color: var(--marine); }
html.theme-blanc .real-page .hero-tag.solid { background: var(--bleu); border-color: var(--bleu); color: #fff; }
html.theme-blanc .real-page .case-overlay { background: rgba(255, 255, 255, 0.88); }
html.theme-blanc .real-page .case-domain { background: #fff; color: var(--marine); border: 1px solid var(--bleu-bord); box-shadow: 0 2px 8px rgba(26, 39, 68, 0.10); }
html.theme-blanc .real-page .local-banner-btn { background: var(--bleu); }

/* ========================================
   VARIANTES DE COULEUR (se superposent au thème blanc)
   ========================================
   Chaque variante ne change que les variables ci-dessus : mêmes bannières blanches,
   mêmes blocs clairs, autre couleur secondaire. Classes ajoutées sur <html> en plus de
   « theme-blanc » (cases de Pages CMS › « Thèmes du site », ou ?theme=ivoire-marine,
   ?theme=petrole, ?theme=rose-ajc, ?theme=champagne pour essayer). */

/* Ivoire et marine : fond chaud, accents marine, sobre comme un cabinet de conseil */
html.theme-blanc.theme-ivoire-marine {
  --fond: #FCFAF7;
  --bleu: #1A2744; --bleu-fonce: #0F1A33; --rose: #1A2744;
  --bleu-pale: #F4EFE7; --bleu-bord: #E6DED0;
  --gray-bg: #F8F5EF; --gray-border: #E8E1D5; --gray-text: #5F6472;
}

/* Blanc et pétrole : bleu-vert profond, se démarque des sites tout bleus */
html.theme-blanc.theme-petrole {
  --marine: #17283F;
  --bleu: #1F6F78; --bleu-fonce: #17565D; --rose: #1F6F78;
  --bleu-pale: #EEF5F5; --bleu-bord: #D3E4E5;
  --gray-bg: #F5F8F8; --gray-border: #E1E8EA;
}

/* Blanc et rose AJC : le rose de la marque devient la couleur des boutons et des accents */
html.theme-blanc.theme-rose-ajc {
  --bleu: #BE315B; --bleu-fonce: #A12A4E; --rose: #BE315B;
  --bleu-pale: #F8F4F6; --bleu-bord: #EADFE4;
  --gray-bg: #F8F6F7; --gray-border: #ECE6E9;
}

/* Blanc et champagne : doré discret sur marine, ton premium (finance, audit) */
html.theme-blanc.theme-champagne {
  --bleu: #8A6B2F; --bleu-fonce: #6F5524; --rose: #8A6B2F;
  --bleu-pale: #F8F4EA; --bleu-bord: #E9E0CB;
  --gray-bg: #F7F5EF; --gray-border: #E8E3D6;
}