/**
 * Ajustements site-wide — Time Out Factory.
 *
 * Chargé en front + éditeur via enqueue_block_assets.
 */

/* ==========================================================
   En-tête : menu principal.
   Pas de soulignement sur les liens, effet grossissant au
   survol/focus clavier (transform: scale). Désactivé si
   prefers-reduced-motion: reduce.
   ========================================================== */

.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	display: inline-block;
	transition: transform 250ms cubic-bezier( 0.22, 1, 0.36, 1 );
	transform-origin: center;
}

.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	transform: scale( 1.15 );
	text-decoration: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content {
		transition: none;
	}
	.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content:hover,
	.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
		transform: none;
	}
}

/* ==========================================================
   Footer : listes (bloc core/list) collées à gauche.
   Par défaut WordPress applique un padding-inline-start
   (~2em) sur <ul>/<ol> pour afficher les puces à l'extérieur.
   Dans le footer, on veut le texte aligné sur le bord gauche.
   Puces conservées mais positionnées à l'intérieur du flux.
   ========================================================== */

.wp-site-blocks > footer .wp-block-list {
	padding-inline-start: 0;
	list-style-position: inside;
}

/* ==========================================================
   Footer : liens sans soulignement par défaut, soulignement
   smooth qui se déploie de gauche à droite au survol/focus
   clavier. Technique du linear-gradient en background : la
   propriété text-decoration ne s'anime pas de façon fluide
   sur tous les navigateurs, contrairement à background-size.
   #footer-telephone est exclu (déjà géré comme un bouton).
   ========================================================== */

.wp-site-blocks > footer a:not( #footer-telephone a, .wp-block-social-links a, #footer-restaurant a ) {
	text-decoration: none;
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 250ms cubic-bezier( 0.22, 1, 0.36, 1 );
}

.wp-site-blocks > footer a:not( #footer-telephone a, .wp-block-social-links a, #footer-restaurant a ):hover,
.wp-site-blocks > footer a:not( #footer-telephone a, .wp-block-social-links a, #footer-restaurant a ):focus-visible {
	background-size: 100% 1px;
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-site-blocks > footer a:not( #footer-telephone a, .wp-block-social-links a, #footer-restaurant a ) {
		transition: none;
	}
}

/* ==========================================================
   Footer : numéro de téléphone sur fond jaune biseauté.
   Même forme que les boutons TOF (polygon clip-path), pour
   créer une continuité visuelle avec les CTA du site.
   Les 8 % d'écart verticaux sont compensés par le padding.
   ========================================================== */

#footer-telephone {
	display: inline-block;
	background-color: var( --wp--preset--color--custom-jaune, #ffed00 );
	padding: 0.5em 1em;
	clip-path: polygon( 0 8%, 100% 0, 100% 100%, 0 92% );
	transition: transform 250ms cubic-bezier( 0.22, 1, 0.36, 1 );
	transform-origin: center;
}

#footer-telephone a,
#footer-telephone a:hover,
#footer-telephone a:focus {
	text-decoration: none;
}

#footer-telephone:hover,
#footer-telephone:focus-within {
	transform: scale( 1.15 );
}

@media ( prefers-reduced-motion: reduce ) {
	#footer-telephone {
		transition: none;
	}
	#footer-telephone:hover,
	#footer-telephone:focus-within {
		transform: none;
	}
}

/* ==========================================================
   FAQ (plugin Ultimate FAQ)
   - Séparateur fin noir entre chaque question.
   - Pictogramme personnalisé (meta `tof_pictogramme_id`)
     affiché avant le titre, à la place de la puce Q/A native
     (retirée dans le template override).
   ========================================================== */

.ewd-ufaq-faqs > .ewd-ufaq-faq-div {
	padding: 1.5rem 1rem;
}

.ewd-ufaq-faqs > .ewd-ufaq-faq-div {
	border-top: 1px solid #000;
}

.ewd-ufaq-faqs > .ewd-ufaq-faq-div:last-child {
	border-bottom: 1px solid #000;
}

.ewd-ufaq-faq-title .ewd-ufaq-post-margin {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
}

/* Puce Q/A native : conservée dans le DOM (le JS du plugin lit son .html()
   à chaque toggle) mais masquée visuellement — on affiche le picto à la place. */
.ewd-ufaq-faq-title .ewd-ufaq-post-margin-symbol {
	display: none;
}

.tof-faq-picto-wrap {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
}

.tof-faq-picto {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
}

.ewd-ufaq-faq-title-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Style h3 appliqué au h4 de la question sans toucher à la balise
   (font-size large + styles partagés heading du thème). */
.ewd-ufaq-faq-title-text > * {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.125;
	letter-spacing: -0.1px;
	margin: 0;
}

/* Chevron en fin de ligne — pseudo-élément sur l'ancre (dernier enfant flex).
   Rotation pilotée par aria-expanded, attribut posé par le JS du plugin. */
.ewd-ufaq-faq-title .ewd-ufaq-post-margin::after {
	content: '';
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.15em);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.ewd-ufaq-faq-title[aria-expanded='true'] .ewd-ufaq-post-margin::after {
	transform: rotate(-135deg) translateY(-0.15em);
}

@media (prefers-reduced-motion: reduce) {
	.ewd-ufaq-faq-title .ewd-ufaq-post-margin::after {
		transition: none;
	}
}

/* ==========================================================
   Images alignfull : forcer width:100% pour éviter les vides
   latéraux lorsque la largeur intrinsèque du fichier est
   inférieure au viewport (ex. frises SVG décoratives sur
   écrans > 1920 px). Par défaut WP applique max-width:100%,
   ce qui laisse l'image à sa taille intrinsèque au-delà.
   ========================================================== */

.wp-block-image.alignfull > img {
	width: 100%;
	height: auto;
}

/* ==========================================================
   Frises SVG décoratives (« frise-* » dans la médiathèque) :
   forcer un débord pleine largeur du viewport, peu importe le
   parent (en-tête, contenu de page, footer…).
   En-tête : le header pattern de twentytwentyfive imbrique une
   Group constrained qui hérite du root-padding du thème
   (var:preset|spacing|50 défini dans theme.json) ; sans cet
   override, la frise s'inscrit dans la zone de contenu et laisse
   des bandes blanches à gauche/droite.
   Contenu de page : même mécanique dès qu'un bloc parent (Group,
   Cover…) n'est pas explicitement alignfull.
   Ciblage par préfixe d'URL (`frise-`) pour couvrir toutes les
   frises actuelles (`frise-toit-usine`, `frise-toit-usine-miroir`,
   `frise-damier`) et toute future frise ajoutée à la médiathèque,
   tout en restant stable face aux IDs d'attachments
   (`wp-image-NNN` n'est pas garanti).
   ========================================================== */

.wp-block-image:has( > img[ src*="frise-" ] ) {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc( 50% - 50vw );
}

.wp-block-image > img[ src*="frise-" ] {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* ==========================================================
   Parallaxe #la-carte → passe sous #reservation.
   Animation pilotée par la position du bloc dans le viewport
   (CSS scroll-driven animations). Aucune JS, aucune librairie.
   #reservation est empilé au-dessus grâce à z-index :
   la partie basse de l'illustration « la carte » est masquée
   par la frise + le fond jaune de #reservation en fin de course.
   ========================================================== */

#la-carte {
	position: relative;
	z-index: 0;
}

#reservation {
	position: relative;
	z-index: 1;
}

@supports ( animation-timeline: view() ) {
	#la-carte {
		animation: tof-carte-parallax linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
		will-change: transform;
	}

	/* Mobile : déclencher l'effet un peu plus tard (le bloc doit
	   être davantage entré dans le viewport avant que la
	   translation commence). */
	@media ( max-width: 899px ) {
		#la-carte {
			animation-range: cover 25% cover 100%;
		}
	}

	@keyframes tof-carte-parallax {
		from { transform: translateY( -80px ); }
		to   { transform: translateY( 260px ); }
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#la-carte {
		animation: none;
		transform: none;
	}
}

/* ==========================================================
   Footer en mobile (< 900 px) : tous les éléments centrés.
   - text-align: center sur le root du footer pour aligner
     l'inline (texte, images inline, listes…).
   - justify-content + align-items: center sur les conteneurs
     flex courants du footer (Group, Columns, Navigation, Social
     links) pour fonctionner que leur direction reste row ou
     bascule en column (stack mobile WordPress < 781 px).
   - .wp-block-list : text-align center (la règle desktop
     padding-inline-start:0 + list-style-position:inside reste
     active, les puces se centrent en ligne avec le texte).
   ========================================================== */

@media ( max-width: 899px ) {
	/* Suppression du scroll horizontal en mobile, peu importe le bloc
	   responsable du débord (asset décoratif, image alignfull rendue dans
	   un parent contraint, etc.). `clip` est préféré à `hidden` car il ne
	   crée pas de containing block pour les éléments fixed/sticky — la
	   barre de notification et le menu sticky continuent de fonctionner
	   normalement. Variante mobile-only : sur desktop, on laisse l'overflow
	   natif (utile pour debug, et certaines frises pleine largeur).
	   `html` ciblé en plus de `body` : sur iOS Safari (et certains Chrome
	   Android), la propagation de l'overflow de body vers le viewport peut
	   échouer dès qu'un descendant transformé déborde latéralement (ex. les
	   moitiés TIME/OUT initialement en `translateX(±100vw)` sur la home).
	   Dans ce cas c'est <html> qui développe une scrollbar horizontale, que
	   body { overflow-x: clip } ne contraint pas. La règle doit donc
	   s'appliquer aux deux niveaux pour être réellement efficace. */
	html,
	body {
		overflow-x: clip;
	}

	.wp-site-blocks > footer {
		text-align: center;
	}

	.wp-site-blocks > footer .wp-block-group,
	.wp-site-blocks > footer .wp-block-columns,
	.wp-site-blocks > footer .wp-block-column,
	.wp-site-blocks > footer .wp-block-navigation,
	.wp-site-blocks > footer .wp-block-navigation__container,
	.wp-site-blocks > footer .wp-block-social-links {
		justify-content: center;
		align-items: center;
	}

	.wp-site-blocks > footer .wp-block-list {
		text-align: center;
	}

	/* #footer-restaurant : la figure du logo est rendue avec la classe
	   core `alignleft` (float: left) + display: table. Pour la centrer
	   en mobile, il faut neutraliser le float (sans quoi `margin-inline:
	   auto` est inopérant sur un élément flotté), puis appliquer le
	   centrage par marges automatiques. `display: table` (mode WP par
	   défaut sur .wp-block-image) suffit ensuite à donner une largeur
	   intrinsèque (= largeur de l'<img>) que les marges auto centrent. */
	#footer-restaurant .wp-block-image {
		float: none;
		margin-inline: auto;
	}
}

/* ==========================================================
   Périphériques tactiles (hover: none) : supprimer l'encadré
   de focus déclenché par le tap. Cible :focus ET :focus-visible
   car Safari iOS applique :focus-visible au tap sur les
   <button> (comportement spécifique iOS, alors que
   Chrome/Firefox le réservent au clavier physique).
   `(hover: none)` cible les écrans purement tactiles (mobile,
   tablette), donc l'outline reste affiché sur tout
   périphérique disposant d'une souris (desktop, laptop tactile
   avec souris). RGAA 4.1.2 : compromis acceptable pour un site
   vitrine grand public — la navigation au clavier physique sur
   mobile est marginale.
   ========================================================== */

@media ( hover: none ) {
	:focus,
	:focus-visible {
		outline: none;
	}
}

/* ==========================================================
   Utilitaire : inverser l'ordre des colonnes en mobile.
   Classe `tof-reverse-mobile` à ajouter sur un bloc
   core/columns (ou tout conteneur flex) via l'onglet
   « Avancé » → « Classe(s) CSS additionnelle(s) » de Gutenberg.
   Breakpoint aligné sur celui où core/columns stacke nativement
   en flex-direction: column (< 782 px). En passant à
   column-reverse, on conserve la mise en page native du bloc
   et on se contente d'inverser l'ordre visuel des enfants.
   En desktop, l'ordre reste inchangé.
   ========================================================== */

@media ( max-width: 781px ) {
	.tof-reverse-mobile {
		flex-direction: column-reverse;
	}
}

/* ==========================================================
   Utilitaire : hauteur automatique en mobile pour une image.
   Classe `tof-auto-height-mobile` à ajouter sur un bloc
   core/image via l'onglet « Avancé » → « Classe(s) CSS
   additionnelle(s) » de Gutenberg.
   En dessous de 900 px, la hauteur définie en back-office
   (inline style, attribut HTML `height`, aspect-ratio et
   object-fit éventuellement posés par Gutenberg) est
   neutralisée : l'image retrouve son ratio d'origine.
   En desktop, la hauteur configurée reste appliquée.
   `!important` requis pour battre les déclarations inline
   posées par le bloc core/image lorsqu'une hauteur custom est
   saisie.
   `width: 100% !important` est indispensable pour les SVG :
   beaucoup de SVG n'ont pas de dimensions intrinsèques
   exploitables (déclarés avec `width="100%"` ou sans
   width/height natifs), ce qui collapse la hauteur calculée
   à 0 lorsqu'on remet `height: auto`. Forcer width à 100 %
   du wrapper garantit que `height: auto` est résolue depuis
   le `viewBox`.
   ========================================================== */

@media ( max-width: 899px ) {
	.tof-auto-height-mobile img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: initial !important;
	}
}