/*
 * NITO Gelato : compléments CSS.
 * Uniquement ce que theme.json et les blocs natifs ne savent pas faire.
 */

/* Logo texte provisoire */
.nito-logo { color: var(--wp--preset--color--primary); }
.nito-logo p { margin: 0; color: inherit; line-height: 1; }
.nito-logo__name { font-size: clamp(2rem, 1.814rem + 0.762vw, 2.5rem); font-weight: 900; line-height: 0.9 !important; letter-spacing: -0.02em; }
.nito-logo__name a { color: inherit; text-decoration: none; }
.nito-logo__tagline { font-size: clamp(0.4rem, 0.363rem + 0.152vw, 0.5rem); font-weight: 700; letter-spacing: 0.3em; white-space: nowrap; }
.nito-footer .nito-logo { color: var(--wp--preset--color--tertiary); align-items: flex-start; }

/* Bouton taille Medium (header, footer) */
.wp-block-button.is-size-medium .wp-block-button__link { padding: 1rem 1.5rem; font-size: 0.875rem; }

/* Bouton contour : la bordure s'ajoute à la hauteur, comme dans Figma */
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--tertiary); }
.wp-block-button.is-style-light .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--primary); }
.wp-block-button.is-style-secondary .wp-block-button__link:hover { background: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--base); }

/* Eyebrows en pastille */
p[class*="is-style-eyebrow-"] { display: inline-block; width: fit-content; }

/* Header */
.nito-header .wp-block-navigation { flex: 0 1 auto; }
.nito-header__cta { flex-shrink: 0; }

/* Menu mobile : burger à droite du bouton, et overlay jusqu'à 1099 px */
@media (max-width: 1099px) {
	.nito-header .wp-block-navigation { order: 3; }
	.nito-header .nito-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.nito-header .nito-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.nito-nav .wp-block-navigation__responsive-container-open svg,
.nito-nav .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }
.nito-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem 1.25rem; }
.nito-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 1.25rem; }
.nito-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.125rem; }
.nito-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--dm-sans); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1rem;
}

/* Sous-menus desktop (Figma « M1 / Sous-menu ») */
@media (min-width: 1100px) {
	.nito-nav .wp-block-navigation__submenu-container {
		min-width: 300px !important;
		padding: 12px !important;
		gap: 4px;
		margin-top: 12px;
		background: var(--wp--preset--color--base) !important;
		border: 1px solid var(--wp--preset--color--tertiary) !important;
		border-radius: 16px;
		box-shadow: var(--wp--preset--shadow--menu);
	}
	.nito-nav .wp-block-navigation__submenu-container::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
	.nito-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		font-family: var(--wp--preset--font-family--dm-sans); font-size: 1rem; font-weight: 400; line-height: 1.6;
		letter-spacing: 0; text-transform: none; width: 100%;
	}
	.nito-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 12px 16px !important; border-radius: 10px; width: 100%; }
	.nito-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.nito-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast); }
}

/* Hero accueil : 640 px en mobile, 820 px en desktop */
.nito-hero { min-height: clamp(640px, 56.94vw, 820px) !important; }

/* Footer */
.nito-footer a { text-decoration: none; }
.nito-footer a:hover { text-decoration: underline; }
.nito-footer__title {
	font-family: var(--wp--preset--font-family--montserrat); font-size: 0.875rem; font-weight: 700;
	line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase;
}
.nito-footer__sep { opacity: 0.3; height: 1px; border: 0; width: 100%; max-width: none !important; }
.nito-footer__social .wp-social-link { font-size: 22px; }
.nito-footer__social .wp-social-link a { padding: 0; gap: 10px; }
.nito-footer__social .wp-block-social-link-label { font-family: var(--wp--preset--font-family--dm-sans); font-size: 1rem; line-height: 1.6; }
.nito-footer__star { font-size: 1.25rem; margin-right: 6px; }

/* Header : marges latérales alignées sur le conteneur 1200 px */
.nito-header {
	padding-left: max(var(--wp--style--root--padding-left), calc((100% - 1200px) / 2)) !important;
	padding-right: max(var(--wp--style--root--padding-right), calc((100% - 1200px) / 2)) !important;
}

/* Pas d'espace entre header, contenu et footer */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Hero : le titre prend la plus grande taille qui laisse tenir « MONTPELLIER » sur une ligne
   (13,2 % de la largeur du conteneur), plafonnée à 80 px comme dans la maquette desktop. */
.nito-hero .wp-block-cover__inner-container { container-type: inline-size; }
.nito-hero h1 { font-size: min(5rem, 13.2cqi) !important; }
@media (max-width: 781px) {
	.nito-hero h1 { line-height: 0.9; letter-spacing: -0.02em; }
}

/* ============ Sections de l'accueil ============ */

/* Titres de section centrés */
.nito-section-title { text-align: center; }
.nito-section-title > * { margin-left: auto; margin-right: auto; }

/* Cartes */
.nito-card { border-radius: 32px; padding: 32px; }
.nito-card-xl { border-radius: 32px; padding: clamp(28px, 22px + 1.6vw, 48px); height: 100%; box-sizing: border-box; }
.nito-card p, .nito-card h3 { margin: 0; }

/* Concept */
.nito-pseudo { font-family: var(--wp--preset--font-family--montserrat); font-weight: 800; font-size: var(--wp--preset--font-size--title-m); line-height: 1.1; text-transform: uppercase; color: var(--wp--preset--color--primary); transform: rotate(-6deg); transform-origin: left center; margin-top: 48px !important; margin-bottom: 8px !important; }
.nito-pseudo a { color: inherit; text-decoration: none; }
.nito-duo { gap: 16px !important; }
.nito-duo .wp-block-image { margin: 0; }
.nito-duo img { width: 100%; height: auto; }

/* Étapes : 4 colonnes en desktop, 2 en dessous de 1024 px */
.nito-step__num { font-family: var(--wp--preset--font-family--montserrat); font-weight: 900; font-size: var(--wp--preset--font-size--title-xl); line-height: 0.95; letter-spacing: -0.01em; color: var(--wp--preset--color--accent-dark); }
.nito-steps > .nito-step { height: 100%; box-sizing: border-box; }
@media (max-width: 1023px) {
	.nito-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	.nito-step { padding: 20px; border-radius: 24px; }
	.nito-step .wp-block-heading { font-size: 1.25rem !important; }
	.nito-step p:last-child { font-size: 0.875rem; line-height: 1.5; }
	.nito-step__num { font-size: 2.75rem; }
}

/* Carrousel « Nos gammes » */
.nito-slider-head { width: 100%; }
.nito-slider-nav { display: flex; gap: 12px; }
.nito-slider-nav button {
	width: 56px; height: 56px; border-radius: 999px; border: 2px solid var(--wp--preset--color--primary);
	background: transparent; color: var(--wp--preset--color--primary); display: grid; place-items: center; cursor: pointer; padding: 0;
	transition: background-color .2s, color .2s, opacity .2s;
}
.nito-slider-nav button:hover:not(:disabled) { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--tertiary); }
.nito-slider-nav button:disabled { opacity: .35; cursor: default; }
.nito-slider-nav button:focus-visible { outline: 2px solid var(--wp--preset--color--accent-dark); outline-offset: 3px; }
.nito-slider {
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
	margin-right: calc(50% - 50vw); padding-right: max(var(--wp--style--root--padding-right), calc((100vw - 1200px) / 2));
	scroll-padding-left: 0;
}
.nito-slider::-webkit-scrollbar { display: none; }
.nito-slide { flex: 0 0 clamp(260px, 220px + 8vw, 340px); scroll-snap-align: start; }
.nito-slide .wp-block-image { margin: 0; width: 100%; }
.nito-slide img { width: 100%; height: auto; }
.nito-slide h3, .nito-slide p { margin: 0; }
.nito-slide h3 a { color: inherit; text-decoration: none; }
.nito-slide h3 a:hover { text-decoration: underline; }
@media (max-width: 781px) { .nito-slider-nav { display: none; } }

/* Bandeau défilant */
.nito-marquee { overflow: hidden; padding-block: clamp(40px, 20px + 6vw, 110px); }
.nito-marquee__inner { transform: rotate(-4deg); width: 120%; margin-left: -10%; display: flex; flex-direction: column; gap: clamp(4px, 0.5vw, 10px); }
.nito-marquee__line {
	display: flex; width: max-content; margin: 0; white-space: nowrap;
	font-family: var(--wp--preset--font-family--montserrat); font-weight: 900; line-height: 1.1;
	font-size: clamp(2.5rem, 1.3rem + 5vw, 6rem); color: var(--wp--preset--color--primary);
	animation: nito-marquee 60s linear infinite;
}
.nito-marquee__line span { padding-right: 0.3em; }
.nito-marquee__line--outline { color: transparent; -webkit-text-stroke: 1.5px var(--wp--preset--color--primary); animation-direction: reverse; animation-duration: 45s; }
@keyframes nito-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nito-marquee__line { animation: none; } }

/* Merch */
.nito-merch__img { width: min(420px, 100%); margin: 0 auto; }
.nito-merch__img img { width: 100%; height: auto; }
.nito-merch__title { max-width: 900px; }

/* Événements : liste avec pastilles « check » */
.nito-checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.nito-checklist li { position: relative; padding-left: 36px; line-height: 1.5; }
.nito-checklist li::before {
	content: ""; position: absolute; left: 0; top: calc(0.75em - 12px); width: 24px; height: 24px; border-radius: 999px; background-color: var(--wp--preset--color--secondary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%232F3420' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 24px; background-repeat: no-repeat;
}
.nito-checklist a { color: inherit; text-decoration: none; }
.nito-checklist a:hover { text-decoration: underline; }
.nito-evenements .wp-block-image img, .nito-defi .wp-block-image img { width: 100%; height: auto; }
.nito-evenements .wp-block-image, .nito-defi .wp-block-image { margin: 0; }

/* Icônes en pastille (adresse, horaires) */
.nito-icon { width: 64px; height: 64px; border-radius: 999px; background: var(--wp--preset--color--secondary); position: relative; margin: 0; }
.nito-icon::after { content: ""; position: absolute; inset: 18px; background-color: var(--wp--preset--color--primary-dark); -webkit-mask: var(--nito-icon) center / contain no-repeat; mask: var(--nito-icon) center / contain no-repeat; }
.nito-icon--pin { --nito-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9.5' r='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.nito-icon--clock { --nito-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.nito-label { font-family: var(--wp--preset--font-family--montserrat); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; margin: 0; }
.nito-hours-card .nito-label { color: var(--wp--preset--color--primary); }
.nito-address p, .nito-address h3 { margin: 0; }
.nito-address a:not(.wp-block-button__link) { color: inherit; text-decoration: none; }
.nito-hours { width: 100%; }
.nito-hours__row { border-bottom: 1.5px solid var(--wp--preset--color--tertiary); padding-bottom: 10px; width: 100%; }
.nito-hours__row p { margin: 0; }
.nito-hours__time { font-weight: 700; font-size: 1.125rem; line-height: 1.4; color: var(--wp--preset--color--primary); }
.nito-horaires-adresse > .wp-block-column > .wp-block-group { height: 100%; }

/* Carte Google */
.nito-map { border-radius: 32px; overflow: hidden; background: var(--wp--preset--color--secondary); height: clamp(280px, 220px + 14vw, 420px); }
.nito-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Avis Google */
.nito-avis__title { max-width: 760px; }
.nito-avis__note { align-items: flex-end !important; text-align: right; }
.nito-avis__note p { margin: 0; }
.nito-rating { font-family: var(--wp--preset--font-family--montserrat); font-weight: 900; font-size: var(--wp--preset--font-size--title-xl); line-height: 0.95; color: var(--wp--preset--color--primary); }
.nito-stars { color: var(--wp--preset--color--accent); letter-spacing: 2px; font-size: 1.25rem; }
.nito-review { border-radius: 24px; padding: 32px; height: 100%; box-sizing: border-box; }
.nito-review p { margin: 0; }
.nito-avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--wp--preset--color--secondary); flex: 0 0 40px; }
@media (max-width: 781px) {
	.nito-reviews { grid-template-columns: 1fr !important; }
	.nito-avis__note { align-items: flex-start !important; text-align: left; }
}

/* FAQ en accordéon (bloc Détails natif) */
.nito-faq-list > * + * { margin-top: 0; }
.nito-faq { border: 1.5px solid var(--wp--preset--color--tertiary); border-radius: 24px; background: var(--wp--preset--color--base); padding: 28px 32px; transition: background-color .2s; }
.nito-faq[open] { background: var(--wp--preset--color--base-2); }
.nito-faq summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
	font-family: var(--wp--preset--font-family--montserrat); font-weight: 800; font-size: var(--wp--preset--font-size--title-s); line-height: 1.2; color: var(--wp--preset--color--primary);
}
.nito-faq summary::-webkit-details-marker { display: none; }
.nito-faq summary::after {
	content: "+"; flex: 0 0 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
	background: var(--wp--preset--color--tertiary); color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--dm-sans); font-weight: 400; font-size: 1.5rem;
}
.nito-faq[open] summary::after { content: "−"; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--tertiary); }
.nito-faq summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent-dark); outline-offset: 4px; border-radius: 8px; }
.nito-faq > p { margin: 16px 0 0; }
@media (max-width: 781px) { .nito-faq { padding: 20px; } }

/* Colonnes : largeur fixe de la maquette seulement en desktop */
@media (max-width: 781px) {
	.nito-evenements .wp-block-column, .nito-defi .wp-block-column, .nito-faq-section .wp-block-column { flex-basis: 100% !important; }
}

/* Carrousel : le conteneur ne doit pas s'élargir à la taille des cartes */
.nito-slider-wrap { display: block !important; min-width: 0; }
.nito-slider-wrap > .nito-slider { margin: var(--wp--preset--spacing--title-gap) calc(50% - 50vw) 0 0 !important; min-width: 0; max-width: none !important; }