/* ==========================================================================
   UTILITAIRESCOM — THEME CSS
   Fichier principal consolide. Design tokens dans style.css (:root).
   ========================================================================== */

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ut-font-body);
    font-size: var(--ut-font-size-base);
    line-height: 1.6;
    color: var(--ut-dark);
    background: var(--ut-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ut-font-heading);
    line-height: 1.3;
    color: var(--ut-primary);
}

a {
    color: var(--ut-secondary);
    text-decoration: none;
    transition: color var(--ut-transition);
}

a:hover {
    color: var(--ut-accent);
}

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

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}

.screen-reader-text:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    background: var(--ut-white);
    padding: 16px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */

.utcom-container {
    max-width: var(--ut-container);
    margin: 0 auto;
    padding: 0 var(--ut-padding);
}

.utcom-site-wrapper {
    position: relative;
    z-index: 1;
    background: var(--ut-white);
    min-height: 100vh;
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */

/* --- Topbar --- */
.utcom-topbar {
    background: var(--ut-gray-900);
    color: var(--ut-white);
    font-size: 13px;
    padding: 8px 0;
}

.utcom-topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.utcom-topbar__date {
    opacity: 0.9;
}

.utcom-topbar__social {
    display: flex;
    gap: 12px;
}

.utcom-topbar__social-link {
    color: var(--ut-white);
    opacity: 0.7;
    font-size: 12px;
    font-weight: 600;
    transition: opacity var(--ut-transition);
}

.utcom-topbar__social-link:hover {
    opacity: 1;
    color: var(--ut-white);
}

/* --- Navigation --- */
.utcom-nav-wrapper {
    background: var(--ut-white);
    border-bottom: 1px solid var(--ut-gray-300);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform var(--ut-transition), box-shadow var(--ut-transition);
}

.utcom-nav-wrapper.is-scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.utcom-nav-wrapper.is-hidden {
    transform: translateY(-100%);
}

.utcom-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 16px 0;
}

.utcom-nav__logo a {
    display: flex;
    align-items: center;
}

.utcom-nav__logo img {
    max-height: 48px;
    width: auto;
}

.utcom-nav__site-title {
    font-family: var(--ut-font-heading);
    font-size: 28px;
    color: var(--ut-primary);
    font-weight: 400;
}

.utcom-nav__site-title:hover {
    color: var(--ut-primary);
}

.utcom-nav__menu {
    flex: 1;
}

.utcom-nav__list {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.utcom-nav__link {
    color: var(--ut-dark);
    font-weight: 500;
    font-size: 15px;
    padding: 8px 0;
    position: relative;
    transition: color var(--ut-transition);
}

.utcom-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--ut-accent);
    transition: width var(--ut-transition);
}

.utcom-nav__link:hover,
.utcom-nav__item.current-menu-item > .utcom-nav__link {
    color: var(--ut-primary);
}

.utcom-nav__link:hover::after,
.utcom-nav__item.current-menu-item > .utcom-nav__link::after {
    width: 100%;
}

/* --- Sous-menus deroulants --- */
.utcom-nav__list .menu-item-has-children {
    position: relative;
}

.utcom-nav__list .menu-item-has-children > .utcom-nav__link::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform var(--ut-transition);
}

.utcom-nav__list .menu-item-has-children:hover > .utcom-nav__link::before,
.utcom-nav__list .menu-item-has-children:focus-within > .utcom-nav__link::before {
    transform: rotate(180deg);
}

.utcom-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--ut-white, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: var(--ut-radius, 4px);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

.utcom-nav__list .menu-item-has-children:hover > .sub-menu,
.utcom-nav__list .menu-item-has-children:focus-within > .sub-menu,
.utcom-nav__list .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.utcom-nav__list .sub-menu .utcom-nav__subitem {
    margin: 0;
    padding: 0;
}

.utcom-nav__list .sub-menu .utcom-nav__link {
    display: block;
    padding: 10px 16px;
    white-space: nowrap;
    font-size: 14px;
}

.utcom-nav__list .sub-menu .utcom-nav__link::after {
    display: none;
}

.utcom-nav__list .sub-menu .utcom-nav__link:hover {
    background: var(--ut-gray-100, #f5f5f5);
}

/* --- Nav actions --- */
.utcom-nav__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.utcom-nav__search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ut-gray-700);
    padding: 8px;
    transition: color var(--ut-transition);
}

.utcom-nav__search-toggle:hover {
    color: var(--ut-primary);
}

.utcom-nav__search-form {
    position: absolute;
    top: 100%;
    right: var(--ut-padding);
    background: var(--ut-white);
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border-radius: var(--ut-radius);
    z-index: 100;
}

.utcom-nav__search-form[hidden] {
    display: none;
}

.utcom-nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.utcom-nav__hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ut-dark);
    transition: transform var(--ut-transition), opacity var(--ut-transition);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.utcom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-family: var(--ut-font-body);
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow var(--ut-transition), background var(--ut-transition);
    text-decoration: none;
    line-height: 1.4;
}

.utcom-btn:hover {
    transform: translateY(-2px);
}

.utcom-btn--accent {
    background: var(--ut-accent);
    color: var(--ut-white);
}

.utcom-btn--accent:hover {
    color: var(--ut-white);
    box-shadow: 0 4px 16px rgba(249, 87, 56, 0.4);
}

.utcom-btn--primary {
    background: var(--ut-primary);
    color: var(--ut-white);
}

.utcom-btn--primary:hover {
    color: var(--ut-white);
    box-shadow: 0 4px 16px rgba(13, 59, 102, 0.3);
}

.utcom-btn--secondary {
    background: rgba(255,255,255,0.2);
    color: var(--ut-white);
    border: 2px solid rgba(255,255,255,0.3);
}

.utcom-btn--secondary:hover {
    background: rgba(255,255,255,0.3);
    color: var(--ut-white);
}

.utcom-btn--outline {
    background: transparent;
    color: var(--ut-primary);
    border: 2px solid var(--ut-primary);
}

.utcom-btn--outline:hover {
    background: var(--ut-primary);
    color: var(--ut-white);
}

/* ==========================================================================
   5. BADGES
   ========================================================================== */

.utcom-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    transition: background var(--ut-transition);
}

.utcom-badge--default { background: var(--ut-gray-100); color: var(--ut-gray-700); }
.utcom-badge--blue    { background: rgba(13,59,102,0.1); color: var(--ut-primary); }
.utcom-badge--green   { background: rgba(39,174,96,0.1); color: var(--ut-success); }
.utcom-badge--purple  { background: rgba(128,0,128,0.1); color: #800080; }
.utcom-badge--orange  { background: rgba(249,87,56,0.1); color: var(--ut-accent); }
.utcom-badge--teal    { background: rgba(0,128,128,0.1); color: teal; }

/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

.utcom-hero {
    padding: 40px 0;
}

.utcom-hero__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--ut-gap);
    min-height: 500px;
}

.utcom-hero__main {
    position: relative;
    border-radius: var(--ut-radius);
    overflow: hidden;
}

.utcom-hero__main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.utcom-hero__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: var(--ut-white);
}

.utcom-hero__overlay .utcom-badge {
    margin-bottom: 16px;
}

.utcom-hero__overlay h2 {
    font-size: 36px;
    color: var(--ut-white);
    margin-bottom: 12px;
}

.utcom-hero__overlay p {
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.6;
}

.utcom-hero__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.utcom-hero__sidebar-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--ut-white);
    border: 1px solid var(--ut-gray-300);
    border-radius: var(--ut-radius);
    transition: transform var(--ut-transition), box-shadow var(--ut-transition);
    flex: 1;
}

.utcom-hero__sidebar-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.utcom-hero__sidebar-card img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.utcom-hero__sidebar-card .utcom-badge {
    font-size: 11px;
    margin-bottom: 8px;
}

.utcom-hero__sidebar-card h3 {
    font-size: 16px;
    font-family: var(--ut-font-body);
    font-weight: 600;
    color: var(--ut-dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

.utcom-hero__sidebar-card h3 a {
    color: inherit;
}

.utcom-hero__sidebar-card h3 a:hover {
    color: var(--ut-accent);
}

.utcom-hero__sidebar-card time {
    font-size: 13px;
    color: var(--ut-gray-500);
}

/* ==========================================================================
   7. NEWS CARDS
   ========================================================================== */

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

.utcom-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.utcom-section__title {
    font-size: 32px;
}

.utcom-section__link {
    font-size: 15px;
    font-weight: 500;
    color: var(--ut-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.utcom-section__link:hover {
    gap: 12px;
}

.utcom-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ut-gap);
}

.utcom-card {
    background: var(--ut-white);
    border-radius: var(--ut-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform var(--ut-transition), box-shadow var(--ut-transition);
    /* IntersectionObserver animation initial state */
    opacity: 0;
    transform: translateY(30px);
}

.utcom-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow var(--ut-transition);
}

.utcom-card:hover {
    transform: translateY(var(--ut-card-hover-y));
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.utcom-card.is-visible:hover {
    transform: translateY(var(--ut-card-hover-y));
}

.utcom-card__image {
    height: 220px;
    overflow: hidden;
}

.utcom-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ut-transition);
}

.utcom-card:hover .utcom-card__image img {
    transform: scale(1.05);
}

.utcom-card__content {
    padding: var(--ut-padding);
}

.utcom-card__content .utcom-badge {
    margin-bottom: 12px;
}

.utcom-card__title {
    font-size: 20px;
    font-family: var(--ut-font-body);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
    color: var(--ut-dark);
}

.utcom-card__title a {
    color: inherit;
}

.utcom-card__title a:hover {
    color: var(--ut-accent);
}

.utcom-card__excerpt {
    font-size: 15px;
    color: var(--ut-gray-700);
    line-height: 1.6;
    margin-bottom: 16px;
}

.utcom-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ut-gray-500);
}

/* ==========================================================================
   8. DIRECTORY SECTION (homepage)
   ========================================================================== */

.utcom-directory-section {
    background: linear-gradient(135deg, var(--ut-primary) 0%, var(--ut-secondary) 100%);
    padding: 80px 0;
    color: var(--ut-white);
}

.utcom-directory-section__header {
    text-align: center;
    margin-bottom: 48px;
}

.utcom-directory-section__title {
    color: var(--ut-white);
    font-family: var(--ut-font-heading);
    font-size: 40px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.utcom-directory-section__subtitle {
    color: var(--ut-white);
    font-size: 18px;
    opacity: 0.9;
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.utcom-directory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ut-padding);
    margin-bottom: 40px;
}

.utcom-directory-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--ut-radius);
    padding: 32px var(--ut-padding);
    text-align: center;
    transition: transform var(--ut-transition), background var(--ut-transition);
    opacity: 0;
    transform: translateY(30px);
    color: var(--ut-white);
    text-decoration: none;
    display: block;
}

.utcom-directory-card,
.utcom-directory-card:hover,
.utcom-directory-card:focus {
    color: var(--ut-white);
    text-decoration: none;
}

.utcom-directory-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, background var(--ut-transition);
}

.utcom-directory-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.15);
}

.utcom-directory-card.is-visible:hover {
    transform: translateY(-4px);
}

.utcom-directory-card__icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.utcom-directory-card__title {
    font-size: 18px;
    color: var(--ut-white);
    font-family: var(--ut-font-body);
    font-weight: 600;
    margin-bottom: 8px;
}

.utcom-directory-card__count {
    font-size: 14px;
    opacity: 0.8;
}

.utcom-directory-section__cta {
    text-align: center;
}

/* ==========================================================================
   9. NEWSLETTER SECTION
   ========================================================================== */

.utcom-newsletter-section {
    background: var(--ut-gray-900);
    padding: 80px 0;
    color: var(--ut-white);
}

.utcom-newsletter__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.utcom-newsletter__title {
    font-size: 36px;
    color: var(--ut-white);
    margin-bottom: 16px;
}

.utcom-newsletter__description {
    font-size: 18px;
    opacity: 0.9;
    line-height: 1.7;
}

.utcom-newsletter__form-wrapper {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--ut-radius);
    padding: 32px;
}

/* ==========================================================================
   10. ARTICLE LAYOUT
   ========================================================================== */

.utcom-article-container {
    display: grid;
    grid-template-columns: 1fr var(--ut-sidebar-width);
    gap: var(--ut-gap);
    max-width: var(--ut-container-article);
    margin: 0 auto;
    padding: 40px var(--ut-padding);
}

/* --- Article Header --- */
.utcom-article-header {
    margin-bottom: 32px;
}

.utcom-article-header .utcom-badge {
    margin-bottom: 16px;
}

.utcom-article-header__title {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.utcom-article-header__excerpt {
    font-size: 20px;
    color: var(--ut-gray-700);
    line-height: 1.7;
    margin-bottom: 24px;
}

.utcom-article-header__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--ut-gray-300);
    border-bottom: 1px solid var(--ut-gray-300);
}

.utcom-article-header__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.utcom-article-header__author-name {
    font-weight: 600;
    color: var(--ut-dark);
}

.utcom-article-header__author-role {
    font-size: 13px;
    color: var(--ut-gray-500);
}

/* --- Featured Image --- */
.utcom-featured-image {
    margin-bottom: 32px;
    border-radius: var(--ut-radius);
    overflow: hidden;
    max-height: 500px;
}

.utcom-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Article Content --- */
.utcom-article-content {
    font-size: 18px;
    line-height: 1.9;
    color: var(--ut-dark);
}

.utcom-article-content h2 {
    font-size: 32px;
    margin: 48px 0 20px;
}

.utcom-article-content h3 {
    font-size: 24px;
    font-family: var(--ut-font-body);
    font-weight: 600;
    color: var(--ut-dark);
    margin: 36px 0 16px;
}

.utcom-article-content p {
    margin-bottom: 20px;
}

.utcom-article-content ul,
.utcom-article-content ol {
    margin: 20px 0;
    padding-left: 32px;
}

.utcom-article-content li {
    margin-bottom: 8px;
}

.utcom-article-content blockquote {
    border-left: 4px solid var(--ut-accent);
    padding: 24px 32px;
    margin: 32px 0;
    background: var(--ut-gray-100);
    font-size: 20px;
    font-style: italic;
    color: var(--ut-gray-900);
    border-radius: 0 var(--ut-radius) var(--ut-radius) 0;
}

.utcom-article-content blockquote cite {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    color: var(--ut-gray-700);
}

.utcom-article-content .utcom-highlight-box {
    background: linear-gradient(135deg, var(--ut-primary) 0%, var(--ut-secondary) 100%);
    color: var(--ut-white);
    padding: 32px;
    border-radius: var(--ut-radius);
    margin: 32px 0;
}

.utcom-article-content .utcom-highlight-box h3 {
    color: var(--ut-white);
    margin-top: 0;
}

.utcom-article-content img {
    border-radius: var(--ut-radius);
    margin: 24px 0;
}

.utcom-article-content a {
    color: var(--ut-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.utcom-article-content a:hover {
    color: var(--ut-accent);
}

/* --- Tags --- */
.utcom-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0;
    padding-top: 32px;
    border-top: 1px solid var(--ut-gray-300);
}

.utcom-article-tags__label {
    font-weight: 600;
    color: var(--ut-dark);
    margin-right: 8px;
    line-height: 2;
}

.utcom-article-tags a {
    display: inline-block;
    padding: 6px 16px;
    background: var(--ut-gray-100);
    border: 1px solid var(--ut-gray-300);
    border-radius: 20px;
    font-size: 14px;
    color: var(--ut-gray-700);
    transition: background var(--ut-transition), border-color var(--ut-transition), color var(--ut-transition);
}

.utcom-article-tags a:hover {
    background: var(--ut-primary);
    border-color: var(--ut-primary);
    color: var(--ut-white);
}

/* --- Share --- */
.utcom-article-share {
    display: flex;
    gap: 12px;
    margin: 32px 0;
}

.utcom-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 6px;
    color: var(--ut-white);
    font-size: 14px;
    font-weight: 500;
    transition: transform 0.2s, box-shadow var(--ut-transition);
}

.utcom-share-btn:hover {
    transform: translateY(-2px);
    color: var(--ut-white);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.utcom-share-btn--linkedin { background: #0077B5; }
.utcom-share-btn--twitter  { background: #1DA1F2; }
.utcom-share-btn--facebook { background: #1877F2; }
.utcom-share-btn--email    { background: var(--ut-gray-700); }
.utcom-share-btn--copy     { background: var(--ut-gray-500); }

/* --- Related Articles --- */
.utcom-related {
    padding: 60px 0;
    background: var(--ut-gray-100);
}

.utcom-related .utcom-section__title {
    margin-bottom: 32px;
}

/* ==========================================================================
   11. SIDEBAR
   ========================================================================== */

.utcom-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.utcom-widget {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--ut-gray-100);
    border-radius: var(--ut-radius);
}

.utcom-widget__title {
    font-size: 18px;
    font-family: var(--ut-font-body);
    font-weight: 600;
    color: var(--ut-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ut-accent);
}

/* Newsletter widget sidebar */
.utcom-widget--newsletter {
    background: linear-gradient(135deg, var(--ut-primary) 0%, var(--ut-secondary) 100%);
    color: var(--ut-white);
}

.utcom-widget--newsletter .utcom-widget__title {
    color: var(--ut-white);
    border-bottom-color: rgba(255,255,255,0.3);
}

/* Sidebar mini-card */
.utcom-sidebar-card {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ut-gray-300);
}

.utcom-sidebar-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.utcom-sidebar-card__image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.utcom-sidebar-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.utcom-sidebar-card__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.utcom-sidebar-card__title a {
    color: var(--ut-dark);
}

.utcom-sidebar-card__title a:hover {
    color: var(--ut-accent);
}

.utcom-sidebar-card__date {
    font-size: 12px;
    color: var(--ut-gray-500);
}

/* ==========================================================================
   12. EXPOSANT (fiche annuaire)
   ========================================================================== */

.utcom-company-header {
    background: linear-gradient(135deg, var(--ut-primary) 0%, var(--ut-secondary) 100%);
    padding: 60px 0;
    color: var(--ut-white);
}

.utcom-company-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}

.utcom-company-header__logo {
    width: 120px;
    height: 120px;
    background: var(--ut-white);
    border-radius: var(--ut-radius);
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.utcom-company-header__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.utcom-company-header__title {
    font-size: 36px;
    color: var(--ut-white);
    margin-bottom: 8px;
}

.utcom-company-header__tagline {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 16px;
}

.utcom-company-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 15px;
}

.utcom-company-header__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}

.utcom-company-header__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Tabs --- */
.utcom-company-container {
    display: grid;
    grid-template-columns: 1fr var(--ut-sidebar-annuaire-width);
    gap: var(--ut-gap);
    max-width: var(--ut-container);
    margin: 0 auto;
    padding: 40px var(--ut-padding);
}

.utcom-tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--ut-gray-300);
    margin-bottom: 32px;
}

.utcom-tab-button {
    padding: 16px 32px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ut-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ut-gray-700);
    position: relative;
    transition: color var(--ut-transition);
}

.utcom-tab-button:hover {
    color: var(--ut-primary);
}

.utcom-tab-button.is-active {
    color: var(--ut-primary);
    font-weight: 600;
}

.utcom-tab-button.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ut-accent);
}

.utcom-tab-content {
    display: none;
}

.utcom-tab-content.is-active {
    display: block;
    animation: utcomFadeIn 0.4s ease-out;
}

/* Key figures */
.utcom-key-figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 32px 0;
}

.utcom-key-figure {
    background: var(--ut-gray-100);
    padding: 24px;
    text-align: center;
    border-radius: var(--ut-radius);
}

.utcom-key-figure__value {
    font-size: 32px;
    font-weight: 700;
    color: var(--ut-accent);
}

.utcom-key-figure__label {
    font-size: 14px;
    color: var(--ut-gray-700);
    margin-top: 4px;
}

/* Product cards */
.utcom-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.utcom-product-card {
    background: var(--ut-white);
    border: 2px solid var(--ut-gray-300);
    border-radius: var(--ut-radius);
    padding: 24px;
    transition: transform var(--ut-transition), border-color var(--ut-transition), box-shadow var(--ut-transition);
}

.utcom-product-card:hover {
    transform: translateY(-4px);
    border-color: var(--ut-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Gallery */
.utcom-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.utcom-gallery-item {
    height: 220px;
    border-radius: var(--ut-radius);
    overflow: hidden;
    position: relative;
}

.utcom-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ut-transition);
}

.utcom-gallery-item:hover img {
    transform: scale(1.1);
}

/* Company sidebar */
.utcom-company-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.utcom-company-sidebar__stats {
    background: linear-gradient(135deg, var(--ut-primary) 0%, var(--ut-secondary) 100%);
    color: var(--ut-white);
    padding: 24px;
    border-radius: var(--ut-radius);
    margin-bottom: 24px;
}

.utcom-company-sidebar__contact {
    background: var(--ut-gray-100);
    padding: 24px;
    border-radius: var(--ut-radius);
    margin-bottom: 24px;
}

.utcom-company-sidebar__contact h3 {
    font-size: 18px;
    font-family: var(--ut-font-body);
    font-weight: 600;
    color: var(--ut-dark);
    margin-bottom: 16px;
}

.utcom-contact-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ut-gray-300);
}

.utcom-contact-item:last-child {
    border-bottom: none;
}

.utcom-contact-item__icon {
    font-size: 20px;
    color: var(--ut-accent);
    flex-shrink: 0;
}

.utcom-contact-item__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ut-gray-700);
}

.utcom-contact-item__value {
    font-size: 15px;
    color: var(--ut-dark);
}

.utcom-contact-item__value a {
    color: var(--ut-secondary);
}

/* Related companies */
.utcom-related-companies {
    background: var(--ut-gray-100);
    padding: 60px 0;
}

.utcom-related-companies__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ut-padding);
}

.utcom-related-company-card {
    background: var(--ut-white);
    border-radius: var(--ut-radius);
    padding: 24px;
    text-align: center;
    transition: transform var(--ut-transition), box-shadow var(--ut-transition);
}

.utcom-related-company-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ==========================================================================
   13. BREADCRUMB
   ========================================================================== */

.utcom-breadcrumb {
    padding: 16px 0;
    font-size: 14px;
    max-width: var(--ut-container);
    margin: 0 auto;
    padding-left: var(--ut-padding);
    padding-right: var(--ut-padding);
}

.utcom-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.utcom-breadcrumb__sep {
    margin: 0 8px;
    color: var(--ut-gray-500);
}

.utcom-breadcrumb__link {
    color: var(--ut-secondary);
}

.utcom-breadcrumb__link:hover {
    text-decoration: underline;
}

.utcom-breadcrumb__current {
    color: var(--ut-gray-500);
}

/* ==========================================================================
   14. NEWSLETTER CTA (post-article)
   ========================================================================== */

.utcom-newsletter-cta {
    background: linear-gradient(135deg, var(--ut-primary) 0%, var(--ut-secondary) 100%);
    color: var(--ut-white);
    padding: 32px;
    border-radius: var(--ut-radius);
    margin: 40px 0;
    text-align: center;
}

.utcom-newsletter-cta h3 {
    color: var(--ut-white);
    font-size: 24px;
    margin-bottom: 12px;
}

.utcom-newsletter-cta p {
    opacity: 0.9;
    margin-bottom: 20px;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.utcom-footer__widgets {
    background: var(--ut-gray-900);
    color: var(--ut-white);
    padding: 60px 0;
}

.utcom-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.utcom-footer__widgets .utcom-widget {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.utcom-footer__widgets .utcom-widget__title {
    color: var(--ut-white);
    border-bottom-color: rgba(255,255,255,0.2);
}

.utcom-footer__widgets a {
    color: rgba(255,255,255,0.8);
}

.utcom-footer__widgets a:hover {
    color: var(--ut-white);
}

.utcom-footer__widgets ul {
    list-style: none;
    padding: 0;
}

.utcom-footer__widgets li {
    padding: 6px 0;
}

.utcom-footer__bottom {
    background: var(--ut-dark);
    color: rgba(255,255,255,0.6);
    padding: 20px 0;
    font-size: 14px;
}

.utcom-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.utcom-footer__legal-menu {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.utcom-footer__legal-menu a {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

.utcom-footer__legal-menu a:hover {
    color: var(--ut-white);
}

/* ==========================================================================
   16. ARCHE PUBLICITAIRE (Skin Ad)
   ========================================================================== */

.utcom-arche-banner {
    width: 100%;
    text-align: center;
    background: #000;
    line-height: 0;
}

.utcom-arche-banner img {
    max-width: 1240px;
    width: 100%;
    height: auto;
}

.utcom-arche-sides {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.utcom-arche-side {
    position: absolute;
    top: 0;
    pointer-events: auto;
}

.utcom-arche-side--left {
    left: 0;
    width: var(--ut-arche-side-width);
}

.utcom-arche-side--right {
    right: 0;
    width: var(--ut-arche-side-width);
}

.utcom-arche-side img {
    width: 100%;
    height: auto;
}

body.utcom-has-arche-pub .utcom-site-wrapper {
    max-width: var(--ut-container);
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* ==========================================================================
   17. MOBILE MENU
   ========================================================================== */

.utcom-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s var(--ut-transition), opacity var(--ut-transition);
}

.utcom-mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.utcom-mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.utcom-mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: var(--ut-white);
    padding: 24px;
    transform: translateX(100%);
    transition: transform var(--ut-transition);
    overflow-y: auto;
}

.utcom-mobile-menu.is-open .utcom-mobile-menu__panel {
    transform: translateX(0);
}

.utcom-mobile-menu__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-bottom: 24px;
    color: var(--ut-gray-700);
}

.utcom-mobile-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.utcom-mobile-menu__list li {
    border-bottom: 1px solid var(--ut-gray-100);
}

.utcom-mobile-menu__list a {
    display: block;
    padding: 14px 0;
    color: var(--ut-dark);
    font-weight: 500;
    font-size: 16px;
}

.utcom-mobile-menu__list a:hover {
    color: var(--ut-accent);
}

.utcom-mobile-menu__search {
    margin: 24px 0;
}

.utcom-mobile-menu__cta {
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   18. PAGINATION
   ========================================================================== */

.utcom-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 40px 0;
}

.utcom-pagination a,
.utcom-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--ut-white);
    border: 1px solid var(--ut-gray-300);
    border-radius: 6px;
    color: var(--ut-dark);
    font-size: 14px;
    transition: all 0.2s;
}

.utcom-pagination a:hover {
    background: var(--ut-primary);
    border-color: var(--ut-primary);
    color: var(--ut-white);
}

.utcom-pagination .current {
    background: var(--ut-primary);
    border-color: var(--ut-primary);
    color: var(--ut-white);
}

/* ==========================================================================
   19. SEARCH & 404
   ========================================================================== */

.utcom-search-page,
.utcom-404-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px var(--ut-padding);
    text-align: center;
}

.utcom-404-page h1 {
    font-size: 120px;
    color: var(--ut-gray-300);
    margin-bottom: 16px;
}

.utcom-search-form {
    display: flex;
    gap: 8px;
    max-width: 500px;
    margin: 0 auto;
}

.utcom-search-form input[type="search"] {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--ut-gray-300);
    border-radius: 6px;
    font-family: var(--ut-font-body);
    font-size: 16px;
    transition: border-color var(--ut-transition);
}

.utcom-search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--ut-primary);
}

.utcom-search-form button {
    padding: 12px 24px;
}

/* Back to top */
.utcom-back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    background: var(--ut-primary);
    color: var(--ut-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ut-transition), visibility var(--ut-transition), transform 0.2s;
    z-index: 999;
}

.utcom-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.utcom-back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(13,59,102,0.3);
}

/* Reading time */
.utcom-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.utcom-reading-time__icon {
    vertical-align: middle;
}

/* Article meta */
.utcom-article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ut-gray-500);
}

.utcom-article-meta__category {
    color: var(--ut-secondary);
    font-weight: 500;
}

/* ==========================================================================
   20. ANIMATIONS
   ========================================================================== */

@keyframes utcomSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes utcomFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */

/* --- Arche pub : masquee en dessous de 1400px --- */
@media (max-width: 1399px) {
    .utcom-arche-banner,
    .utcom-arche-sides {
        display: none;
    }

    body.utcom-has-arche-pub .utcom-site-wrapper {
        max-width: 100%;
        box-shadow: none;
    }
}

/* --- Tablette : 1024px --- */
@media (max-width: 1024px) {
    .utcom-hero__grid {
        grid-template-columns: 1fr;
    }

    .utcom-hero__sidebar {
        flex-direction: row;
        overflow-x: auto;
    }

    .utcom-hero__sidebar-card {
        min-width: 280px;
    }

    .utcom-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .utcom-directory-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .utcom-article-container {
        grid-template-columns: 1fr;
    }

    .utcom-sidebar {
        position: static;
    }

    .utcom-newsletter__grid {
        grid-template-columns: 1fr;
    }

    .utcom-company-header__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .utcom-company-header__logo {
        margin: 0 auto;
    }

    .utcom-company-header__actions {
        flex-direction: row;
        justify-content: center;
    }

    .utcom-company-container {
        gr