/**
* Style custom Easy Table of Contents — aux couleurs Vinabox
* -----------------------------------------------------------
* Palette : bordeaux #61262A · or #d39c44 · fond clair #f7f8f9 · neutres #575760
* Comportement : replié par défaut (géré côté plugin via visibility_hide_by_default=1)
* Responsive desktop + mobile, accents français dans les textes côté back.
* Ne touche pas les ancres du JS interne du plugin (smooth scroll conservé).
*/
/* === Conteneur principal === */
#ez-toc-container,
div#ez-toc-container,
.ez-toc-v2_0_82_2.counter-hierarchy.ez-toc-counter.ez-toc-grey {
background: linear-gradient(180deg, #fdfaf5 0%, #f7f8f9 100%) !important;
border: 1px solid rgba(97, 38, 42, 0.15) !important;
border-left: 4px solid #61262A !important;
border-radius: 10px !important;
box-shadow: 0 2px 14px rgba(97, 38, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
padding: 18px 22px 14px 22px !important;
margin: 28px 0 36px 0 !important;
max-width: 100% !important;
width: 100% !important;
transition: box-shadow .25s ease, transform .25s ease;
}
#ez-toc-container:hover {
box-shadow: 0 4px 20px rgba(97, 38, 42, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}
/* === Titre "Sommaire de l'article" === */
#ez-toc-container .ez-toc-title-container,
#ez-toc-container p.ez-toc-title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 0 !important;
}
#ez-toc-container .ez-toc-title {
color: #61262A !important;
font-family: inherit !important;
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
/* Petit pictogramme discret devant le titre */
#ez-toc-container .ez-toc-title-container::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-color: #d39c44;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center;
mask: url("data:image/svg+xml;utf8,") no-repeat center;
flex-shrink: 0;
}
/* === Bouton déplier / replier === */
#ez-toc-container a.ez-toc-toggle,
#ez-toc-container .ez-toc-title-toggle,
#ez-toc-container span.ez-toc-title-toggle a.ez-toc-pull-right {
background: #61262A !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
padding: 4px 14px 4px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-left: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
box-shadow: 0 2px 6px rgba(97, 38, 42, 0.25);
text-decoration: none !important;
}
#ez-toc-container a.ez-toc-toggle:hover {
background: #d39c44 !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(211, 156, 68, 0.35);
}
/* Chevron SVG animé dans le toggle */
#ez-toc-container a.ez-toc-toggle svg,
#ez-toc-container a.ez-toc-toggle i {
transition: transform .3s ease !important;
}
#ez-toc-container.toc-hidden a.ez-toc-toggle svg,
#ez-toc-container[style*="display: none"] + a.ez-toc-toggle svg {
transform: rotate(-90deg) !important;
}
/* === Liste des liens === */
#ez-toc-container ul.ez-toc-list {
margin-top: 14px !important;
padding-left: 0 !important;
list-style: none !important;
}
#ez-toc-container ul.ez-toc-list li {
margin: 6px 0 !important;
line-height: 1.55 !important;
list-style: none !important;
}
#ez-toc-container ul.ez-toc-list li a {
color: #575760 !important;
text-decoration: none !important;
font-size: 15px !important;
padding: 4px 8px !important;
border-radius: 4px !important;
display: inline-block !important;
transition: color .15s ease, background .15s ease, padding-left .15s ease;
border-left: 2px solid transparent;
}
#ez-toc-container ul.ez-toc-list li a:hover,
#ez-toc-container ul.ez-toc-list li a:focus {
color: #61262A !important;
background: rgba(211, 156, 68, 0.10) !important;
padding-left: 12px !important;
border-left-color: #d39c44 !important;
}
#ez-toc-container ul.ez-toc-list li a:visited {
color: #575760 !important;
}
/* Niveaux hiérarchiques : indentation cohérente */
#ez-toc-container ul.ez-toc-list ul {
margin-top: 4px !important;
margin-left: 18px !important;
padding-left: 8px !important;
border-left: 1px dashed rgba(97, 38, 42, 0.18);
}
#ez-toc-container ul.ez-toc-list ul li a {
font-size: 14px !important;
color: #757584 !important;
}
/* Compteurs numérotés (1., 1.1, 1.1.1) */
#ez-toc-container .ez-toc-list-level-1 > li::before,
#ez-toc-container ul.ez-toc-list > li > a::before {
color: #d39c44 !important;
font-weight: 700 !important;
margin-right: 6px !important;
}
/* === État collapsed (replié) : le container reste visible mais la liste est cachée === */
#ez-toc-container.counter-hierarchy.toc-hidden ul.ez-toc-list,
#ez-toc-container ul.ez-toc-list[style*="display: none"] {
display: none !important;
}
/* === Responsive mobile === */
@media (max-width: 768px) {
#ez-toc-container,
div#ez-toc-container {
padding: 14px 16px !important;
margin: 20px 0 !important;
border-radius: 8px !important;
}
#ez-toc-container .ez-toc-title {
font-size: 15px !important;
}
#ez-toc-container a.ez-toc-toggle {
padding: 4px 10px !important;
font-size: 11px !important;
}
#ez-toc-container ul.ez-toc-list li a {
font-size: 14px !important;
padding: 6px 8px !important; /* Zone de tap plus grande */
}
#ez-toc-container ul.ez-toc-list ul {
margin-left: 12px !important;
}
}
/* === A11y : focus clavier === */
#ez-toc-container a:focus-visible {
outline: 2px solid #d39c44 !important;
outline-offset: 2px !important;
}
/* === Respect reduced-motion === */
@media (prefers-reduced-motion: reduce) {
#ez-toc-container,
#ez-toc-container * {
transition: none !important;
}
}