du sous-menu en clair (--global--color-background)
et ajoute un triangle pointeur ::before/::after — les deux recouvraient
le fond navy. Le Wix n'a ni l'un ni l'autre.
================================================================ */
.primary-navigation > div > .menu-wrapper > li > .sub-menu li,
.primary-navigation .sub-menu li {
background: var(--ci-navy) !important;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu:before,
.primary-navigation > div > .menu-wrapper > li > .sub-menu:after,
.primary-navigation .sub-menu:before,
.primary-navigation .sub-menu:after {
display: none !important;
content: none !important;
border: none !important;
}
/* TT1 met aussi padding-top:3px sur le panneau (l'espace du triangle) */
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
padding-top: 0 !important;
transition: none !important;
}
/* Liens du sous-menu : transparents (le
porte le navy), blancs */
.primary-navigation .sub-menu li a {
background: transparent !important;
color: #ffffff !important;
}
.primary-navigation .sub-menu li a:hover {
color: var(--ci-blue-accent) !important;
}
/* v3.5.0 — chevron bordeaux en bas du hero (Wix : vector-image 69×27,
centré, ~9px au-dessus du bas, pointe vers le bas, rgb(177,47,56)) */
.ci-hero::after {
content: "";
position: absolute;
left: 50%;
bottom: 9px;
transform: translateX(-50%);
width: 69px;
height: 27px;
background-color: rgb(177, 47, 56);
-webkit-mask: url('data:image/svg+xml;utf8,') center / 100% 100% no-repeat;
mask: url('data:image/svg+xml;utf8,') center / 100% 100% no-repeat;
transform: translateX(-50%) scaleY(-1); /* la forme source pointe vers le haut */
z-index: 3;
pointer-events: none;
}
/* ================================================================
v3.5.1 — Mobile (≤481px) : restaure le menu tiroir TT1 que les
overrides desktop cassaient (le panneau restait ouvert plein écran),
logo redimensionné, sous-menus en flux normal.
================================================================ */
@media only screen and (max-width: 481.98px) {
/* Logo : TT1 pose .site-logo en position:absolute;top:0 (pensé pour son
propre header desktop), ce qui ignore le padding du header sur mobile
et fait déborder le logo en haut de page, mal aligné avec le bouton
Menu. On repasse en flux normal + on réduit sa taille (404×46 est
bien trop grand pour un écran ≤481px à côté du burger). */
.site-header { padding: 14px 0 !important; }
.site-header .site-branding {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: auto !important;
}
.site-header .site-logo {
position: static !important;
margin: 0 auto !important;
}
.site-header .custom-logo-link img,
.site-header .custom-logo {
width: auto !important;
max-width: 170px !important;
height: auto !important;
max-height: 20px !important;
margin: 0 auto;
}
/* Tiroir TT1 : hors écran tant que non ouvert
(UNIQUEMENT .primary-menu-container — surtout pas le conteneur du burger) */
.primary-navigation > div.primary-menu-container,
.primary-navigation .primary-menu-container {
position: fixed !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100vh;
z-index: 499;
overflow-y: auto;
padding: 90px 25px 40px !important;
margin: 0 !important;
background-color: var(--ci-navy) !important;
transform: translateX(100%);
transition: none !important;
}
body.primary-navigation-open .primary-navigation > div.primary-menu-container,
body.primary-navigation-open .primary-navigation .primary-menu-container {
transform: translateX(0) !important;
}
/* Conteneur du burger : dans le header, en haut à droite */
.primary-navigation .menu-button-container {
position: absolute !important;
top: 10px;
right: 10px;
margin: 0 !important;
padding: 0 !important;
z-index: 501;
}
.primary-navigation-open .primary-navigation {
width: 100%;
position: fixed !important;
z-index: 500;
}
/* Items empilés pleine largeur dans le tiroir */
.primary-navigation .menu-wrapper,
.primary-navigation ul.primary-menu {
display: block !important;
}
.primary-navigation .menu-wrapper > li,
.primary-navigation ul.primary-menu > li {
width: 100% !important;
text-align: center;
}
/* Sous-menus : en flux (pas de dropdown positionné) et visibles */
.primary-navigation .menu-wrapper > .menu-item-has-children > .sub-menu,
.primary-navigation .primary-menu > .menu-item-has-children > .sub-menu {
display: block !important;
position: static !important;
min-width: 0 !important;
}
/* Bouton burger : blanc sur navy */
.menu-button-container #primary-mobile-menu {
color: #ffffff !important;
}
/* Sélecteur de langue : en flux dans le header */
.ci-lang-switcher {
position: static !important;
height: auto;
margin: 4px auto 0;
}
/* Hero : hauteur au contenu (carte + bouton), légende et chevron dessous */
.ci-hero {
min-height: 0 !important;
height: auto !important;
}
.ci-hero-stack { padding-top: 110px; padding-bottom: 96px; }
.ci-hero-card { width: calc(100vw - 30px); padding: 1.2em 1em; }
.ci-hero-caption {
right: 12px;
bottom: 44px;
left: 12px;
text-align: right;
}
}
/* v3.5.4 — ouverture du tiroir mobile : règle terminale de neutralisation */
@media only screen and (max-width: 481.98px) {
body.primary-navigation-open .primary-menu-container {
transform: none !important;
}
}
/* Barre du bouton Fermer dans le tiroir : navy comme le reste */
@media only screen and (max-width: 481.98px) {
body.primary-navigation-open .menu-button-container {
background-color: var(--ci-navy) !important;
}
body.primary-navigation-open .menu-button-container #primary-mobile-menu {
color: #ffffff !important;
background: transparent !important;
}
}
/* ---------- Pages 404 et Recherche (habillage maison) ---------- */
.ci-404, .ci-search {
max-width: 780px;
margin: 0 auto;
padding: 90px 16px 110px;
text-align: center;
}
.ci-404 h1, .ci-search h1 { font-size: 40px; margin-bottom: 20px; }
.ci-404-text, .ci-search-query { margin-bottom: 28px; }
.ci-404-actions { margin-bottom: 40px; }
.ci-404-search form,
.ci-search .ci-404-search form {
display: flex;
justify-content: center;
gap: 8px;
max-width: 480px;
margin: 0 auto 30px;
}
.ci-404-search input[type=search] {
flex: 1;
border: 1px solid rgba(0,0,0,.35);
padding: 10px 14px;
font-size: 15px;
border-radius: 0;
background: #fff;
}
.ci-404-search button,
.ci-404-search input[type=submit] {
background: var(--ci-maroon);
color: #fff;
border: none;
padding: 10px 22px;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
border-radius: 0;
}
.ci-404-search button:hover { background: #000; }
.ci-search-results {
list-style: none;
margin: 20px 0 0;
padding: 0;
text-align: left;
}
.ci-search-results li {
border-bottom: 1px solid rgba(191,191,191,.5);
padding: 22px 0;
}
.ci-search-results li a {
font-family: var(--ci-font-serif);
font-size: 22px;
color: #000;
text-decoration: none;
}
.ci-search-results li a:hover { color: var(--ci-maroon); }
.ci-search-results li p { margin: 6px 0 0; text-align: left; }
.ci-search-pagination { margin-top: 30px; }
/* v3.6.1 — sous-menu : jamais de troncature. Le panneau s'élargit au plus
long libellé (comme Wix), les items ne passent pas à la ligne. */
.primary-navigation .sub-menu {
width: max-content !important;
min-width: 244px !important;
max-width: none !important;
}
.primary-navigation .sub-menu li,
.primary-navigation .sub-menu li a {
white-space: nowrap;
overflow: visible;
width: auto !important;
}
.primary-navigation .sub-menu li a {
display: block;
padding: 0 18px !important;
}
/* v3.6.2 — item actif du SOUS-MENU en blanc : le bleu rgb(6,117,214)
était illisible sur le fond navy du panneau. */
.primary-navigation .sub-menu .current-menu-item > a,
.primary-navigation .sub-menu .current_page_item > a,
.primary-navigation .sub-menu li.current-menu-item a,
.primary-navigation .sub-menu li.current_page_item a {
color: #ffffff !important;
}
.primary-navigation .sub-menu .current-menu-item > a:hover,
.primary-navigation .sub-menu li.current-menu-item a:hover {
color: var(--ci-blue-accent) !important;
}
/* v3.6.3 — état actif BLANC partout dans la navigation (tout le menu est
sur fond navy : le bleu rgb(6,117,214) hérité du Wix y est illisible). */
.primary-navigation .current-menu-item > a,
.primary-navigation .current-menu-ancestor > a,
.primary-navigation .current_page_item > a,
.primary-navigation .current_page_ancestor > a,
.primary-navigation .current-menu-parent > a,
.primary-navigation .menu-wrapper > li.current-menu-ancestor > a,
.primary-navigation .menu-wrapper > li.current_page_ancestor > a,
.primary-navigation .menu-wrapper > li.current-menu-parent > a {
color: #ffffff !important;
}
.primary-navigation .current-menu-item > a:hover,
.primary-navigation .current-menu-ancestor > a:hover {
color: var(--ci-blue-accent) !important;
}
/* v3.6.4 — au CLIC/focus sur un item du menu, TT1 peint un fond clair
(texte illisible). Le Wix n'a aucun fond : on le supprime, le focus
clavier reste signalé par un léger soulignement. */
.primary-navigation a:focus,
.primary-navigation a:active,
.primary-navigation .menu-wrapper > li > a:focus,
.primary-navigation .menu-wrapper > li > a:active,
.primary-navigation .sub-menu li a:focus,
.primary-navigation .sub-menu li a:active {
background: transparent !important;
background-color: transparent !important;
color: #ffffff !important;
outline: none;
box-shadow: none !important;
text-decoration: underline !important;
text-underline-offset: 4px;
}
/* ---------- Visionneuse PDF intégrée (articles avec document joint) ---------- */
.ci-pdf-viewer {
margin: 26px 0 14px;
border: 1px solid rgba(191, 191, 191, 0.75);
background: #f2f2f2;
}
.ci-pdf-viewer iframe {
display: block;
width: 100%;
height: 760px;
border: 0;
}
@media only screen and (max-width: 640px) {
.ci-pdf-viewer iframe { height: 480px; }
}
/* ================================================================
v3.7.0 — Vidéothèque interactive (lecture au clic, flèches, recherche)
================================================================ */
.ci-tv-featured { cursor: pointer; }
.ci-tv-featured.is-playing { cursor: default; background: #000; }
.ci-tv-player {
display: block;
width: 100%;
height: 100%;
border: 0;
position: absolute;
inset: 0;
}
.ci-tv-now {
position: absolute;
left: 20px;
bottom: 56px;
color: #ffffff;
font-family: var(--ci-font-body);
font-size: 15px;
text-shadow: 0 1px 4px rgba(0,0,0,.8);
max-width: 70%;
text-align: left;
}
/* Carrousel : 3 vignettes visibles, défilement horizontal masqué */
.ci-tv-carousel {
position: relative;
display: flex;
align-items: center;
}
.ci-tv-viewport {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
}
.ci-tv-viewport::-webkit-scrollbar { display: none; }
.ci-tv-row {
display: flex;
gap: 10px;
flex-wrap: nowrap;
width: max-content;
}
.ci-tv-thumb {
flex: 0 0 299px;
border: none;
font: inherit;
cursor: pointer;
}
.ci-tv-thumb.is-hidden { display: none; }
.ci-tv-thumb:hover .ci-tv-thumb-title { text-decoration: underline; }
/* Flèches ‹ › façon Wix : blanches, fines, sur les côtés */
.ci-tv-prev, .ci-tv-next {
flex: 0 0 34px;
height: 173px;
background: rgba(0,0,0,.55);
color: #ffffff;
border: none;
font-size: 34px;
line-height: 1;
cursor: pointer;
transition: background .2s ease;
padding: 0;
}
.ci-tv-prev:hover, .ci-tv-next:hover { background: rgba(0,0,0,.85); }
.ci-tv-prev { margin-right: 6px; }
.ci-tv-next { margin-left: 6px; }
/* Recherche : loupe + champ actif */
.ci-tv-search input {
width: 100%;
box-sizing: border-box;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.25);
color: #ffffff;
padding: 10px 14px;
font-family: var(--ci-font-body);
font-size: 14px;
border-radius: 0;
}
.ci-tv-search input::placeholder { color: rgba(255,255,255,.55); }
.ci-tv-search input:focus { outline: none; border-color: rgba(255,255,255,.6); }
/* scroll-behavior:smooth retiré : animation JS (rAF) plus fiable */
/* ================================================================
Menu mobile plein écran (TT1, actif ≤481px) : la CSS desktop du
menu (centrée, hover, tokens Wix ci-dessus) reste appliquée telle
quelle sur l'overlay fullscreen faute de media query, d'où un menu
plat sans hiérarchie visuelle. On redéfinit ici entrées top-level
vs sous-menus (toujours dépliés, le bouton .sub-menu-toggle étant
masqué globalement) + le switcher de langue.
================================================================ */
@media (max-width: 481px) {
.primary-navigation .menu-wrapper,
.primary-navigation ul.primary-menu {
text-align: left !important;
padding: 12px 28px 40px !important;
}
.primary-navigation .menu-wrapper > li,
.primary-navigation ul.primary-menu > li {
display: block !important;
width: 100% !important;
text-align: left !important;
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 14px 0 !important;
}
.primary-navigation .menu-wrapper > li:first-child,
.primary-navigation ul.primary-menu > li:first-child {
border-top: none;
}
/* Lien top-level : plus grand, semi-gras, sert d'en-tête de groupe */
.primary-navigation .menu-wrapper > li > a,
.primary-navigation .primary-menu > li > a {
display: block;
font-size: 19px !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
padding: 0 0 4px !important;
line-height: 1.4 !important;
height: auto !important;
}
/* Sous-menu : toujours déplié (pas de bouton +), indenté, plus petit,
ton légèrement estompé pour marquer la hiérarchie */
.primary-navigation .primary-menu > .menu-item-has-children > .sub-menu,
.primary-navigation .menu-wrapper > .menu-item-has-children > .sub-menu {
display: block !important;
position: static !important;
min-width: 0 !important;
width: 100% !important;
margin: 6px 0 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-align: left !important;
}
.primary-navigation .sub-menu .menu-item {
text-align: left !important;
}
.primary-navigation .sub-menu .menu-item a {
display: block;
text-align: left !important;
font-size: 15px !important;
font-weight: 300 !important;
color: rgba(255, 255, 255, 0.72) !important;
padding: 7px 0 7px 16px !important;
height: auto !important;
line-height: 1.4 !important;
border-left: 2px solid rgba(255, 255, 255, 0.18);
}
.primary-navigation .sub-menu .menu-item a:hover,
.primary-navigation .sub-menu .menu-item a:focus {
color: #ffffff !important;
border-left-color: var(--ci-blue-accent);
}
/* Switcher de langue : petites pills en bas de menu plutôt que
texte nu flottant */
.primary-navigation .ci-lang-switcher {
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin-top: 8px !important;
padding-top: 18px !important;
text-align: left !important;
}
.primary-navigation .ci-lang-list {
display: flex !important;
gap: 10px;
justify-content: flex-start !important;
}
.primary-navigation .ci-lang-list li a {
display: inline-block;
padding: 6px 16px !important;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
font-size: 14px !important;
text-transform: uppercase;
}
.primary-navigation .ci-lang-list li.current-lang a {
background: var(--ci-blue-accent);
border-color: var(--ci-blue-accent);
color: var(--ci-navy) !important;
}
}