/*
Theme Name:       CCN
Theme URI:        http://www.clic-clic-network.com/
Version:          2.0
Description:      CCN Theme.
Author:           Clic Clic Network
*/

/* main.min.css est désormais chargé via un <link> séparé (en parallèle) dans html-header.twig
   — l'ancien @import (séquentiel, bloquant) a été retiré pour accélérer l'affichage. */

/* ============================================================
   TYPOGRAPHIE DU SITE — Gotham (graisses complètes)
   Choix validé 2026-06-26. On enrichit les 2 noms de police déjà
   utilisés partout dans le thème, pour basculer sur les bonnes graisses
   sans toucher à chaque sélecteur (et sans affecter les icônes) :
     • « gotham-light » (corps de lecture)  -> Gotham BOOK  (+ Book Italic)
     • « gotham-medium » (titres)           -> Gotham BOLD  (+ Bold Italic)
   Fichiers .otf dans assets/fonts/ (à convertir en .woff2 lors de la phase perf).
   ============================================================ */
@font-face{font-family:"gotham-light";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/Gotham-Book.woff2) format("woff2"),url(assets/fonts/Gotham-Book.otf) format("opentype");}
@font-face{font-family:"gotham-light";font-style:italic;font-weight:100 900;font-display:swap;src:url(assets/fonts/Gotham-BookItalic.woff2) format("woff2"),url(assets/fonts/Gotham-BookItalic.otf) format("opentype");}
@font-face{font-family:"gotham_light";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/Gotham-Book.woff2) format("woff2"),url(assets/fonts/Gotham-Book.otf) format("opentype");}
@font-face{font-family:"gotham_light";font-style:italic;font-weight:100 900;font-display:swap;src:url(assets/fonts/Gotham-BookItalic.woff2) format("woff2"),url(assets/fonts/Gotham-BookItalic.otf) format("opentype");}
@font-face{font-family:"gotham-medium";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/Gotham-Bold.woff2) format("woff2"),url(assets/fonts/Gotham-Bold.otf) format("opentype");}
@font-face{font-family:"gotham-medium";font-style:italic;font-weight:100 900;font-display:swap;src:url(assets/fonts/Gotham-BoldItalic.woff2) format("woff2"),url(assets/fonts/Gotham-BoldItalic.otf) format("opentype");}
/* ============================================================ */

/* ============================================================
   JOURNAL — liste d'articles & article seul (Timber 2)
   Style minimaliste, hérite des polices du thème.
   ============================================================ */

/* --- Liste (page Journal) --- */
.journal { padding: 60px 0 100px; }
.journal .container { max-width: 760px; }
.journal-head { text-align: center; margin-bottom: 60px; }
.journal-head h1 { margin: 0 0 20px; }
.journal-intro { color: #767676; }

.journal-list { border-top: 1px solid #e6e6e6; }
.journal-item { border-bottom: 1px solid #e6e6e6; position: relative; cursor: pointer; }
.journal-item-link {
	display: block;
	padding: 36px 0;
	color: inherit;
	text-decoration: none;
	transition: opacity .25s ease;
}
.journal-item-link:hover { opacity: .55; }
.journal-date,
.article-date {
	display: block;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #767676;
	margin-bottom: 12px;
}
.journal-excerpt { margin: 0 0 14px; color: #555; }
.journal-more { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.journal-more .icon { font-size: 10px; margin-left: 4px; }
.journal-empty { color: #767676; text-align: center; padding: 40px 0; }

/* --- Article seul --- */
.article-single { padding: 50px 0 100px; }
.article-single .container { max-width: 820px; }
.article-back {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #767676;
	text-decoration: none;
	margin-bottom: 40px;
}
.article-back:hover { color: #000; }
.article-back .icon { font-size: 11px; margin-right: 7px; line-height: 1; }
.article-back--bottom { margin: 60px 0 0; }
.article-header { margin-bottom: 28px; }
.article-title { margin: 0; line-height: 1.15; font-family: "gotham-medium", "Arial", "Sans Serif"; }
.article-author { margin: 14px 0 0; color: #767676; font-size: 14px; }
.article-cover { margin: 0 0 40px; }
.article-cover img { width: 100%; height: auto; display: block; }
.article-content { line-height: 1.75; color: #222; }
.article-content p { margin: 0 0 1.5em; }
.article-content h2 { margin: 1.8em 0 .5em; font-size: 24px !important; line-height: 1.3; font-family: "gotham-medium", "Arial", "Sans Serif"; }
.article-content h3 { margin: 1.6em 0 .4em; font-size: 18px !important; line-height: 1.35; font-family: "gotham-medium", "Arial", "Sans Serif"; }
.article-content img { max-width: 100%; height: auto; }
/* Empêche les longues URLs / mots insécables de déborder (et d'être coupés, car body a overflow-x:hidden) */
.article-content { overflow-wrap: break-word; word-break: break-word; }
.article-content a { overflow-wrap: anywhere; }

/* --- Contenu rédigé (WYSIWYG) : liens, listes, citations, tableaux ---
   Ajouté 2026-06-28. Sélecteurs propres à .article-content (n'existaient pas
   ailleurs) → cohérent avec le site (Gotham, séparateurs fins #e6e6e6). */

/* Liens : noirs, soulignés finement, estompés au survol */
.article-content a {
	color: #000; text-decoration: underline;
	text-underline-offset: 3px; text-decoration-thickness: 1px;
	transition: opacity .2s ease;
}
.article-content a:hover { opacity: .55; }

/* Listes à puces (flèche, comme les pages Formations) & numérotées */
.article-content ul { list-style-image: url('assets/img/pictos/arrow-right.png'); margin: 0 0 1.5em; padding-left: 18px; }
.article-content ul li { padding-left: 6px; }
.article-content ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.article-content li { margin: 0 0 .55em; line-height: 1.75; }
.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul { margin: .55em 0 0; }

/* Citation / mise en exergue */
.article-content blockquote {
	margin: 2.2em 0; padding: 2px 0 2px 26px;
	border-left: 2px solid #000;
	font-size: 21px; line-height: 1.5; color: #333;
}
.article-content blockquote p { margin: 0 0 .5em; }
.article-content blockquote p:last-child { margin: 0; }
.article-content blockquote cite {
	display: block; margin-top: 14px;
	font-size: 14px; font-style: normal; color: #767676;
	font-family: "gotham-light", "Arial", "Sans Serif";
}
.article-content blockquote cite::before { content: "— "; }

/* Tableaux */
.article-content table {
	width: 100%; border-collapse: collapse;
	margin: 2.2em 0; font-size: 15px; line-height: 1.5;
	display: block; overflow-x: auto; /* défilement horizontal sur mobile si large */
}
.article-content th,
.article-content td {
	text-align: left; padding: 13px 16px;
	border-bottom: 1px solid #e6e6e6; vertical-align: top;
}
.article-content thead th {
	border-bottom: 1px solid #000;
	font-family: "gotham-medium", "Arial", "Sans Serif"; font-weight: normal;
	color: #000;
}
.article-content tbody td,
.article-content tbody th {
	font-family: "gotham-light", "Arial", "Sans Serif"; font-weight: normal;
}
.article-content tbody tr:last-child td { border-bottom: none; }

/* --- Catégories (libellé cliquable) + ligne meta --- */
.journal-eyebrow { margin: 0 0 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.journal-eyebrow a { color: #767676; text-decoration: none; }
.journal-eyebrow a:hover { color: #000; }

.journal-item { padding: 36px 0; }
.journal-meta,
.article-meta {
	margin: 0 0 12px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #767676;
}
.journal-meta .journal-date,
.article-meta .article-date { display: inline; margin: 0; }
.journal-sep, .article-sep { margin: 0 8px; color: #ccc; }
.journal-cat, .article-cat {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.journal-cat:hover, .article-cat:hover { border-bottom-color: #000; }

.journal-title { margin: 0 0 12px; line-height: 1.2; font-family: "gotham-medium", "Arial", "Sans Serif"; font-size: 24px; }
.journal-title a { color: inherit; text-decoration: none; transition: opacity .2s ease; font-family: "gotham-medium", "Arial", "Sans Serif"; }
.journal-title a:hover { opacity: .55; }
/* Le lien du titre est étiré sur tout l'item → item entièrement cliquable */
.journal-title a::after { content: ''; position: absolute; inset: 0; }
.journal-more { display: inline-block; color: inherit; text-decoration: none; }
.journal-more:hover { opacity: .55; }
.article-meta { margin: 18px 0 0; font-size: 13px; letter-spacing: 0; text-transform: none; color: #767676; }

/* --- Barre de filtres par catégorie (boutons encadrés, style du site) --- */
.journal-filters {
	list-style: none;
	padding: 0;
	margin: 0 0 50px;
	text-align: center;
}
.journal-filters li { display: inline-block; margin: 0 6px 10px; }
.journal-filters a {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid #000;
	color: #000;
	background: #fff;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.2;
	transition: background .2s ease, color .2s ease;
}
.journal-filters a:hover,
.journal-filters a.active { background: #000; color: #fff; }

/* Taille des titres de la liste — forcée pour passer outre une règle du thème (.contenu) */
.journal .journal-title,
.journal .journal-title a {
	font-size: 24px !important;
	line-height: 1.2;
	font-family: "gotham-medium", "Arial", "Sans Serif";
}

/* Taille du titre de l'article — forcée (même règle de thème à contourner que la liste) */
.article-single .article-title {
	font-size: 36px !important;
	line-height: 1.2;
	font-family: "gotham-medium", "Arial", "Sans Serif";
}

/* Catégorie de l'article : badge encadré (même style que les filtres du Journal) */
.article-cat {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid #000;
	background: #fff;
	color: #000;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	font-size: 13px;
	line-height: 1.2;
	transition: background .2s ease, color .2s ease;
}
.article-cat:hover { background: #000; color: #fff; }

/* Pied d'article : « Classé dans » + badge catégorie */
.article-footer { margin-top: 50px; padding-top: 30px; border-top: 1px solid #e6e6e6; }
.article-filed { margin: 0 0 14px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #767676; }

/* Articles similaires (même catégorie) */
.article-related { margin-top: 55px; }
.article-related-title {
	margin: 0 0 18px;
	font-size: 14px !important;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #000;
	font-family: "gotham-medium", "Arial", "Sans Serif";
}
.article-related-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #e6e6e6; }
.article-related-list li { border-bottom: 1px solid #e6e6e6; }
.article-related-list a { display: block; padding: 18px 0; color: inherit; text-decoration: none; transition: opacity .2s ease; }
.article-related-list a:hover { opacity: .55; }
.article-related-date { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #767676; margin-bottom: 5px; }
.article-related-list .article-related-name { font-size: 19px !important; font-family: "gotham-medium", "Arial", "Sans Serif"; }

/* ============================================================
   FORMATIONS — fiche détaillée
   ============================================================ */
.formation-single { padding: 50px 0 100px; }
.formation-single .container { max-width: 820px; }

/* En-tête noir arrondi (comme la fiche PDF) */
.formation-header {
	background: #000;
	color: #fff;
	border-radius: 20px;
	padding: 55px 40px;
	text-align: center;
	margin: 30px 0 55px;
}
.formation-single .formation-title {
	color: #fff !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 36px !important;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.formation-baseline {
	color: #fff !important;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0;
	opacity: .92;
}
.formation-publics { list-style: none; padding: 0; margin: 16px 0 0; }
.formation-publics li {
	display: inline-block;
	margin: 5px;
	padding: 6px 16px;
	border: 1px solid #fff;
	border-radius: 30px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #fff;   /* texte blanc : sinon une règle générique du thème le rend sombre (invisible sur fond noir) */
}

/* Bouton de téléchargement du PDF */
.formation-download { text-align: center; margin: -20px 0 45px; }
.formation-download-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 26px;
	border: 1px solid #000;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 13px;
	transition: background .2s ease, color .2s ease;
}
.formation-download-btn:hover { background: #000; color: #fff !important; }
.formation-download-btn .icon { margin-right: 8px; font-size: 11px; }

/* Sections de contenu */
.formation-section { margin: 0 0 42px; }
.formation-single .formation-section h2,
.formation-single .formation-modalites h2 {
	font-size: 24px !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	margin: 0 0 28px;
}
.formation-rte { color: #222; line-height: 1.75; }
.formation-rte p { margin: 0 0 1.5em; }
.formation-rte ul { list-style-image: url('assets/img/pictos/arrow-right.png'); padding-left: 18px; margin: 0 0 1em; }
.formation-rte ul li { margin: 0 0 9px; padding-left: 6px; }
.formation-rte ol { padding-left: 20px; margin: 0 0 1em; }
.formation-rte ol li { margin: 0 0 9px; padding-left: 4px; }
.formation-rte em { color: #555; }
.formation-single .formation-rte h3 {
	font-size: 16px !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	margin: 1.6em 0 .6em;
}

/* Encadré durée / tarifs / modalités */
.formation-modalites {
	background: #f5f5f5;
	border-radius: 14px;
	padding: 30px 34px;
	margin: 50px 0;
}
.formation-modalites ul { list-style: none; padding: 0; margin: 0; }
.formation-modalites li { margin: 0 0 9px; color: #333; }
.formation-modalites li:last-child { margin-bottom: 0; }

/* Formations du même thème */
.formation-related { margin-top: 55px; padding-top: 35px; border-top: 1px solid #e6e6e6; }
.formation-single .formation-related h2 {
	font-size: 24px !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	margin: 0 0 18px;
}
/* « Dans le même thème » : cartes réutilisant le langage de la page d'archive Formations */
.formation-related-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.formation-related-cards .formation-item { flex: 1 1 320px; max-width: calc(50% - 12px); padding: 36px 30px; display: flex; flex-direction: column; }
.formation-related-cards .formation-item:only-child { max-width: 100%; }
.formation-related-cards .formation-item-theme { margin-bottom: 14px; }
.formation-related-cards .formation-item-title {
	margin: 0 0 12px;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 22px !important;
	line-height: 1.25;
}
.formation-related-cards .formation-item-title a { font-size: 22px !important; }
.formation-related-cards .formation-item-baseline { font-size: 15px; margin: 0 0 18px; }
.formation-related-cards .formation-item-more { margin-top: auto; }

/* Appel à l'action */
.formation-cta { text-align: center; margin: 55px 0 0; }
.formation-cta-text { margin: 0 0 16px; color: #555; }
.formation-cta-btn {
	display: inline-block;
	padding: 13px 30px;
	background: #000;
	color: #fff !important;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 14px;
	transition: opacity .2s ease;
}
.formation-cta-btn:hover { opacity: .75; }

/* --- Liste des formations (archive) --- */
.formations-archive { padding: 60px 0 100px; }
.formations-archive .container { max-width: 1040px; }
.formation-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.formation-item {
	position: relative;          /* pour le lien étiré (carte entièrement cliquable) */
	padding: 40px 30px;
	border: 1px solid #000;
	text-align: center;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
/* Le lien du titre est étiré sur toute la carte → carte entièrement cliquable */
.formation-item-title a::after { content: ''; position: absolute; inset: 0; }
.formation-item:hover { background: #000; }
.formation-item:hover .formation-item-theme,
.formation-item:hover .formation-item-baseline { color: #fff; }
.formation-item:hover .formation-item-title a,
.formation-item:hover .formation-item-more { color: #fff !important; }
.formation-item-theme {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #767676;
	margin-bottom: 10px;
}
.formations-archive .formation-item-title {
	margin: 0 0 8px;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 24px !important;
	line-height: 1.2;
}
.formation-item-title a {
	color: inherit;
	text-decoration: none;
	transition: opacity .2s ease;
	font-size: 24px !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
}
/* (survol géré par le hover de la carte entière, ci-dessus) */
.formation-item-baseline { margin: 0 0 14px; color: #555; }
.formation-item-more {
	display: inline-block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: inherit;
	text-decoration: none;
}
.formation-item-more:hover { opacity: .55; }
.formation-item-more .icon { font-size: 10px; margin-left: 4px; }

/* ============================================================
   CLIENTS — index alphabétique (liens vers les fiches projet)
   ============================================================ */
.clients { padding: 60px 0 100px; }
.clients .container { max-width: 1080px; }
.clients-head { text-align: center; margin-bottom: 60px; }
.clients-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; align-items: start; text-align: center; }

/* 3 colonnes (ordinateur) → 2 colonnes (tablette portrait) */
@media (max-width: 991px) {
	.clients .container { max-width: 760px; }
	.clients-index { grid-template-columns: repeat(2, 1fr); }
}
.clients-group { margin: 0; }
.clients-letter {
	display: block;
	font-size: 72px;
	line-height: 1;
	color: #cccccc;
	margin: 0 0 10px;
}
.clients-names { list-style: none; padding: 0; margin: 0; }
.clients-names li { margin: 0 0 10px; }
.clients-names a { color: inherit; text-decoration: none; transition: opacity .2s ease; font-size: 18px !important; }
.clients-names a:hover { opacity: .55; }

/* ============================================================
   FICHE PROJET v2 — colonne gauche fixe + visuels défilants
   ============================================================ */
.single-project2 { padding: 0; }
.project2-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 50px 40px 90px;
}
/* ===== Fil d'Ariane réutilisable (toutes pages) ===== */
.ccn-breadcrumb-band {
	max-width: 1320px;
	margin: 0 auto;
	padding: 26px 40px 0;
}
.ccn-breadcrumb {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 0 0 18px;
	margin: 0 0 34px;
	border-bottom: 1px solid #e6e6e6;
	font-size: 11px;
	color: #767676;
}
.ccn-breadcrumb__item { display: flex; align-items: center; }
.ccn-breadcrumb__item:not(:last-child)::after { content: "/"; margin-left: 8px; color: #ccc; }
.ccn-breadcrumb__link { color: #767676; text-decoration: none; transition: color .2s ease; }
.ccn-breadcrumb__link:hover { color: #000; }
.ccn-breadcrumb__current { color: #000; overflow-wrap: anywhere; }
@media (max-width: 767px) { .ccn-breadcrumb-band { padding: 16px 20px 0; } }

/* Fil d'Ariane aligné sur le contenu de chaque page (largeur + padding identiques).
   Projets / Fiche projet restent à la valeur par défaut (1320 / 40 = déjà alignés). */
/* Pages "texte" à conteneur custom (padding 40) : L'Agence, Contact */
body.page-template-tpl-about .ccn-breadcrumb-band,
body.page-template-tpl-contact .ccn-breadcrumb-band { max-width: 820px; }
/* Pages à conteneur Bootstrap (padding 15) — 820 : Clients, Fiche formation, Article */
body.single-formation .ccn-breadcrumb-band,
body.single-post .ccn-breadcrumb-band { max-width: 820px; padding-left: 15px; padding-right: 15px; }
/* TEST 3 colonnes : Clients élargi à 1080 (aligné sur le contenu) */
body.page-template-tpl-clients .ccn-breadcrumb-band { max-width: 1080px; padding-left: 15px; padding-right: 15px; }
/* 760 : Entre deux clics, Catégorie */
body.page-template-tpl-journal .ccn-breadcrumb-band,
body.category .ccn-breadcrumb-band { max-width: 760px; padding-left: 15px; padding-right: 15px; }
/* 1040 : Formations (liste) */
body.post-type-archive-formation .ccn-breadcrumb-band { max-width: 1040px; padding-left: 15px; padding-right: 15px; }
.project2-inner {
	display: flex;
	align-items: flex-start;
	gap: 70px;
}
.project2-info {
	position: -webkit-sticky;
	position: sticky;
	top: 40px;
	flex: 0 0 300px;
	width: 300px;
}
.project2-title {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 36px !important;
	line-height: 1.1;
	margin: 0 0 20px;
}
.project2-meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin: 0 0 40px;
	padding: 0 0 28px;
	border-bottom: 1px solid #e6e6e6;
}
.project2-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.project2-tag {
	display: inline-block;
	padding: 8px 16px;
	background: #000;
	color: #fff;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .02em;
}
.project2-block { margin: 0 0 26px; }
.project2-label {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 12px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #767676;
	margin: 0 0 10px;
}
.project2-desc { font-size: 16px; line-height: 1.5; color: #000; }
.project2-desc p { margin: 0 0 12px; }
.project2-desc p:last-child { margin-bottom: 0; }
.project2-roles { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.project2-roles li { margin: 0; }
.project2-roles a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid #000;
	color: #000;
	background: #fff;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.2;
	transition: background .2s ease, color .2s ease;
}
.project2-roles a:hover { background: #000; color: #fff; }
.project2-visit {
	flex: 0 0 auto;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid #000;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #000 !important;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.project2-visit:hover { background: #000; color: #fff !important; }
.project2-visit .icon { font-size: 10px; }
.project2-visuals { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.project2-visual { margin: 0; }
.project2-visual.is-full { flex: 0 0 100%; }
.project2-visual.is-half { flex: 0 0 calc(50% - 12px); min-width: 0; }
.project2-visual img,
.project2-visual video { display: block; width: 100%; height: auto; }
.project2-visual figcaption { margin: 10px 0 0; font-size: 12px; color: #767676; text-align: center; line-height: 1.4; letter-spacing: .01em; }
.project2-nav {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	margin: 60px 0 0;
	padding: 34px 0 0;
	border-top: 1px solid #e6e6e6;
}
.project2-nav__item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; max-width: 48%; align-items: flex-start; }
.project2-nav__item--next { margin-left: auto; text-align: right; align-items: flex-end; }
.project2-nav__label {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #767676;
}
.project2-nav__title {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 22px;
	line-height: 1.15;
	color: #000;
	transition: opacity .2s ease;
}
.project2-nav__item:hover .project2-nav__title { opacity: .55; }

@media (max-width: 991px) {
	.project2-wrap { padding: 30px 20px 60px; }
	.project2-inner { flex-direction: column; gap: 30px; }
	.project2-info { position: static; width: 100%; flex-basis: auto; }
	.project2-title { font-size: 28px !important; }
	.project2-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
	.project2-visual.is-half { flex: 0 0 100%; }
	.project2-nav { flex-direction: column; gap: 24px; }
	.project2-nav__item, .project2-nav__item--next { max-width: 100%; margin-left: 0; text-align: left; align-items: flex-start; }
}

@media (max-width: 767px) {
	.journal, .article-single { padding-left: 20px; padding-right: 20px; }
	.article-single .article-title { font-size: 28px !important; }
	.formation-single { padding-left: 20px; padding-right: 20px; }
	.formation-header { padding: 40px 24px; }
	.formation-single .formation-title { font-size: 27px !important; }
	/* Cibles tactiles plus confortables sur téléphone (>= ~40px) */
	.works-viewswitch button { padding: 11px 16px; }
	.project2-roles a { padding: 10px 14px; }
	.article-cat { padding: 10px 16px; }
	.formations-archive { padding-left: 20px; padding-right: 20px; }
	.formation-list { grid-template-columns: 1fr; }
	.formation-related-cards .formation-item { max-width: 100%; flex-basis: 100%; }
	.clients { padding-left: 20px; padding-right: 20px; }
	.clients-index { grid-template-columns: 1fr; }
}

/* ===== Page de maintenance (autonome, aux couleurs du site) ===== */
.page-maintenance { margin: 0; background: #fff; }
.maintenance { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; }
.maintenance__inner { max-width: 620px; }
.maintenance__logo { width: auto; height: 88px; margin: 0 0 40px; }
.maintenance__title {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 34px;
	line-height: 1.2;
	color: #000;
	margin: 0 0 18px;
}
.maintenance__message {
	font-family: "gotham-light", "Arial", "Sans Serif";
	font-size: 18px;
	line-height: 1.65;
	color: #555;
	margin: 0;
}
.maintenance__content {
	font-family: "gotham-light", "Arial", "Sans Serif";
	font-size: 18px;
	line-height: 1.65;
	color: #555;
}
.maintenance__content p { margin: 0 0 1em; }
.maintenance__content p:last-child { margin-bottom: 0; }
.maintenance__content a { color: #000; text-decoration: underline; }
.maintenance__content img { max-width: 100%; height: auto; margin: 20px 0; }
.maintenance__content h2 { font-family: "gotham-medium", "Arial", "Sans Serif"; font-size: 22px; color: #000; margin: 1.2em 0 .4em; }
.maintenance__content ul, .maintenance__content ol { text-align: left; display: inline-block; margin: 0 0 1em; }
@media (max-width: 767px) {
	.maintenance__logo { height: 64px; margin-bottom: 30px; }
	.maintenance__title { font-size: 27px; }
	.maintenance__message, .maintenance__content { font-size: 16px; }
}

/* ===== Page 404 ===== */
.page-404 .page404 { padding: 0; }
.page404 .container { max-width: 1320px; margin: 0 auto; padding: 30px 40px 90px; }
.page404 .module-breadcrumb { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; font-size: 14px; color: #767676; }
.page404 .module-breadcrumb__item { display: flex; align-items: center; }
.page404 .module-breadcrumb__item:not(:last-child)::after { content: "/"; margin-left: 8px; color: #767676; }
.page404 .module-breadcrumb__link { color: #767676; text-decoration: none; transition: color .2s ease; }
.page404 .module-breadcrumb__link:hover { color: #000; }
.page404 .module-breadcrumb__current { color: #000; }
.page404 .page404__wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 58vh; }
.page404 .page404__label { font-family: "gotham-medium", "Arial", "Sans Serif"; font-size: clamp(96px, 18vw, 200px); line-height: 1; color: #333; margin: 0 0 24px; }
.page404 .page404__message { font-family: "gotham-light", "Arial", "Sans Serif"; font-size: 18px; line-height: 1.4; color: #000; margin: 0 0 48px; }
.page404 .page404__btn { display: inline-block; padding: 18px 44px; border: 1px solid #333; font-family: "gotham-medium", "Arial", "Sans Serif"; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #000 !important; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.page404 .page404__btn:hover { background-color: #000; color: #fff !important; }

@media (max-width: 767px) {
	.page404 .container { padding: 20px 20px 60px; }
	.page404 .page404__message { font-size: 16px; }
	.page404 .page404__btn { padding: 16px 32px; }
}

/* ===== Page Projets — grille aérée ===== */
.works { padding: 0; }
.works-wrap { max-width: 1320px; margin: 0 auto; padding: 16px 40px 100px; }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; }
.works-tile { display: block; text-decoration: none; }
/* Vignettes toutes au même format (paysage 3:2) → grille régulière */
.works-tile__media { position: relative; margin: 0; overflow: hidden; background: #f3f3f3; aspect-ratio: 3 / 2; }
.works-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.works-tile:hover .works-tile__media img { transform: scale(1.04); }
.works-tile__title {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	color: #fff !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 16px !important;
	line-height: 1.3;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity .3s ease;
}
.works-tile:hover .works-tile__title { opacity: 1; }
/* Tactile (iPad/mobile) : pas de survol → nom affiché en permanence, en bas, sur un léger dégradé */
@media (max-width: 991px) {
	.works-tile__title {
		opacity: 1;
		align-items: flex-end;
		justify-content: center;
		padding: 0 14px 14px;
		background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,0) 72%);
		font-size: 15px !important;
	}
}
@media (max-width: 991px) {
	.works-grid { grid-template-columns: repeat(2, 1fr); gap: 35px; }
}
@media (max-width: 600px) {
	.works-wrap { padding: 8px 20px 60px; }
	.works-grid { grid-template-columns: 1fr; }
}

/* ===== Menu principal — disposition verticale (items empilés, fins traits) ===== */
.menu-wrapper .menu-list ul {
	list-style: none;
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	border-top: 1px solid #e6e6e6;
}
.menu-wrapper .menu-list ul li {
	display: block;
	margin: 0;
	border-bottom: 1px solid #e6e6e6;
}
.menu-wrapper .menu-list ul li:after { display: none !important; }
.menu-wrapper .menu-list ul li a {
	display: block;
	padding: 22px 10px;
	font-size: 26px !important;
	line-height: 1.1;
	transition: background-color .25s ease, color .25s ease;
}
.menu-wrapper .menu-list ul li a:hover {
	background-color: #f6f6f6;
	color: #000 !important;
}
@media (max-width: 600px) {
	.menu-wrapper .menu-list ul { max-width: 86%; }
	.menu-wrapper .menu-list ul li a { font-size: 26px !important; padding: 18px 10px; }
}

/* Logos décoratifs (menu + accueil) : réduits sur tablette pour tenir dans la marge
   étroite sans empiéter sur le texte (sur téléphone ils sont déjà masqués via .hidden-xs). */
@media (max-width: 991px) {
	#logoLeft img { height: 52px; }
	#logoRight img { height: 28px; }
}

/* Petit logo fixe du menu — TÉLÉPHONE uniquement (centré en haut) */
.menu-logo-mobile { display: none; }
@media (max-width: 767px) {
	.menu-logo-mobile {
		display: block;
		position: absolute;
		top: 32px;          /* aligné sur le logo de la barre d'en-tête des pages intérieures */
		left: 0;
		right: 0;
		text-align: center;
		z-index: 2;
	}
	.menu-logo-mobile img { height: 64px; width: auto; display: inline-block; }
}

/* ===== Page L'Agence — version épurée ===== */
.about2 { padding: 0; }
.about2-wrap { max-width: 820px; margin: 0 auto; padding: 16px 40px 100px; }
.about2-intro h2 {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 24px !important;
	line-height: 1.3;
	color: #000;
	margin: 1.8em 0 .5em;
}
.about2-intro h3 {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 18px !important;
	line-height: 1.35;
	color: #000;
	margin: 1.6em 0 .4em;
}
.about2-cta {
	display: inline-flex;
	align-items: center;
	margin: 34px 0 0;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 14px !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #000 !important;
	text-decoration: none;
	transition: opacity .2s ease;
}
.about2-cta:hover { opacity: .55; }
.about2-cta .icon { font-size: 10px; margin-left: 8px; }
.about2-expertises,
.about2-articles { margin-top: 70px; padding-top: 60px; border-top: 1px solid #e6e6e6; }
.about2-section-title {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 24px !important;
	letter-spacing: .03em;
	margin: 0 0 28px;
}
/* « Derniers articles » — mêmes cartes que les fiches formations (2 par ligne, centrées) */
.about2-articles-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.about2-articles-cards .formation-item { flex: 1 1 320px; max-width: calc(50% - 12px); padding: 36px 30px; display: flex; flex-direction: column; }
.about2-articles-cards .formation-item:only-child { max-width: 100%; }
.about2-articles-cards .formation-item-theme { margin-bottom: 14px; }
.about2-articles-cards .formation-item-title {
	margin: 0 0 12px;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 22px !important;
	line-height: 1.25;
}
.about2-articles-cards .formation-item-title a { font-size: 22px !important; }
.about2-articles-cards .formation-item-baseline { font-size: 15px; margin: 0 0 18px; }
.about2-articles-cards .formation-item-more { margin-top: auto; }
.about2-articles .about2-cta { margin-top: 40px; }

/* Expertises — cartes gris doux numérotées (grand chiffre ton sur ton) */
.about2-expertises-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about2-exp {
	position: relative;
	overflow: hidden;
	background: #f4f4f1;
	border-radius: 14px;
	padding: 26px 28px 24px;
}
.about2-exp__num {
	position: absolute;
	top: 14px;
	right: 20px;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 54px;
	line-height: 1;
	color: #d8d8d0;
	pointer-events: none;
}
.about2-exp__title {
	position: relative;
	z-index: 1;
	margin: 0 0 14px;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 17px !important;
	letter-spacing: 0;
	text-transform: none;
	color: #000;
}
.about2-exp__list { position: relative; z-index: 1; }
.about2-exp__list ul { list-style: none; padding: 0; margin: 0; }
.about2-exp__list li {
	font-family: "gotham-light", "Arial", "Sans Serif";
	font-size: 15px;
	line-height: 1.9;
	color: #5a5a5a;
}
.about2-exp__list li a { color: #000; text-decoration: none; transition: opacity .2s ease; }
.about2-exp__list li a:hover { opacity: .55; }
/* Repli si le découpage échoue : ancien rendu en 2 colonnes de texte */
.about2-expertises-grid--raw { display: block; column-count: 2; column-gap: 64px; }
.about2-expertises-grid--raw h3 {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 15px !important; text-transform: uppercase; letter-spacing: .05em;
	color: #000; margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid #e6e6e6; break-after: avoid;
}
.about2-expertises-grid--raw ul { list-style: none; padding: 0; margin: 0 0 38px; break-inside: avoid; }
.about2-expertises-grid--raw li { font-size: 16px; line-height: 1.65; color: #555; }
.about2-expertises-grid--raw li a { color: #000; text-decoration: none; }
@media (max-width: 767px) {
	.about2-wrap { padding: 8px 20px 60px; }
	.about2-expertises-grid { grid-template-columns: 1fr; }
	.about2-expertises-grid--raw { column-count: 1; }
	.about2-articles-cards .formation-item { max-width: 100%; flex-basis: 100%; }
}

/* ===== Footer — 3 colonnes (Contact · Navigation · Suivez-nous) ===== */
/* ===================================================================
   CONTACT — modernisée (famille journal-head, largeur 820)
   =================================================================== */
.contact2-wrap { max-width: 820px; margin: 0 auto; padding: 16px 40px 100px; }
.contact2-form { margin-top: 10px; }
@media (max-width: 767px) {
	.contact2-wrap { padding: 8px 20px 60px; }
}

/* ===== Formulaire « Contactez-nous » — refonte minimaliste « soulignée » ===== */
.contact2-form .frm_form_field { margin: 0 0 30px; padding: 0; }
/* Libellés en petites capitales (comme les étiquettes du site) */
.contact2-form .frm_primary_label {
	display: block;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 12px;
	font-weight: normal;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #555;
}
.contact2-form .frm_required { color: #767676; font-weight: normal; }
/* Champs réduits à un fin trait en bas (pas de boîte) */
.contact2-form input[type="text"],
.contact2-form input[type="email"],
.contact2-form input[type="tel"],
.contact2-form input[type="url"],
.contact2-form input[type="number"],
.contact2-form select,
.contact2-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 0 !important;
	border-bottom: 1px solid #cfcfcf !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 10px 0 !important;
	font-family: "gotham-light", "Arial", "Sans Serif";
	font-size: 16px;
	color: #1a1a1a;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s ease;
}
.contact2-form textarea { min-height: 130px; line-height: 1.55; resize: vertical; }
.contact2-form input:focus,
.contact2-form select:focus,
.contact2-form textarea:focus { outline: none; border-bottom-color: #000 !important; }
.contact2-form ::placeholder { color: #aaa; }
/* Select : flèche personnalisée (appearance retirée) */
.contact2-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 2px center !important;
	background-size: 12px 8px !important;
	padding-right: 22px !important;
	cursor: pointer;
}
/* Bouton « Envoyer » : style des boutons du site (encadré, survol noir) */
.contact2-form .frm_button_submit {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	padding: 13px 34px !important;
	border: 1px solid #000 !important;
	background: #fff !important;
	color: #000 !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 13px !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s ease, color .2s ease;
}
.contact2-form .frm_button_submit:hover { background: #000 !important; color: #fff !important; }
/* Select « Sujet » : Formidable lui impose une bordure plus forte → on force le style souligné (spécificité renforcée) */
.contact2-form .frm_forms .frm_form_field select {
	border: 0 !important;
	border-bottom: 1px solid #cfcfcf !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	padding: 10px 22px 10px 0 !important;
	height: auto !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 2px center !important;
	background-size: 12px 8px !important;
}
.contact2-form .frm_forms .frm_form_field select:focus { border-bottom-color: #000 !important; }

/* ===== « Sujet » en cases à cocher (sélection multiple) — style minimaliste ===== */
/* Formidable impose `.with_frm_style .vertical_radio .frm_checkbox{margin-bottom:10px}`
   (3 classes, chargé après notre style) → on force notre espacement avec !important. */
.contact2-form .frm_checkbox { margin: 0 0 16px !important; padding: 0; }
/* Un peu d'air entre le libellé « SUJET » et la première case (comme les autres champs).
   Doit dépasser les 8px de marge du libellé, sinon les marges fusionnent (margin collapsing). */
.contact2-form .frm_checkbox:first-of-type { margin-top: 28px !important; }
.contact2-form .frm_checkbox:last-of-type { margin-bottom: 0 !important; }
.contact2-form .frm_checkbox > label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding-left: 0 !important;
	cursor: pointer;
	font-family: "gotham-light", "Arial", "Sans Serif";
	font-size: 15px !important;
	line-height: 1.4;
	color: #1a1a1a;
	font-weight: normal;
}
.contact2-form .frm_checkbox input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	opacity: 1 !important;
	flex: 0 0 auto;
	width: 18px !important;
	height: 18px !important;
	margin: -2px 0 0 !important;
	padding: 0 !important;
	border: 1px solid #767676 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	cursor: pointer;
	position: relative;
	transition: border-color .15s ease, background-color .15s ease;
}
.contact2-form .frm_checkbox input[type="checkbox"]:checked {
	background: #000 !important;
	border-color: #000 !important;
}
.contact2-form .frm_checkbox input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.contact2-form .frm_checkbox input[type="checkbox"]:focus { outline: none; border-color: #000 !important; }

.footer2 { padding: 0 !important; border-top: 1px solid #e6e6e6; }
.footer2-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 60px 40px 70px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 60px;
}
.footer2-col { flex: 1 1 200px; min-width: 0; }
.footer2-col h2 {
	margin: 0 0 20px !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 16px !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #000;
}
.footer2-col p,
.footer2-col li { font-family: "gotham-light", "Arial", "Sans Serif"; font-size: 15px; line-height: 1.7; color: #555; }
.footer2-col ul { list-style: none; padding: 0; margin: 0; }
.footer2-col li { margin: 0 0 8px; }
.footer2-contact p { margin: 0 0 14px; }
.footer2-col a { color: #555; text-decoration: none; transition: color .2s ease; }
.footer2-col a:hover { color: #000; }
.footer2-contact-intro { margin: 0 0 12px; }
.footer2-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #000 !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 15px;
}
.footer2-contact-link .icon { display: inline-block; transition: transform .2s ease; }
.footer2-contact-link:hover .icon { transform: translateX(4px); }
.footer2-contact .footer2-legal {
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid #e6e6e6;
}
.footer2-legal li { font-size: 14px; }
@media (max-width: 767px) {
	.footer2-inner { padding: 40px 20px 50px; gap: 30px; }
	.footer2-col { flex: 1 1 100%; }
}

/* ===================================================================
   PROJETS — Sélecteur de vue (Galerie / Tableau) + vue Tableau
   =================================================================== */
.works-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 35px;
}
.works-count {
	margin: 0;
	font-size: 14px;
	color: #767676;
	letter-spacing: .02em;
}
.works-viewswitch {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.works-viewswitch button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 1px solid #000;
	background: #fff;
	color: #000;
	font-family: inherit;
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.works-viewswitch button svg { fill: currentColor; display: block; }
.works-viewswitch button:hover { background: #f3f3f3; }
.works-viewswitch button.is-active { background: #000; color: #fff; }
.works-viewswitch button.is-active:hover { background: #000; }

/* Filtres sur une LIGNE défilante horizontalement — mobile + tablette portrait (≤991px).
   Gagne de la hauteur sans aucun repli (donc insensible au bug de repaint du thème). */
@media (max-width: 991px) {
	.journal-filters--scroll {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		text-align: left;
		margin: 0 0 40px;
		padding: 0 0 8px;              /* marge sous les puces pour le geste de défilement */
		scrollbar-width: none;         /* Firefox : cache la barre de défilement */
		-ms-overflow-style: none;
		/* Fondu sur le bord droit pour suggérer qu'il y a d'autres filtres → */
		-webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
		        mask-image: linear-gradient(to right, #000 86%, transparent 100%);
	}
	.journal-filters--scroll::-webkit-scrollbar { display: none; }  /* Chrome/Safari : cache la barre */
	.journal-filters--scroll li { flex: 0 0 auto; margin: 0 8px 0 0; }
	.journal-filters--scroll li:last-child { margin-right: 0; }
}

/* Bascule d'affichage des deux vues */
.works-view { display: none; }
.works-view.is-active { display: block; }

/* Projet masqué par le filtre par domaine (côté navigateur) */
.works-tile.is-filtered-out,
.works-table__row.is-filtered-out { display: none !important; }

/* Message « aucun projet ne correspond à la sélection » */
.works-empty { text-align: center; color: #767676; padding: 50px 0 30px; }
.works-empty[hidden] { display: none !important; }

/* Léger fondu des projets à chaque changement de filtre */
@keyframes ccnFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.works-view.is-filtering .works-tile:not(.is-filtered-out),
.works-view.is-filtering .works-table__row:not(.is-filtered-out) {
	animation: ccnFadeIn .25s ease both;
}
@media (prefers-reduced-motion: reduce) {
	.works-view.is-filtering .works-tile:not(.is-filtered-out),
	.works-view.is-filtering .works-table__row:not(.is-filtered-out) {
		animation: none;
	}
}

/* Formations : filtre par thème côté navigateur (même mécanisme que Projets) */
.formation-item.is-filtered-out { display: none !important; }
.formation-list.is-filtering .formation-item:not(.is-filtered-out) {
	animation: ccnFadeIn .25s ease both;
}
@media (prefers-reduced-motion: reduce) {
	.formation-list.is-filtering .formation-item:not(.is-filtered-out) { animation: none; }
}

/* --- Tableau --- */
.works-table { border-top: 1px solid #000; }
.works-table__head,
.works-table__row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 2.3fr 0.9fr;
	gap: 24px;
	align-items: baseline;
}
.works-table__head {
	padding: 14px 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #767676;
	border-bottom: 1px solid #000;
}
.works-table__head > :last-child { text-align: right; }
/* En-têtes cliquables (tri) — simple texte comme avant, juste rendu cliquable */
.works-table__head .wt-sort {
	cursor: pointer;
	transition: color .2s ease;
}
.works-table__head .wt-sort::after {
	content: "\2195"; /* ↕ neutre : indique que la colonne est triable */
	margin-left: 6px;
	font-size: .9em;
	opacity: .3;
	transition: opacity .2s ease;
}
.works-table__head .wt-sort:hover { color: #000; }
.works-table__head .wt-sort:hover::after { opacity: .6; }
.works-table__head .wt-sort[data-dir] { color: #000; }
.works-table__head .wt-sort[data-dir="asc"]::after  { content: "\2191"; opacity: 1; } /* ↑ */
.works-table__head .wt-sort[data-dir="desc"]::after { content: "\2193"; opacity: 1; } /* ↓ */
.works-table__row {
	padding: 22px 0;
	border-bottom: 1px solid #e6e6e6;
	text-decoration: none;
	color: #000;
	transition: background .2s ease;
}
.works-table__row:hover { background: #f7f7f7; }
.works-table__row .wt-client {
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-weight: 400;
	font-size: 13px;
}
/* Flèche « → » discrète au survol (repère cliquable) */
.works-table__row .wt-client::after {
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	opacity: 0;
	transform: translateX(-2px);
	transition: opacity .2s ease, transform .2s ease;
}
.works-table__row:hover .wt-client::after {
	opacity: 1;
	transform: translateX(2px);
}
.works-table__row .wt-secteur,
.works-table__row .wt-roles {
	font-size: 13px;
	color: #555;
	line-height: 1.45;
}
.works-table__row .wt-more { color: #767676; white-space: nowrap; }
.works-table__row .wt-annee {
	text-align: right;
	font-size: 13px;
	color: #555;
	white-space: nowrap;
}

/* Lien d'évitement. Hors focus il est repoussé au-dessus du viewport plutôt que
   masqué par clip : un lecteur d'écran le lit, la souris ne le voit jamais. */
.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 10000;
	padding: 12px 20px;
	background: #000;
	color: #fff !important;
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: top .15s ease;
}
.skip-link:focus {
	top: 16px;
	outline: 2px solid #fff;
	outline-offset: -6px;
}

/* Utilitaire accessibilité : masque visuellement sans retirer aux lecteurs d'écran */
.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Menu « Trier par… » — mobile uniquement (l'en-tête cliquable est caché sur petit écran) */
.works-sort-mobile { display: none; }
.works-sort-mobile select {
	width: 100%;
	font: inherit;
	font-size: 14px;
	color: #000;
	padding: 12px 40px 12px 14px;
	border: 1px solid #000;
	background-color: #fff;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/* Tableau — petits écrans : on empile proprement */
@media (max-width: 767px) {
	.works-toolbar { margin-bottom: 25px; }
	.works-view--table.is-active .works-sort-mobile { display: block; margin-bottom: 22px; }
	.works-table__head { display: none; }
	.works-table__row {
		grid-template-columns: 1fr auto;
		gap: 4px 16px;
		grid-template-areas:
			"client annee"
			"secteur annee"
			"roles  roles";
		padding: 16px 0;
	}
	.works-table__row .wt-client  { grid-area: client; }
	.works-table__row .wt-secteur { grid-area: secteur; }
	.works-table__row .wt-roles   { grid-area: roles; margin-top: 4px; }
	.works-table__row .wt-annee   { grid-area: annee; align-self: start; }
}

/* ===================================================================
   ACCUEIL — bloc d'intro limité à ~la moitié de l'écran (au lieu de ~83%)
   + respiration (air logo→texte, interligne)
   =================================================================== */
@media (min-width: 768px) {
	.intro .intro-container .col-sm-10 { max-width: 50%; }
}
.intro .intro-container h2 {
	line-height: 1.65;
	margin-top: 26px;
}
.intro .intro-container button {
	margin-top: 34px;
	/* Aligné sur le style des autres boutons du site (Gotham-Medium, MAJUSCULES) */
	font-family: "gotham-medium", "Arial", "Sans Serif";
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 13px 30px;
}

/* ============================================================
   ACCESSIBILITÉ — repère de focus clavier
   Visible UNIQUEMENT à la navigation au clavier (:focus-visible),
   jamais à la souris → aucun impact sur l'usage normal.
   Le formulaire Contact garde son propre repère (trait noir au focus,
   priorité CSS plus forte) : cette règle ne l'écrase pas.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.menu-trigger:focus-visible,
.close-menu:focus-visible {
	outline: 2px solid #000;
	outline-offset: 6px;
}