/*
Theme Name: NEUVLANDS
Theme URI: https://neuvlands.fr
Author: NEUVLANDS
Description: Thème de blocs du cabinet NEUVLANDS. Conseil aux dirigeants : comprendre les enjeux, gouverner ses savoirs. Charte, compositions de sections et animations sobres, entièrement modifiables depuis l'éditeur de site.
Version: 2.2.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neuvlands
Tags: block-patterns, full-site-editing, one-column, editor-style, custom-colors
*/

/* Les couleurs, typographies et espacements sont dans theme.json.
   Ce fichier ne contient que ce que theme.json ne sait pas exprimer :
   quelques classes utilitaires, appliquees via le champ
   « Avancé, classe(s) CSS additionnelle(s) » de chaque bloc. */

/* ---------------------------------------------------------------
   Surtitre : petite ligne en capitales au-dessus d'un titre
   Classe : nv-eyebrow
   --------------------------------------------------------------- */
.nv-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 20px;
}

/* ---------------------------------------------------------------
   Titre en italique, pour les accroches de page d'accueil
   Classe : nv-italique
   --------------------------------------------------------------- */
.nv-italique { font-style: italic; }

/* ---------------------------------------------------------------
   Carte : bloc Groupe avec bordure, qui se souleve au survol
   Classe : nv-carte
   --------------------------------------------------------------- */
.nv-carte {
	border: 1px solid var(--wp--preset--color--beige);
	border-radius: 4px;
	transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
	height: 100%;
}
.nv-carte:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(29,60,42,0.11);
	border-color: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------
   Cadre : meme principe que la carte, mais le trait du haut se
   colore au survol. Sert aux blocs qui doivent etre nettement
   delimites sans ressembler a un bouton.
   Classe : nv-cadre
   --------------------------------------------------------------- */
.nv-cadre {
	position: relative;
	border: 1px solid var(--wp--preset--color--beige);
	background: var(--wp--preset--color--blanc);
	height: 100%;
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.nv-cadre::before {
	content: "";
	position: absolute; top: -1px; left: -1px; right: -1px;
	height: 3px;
	background: var(--wp--preset--color--terracotta);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.nv-cadre:hover {
	border-color: var(--wp--preset--color--beige);
	box-shadow: 0 16px 38px rgba(29,60,42,0.10);
	transform: translateY(-4px);
}
.nv-cadre:hover::before { transform: scaleX(1); }
.nv-cadre .nv-fleche a::after { transition: margin-left .25s ease; }
.nv-cadre:hover .nv-fleche a::after { margin-left: 14px; }

/* Numero d'ordre en tete de carte. Classe : nv-numero */
.nv-numero {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------
   Couverture de livre : ombre portee et leger soulevement
   Classe : nv-couverture
   --------------------------------------------------------------- */
.nv-couverture img {
	box-shadow: 0 24px 60px rgba(29,60,42,0.20), 0 4px 14px rgba(29,60,42,0.10);
	transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
}
.nv-couverture:hover img {
	transform: translateY(-8px);
	box-shadow: 0 34px 74px rgba(29,60,42,0.26), 0 6px 18px rgba(29,60,42,0.12);
}

/* ---------------------------------------------------------------
   Citation detachee, filet terracotta a gauche
   Classe : nv-citation
   --------------------------------------------------------------- */
.nv-citation {
	border-left: 2px solid var(--wp--preset--color--terracotta);
	padding-left: 26px;
	font-family: var(--wp--preset--font-family--titre);
	font-style: italic;
	color: var(--wp--preset--color--vert-fonce);
}

/* ---------------------------------------------------------------
   Liste a filets, en remplacement des puces
   Classe : nv-liste (sur le bloc Liste)
   --------------------------------------------------------------- */
.nv-liste { list-style: none; padding-left: 0; }
.nv-liste li { position: relative; padding-left: 30px; margin-bottom: 15px; }
.nv-liste li::before {
	content: "";
	position: absolute; left: 0; top: 0.7em;
	width: 13px; height: 1px;
	background: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------
   Halo vert anime dans les bandeaux sombres
   Classe : nv-halo (sur le bloc Groupe de fond)
   --------------------------------------------------------------- */
.nv-halo { position: relative; overflow: hidden; isolation: isolate; }
.nv-halo::before {
	content: "";
	position: absolute; top: -180px; right: -160px;
	width: 620px; height: 620px; border-radius: 50%;
	background: radial-gradient(circle, rgba(59,120,78,0.45) 0%, rgba(29,60,42,0) 68%);
	pointer-events: none;
	z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
	.nv-halo::before { animation: nv-halo-flotte 16s ease-in-out infinite; }
}
@keyframes nv-halo-flotte {
	0%, 100% { transform: translate(0,0) scale(1); }
	50% { transform: translate(-34px,32px) scale(1.08); }
}

/* ---------------------------------------------------------------
   Pastille ronde, pour les numeros d'etape
   Classe : nv-pastille
   --------------------------------------------------------------- */
.nv-pastille {
	width: 54px; height: 54px; border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--terracotta);
	font-family: var(--wp--preset--font-family--titre);
	display: flex; align-items: center; justify-content: center;
	transition: background .3s ease, color .3s ease;
}
.nv-pastille:hover { background: var(--wp--preset--color--terracotta); color: #fff; }

/* ---------------------------------------------------------------
   Navigation : couleur des liens et soulignement progressif
   Le bandeau est vert fonce : les liens doivent rester clairs,
   quelle que soit la couleur de texte heritee du contexte.
   --------------------------------------------------------------- */
.wp-block-template-part .wp-block-navigation,
.wp-block-template-part .wp-block-navigation a,
.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content,
.wp-block-template-part .wp-block-navigation .wp-block-page-list a,
header .wp-block-navigation a {
	color: var(--wp--preset--color--creme);
	text-decoration: none;
}
.wp-block-template-part .wp-block-navigation a:hover,
header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--blanc);
	text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a {
	background-color: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme);
}

.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 4px;
	opacity: 0.85;
	transition: opacity .22s ease;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	height: 1px; width: 0;
	background: var(--wp--preset--color--terracotta-clair);
	transition: width .28s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover { opacity: 1; text-decoration: none; }
.wp-block-navigation .wp-block-navigation-item__content:hover::after { width: 100%; }
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content { opacity: 1; }
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after { width: 100%; }

/* ---------------------------------------------------------------
   Details : les blocs depliables, sans marqueur par defaut
   --------------------------------------------------------------- */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--beige);
	padding-bottom: 8px;
}
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--vert-fonce);
	padding: 26px 0 18px;
	transition: color .25s ease;
}
.wp-block-details summary:hover { color: var(--wp--preset--color--terracotta); }

/* ---------------------------------------------------------------
   Listes du pied de page : sans puces
   Classe : nv-liste-pied
   --------------------------------------------------------------- */
.nv-liste-pied { list-style: none; padding-left: 0; }
.nv-liste-pied li { margin-bottom: 10px; }
.nv-liste-pied a { color: var(--wp--preset--color--creme-fonce); }
.nv-liste-pied a:hover { color: var(--wp--preset--color--blanc); text-decoration: none; }

/* ---------------------------------------------------------------
   Chiffres clés du bandeau statistiques
   Classes : nv-chiffre (le nombre), nv-compteur (il defile au
   defilement de la page), nv-source (la reference sous le texte)
   --------------------------------------------------------------- */
.nv-chiffre {
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(32px, 4vw, 42px);
	line-height: 1.1;
	color: var(--wp--preset--color--vert-fonce);
	font-variant-numeric: tabular-nums;
}
.nv-source {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13.5px;
	color: var(--wp--preset--color--terracotta);
}
.nv-bande-chiffres { border-bottom: 1px solid var(--wp--preset--color--beige); }

/* ---------------------------------------------------------------
   Fleche qui avance quand la souris survole la carte
   Classe : nv-fleche
   --------------------------------------------------------------- */
.nv-fleche {
	color: var(--wp--preset--color--terracotta);
	font-size: 16px;
	letter-spacing: 0.04em;
	margin-top: auto;
}
.nv-fleche a { color: inherit; text-decoration: none; }
.nv-fleche a::after {
	content: " \2192";
	display: inline-block;
	margin-left: 6px;
	transition: margin-left .25s ease;
}
.nv-carte:hover .nv-fleche a::after { margin-left: 14px; }

/* ---------------------------------------------------------------
   Entree de glossaire : filet au-dessus
   Classe : nv-glossaire
   --------------------------------------------------------------- */
.nv-glossaire {
	border-top: 1px solid var(--wp--preset--color--beige);
	padding-top: 24px;
}
/* Le filet separe les entrees, il ne coiffe pas la premiere : sinon le
   filet et son retrait decalent la colonne de 25 px vers le bas, et son
   premier titre ne s'aligne plus sur le premier paragraphe d'a cote. */
.nv-glossaire:first-child {
	border-top: 0;
	padding-top: 0;
}

/* ---------------------------------------------------------------
   Jeton rond vert, pour les domaines d'intervention
   Classe : nv-jeton
   --------------------------------------------------------------- */
.nv-jeton {
	width: 52px; height: 52px; border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--vert-fonce);
	font-family: var(--wp--preset--font-family--titre);
	font-size: 15px;
	display: flex; align-items: center; justify-content: center;
	transition: background .3s ease, color .3s ease;
}
.nv-domaine:hover .nv-jeton {
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--blanc);
}
.nv-domaine { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.nv-domaine:hover { transform: translateY(-4px); }

/* ---------------------------------------------------------------
   Bouton clair sur fond sombre
   Classe : nv-btn-clair (sur le bloc Bouton)
   --------------------------------------------------------------- */
.nv-btn-clair .wp-block-button__link,
.nv-btn-clair.wp-block-button .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--creme);
	border: 1px solid rgba(245, 242, 236, 0.45);
	transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.nv-btn-clair .wp-block-button__link:hover {
	background: rgba(245, 242, 236, 0.09);
	border-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--blanc);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   Relais JavaScript des apparitions, pour les navigateurs anciens
   --------------------------------------------------------------- */
.nv-relais-js .nv-anim { opacity: 0; transform: translateY(30px); transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); }
.nv-relais-js .nv-anim.nv-visible { opacity: 1; transform: none; }
.nv-relais-js .nv-anim.nv-d1 { transition-delay: .10s; }
.nv-relais-js .nv-anim.nv-d2 { transition-delay: .20s; }
.nv-relais-js .nv-anim.nv-d3 { transition-delay: .30s; }

/* ---------------------------------------------------------------
   Compteur : le nombre defile jusqu'a sa valeur quand la section
   entre dans l'ecran. La valeur est lue dans le texte du bloc, vous
   pouvez donc la modifier librement dans l'editeur.
   Classe : nv-compteur
   --------------------------------------------------------------- */
.nv-compteur { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   Sections jointives
   WordPress insere un espace entre les blocs de premier niveau :
   en-tete, contenu, pied de page, et entre les sections pleine
   largeur. Cet espace laissait voir le fond blanc de la page sous
   la forme d'une fine ligne claire. On le supprime : les sections
   portent deja leur propre respiration en padding interne.
   --------------------------------------------------------------- */
.wp-site-blocks header.wp-block-template-part,
.wp-site-blocks main,
.wp-site-blocks footer.wp-block-template-part {
	margin-block-start: 0;
	margin-block-end: 0;
}
main .wp-block-group.alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------------------------------------------------------------
   Bandeau de references
   Classe nv-bandeau sur le groupe, nv-piste sur la rangee de noms.
   La rangee defile horizontalement. Les deux fleches sont ajoutees
   par assets/interactions.js : sans JavaScript, la rangee reste
   simplement faisable glisser au doigt ou au pave tactile.
   --------------------------------------------------------------- */
.nv-piste {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 1px 6px;
}
.nv-piste::-webkit-scrollbar { display: none; }

.nv-piste .wp-block-group,
.nv-piste p {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin: 0;
	padding: 20px 28px;
	border: 1px solid var(--wp--preset--color--beige);
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert-fonce);
	font-size: 17px;
	line-height: 1.3;
	white-space: nowrap;
	transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.nv-piste p:hover {
	border-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--terracotta);
	transform: translateY(-3px);
}

/* Le cadre qui porte les fleches. Ajoute par le script.
   Les fleches sont posees au-dessus de la rangee, a droite : elles ne
   recouvrent ainsi jamais un nom. */
.nv-piste-cadre { position: relative; }
.nv-piste-cadre .nv-piste { max-width: none; margin-left: 0; margin-right: 0; }

.nv-fleche-piste {
	position: absolute;
	top: -60px;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--beige);
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert-fonce);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(29,60,42,0.10);
	transition: border-color .25s ease, color .25s ease, opacity .25s ease;
	z-index: 2;
}
.nv-fleche-piste:hover {
	border-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--terracotta);
}
.nv-fleche-piste:disabled { opacity: 0.3; cursor: default; }
.nv-fleche-piste.nv-avant { right: 54px; }
.nv-fleche-piste.nv-apres { right: 0; }

/* Sur telephone, la rangee se fait glisser au doigt : les fleches
   n'apportent rien et prendraient la place du titre. */
@media (max-width: 599px) {
	.nv-fleche-piste { display: none; }
}

/* ---------------------------------------------------------------
   Texte justifie
   Classe : nv-justifie, a poser sur le bloc Colonne ou sur le
   groupe qui contient les paragraphes.

   La cesure est activee avec : sans elle, le francais justifie
   ouvre des blancs tres larges entre les mots, parce que les mots
   y sont longs et les lignes etroites.
   --------------------------------------------------------------- */
.nv-justifie,
.nv-justifie p,
.nv-justifie li {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* ---------------------------------------------------------------
   En-tete fixe

   WordPress enveloppe la composition d'en-tete dans un element
   header. Le groupe interieur declarait bien une position collee,
   mais un element colle ne peut pas sortir de son parent : ce
   parent fait 74 px de haut, l'en-tete repartait donc vers le haut
   avec lui des les premiers pixels de defilement. On colle le
   header lui-meme, dont le parent est toute la page.
   --------------------------------------------------------------- */
.wp-site-blocks header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* Connectee a l'administration, la barre noire occupe le haut de
   l'ecran : l'en-tete se place dessous. */
.admin-bar .wp-site-blocks header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Le groupe interieur n'a plus a se coller lui-meme. */
.wp-site-blocks header.wp-block-template-part .is-position-sticky {
	position: static;
}