/*
Theme Name: Albireo Design
Theme URI: https://albireo.com
Author: Albireo Design
Description: Thème Full Site Editing sur mesure pour Albireo Design — univers cosmique, titres néon, orbite des prestations. 100 % éditable depuis l'éditeur de site WordPress.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: albireo-design
*/

/* ==========================================================================
   1. Effet néon des titres (classe utilitaire : .albireo-neon)
   ========================================================================== */
.albireo-neon {
	text-shadow: var(--wp--custom--neon);
	font-weight: 200;
	letter-spacing: 0.14em;
}

/* ==========================================================================
   1bis. Header sticky sur TOUTES les pages (PC + mobile)
   --------------------------------------------------------------------------
   Le réglage « position: sticky » du bloc Groupe ne fonctionne pas seul :
   le groupe est enfermé dans le wrapper <header class="wp-block-template-part">
   généré par WordPress, qui fait exactement la même hauteur que lui.
   On rend donc le WRAPPER sticky, et on le fait chevaucher le contenu qui
   suit (marge négative) pour que le halo des héros passe dessous,
   comme sur les maquettes.
   ========================================================================== */
:root {
	--albireo-header-hauteur: 109px; /* logo 64px + paddings 1.2rem / 1.6rem */
}
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100; /* passe au-dessus du contenu en défilant */
	margin-bottom: calc(-1 * var(--albireo-header-hauteur));
}
/* Dégradé noir/bleu en haut → transparent en bas, sur toutes les tailles
   d'écran, pour ne pas gêner la lecture du contenu qui défile dessous */
.albireo-header {
	background: linear-gradient(
		180deg,
		rgba(5, 8, 28, 0.92) 0%,
		rgba(5, 8, 28, 0.55) 55%,
		rgba(5, 8, 28, 0) 100%
	);
}

/* ==========================================================================
   2. Héro : halo lumineux en haut de page (classe : .albireo-hero)
   ========================================================================== */
.albireo-hero {
	position: relative;
	overflow: hidden;
}
.albireo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 40% at 80% 0%, rgba(80, 200, 230, 0.18), transparent 60%),
		radial-gradient(ellipse 50% 35% at 30% 10%, rgba(110, 90, 220, 0.15), transparent 60%);
}

/* Variante accueil : grand halo planétaire — image « halo bleu » des maquettes.
   Deux variables pilotent le rendu (faciles à ajuster) :
   --halo-largeur : largeur de l'image (l'arc déborde des deux côtés sur PC)
   --halo-haut    : position verticale du bord supérieur de l'image. */
.albireo-hero-accueil {
	--halo-largeur: min(160vw, 2300px);
	/* place le limbe lumineux du halo à ~68 % de la hauteur du héro (cf. maquette PC).
	   0.766 = profondeur du limbe dans l'image (92 % de sa hauteur × ratio 0.83) */
	--halo-haut: calc(517px - var(--halo-largeur) * 0.766);
}
.albireo-hero-accueil::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("assets/images/halo-bleu.png");
	/* Version WebP plus légère pour les navigateurs récents */
	background-image: image-set(
		url("assets/images/halo-bleu.webp") type("image/webp"),
		url("assets/images/halo-bleu.png") type("image/png")
	);
	background-repeat: no-repeat;
	background-size: var(--halo-largeur) auto;
	background-position: center var(--halo-haut);
}
/* Voile sombre en haut du héro : garde « ALBIREO DESIGN » lisible sur fond
   bleu nuit et resserre la bande blanche du halo, comme sur les maquettes */
.albireo-hero-accueil::after {
	background: linear-gradient(
		180deg,
		rgba(6, 7, 23, 0.96) 0%,
		rgba(6, 7, 23, 0.55) 30%,
		rgba(6, 7, 23, 0) 58%
	);
}
/* Mobile : héro plus compact, arc pleine largeur sous « ALBIREO DESIGN »
   dont la lueur s'éteint au bas du héro, fidèle à la maquette Home.png */
@media (max-width: 781px) {
	.albireo-hero-accueil {
		min-height: min(760px, 138vw) !important;
		--halo-largeur: 150vw;
		--halo-haut: 17vw;
	}
}

/* ==========================================================================
   3. Boutons « pilule lumineuse » : style appliqué via theme.json,
      complément dégradé interne ici
   ========================================================================== */
.wp-block-button__link {
	background-image: linear-gradient(135deg, rgba(40,60,110,0.55) 0%, rgba(8,12,30,0.9) 55%, rgba(30,50,95,0.45) 100%);
	backdrop-filter: blur(4px);
	transition: box-shadow 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   4. Cartes projet (portfolio / Query Loop) — classe : .albireo-carte-projet
   ========================================================================== */
.albireo-carte-projet {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.albireo-carte-projet:hover {
	box-shadow: 0 0 0 1px rgba(190, 220, 255, 0.35), 0 0 45px rgba(140, 190, 255, 0.35);
	transform: translateY(-3px);
}
.albireo-carte-projet img {
	border-radius: 8px;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
}
.albireo-lien-detail a {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease;
}
.albireo-lien-detail a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.9em;
	transition: transform 0.25s ease;
}
.albireo-lien-detail a:hover { border-color: currentColor; }
.albireo-lien-detail a:hover::after { transform: translateX(5px); }

/* ==========================================================================
   5. Carte vitrée (coordonnées contact) — classe : .albireo-carte-vitree
   ========================================================================== */
.albireo-carte-vitree {
	background: linear-gradient(150deg, rgba(28,42,82,0.55), rgba(8,13,30,0.85));
	border: 1px solid rgba(190, 215, 255, 0.18);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(6px);
}

/* ==========================================================================
   6. Sous-titres italiques lavande — classe : .albireo-sous-titre
   ========================================================================== */
.albireo-sous-titre {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--lavande);
	letter-spacing: 0.03em;
}

/* ==========================================================================
   7. Footer : menu vertical souligné
   ========================================================================== */
.albireo-footer-menu .wp-block-navigation-item {
	border-bottom: 1px solid rgba(245, 247, 255, 0.35);
	padding-bottom: 0.6rem;
	width: 220px;
}
.albireo-footer-menu .wp-block-navigation-item a {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: none;
}

/* ==========================================================================
   8. Orbite des prestations (statique + interactive)
   ========================================================================== */
.albireo-orbite {
	position: relative;
	width: min(560px, 92vw);
	aspect-ratio: 1;
	margin-inline: auto;
}
.albireo-orbite .orbite-anneau {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(245, 247, 255, 0.28);
	border-radius: 50%;
}
.albireo-orbite .orbite-anneau:nth-child(2) { inset: 12.5%; }
.albireo-orbite .orbite-anneau:nth-child(3) { inset: 25%; }
.albireo-orbite .orbite-soleil {
	position: absolute;
	left: 50%; top: 50%;
	width: 17%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 35px rgba(255, 255, 255, 0.8), 0 0 80px rgba(170, 200, 255, 0.5);
}
.albireo-planete {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.7em;
	background: none;
	border: none;
	color: var(--wp--preset--color--blanc);
	font: 300 1.05rem var(--wp--preset--font-family--corps);
	cursor: pointer;
	padding: 0.3em;
	transform: translate(-50%, -50%);
}
.albireo-planete .planete-bille {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--planete, #fff);
	box-shadow: 0 0 16px var(--planete, #fff);
	flex: none;
	transition: transform 0.25s ease;
}
.albireo-planete:hover .planete-bille,
.albireo-planete[aria-selected="true"] .planete-bille {
	transform: scale(1.25);
	outline: 1px dashed rgba(255,255,255,0.8);
	outline-offset: 6px;
}
.albireo-planete[aria-selected="true"] { font-weight: 600; }
/* Positions des 5 planètes (% du conteneur) */
.albireo-planete:nth-of-type(1) { left: 38%;  top: 8%; }   /* Print & Digitales */
.albireo-planete:nth-of-type(2) { left: 62%;  top: 21%; }  /* Identité Visuelle */
.albireo-planete:nth-of-type(3) { left: 79%;  top: 50%; }  /* Logo */
.albireo-planete:nth-of-type(4) { left: 33%;  top: 65%; }  /* Stratégie de Marque */
.albireo-planete:nth-of-type(5) { left: 47%;  top: 88%; }  /* Web design */

/* Panneaux descriptifs (carrousel) */
.albireo-prestations-panneaux > .wp-block-group { display: none; }
.albireo-prestations-panneaux > .wp-block-group.est-actif { display: block; animation: albireo-fondu 0.45s ease; }
/* Sans JS : tout afficher */
.no-js .albireo-prestations-panneaux > .wp-block-group { display: block; }
@keyframes albireo-fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.albireo-carrousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	margin-top: 1.5rem;
}
.albireo-carrousel-nav button {
	background: rgba(10, 16, 36, 0.8);
	border: 1px solid rgba(190, 215, 255, 0.4);
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
	box-shadow: 0 0 14px rgba(120, 170, 255, 0.3);
}
.albireo-carrousel-points { display: flex; gap: 0.6rem; }
.albireo-carrousel-points span {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(245, 247, 255, 0.35);
	cursor: pointer;
}
.albireo-carrousel-points span.est-actif { background: #fff; }

/* ==========================================================================
   9. Formulaire WPForms — habillage cosmique
   ========================================================================== */
.albireo-formulaire .wpforms-field input,
.albireo-formulaire .wpforms-field textarea,
.albireo-formulaire input[type="text"],
.albireo-formulaire input[type="email"],
.albireo-formulaire input[type="tel"],
.albireo-formulaire textarea {
	background: transparent !important;
	border: 1px solid rgba(245, 247, 255, 0.55) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--blanc) !important;
	font: 300 1.15rem var(--wp--preset--font-family--corps) !important;
	padding: 0.9em 1em !important;
}
.albireo-formulaire ::placeholder { color: rgba(245, 247, 255, 0.75); }
.albireo-formulaire .wpforms-submit,
.albireo-formulaire button[type="submit"] {
	border-radius: 999px !important;
	border: 1px solid rgba(190, 215, 255, 0.55) !important;
	background: linear-gradient(135deg, rgba(40,60,110,0.55), rgba(8,12,30,0.9)) !important;
	color: #fff !important;
	padding: 0.9em 2.6em !important;
	box-shadow: 0 0 18px rgba(120, 170, 255, 0.35);
}

/* ==========================================================================
   10. Divers
   ========================================================================== */
.wp-site-blocks { overflow-x: clip; }
::selection { background: rgba(140, 190, 255, 0.4); }

/* Navigation mobile : panneau latéral fidèle à la maquette
   (≈ ⅔ de l'écran à droite, dégradé violet → bleu → pêche,
   filigrane étoile, logo en haut, liens soulignés centrés,
   bouton de fermeture en chevron sur le bord gauche) */
@media (max-width: 781px) {

	/* Le panneau lui-même */
	.wp-block-navigation__responsive-container.is-menu-open {
		left: auto;
		right: 0;
		width: min(78vw, 340px);
		padding: 0;
		overflow: hidden;
		background: var(--wp--preset--gradient--nav-mobile);
		/* ombre portée + assombrissement du reste de la page */
		box-shadow: -10px 0 45px rgba(0, 0, 0, 0.55), 0 0 0 100vmax rgba(3, 4, 12, 0.45);
		animation: albireo-glisse 0.35s ease;
	}
	@keyframes albireo-glisse {
		from { transform: translateX(100%); }
		to   { transform: none; }
	}

	/* Filigrane : grande étoile Albireo translucide */
	.wp-block-navigation__responsive-container.is-menu-open::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' d='M50 0C54 33 67 46 100 50 67 54 54 67 50 100 46 67 33 54 0 50 33 46 46 33 50 0Z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: 130% 38%;
		background-size: 175% auto;
		opacity: 0.16;
	}

	/* Logo « ALBIREO / DESIGN » en haut du panneau */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		position: relative;
		padding-top: 6.5rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
		content: "\039B" "LBIREO";
		position: absolute;
		top: 2.2rem;
		left: 0;
		right: 0;
		text-align: center;
		font-family: var(--wp--preset--font-family--titres);
		font-weight: 200;
		font-size: 1.8rem;
		letter-spacing: 0.28em;
		color: #fff;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::after {
		content: "DESIGN";
		position: absolute;
		top: 4.6rem;
		left: 0;
		right: 0;
		text-align: center;
		font-family: var(--wp--preset--font-family--titres);
		font-size: 0.72rem;
		letter-spacing: 0.4em;
		color: rgba(255, 255, 255, 0.85);
	}

	/* Liens : colonne CENTRÉE sous le logo « ALBIREO DESIGN », soulignés, espacés */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 2.4rem;
		text-align: center;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: auto;
		margin: 0 auto;
		justify-content: center;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		font-size: 1.15rem;
		text-transform: none;
		letter-spacing: 0.02em;
		text-decoration: underline;
		text-underline-offset: 7px;
		text-decoration-thickness: 1px;
		color: #fff;
	}

	/* Bouton de fermeture : chevron sombre accroché au bord gauche */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 1.6rem;
		left: 0;
		right: auto;
		background: #131C42;
		border-radius: 0 10px 10px 0;
		padding: 0.55rem 0.95rem;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		display: none;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
		content: "\203A"; /* › */
		color: #fff;
		font-size: 1.7rem;
		line-height: 1;
		display: block;
	}

	/* Icône hamburger : blanche, bien visible sur le header */
	.wp-block-navigation__responsive-container-open {
		color: #fff;
	}
}

/* Accessibilité : réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}