/*
Theme Name: Audition Gradignan
Theme URI: https://www.auditiongradignan.fr
Author: Audition Gradignan
Description: Thème sur-mesure pour le cabinet d'audioprothèse Audition Gradignan (Sophie Bondonny). Reprend la charte graphique historique du site (violet #91127E, Open Sans / Open Sans Condensed) sur une base moderne, légère et compatible PHP 8.3+.
Version: 1.0.8
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 7.1
Text Domain: audition-gradignan
*/

/* -------------------------------------------------
   0. Variables (charte graphique reprise du site actuel)
------------------------------------------------- */
:root {
	--ag-primary: #91127e;
	--ag-primary-dark: #730f65;
	--ag-dark: #353f47;
	--ag-bg-light: #f2f3f4;
	--ag-text: #4d4d4d;
	--ag-text-light: #666666;
	--ag-white: #ffffff;
	--ag-border: #e2e4e6;
	--ag-font-body: "Open Sans", Arial, sans-serif;
	--ag-font-heading: "Open Sans Condensed", Arial, sans-serif;
	--ag-radius: 4px;
	--ag-radius-pill: 999px;
	--ag-container: 1140px;
}

/* -------------------------------------------------
   1. Reset minimal
------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--ag-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ag-text);
	background: var(--ag-white);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ag-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--ag-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ag-font-heading);
	color: var(--ag-primary);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.6em;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.2em; }

ul, ol { padding-left: 1.3em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------------------------------------
   2. Layout utilitaire
------------------------------------------------- */
.ag-container {
	max-width: var(--ag-container);
	margin: 0 auto;
	padding: 0 20px;
}

.ag-section {
	padding: 60px 0;
}

.ag-section--light {
	background: var(--ag-bg-light);
}

.ag-section--dark {
	background: var(--ag-dark);
	color: #c7ccd1;
}

.ag-section--dark h2, .ag-section--dark h3 {
	color: var(--ag-white);
}

.ag-title-center {
	text-align: center;
	margin-bottom: 40px;
}

/* -------------------------------------------------
   3. Top bar (bandeau coordonnées)
------------------------------------------------- */
.ag-topbar {
	background: var(--ag-primary);
	color: var(--ag-white);
	font-size: 0.85rem;
}

.ag-topbar .ag-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-top: 8px;
	padding-bottom: 8px;
	gap: 8px;
}

.ag-topbar a {
	color: var(--ag-white);
}

.ag-topbar .ag-topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 18px;
}

/* -------------------------------------------------
   4. En-tête / branding / navigation
------------------------------------------------- */
.ag-header {
	background: var(--ag-white);
	border-bottom: 1px solid var(--ag-border);
}

.ag-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	gap: 16px;
}

.ag-branding {
	display: flex;
	flex-direction: column;
}

.ag-branding a {
	color: var(--ag-primary);
}

.ag-site-logo {
	margin: 0;
	line-height: 0;
}

.ag-site-logo img {
	display: block;
	max-height: 56px;
	width: auto;
}

.ag-primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ag-primary-nav li {
	position: relative;
}

.ag-primary-nav > ul > li > a {
	display: block;
	padding: 14px 16px;
	color: var(--ag-text);
	font-family: var(--ag-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.3px;
}

.ag-primary-nav > ul > li.current-menu-item > a,
.ag-primary-nav > ul > li.current-menu-ancestor > a,
.ag-primary-nav > ul > li > a:hover {
	background: var(--ag-primary);
	color: var(--ag-white);
}

.ag-primary-nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: var(--ag-white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	z-index: 50;
	padding: 6px 0;
}

.ag-primary-nav li:hover > ul,
.ag-primary-nav li:focus-within > ul {
	display: block;
}

.ag-primary-nav ul ul li a {
	padding: 10px 18px;
	text-transform: none;
	font-family: var(--ag-font-body);
	font-weight: 400;
	font-size: 0.92rem;
	color: var(--ag-text);
}

.ag-primary-nav ul ul li a:hover {
	background: var(--ag-bg-light);
	color: var(--ag-primary);
}

.ag-menu-toggle {
	display: none;
	background: var(--ag-primary);
	color: var(--ag-white);
	border: 0;
	padding: 10px 14px;
	border-radius: var(--ag-radius);
	font-size: 1rem;
	cursor: pointer;
}

/* -------------------------------------------------
   5. Boutons / CTA
------------------------------------------------- */
.ag-btn {
	display: inline-block;
	background: var(--ag-primary);
	color: var(--ag-white) !important;
	font-family: var(--ag-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 13px 32px;
	border-radius: var(--ag-radius-pill);
	border: 0;
	cursor: pointer;
}

.ag-btn:hover,
.ag-btn:focus {
	background: var(--ag-primary-dark);
	color: var(--ag-white) !important;
}

.ag-btn--outline {
	background: transparent;
	border: 2px solid var(--ag-white);
}

/* -------------------------------------------------
   6. Hero (page d'accueil)
------------------------------------------------- */
.ag-hero {
	background: linear-gradient(120deg, var(--ag-dark), var(--ag-primary));
	color: var(--ag-white);
}

.ag-hero-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
	padding: 70px 20px;
}

.ag-hero-logo {
	flex: 0 0 auto;
}

.ag-hero-logo img {
	max-width: 240px;
	width: 100%;
	height: auto;
}

.ag-hero-text {
	flex: 1 1 420px;
	max-width: 560px;
}

.ag-hero h1 {
	color: var(--ag-white);
	font-size: 2.4rem;
	margin-bottom: 0.4em;
}

.ag-hero p {
	font-size: 1.1rem;
	margin-bottom: 1.6em;
}

/* -------------------------------------------------
   7. Grille de cartes (fonctionnalités / solutions)
------------------------------------------------- */
.ag-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
}

.ag-card {
	background: var(--ag-white);
	border: 1px solid var(--ag-border);
	border-radius: var(--ag-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ag-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ag-card-body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ag-card-body h3 {
	font-size: 1.15rem;
}

.ag-card-body p {
	color: var(--ag-text-light);
	font-size: 0.95rem;
	flex: 1;
}

.ag-card-link {
	font-family: var(--ag-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85rem;
}

/* -------------------------------------------------
   8. Logos marques
------------------------------------------------- */
.ag-brands {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 36px;
}

.ag-brands img {
	max-height: 50px;
	width: auto;
	filter: grayscale(100%);
	opacity: 0.75;
	transition: 0.2s ease;
}

.ag-brands img:hover {
	filter: none;
	opacity: 1;
}

/* -------------------------------------------------
   9. FAQ (accordéon natif <details>)
------------------------------------------------- */
.ag-faq details {
	background: var(--ag-white);
	border: 1px solid var(--ag-border);
	border-radius: var(--ag-radius);
	margin-bottom: 12px;
	padding: 4px 20px;
}

.ag-faq summary {
	cursor: pointer;
	font-family: var(--ag-font-heading);
	font-weight: 700;
	color: var(--ag-primary);
	padding: 14px 0;
	list-style: none;
}

.ag-faq summary::-webkit-details-marker {
	display: none;
}

.ag-faq summary::after {
	content: "+";
	float: right;
	font-size: 1.3rem;
}

.ag-faq details[open] summary::after {
	content: "\2212";
}

.ag-faq p {
	padding-bottom: 16px;
	color: var(--ag-text-light);
}

/* -------------------------------------------------
   9bis. Accordéon et bouton d'appel à l'action
   (rendu des anciens shortcodes [ap_toggle] / [ap_call_to_action])
------------------------------------------------- */
.ag-toggle {
	background: var(--ag-white);
	border: 1px solid var(--ag-border);
	border-radius: var(--ag-radius);
	margin-bottom: 14px;
	padding: 4px 20px;
}

.ag-toggle summary {
	cursor: pointer;
	font-family: var(--ag-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ag-primary);
	padding: 14px 0;
	list-style: none;
}

.ag-toggle summary::-webkit-details-marker {
	display: none;
}

.ag-toggle summary::after {
	content: "+";
	float: right;
	font-size: 1.3rem;
}

.ag-toggle[open] summary::after {
	content: "\2212";
}

.ag-toggle-content {
	padding-bottom: 16px;
	border-top: 1px dotted var(--ag-border);
	padding-top: 14px;
}

.ag-toggle-content p:last-child {
	margin-bottom: 0;
}

.ag-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--ag-bg-light);
	border: 1px solid var(--ag-border);
	border-radius: var(--ag-radius);
	padding: 24px;
	margin: 24px 0;
}

.ag-cta-content p {
	margin: 0;
}

.ag-cta .ag-btn {
	flex-shrink: 0;
}

.ag-cta--center {
	flex-direction: column;
	text-align: center;
}

.ag-cta--left {
	justify-content: flex-start;
}

.ag-cta--right {
	flex-direction: row-reverse;
}

/* -------------------------------------------------
   9ter. Rangées image / texte (ex. page Accessoires)
------------------------------------------------- */
.ag-media-rows {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin: 36px 0;
}

.ag-media-row {
	display: flex;
	align-items: center;
	gap: 40px;
}

.ag-media-row__media {
	flex: 0 0 36%;
}

.ag-media-row__media img {
	width: 100%;
	border-radius: var(--ag-radius);
}

.ag-media-row__text {
	flex: 1 1 auto;
}

.ag-media-row__text h2 {
	margin-top: 0;
	font-size: 1.3rem;
}

.ag-media-row__text ul {
	color: var(--ag-text-light);
	padding-left: 1.1em;
}

.ag-media-row__text li {
	margin-bottom: 8px;
}

@media (max-width: 680px) {
	.ag-media-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.ag-media-row__media {
		flex: none;
		width: 100%;
	}
}

/* -------------------------------------------------
   10. Contenu générique de page
------------------------------------------------- */
.ag-page-header {
	background: var(--ag-bg-light);
	padding: 32px 0;
	border-bottom: 1px solid var(--ag-border);
}

.ag-breadcrumb {
	font-size: 0.85rem;
	color: var(--ag-text-light);
}

.ag-content {
	padding: 50px 0;
}

.ag-content .wp-block-columns {
	gap: 32px;
}

/* -------------------------------------------------
   11. Footer
------------------------------------------------- */
.ag-footer {
	background: var(--ag-dark);
	color: #b7bdc3;
	padding: 56px 0 24px;
}

.ag-footer a {
	color: #d9dce0;
}

.ag-footer a:hover {
	color: var(--ag-white);
}

.ag-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	margin-bottom: 36px;
}

.ag-footer h3 {
	color: var(--ag-white);
	font-size: 1.05rem;
	border-bottom: 2px solid var(--ag-primary);
	padding-bottom: 10px;
	margin-bottom: 16px;
	display: inline-block;
}

.ag-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ag-footer li {
	margin-bottom: 8px;
	font-size: 0.92rem;
}

.ag-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 20px;
	text-align: center;
	font-size: 0.85rem;
}

/* -------------------------------------------------
   12. Responsive
------------------------------------------------- */
@media (max-width: 782px) {
	.ag-menu-toggle {
		display: inline-block;
	}

	.ag-primary-nav {
		display: none;
		width: 100%;
		order: 3;
	}

	.ag-primary-nav.is-open {
		display: block;
	}

	.ag-primary-nav ul {
		flex-direction: column;
		align-items: stretch;
	}

	.ag-primary-nav ul ul {
		position: static;
		box-shadow: none;
		padding-left: 16px;
	}

	.ag-primary-nav li.submenu-open > ul {
		display: block;
	}

	.ag-header-inner {
		position: relative;
	}

	.ag-hero h1 {
		font-size: 1.8rem;
	}

	.ag-hero-inner {
		flex-direction: column;
		text-align: center;
		gap: 28px;
	}

	.ag-hero-logo img {
		max-width: 180px;
	}
}