/*
Theme Name: OTTO Vitrine
Theme URI: https://otto.fr/
Author: CMS SAS
Author URI: https://otto.fr/
Description: Thème bloc (FSE) de la page vitrine OTTO. Chaque section est un bloc sur mesure dont tous les textes, images, pictogrammes, liens, la vidéo et l'ordre se modifient depuis l'éditeur, sans toucher au code. Police Barlow auto-hébergée, aucune ressource tierce.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: otto-vitrine
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, custom-menu, editor-style, translation-ready
*/

/*
 * Repères partagés par l'en-tête, le pied et les blocs.
 * Shared tokens for the header, the footer and the blocks.
 *
 * Les valeurs de design vivent dans theme.json ; on ne reprend ici que
 * celles dont le CSS global a besoin pour calculer des hauteurs.
 * Design values live in theme.json; only those the global CSS needs in
 * order to compute heights are mirrored here.
 */
:root {
	--otto-logo-hauteur: 84px;
	--otto-logo-hauteur-mobile: 56px;
	--otto-nav-padding-vertical: 22px;
	--otto-marge-laterale: clamp(20px, 4vw, 48px);
	--otto-conteneur: 1240px;
	/* Hauteur occupée par la barre de navigation, réservée dans le hero. */
	/* Height taken by the navigation bar, reserved inside the hero. */
	--otto-nav-hauteur: calc(var(--otto-logo-hauteur) + 2 * var(--otto-nav-padding-vertical));
	/* Décalage des ancres : 0 tant que l'en-tête n'est pas fixe, comme la maquette. */
	/* Anchor offset: 0 as long as the header is not fixed, as in the mockup. */
	--otto-ancre-decalage: 0px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Toute section ancrée se place sous l'en-tête quand on y saute. */
/* Any anchored section lands below the header when jumped to. */
[id] {
	scroll-margin-top: var(--otto-ancre-decalage);
}

/* ------------------------------------------------------------------
 * En-tête
 * Header
 * ------------------------------------------------------------------ */

.otto-entete {
	width: 100%;
	color: var(--wp--preset--color--blanc);
}

/*
 * Page d'accueil : l'en-tête se superpose au hero, sans l'écarter.
 * Le hero réserve `--otto-nav-hauteur` en haut pour que le titre
 * garde la même position que dans la maquette.
 *
 * Front page: the header overlays the hero without pushing it down.
 * The hero reserves `--otto-nav-hauteur` at the top so the title keeps
 * the position it has in the mockup.
 */
.otto-accueil .otto-entete {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	background: transparent;
}

.otto-accueil {
	position: relative;
}

/*
 * Autres pages : en-tête plein, dans le flux. Une seule partie de modèle
 * sert les deux cas ; seule la classe du corps de page les distingue.
 *
 * Other pages: solid header, in the flow. A single template part serves
 * both cases; only the body class tells them apart.
 */
body:not(.otto-accueil) .otto-entete {
	position: relative;
	background: var(--wp--preset--color--indigo);
}

/*
 * Le logo reste à gauche, le menu est poussé à droite. La maquette obtient
 * ce résultat avec un espaceur `flex:1` entre les deux ; `space-between`
 * fait la même chose sans élément vide dans le balisage.
 *
 * The logo stays left, the menu is pushed right. The mockup achieves this
 * with a `flex:1` spacer between the two; `space-between` does the same
 * without an empty element in the markup.
 */
.otto-entete__interieur {
	width: 100%;
	max-width: var(--otto-conteneur);
	margin: 0 auto;
	padding: var(--otto-nav-padding-vertical) var(--otto-marge-laterale);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

/* Logo du site, hauteur pilotée par la variable, blanchi sur option. */
/* Site logo, height driven by the variable, whitened on option. */
.otto-entete .wp-block-site-logo img,
.otto-pied .wp-block-site-logo img {
	height: var(--otto-logo-hauteur);
	width: auto;
	display: block;
}

.otto-logo-blanc .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------------ */

.otto-entete .wp-block-navigation,
.otto-pied .wp-block-navigation {
	font-weight: 500;
}

.otto-entete .wp-block-navigation {
	font-size: var(--wp--preset--font-size--menu);
}

.otto-entete .wp-block-navigation .wp-block-navigation__container {
	gap: 26px;
	flex-wrap: wrap;
}

/* Overlay mobile : fond indigo plein, comme demandé dans la spécification. */
/* Mobile overlay: solid indigo background, as required by the spec. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--indigo) !important;
	color: var(--wp--preset--color--blanc) !important;
	padding: clamp(24px, 6vw, 48px);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 18px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(22px, 5vw, 28px);
	font-weight: 700;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: currentColor;
}

/*
 * WordPress dessine son icône de menu avec DEUX barres. On en veut trois,
 * comme le veut l'usage. Le SVG d'origine est masqué et les barres sont
 * tracées en CSS : le trait du haut porte celui du milieu par son ombre,
 * ce qui donne trois barres avec deux pseudo-éléments.
 *
 * WordPress draws its menu icon with TWO bars. Three are wanted, as is
 * customary. The original SVG is hidden and the bars are drawn in CSS: the
 * top bar carries the middle one through its shadow, which yields three bars
 * from two pseudo-elements.
 */
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 24px;
	height: 18px;
}

.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: currentColor;
}

.wp-block-navigation__responsive-container-open::before {
	top: 0;
	box-shadow: 0 8.25px 0 currentColor;
}

.wp-block-navigation__responsive-container-open::after {
	bottom: 0;
}

/* ------------------------------------------------------------------
 * Pied de page
 * Footer
 * ------------------------------------------------------------------ */

.otto-pied {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--blanc);
	padding: 48px var(--otto-marge-laterale) 28px;
}

.otto-pied__interieur {
	max-width: var(--otto-conteneur);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.otto-pied__haut {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.otto-pied__menus {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--pied-lien);
	line-height: 2;
	color: var(--wp--preset--color--blanc-80);
}

/* Les deux menus du pied s'affichent en colonne, sans puces. */
/* Both footer menus display as a column, without bullets. */
.otto-pied__menus .wp-block-navigation .wp-block-navigation__container {
	flex-direction: column;
	gap: 0;
}

.otto-pied__copyright {
	font-size: var(--wp--preset--font-size--copyright);
	color: var(--wp--preset--color--blanc-60);
}

/* ------------------------------------------------------------------
 * Gabarit de page simple (mentions légales)
 * Plain page template (legal notice)
 * ------------------------------------------------------------------ */

.otto-page {
	padding: 72px var(--otto-marge-laterale) 96px;
}

.otto-page__contenu {
	max-width: 760px;
	margin: 0 auto;
}

.otto-page__contenu > * + * {
	margin-top: 20px;
}

.otto-page__contenu h1 {
	font-size: var(--wp--preset--font-size--titre-section);
	color: var(--wp--preset--color--indigo-fonce);
	margin-bottom: 32px;
}

.otto-page__contenu h2 {
	font-size: var(--wp--preset--font-size--accroche-m);
	color: var(--wp--preset--color--indigo-fonce);
	margin-top: 40px;
}

.otto-page__contenu a {
	text-decoration: underline;
}

.otto-page__contenu ul,
.otto-page__contenu ol {
	margin: 0;
	padding-left: 22px;
}

.otto-page__contenu li + li {
	margin-top: 8px;
}

.otto-page__contenu p,
.otto-page__contenu li {
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------ */

@media (max-width: 781px) {
	:root {
		--otto-logo-hauteur: var(--otto-logo-hauteur-mobile);
	}

}

/* ------------------------------------------------------------------
 * Répéteurs de l'éditeur
 * Editor repeaters
 *
 * Ces classes n'existent que dans l'éditeur de blocs : aucune n'est
 * produite par les render.php, donc rien n'alourdit le rendu public.
 * These classes only exist in the block editor: none is produced by the
 * render.php files, so nothing weighs on the public rendering.
 * ------------------------------------------------------------------ */

.otto-repeteur__item {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 12px;
	margin-bottom: 12px;
	background: #fff;
}

.otto-repeteur__item--cible {
	border-color: var(--wp--preset--color--indigo, #433BBE);
	border-style: dashed;
}

.otto-repeteur__entete {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
}

.otto-repeteur__poignee {
	cursor: grab;
	display: flex;
	opacity: 0.6;
}

.otto-repeteur__titre {
	flex: 1;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.otto-repeteur__corps > * + * {
	margin-top: 8px;
}