/*
Theme Name:     Ivana Portfolio
Theme URI:      http://ivana-portfolio.local/
Description:    Child theme Kadence sur-mesure pour le portfolio d'Ivana Datchary Mavreau — style BD / comics bleu profond.
Author:         Ivana Portfolio
Author URI:     http://ivana-portfolio.local/
Template:       kadence
Version:        2.6.0
Text Domain:    ivana-portfolio
*/

/* =========================================================
   1. DESIGN TOKENS — nouveau style BD bleu profond
   ========================================================= */
:root {
	/* Palette bleu profond */
	--bg:             #050f17;
	--bg-2:           #073046;
	--bg-mid:         #0a3d62;
	--bg-light:       #1a7fc1;
	--bg-deep:        #0d4f8c;

	--primary:        #137fbf;
	--primary-light:  #339ad1;
	--primary-pale:   #aed9f5;

	/* Couleurs accent (pour barres décoratives, etc.) */
	--orange:         #e26813;
	--yellow:         #e9c402;
	--magenta:        #b3074f;
	--olive:          #9fa713;

	--white:          #ffffff;
	--nav-text:       #1a6fa8;

	/* Transparences */
	--card-bg:        rgba(255, 255, 255, 0.92);
	--card-bg-hover:  rgba(255, 255, 255, 0.98);
	--glass-bg:       rgba(255, 255, 255, 0.06);
	--glass-border:   rgba(255, 255, 255, 0.15);

	/* Typographie */
	--font-head: 'Bangers', Impact, 'Arial Black', sans-serif;
	--font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Échelle */
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-md:   1.25rem;
	--fs-lg:   1.5rem;
	--fs-xl:   2rem;
	--fs-2xl:  3rem;
	--fs-3xl:  4.5rem;
	--fs-4xl:  6rem;

	/* Espacements */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4rem;
	--space-8: 6rem;

	/* Rayons */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	/* Ombres */
	--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 8px 28px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--transition: 0.3s var(--ease-out);
}

/* =========================================================
   2. FOND DÉGRADÉ BLEU + GRILLE
   ========================================================= */
html {
	scroll-behavior: smooth;
}

html {
	background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-light) 50%, var(--bg-deep) 100%) no-repeat fixed;
	min-height: 100%;
}

body {
	font-family: var(--font-body);
	color: var(--white);
	background: transparent !important;
	font-size: var(--fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	position: relative;
	min-height: 100vh;
}

/* Grille en overlay — lignes blanches à 4% d'opacité */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
	z-index: 1;
}

/* Tout le contenu au-dessus de la grille */
#page, .site, main, header, footer { position: relative; z-index: 2; }

/* Override Kadence white backgrounds */
#inner-wrap,
.site-container,
.content-wrap,
.content-container,
.content-bg,
#primary,
.site-main,
.entry-content,
.entry-content-wrap,
.site-content,
.wp-site-blocks,
.content-area,
main.site-main,
article.entry,
.entry,
.entry-hero,
.entry-hero-container-inner,
.kadence-hero-section,
.page-hero-wrap,
.entry-hero.page-hero-section,
.above-entry-content-wrap,
.below-entry-content-wrap,
#colophon,
.site-footer-wrap,
.site-footer-row-container-inner,
.site-footer-row-inner {
	background: transparent !important;
	background-color: transparent !important;
}

.entry-content-wrap > *,
.entry-content > * {
	color: var(--white);
}

/* Blocs de contenu — garder transparent */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
	background: transparent;
}

/* =========================================================
   3. TYPOGRAPHIE
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.site-title, .entry-title,
.wp-block-post-title {
	font-family: var(--font-head);
	color: var(--white);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

h1, .has-display-1 {
	font-size: clamp(3rem, 8vw, var(--fs-4xl));
	letter-spacing: 0.05em;
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
h2, .has-display-2 { font-size: clamp(2.5rem, 6vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-2xl); letter-spacing: 0.04em; }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p { color: rgba(255, 255, 255, 0.9); }

a {
	color: var(--primary-light);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover,
a:focus { color: var(--white); }

strong { color: var(--white); }

/* =========================================================
   4. HEADER / NAV — blanche fixe avec blur
   ========================================================= */
.site-header,
header.site-header,
#masthead {
	background: #ffffff !important;
	border-bottom: 1px solid rgba(30, 65, 88, 0.15);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	position: sticky !important;
	top: 0;
	z-index: 500;
}

/* Décaler le header sticky sous la barre admin WordPress */
body.admin-bar .site-header,
body.admin-bar header.site-header,
body.admin-bar #masthead {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar header.site-header,
	body.admin-bar #masthead {
		top: 46px !important;
	}
}

/* Empêcher le header de rétrécir au scroll (conserver la hauteur et la taille du texte) */
.site-header-row-container.item-is-fixed,
.site-header.item-is-fixed,
.site-header-row-container-inner.item-is-fixed {
	min-height: var(--header-main-height, 80px);
}

.site-header-row-container.item-is-fixed .site-header-main-section-wrap-inner,
.item-is-fixed .site-header-main-section-wrap-inner,
.site-header.item-is-fixed .site-branding,
.site-header.item-is-fixed .site-header-row {
	transform: none !important;
	font-size: inherit !important;
}

/* Fond blanc pour tous les conteneurs internes */
.site-header-row-container,
.site-header-row-container-inner,
.site-header-main-section-wrap,
.site-header-row-container.item-is-fixed {
	background: #ffffff !important;
}

/* S'assurer que les textes ne sont pas coupés */
.site-header .site-title,
.site-header .site-title a,
.site-header .site-branding,
.site-header .site-branding a,
.site-header-row {
	overflow: visible !important;
	line-height: 1.3 !important;
}

.site-title,
.site-title a,
.site-branding a {
	color: var(--nav-text) !important;
	font-family: var(--font-head);
	letter-spacing: 0.05em;
	font-size: var(--fs-lg);
	text-transform: uppercase;
}

.header-navigation a,
.menu-item a,
.primary-menu-container a,
.main-navigation a {
	color: var(--nav-text) !important;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-base);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: color var(--transition);
}

.header-navigation a:hover,
.menu-item a:hover,
.main-navigation a:hover {
	color: var(--primary) !important;
}

/* =========================================================
   5. BOUTONS
   ========================================================= */
.wp-block-button__link,
.btn,
button,
input[type="submit"] {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	border: none;
	cursor: pointer;
	transition: all var(--transition);
	display: inline-block;
}

.wp-block-button__link,
.btn-primary,
input[type="submit"] {
	background: var(--primary);
	color: var(--white);
	box-shadow: 0 4px 16px rgba(19, 127, 191, 0.4);
}

.wp-block-button__link:hover,
.btn-primary:hover,
input[type="submit"]:hover {
	background: var(--primary-light);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(19, 127, 191, 0.5);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--white);
	border: 2px solid var(--white);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--white);
	color: var(--primary);
}

/* =========================================================
   6. CONTENU PAGES — cartes glassmorphism
   ========================================================= */
.entry-content,
.wp-block-group,
article {
	color: var(--white);
}

/* Cartes blanches (ex: cartes projet) */
.wp-block-column > .wp-block-image img,
.wp-block-column > .wp-block-group {
	transition: transform var(--transition);
}

/* Encadrement automatique des colonnes (cartes) */
.wp-block-columns .wp-block-column {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	transition: all var(--transition);
}

/* Images dans le contenu — arrondies */
.wp-block-image img,
figure img {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* =========================================================
   7. PAGE HERO (titre de page)
   ========================================================= */
.entry-hero,
.entry-header,
.kadence-page-title-wrap,
.ivana-page-hero {
	padding-block: var(--space-3) var(--space-2);
	text-align: center;
	background: transparent !important;
}

/* Réduire la marge entre le hero et le contenu de la page */
.entry-content,
.entry-content-wrap {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Réduire l'espace du divider sous le titre de page (sauf home) */
.entry-hero .entry-title::after,
h1.entry-title::after,
.ivana-page-hero__title::after {
	margin: var(--space-2) auto 0 !important;
}

/* Réduire l'espace après le titre de la page */
body:not(.home) h1.entry-title,
body:not(.home) .entry-hero .entry-title {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Enlever toute marge sur la première section du contenu */
body:not(.home) .entry-content > *:first-child,
body:not(.home) .entry-content-wrap > *:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.entry-hero .entry-title,
.entry-header .entry-title,
h1.entry-title,
.ivana-page-hero__title {
	font-size: clamp(3.5rem, 9vw, var(--fs-4xl));
	color: var(--white);
	letter-spacing: 0.06em;
	position: relative;
	display: inline-block;
}

.entry-hero .entry-title::after,
h1.entry-title::after,
.ivana-page-hero__title::after {
	content: '';
	display: block;
	width: min(420px, 70vw);
	height: 2px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 10%,
		rgba(255, 255, 255, 0.95) 50%,
		rgba(255, 255, 255, 0) 90%,
		rgba(255, 255, 255, 0) 100%
	);
	margin: var(--space-3) auto 0;
}

/* =========================================================
   8. GRILLE PROJETS + CARTES
   ========================================================= */
.ivana-projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-5);
}

.ivana-project-card {
	position: relative;
	background: var(--card-bg);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: all var(--transition);
}
.ivana-project-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
	background: var(--card-bg-hover);
}
.ivana-project-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.ivana-project-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(135deg, var(--primary-light), var(--primary));
}
.ivana-project-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}
.ivana-project-card:hover .ivana-project-card__img { transform: scale(1.08); }
.ivana-project-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--primary), var(--magenta));
}
.ivana-project-card__body {
	padding: var(--space-4);
}
.ivana-project-card__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-head);
	font-size: var(--fs-lg);
	color: var(--nav-text);
	letter-spacing: 0.03em;
}
.ivana-project-card__excerpt {
	margin: 0 0 var(--space-3);
	color: #2c5068;
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.ivana-project-card__date {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary);
	font-weight: 700;
}
.ivana-project-card__subtitle {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-sm);
	font-style: italic;
	color: var(--magenta, #a14b8a);
}
.ivana-project-card__tags {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	color: var(--primary);
	letter-spacing: 0.04em;
	text-transform: none;
}
.ivana-project-card__cta {
	display: inline-block;
	font-weight: 700;
	color: var(--primary);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: transform var(--transition), color var(--transition);
}
.ivana-project-card:hover .ivana-project-card__cta {
	color: var(--orange);
	transform: translateX(6px);
}

/* =========================================================
   9. PROJET HERO + CONTENU + NAV
   ========================================================= */
.ivana-project-hero {
	position: relative;
	margin-block: var(--space-5) var(--space-7);
}
.ivana-project-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0;
	align-items: center;
	padding: var(--space-5);
	background: #fff;
	border-radius: var(--radius-lg, 24px);
	box-shadow: 0 10px 40px rgba(10, 61, 98, 0.12);
	margin-inline: auto;
	max-width: min(1200px, 100% - 2 * var(--space-5));
}
.ivana-project-hero__media {
	--hero-ratio: 1.7778;
	--hero-h: min(60vh, 520px);
	height: auto;
	width: calc(var(--hero-h) * var(--hero-ratio));
	max-width: 75%;
	aspect-ratio: var(--hero-ratio);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: transparent;
	justify-self: end;
}
.ivana-project-hero__content {
	min-width: 0;
}
.ivana-project-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ivana-project-hero__content {
	position: relative;
	background: #fff;
	height: var(--hero-h, min(60vh, 520px));
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	padding: var(--space-6) var(--space-5);
	text-align: left;
}
.ivana-project-hero__category {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--orange);
}
.ivana-project-hero__title {
	margin: 0 0 var(--space-3);
	color: var(--nav-text);
	font-size: clamp(1.75rem, 4vw, var(--fs-3xl));
	overflow-wrap: break-word;
}
.ivana-project-hero__excerpt {
	margin: 0;
	color: #2c5068;
	font-size: var(--fs-md);
}

.ivana-project-content {
	padding-block: var(--space-5) var(--space-7);
	font-size: var(--fs-md);
	line-height: 1.75;
	/* Override Kadence theme.json content-size so blocks fill the 1200px container */
	--wp--style--global--content-size: 1200px;
	--wp--style--global--wide-size: 1200px;
}
.ivana-project-content .ivana-container > .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.ivana-project-content .ivana-container > * {
	max-width: 100%;
}
.ivana-project-content img {
	border-radius: var(--radius-md);
	margin-block: var(--space-4);
	box-shadow: var(--shadow-md);
}

/* Media-text inside project content : stack vertical (image au-dessus, texte en dessous) */
.ivana-project-content .wp-block-media-text {
	display: block;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--radius-md);
	overflow: hidden;
	padding: 0;
}
.ivana-project-content .wp-block-media-text__media {
	margin: 0;
	width: 100%;
	background: #071e35;
}
.ivana-project-content .wp-block-media-text__media img {
	width: 100%;
	height: auto;
	max-height: 280px;
	object-fit: contain;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	display: block;
}
.ivana-project-content .wp-block-media-text__content {
	padding: var(--space-4) var(--space-5);
	grid-column: unset;
}
.ivana-project-content .wp-block-media-text__content h3 {
	margin-top: 0;
	font-size: 1.25rem;
	line-height: 1.25;
}

/* Columns inside project content : gap aéré */
.ivana-project-content .wp-block-columns {
	gap: var(--space-4);
}

/* Grille responsive pour les étapes de projet — auto-fit 1/2/3/4 cartes */
.ivana-project-content .ivana-steps-grid,
.ivana-project-content .ivana-steps-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-4);
	margin-block: var(--space-4);
	max-width: none;
}
.ivana-project-content .ivana-steps-grid .wp-block-media-text {
	margin: 0;
	max-width: none;
}

.ivana-project-nav {
	border-top: 1px solid var(--glass-border);
	padding-block: var(--space-6);
	background: var(--glass-bg);
	backdrop-filter: blur(14px);
}
.ivana-project-nav .ivana-container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--space-4);
	align-items: center;
}
.ivana-project-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	color: var(--white);
	transition: color var(--transition);
}
.ivana-project-nav__link--next {
	text-align: right;
	grid-column: 3;
}
.ivana-project-nav__link:hover { color: var(--primary-light); }
.ivana-project-nav__label {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.7);
}
.ivana-project-nav__title {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: var(--fs-lg);
	letter-spacing: 0.03em;
}
.ivana-project-nav__back {
	padding: var(--space-2) var(--space-4);
	border: 2px solid var(--white);
	border-radius: var(--radius-pill);
	color: var(--white);
	font-weight: 700;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: all var(--transition);
}
.ivana-project-nav__back:hover {
	background: var(--white);
	color: var(--primary);
}

/* =========================================================
   10. LAYOUT / CONTAINERS
   ========================================================= */
.ivana-main { display: block; }

.ivana-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-4);
}
.ivana-container--narrow { max-width: 760px; }

.ivana-section {
	padding-block: var(--space-7);
}
.ivana-section--intro { padding-block: var(--space-6) var(--space-4); }

/* =========================================================
   11. FORMULAIRE CF7
   ========================================================= */
.wpcf7-form label {
	color: var(--white);
	font-weight: 600;
	display: block;
	margin-bottom: var(--space-2);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	transition: all var(--transition);
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--primary-light);
	background: rgba(255, 255, 255, 0.12);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.wpcf7-form .wpcf7-submit {
	background: var(--primary);
	color: var(--white);
	padding: var(--space-3) var(--space-5);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	border-radius: var(--radius-pill);
	cursor: pointer;
}
.wpcf7-response-output {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.3) !important;
}

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer,
footer.site-footer {
	background: rgba(0, 0, 0, 0.25) !important;
	backdrop-filter: blur(14px);
	color: var(--white);
	padding-block: var(--space-2) !important;
	text-align: center;
	border-top: 1px solid var(--glass-border);
}
.site-footer a { color: var(--primary-light); }

/* Réduire drastiquement le padding des conteneurs internes Kadence du footer */
.site-footer-wrap,
.site-footer-row-container,
.site-footer-row-container-inner,
.site-footer-row-inner,
.site-footer-section,
.site-footer-row {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
}

.site-footer,
footer.site-footer {
	padding: 0.4rem var(--space-3) !important;
}

.site-footer p,
.site-footer .site-footer-section-content {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.85rem;
}

/* =========================================================
   12bis. PAGE D'ACCUEIL — header transparent
   ========================================================= */
body.home .site-header,
body.home header.site-header,
body.home #masthead,
body.home .site-header-row-container,
body.home .site-header-row-container-inner,
body.home .site-header-main-section-wrap {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	z-index: 99999 !important;
}

body.home .site-header,
body.home header.site-header,
body.home #masthead {
	position: relative !important;
}

body.home .site-title,
body.home .site-title a,
body.home .site-branding a {
	color: var(--white) !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Page d'accueil — centrer le contenu */
body.home .entry-content,
body.home .entry-content-wrap {
	text-align: center;
}

/* H2 "PORTFOLIO" — texte creux fin, laisse voir le fond bleu */
body.home .entry-content h2,
body.home h2.wp-block-heading {
	font-size: clamp(4.5rem, 12vw, 10rem) !important;
	margin-top: -0.3em !important;
	margin-bottom: var(--space-4) !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.5) !important;
	text-stroke: 0.5px rgba(255, 255, 255, 0.5) !important;
	letter-spacing: 0.08em !important;
	text-align: center !important;
	line-height: 1 !important;
	text-shadow: none !important;
}

/* H1 "SAE 204" — plus grand et plus soutenu */
body.home .entry-title,
body.home h1.entry-title {
	font-size: clamp(4.5rem, 12vw, 10rem) !important;
	line-height: 0.9 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	text-shadow: 3px 3px 0 rgba(0, 30, 60, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Supprimer tout padding/margin du hero Kadence sur la home */
body.home .entry-hero,
body.home .entry-header,
body.home .kadence-page-title-wrap,
body.home .entry-hero-container-inner {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* H1 de la page d'accueil — collé au H2 */
body.home .entry-title,
body.home h1.entry-title {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	line-height: 0.95;
}

body.home .entry-hero,
body.home .entry-header,
body.home .kadence-page-title-wrap {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

body.home .entry-title::after,
body.home h1.entry-title::after {
	display: none;
}

/* Colonnes horizontales sur la home (3 boutons icônes) — centrées */
body.home .wp-block-columns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: var(--space-5);
	margin-top: var(--space-6);
	margin-inline: auto !important;
	max-width: 900px;
	padding-top: var(--space-6);
	position: relative;
}

/* Trait séparateur centré au-dessus des boutons */
body.home .wp-block-columns::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 2px;
	background: var(--white);
	opacity: 0.8;
}

body.home .wp-block-column {
	flex: 0 1 auto !important;
	text-align: center;
	padding: 0 !important;
	min-width: 0 !important;
}

/* Centrer le paragraphe "Communication digitale..." */
body.home .entry-content p {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	font-size: var(--fs-md);
}


@media (max-width: 768px) {
	body.home .wp-block-columns {
		flex-direction: column !important;
	}
}


body.home .header-navigation a,
body.home .menu-item a,
body.home .primary-menu-container a,
body.home .main-navigation a {
	color: var(--white) !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.home .header-navigation a:hover,
body.home .menu-item a:hover,
body.home .main-navigation a:hover {
	color: var(--primary-light) !important;
}

/* Cartes "bouton icône rond" pour la home */
.home-icon-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	color: var(--white);
	text-decoration: none;
	transition: transform var(--transition);
}
.home-icon-btn:hover { transform: translateY(-6px); color: var(--white); }
.home-icon-btn__circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	transition: all var(--transition);
}
.home-icon-btn:hover .home-icon-btn__circle {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--white);
}
.home-icon-btn__label {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--fs-sm);
}

/* =========================================================
   13. CURSEUR CUSTOM — bulle glassmorphism (identique à la home)
   ========================================================= */
body:not(.ivana-home-landing) { cursor: none; }
body:not(.ivana-home-landing) a,
body:not(.ivana-home-landing) button,
body:not(.ivana-home-landing) input,
body:not(.ivana-home-landing) textarea,
body:not(.ivana-home-landing) select { cursor: none; }

#cursor {
	position: fixed;
	top: 0; left: 0;
	width: 42px; height: 42px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	transition: transform 0.25s var(--ease-out), width 0.25s ease, height 0.25s ease, opacity 0.2s ease;
	background: radial-gradient(
		circle at 36% 32%,
		rgba(255,255,255,0.88) 0%,
		rgba(180,225,255,0.45) 28%,
		rgba(26,127,193,0.20) 60%,
		rgba(26,127,193,0.04) 100%
	);
	border: 1px solid rgba(255,255,255,0.72);
	box-shadow:
		inset 0 -4px 10px rgba(26,127,193,0.22),
		inset 0  2px  6px rgba(255,255,255,0.55),
		0 6px 20px rgba(10,61,98,0.10);
	backdrop-filter: blur(4px);
}
#cursor::after {
	content: '';
	position: absolute;
	top: 8px; left: 10px;
	width: 11px; height: 7px;
	background: rgba(255,255,255,0.92);
	border-radius: 50%;
	transform: rotate(-32deg);
	filter: blur(1px);
}
#cursor.is-hover { transform: translate(-50%,-50%) scale(1.45); opacity: 0.85; }
#cursor.is-down  { transform: translate(-50%,-50%) scale(0.75); }

@media (pointer: coarse) {
	#cursor { display: none !important; }
	body:not(.ivana-home-landing),
	body:not(.ivana-home-landing) a,
	body:not(.ivana-home-landing) button { cursor: auto; }
}

/* =========================================================
   13bis. FOND À BULLES FLOTTANTES (toutes pages sauf home landing)
   ========================================================= */
.ivana-deco-bubble {
	position: fixed;
	border-radius: 50%;
	pointer-events: none;
	border: 1px solid rgba(255,255,255,0.42);
	background: radial-gradient(
		circle at 36% 30%,
		rgba(255,255,255,0.52)  0%,
		rgba(180,225,255,0.17) 32%,
		rgba(26,127,193,0.06)  68%,
		transparent            100%
	);
	box-shadow:
		inset 0 -2px 6px rgba(26,127,193,0.10),
		inset 0  1px 4px rgba(255,255,255,0.30);
	opacity: var(--op, 0.18);
	z-index: 1;
	animation: ivanaFloatDeco var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}
.ivana-deco-bubble::after {
	content: '';
	position: absolute;
	top: 18%; left: 22%;
	width: 27%; height: 16%;
	background: rgba(255,255,255,0.78);
	border-radius: 50%;
	transform: rotate(-30deg);
	filter: blur(0.8px);
}
@keyframes ivanaFloatDeco {
	0%   { transform: translate(0, 0) scale(1); }
	20%  { transform: translate(var(--dx1,8px), var(--dy1,-12px)) scale(1.02); }
	50%  { transform: translate(var(--dx2,-5px), var(--dy2,-20px)) scale(0.97); }
	80%  { transform: translate(var(--dx3,6px), var(--dy3,-9px)) scale(1.01); }
	100% { transform: translate(0, 0) scale(1); }
}

/* =========================================================
   13ter. CADRE PORTRAIT — SVG décor + image ronde
   ========================================================= */
.ivana-portrait-frame {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 360px;
	margin-inline: auto;
	padding: 8%;
	background-image: url('assets/img/portrait-frame.svg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.ivana-portrait-frame .wp-block-image,
.ivana-portrait-frame figure,
.ivana-portrait-frame img {
	width: 100%;
	height: 100%;
	margin: 0;
}
.ivana-portrait-frame img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	box-shadow: 0 8px 30px rgba(10,61,98,0.35), 0 0 0 3px rgba(255,255,255,0.2);
}
.ivana-portrait-frame__bubbles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}
.ivana-portrait-frame__bubble {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.42);
	background: radial-gradient(
		circle at 36% 30%,
		rgba(255,255,255,0.60)  0%,
		rgba(180,225,255,0.20) 32%,
		rgba(26,127,193,0.06)  68%,
		transparent           100%
	);
	box-shadow:
		inset 0 -2px 6px rgba(26,127,193,0.10),
		inset 0  1px 4px rgba(255,255,255,0.30);
	opacity: var(--op, 0.8);
	animation: ivanaFloatDeco var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}
.ivana-portrait-frame__bubble::after {
	content: '';
	position: absolute;
	top: 18%; left: 22%;
	width: 27%; height: 16%;
	background: rgba(255,255,255,0.78);
	border-radius: 50%;
	transform: rotate(-30deg);
	filter: blur(0.8px);
}

/* =========================================================
   14. RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
	.ivana-project-hero__inner {
		grid-template-columns: 1fr;
		gap: 0;
		max-width: calc(100% - 2 * var(--space-4));
	}
	.ivana-project-hero__content {
		padding: var(--space-5) var(--space-4);
		text-align: center;
		height: auto;
		min-height: 180px;
		border-radius: 0 0 var(--radius-md) var(--radius-md);
	}
	.ivana-project-hero__media {
		order: -1;
		height: auto;
		width: auto;
		max-width: 100%;
		aspect-ratio: var(--hero-ratio);
		max-height: 55vh;
		justify-self: center;
		border-radius: var(--radius-md);
	}
	.ivana-project-hero__img {
		-webkit-mask-image: none;
		mask-image: none;
	}
}
@media (max-width: 768px) {
	.ivana-section { padding-block: var(--space-6); }
	.ivana-project-nav .ivana-container {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.ivana-project-nav__link--next { grid-column: auto; text-align: center; }

	#cursor-dot, #cursor-ring { display: none; }
	body { cursor: auto; }
}

.ivana-empty {
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-style: italic;
	padding-block: var(--space-6);
}

/* ===== Liseret blanc dégradé sous le header ===== */
.site-content,
#content {
	position: relative;
}

.site-content::before,
#content::before {
	content: "";
	display: block;
	height: 2px;
	width: 80%;
	margin: 0 auto 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.95) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}
/* =========================================================
   Séparateurs stylisés — ligne dégradée avec halo lumineux
   Utilisation : <!-- wp:separator {"className":"is-style-ivana-glow"} -->
   ========================================================= */
.wp-block-separator {
	position: relative;
	display: block;
	border: 0;
	height: 2px;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-top: 3.5rem !important;
	margin-bottom: 3.5rem !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 10%,
		rgba(255, 255, 255, 0.95) 50%,
		rgba(255, 255, 255, 0) 90%,
		rgba(255, 255, 255, 0) 100%
	);
	overflow: visible;
	opacity: 1;
}

/* Halo sombre bleu-violet autour du séparateur pour assombrir le fond */
.wp-block-separator::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 180px;
	background: radial-gradient(
		ellipse at center,
		rgba(50, 20, 90, 0.55) 0%,
		rgba(90, 30, 120, 0.35) 35%,
		rgba(30, 65, 88, 0) 75%
	);
	pointer-events: none;
	z-index: -1;
	filter: blur(8px);
}

/* =========================================================
   Page Contact — titres bi-lignes :
   1er H2 en blanc plein, 2ème H2 juste en dessous en outline blanc
   ========================================================= */
.ivana-title-outline {
	color: transparent !important;
	-webkit-text-stroke: 1.5px #ffffff;
	text-stroke: 1.5px #ffffff;
	text-shadow: none;
}

/* =========================================================
   GRILLE PROJETS (page Projets — blocks Gutenberg columns)
   3 colonnes, cartes de taille égale, bouton aligné en bas
   ========================================================= */
.ivana-projects-row.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin-bottom: var(--space-5);
}
.ivana-projects-row > .wp-block-column {
	flex: none;
	margin: 0 !important;
}
.ivana-projects-row .ivana-project-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--card-bg);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}
.ivana-projects-row .ivana-project-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
}
.ivana-projects-row .ivana-project-card__image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.ivana-projects-row .ivana-project-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease-out);
}
.ivana-projects-row .ivana-project-card:hover .ivana-project-card__image img {
	transform: scale(1.06);
}
.ivana-projects-row .ivana-project-card__date {
	margin: var(--space-4) var(--space-4) 0;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary);
	font-weight: 700;
}
.ivana-projects-row .ivana-project-card__title {
	margin: var(--space-2) var(--space-4) 0;
	font-size: var(--fs-lg);
	line-height: 1.25;
	color: var(--nav-text);
}
.ivana-projects-row .ivana-project-card__subtitle {
	margin: var(--space-1) var(--space-4) 0;
	font-size: var(--fs-sm);
	font-style: italic;
	color: var(--magenta, #a14b8a);
}
.ivana-projects-row .ivana-project-card__desc {
	margin: var(--space-2) var(--space-4) 0;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: #2c5068;
}
.ivana-projects-row .ivana-project-card__tags {
	margin: var(--space-3) var(--space-4) 0;
	font-size: var(--fs-xs);
	color: var(--primary);
	letter-spacing: 0.04em;
}
.ivana-projects-row .ivana-project-card__cta {
	margin: auto var(--space-4) var(--space-4);
	padding-top: var(--space-3);
}
.ivana-projects-row .ivana-project-card-empty {
	display: none;
}

@media (max-width: 960px) {
	.ivana-projects-row.wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.ivana-projects-row.wp-block-columns {
		grid-template-columns: 1fr;
	}
}