/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/

/* ==========================================================================
   OYAMPI — fondations du design system (thème enfant)
   Les réglages principaux vivent dans : Options du thème The7 et
   Elementor > Réglages du site. Ce fichier porte les jetons et les compléments.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/InterVariable.woff2") format("woff2");
}

:root {
	/* Couleurs */
	--oy-navy: #0B1F3A;        /* bleu profond : titres, pied de page */
	--oy-blue: #1F5FD1;        /* bleu technologique : accent, liens, boutons */
	--oy-blue-dark: #174AA6;   /* accent au survol */
	--oy-text: #243044;        /* texte courant */
	--oy-muted: #5B6678;       /* texte secondaire */
	--oy-border: #E3E8EF;      /* filets, bordures */
	--oy-surface: #F5F7FA;     /* fond de section claire */
	--oy-white: #FFFFFF;

	/* Typographie */
	--oy-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Mise en page */
	--oy-container: 1200px;
	--oy-gutter: 24px;
	--oy-section-y: 96px;
	--oy-radius: 8px;
	--oy-radius-sm: 6px;
	--oy-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 8px 24px rgba(11, 31, 58, 0.06);
}

@media (max-width: 1024px) { :root { --oy-section-y: 64px; } }
@media (max-width: 767px)  { :root { --oy-section-y: 48px; --oy-gutter: 20px; } }

/* --- Base ---------------------------------------------------------------- */

body,
button, input, select, textarea,
.elementor-widget-text-editor {
	font-family: var(--oy-font);
}

body {
	color: var(--oy-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--oy-font);
	color: var(--oy-navy);
	letter-spacing: -0.015em;
}

a { text-underline-offset: 0.18em; }

:focus-visible {
	outline: 2px solid var(--oy-blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- En-tête : wordmark et navigation ------------------------------------ */

.masthead { border-bottom: 1px solid var(--oy-border); }

.branding > a.oyampi-wordmark,
.mobile-branding > a.oyampi-wordmark,
.oyampi-wordmark,
.oyampi-wordmark:hover,
.oyampi-wordmark:focus {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	font-family: var(--oy-font);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 44px; /* centre le texte quel que soit le mode d'affichage imposé par The7 */
	color: var(--oy-navy);
	text-decoration: none;
}

.mobile-branding .oyampi-wordmark { font-size: 20px; }

.main-nav > li > a .menu-text { letter-spacing: 0.08em; }

/* Zones tactiles : au moins 44 px sur mobile */
.dt-mobile-header .mobile-main-nav > li > a { min-height: 44px; display: flex; align-items: center; }
.dt-mobile-menu-icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

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

#bottom-bar { font-family: var(--oy-font); }
#bottom-bar .wf-float-left { display: flex; align-items: center; gap: 12px; }

.oyampi-footer-brand {
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--oy-white);
}

.oyampi-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oyampi-footer-menu li { margin: 0; }

.oyampi-footer-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.oyampi-footer-menu a:hover,
.oyampi-footer-menu a:focus { color: var(--oy-white); text-decoration: underline; }

@media (max-width: 767px) {
	#bottom-bar .wf-float-left,
	#bottom-bar .wf-float-right { float: none; width: 100%; justify-content: center; text-align: center; }
	.oyampi-footer-menu { justify-content: center; }
}

/* --- Composants réutilisables (classes à poser dans Elementor) ------------ */

/* Section : .oy-section, variantes .oy-section--surface et .oy-section--navy */
.oy-section { padding-block: var(--oy-section-y); }
.oy-section--surface { background: var(--oy-surface); }
.oy-section--navy { background: var(--oy-navy); color: #C9D3E0; }
.oy-section--navy h1, .oy-section--navy h2, .oy-section--navy h3,
.oy-section--navy .elementor-heading-title { color: var(--oy-white); }

/* Largeur de lecture confortable */
.oy-prose { max-width: 68ch; }

/* Sur-titre */
.oy-eyebrow,
.oy-eyebrow .elementor-heading-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oy-blue);
}

/* Carte */
.oy-card {
	background: var(--oy-white);
	border: 1px solid var(--oy-border);
	border-radius: var(--oy-radius);
	padding: 32px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.oy-card:hover { border-color: #C9D3E0; box-shadow: var(--oy-shadow); }

/* Bouton secondaire (contour) : classe à ajouter au widget Bouton */
.oy-btn--ghost .elementor-button {
	background: transparent;
	color: var(--oy-navy);
	box-shadow: inset 0 0 0 1px var(--oy-navy);
}
.oy-btn--ghost .elementor-button:hover,
.oy-btn--ghost .elementor-button:focus {
	background: var(--oy-navy);
	color: var(--oy-white);
}

/* Alignement vertical du wordmark avec la navigation */
.masthead .header-bar .branding { display: flex; align-items: center; align-self: stretch; }
.masthead .header-bar .branding > a.oyampi-wordmark { margin-block: auto; }