/* nd-theme-clair.css — nextdata.ma en thème CLAIR modernisé (demande du client, 11/10/2026).
   Feuille ÉCRITE À LA MAIN (contrairement à nd-theme-sombre.css, générée) : une couche par-dessus les couleurs
   d'origine du site. Elle ne change aucun contenu, aucune dimension d'en-tête (nd-entete-homogene), aucune image.
   Tout est sous `html body …` : le thème et Elementor posent déjà des `!important`. */

/* 1. Palette */
html{--ndc-encre:#0f172a;--ndc-texte:#334155;--ndc-doux:#64748b;--ndc-fond:#ffffff;--ndc-fond2:#f8fafc;--ndc-trait:#e2e8f0;
--ndc-rouge:#d92d20;--ndc-rouge2:#b42318;--ndc-orange:#c2410c;--ndc-teinte:#fff1ee;--ndc-rayon:16px;
--ndc-ombre:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06);--ndc-ombre2:0 2px 4px rgba(15,23,42,.06),0 18px 40px rgba(15,23,42,.12);
--ndc-halo:0 6px 18px rgba(217,45,32,.28)}
html body{background-color:var(--ndc-fond);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html body ::selection{background:#ffd9d2;color:var(--ndc-encre)}
html body a:focus-visible,html body button:focus-visible,html body input:focus-visible,html body textarea:focus-visible,html body select:focus-visible{outline:2px solid var(--ndc-rouge);outline-offset:3px}

/* 2. En-tête : verre dépoli, trait fin, liens en pastille au survol */
html body .mkdf-page-header .mkdf-menu-area,html body .mkdf-page-header .mkdf-sticky-header .mkdf-sticky-holder,html body .mkdf-mobile-header .mkdf-mobile-header-inner{background-color:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(15,23,42,.07)!important;box-shadow:0 1px 0 rgba(15,23,42,.02),0 10px 30px rgba(15,23,42,.05)}
html body .mkdf-page-header .mkdf-main-menu>ul>li>a{color:var(--ndc-encre)!important}
html body .mkdf-page-header .mkdf-main-menu>ul>li>a .item_outer{padding:8px 4px;border-radius:999px;transition:background-color .18s ease,color .18s ease}
html body .mkdf-page-header .mkdf-main-menu>ul>li>a:hover .item_outer{background-color:var(--ndc-teinte)}
html body .mkdf-page-header .mkdf-main-menu>ul>li>a:hover,html body .mkdf-page-header .mkdf-main-menu>ul>li>a.current,html body .mkdf-page-header .mkdf-main-menu>ul>li.mkdf-active-item>a{color:var(--ndc-rouge)!important}
html body .mkdf-page-header .mkdf-main-menu>ul>li>a.current .item_text,html body .mkdf-page-header .mkdf-main-menu>ul>li>a:hover .item_text{color:var(--ndc-rouge)!important}
html body .mkdf-page-header .mkdf-drop-down .second .inner ul{background-color:#fff!important;border:1px solid var(--ndc-trait)!important;border-radius:14px;box-shadow:var(--ndc-ombre2);overflow:hidden}
html body .mkdf-page-header .mkdf-drop-down .second .inner ul li a{color:var(--ndc-texte)!important}
html body .mkdf-page-header .mkdf-drop-down .second .inner ul li a:hover{color:var(--ndc-rouge)!important}
html body .mkdf-mobile-header .mkdf-mobile-nav{background-color:#fff!important;border-top:1px solid var(--ndc-trait)}
html body .mkdf-mobile-header .mkdf-mobile-nav a,html body .mkdf-mobile-header .mkdf-mobile-nav h4{color:var(--ndc-encre)!important}

/* 3. Boutons : pastilles rouges plus lisibles (blanc sur #d92d20 = 4,8), halo et léger soulèvement */
html body .mkdf-page-header .mkdf-login-register-widget a.mkdf-login-opener,html body a.elementor-button,html body .wpforms-container button.wpforms-submit,html body a.elementskit-btn,html body a.uc_portfolio,html body a.nd-hero__btn,html body a.ndc-b.ndc-b1,html body button.nd-baro-btn,html body a.nd-pied-rejoindre{background-color:var(--ndc-rouge)!important;background-image:none!important;border-color:var(--ndc-rouge)!important;color:#fff!important;border-radius:999px!important;box-shadow:var(--ndc-halo);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
html body .mkdf-page-header .mkdf-login-register-widget a.mkdf-login-opener:hover,html body a.elementor-button:hover,html body .wpforms-container button.wpforms-submit:hover,html body a.elementskit-btn:hover,html body a.uc_portfolio:hover,html body a.nd-hero__btn:hover,html body a.ndc-b.ndc-b1:hover,html body button.nd-baro-btn:hover,html body a.nd-pied-rejoindre:hover{background-color:var(--ndc-rouge2)!important;border-color:var(--ndc-rouge2)!important;color:#fff!important;transform:translateY(-2px);box-shadow:0 10px 26px rgba(217,45,32,.34)}
/* Le libellé d'un bouton HÉRITE de la couleur de son lien : ne jamais la forcer sur `.elementor-button-text`. Un bouton
   que sa page dessine autrement (contour, fond transparent : « Avez-vous une question ? » de l'accueil) garderait son
   fond mais prendrait un texte blanc, invisible (constaté en ligne le 11/10, corrigé dans l'heure). */
html:not(#nd):not(#nd-fort) body a.nd-pied-rejoindre{color:#fff!important}
html body a.ndc-b.ndc-b2{border-radius:999px!important;border-color:var(--ndc-orange)!important;color:var(--ndc-orange)!important;background-color:#fff!important;transition:transform .18s ease,box-shadow .18s ease}
html body a.ndc-b.ndc-b2:hover{transform:translateY(-2px);box-shadow:var(--ndc-ombre)}

/* 4. Cartes : coins doux, trait fin, ombre légère, soulèvement au survol */
html body .nd-cours-carte,html body .nd-actu-carte,html body a.ndc-c,html body .nd-baro-carte,html body .eael-adv-accordion .eael-accordion-list{background-color:#fff!important;border:1px solid var(--ndc-trait)!important;border-radius:var(--ndc-rayon)!important;box-shadow:var(--ndc-ombre);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
html body .nd-cours-carte:hover,html body .nd-actu-carte:hover,html body a.ndc-c:hover{transform:translateY(-3px);box-shadow:var(--ndc-ombre2);border-color:#fecdc6!important}
html body .eael-adv-accordion .eael-accordion-list{overflow:hidden;margin-bottom:10px}
html body .eael-adv-accordion .eael-accordion-list:hover{border-color:#fecdc6!important}
html body section.ndc>.ndc-in{border-radius:24px}
html body .nd-baro-puce,html body .nd-actu-filtres button,html body .nd-actu-filtres a{border-radius:999px!important;transition:background-color .15s ease,border-color .15s ease}
html body .nd-baro-puce:hover{border-color:#fda29b!important;background-color:var(--ndc-teinte)!important}

/* 5. Formulaires */
html body .wpforms-container input[type=text],html body .wpforms-container input[type=email],html body .wpforms-container input[type=tel],html body .wpforms-container input[type=url],html body .wpforms-container input[type=number],html body .wpforms-container select,html body .wpforms-container textarea{background-color:#fff!important;border:1px solid #cbd5e1!important;border-radius:12px!important;color:var(--ndc-encre)!important;transition:border-color .15s ease,box-shadow .15s ease}
html body .wpforms-container input:focus,html body .wpforms-container select:focus,html body .wpforms-container textarea:focus{border-color:var(--ndc-rouge)!important;box-shadow:0 0 0 4px rgba(217,45,32,.14)!important;outline:0}

/* 6. Accueil : halo de marque derrière le titre, texte d'accroche plus lisible */
html body .nd-hero{background-image:radial-gradient(900px 380px at 50% 0,rgba(240,99,49,.11),rgba(240,99,49,0) 70%)}
html body .nd-hero .nd-hero__texte{color:#475569!important}
html body section.ndc .ndc-k,html body a.ndc-c span{color:var(--ndc-orange)!important}

/* 7. (rien) Les blocs « Nos formations » et « Ils nous font confiance » de l'accueil portent leurs deux palettes et
      passent en clair d'eux-mêmes dès que nd-theme-sombre.php n'est plus chargé (nd-formations-titre, nd-accueil-confiance). */

/* 8. Onglets et liens d'accordéon des formations : orangé assombri pour rester lisible sur blanc */
html body .elementor-tabs .elementor-tab-title,html body .elementor-tabs .elementor-tab-title a{color:#9a3412!important}
html body .elementor-tabs .elementor-tab-title.elementor-active,html body .elementor-tabs .elementor-tab-title.elementor-active a{color:var(--ndc-rouge)!important}
html body .elementor-toggle .elementor-tab-title a.elementor-toggle-title{color:var(--ndc-orange)!important}

/* 9. Rouges des habillages précédents (CSS additionnel du thème, variables --nd-rouge, --nd-grad, --fo-rouge, --ab-rouge
      = #f23f31, blanc à 3,8) : leurs règles sont plus précises que les nôtres, on leur donne donc le rouge lisible par
      leurs propres variables. Constaté à l'audit complet du 11/10 : « Inscrivez-vous », « Prenez contact »,
      « Vous postulez ? » et les sous-titres « Prochaines sessions » restaient sous le seuil. */
html:not(#nd):not(#nd-fort){--nd-rouge:#d92d20;--nd-grad:linear-gradient(135deg,#d92d20 0%,#c4320a 100%)}
html:not(#nd):not(#nd-fort) body{--fo-rouge:#d92d20;--ab-rouge:#d92d20}

/* 10. Textes gris trop pâles et couleurs du code (page Data Mesh) */
html body .elementskit-box-style-content{color:var(--ndc-doux)!important}
html body pre[class*=language-] .token.function{color:#b4235a!important}
html body pre[class*=language-] .token.string{color:#3f6212!important}
html body pre[class*=language-] .token.operator{color:#7c4a12!important;background:none!important}

/* 11. Bandeaux photo de six pages : voile renforcé à la demande du client (voile commun : 62 → 38 %), porté en trois
       demandes à 88 → 76 % : « Confiez-nous votre mission » (6444), Contact (7909), Marque employeur (5818), Experts
       Data (6458), Service OCR (10073) et Portage (2). À 80 → 64 %, les photos très claires restaient gris ardoise.
       Seul le voile change ; photos et textes restent ceux des pages. Les quatre autres bandeaux photo : section 12. */
html body:is(.page-id-6444,.page-id-7909,.page-id-5818,.page-id-6458,.page-id-10073,.page-id-2) .mkdf-title-holder.mkdf-has-bg-image::before{background:linear-gradient(180deg,rgba(15,23,42,.88) 0%,rgba(15,23,42,.76) 100%)!important}

/* 12. Les quatre autres bandeaux photo, assombris à leur tour à la demande du client. Trois traitements, parce que
       les pages ne sont pas construites pareil ; le but est le même rendu sombre que la section 11, pas le même chiffre.
       Actualités (10341) et Baromètre (10345) : photos déjà sombres, voile commun porté à 80 → 64 % (88 → 76 % les effaçait).
       À propos (5373) : garde son voile en biais vers le rouge, sous une couche unie de 50 %.
       Open Data (8556) : la photo visible est le fond de .mkdf-title-inner, posé AU-DESSUS du voile du bandeau, qui n'y
       a donc aucun effet. Elle est assombrie par une ombre intérieure (peinte sur le fond, sous le titre). */
html body:is(.page-id-10341,.page-id-10345) .mkdf-title-holder.mkdf-has-bg-image::before{background:linear-gradient(180deg,rgba(15,23,42,.80) 0%,rgba(15,23,42,.64) 100%)!important}
html body.page-id-5373 .mkdf-title-holder.mkdf-has-bg-image::before{background:linear-gradient(rgba(11,17,32,.50),rgba(11,17,32,.50)),linear-gradient(100deg,rgba(11,17,32,.92) 0%,rgba(11,17,32,.72) 45%,rgba(242,63,49,.35) 100%)!important}
html body.page-id-8556 .mkdf-title-holder.mkdf-has-bg-image .mkdf-title-inner{box-shadow:inset 0 0 0 2000px rgba(15,23,42,.45)!important}

@media (prefers-reduced-motion:reduce){
html body a,html body button,html body .nd-cours-carte,html body .nd-actu-carte,html body a.ndc-c,html body .eael-accordion-list{transition:none!important}
html body a:hover,html body button:hover,html body .nd-cours-carte:hover,html body .nd-actu-carte:hover,html body a.ndc-c:hover{transform:none!important}
}