/* Aponia Mega Menu - layout and behaviour.
 *
 * Site styling by the designer is merged in here. The breakpoint is
 * written as 1024px on purpose: PHP rewrites the media query widths if
 * the aponia_mm_breakpoint filter changes it, matching on that exact
 * text. Keep the form "(min-width: 1024px)" / "(max-width: 1023px)". */

/* ---------- shared ---------- */
.aponia-mm-col--3 .aponia-mm-list img{
    height:168px;
    object-fit: cover;
}
.a2z-child-terms{
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    list-style: none;
}

.a2z-child-terms a{  
    display: grid;
    grid-template-columns: 88px 1fr;
    padding: 4px 16px 4px 4px;
    border-radius: 16px;
    background: #F9FAFB;
    gap: 20px;
    align-items: center;
}
.a2z-child-terms a img{border-radius: 14px;}
.a2z-child-terms a .a2z-term-name{
   color: #001424;
   font-family: "Miranda Sans";
   font-size: 16px;
   font-weight: 500;
   line-height: 1.2;
}
.aponia-mm-drop{border-radius: 5px!important;}
.aponia-mm-drop .aponia-mm-list a{  
    padding: 15px 15px!important;
    align-items: flex-start!important;
    border-bottom: 1px solid #e5e5e5;
}
.aponia-mm-drop .aponia-mm-list a{  
    padding: 15px 15px;
    align-items: flex-start;
    border-bottom: 1px solid #e5e5e5;
}

.aponia-mm-mega .aponia-mm-row{
    display: grid;
    grid-template-columns: 100% 1fr;

}
.aponia-mm-mega .aponia-mm-col--2{
padding:32px;
border-left: 1px solid #DDDBD7;
border-right: 1px solid #DDDBD7;
}
.aponia-mm-mega .aponia-mm-col--3{
padding:32px 24px;
}
.aponia-mm-mega .aponia-mm-panelhead .aponia-mm-heading{
color: #001424;
text-align: left;
font-family: "Miranda Sans";
font-size: 24px;
font-weight: 500;
line-height: normal;
}
.aponia-mm-text{    
    font-family: "Miranda Sans";
    font-size: 16px;
    font-weight: 500;
    white-space: normal;
}
.aponia-mm-col--2 .aponia-mm-list a{
    border-radius: 16px;
    background: #F9FAFB;
    padding: 4px 16px 4px 4px!important;
    display: grid!important;
    grid-template-columns: 88px 1fr;
    gap: 20px!important;
    align-items: center!important;
    color: #001424;
    font-family: "Miranda Sans";
    font-size: 16px;
    font-weight: 500;
}

.aponia-mm-col--2 .aponia-mm-list a .aponia-mm-thumb img{ 
    height: 88px;
    object-fit: cover;
    object-position: center center;
}
.aponia-mm-mega .aponia-mm-rows .aponia-mm-row:first-child .aponia-mm-tab{
   margin-top:24px;
    
}
.aponia-mm-mega .aponia-mm-icon img{max-width:32px;}
	.aponia-mm .aponia-mm-tab { 
        padding: 12px 20px;
         border-left: 3px solid transparent;
		border-radius: 0px;
        display: grid;
        grid-template-columns: 54px 1fr auto;
        grid-gap: 20px;
        color: #001424;
        font-family: "Miranda Sans";
        font-size: 16px;
        font-weight: 500;
        align-items:center;
         }
.aponia-mm-drop .aponia-mm-list--links{
    background-color: #fff;
    border-radius: 20px;
}
.aponia-mm-drop .aponia-mm-list li:last-child a{border-bottom:0}
.aponia-mm .aponia-mm-parent-col { display: grid;grid-template-columns: 2fr 1fr;  height:100%; }
.aponia-mm .aponia-mm-list--terms { display: grid; gap: 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Hidden from sight but not from screen readers: it is the button's
   only name (audit WCAG 2026-10-22, 4.1.2). */
.aponia-mm-burger-text{position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;}
nav.aponia-mm .aponia-mm-burger{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #02508C;
    color: #fff;
    border: 0;
}
.aponia-mm.is-expanded .aponia-mm-burger-bars{transform: rotate(-135deg);}

.aponia-mm.is-expanded .aponia-mm-burger-bars:before {
    top: 0px;
    transform: rotate(-90deg);
}
.aponia-mm.is-expanded .aponia-mm-burger-bars:after {display:none}

.aponia-mm .aponia-mm-bar { list-style: none; margin: 0; padding: 0; }
.aponia-mm .aponia-mm-bar > li:before,
.aponia-mm .aponia-mm-list > li:before { content: none; }
.aponia-mm .aponia-mm-label { display: inline-flex; align-items: center; gap: .4em; }
.aponia-mm .aponia-mm-toggle,
.aponia-mm .aponia-mm-burger,
.aponia-mm .aponia-mm-tab { background: none; border: 0; cursor: pointer;
	font: inherit; color: inherit; }
.aponia-mm .aponia-mm-burger { display: inline-flex; align-items: center; gap: .5em; }
.aponia-mm .aponia-mm-caret { display:block;flex: none; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); }
.aponia-mm .aponia-mm-img { display: block; max-width: 100%; height: auto; }
.aponia-mm .aponia-mm-list { list-style: none; margin: 0; padding: 0; }
.aponia-mm .aponia-mm-list a{ 
    display: flex; 
    flex-direction:column;
    align-items: center; 
    gap: 16px;
	text-decoration: none;
     }
.aponia-mm .aponia-mm-panelhead { display: flex; align-items: center;
	justify-content: space-between; gap: 1em;   }

/* Un titre long ne doit pas faire plier « Voir tous les articles → » :
   le lien reste sur une ligne, c'est le titre qui plie au besoin. */
.aponia-mm .aponia-mm-panelhead .aponia-mm-heading { min-width: 0; }
.aponia-mm .aponia-mm-panelhead .aponia-mm-seeall { white-space: nowrap; flex-shrink: 0; }

/* Off screen but still reachable by keyboard and screen reader. */
.aponia-mm .aponia-mm-sr,
.aponia-mm .aponia-mm-tablink { position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0; }

/* ---------- narrow screens: one long accordion ----------
   Open and shut carries !important because it is behaviour, not
   decoration. A theme that styles its own nav must not be able to
   leave a panel stuck open. */
.aponia-mm .aponia-mm-bar { display: none !important; flex-direction: column;
	width: 100%; }
.aponia-mm.is-expanded > .aponia-mm-bar { 
    display: flex !important;
    grid-gap: 32px;
    border-top: 0 !important; 
    }
.aponia-mm .aponia-mm-item { display: flex; flex-wrap: wrap; align-items: center;
	width: 100%; }
.aponia-mm .aponia-mm-label { flex: 1 1 auto; }
.aponia-mm .aponia-mm-tab { width: 100%; text-align: left; }

.aponia-mm .aponia-mm-drop,
.aponia-mm .aponia-mm-mega { display: none !important; flex: 1 1 100%; width: 100%; }
.aponia-mm .aponia-mm-item.is-open > .aponia-mm-drop,
.aponia-mm .aponia-mm-item.is-open > .aponia-mm-mega { display: block !important; }

/* The gap between the bar and the panel is drawn with a transparent
   border, not a margin. Both look identical. The difference is that a
   margin is dead space outside the element, so crossing it means the
   pointer has left the menu - the menu closes on its timer and then
   reopens on the other side, replaying the whole opening animation.
   That was the panel restarting itself when the pointer moved down off
   the menu label. A border belongs to the element, so the box stays
   unbroken from the bar to the panel and the pointer never leaves.
   
   background-clip keeps the border strip see-through if a background is
   ever added to this box. To change the size of the gap, change this
   width - do not put the margin back. */
.aponia-mm .aponia-mm-item.is-open > .aponia-mm-drop,
.aponia-mm .aponia-mm-item.is-open > .aponia-mm-mega {
	border-top: 10px solid transparent;
	background-clip: padding-box;
}

/* Panels open and shut with display only below the breakpoint. Above it
   they are all present and swapped with visibility, so these two rules
   are fenced into a narrow-screens-only query. Left unfenced they beat
   the wide rule on specificity - four classes against two - and the open
   panel comes out block instead of flex, which quietly stacks column 3
   underneath column 2. A media query adds nothing to specificity, so the
   fence is the fix, not source order. */
@media (max-width: 1023px) {
	.aponia-mm .aponia-mm-panel { display: none !important; }
	.aponia-mm .aponia-mm-row.is-active > .aponia-mm-panel { display: block !important; margin: 10px 0;}
}

/* Caret points down when shut, up when open. */
.aponia-mm .aponia-mm-item.is-open > .aponia-mm-label .aponia-mm-caret,
.aponia-mm .aponia-mm-item.is-open > .aponia-mm-toggle .aponia-mm-caret,
.aponia-mm .aponia-mm-row.is-active > .aponia-mm-tab .aponia-mm-caret {
	transform: rotate(-45deg); }

/* ---------- wide screens ---------- */
@media (min-width: 1024px) {
body:has(.aponia-mm-bar li.is-open):before {
    content: "";
    background: rgba(0, 0, 0, 0.24);
    position: fixed;
    width: 100%;
    height: calc(100% + 81px);
    top: 0px;
    z-index: 2;
}
	.aponia-mm .aponia-mm-burger { display: none !important; }
	.aponia-mm .aponia-mm-bar { display: flex !important; flex-direction: row;
		flex-wrap: wrap; width: auto; justify-content: center;}
	.aponia-mm .aponia-mm-item { width: auto; }

	/* A dropdown hangs off its own item. A mega spans the whole bar, so
	   it measures from the nav instead. */
	.aponia-mm .aponia-mm-item--dropdown { position: relative; }
	.aponia-mm .aponia-mm-item--mega { position: static; }

	.aponia-mm .aponia-mm-drop { position: absolute; z-index: 99; top: 100%;
		left: 0; min-width: 240px; width: auto; }
	.aponia-mm .aponia-mm-mega { position: absolute; z-index: 99; top: 100%;
		left: 0; right: 0; width: auto; }

	/* Normal view. */
	.aponia-mm .aponia-mm-item.is-open > .aponia-mm-mega--normal { display: block !important; }
	.aponia-mm .aponia-mm-cols { display: grid; gap: 1.5rem; }
	.aponia-mm .aponia-mm-cols[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
	.aponia-mm .aponia-mm-cols[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

	/* Vertical tab view. The list keeps a fixed width on the left and
	   the panels are lifted out beside it and stacked, so only the
	   active one shows and the height does not jump as you move down. 
	.aponia-mm .aponia-mm-item.is-open > .aponia-mm-mega--tabs { display: flex !important; }*/
	.aponia-mm .aponia-mm-rows { 
        flex: 0 0 var(--aponia-mm-tabs-width, 343px);
        max-height:599px;
        width:26%;
        overflow-y: auto;
        scrollbar-width: thin !important;
    }
	.aponia-mm .aponia-mm-row { position: static; }

	.aponia-mm .aponia-mm-panel { 
        position: absolute;
		left: var(--aponia-mm-tabs-width, 26%);
		top: 0; right: 0; bottom: 0; overflow-y: auto;
		visibility: hidden; opacity: 0; 
    }
	.aponia-mm .aponia-mm-row.is-active > .aponia-mm-panel { visibility: visible; opacity: 1; }

	/* The columns are arranged here rather than on the panel, and with no
	   !important, so a site stylesheet can replace this with grid or
	   anything else in one line. */
	
	.aponia-mm .aponia-mm-col--2 { flex: 1 1 auto; min-width: 0; }
	.aponia-mm .aponia-mm-col--3 { flex: 0 0 var(--aponia-mm-col3-width, 260px); }

	/* Carets: down on the bar, pointing right on a tab. */
	.aponia-mm .aponia-mm-tab .aponia-mm-caret,
	.aponia-mm .aponia-mm-row.is-active > .aponia-mm-tab .aponia-mm-caret {
		transform: rotate(-45deg); }

	/* Two-up lists read across the row, so grid rather than columns.
	   The column count lives here and not in the starter layer: how many
	   columns a list has is shape, not paint, and switching the starter
	   layer off should not collapse these lists into one tall column. */	
	

	/* Column 3 is too narrow to read two-up. */
	.aponia-mm .aponia-mm-col--3 .aponia-mm-list { display: grid ;grid-template-columns: 1fr;        grid-gap: 16px; }

}
	@media (max-width: 1024px){
    .aponia-mm.is-expanded > .aponia-mm-bar{
    position: absolute;
     left: 10px;
    right: 10px;
        width: calc(100% - 20px);
        margin-top: 56px;
}
    .aponia-mm-rows{  
    border-radius: 20px;
    overflow: hidden;
}
    .a2z-child-terms a .a2z-term-name{font-size:14px;}
    .a2z-child-terms a{      
    grid-template-columns: 48px 1fr;
     gap: 12px;
}
    .aponia-mm-bar>li.is-open>a.aponia-mm-label .aponia-mm-text{font-weight: 600; }
.aponia-mm-tab .aponia-mm-caret{
        background-image: url(/wp-content/uploads/2026/06/cta-icon-8.svg);
        background-size: contain;
        width: 23px;
        height: 20px;
        transform: none!important;
        border: 0;
}   
        .aponia-mm-col--2 .aponia-mm-list a .aponia-mm-text{
    font-size: 14px;
    font-weight: 600;
}
.aponia-mm .aponia-mm-parent-col {background-color: #fff;}
.aponia-mm-mega .aponia-mm-col--3 {
    padding: 32px 15px;
}
.aponia-mm-col--2 .aponia-mm-list a .aponia-mm-thumb img {
    height: 48px;
    border-radius: 8px;}
.aponia-mm-col--2 .aponia-mm-list a{
grid-template-columns: 48px 1fr;
    gap: 12px !important;}
.aponia-mm-mega .aponia-mm-col--2 {
    padding: 32px 15px;border-left: 0;}
 
body:has(.is-expanded):before {
    content: "";
    background: #F9FAFB;
    position: fixed;
    width: 100%;
    height: calc(100% + 81px);
    top: 0px;
    z-index: 3;
    display:block!important;
}
.aponia-mm-bar>li>a.aponia-mm-label .aponia-mm-text{font-size: 18px;}
.aponia-mm-mega .aponia-mm-row{grid-template-columns: 1fr;}
.aponia-mm-mega .aponia-mm-rows .aponia-mm-row:first-child .aponia-mm-tab { margin-top: 0px;}
.aponia-mm-mega .aponia-mm-tab{
    grid-template-columns: 36px 1fr auto;
    grid-gap: 12px;
    padding: 12px 15px!important;
    background-color: #fff;
    }
.aponia-mm-mega .aponia-mm-tab .aponia-mm-text{
    font-size: 14px;
    font-weight:600;
}
.aponia-mm .aponia-mm-icon {
    width: 36px!important;
    height: 36px!important;}
    .aponia-mm-mega .aponia-mm-icon img {
    max-width: 22px;
}

    }
	@media (max-width: 767px){
    .aponia-mm-row.is-active .aponia-mm-tab{ 
    background-color: transparent;
    padding-left: 0 !important;
    grid-template-columns: auto 1fr;
}
.aponia-mm-row.is-active .aponia-mm-icon{display:none}
.aponia-mm-row.is-active .aponia-mm-text{
    order: 2;
    font-size: 18px;
}
.aponia-mm-row.is-active .aponia-mm-caret{transform: rotate(-180deg)!important;}
.aponia-mm-bar:has(.aponia-mm-row.is-active)> li:not(.is-open),
.aponia-mm-bar:has(.aponia-mm-row.is-active) .aponia-mm-row:not(.is-active),
.aponia-mm-bar:has(.aponia-mm-row.is-active) .aponia-mm-panelhead,
.aponia-mm-bar:has(.aponia-mm-row.is-active) li > .aponia-mm-label + button,
.aponia-mm-bar:has(.aponia-mm-row.is-active) li > .aponia-mm-label {display:none}
.aponia-mm-bar .aponia-mm-row.is-active .aponia-mm-col--2{padding-top:0}

    .a2z-child-terms a img {
    border-radius: 8px;
}
    .a2z-child-terms{
    grid-template-columns: repeat(1, 1fr); 
    gap: 0px;
    background-color: #fff;
        border-radius: 20px;
    }
.a2z-child-terms a{padding: 12px 15px;background-color:#fff;grid-gap: 0 12px;}
.a2z-child-terms a:after{
    content:"";
    background-image: url(https://cliquezjustice.aponiawebsolutions.ca/wp-content/uploads/2026/06/cta-icon-8.svg)!important;
        position: absolute !important;
        width: 23px !important;
        height: 20px !important;
        right: 15px;
        left: inherit !important;
        bottom: inherit !important;
        transform: none !important;
        transform-origin: center !important;
        background-size: contain !important;


}
.aponia-mm-seeall  {
    position: absolute;
    bottom: 0;    padding: 12px 15px;
    background-color: #fff;
    width: 100%;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px !important;
}
.aponia-mm-col--3{display:none}
.aponia-mm .aponia-mm-parent-col { grid-template-columns: 1fr;}
.aponia-mm .aponia-mm-list--terms { 
    gap: 0px;  
    grid-template-columns: repeat(1, minmax(0, 1fr));
    background-color: #fff;
    border-radius: 20px;
}
.aponia-mm-mega .aponia-mm-col--2 {
    padding: 32px 0px;
    position: relative;
    border-right: 0;
    z-index: 1;
}
.aponia-mm .aponia-mm-parent-col{background-color:transparent}

.aponia-mm-col--2 .aponia-mm-list a{    background: #fff;
    padding: 12px 15px 12px 15px !important;}


    }


/* =========================================================
 * Entrance animation
 *
 * One quiet movement: when the menu opens, everything fades in with a
 * short slide from the left, together. The long two step travel (1s,
 * full width, tabs following the panel) was still judged too busy on
 * "Vos droits" (retour client, 2026-10-09) - what is left is closer to
 * a fade than a slide.
 *
 * There used to be a second movement on every tab change - the right
 * hand columns re-entered from the panel's right edge ("is-entering").
 * Removed at the client's request (rencontre 2026-10-06, tâche #361):
 * it replayed on every row hover and read as noise, not polish. A tab
 * change now swaps the panel in place, instantly.
 *
 * Tunable from these two variables - put them on .aponia-mm in the
 * site stylesheet, no !important needed:
 *
 *   --aponia-mm-anim          how long the entrance takes
 *   --aponia-mm-shift         how far in from the left it starts
 *
 * Wide screens only. Below the breakpoint the menu is an accordion and
 * sliding panels sideways would read as breakage, not polish.
 *
 * Nothing here transforms .aponia-mm-rows or .aponia-mm-row. A
 * transform makes an element the containing block for absolutely
 * positioned descendants, and the panel is absolutely positioned
 * against the mega. Transforming either of those would drag the panel
 * out of place. The tabs are siblings of the panel, so they are safe.
 * ======================================================= */

@media (min-width: 1024px) {

	.aponia-mm {
		--aponia-mm-anim: 200ms;
		--aponia-mm-shift: 18px;
	}

	/* The slide starts outside the box it lands in, so both boxes have
	   to clip. Without this the page grows a horizontal scrollbar for
	   the length of the animation. The mega is already the containing
	   block for the panel, so clipping it costs nothing. */
	.aponia-mm .aponia-mm-mega { overflow: hidden; }
	.aponia-mm .aponia-mm-panel { overflow-x: hidden; }

	@keyframes aponia-mm-in-left {
		from { opacity: 0; transform: translateX(calc(-1 * var(--aponia-mm-shift, 18px))); }
		to   { opacity: 1; transform: translateX(0); }
	}

	/* Menu opens: one short fade-slide, no stagger.

	   Hooked on "is-opening", a class the script puts on the panel for
	   one run, not on "is-open". "is-open" is a state class the site CSS
	   also watches - the full screen overlay hangs off it - so restarting
	   the animation by flicking it off and on changed what was under the
	   pointer and triggered another replay, and another. */
	.aponia-mm .aponia-mm-mega.is-opening .aponia-mm-tab,
	.aponia-mm .aponia-mm-mega.is-opening .aponia-mm-parent-col,
	.aponia-mm .aponia-mm-mega--normal.is-opening .aponia-mm-col {
		animation: aponia-mm-in-left var(--aponia-mm-anim, 200ms) ease-out both;
	}
}

/* Anyone who has asked their system for less movement gets none. */
@media (prefers-reduced-motion: reduce) {

	.aponia-mm .aponia-mm-tab,
	.aponia-mm .aponia-mm-parent-col,
	.aponia-mm .aponia-mm-col {
		animation: none !important;
	}
}