/*
Theme Name: adne-v1
Theme URI: https://www.adnenseignes.com
Description: Thème créé spécifiquement pour ADN Enseignes.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
Author: Paul Argoud
Author URI: https://paul.argoud.net
Colors: #E11017
*/

/* Montserrat variable (graisses 500 à 700), sous-ensemble latin. Licence : fonts/OFL.txt */
@font-face
{
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('fonts/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root
{
	--adne-rouge: #e11017;
	--adne-bleu: #00163c;
	--adne-titres: 'Montserrat', Arial, sans-serif;
}

*
{
	margin: 0;
	padding: 0;
	border: 0;
}

a { text-decoration: none; }

/* Titres */

h1, h2, h3, h4, h5, h6
{
	font-family: var(--adne-titres);
	font-weight: 500;
}

h1
{
	color: var(--adne-bleu);
	font-size: 3.4em;
	line-height: 1.4em;
	margin-bottom: .3em;
	text-align: left;
}

h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: 1rem; }

/* Structure */

body
{
	background: #3f080a url('images/header-background.avif') fixed;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	font-family: Arial, Roboto, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 62.5%; /* 1em = 10px */
	text-align: center;
}

#wrap
{
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1190px;
	padding: 1.2em;
	text-align: center;
	width: 100%;
}

/* En-tête */

body > header
{
	border-top: 5px solid var(--adne-rouge);
	box-sizing: border-box;
	font-family: var(--adne-titres);
	font-size: 4rem;
	font-weight: 500;
}

body > header > #wrap
{
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 1rem;
}

body > header img
{
	display: block;
	height: 8rem;
	width: auto;
}

/* Menu principal (menu natif WordPress) */

nav.menu-principal
{
	font-size: 1rem;
	position: relative;
}

#menu-principal
{
	background-color: #000;
	display: flex;
	list-style: none;
}

#menu-principal li
{
	list-style: none;
	position: relative;
}

#menu-principal a
{
	color: #fff;
	display: block;
	font-family: var(--adne-titres);
	font-size: 18px;
	font-weight: 500;
	line-height: 40px;
	padding: 0 10px;
	text-align: left;
	text-transform: uppercase;
	transition: color .2s;
}

#menu-principal li:hover > a,
#menu-principal li:focus-within > a
{
	color: var(--adne-rouge);
}

/* « Accueil » : icône maison (même tracé que Dashicons), texte conservé pour les lecteurs d'écran */
#menu-principal .menu-accueil > a
{
	font-size: 0;
	width: 18px;
}

#menu-principal .menu-accueil > a::before,
#menu-principal .menu-item-has-children > a::after
{
	background-color: currentColor;
	content: "";
	display: inline-block;
	vertical-align: middle;
}

#menu-principal .menu-accueil > a::before
{
	height: 18px;
	width: 18px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16 8.5l1.53 1.53-1.06 1.06L10 4.62l-6.47 6.47-1.06-1.06L10 2.5l4 4v-2h2v4zm-6-2.46l6 5.99V18H4v-5.97zM12 17v-5H8v5h4z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16 8.5l1.53 1.53-1.06 1.06L10 4.62l-6.47 6.47-1.06-1.06L10 2.5l4 4v-2h2v4zm-6-2.46l6 5.99V18H4v-5.97zM12 17v-5H8v5h4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Flèche des entrées à sous-menu */
#menu-principal .menu-item-has-children > a::after
{
	height: 1em;
	margin-left: 4px;
	transition: transform .2s;
	width: 1em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15 8l-4.03 6L7 8h8z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15 8l-4.03 6L7 8h8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#menu-principal .menu-item-has-children:hover > a::after,
#menu-principal .menu-item-has-children:focus-within > a::after
{
	transform: rotate(180deg);
}

/* Sous-menus : apparition en fondu au survol ou au clavier */
#menu-principal .sub-menu
{
	background-color: #000;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 100%;
	transform: translateY(10px);
	transition: opacity .2s, transform .2s, visibility .2s;
	visibility: hidden;
	width: 250px;
	z-index: 999;
}

#menu-principal li:hover > .sub-menu,
#menu-principal li:focus-within > .sub-menu
{
	opacity: 1;
	transform: none;
	visibility: visible;
}

#menu-principal .sub-menu a
{
	font-size: 14px;
	line-height: 35px;
	text-transform: none;
}

/* Bouton du menu mobile (burger, croix une fois ouvert) */
.menu-bouton
{
	background-color: #000;
	border-radius: 2px;
	cursor: pointer;
	display: none;
	height: 40px;
	width: 52px;
}

.menu-bouton span
{
	background-color: #ddd;
	display: block;
	font-size: 0;
	height: 19px;
	margin: 0 auto;
	width: 26px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 19'%3E%3Cpath d='M0 0h26v3H0zm0 8h26v3H0zm0 8h26v3H0z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 19'%3E%3Cpath d='M0 0h26v3H0zm0 8h26v3H0zm0 8h26v3H0z'/%3E%3C/svg%3E") no-repeat center / contain;
}

nav.ouvert .menu-bouton span
{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 19'%3E%3Cpath d='M5.4 0.4l15.2 15.2-2.1 2.1L3.3 2.5zm15.2 2.1L5.4 17.7l-2.1-2.1L18.5 0.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 19'%3E%3Cpath d='M5.4 0.4l15.2 15.2-2.1 2.1L3.3 2.5zm15.2 2.1L5.4 17.7l-2.1-2.1L18.5 0.4z'/%3E%3C/svg%3E");
}

@media (max-width: 768px)
{
	.menu-bouton { display: block; }

	#menu-principal
	{
		background-color: #222;
		display: none;
		flex-direction: column;
		min-width: 230px;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 999;
	}

	nav.ouvert #menu-principal { display: flex; }

	#menu-principal a { font-size: 14px; }

	#menu-principal .menu-accueil > a { font-size: 0; width: auto; }

	#menu-principal .menu-item-has-children > a::after { display: none; }

	/* Sur mobile, les sous-menus sont toujours dépliés */
	#menu-principal .sub-menu
	{
		background-color: #222;
		opacity: 1;
		padding-left: 15px;
		position: static;
		transform: none;
		visibility: visible;
		width: auto;
	}
}

body.page > #wrap { background-color: rgba(255, 255, 255, .9); }

/* Titre principal de l'accueil, sur le fond de la page */
body.home h1.accueil-titre
{
	color: #fff;
	font-size: 2.25rem;
	line-height: 1.3;
	margin: 1rem auto 1.5rem;
	max-width: 1190px;
	padding: 0 1.2rem;
	text-align: center;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

/* Fil d'Ariane des pages de villes */
nav.fil-ariane
{
	font-size: 1.1rem;
	margin-bottom: 1rem;
	text-align: left;
}

nav.fil-ariane a { color: var(--adne-rouge); }
body.home > #wrap { background-color: transparent; }

/* Pages */

body.page h1
{
	color: var(--adne-rouge);
	font-size: 2.5rem;
	font-weight: 700;
}

body.page article > h2
{
	color: var(--adne-rouge);
	font-size: 2.25rem;
	margin: 2rem 0 1rem;
	text-align: left;
}

body.page article > p,
body.page article > ul
{
	font-size: 1.5rem;
	line-height: 2.25rem;
	text-align: justify;
}

body.page article > p { margin: 2rem 0; }
body.page article > ul { margin-left: 3rem; }
body.page article a:not(.elementor-button) { color: var(--adne-rouge); }

/* Page 404 */

body.error404 main { background-color: rgba(255, 255, 255, .9); }

.erreur-404
{
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1190px;
	padding: 2rem 1.2em;
	text-align: left;
}

.erreur-404 h1
{
	color: var(--adne-rouge);
	font-size: 2.5rem;
	font-weight: 700;
}

.erreur-404 p,
.erreur-404 ul
{
	font-size: 1.5rem;
	line-height: 2.25rem;
	margin: 1rem 0;
}

.erreur-404 ul { margin-left: 3rem; }
.erreur-404 a { color: var(--adne-rouge); }

body.privacy-policy h2 { text-align: left; }

body.privacy-policy p
{
	font-size: 1.15rem;
	line-height: 1.75rem;
	margin: 2rem 0;
	text-align: left;
}

/* Section Contact */

body > section#contact
{
	background-color: #000;
	border-top: 5px solid var(--adne-rouge);
	margin-top: 6rem;
	padding: .75rem 0;
}

body > section#contact h2
{
	color: var(--adne-rouge);
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin: 3.25rem 0 .3em;
	text-align: left;
}

body > section#contact h2 span
{
	display: block;
	font-size: 2rem;
}

body > section#contact .wpforms-field-label,
body > section#contact label.wpforms-field-label-inline
{
	color: #fff;
	text-align: left;
}

body > section#contact label.wpforms-field-label-inline { text-align: justify; }
body > section#contact label.wpforms-field-label-inline a { color: var(--adne-rouge); }

body > section#contact textarea
{
	min-height: 7rem;
	resize: vertical;
}

div.wpforms-container-full input[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active)
{
	background-color: var(--adne-rouge) !important;
	border-radius: 0;
}

div.wpforms-container-full input[type="submit"]:hover,
div.wpforms-container-full input[type="submit"]:active,
div.wpforms-container-full button[type="submit"]:hover,
div.wpforms-container-full button[type="submit"]:active,
div.wpforms-container-full .wpforms-page-button:hover,
div.wpforms-container-full .wpforms-page-button:active
{
	background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), var(--adne-rouge) !important;
}

/* Pied de page */

body > footer
{
	background-color: #fff;
	border-top: 1px solid var(--adne-bleu);
	color: #000;
	padding-top: 1.2em;
}

body > footer a { color: var(--adne-rouge); }

body > footer p
{
	margin: 1rem 0;
	text-align: justify;
}

body > footer #wrap
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

body > footer section
{
	font-size: 1.1rem;
	line-height: 1.5rem;
	text-align: left;
}

body > footer section#societe { width: calc(100% * 4 / 6 - 2rem); }
body > footer section#societe p:first-child { margin-top: 0; }
body > footer #wrap > div { width: calc(100% * 2 / 6 - 2rem); }

body > footer section#societe img,
body > footer #wrap > div img
{
	height: 5rem;
	max-width: 100%;
	width: auto;
}

body > footer section#coordonnees span.ligne { display: block; }

body > footer section#reseaux
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding-top: 1rem;
}

body > footer section#reseaux a
{
	background: no-repeat center / contain;
	display: block;
	height: 4rem;
	overflow: hidden;
	text-indent: -9999px;
	width: 4rem;
}

body > footer section#reseaux a.facebook { background-image: url('images/reseaux-sociaux/facebook.png'); }
body > footer section#reseaux a.instagram { background-image: url('images/reseaux-sociaux/instagram.png'); }
body > footer section#reseaux a.linkedin { background-image: url('images/reseaux-sociaux/linkedin.png'); }

body > footer section#copyright
{
	background-color: #000;
	color: var(--adne-rouge);
	width: 100%;
}

body > footer section#copyright a { color: var(--adne-rouge); }
body > footer section#copyright a:hover { color: #fff; }

/* Mobile et tablette */

@media (max-width: 940px)
{
	body > footer section#societe,
	body > footer #wrap > div
	{
		width: 100%;
	}

	body > footer p { text-align: left; }

	body > footer #wrap > div
	{
		border-top: 1px solid #ddd;
		margin-top: 1rem;
		padding-top: 1rem;
	}

	body > footer section#coordonnees { overflow-wrap: anywhere; }

	body > footer section#copyright #wrap
	{
		align-items: center;
		flex-direction: column;
		gap: .5rem;
	}
}

/* Mobile : texte aligné à gauche (le justifié crée de grands blancs sur écran étroit) */

@media (max-width: 767px)
{
	body.page article > p,
	body.page article > ul,
	.elementor-widget-text-editor,
	.elementor-widget-text-editor p,
	.elementor-widget-text-editor .elementor-widget-container
	{
		text-align: left !important;
	}
}