/*
Theme Name: Elycom
Theme URI: https://elycom.be/
Author: Elycom
Description: Thème sur mesure d'Elycom, revendeur officiel Telavox en Belgique. Reprend fidèlement le design de elycom.be (pages, produits Yealink, blog, formulaires).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: elycom
*/

/*
 * Le design d'origine est dans assets/css/main.css.
 * Ce fichier ne contient que les ajouts nécessaires à WordPress.
 */

/* Barre d'administration WordPress */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }

/* Menu mobile */
.drawer-overlay[hidden] { display: none; }
.drawer .btn-primary { margin-top: var(--space-lg); justify-content: center; width: 100%; }
body.drawer-is-open { overflow: hidden; }

/* Accessibilité */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; z-index: 1000;
	top: 8px; left: 8px; padding: .75rem 1rem; background: var(--color-gold); color: var(--color-navy);
}

/* Honeypot anti-spam */
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* Messages de formulaire */
.form-notice {
	border-radius: var(--radius-sm); padding: .9rem 1rem; margin-bottom: var(--space-md);
	font-size: .9rem; font-weight: 500;
}
.form-notice--error { background: #f0688e1a; border: 1px solid var(--color-border); color: #9b1c42; }
.form-success__icon { color: var(--color-gold); }

/* Filtres produits */
.prod-card[hidden] { display: none; }

/* Contenu d'article (éditeur WordPress) */
.blogpost-body .lead {
	font-family: var(--font-display); color: var(--color-navy);
	margin-bottom: var(--space-lg); padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border-light);
	font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 500; line-height: 1.7;
}
.entry-content h2 {
	font-family: var(--font-display); color: var(--color-navy);
	margin-top: var(--space-lg); margin-bottom: var(--space-sm);
	font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.25;
}
.entry-content h3 {
	font-family: var(--font-display); color: var(--color-navy);
	margin-top: var(--space-md); margin-bottom: var(--space-xs);
	font-size: 1.3rem; font-weight: 600;
}
.entry-content p {
	color: var(--color-text-muted); margin-bottom: var(--space-md);
	font-size: 1rem; line-height: 1.85;
}
.entry-content p.lead { font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--color-navy); }
.entry-content a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--color-gold); }
.entry-content blockquote {
	border-radius: var(--radius-md); border-left: 4px solid var(--color-gold);
	padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 12px);
	margin: var(--space-lg) 0; font-family: var(--font-display); color: var(--color-navy);
	background: linear-gradient(135deg, #005e8a0d 0%, #f0688e0f 100%);
	font-size: 1.05rem; font-style: italic; line-height: 1.7;
}
.entry-content blockquote p { color: inherit; font-size: inherit; margin: 0; line-height: inherit; }
.entry-content ul, .entry-content ol {
	margin: var(--space-sm) 0 var(--space-md); display: flex; flex-direction: column; gap: .75rem; list-style: none;
}
.entry-content ul li, .entry-content ol li {
	color: var(--color-text-muted); padding-left: 1.5rem; font-size: .95rem; line-height: 1.7; position: relative;
}
.entry-content ul li::before {
	content: ""; background: var(--color-gold); border-radius: 50%;
	width: 7px; height: 7px; position: absolute; top: .6rem; left: 0;
}
.entry-content ol { counter-reset: item; }
.entry-content ol li::before {
	counter-increment: item; content: counter(item) "."; position: absolute; left: 0;
	color: var(--color-gold); font-weight: 700;
}
.entry-content img { border-radius: var(--radius-md); height: auto; margin: var(--space-md) 0; }
.entry-content > *:last-child { margin-bottom: 0; }

/* Page générique */
.page-default { padding-top: 72px; }
.page-default__body { background: var(--color-cream); padding: var(--space-xl) 0 var(--space-2xl); }
.page-default__body .blogpost-body { max-width: 860px; margin: 0 auto; }

/* Pagination */
.pagination { margin-top: var(--space-xl); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pagination .page-numbers {
	border: 1px solid var(--color-border-light); background: var(--color-white); color: var(--color-navy);
	border-radius: 999px; min-width: 40px; height: 40px; padding: 0 .9rem;
	display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 600;
}
.pagination .page-numbers.current { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.pagination a.page-numbers:hover { border-color: var(--color-gold); color: var(--color-gold); }

/* 404 */
.notfound { padding-top: 72px; }
.notfound .sol-hero { min-height: 70vh; display: flex; align-items: center; }
.notfound__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-lg); }

/* Blog vide */
.blog-empty { text-align: center; color: var(--color-text-muted); padding: var(--space-xl) 0; }

/* Fiche produit : bouton contour lisible sur fond clair */
.pd-hero__actions .btn-outline { color: var(--color-navy); border-color: #005e8a40; }
.pd-hero__actions .btn-outline:hover { color: var(--color-gold); border-color: var(--color-gold); }

/* En-tête mobile : main.css passe tous les .btn-primary en pleine largeur sous 600px,
   ce qui poussait le burger hors de l'écran. Le bouton reste accessible dans le menu. */
@media (max-width: 600px) { .nav__cta { width: auto; } }
@media (max-width: 480px) { .nav__cta { display: none; } }

/* =========================================================================
   Espace support (/support/)
   ========================================================================= */
.support-page { padding-top: 72px; }
.support-hero { padding: 5rem 0 3.5rem; }
.support-hero__user { color: #ffffffb3; margin-top: var(--space-md); font-size: .875rem; }
.support-hero__user strong { color: var(--color-white); }
.support-hero__user a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; }
.support-main { background: var(--color-cream); padding: var(--space-xl) 0 var(--space-3xl); min-height: 40vh; }

.support-card {
	background: var(--color-white); border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm);
}
.support-card--narrow { max-width: 480px; margin: 0 auto; }
.support-card__title { font-family: var(--font-display); color: var(--color-navy); font-size: 1.8rem; font-weight: 600; margin-bottom: var(--space-md); }
.support-card__subtitle { font-family: var(--font-display); color: var(--color-navy); font-size: 1.3rem; font-weight: 600; margin-bottom: var(--space-sm); }
.support-card__text { color: var(--color-text-muted); font-size: .92rem; line-height: 1.7; margin-bottom: var(--space-md); }
.support-card__foot { color: var(--color-text-muted); font-size: .8rem; margin-top: var(--space-sm); }
.support-card__foot a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.support-card__foot a:hover { color: var(--color-gold); }
.support-form__hint { font-weight: 400; color: var(--color-text-muted); letter-spacing: 0; }
.support-form__file { font-family: var(--font-body); font-size: .85rem; color: var(--color-text-muted); }
.form-notice--success { background: #005e8a0f; border: 1px solid var(--color-border-light); color: var(--color-navy); }

/* Connexion (wp_login_form) */
#support-login p { margin-bottom: var(--space-sm); }
#support-login label { display: block; color: var(--color-navy); font-size: .8rem; font-weight: 600; letter-spacing: .04em; margin-bottom: .4rem; }
#support-login .input {
	width: 100%; border: 1.5px solid #005e8a24; border-radius: var(--radius-sm); padding: .75rem 1rem;
	font-family: var(--font-body); font-size: .9rem; color: var(--color-navy); outline: none;
}
#support-login .input:focus { border-color: var(--color-gold); box-shadow: 0 0 0 3px #f0688e1f; }
#support-login .login-remember label { display: flex; align-items: center; gap: .5rem; font-weight: 500; letter-spacing: 0; }
#support-login .button {
	width: 100%; justify-content: center; background: var(--color-gold); color: var(--color-navy); border: none;
	border-radius: var(--radius-sm); padding: 1rem 2rem; font-family: var(--font-body); font-size: .875rem;
	font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: background var(--transition-fast);
}
#support-login .button:hover { background: var(--color-gold-light); }

/* Tableau de bord */
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-lg); align-items: start; }
.support-list__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.support-list__head .support-card__title { margin-bottom: 0; }
.support-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.support-tabs .prod-filter { display: inline-flex; align-items: center; gap: .45rem; }
.support-tabs__count { background: #005e8a14; border-radius: 999px; padding: .05rem .5rem; font-size: .75rem; }
.prod-filter--active .support-tabs__count { background: #ffffff26; }
.support-empty { color: var(--color-text-muted); font-size: .9rem; padding: var(--space-md) 0; }

.ticket-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ticket-row {
	display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center;
	background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md); transition: box-shadow var(--transition-mid), transform var(--transition-mid), border-color var(--transition-mid);
}
.ticket-row:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); transform: translateY(-2px); }
.ticket-row__id { font-family: var(--font-display); color: var(--color-gold); font-size: 1.2rem; font-weight: 700; }
.ticket-row__main { display: flex; flex-direction: column; min-width: 0; }
.ticket-row__title { color: var(--color-navy); font-weight: 600; font-size: .95rem; line-height: 1.4; }
.ticket-row__meta { color: var(--color-text-muted); font-size: .78rem; }
.ticket-row__badges { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }

.ticket-badge {
	display: inline-block; border-radius: var(--radius-sm); padding: .2rem .55rem;
	font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.ticket-badge--type { background: #005e8a14; color: var(--color-navy); }
.ticket-badge--haute { background: #c62f5a; color: var(--color-white); }
.ticket-badge--nouveau { background: var(--color-gold); color: var(--color-navy); }
.ticket-badge--en-cours { background: var(--color-navy-light); color: var(--color-white); }
.ticket-badge--resolu { background: #1f7a4d; color: var(--color-white); }
.ticket-badge--ferme { background: #e3e8ec; color: var(--color-text-muted); }

/* Détail d'un ticket */
.support-back {
	display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-md);
	color: var(--color-text-muted); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.support-back:hover { color: var(--color-gold); }
.support-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-lg); align-items: start; }
.support-side { position: sticky; top: calc(72px + 1.5rem); }
.support-side__btn { width: 100%; justify-content: center; margin-top: var(--space-sm); }
.ticket-head { display: grid; grid-template-columns: auto 1fr; gap: .25rem var(--space-sm); align-items: baseline; margin-bottom: var(--space-md); }
.ticket-head__title { font-family: var(--font-display); color: var(--color-navy); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; line-height: 1.2; }
.ticket-head .ticket-row__badges { grid-column: 2; justify-content: flex-start; }
.ticket-meta {
	display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding: var(--space-sm) 0;
	border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--space-md);
}
.ticket-meta dt { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.ticket-meta dd { color: var(--color-navy); font-size: .9rem; font-weight: 500; }
.ticket-meta a { text-decoration: underline; text-underline-offset: 3px; }
.ticket-meta a:hover { color: var(--color-gold); }
.ticket-description p { color: var(--color-navy); line-height: 1.8; margin-bottom: var(--space-sm); }
.ticket-capture { margin: var(--space-md) 0; }
.ticket-capture img { border-radius: var(--radius-md); border: 1px solid var(--color-border-light); max-height: 420px; width: auto; }
.ticket-capture figcaption { color: var(--color-text-muted); font-size: .78rem; margin-top: .4rem; }

.ticket-thread { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border-light); }
.ticket-thread__title { font-family: var(--font-display); color: var(--color-navy); font-size: 1.3rem; font-weight: 600; margin-bottom: var(--space-sm); }
.ticket-thread__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.ticket-reply { background: var(--color-cream); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--color-border-light); }
.ticket-reply--team { border-left-color: var(--color-gold); }
.ticket-reply__meta { color: var(--color-text-muted); font-size: .78rem; margin-bottom: .3rem; }
.ticket-reply__meta strong { color: var(--color-navy); }
.ticket-reply__text p { color: var(--color-navy); font-size: .92rem; line-height: 1.7; }
.ticket-thread__form .btn-primary { margin-top: var(--space-xs); }

@media (max-width: 1024px) {
	.support-grid, .support-detail { grid-template-columns: 1fr; }
	.support-side { position: static; }
}
@media (max-width: 640px) {
	.support-card { padding: var(--space-md); }
	.ticket-row { grid-template-columns: auto 1fr; }
	.ticket-row__badges { grid-column: 1 / -1; justify-content: flex-start; }
}


/* Bouton « préférences cookies » affiché après un choix dans la bannière Termly (inc/cookies.php).
   Repris tel quel de elycom.be. */
button#consent-banner-prefs-button {
    display: none;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='22' r='11' stroke='%233C3C3C' stroke-width='2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.5042 16.7507C27.5042 17.7164 26.7197 18.5 25.7514 18.5C24.7845 18.5 24 17.7164 24 16.7507C24 15.7836 24.7845 15 25.7514 15C26.7197 15 27.5042 15.7836 27.5042 16.7507Z' fill='%233C3C3C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.503 23.25C28.503 23.9405 27.9428 24.5 27.2515 24.5C26.5602 24.5 26 23.9405 26 23.25C26 22.5611 26.5602 22 27.2515 22C27.9428 22 28.503 22.5611 28.503 23.25Z' fill='%233C3C3C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 21.5C22 22.3286 21.3286 23 20.5 23C19.6714 23 19 22.3286 19 21.5C19 20.6733 19.6714 20 20.5 20C21.3286 20 22 20.6733 22 21.5Z' fill='%233C3C3C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26 28C26 28.5524 25.5524 29 25 29C24.4476 29 24 28.5524 24 28C24 27.4489 24.4476 27 25 27C25.5524 27 26 27.4489 26 28Z' fill='%233C3C3C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 14C20 14.5524 19.5524 15 19 15C18.4476 15 18 14.5524 18 14C18 13.4489 18.4476 13 19 13C19.5524 13 20 13.4489 20 14Z' fill='%233C3C3C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 28.5C21 29.8809 19.8809 31 18.5 31C17.1191 31 16 29.8809 16 28.5C16 27.1222 17.1191 26 18.5 26C19.8809 26 21 27.1222 21 28.5Z' fill='%233C3C3C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 21C16 22.1059 15.1041 23 14 23C12.8941 23 12 22.1059 12 21C12 19.8959 12.8941 19 14 19C15.1041 19 16 19.8959 16 21Z' fill='%233C3C3C'/%3E%3Cpath d='M21 1L23.6464 3.64645C23.8417 3.84171 23.8417 4.1583 23.6464 4.35356L21 7' stroke='%233C3C3C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 22.75C1 12.3947 9.39466 4 19.75 4C20.9718 4 22.1664 4.11687 23.3231 4.34005' stroke='%233C3C3C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19 42.75L16.3536 40.1035C16.1583 39.9083 16.1583 39.5917 16.3536 39.3964L19 36.75' stroke='%233C3C3C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M39 21C39 31.3553 30.6053 39.75 20.25 39.75C19.0282 39.75 17.8336 39.6331 16.6769 39.41' stroke='%233C3C3C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 44px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    padding: 9px 9px 7px 7px;
    outline: none;
    width: 64px;
    height: 64px;
    border-top-right-radius: 50%;
    box-shadow: 0px 0px 6.86px 0px #0000001A;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999999;
    transform: scale(0.7);
    transform-origin: bottom left;
    transition: all .3s ease;
}
button#consent-banner-prefs-button:hover {
    transform: scale(1);
}
button#consent-banner-prefs-button.termly-display-preferences--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}