/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
/*! Tablo Theme | https://www.tablo.me */

body{
  max-width: 100vw;  /* ne jamais limiter */
  margin: 0;         /* supprime les marges blanches */
  padding: 0;        /* supprime le padding par défaut */
  font-family: "David";
  font-weight: normal !important;
  font-synthesis: none;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

/* Neutralisation globale des graisses typo (David regular uniquement) :
   pas de font-weight local ni de graisse synthétisée par le navigateur. */
*,
*::before,
*::after {
  font-weight: normal !important;
  font-synthesis: none;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

b,
strong,
.copy strong,
.copy b {
  font-weight: normal !important;
  font-synthesis: none;
}

:root {
  --site-gutter: 15px;
  /* Air haut (avant le header) = air bas (sous le footer) : py-3 / 0,75rem. */
  --site-chrome-inset-block: calc(var(--spacing) * 3);
}

em,
.copy em,
.copy i,
.tablo-text-block em,
.tablo-text-block i,
.tablo-heading__tag em {
  font-weight: normal !important;
  font-style: italic !important;
  /* Autorise l'italique même si la fonte n'a pas de variante italic dédiée. */
  font-synthesis-style: auto !important;
  font-synthesis: style !important;
}

.font-caliste {
  font-family: "Caliste", "Carliste", serif !important;
}

/* Typo titres / writer : classes utilisées par les blocs heading (blueprints Tablo). */
.font-david {
  font-family: "David" !important;
}

.text-base-1-6 {
  font-size: 1.6rem;
  line-height: 1.25;
}

/* Bloc titre Kirby : marge haute modérée (2lh × titres 5xl devenait énorme). */
.tablo-block-heading > :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.75rem;
  margin-bottom: var(--copy-space);
  text-wrap: balance;
}

/* Titre « moyen » (h3, David 4XL) : casse normale — charte site/snippets/blocks/heading.php */
h3.tablo-heading__tag,
h3.tablo-heading__tag :is(p, span, strong, em) {
  text-transform: none;
}

/* Premier bloc de la colonne : pas de marge au-dessus du titre. */
.layout-column .space-y-10 > .tablo-block-heading:first-child > :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

/* Tailwind partiel : utilitaires manquants pour le bloc Texte (blueprint). */
.text-lg {
  font-size: 1.125rem;
  line-height: 1.25;
}

.text-sm {
  font-size: 1rem;
  line-height: 1.25;
}

.lowercase {
  text-transform: lowercase;
}

.normal-case {
  text-transform: none;
}

/*
 * Bloc Texte (Writer) : sur mobile, `p, .copy p { font-size: 5vw }` cible les <p> directement.
 * Le snippet pose --tablo-text-fs / --tablo-text-lh sur le wrapper ; on les réapplique aux p/li
 * avec !important pour rester au-dessus des règles globales mobile.
 */
.copy.tablo-text-block.tablo-text-sized :is(p, li) {
  font-size: var(--tablo-text-fs) !important;
  line-height: var(--tablo-text-lh) !important;
}

/**=================================== MENU NAV ======================================**/ 

@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-tracking:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-cyan-500:oklch(71.5% .143 215.221);--color-purple-500:oklch(62.7% .265 303.9);--color-gray-500:oklch(55.1% .027 264.364);--color-neutral-500:oklch(55.6% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--text-xl:1.25rem;--text-xl--line-height:1.25;--text-2xl:1.5rem;--text-2xl--line-height:1.25;--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.40rem;--text-4xl--line-height:calc(2.5/2.40);--text-5xl:5rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--tracking-tight:-.025em;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-text:orange;--color-background:var(--color-white);--color-shade:#ffa5000d}@supports (color:color-mix(in lab, red, red)){:root,:host{--color-shade:color-mix(in srgb,var(--color-text),transparent 95%)}}:root,:host{--spacing-container:none;--spacing-copy:none;--text-metadata:20px;--text-metadata--line-height:24px;--text-action:24px;--text-action--line-height:24px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}body{color:var(--color-text);background-color:var(--color-background);text-underline-offset:2px;line-height:1}body *{text-decoration-thickness:1px}}@layer components{.button{--border-width:1.5px;--vpadding:1.25rem;--hpadding:1.5rem;padding:var(--vpadding)var(--hpadding);outline:var(--border-width)solid;outline-offset:calc(var(--border-width)*-1);text-align:center;border-radius:9999px;min-width:8rem;display:block}
.button:hover{color:var(--color-background);background-color:var(--color-text);border-color:#0000}
.button--smaller{--vpadding:1rem;--hpadding:1.25rem}.button--primary{color:var(--color-background);background-color:var(--color-text);outline:none}.copy>:first-child{margin-top:0}.copy>:last-child{margin-bottom:0}.copy>p,.copy>ul,.copy>ol,.copy>dl,.copy>pre,.copy>table,.copy>figure,.copy>blockquote,.copy>aside,.copy>nav,.copy>div{margin-top:var(--copy-space);margin-bottom:var(--copy-space)}.copy>h1{margin-top:2lh;margin-bottom:var(--copy-space);font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height));--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}.copy>h2{margin-top:2lh;margin-bottom:var(--copy-space);font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height));--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}.copy>h3{margin-top:1lh;margin-bottom:var(--copy-space);font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}.copy a:not(.button){text-decoration-line:underline}.copy em{font-style:italic}.copy strong{font-weight:700}.copy ul>li{padding-left:0ch}.copy ul>li:before{content:"—";float:left;clear:left;width:3ch;margin-left:-3ch;display:block}.copy ol{counter-reset:ol}.copy ol>li{padding-left:3ch}.copy ol>li:before{counter-increment:ol;content:"0" counter(ol)".";float:left;clear:left;font-variant-numeric:tabular-nums;width:3ch;margin-left:-3ch;display:block}.copy ol>li:nth-child(n+10):before{content:counter(ol)"."}.copy>ul p,.copy>ol p{margin-top:var(--copy-space)}.copy blockquote{border-left:2px solid;padding-left:calc(3ch - 2px)}.copy code{background-color:var(--color-shade);padding:2px 4px;font-size:16px}.copy pre{white-space:pre-wrap;background-color:var(--color-shade);overflow-wrap:break-word;padding:20px}.copy pre code{background-color:#0000;padding:0;font-size:14px;line-height:20px;display:block}.copy img,.copy video{width:100%;height:auto;display:block}.copy figure a{display:block}.copy figure iframe{aspect-ratio:16/9;width:100%;height:auto}.copy figcaption{text-align:center;margin-top:.5rem;font-size:1rem}.ordered-entry{--indent:5rem;padding-left:var(--indent)}.ordered-entry:first-of-type{counter-reset:ol}.ordered-entry>:first-child:before{counter-increment:ol;content:"0" counter(ol);float:left;clear:left;width:var(--indent);margin-left:calc(var(--indent)*-1);font-variant-numeric:tabular-nums;display:block}.ordered-entry:nth-child(n+10)>first-child:before{content:counter(ol)}}@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.z-999{z-index:999}.z-9999{z-index:9999}.-mx-2{margin-inline:calc(var(--spacing)*-2)}.mx-2{margin-inline:calc(var(--spacing)*2)}.mx-4{margin-inline:calc(var(--spacing)*4)}.mx-auto{margin-inline:auto}.-my-1{margin-block:calc(var(--spacing)*-1)}.-my-2{margin-block:calc(var(--spacing)*-2)}.my-0\.5{margin-block:calc(var(--spacing)*.5)}.my-1{margin-block:calc(var(--spacing)*1)}.my-8{margin-block:calc(var(--spacing)*8)}.my-auto{margin-block:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-12{margin-top:calc(var(--spacing)*12)}.ml-1{margin-left:calc(var(--spacing)*1)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.aspect-square{aspect-ratio:1}.h-auto{height:auto}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-container{max-width:var(--spacing-container)}.max-w-copy{max-width:var(--spacing-copy)}.max-w-md{max-width:var(--container-md)}.min-w-10{min-width:calc(var(--spacing)*10)}.flex-1{flex:1}.basis-full{flex-basis:100%}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.touch-pan-y{--tw-pan-y:pan-y;touch-action:var(--tw-pan-x,)var(--tw-pan-y,)var(--tw-pinch-zoom,)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-fill-48{grid-template-columns:repeat(auto-fill,minmax(min(calc(var(--spacing)*48),100%),1fr))}.grid-cols-fill-64{grid-template-columns:repeat(auto-fill,minmax(min(calc(var(--spacing)*64),100%),1fr))}.grid-cols-fill-72{grid-template-columns:repeat(auto-fill,minmax(min(calc(var(--spacing)*72),100%),1fr))}.grid-cols-fill-128{grid-template-columns:repeat(auto-fill,minmax(min(calc(var(--spacing)*128),100%),1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-8{gap:calc(var(--spacing)*8)}.gap-12{gap:calc(var(--spacing)*12)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*10)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*10)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-6{column-gap:calc(var(--spacing)*6)}.gap-x-8{column-gap:calc(var(--spacing)*8)}.gap-x-16{column-gap:calc(var(--spacing)*16)}.gap-y-4{row-gap:calc(var(--spacing)*4)}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.bg-background\/98{background-color:#fffffffa}@supports (color:color-mix(in lab, red, red)){.bg-background\/98{background-color:color-mix(in oklab,var(--color-background)98%,transparent)}}.bg-current\/5{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.bg-current\/5{background-color:color-mix(in oklab,currentcolor 5%,transparent)}}.bg-shade{background-color:var(--color-shade)}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}
.px-4{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-16{padding-block:calc(var(--spacing)*16)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}
.text-4xl{
  font-size:var(--text-4xl);
  line-height:var(--tw-leading, 1.25)}
  
  .text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-action{font-size:var(--text-action);line-height:var(--tw-leading,var(--text-action--line-height))}.text-metadata{font-size:var(--text-metadata);line-height:var(--tw-leading,var(--text-metadata--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.text-current\/10{color:currentColor}@supports (color:color-mix(in lab, red, red)){.text-current\/10{color:color-mix(in oklab,currentcolor 10%,transparent)}}.text-current\/20{color:currentColor}@supports (color:color-mix(in lab, red, red)){.text-current\/20{color:color-mix(in oklab,currentcolor 20%,transparent)}}.text-current\/40{color:currentColor}@supports (color:color-mix(in lab, red, red)){.text-current\/40{color:color-mix(in oklab,currentcolor 40%,transparent)}}.text-current\/50{color:currentColor}@supports (color:color-mix(in lab, red, red)){.text-current\/50{color:color-mix(in oklab,currentcolor 50%,transparent)}}.text-gray-500\/20{color:#6a728233}@supports (color:color-mix(in lab, red, red)){.text-gray-500\/20{color:color-mix(in oklab,var(--color-gray-500)20%,transparent)}}.text-neutral-500{color:var(--color-neutral-500)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.underline-offset-8{text-underline-offset:8px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}:is(.\*\*\:decoration-2 *){text-decoration-thickness:2px}@media (hover:hover){.group-hover\:underline:is(:where(.group):hover *){text-decoration-line:underline}.hover\:text-current:hover{color:currentColor}.hover\:underline:hover{text-decoration-line:underline}}@media (min-width:48rem){.md\:mx-8{margin-inline:calc(var(--spacing)*8)}.md\:flex{display:flex}.md\:flex-row{flex-direction:row}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:flex-wrap{flex-wrap:wrap}:where(.md\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}.md\:gap-y-8{row-gap:calc(var(--spacing)*8)}.md\:p-4{padding:calc(var(--spacing)*4)}.md\:p-8{padding:calc(var(--spacing)*8)}.md\:text-current{color:currentColor}}@media (min-width:64rem){.lg\:static{position:static}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-start-2{grid-column-start:2}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}}@media (min-width:80rem){.xl\:col-span-2{grid-column:span 2/span 2}.xl\:col-span-3{grid-column:span 3/span 3}.xl\:col-start-2{grid-column-start:2}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}.-d,.-d .-d{outline:1px dashed var(--color-purple-500)}.-d *{outline:1px dashed var(--color-cyan-500)}:root{--copy-space:2rem}.glightbox-container.glightbox-tablo .gzoomIn{animation:.2s gzoomIn}.glightbox-container.glightbox-tablo .gzoomOut{animation:.2s gzoomOut}.glightbox-container.glightbox-tablo .goverlay{background-color:var(--color-background);opacity:.98}.glightbox-container.glightbox-tablo .gslide-description{background:#fff}.glightbox-container.glightbox-tablo .gdesc-inner{padding:22px 20px}.glightbox-container.glightbox-tablo .gslide-title{color:#000;margin-bottom:19px;font-size:1em;line-height:1.4em}.glightbox-container.glightbox-tablo .gslide-desc{margin-bottom:0;font-size:.86em;line-height:1.4em}.glightbox-container.glightbox-tablo .gslide-video{background:#000}.glightbox-container.glightbox-tablo .gprev,.glightbox-container.glightbox-tablo .gnext,.glightbox-container.glightbox-tablo .gclose{position:absolute}:is(.glightbox-container.glightbox-tablo .gprev,.glightbox-container.glightbox-tablo .gnext,.glightbox-container.glightbox-tablo .gclose) path{fill:var(--color-text)}.glightbox-container.glightbox-tablo .gprev,.glightbox-container.glightbox-tablo .gnext{width:3rem;height:4rem;margin-top:-2rem;position:absolute;top:50%}:is(.glightbox-container.glightbox-tablo .gprev,.glightbox-container.glightbox-tablo .gnext) svg{width:3rem;height:4rem}.glightbox-container.glightbox-tablo .gprev,.glightbox-container.glightbox-tablo .gnext{display:none}@media (min-width:40rem){.glightbox-container.glightbox-tablo .gprev,.glightbox-container.glightbox-tablo .gnext{display:block}}.glightbox-container.glightbox-tablo .gprev{left:2rem}.glightbox-container.glightbox-tablo .gnext{right:2rem}.glightbox-container.glightbox-tablo .gclose{width:3rem;height:3rem;top:2rem;right:2rem}.glightbox-container.glightbox-tablo .gclose svg{width:2rem;height:2rem;margin:.5rem}.glightbox-container.glightbox-tablo .gclose:hover{opacity:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

  .button--bigger:not(header .button, footer .button) {
    --button-inset-ring: 2px;
    --border-width: 1.5px;
    --vpadding: 1.20rem;
    --hpadding: clamp(0.55rem, 2.3vw, 3.5rem);
    display: block;
    padding: var(--vpadding) var(--hpadding);
    border: 0;
    outline: none;
    border-radius: 9999px;
    min-width: 8rem;
    text-align: center;
    background-color: black;
    color: white;
    --button-ring-color: var(--color-background);
    box-shadow: inset 0 0 0 var(--button-inset-ring) var(--button-ring-color);
    &:hover {
      --button-ring-color: var(--color-text);
      color: var(--color-text);
      background-color: var(--color-background);
      border-color: transparent;
    }}

header figure {
  /* Le bloc logo occupe seulement la place de son contenu (logo + icône),
     le reste de la largeur est disponible pour les boutons de navigation */
  flex: 0 0 auto;
}

.logo-block {
  flex: 0 0 auto;
  max-width: clamp(14.5rem, 18vw, 17rem);
}

header figure a {
  display: flex;
  align-items: center;
  min-height: var(--nav-item-height);
}

@layer components {
  .button {
    --border-width: 1.5px;
    --button-inset-ring: 2px;
    --vpadding: 0.9rem;
    --hpadding: 2.5rem;

    display: block;
    min-width: 8rem;
    padding: var(--vpadding) var(--hpadding);
    text-align: center;

    background-color: var(--color-text);
    color: var(--color-background);

    outline-offset: calc(var(--border-width) * -1);

    transition: background-color ease, color ease, border-radius ease, box-shadow ease;
  }

  /* Contenu uniquement : trait intérieur fixe (box-shadow inset), pas de saut de layout au hover.
     Header / footer : bordure réelle (pas d’outline inset — le fond ne doit pas dépasser le cadre). */
  .button:not(header .button, footer .button) {
    border: 0;
    outline: none;
    
    outline-offset: 0;
    box-shadow: inset 0 0 0 var(--button-inset-ring) var(--button-ring-color);
  }

  .button:hover {
    background-color: var(--color-background);
    color: var(--color-text);
  }

  .button:not(header .button, footer .button):hover {
    --button-ring-color: var(--color-text);
  }

  header .button,
  footer .button {
    box-sizing: border-box;
    border-style: solid;
    border-width: var(--border-width);
    border-color: currentColor;
    outline: none;
    outline-offset: 0;
    box-shadow: none;
    background-clip: padding-box;
  }

  /* Footer actions : couleur hors transition ; overflow géré dans actions.twig */
  footer nav.footer-actions .button,
  footer nav.footer-actions a.button {
    overflow: hidden;
    text-overflow: clip;
    transition-property: background-color, width, max-width, padding, border-radius;
    transition-duration: 0.18s;
    transition-timing-function: ease-out;
  }

  footer nav.footer-actions .button::first-letter,
  footer nav.footer-actions a.button::first-letter {
    transition: none !important;
  }

  header .button:hover,
  footer .button:hover {
    --border-width: 0;
    border: 0;
    /* Anneau intérieur 1px géré par les règles .actions-wrapper (pas de saut layout). */
    border-color: transparent;
  }

  header .button:focus-visible,
  footer .button:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .button:not(header .button, footer .button):focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .button--smaller {
    --vpadding: 1rem;
    --hpadding: 1.25rem;
  }

  .button--square {
    border-radius: 0;
  }

  .button--rounded {
    border-radius: 9999px;
  }

  /* Inversion forme au hover → action-button-shapes.css */

  .button--primary {
    background-color: var(--color-text);
    color: var(--color-background);
  }

  .button--primary:not(header .button, footer .button) {
    outline: none;
    --button-ring-color: var(--color-background);
  }

  .button--primary:hover {
    background-color: var(--color-text);
    color: var(--color-background);
  }

  .button--primary:not(header .button, footer .button):hover {
    --button-ring-color: var(--color-background);
  }

  /* Boutons de navigation du header (menu principal + fil d’Ariane) */
  header .header-nav-button {
    height: var(--nav-item-height);
    min-height: var(--nav-item-height);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    width: 100%;
  }

  /* Aligné sur actions.twig : hover instantané (pas de tween sur forme / couleurs). */
  header .actions-wrapper .action-item > .button.header-nav-button,
  header .actions-wrapper .action-item > button.header-nav-button {
    transition: none;
  }

  .actions-wrapper {
    --menu-button-width: 100%;
    gap: 1rem;
  }

/**=================================== GREY OVERLAY ======================================**/ 

.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(198, 198, 198, 0.594);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  z-index: 50;
}

footer{
  position: static;
  z-index: 100;
  padding-bottom: var(--site-chrome-inset-block, 0.75rem);
}

/* Évite de cumuler py-* du dernier bloc avec l’inset bas de page. */
footer > :last-child {
  padding-bottom: 0 !important;
}

footer > :last-child > *:last-child {
  padding-bottom: 0 !important;
}

header {
  z-index: 100;
  position: relative;
  background-color: #ffffff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Padding haut classique. Padding bas reduit au minimum pour que le
     bord bas du header (ou peint son fond blanc) arrive tres pres de
     la baseline des boutons principaux : le submenu (ancre
     GAP + padding-top interne) se retrouve ainsi integralement
     SOUS le fond du header, sans que son bord haut ne soit masque par
     ce fond (qui avait un z-index superieur). C'est cela qui supprime
     l'effet de "crop" visuel au hover des boutons du submenu.
     Sous-menu ouvert : la baseline est sortie du flux (voir default-header.css)
     pour que la hauteur du header ne fasse pas varier l ancrage ni l extension
     du sous-menu. Le fond etendu (.header-bg-extender) couvre toute la zone. */
  padding-top: var(--site-chrome-inset-block, 0.75rem) !important;
  padding-bottom: 1.8rem !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  align-items: flex-end !important;
}

/* Sous-menu ouvert : padding header stable ; baseline conserve sa marge. */
header.has-active-submenu:has(.header-site-baseline) {
  padding-bottom: 1.8rem !important;
}

header.has-active-submenu {
  overflow: visible !important;
}

header.has-active-submenu.header-floating.header-shrunk:has(.header-site-baseline) {
  padding-top: var(--site-chrome-inset-block, 0.75rem) !important;
  padding-bottom: 1rem !important;
}

/* Header baseline alignment: logo + actions aligned on bottom edge */
header .header-left,
header .header-right {
  align-items: flex-end !important;
}

header .header-left {
  display: flex;
}

header .header-left figure {
  display: flex;
  align-items: flex-end !important;
  margin: 0 !important;
}

/* Remove extra vertical padding around logo wrapper to align on SVG bottom */
header .header-left figure > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: flex-end !important;
}

/* Avoid extra vertical offset on action column */
header .header-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  align-self: flex-end !important;
}

/* IMPORTANT : on ne redefinit PAS --nav-item-height sur .actions-wrapper.
   Cette variable est maintenant posee une seule fois au niveau du header
   (voir plus bas) et partagee par toutes les zones du header (logo, boutons
   breadcrumb, SVG fleche, boutons menu). Si on la redefinissait ici, les
   boutons du menu auraient une hauteur differente de celle du logo. */

/* Lissage de la jonction bas du header (évite une limite trop nette) */
header::after {
  display: none;
}

.page main,
body > main,
body > main.site-main {
  margin-top: var(--site-main-offset-top, 7em);
}

/* Mobile / tablette : le header fixe (logo + baseline) dépasse souvent mt-28 (~7rem) */
@media (max-width: 1021px) {
  .page main,
  body > main,
  body > main.site-main {
    margin-top: max(
      var(--site-main-offset-top, 9.5rem),
      clamp(9.25rem, 10vh + 5.75rem, 14.5rem)
    );
  }
}

.menu-overlay {
  z-index: 50;
}

/**===================================
  BLOCK SPACE
====================================**/

/* Espacement bloc : mobile par défaut, desktop à partir de md (une seule taille éditoriale). */
.tablo-block-space--xs {
  height: 1rem;
}

.tablo-block-space--sm {
  height: 2rem;
}

.tablo-block-space--md {
  height: 4rem;
}

.tablo-block-space--lg {
  height: 6rem;
}

.tablo-block-space--xl {
  height: 8rem;
}

.tablo-block-space--2xl {
  height: 10rem;
}

@media (min-width: 768px) {
  .tablo-block-space--xs {
    height: 0.5rem;
  }

  .tablo-block-space--sm {
    height: 1rem;
  }

  .tablo-block-space--md {
    height: 3rem;
  }

  .tablo-block-space--lg {
    height: 6rem;
  }

  .tablo-block-space--xl {
    height: 10rem;
  }

  .tablo-block-space--2xl {
    height: 16rem;
  }
}

/**===================================
  RESSOURCES SEARCH
====================================**/

.ressources-search-input {
  background: #000000;
  color: #ffffff;
  border: 0;
  outline: none;
  font-family: "Caliste", "Carliste", sans-serif !important;
  text-transform: uppercase;
  font-size: var(--text-4xl);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ressources-search-input.ressources-search-input--theme-size {
  font-size: 3rem;
  line-height: 1;
}

.ressources-search-input.ressources-search-input--theme-size::placeholder {
  font-size: 3rem;
  opacity: 40%;
}

.ressources-search-input::placeholder {
  color: #ffffff;
  opacity: 1;
  text-transform: uppercase;
}

.ressources-search-input[type="search"]::-webkit-search-cancel-button,
.ressources-search-input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.ressources-search-form {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: visible;
  z-index: 70;
}

.ressources-search-form--with-theme-gap {
  margin-bottom: 0;
}

.ressources-search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  background: #000000;
  padding-right: 0.5rem;
}

.ressources-search-input {
  flex: 1 1 auto;
}

.ressources-search-submit {
  color: #ffffff;
  background: transparent;
  border: 0;
  font-family: "Caliste", "Carliste", sans-serif !important;
  font-size: var(--text-4xl);
  line-height: 1;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.ressources-live-results:empty {
  display: none;
}

.ressources-live-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  margin: 0;
  list-style: none;
  background: #000000;
  z-index: 60;
  padding: 0.25rem;
}

.ressources-live-results.ressources-search-results--expanded {
  max-height: 60vh;
  overflow-y: auto;
}

.ressources-live-result-item {
  margin: 0.25rem 0;
  background: #000000;
  transform: translateY(4px);
  transition: transform 0.18s ease-out;
}

.ressources-live-result-item.is-visible {
  transform: translateY(0);
}

.ressources-live-result-item a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 1rem;
  color: #ffffff;
  text-decoration: none;
}

.ressources-live-result-item button {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  padding: 0.65rem 1rem;
  color: #ffffff;
  background: #000000;
  border: 0;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.ressources-live-result-item a:hover {
  text-decoration: underline;
}

.ressources-live-result-item button:hover {
  text-decoration: underline;
}

.ressources-live-result-title {
  font-size: var(--text-3xl);
}

.ressources-live-result-snippet {
  font-size: var(--text-2xl);
  line-height: 1.35;
  opacity: 0.9;
}

.ressources-live-result-meta {
  text-transform: uppercase;
  font-size: var(--text-2xl);
}

.ressources-live-result-item-more {
  margin-left: 0;
  margin-right: 0;
}

.ressources-live-results-more {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #000000;
  border: none;
  color: #ffffff;
  font-size: var(--text-4xl);
  cursor: pointer;
  text-align: left;
}

.ressources-live-results-more .more-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
}

.ressources-live-results-more .more-dots .dot {
  opacity: 0;
  font-size: 1.6em;
  line-height: 0.5;
  position: relative;
  top: -0.3em;
  animation: more-dot-pulse 1.05s ease-in-out infinite;
}

.ressources-live-results-more .more-dots .dot:nth-child(2) { animation-delay: 140ms; }
.ressources-live-results-more .more-dots .dot:nth-child(3) { animation-delay: 280ms; }

.ressources-categories-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 20px;
  row-gap: 150px;
}

@media (min-width: 768px) {
  .ressources-categories-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 150px;
  }
}

.ressources-category-card {
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid #000000;
  background: #000000;
  color: #ffffff;
  padding: 1rem 1.25rem;
  transition: border-radius 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, border-width 90ms linear, opacity 180ms ease;
}

/* Mobile (1 colonne): ligne horizontale entre chaque carte */
.ressources-category-card + .ressources-category-card::before {
  content: "";
  position: absolute;
  top: -75px;
  left: 0;
  right: 0;
  height: 1px;
  background: #000000;
  pointer-events: none;
}

.ressources-category-card--theme-height {
  width: 100%;
  aspect-ratio: 549 / 285;
}

@media (min-width: 768px) {
  .ressources-category-card {
    grid-column: span 4 / span 4;
  }

  /* Desktop (3 colonnes): une ligne horizontale par rangée */
  .ressources-category-card + .ressources-category-card::before {
    content: none;
  }

  .ressources-category-card:nth-child(3n + 1):nth-child(n + 4)::before {
    content: "";
    position: absolute;
    top: -75px;
    left: 0;
    width: calc(300% + 40px); /* 3 cartes + 2 gaps de 20px */
    height: 1px;
    background: #000000;
    pointer-events: none;
  }
}

.ressources-category-card:hover {
  background: #ffffff;
  color: #000000;
  border-color: #000000;
  opacity: 1;
  border-width: 2px;
}

.ressources-category-card--square {
  border-radius: 0;
}

.ressources-category-card--rounded {
  border-radius: 9999px;
}

.ressources-category-card--rounded:hover {
  border-radius: 0;
}

.ressources-category-card--square:hover {
  border-radius: 9999px;
}

.ressources-category-title {
  font-family: "Caliste", "Carliste", sans-serif !important;
  text-transform: uppercase;
  text-align: center;
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, 1.25);
}

.ressources-category-title--theme-size {
  font-size: 2.5rem;
}

.ressources-category-count {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  text-align: center;
}

.ressources-category-count--theme-size {
  font-size: 1rem;
}

/**===================================
  RESSOURCES - VUE CATÉGORIE
====================================**/

.ressources-theme-header {
  margin-bottom: 0.5rem;
}

.ressources-theme-header--with-close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ressources-theme-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #000000;
  text-decoration: none;
  font-family: "Caliste", "Carliste", sans-serif !important;
  font-size: 5rem;
  line-height: 1;
}

.ressources-theme-view--harmonized > .ressources-search-form {
  margin-bottom: 0;
}

.ressources-theme-view--harmonized > .ressources-theme-header {
  margin-top: 160px;
  margin-bottom: 240px;
}

.ressources-theme-view--harmonized .ressources-theme-title {
  font-size: 5rem;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

.ressources-theme-title {
  font-family: "Caliste", "Carliste", sans-serif !important;
  text-transform: uppercase;
  text-align: center;
  font-size: var(--text-5xl);
  line-height: 1;
  padding-top: 2em;
  padding-bottom: 3em;
}

.ressources-theme-filters {
  border: 1px solid #000000;
  padding: 1rem;
  background: #ffffff;
}

.ressources-theme-filter-field label {
  font-family: "David", serif !important;
  text-transform: uppercase;
  color: #000000;
}

.ressources-theme-filter-field select {
  background: #ffffff;
  color: #000000;
}

.ressources-theme-filter-actions {
  align-self: flex-end;
}

.ressources-theme-filter-button {
  min-width: 9rem;
}

.ressources-theme-count {
  font-family: "Caliste", "Carliste", sans-serif !important;
  text-transform: uppercase;
  color: #000000;
}

.ressources-theme-list {
  padding-top: 4rem;
}

.ressources-theme-list ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.ressources-accordion-list,
.ressources-accordion-list *:not(.accordion-layout-content):not(.accordion-layout-content *) {
  text-transform: lowercase;
}

.ressources-theme-list li {
  border: 0;
  padding: 0;
}

.ressources-item {
  padding-bottom: 0 !important;
}

.ressources-theme-pagination {
  justify-content: flex-start;
}

.ressource-accordion-summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}

.ressource-accordion-summary::-webkit-details-marker {
  display: none;
}

.ressource-accordion-title {
  font-size: 1.2rem;
  text-decoration: none;
  margin: 0;
  padding-top: 26px;
  padding-left: 26px;
}

.ressource-accordion-meta {
  margin-top: 0.25rem;
  font-size: 1.2rem;
  color: inherit;
  padding-top: 26px;
  padding-left: 26px;
}

.ressource-accordion-item:not([open]) .ressource-accordion-title,
.ressource-accordion-item:not([open]) .ressource-accordion-meta {
  padding-bottom: 26px;
}

.annonces-accordion-info {
  padding-top: 26px;
  padding-left: 26px;
  font-size: 1.2rem!important;
  line-height: 1.2;
}

.ressource-accordion-item:not([open]) .annonces-accordion-info {
  padding-bottom: 26px;
}

.annonces-accordion-info p {
  margin: 0;
}

.annonces-accordion-actions {
  display: grid;
  gap: 0.75rem;
}

.annonces-accordion-content-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
  font-family: "Caliste", "Carliste", sans-serif !important;
  text-transform: uppercase;
}

.annonces-accordion-content .annonces-accordion-text,
.annonces-accordion-content .annonces-accordion-text * {
  font-size: 0.7rem !important;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .ressource-accordion-summary {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: flex-start;
    gap: var(--site-gutter);
  }

  .ressource-accordion-head {
    grid-column: 1 / span 9;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    align-items: flex-start;
    gap: var(--site-gutter);
  }

  .ressource-accordion-title {
    grid-column: 1 / span 5;
  }

  .ressource-accordion-meta {
    grid-column: 8 / span 2;
    margin-top: 0;
  }

  .ressource-accordion-plus {
    grid-column: 12;
    align-items: flex-start;
  }

  .annonces-accordion-title {
    grid-column: 1 / span 3;
  }

  .annonces-accordion-organisme {
    grid-column: 4 / span 3;
    margin-top: 0;
  }

  .annonces-accordion-departement {
    grid-column: 7 / span 3;
    margin-top: 0;
  }

  .annonces-accordion-info {
    grid-column: 10 / span 2;
  }

  .annonces-accordion-content .annonces-accordion-text {
    grid-column: 1 / span 3;
  }

  .annonces-accordion-content .annonces-accordion-content-title {
    grid-column: 1 / span 3;
  }

  .annonces-accordion-content .annonces-accordion-actions {
    grid-column: 10 / span 3;
  }

  .annonces-accordion-content .ressource-accordion-links,
  .annonces-accordion-content .ressource-accordion-files {
    grid-column: auto;
    justify-self: start;
  }

  .annonces-accordion-content .ressource-action-download {
    justify-self: start;
  }
}

.ressource-accordion-plus {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 9999px;
  border: 1px solid #000000;
  background: #000000;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 26px;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.ressource-accordion-plus::before {
  content: "+";
}

.ressource-accordion-item[open] .ressource-accordion-plus {
  transform: rotate(45deg);
}

/* Mobile : la pastille + ne doit pas coller au bord du <details> (résumé cliquable) */
@media (max-width: 767px) {
  .ressource-accordion-summary {
    padding-right: 1.25rem;
    box-sizing: border-box;
  }

  .ressource-accordion-plus {
    margin-right: 0.35rem;
  }

  .ressource-accordion-head {
    min-width: 0;
    padding-right: 0.35rem;
  }
}

.ressource-accordion-item[open] {
  background: #000000;
  color: #ffffff;
}

.ressource-accordion-item[open] .ressource-accordion-title,
.ressource-accordion-item[open] .ressource-accordion-meta,
.ressource-accordion-item[open] .ressource-accordion-content,
.ressource-accordion-item[open] .ressource-accordion-links a,
.ressource-accordion-item[open] .ressource-accordion-files a {
  color: #ffffff;
}

.ressource-accordion-content {
  padding-top: 26px;
  padding-bottom: 26px;
  padding-left: 26px;
  display: grid;
  gap: 1rem;
  font-size: 18px;
  line-height: 1.4;
}

.ressource-accordion-item[open] .ressource-accordion-content,
.ressource-accordion-item[open] .ressource-accordion-content * {
  font-size: 0.9rem !important;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .ressource-accordion-content {
    max-width: 100%;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--site-gutter);
    row-gap: 0.75rem;
  }

  .ressource-accordion-text {
    grid-column: 1 / span 5;
  }

  .ressource-accordion-links,
  .ressource-accordion-files {
    grid-column: 8 / span 4;
  }
}

.ressource-accordion-links h4,
.ressource-accordion-files h4 {
  font-family: "Caliste", "Carliste", sans-serif !important;
  text-transform: uppercase;
  font-size: var(--text-2xl);
  margin-bottom: 0.4rem;
}

.ressource-accordion-links ul,
.ressource-accordion-files ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.ressource-accordion-links li,
.ressource-accordion-files li {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.ressource-action-button {
  --ressource-action-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: var(--ressource-action-height);
  height: var(--ressource-action-height);
  box-sizing: border-box;
  padding: 0 1.35rem;
  background: var(--ressource-btn-bg, #ffffff);
  color: var(--ressource-btn-text, #000000) !important;
  -webkit-text-fill-color: var(--ressource-btn-text, #000000) !important;
  text-decoration: none;
  border: 1px solid var(--ressource-btn-bg, #ffffff);
  border-radius: 9999px;
  will-change: border-radius;
  transition: border-radius 70ms linear, background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  text-align: center;
}

.ressource-accordion-links a.ressource-action-button,
.ressource-accordion-files a.ressource-action-button {
  width: 100%;
  max-width: 100%;
}

.ressource-action-button:hover {
  border-radius: 0;
  background: var(--ressource-btn-hover-bg, #000000);
  border: 1px solid var(--ressource-btn-hover-bg, #000000);
  color: var(--ressource-btn-hover-text, #ffffff) !important;
  -webkit-text-fill-color: var(--ressource-btn-hover-text, #ffffff) !important;
}

/* Annonces / ressources : priorité sur l’inversion panneau ouvert (*, liens bruts). */
.annonces-page-custom .ressource-accordion-links a.ressource-action-button,
.annonces-page-custom .ressource-accordion-files a.ressource-action-button {
  background: var(--page-bg, #ffffff) !important;
  color: var(--ressource-btn-text, var(--ressources-theme-button-text, #ffffff)) !important;
  -webkit-text-fill-color: var(--ressource-btn-text, var(--ressources-theme-button-text, #ffffff)) !important;
  border-color: var(--page-bg, #ffffff) !important;
}

.ressources-page-custom .ressource-accordion-links a.ressource-action-button,
.ressources-page-custom .ressource-accordion-files a.ressource-action-button {
  background: var(--ressource-btn-bg, var(--ressources-theme-button-bg, #000000)) !important;
  color: var(--ressource-btn-text, var(--ressources-theme-button-text, #ffffff)) !important;
  -webkit-text-fill-color: var(--ressource-btn-text, var(--ressources-theme-button-text, #ffffff)) !important;
  border-color: var(--ressource-btn-bg, var(--ressources-theme-button-bg, #000000)) !important;
}

.annonces-page-custom .ressource-accordion-links a.ressource-action-button,
.annonces-page-custom .ressource-accordion-files a.ressource-action-button {
  transition:
    border-radius 0s linear,
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
}

.annonces-page-custom .ressource-accordion-links a.ressource-action-button:hover,
.annonces-page-custom .ressource-accordion-files a.ressource-action-button:hover {
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 2px solid #ffffff !important;
  border-color: #ffffff !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px #000000 !important;
  background-clip: padding-box !important;
  transition:
    border-radius 0s linear,
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
}

.ressources-page-custom .ressource-accordion-links a.ressource-action-button:hover,
.ressources-page-custom .ressource-accordion-files a.ressource-action-button:hover {
  background: var(--ressource-btn-hover-bg, var(--ressources-theme-button-hover-bg, var(--ressources-theme-text, #000000))) !important;
  color: var(--ressource-btn-hover-text, var(--ressources-theme-button-hover-text, var(--page-bg, #ffffff))) !important;
  -webkit-text-fill-color: var(--ressource-btn-hover-text, var(--ressources-theme-button-hover-text, var(--page-bg, #ffffff))) !important;
  border-color: var(--ressource-btn-hover-bg, var(--ressources-theme-button-hover-bg, var(--ressources-theme-text, #000000))) !important;
}

.ressource-action-button--download {
  grid-row: 1;
  min-height: var(--ressource-action-height);
  width: 100%;
  box-sizing: border-box;
  padding-left: 2rem;
  padding-right: calc(2rem + var(--ressource-action-height));
  transition: padding-right 190ms ease, border-radius 70ms linear, background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.ressource-action-download {
  --ressource-action-height: 42px;
  display: inline-grid;
  grid-template-columns: auto var(--ressource-action-height);
  column-gap: 0;
  align-items: center;
  width: fit-content;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.ressource-action-download-icon {
  display: block;
  grid-column: 2;
  grid-row: 1;
  margin-left: -1px;
  justify-self: start;
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  border-radius: 9999px;
  border: 1px solid #000000;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 18px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2261%22%20height%3D%2236%22%20viewBox%3D%220%200%2061%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M25.3031%2018.9701C26.0711%2019.3301%2026.7431%2019.6781%2027.3191%2020.0141C27.8951%2020.3741%2028.3751%2020.7221%2028.7591%2021.0581L28.7591%200.0701451L30.2711%200.0701451L30.2711%2021.0581C30.6791%2020.7221%2031.1711%2020.3741%2031.7471%2020.0141C32.3231%2019.6781%2032.9831%2019.3301%2033.7271%2018.9701L33.7271%2020.2301C31.9751%2021.7421%2030.6791%2023.3261%2029.8391%2024.9821L29.1911%2024.9821C28.3751%2023.3261%2027.0791%2021.7421%2025.3031%2020.2301L25.3031%2018.9701Z%22%20fill%3D%22black%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2235%22%20x2%3D%2247%22%20y2%3D%2235%22%20stroke%3D%22black%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2211%22%20y1%3D%2236%22%20x2%3D%2211%22%20y2%3D%2229%22%20stroke%3D%22black%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2247%22%20y1%3D%2236%22%20x2%3D%2247%22%20y2%3D%2229%22%20stroke%3D%22black%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
  opacity: 0;
  transition: none;
  line-height: 0;
}

.ressource-action-download:hover .ressource-action-button {
  grid-column: 1;
  border-radius: 0;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}

.ressource-action-download:hover .ressource-action-download-icon {
  opacity: 1;
  border-color: #000000;
}

/* Download actions (global actions buttons) */
.action-download {
  --ressource-action-height: 60px;
  --pdf-shape-rounded: 9999px;
  --pdf-shape-sharp: 0;
  /* Libellé et pastille : même épaisseur de contour au survol (homogène sur tout le site). */
  --pdf-dl-hover-border-width: 1px;
  display: inline-grid;
  grid-template-columns: auto var(--ressource-action-height);
  column-gap: 0;
  align-items: center;
  width: fit-content;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* Le lien correspond au bouton (pas de .download-action-button enfant) : styles anciennement sur l’enfant inexistants regroupés ici */
a.action-download.download-action-button {
  min-height: var(--ressource-action-height);
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

a.action-download.download-action-button.w-full {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) var(--ressource-action-height) !important;
}

.action-download-icon {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  margin-left: -1px;
  justify-self: start;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  border-radius: 0;
  border: 1px solid #000000;
  background-color: #ffffff;
  opacity: 0;
  transition: opacity 0.15s ease, border-radius var(--astre-btn-shape-duration, 0.18s) ease;
  pointer-events: none;
  line-height: 0;
}

.action-download-icon .ressource-action-download-icon-svg {
  display: block;
  width: 30px;
  height: 18px;
}

/* PDF : au survol / focus (défaut site ; variables optionnelles depuis le parent).
   Une seule bordure 1px (pas d’inset ring) — alignée sur .action-download-icon au repos. */
a.action-download.download-action-button:hover .action-download__label,
a.action-download.download-action-button:focus-visible .action-download__label,
a.action-download.download-action-button:focus-within .action-download__label,
.action-download.download-action-button:hover .action-download__label,
.action-download.download-action-button:focus-visible .action-download__label,
.action-download.download-action-button:focus-within .action-download__label {
  background-color: var(--pdf-dl-hover-bg, var(--archived-pdf-hover-bg, #ffffff)) !important;
  background: var(--pdf-dl-hover-bg, var(--archived-pdf-hover-bg, #ffffff)) !important;
  color: var(--pdf-dl-hover-text, var(--archived-pdf-hover-text, #000000)) !important;
  -webkit-text-fill-color: var(--pdf-dl-hover-text, var(--archived-pdf-hover-text, #000000)) !important;
  --button-inset-ring: 0 !important;
  border-style: solid !important;
  border-color: var(--pdf-dl-hover-border, var(--archived-pdf-hover-border, #000000)) !important;
  border-width: var(--pdf-dl-hover-border-width, 1px) !important;
  box-shadow: none !important;
  outline: none !important;
}

a.action-download:hover .action-download-icon,
a.action-download:focus-visible .action-download-icon,
a.action-download:focus-within .action-download-icon {
  opacity: 1 !important;
  background-color: var(--pdf-dl-hover-bg, var(--archived-pdf-hover-bg, #ffffff)) !important;
  background: var(--pdf-dl-hover-bg, var(--archived-pdf-hover-bg, #ffffff)) !important;
  color: var(--pdf-dl-hover-text, var(--archived-pdf-hover-text, #000000)) !important;
  border-style: solid !important;
  border-color: var(--pdf-dl-hover-border, var(--archived-pdf-hover-border, #000000)) !important;
  border-width: var(--pdf-dl-hover-border-width, 1px) !important;
  box-shadow: none !important;
}

a.action-download:hover .action-download-icon .ressource-action-download-icon-svg,
a.action-download:focus-visible .action-download-icon .ressource-action-download-icon-svg,
a.action-download:focus-within .action-download-icon .ressource-action-download-icon-svg {
  color: #000000 !important;
}

a.action-download:hover .action-download-icon svg :is(path, line),
a.action-download:focus-visible .action-download-icon svg :is(path, line),
a.action-download:focus-within .action-download-icon svg :is(path, line) {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* Clic souris : le lien garde :focus / :focus-within au retour d’onglet (PDF target=_blank)
   → pastille visible sans survol. :focus-visible conserve l’état clavier. */
a.action-download.download-action-button:focus:not(:focus-visible) .action-download-icon,
a.action-download.download-action-button:focus-within:not(:focus-visible) .action-download-icon,
a.action-download:focus:not(:focus-visible) .action-download-icon,
a.action-download:focus-within:not(:focus-visible) .action-download-icon {
  opacity: 0 !important;
}

/* Formes PDF / actions : voir bloc global « ACTION BUTTONS — INVERSE SHAPE » en fin de fichier. */

/* =============================================================================
   Événements archivés (Astroïde, Concertation « a déjà eu lieu », Rencontre régionale)
   Mode N&B uniquement : bouton noir / texte blanc ; survol bordure noire 1px, fond blanc, texte noir.
   Libellé et pastille PDF : même épaisseur de bordure (1px). N’affecte pas le mode saison.
   ============================================================================= */
body[data-contrast-mode="bw"] .events-archived-pdf-zone {
  --evt-apdf-bg: #000000;
  --evt-apdf-fg: #ffffff;
  --evt-apdf-hover-bg: #ffffff;
  --evt-apdf-hover-fg: #000000;
  --evt-apdf-hover-border: #000000;
  --evt-apdf-border-width: 1px;
}

body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download .action-download__label {
  background-color: var(--evt-apdf-bg) !important;
  background: var(--evt-apdf-bg) !important;
  color: var(--evt-apdf-fg) !important;
  -webkit-text-fill-color: var(--evt-apdf-fg) !important;
  border: var(--evt-apdf-border-width) solid var(--evt-apdf-bg) !important;
  border-color: var(--evt-apdf-bg) !important;
  outline: none !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
}

body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download .action-download-icon {
  background-color: var(--evt-apdf-bg) !important;
  background: var(--evt-apdf-bg) !important;
  color: var(--evt-apdf-fg) !important;
  border: var(--evt-apdf-border-width) solid var(--evt-apdf-bg) !important;
  border-color: var(--evt-apdf-bg) !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:hover .action-download__label,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-visible .action-download__label,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-within .action-download__label,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:hover .action-download-icon,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-within .action-download-icon {
  background-color: var(--evt-apdf-hover-bg) !important;
  background: var(--evt-apdf-hover-bg) !important;
  color: var(--evt-apdf-hover-fg) !important;
  -webkit-text-fill-color: var(--evt-apdf-hover-fg) !important;
  border: var(--evt-apdf-border-width) solid var(--evt-apdf-hover-border) !important;
  border-color: var(--evt-apdf-hover-border) !important;
  outline: none !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
}

body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:hover .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-visible .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-within .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:hover .action-download-icon svg :is(path, line),
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-visible .action-download-icon svg :is(path, line),
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-within .action-download-icon svg :is(path, line) {
  color: var(--evt-apdf-hover-fg) !important;
  fill: var(--evt-apdf-hover-fg) !important;
  stroke: var(--evt-apdf-hover-fg) !important;
}

/* N&B : pastille PDF — pas de fondu opacité/fond au survol (fond blanc immédiat) */
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download .action-download-icon {
  transition: none !important;
}

body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:hover .action-download-icon,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .events-archived-pdf-zone a.action-download:focus-within .action-download-icon {
  opacity: 1 !important;
  transition: none !important;
}

/* Concertation « a déjà eu lieu » — mode couleur : PDF et liens comme événements archivés (noir / blanc). */
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone {
  --evt-apdf-bg: #000000;
  --evt-apdf-fg: #ffffff;
  --evt-apdf-hover-bg: #ffffff;
  --evt-apdf-hover-fg: #000000;
  --evt-apdf-hover-border: #000000;
  --evt-apdf-border-width: 1px;
}

.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download .action-download__label,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.concertation-events-pdf-link.action-download .action-download__label,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download .action-download-icon,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.concertation-events-pdf-link.action-download .action-download-icon,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone .concertation-events-text-link.button {
  background-color: var(--evt-apdf-bg) !important;
  background: var(--evt-apdf-bg) !important;
  color: var(--evt-apdf-fg) !important;
  -webkit-text-fill-color: var(--evt-apdf-fg) !important;
  border: var(--evt-apdf-border-width) solid var(--evt-apdf-bg) !important;
  border-color: var(--evt-apdf-bg) !important;
  outline: none !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
}

.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:hover .action-download__label,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.concertation-events-pdf-link.action-download:hover .action-download__label,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:focus-visible .action-download__label,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.concertation-events-pdf-link.action-download:focus-visible .action-download__label,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:focus-within .action-download__label,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.concertation-events-pdf-link.action-download:focus-within .action-download__label,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:hover .action-download-icon,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.concertation-events-pdf-link.action-download:hover .action-download-icon,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:focus-visible .action-download-icon,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.concertation-events-pdf-link.action-download:focus-visible .action-download-icon,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:focus-within .action-download-icon,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.concertation-events-pdf-link.action-download:focus-within .action-download-icon,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone .concertation-events-text-link.button:hover,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone .concertation-events-text-link.button:focus-visible {
  background-color: var(--evt-apdf-hover-bg) !important;
  background: var(--evt-apdf-hover-bg) !important;
  color: var(--evt-apdf-hover-fg) !important;
  -webkit-text-fill-color: var(--evt-apdf-hover-fg) !important;
  border: var(--evt-apdf-border-width) solid var(--evt-apdf-hover-border) !important;
  border-color: var(--evt-apdf-hover-border) !important;
}

.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download .action-download-icon .ressource-action-download-icon-svg,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download .action-download-icon svg :is(path, line) {
  color: var(--evt-apdf-fg) !important;
  fill: var(--evt-apdf-fg) !important;
  stroke: var(--evt-apdf-fg) !important;
}

.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:hover .action-download-icon .ressource-action-download-icon-svg,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:focus-visible .action-download-icon .ressource-action-download-icon-svg,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:focus-within .action-download-icon .ressource-action-download-icon-svg,
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:hover .action-download-icon svg :is(path, line),
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:focus-visible .action-download-icon svg :is(path, line),
.concertation-events-section.concertation-events-section--past.events-archived-pdf-zone a.action-download:focus-within .action-download-icon svg :is(path, line) {
  color: var(--evt-apdf-hover-fg) !important;
  fill: var(--evt-apdf-hover-fg) !important;
  stroke: var(--evt-apdf-hover-fg) !important;
}

body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item
  aside.block-type-actions.is-fullwidth .action-item
  > a.archived-event-btn.action-download.download-action-button .action-download-icon,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1'] .action-item
  > a.archived-event-btn.action-download.download-action-button .action-download-icon {
  transition: none !important;
}

body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item
  aside.block-type-actions.is-fullwidth .action-item
  > a.archived-event-btn.action-download.download-action-button:hover .action-download-icon,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item
  aside.block-type-actions.is-fullwidth .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item
  aside.block-type-actions.is-fullwidth .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-within .action-download-icon,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1'] .action-item
  > a.archived-event-btn.action-download.download-action-button:hover .action-download-icon,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1'] .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1'] .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-within .action-download-icon {
  opacity: 1 !important;
  transition: none !important;
}

/* Accordion ressources / annonces : styles “ouverts” très spécifiques → même apparence au survol. */
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:hover .action-download__label,
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-visible .action-download__label,
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-within .action-download__label,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:hover .action-download__label,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-visible .action-download__label,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-within .action-download__label {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
  outline-color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
  --border-width: 1px !important;
}

.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:hover .action-download-icon,
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-visible .action-download-icon,
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-within .action-download-icon,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:hover .action-download-icon,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-visible .action-download-icon,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-within .action-download-icon {
  opacity: 1 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
}

.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:hover .action-download-icon .ressource-action-download-icon-svg,
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-visible .action-download-icon .ressource-action-download-icon-svg,
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-within .action-download-icon .ressource-action-download-icon-svg,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:hover .action-download-icon .ressource-action-download-icon-svg,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-visible .action-download-icon .ressource-action-download-icon-svg,
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-within .action-download-icon .ressource-action-download-icon-svg {
  color: #000000 !important;
}

.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:hover svg :is(path, line),
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-visible svg :is(path, line),
.annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-within svg :is(path, line),
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:hover svg :is(path, line),
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-visible svg :is(path, line),
.ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-content a.ressources-accordion-pdf:focus-within svg :is(path, line) {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* Menu : au survol des PDF, coins du label carrés (comportement historique). */
header .actions-wrapper .action-download.download-action-button:hover .action-download__label,
header .actions-wrapper .action-download.download-action-button:focus-visible .action-download__label,
header .actions-wrapper .action-download.download-action-button:focus-within .action-download__label {
  border-radius: 0;
}

@media (min-width: 768px) {
  .ressource-action-button {
    max-width: calc((((100% - (3 * var(--site-gutter))) / 4) * 4) + (3 * var(--site-gutter)));
  }

  /* Accordéons : pleine largeur comme les PDF (priorité sur max-width ci-dessus) */
  .ressource-accordion-links a.ressource-action-button,
  .ressource-accordion-files a.ressource-action-button {
    width: 100%;
    max-width: 100%;
  }
}

.ressources-theme-filters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--site-gutter);
}

@media (min-width: 768px) {
  .ressources-theme-filters-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--site-gutter);
  }
  .ressources-theme-filter-col {
    grid-column: span 3 / span 3;
  }
}

.ressources-dropdown {
  position: relative;
}

.ressources-dropdown-summary {
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: transparent;
  color: #ffffff;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
}

.ressources-dropdown-summary::-webkit-details-marker {
  display: none;
}

.ressources-dropdown-label {
  font-family: "David", serif !important;
  text-transform: lowercase;
  font-size: 1.2rem;
  line-height: 1;
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  padding: 0 1rem 0 26px;
  display: inline-flex;
  align-items: center;
  width: calc(100% - 48px);
  height: 48px;
  min-height: 48px;
}

.ressources-dropdown-arrow {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: #000000;
  border: 1px solid #000000;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
  margin-left: 0;
}

/* 2e filtre: inversion des formes (rectangle arrondi + rond carré) */
.ressources-theme-filter-col:nth-child(2) .ressources-dropdown-label {
  border-radius: 9999px;
}

.ressources-theme-filter-col:nth-child(2) .ressources-dropdown-arrow {
  border-radius: 0;
}

.ressources-theme-filter-col:nth-child(2) .ressources-dropdown[open] .ressources-dropdown-label {
  border-radius: 0;
}

.ressources-dropdown[open] .ressources-dropdown-list {
  display: block;
}

.ressources-dropdown[open] .ressources-dropdown-arrow {
  border-radius: 0;
}

.ressources-dropdown[open] .ressources-dropdown-arrow svg {
  opacity: 0;
}

.ressources-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 65;
  background: #000000;
  border: 1px solid #000000;
  list-style: none;
  margin: 0;
 
}

.ressources-dropdown-list li a,
.ressources-dropdown-list li button {
  display: block;
  width: 100%;
  text-align: left;
  color: #ffffff;
  background-color: transparent;
  border: 0;
  text-decoration: none;
  padding: 0.05rem 2.2rem 0.05rem 26px;
  font-family: "David", serif !important;
  text-transform: lowercase;
  font-size: 1.2rem;
  line-height: 1.2;
  opacity: 1;
  position: relative;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    opacity 120ms ease;
}

/* Liste ouverte : fond noir / texte blanc (état par défaut des options). */
.ressources-dropdown[open] .ressources-dropdown-list li a,
.ressources-dropdown[open] .ressources-dropdown-list li button {
  color: #ffffff;
  background-color: transparent;
}

/* Survol d’une option : fond blanc / texte noir. */
.ressources-dropdown-list li a:hover,
.ressources-dropdown-list li button:hover {
  opacity: 1;
  color: #000000;
  background-color: #ffffff;
  -webkit-text-fill-color: #000000;
}

.ressources-dropdown-list li a::after,
.ressources-dropdown-list li button::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 29px;
  height: 21px;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2221%22%20viewBox%3D%220%200%2029%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M28%2013V14H29V13H28ZM0.292893%2012.2929C-0.0976311%2012.6834%20-0.0976311%2013.3166%200.292893%2013.7071L6.65685%2020.0711C7.04738%2020.4616%207.68054%2020.4616%208.07107%2020.0711C8.46159%2019.6805%208.46159%2019.0474%208.07107%2018.6569L2.41421%2013L8.07107%207.34315C8.46159%206.95262%208.46159%206.31946%208.07107%205.92893C7.68054%205.53841%207.04738%205.53841%206.65685%205.92893L0.292893%2012.2929ZM28%200H27V13H28H29V0H28ZM28%2013V12H1V13V14H28V13Z%22%20fill%3D%22%23FFFFFF%22/%3E%3C/svg%3E");
  transition: opacity 120ms ease;
  pointer-events: none;
}

.ressources-dropdown-list li a:hover::after,
.ressources-dropdown-list li button:hover::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2221%22%20viewBox%3D%220%200%2029%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M28%2013V14H29V13H28ZM0.292893%2012.2929C-0.0976311%2012.6834%20-0.0976311%2013.3166%200.292893%2013.7071L6.65685%2020.0711C7.04738%2020.4616%207.68054%2020.4616%208.07107%2020.0711C8.46159%2019.6805%208.46159%2019.0474%208.07107%2018.6569L2.41421%2013L8.07107%207.34315C8.46159%206.95262%208.46159%206.31946%208.07107%205.92893C7.68054%205.53841%207.04738%205.53841%206.65685%205.92893L0.292893%2012.2929ZM28%200H27V13H28H29V0H28ZM28%2013V12H1V13V14H28V13Z%22%20fill%3D%22%23000000%22/%3E%3C/svg%3E");
}

/**=================================== PAGE ACCUEIL BLOCK TEXTE ALINEA ======================================**/ 

.copy.has-indent p {
  text-indent: 30%;
}

.kirby-inner-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Référence unique pour les layouts qui doivent s’aligner (ex. 50/50 puis 50/15/35). */
  --kirby-inner-gap: 3rem;
  gap: var(--kirby-inner-gap);
  box-sizing: border-box;
}

/*
  Preset Panel : 50 % | 15 % | 35 % (`1/2, 3/20, 7/20`).
  La 1re colonne prend la même largeur que la 1re colonne d’un layout 50/50 avec 1 seul gap :
  (100% - gap) / 2 — ainsi le bord gauche de la 2e colonne coïncide avec un 1/2 + 1/2 au-dessus.
  Les colonnes 2 et 3 partagent le reste en ratio 15 : 35 après le 2e gap.
*/
.kirby-inner-grid.kirby-inner-grid--ratio-50-15-35 {
  --_right: calc(50% - (1.5 * var(--kirby-inner-gap)));
  grid-template-columns:
    minmax(0, calc((100% - var(--kirby-inner-gap)) / 2))
    minmax(0, calc(var(--_right) * 15 / 50))
    minmax(0, calc(var(--_right) * 35 / 50));
}

.kirby-inner-grid.kirby-inner-grid--ratio-50-15-35 > .layout-column {
  grid-column: span 1;
}

/*
  Tableau 4 colonnes (Panel : 1/6 | 5/12 | 1/6 | 1/4) — petite, grande, petite, moyenne.
  Pas de traits verticaux ; un trait horizontal au-dessus de chaque rangée (chaque layout).
  Couleur du trait : token « Lignes » du layout (--layout-line-color).
*/
.kirby-inner-grid.kirby-inner-grid--table-4-cols > .layout-column {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .kirby-inner-grid.kirby-inner-grid--table-4-cols {
    display: grid !important;
    flex-direction: unset;
    align-items: start;
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* Espacement vertical des sections de layout (desktop-first) */
.layout-section {
  padding-top: 100px;
  padding-bottom: 60px;
}

.layout-section.layout-section--table-4-cols {
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  border-top: 2px solid var(--layout-line-color, currentColor);
}

/* Optional min height per layout (configured from Panel) */
.layout-section[data-layout-min-height="half-screen"] {
  min-height: 50vh;
}

.layout-section[data-layout-min-height="three-quarters-screen"] {
  min-height: 75vh;
}

.layout-section[data-layout-min-height="screen"] {
  min-height: 100vh;
}

@supports (min-height: 100svh) {
  .layout-section[data-layout-min-height="half-screen"] {
    min-height: 50svh;
  }

  .layout-section[data-layout-min-height="three-quarters-screen"] {
    min-height: 75svh;
  }

  .layout-section[data-layout-min-height="screen"] {
    min-height: 100svh;
  }
}

/* Réduit uniquement l'espace sous la layout (padding-bottom) */
.layout-section--compact-bottom {
  padding-bottom: 30px !important;
}

/* Supprime totalement l'espace sous la layout (padding-bottom) */
.layout-section--no-bottom-padding {
  padding-bottom: 0 !important;
}

/* Réduction du padding vertical uniquement pour le layout
   qui contient un séparateur avec option activée. */
.layout-section:has(.block-type-divider.divider-compact-layout-padding) {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Réduction du padding vertical uniquement pour un layout
   qui contient un bloc Séparateur avec l'option activée. */
.layout-section--compact-divider-padding {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Bloc "Séparateur" (divider) : ligne fine sans marges dues à `space-y-10`. */
.layout-section .layout-column .space-y-10 > .block-type-divider.divider-tight {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Annule aussi l'espacement appliqué au premier bloc après la ligne. */
.layout-section .layout-column .space-y-10 > .block-type-divider.divider-tight + * {
  margin-top: 0 !important;
}

.block-type-divider {
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--layout-line-color, var(--divider-block-color, #000000));
  color: var(--layout-line-color, var(--divider-block-color, #000000));
}

/* Couleur de ligne configurable au niveau du layout (Panel > réglages layout). */
.layout-section[data-has-layout-line-color="1"] .block-type-divider {
  background: var(--layout-line-color, var(--divider-block-color, #000000)) !important;
  color: var(--layout-line-color, var(--divider-block-color, #000000)) !important;
}

/* Bloc image : largeur Panel (voir aussi css/blocks/image.css) */
.layout-section .block-type-image,
.layout-column .block-type-image,
.block-type-image {
  display: block;
  box-sizing: border-box;
  width: var(--image-display-width, 100%);
  max-width: 100%;
  margin: 0;
}
.block-type-image--width-full { --image-display-width: 100%; }
.block-type-image--width-large { --image-display-width: 75%; }
.block-type-image--width-medium { --image-display-width: 50%; }
.block-type-image--width-small { --image-display-width: 33.333%; }
.block-type-image--width-xs { --image-display-width: 25%; }
.block-type-image__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.block-type-image--align-left { margin-left: 0; margin-right: auto; }
.block-type-image--align-center { margin-left: auto; margin-right: auto; }
.block-type-image--align-right { margin-left: auto; margin-right: 0; }

/* Bloc Contact */
.block-type-contact {
  width: 100%;
  /* Largeur fixe de l’encart nom / prénom (identique pour tous les blocs contact sur le site). */
  --contact-name-encart-width: clamp(11.5rem, 34vw, 20.5rem);
  --contact-action-size: 3.6rem;
  /* Écart léger entre encart nom, téléphone et e-mail */
  --contact-section-gap: 0.75rem;
}

.contact-card {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--contact-section-gap, 0.75rem);
  flex-wrap: nowrap;
  width: 100%;
}

/* Statut : colonne étroite, le texte revient à la ligne pour laisser la place au tel / mail. */
.contact-card:not(.contact-card--no-statut) {
  --contact-statut-max-width: clamp(12rem, 48vw, 32rem);
}

.contact-card:not(.contact-card--no-statut):has(.contact-action-toggle.is-revealed) {
  --contact-statut-max-width: clamp(8rem, 28vw, 18rem);
}

.contact-card:not(.contact-card--no-statut):has(.contact-action-toggle.is-revealed) .contact-card-primary {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - min(22rem, 46vw) - var(--contact-section-gap, 0.75rem));
}

.contact-card:not(.contact-card--no-statut) .contact-card-primary {
  flex: 1 1 auto;
  min-width: 0;
}

.contact-card:not(.contact-card--no-statut) .contact-statut {
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--contact-statut-max-width);
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.25;
  align-self: center;
}

.contact-card:not(.contact-card--no-statut) .contact-actions {
  position: relative;
  flex-shrink: 0;
  justify-content: flex-end;
}

.contact-card:not(.contact-card--no-statut) .contact-actions:has(.contact-action--phone):has(.contact-action--email) {
  min-width: calc(2 * var(--contact-action-size, 3.6rem) + var(--contact-section-gap, 0.75rem));
}

/* Sans statut : primary et actions côte à côte ; encart nom étirable */
.contact-card--no-statut {
  flex-direction: row;
  flex-wrap: nowrap;
}

.contact-card--no-statut .contact-card-primary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.contact-card--no-statut .contact-name {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}

.contact-name {
  background: #000;
  color: #fff;
  min-height: var(--contact-action-size, 3.6rem);
  height: var(--contact-action-size, 3.6rem);
  padding: 0 1.25rem;
  font-size: 1.25rem;
  line-height: 1.1;
  border-radius: 0;
  flex: 0 0 var(--contact-name-encart-width, clamp(11.5rem, 34vw, 20.5rem));
  width: var(--contact-name-encart-width, clamp(11.5rem, 34vw, 20.5rem));
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  border: none;
}

.contact-actions {
  display: flex;
  align-items: stretch;
  gap: var(--contact-section-gap, 0.75rem);
  flex: 0 0 auto;
}

.contact-action {
  width: var(--contact-action-size, 3.6rem);
  height: var(--contact-action-size, 3.6rem);
  min-width: var(--contact-action-size, 3.6rem);
  min-height: var(--contact-action-size, 3.6rem);
  max-width: var(--contact-action-size, 3.6rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #000;
  color: #fff;
  text-decoration: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
  transition:
    border-radius 0.25s ease,
    padding 0.2s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.contact-action:hover,
.contact-action:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.contact-action--phone {
  border-radius: 9999px;
}

.contact-action--email {
  border-radius: 0;
}

.contact-action-toggle.is-revealed {
  width: max-content;
  max-width: min(28rem, 100%);
  padding-inline: 1.35rem;
  border-radius: 9999px;
  justify-content: center;
}

.contact-action--email.is-revealed {
  border-radius: 0;
  max-width: none;
  width: max-content;
  overflow: visible;
}

.contact-action--email.is-revealed .contact-action-value {
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  white-space: nowrap;
}

/* Avec statut : cellule ouverte — mail en flux (tel visible à gauche), tel en absolu (mail à droite). */
.contact-card:not(.contact-card--no-statut) .contact-action--phone.is-revealed {
  position: absolute;
  top: 0;
  z-index: 2;
  min-width: var(--contact-action-size, 3.6rem);
  max-width: min(28rem, calc(100vw - 2rem));
  height: var(--contact-action-size, 3.6rem);
  min-height: var(--contact-action-size, 3.6rem);
}

.contact-card:not(.contact-card--no-statut) .contact-actions:has(.contact-action--email) .contact-action--phone.is-revealed {
  right: calc(var(--contact-action-size, 3.6rem) + var(--contact-section-gap, 0.75rem));
}

.contact-card:not(.contact-card--no-statut) .contact-actions:not(:has(.contact-action--email)) .contact-action--phone.is-revealed {
  right: 0;
}

.contact-card:not(.contact-card--no-statut) .contact-actions:has(.contact-action--email.is-revealed) .contact-action--email.is-revealed {
  position: static;
  z-index: auto;
}

.contact-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-action-icon svg {
  width: 1.65rem;
  height: 1.65rem;
}

.contact-action-value {
  display: none;
  font-size: 0.95em;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.contact-action-toggle.is-revealed .contact-action-icon {
  display: none;
}

.contact-action-toggle.is-revealed .contact-action-value {
  display: inline;
  white-space: nowrap;
}

.contact-action-toggle:not(.is-revealed):hover {
  background: #fff;
  color: #000;
}

.contact-action-toggle.is-revealed:hover {
  background: #000;
  color: #fff;
}

/* Bloc contact — mode N&B : numéro / e-mail affichés en blanc (priorité sur couleur de section) */
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action,
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action .contact-action-value,
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action.is-revealed,
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action.is-revealed .contact-action-value,
body[data-contrast-mode="bw"] .block-type-contact .contact-action,
body[data-contrast-mode="bw"] .block-type-contact .contact-action .contact-action-value {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action svg,
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action path,
body[data-contrast-mode="bw"] .block-type-contact .contact-action svg,
body[data-contrast-mode="bw"] .block-type-contact .contact-action path {
  color: #ffffff !important;
  fill: currentColor !important;
}
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action-toggle:not(.is-revealed):hover,
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action-toggle:not(.is-revealed):focus-visible,
body[data-contrast-mode="bw"] .block-type-contact .contact-action-toggle:not(.is-revealed):hover,
body[data-contrast-mode="bw"] .block-type-contact .contact-action-toggle:not(.is-revealed):focus-visible {
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action-toggle.is-revealed:hover,
body[data-contrast-mode="bw"] .layout-section .block-type-contact .contact-action-toggle.is-revealed:focus-visible,
body[data-contrast-mode="bw"] .block-type-contact .contact-action-toggle.is-revealed:hover,
body[data-contrast-mode="bw"] .block-type-contact .contact-action-toggle.is-revealed:focus-visible {
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Bloc contact sans statut — mobile : nom ligne 1, tel / mail ligne 2 (révélation sans chevaucher le nom). */
@media (max-width: 767px) {
  .block-type-contact .contact-card--no-statut:not(.contact-card--popup-grid) {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  .block-type-contact .contact-card--no-statut:not(.contact-card--popup-grid) .contact-card-primary {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .block-type-contact .contact-card--no-statut:not(.contact-card--popup-grid) .contact-name {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .block-type-contact .contact-card--no-statut:not(.contact-card--popup-grid) .contact-actions {
    flex: 0 0 auto !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .block-type-contact .contact-card--no-statut:not(.contact-card--popup-grid) .contact-action-toggle.is-revealed {
    max-width: 100% !important;
  }
}

/* Priorité : pas de bordure layout / focus sur les capsules contact */
.layout-section .block-type-contact .contact-action,
.layout-section .block-type-contact .contact-action:hover,
.layout-section .block-type-contact .contact-action:focus-visible,
.block-type-contact .contact-action,
.block-type-contact .contact-action:hover,
.block-type-contact .contact-action:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Évite le double padding entre deux layouts consécutifs */
.layout-section + .layout-section {
  padding-top: 0;
}

/* Espacement vertical réduit pour les stacks de blocs "actions" dans les layouts.
   La marge entre blocs vient de Tailwind `.space-y-10` (margin-block-end).
   On réduit seulement quand un bloc actions est suivi immédiatement d'un autre bloc actions. */
.layout-section .layout-column .space-y-10 > .block-type-actions:has(+ .block-type-actions) {
  --tw-space-y-reverse: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: calc(var(--spacing) * 2) !important;
}

/* Actions pleine largeur uniquement dans les layouts
   ET uniquement si le block actions est en mode fullwidth. */
.layout-section .layout-column .block-type-actions.is-fullwidth .actions-wrapper {
  width: 100%;
  justify-content: stretch;
}

.layout-section .layout-column .block-type-actions.is-fullwidth .actions-wrapper .action-item {
  flex: 1 1 0;
}

.layout-section .layout-column .block-type-actions.is-fullwidth .actions-wrapper .action-item > .button,
.layout-section .layout-column .block-type-actions.is-fullwidth .actions-wrapper .action-item > button {
  display: flex;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* Boutons classiques pleine largeur : même hauteur que les PDF, sans pastille au survol */
.layout-section .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"])
  .actions-wrapper .action-item > :is(.button, a.button, button.button):not(.action-download) {
  --ressource-action-height: 60px;
  --vpadding: 0 !important;
  min-height: var(--ressource-action-height);
  height: var(--ressource-action-height);
  padding: 0 1.35rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Block: Liste déroulante (steps) */
.steps-block {
  display: grid;
  gap: 1rem;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
}

.steps-block :is(.steps-summary, .steps-title, .steps-panel, .steps-content, .steps-panel-body, .steps-badge, .steps-badge *),
.steps-block :is(.steps-content, .steps-panel-body) :is(p, li, ul, ol, span, a, strong, b, em, i, h1, h2, h3, h4, h5, h6) {
  font-family: "David", serif;
  font-weight: normal !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-stroke-width: 0 !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.steps-block .steps-panel-body.copy :is(strong, b) {
  font-weight: normal !important;
}

.steps-block .steps-panel-body :is(em, i) {
  font-style: italic !important;
  font-synthesis: style !important;
  font-synthesis-style: auto !important;
}

.steps-item {
  border: 0;
  padding: 0;
}

/* Ligne séparatrice entre éléments : désactivée (l’espacement passe par le gap de .steps-block). */
.steps-item + .steps-item {
  border-top: none;
  padding-top: 0;
}

.steps-summary {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 1rem;
  cursor: pointer;
  /* <summary> navigateur : graisse bold héritée si non neutralisée */
  font-weight: normal !important;
}

.steps-summary::-webkit-details-marker {
  display: none;
}

.steps-badge {
  /* Même hauteur que le panneau .steps-panel (padding 1rem + line-height du titre) */
  width: 3.8rem;
  min-width: 3.8rem;
  height: 3.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #000;
  color: #fff;
  font-size: var(--text-2xl);
  line-height: 1;
  will-change: border-radius;
  transition: border-radius cubic-bezier(0.22, 1, 0.36, 1);
}

.steps-badge.is-circle {
  border-radius: 9999px;
}

.steps-badge.is-square {
  border-radius: 0;
}

/* Hover: inverse la forme pour suggérer le clic */
.steps-summary:hover .steps-badge.is-circle {
  border-radius: 0;
}

.steps-summary:hover .steps-badge.is-square {
  border-radius: 9999px;
}

/* Steps : ligne fermée au hover = fond blanc / texte noir */
.steps-item:not([open]) .steps-summary:hover .steps-panel {
  background: #ffffff !important;
  color: #000000 !important;
}

.steps-item:not([open]) .steps-summary:hover .steps-title {
  color: #000000 !important;
}

.steps-item:not([open]) .steps-summary:hover .steps-badge {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Steps : état ouvert = fond noir / texte blanc */
.steps-item[open] .steps-panel,
.steps-item[open] .steps-content {
  background: #000000 !important;
  color: #ffffff !important;
}

.steps-item[open] .steps-title,
.steps-item[open] .steps-content,
.steps-item[open] .steps-content * {
  color: #ffffff !important;
}

.steps-item[open] .steps-badge {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Graisse « mode blanc » : rendu fin constant (comme texte noir sur fond clair),
   y compris quand le texte est clair sur fond noir au repos. */
.steps-block :is(.steps-title, .steps-badge, .steps-panel-body),
.steps-block .steps-panel-body :is(p, li, span, a, strong, b, em, i) {
  font-weight: normal !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.steps-title {
  /* Taille normale (2xl) — classe text-2xl dans steps.twig. */
  font-size: var(--text-2xl) !important;
  line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
  color: var(--steps-text-color, #fff);
}

.steps-panel {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--steps-bg-color, #000);
  color: var(--steps-text-color, #fff);
  padding: 1rem 1rem;
}

.steps-summary.no-badge .steps-panel {
  /* "Titre seulement" : on augmente le padding pour éviter que le texte touche le bord. */
  padding: 0 2rem;
}

.steps-content {
  margin-top: 0;
  /* Aligne le début du contenu avec le début du texte du titre:
     badge (3.8rem) + gap (1rem) = 4.8rem */
  margin-left: 4.8rem;
  background: var(--steps-bg-color, #000);
  color: var(--steps-text-color, #fff);
  /* Le titre commence à 1rem à l'intérieur de .steps-panel */
  padding: 0 1.5rem 1.5rem 1rem;
}

/* Variante sans pastille: contenu aligné avec le titre (padding panel: 0 2rem) */
.steps-item.no-badge .steps-content {
  margin-left: 0;
  padding-left: 2rem;
}

.steps-panel-body {
  background: transparent;
  color: inherit;
  padding: 3rem 0 0;
  /* Contenu déroulé : petit (1xl → text-xl) — classe text-xl dans steps.twig. */
  font-size: var(--text-xl) !important;
  line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
}

.steps-panel-body.copy :is(p, li, ul, ol),
.steps-panel-body.copy :is(h1, h2, h3, h4, h5, h6) {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Listes de contenu: puces (pas de tirets) */
.copy ul {
  list-style: disc outside;
  padding-left: 1.25em;
}

.copy ul li {
  display: list-item;
}

.copy ul li::before {
  content: none !important;
  display: none !important;
}

/* Bloc liste : intro collée à la liste (annule .copy > div / .copy > p / .copy > ul) */
.copy.tablo-block-list > .tablo-block-list__intro {
  margin-bottom: 0 !important;
}

.copy.tablo-block-list > .tablo-block-list__intro :is(p, ul, ol, div) {
  margin-bottom: 0 !important;
}

.copy.tablo-block-list > .tablo-block-list__intro + :is(ul, ol),
.copy.tablo-block-list > p.tablo-block-list__intro + :is(ul, ol),
.copy.tablo-block-list > p + :is(ul, ol) {
  margin-top: 0 !important;
}

.copy.tablo-block-list > p.tablo-block-list__intro,
.copy.tablo-block-list > p:has(+ :is(ul, ol)) {
  margin-bottom: 0 !important;
}

/* Bloc liste : pas d'espace entre les puces (Writer : <li><p>…</p></li>) */
.copy.tablo-block-list > :is(ul, ol) li p,
.copy.tablo-block-list > :is(ul, ol) p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Col-span pour Kirby Grid 12 colonnes */
.kirby-inner-grid .col-span-1 { grid-column: span 1; }
.kirby-inner-grid .col-span-2 { grid-column: span 2; }
.kirby-inner-grid .col-span-3 { grid-column: span 3; }
.kirby-inner-grid .col-span-4 { grid-column: span 4; }
.kirby-inner-grid .col-span-5 { grid-column: span 5; }
.kirby-inner-grid .col-span-6 { grid-column: span 6; }
.kirby-inner-grid .col-span-7 { grid-column: span 7; }
.kirby-inner-grid .col-span-8 { grid-column: span 8; }
.kirby-inner-grid .col-span-9 { grid-column: span 9; }
.kirby-inner-grid .col-span-10 { grid-column: span 10; }
.kirby-inner-grid .col-span-11 { grid-column: span 11; }
.kirby-inner-grid .col-span-12 { grid-column: span 12; }

/* Responsive */
@media (max-width: 1023px) {
  /* Flex + gap : en « block » pur, le gap de la grille ne s’appliquait plus
     et les colonnes (ex. plusieurs blocs actions) se collaient verticalement. */
  .kirby-inner-grid {
    display: flex !important;
    flex-direction: column;
    --kirby-inner-gap: 1rem;
    gap: var(--kirby-inner-gap);
    align-items: stretch;
  }

  .kirby-inner-grid:has(.tablo-text-block):has(.steps-block) {
    --kirby-inner-gap: 3rem;
  }

  .kirby-inner-grid > .layout-column {
    min-width: 0;
    width: 100%;
  }

  .layout-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .layout-section.layout-section--table-4-cols {
    padding-top: 1rem;
    padding-bottom: 0.75rem;
  }
}
@media (max-width: 639px) {
  .kirby-inner-grid {
    display: flex !important;
    flex-direction: column;
    --kirby-inner-gap: 1rem;
    gap: var(--kirby-inner-gap);
    align-items: stretch;
  }

  .kirby-inner-grid:has(.tablo-text-block):has(.steps-block) {
    --kirby-inner-gap: 3rem;
  }

  .kirby-inner-grid > .layout-column {
    min-width: 0;
    width: 100%;
  }

  .layout-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .layout-section.layout-section--table-4-cols {
    padding-top: 1rem;
    padding-bottom: 0.75rem;
  }
}

/* Ajustement mobile uniquement (desktop inchangé) */
@media (max-width: 767px) {
  html {
    font-size: clamp(14px, 3.8vw, 16px);
  }

  :root {
    --text-7xl: clamp(2rem, 10vw, 2.8rem);
    --text-6xl: clamp(1.8rem, 8.8vw, 2.4rem);
    --text-5xl: clamp(1.6rem, 7.8vw, 2.1rem);
    --text-4xl: clamp(1.45rem, 7.2vw, 1.95rem);
    --text-3xl: clamp(1.2rem, 5.6vw, 1.5rem);
    --text-2xl: clamp(1.15rem, 5.2vw, 1.42rem);
    --text-xl: clamp(1rem, 4.2vw, 1.12rem);
    --text-metadata: clamp(0.78rem, 3.2vw, 0.92rem);
    --text-action: var(--text-2xl);
  }

  h1, h2, h3, h4, h5, h6,
  p,
  li,
  blockquote,
  figcaption,
  dt,
  dd,
  address,
  cite,
  .copy p,
  .copy li,
  .search-result-title,
  .search-result-snippet {
    max-width: 100%;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  p,
  li,
  blockquote,
  figcaption,
  dt,
  dd,
  address,
  cite,
  .copy p,
  .copy li {
    font-size: 5vw;
  }

  .button,
  .mobile-menu-link,
  .header-nav-button {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding-inline: clamp(0.55rem, 3.2vw, 1rem);
  }

  /* Événements à la une : row + wrap, chaque bloc 100 % (pas 2 colonnes) */
  .featured-events-section .featured-event-item,
  .featured-events-section .featured-event-item.featured-event-item--split,
  .featured-events-section .featured-event-item.grid.w-full {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .featured-events-section .featured-event-item > .featured-event-shape,
  .featured-events-section .featured-event-item.featured-event-item--split > .featured-event-shape,
  .featured-events-section .featured-event-item.grid.w-full > .featured-event-shape {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .featured-events-section .featured-event-item .featured-event-inner-grid,
  .featured-events-section .featured-event-item.featured-event-item--split .featured-event-inner-grid,
  .featured-events-section .featured-event-item .featured-event-shape .grid,
  .featured-events-section .featured-event-item .featured-event-shape > .grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    grid-template-columns: unset !important;
    gap: 1rem !important;
    row-gap: 1rem !important;
    height: auto !important;
    width: 100% !important;
    align-content: flex-start !important;
  }

  .featured-events-section .featured-event-item .featured-event-inner-grid > .featured-event-left-stack,
  .featured-events-section .featured-event-item .featured-event-shape .grid > .featured-event-left-stack,
  .featured-events-section .featured-event-item .featured-event-left-stack,
  .featured-events-section .featured-event-item.featured-event-item--split .featured-event-left-stack.featured-event-left-stack--center {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    top: 0 !important;
    align-self: stretch !important;
    transform: none !important;
  }

  /* Événements archivés : row + wrap (sauf page Rencontre régionale → voir rencontre-regionale.css) */
  body:not(.page-rencontre-regionale) .archived-events-section .archived-event-item .kirby-inner-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body:not(.page-rencontre-regionale) .archived-events-section .archived-event-item .layout-column {
    flex: 0 0 100% !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  .archived-events-section .archived-event-item .layout-column:nth-child(3) .archived-event-text,
  .archived-events-section .archived-event-item .layout-column:nth-child(3) .archived-event-text p {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .archived-events-section .archived-event-item .archived-event-text {
    min-height: 0;
  }

  .archived-events-section .archived-event-item a.archived-event-btn,
  .archived-events-section .archived-event-item a.action-download.download-action-button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =====================================
  Responsive header/footer mobile
===================================== */

/* #mobile-header-contrast-toggle : styles propres au toggle vertical (nouveau
   markup .contrast-toggle-group). On ne fige plus bg/color/border ici, les
   styles visuels sont geres par .contrast-toggle-group / .contrast-toggle
   plus bas dans le fichier. On conserve uniquement la gestion display/flex
   et la visibilite conditionnelle selon le breakpoint. */
#mobile-header-contrast-toggle {
  display: none; /* cache par defaut ; revele sur mobile via @media en-dessous */
  flex: 0 0 auto;
}

@media (max-width: 1021px) {
  header {
    justify-content: flex-start !important;
  }

  header .header-left {
    margin-right: auto;
  }

  footer {
    display: none !important;
  }

  /* Mobile: on neutralise les spans Kirby pour forcer un empilement simple */
  .kirby-inner-grid .layout-column.col-span-12,
  .kirby-inner-grid .layout-column[class*="col-span-"] {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .kirby-inner-grid .layout-column[class*='col-span-'] {
    width: auto !important;
    max-width: none !important;
  }

  .kirby-inner-grid {
    --kirby-inner-gap: 1rem;
    gap: var(--kirby-inner-gap) !important;
  }

  .kirby-inner-grid:has(.tablo-text-block):has(.steps-block) {
    --kirby-inner-gap: 3rem;
  }

  h1:not(.tablo-heading__tag) {
    font-size: 3rem!important;
  }

  header .logo-burger-row {
    align-items: flex-start !important;
  }

  #mobile-header-contrast-toggle,
  #header-contrast-toggle {
    display: inline-flex !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    order: 998;
  }

  #mobile-menu-toggle {
    order: 999;
  }

  /* Logo, toggle N&B et burger : même hauteur (--nav-item-height sur header) */
  .header-mobile-actions #mobile-menu-toggle {
    height: var(--nav-item-height) !important;
    min-height: var(--nav-item-height) !important;
    max-height: var(--nav-item-height) !important;
    width: var(--nav-item-height) !important;
    min-width: var(--nav-item-height) !important;
    max-width: var(--nav-item-height) !important;
    flex-shrink: 0;
    box-sizing: border-box;
    /* Grossit depuis le haut (évite la sensation de « descente » avant agrandissement). */
    align-self: flex-start;
    transform-origin: top center;
  }

  .header-mobile-actions #mobile-menu-toggle svg {
    width: var(--nav-item-height) !important;
    height: var(--nav-item-height) !important;
    display: block;
  }

  .header-mobile-actions #mobile-header-contrast-toggle.contrast-toggle-group {
    height: var(--nav-item-height) !important;
    min-height: var(--nav-item-height) !important;
    max-height: var(--nav-item-height) !important;
    flex-shrink: 0;
    align-self: flex-start;
    transform-origin: top center;
  }
}

/* En desktop, on NE CACHE PLUS que le toggle MOBILE (qui est une
   duplication du meme bouton rendue dans le menu mobile). Le toggle
   desktop `#header-contrast-toggle` reste bien visible dans la barre
   d'actions du header. */
@media (min-width: 1022px) {
  #mobile-header-contrast-toggle {
    display: none !important;
  }
}

/* ==================================================
   Priority guard: panel-driven seasonal variables
   Keep these rules scoped to data attributes set by default.twig
   ================================================== */
body[data-page-has-bg="1"] {
  background: var(--page-bg, var(--bg-body, var(--color-background, #ffffff))) !important;
}

body[data-header-has-bg="1"] header {
  background-color: var(--header-bg, #ffffff) !important;
}

body[data-header-has-text="1"] header {
  color: var(--header-text, var(--color-text, #000000)) !important;
}

body[data-logo-has-color="1"] header .logo-morph,
body[data-logo-has-color="1"] header .logo-morph * {
  color: var(--logo-color, var(--header-logo, currentColor)) !important;
}

/* If no explicit logo color is set, keep historical behavior:
   logo follows the header text color selected in panel */
body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header .logo-morph,
body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header .logo-morph * {
  color: var(--header-text, var(--color-text, #000000)) !important;
}

header .logo-morph__mask {
  position: absolute;
  inset: 0;
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 2;
}

body[data-logo-has-color="1"] header .logo-morph > img.logo-morph__logo,
body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header .logo-morph > img.logo-morph__logo {
  opacity: 0 !important;
}

body[data-logo-has-color="1"] header .logo-morph > .logo-morph__mask,
body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header .logo-morph > .logo-morph__mask {
  opacity: 1 !important;
}

body[data-burger-has-color="1"] #mobile-menu-toggle,
body[data-burger-has-color="1"] #mobile-menu-toggle svg {
  color: var(--burger-color, currentColor) !important;
}

body[data-footer-has-bg="1"] footer {
  background-color: var(--footer-bg, transparent) !important;
}

body[data-footer-has-text="1"] footer,
body[data-footer-has-text="1"] footer * {
  color: var(--footer-text, inherit) !important;
}

/* Pastilles footer (réseaux + pop-up) : pas la couleur texte du bandeau */
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > a.button:not(.is-site-popup-open),
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > a.button:not(.is-site-popup-open):link,
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > a.button:not(.is-site-popup-open):visited,
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > a[data-site-popup-modal-trigger]:not(.is-site-popup-open),
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > a[data-site-popup-modal-trigger]:not(.is-site-popup-open):link,
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > a[data-site-popup-modal-trigger]:not(.is-site-popup-open):visited {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > .button::first-letter,
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > a.button:not(.is-site-popup-open)::first-letter,
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) > a[data-site-popup-modal-trigger]:not(.is-site-popup-open)::first-letter,
body[data-footer-has-text="1"] footer nav.footer-actions .action-item:not(:hover) .newsletter-submit::first-letter {
  color: var(--footer-button-text, var(--footer-btn-text, var(--color-background, #ffffff))) !important;
  -webkit-text-fill-color: var(--footer-button-text, var(--footer-btn-text, var(--color-background, #ffffff))) !important;
}

.layout-section[data-has-seasonal="1"] {
  background-color: var(--section-bg, transparent) !important;
  color: var(--section-text, inherit) !important;
}

/* Header action buttons (menu + submenu + search toggle) */
body[data-header-buttons-has-bg="1"] header .actions-wrapper .action-item > .button:not(.button--referentiel),
body[data-header-buttons-has-bg="1"] header .actions-wrapper .action-item > button,
body[data-header-buttons-has-bg="1"] header .actions-wrapper .action-item > .submenu .button,
body[data-header-buttons-has-bg="1"] header .actions-wrapper .menu-search__toggle.button {
  background-color: var(--header-btn-bg, var(--btn-bg, var(--color-text, #000000))) !important;
  border: 0 !important;
  outline: none !important;
  --header-btn-inset-color: var(--header-btn-bg, var(--btn-bg, var(--color-text, #000000)));
  box-shadow: inset 0 0 0 1px var(--header-btn-inset-color) !important;
}

body[data-header-buttons-has-text="1"] header .actions-wrapper .action-item > .button:not(.button--referentiel),
body[data-header-buttons-has-text="1"] header .actions-wrapper .action-item > button,
body[data-header-buttons-has-text="1"] header .actions-wrapper .action-item > .submenu .button,
body[data-header-buttons-has-text="1"] header .actions-wrapper .menu-search__toggle.button {
  color: var(--header-btn-text, var(--btn-text, var(--color-background, #ffffff))) !important;
}

/* Layout action buttons */
.layout-section[data-has-seasonal="1"] .block-type-actions .button,
.layout-section[data-has-seasonal="1"] .block-type-actions button {
  --button-ring-color: var(--section-button-bg, var(--section-text, var(--color-text, #000000))) !important;
  background-color: var(--section-button-bg, var(--section-text, var(--color-text, #000000))) !important;
  color: var(--section-button-text, var(--color-background, #ffffff)) !important;
  -webkit-text-fill-color: var(--section-button-text, var(--color-background, #ffffff)) !important;
  border-color: var(--section-button-bg, var(--section-text, var(--color-text, #000000))) !important;
  outline-color: var(--section-button-bg, var(--section-text, var(--color-text, #000000))) !important;
}

/* Hover des actions sans PDF : inversion fond/texte, sans trait (pas d’inset / pas de bordure).
   Les PDF utilisent .action-download sur le <a> — ils sont exclus ; leur libellé reste stylé ailleurs. */
.layout-section[data-has-seasonal="1"] .block-type-actions .action-item > .button:hover:not(.action-download),
.layout-section[data-has-seasonal="1"] .block-type-actions .action-item > button:hover {
  --button-inset-ring: 1px !important;
  --button-ring-color: #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: inset 0 0 0 var(--button-inset-ring) var(--button-ring-color) !important;
}

/* Layout fullwidth — toggle popup référentiel : trait noir 1px à l’intérieur au survol (pas de bordure externe). */
.layout-section[data-has-seasonal="1"] .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"]) .actions-wrapper .action-item > a.button[data-referentiel-modal-trigger="1"]:is(:hover, :focus-visible):not(.action-download),
.layout-section .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"]) .actions-wrapper .action-item > a.button[data-referentiel-modal-trigger="1"]:is(:hover, :focus-visible):not(.action-download),
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"]) .actions-wrapper .action-item > a.button[data-referentiel-modal-trigger="1"]:is(:hover, :focus-visible):not(.action-download),
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"]) .actions-wrapper .action-item > a.button[data-referentiel-modal-trigger="1"]:is(:hover, :focus-visible):not(.action-download),
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"]) .actions-wrapper .action-item > a.button[data-referentiel-modal-trigger="1"]:is(:hover, :focus-visible):not(.action-download) {
  --button-inset-ring: 1px !important;
  --button-ring-color: #000000 !important;
  --border-width: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 0 0 var(--button-inset-ring) var(--button-ring-color) !important;
  outline: none !important;
}

.layout-section[data-has-seasonal="1"] .block-type-actions .action-download:hover .action-download-icon,
.layout-section[data-has-seasonal="1"] .block-type-actions .action-download:focus-visible .action-download-icon,
.layout-section[data-has-seasonal="1"] .block-type-actions .action-download:focus-within .action-download-icon {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Layout actions width behavior from panel (fullwidth toggle) */
.layout-section .block-type-actions.is-fullwidth .actions-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  justify-content: stretch !important;
}

.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  justify-content: stretch !important;
}

.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item {
  flex: 1 1 0 !important;
}

.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item {
  flex: 1 1 0 !important;
}

.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item > .button,
.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item > button {
  width: 100% !important;
  justify-content: center !important;
}

.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item > .button,
.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item > button {
  width: 100% !important;
  justify-content: center !important;
}

/* Fullwidth PDF actions */
.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item > .action-download,
.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item > .action-download {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 0 !important;
  column-gap: 0;
  width: 100% !important;
  transition: grid-template-columns 0.3s ease;
}

.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item > .action-download:hover,
.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item > .action-download:hover {
  grid-template-columns: minmax(0, 1fr) var(--ressource-action-height) !important;
  column-gap: 0;
}

.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item > .action-download .action-download__label,
.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item > .action-download .action-download__label {
  grid-column: 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  width: 100%;
  padding-left: 1.35rem !important;
  padding-right: 1.35rem !important;
  /* Forme (carré / rond) : action-button-shapes.css selon .button--square | .button--rounded */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius var(--astre-btn-shape-duration, 0.18s) ease;
  height: var(--ressource-action-height);
}

.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item > .action-download.download-action-button,
.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item > .action-download.download-action-button {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item > .action-download .action-download-icon,
.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item > .action-download .action-download-icon {
  justify-self: end;
  margin-left: 0;
  width: var(--ressource-action-height);
  height: var(--ressource-action-height);
  opacity: 0;
  overflow: hidden;
  /* Pastille : forme inverse via action-button-shapes.css */
  transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius var(--astre-btn-shape-duration, 0.18s) ease;
}

.layout-section .block-type-actions.is-fullwidth .actions-wrapper .action-item > .action-download:hover .action-download-icon,
.layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper .action-item > .action-download:hover .action-download-icon {
  opacity: 1;
}

/* Footer action buttons */
body[data-footer-buttons-has-bg="1"] nav.footer-actions .action-item > .button,
body[data-footer-buttons-has-bg="1"] nav.footer-actions .action-item .newsletter-label,
body[data-footer-buttons-has-bg="1"] nav.footer-actions .action-item .newsletter-submit {
  background-color: var(--footer-btn-bg, var(--footer-text, var(--color-text, #000000))) !important;
  border-color: var(--footer-btn-bg, var(--footer-text, var(--color-text, #000000))) !important;
  outline-color: var(--footer-btn-bg, var(--footer-text, var(--color-text, #000000))) !important;
}

body[data-footer-buttons-has-text="1"] nav.footer-actions .action-item > .button,
body[data-footer-buttons-has-text="1"] nav.footer-actions .action-item > a.button,
body[data-footer-buttons-has-text="1"] nav.footer-actions .action-item > a[data-site-popup-modal-trigger],
body[data-footer-buttons-has-text="1"] nav.footer-actions .action-item .newsletter-submit,
body[data-footer-buttons-has-text="1"] nav.footer-actions .action-item .newsletter-input {
  color: var(--footer-button-text, var(--footer-btn-text, var(--footer-bg, var(--color-background, #ffffff)))) !important;
  -webkit-text-fill-color: var(--footer-button-text, var(--footer-btn-text, var(--footer-bg, var(--color-background, #ffffff)))) !important;
}

/* Newsletter : libellé visible uniquement au survol / focus (hors règle globale ci-dessus) */
body[data-footer-buttons-has-text="1"] nav.footer-actions .action-item:hover .newsletter-label,
body[data-footer-buttons-has-text="1"] nav.footer-actions .action-item:focus-within .newsletter-label,
body[data-footer-buttons-has-text="1"] nav.footer-actions .action-item:has(.newsletter-action):hover .newsletter-label {
  color: var(--footer-button-text, var(--footer-btn-text, var(--footer-bg, var(--color-background, #ffffff)))) !important;
  -webkit-text-fill-color: var(--footer-button-text, var(--footer-btn-text, var(--footer-bg, var(--color-background, #ffffff)))) !important;
}

/* Footer newsletter input must follow panel footer button colors */
body[data-footer-buttons-has-bg="1"] nav.footer-actions .newsletter-main .newsletter-input {
  background-color: var(--footer-btn-bg, var(--footer-text, var(--color-text, #000000))) !important;
  border-top-color: var(--footer-btn-bg, var(--footer-text, var(--color-text, #000000))) !important;
  border-bottom-color: var(--footer-btn-bg, var(--footer-text, var(--color-text, #000000))) !important;
}

body[data-footer-buttons-has-text="1"] nav.footer-actions .newsletter-main .newsletter-input {
  color: var(--footer-button-text, var(--footer-btn-text, var(--footer-bg, var(--color-background, #ffffff)))) !important;
  -webkit-text-fill-color: var(--footer-button-text, var(--footer-btn-text, var(--footer-bg, var(--color-background, #ffffff)))) !important;
}

body[data-footer-buttons-has-text="1"] nav.footer-actions .newsletter-main .newsletter-input::placeholder {
  color: var(--footer-button-text, var(--footer-btn-text, var(--footer-bg, var(--color-background, #ffffff)))) !important;
  -webkit-text-fill-color: var(--footer-button-text, var(--footer-btn-text, var(--footer-bg, var(--color-background, #ffffff)))) !important;
  opacity: 1;
}

/* PROD guardrail: footer compact (non-hover) must keep panel color */
body[data-footer-buttons-has-bg="1"] footer .actions-wrapper .action-item:not(:hover) .button,
body[data-footer-buttons-has-bg="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-label,
body[data-footer-buttons-has-bg="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-submit,
body[data-footer-buttons-has-bg="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-input {
  background: var(--footer-button-bg, var(--footer-btn-bg, var(--footer-text, var(--color-text, #000000)))) !important;
  border-color: var(--footer-button-bg, var(--footer-btn-bg, var(--footer-text, var(--color-text, #000000)))) !important;
}

/* Pastilles compactes : texte transparent, 1re lettre seule (évite le flash facebook/linkedin) */
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) > .button:not(.is-site-popup-open),
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) > a.button:not(.is-site-popup-open),
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) > a[data-site-popup-modal-trigger]:not(.is-site-popup-open),
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-submit {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-label,
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-label::first-letter {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) > .button:not(.is-site-popup-open)::first-letter,
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) > a.button:not(.is-site-popup-open)::first-letter,
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) > a[data-site-popup-modal-trigger]:not(.is-site-popup-open)::first-letter,
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-submit::first-letter {
  color: var(--footer-button-text, var(--footer-btn-text, var(--color-background, #ffffff))) !important;
  -webkit-text-fill-color: var(--footer-button-text, var(--footer-btn-text, var(--color-background, #ffffff))) !important;
}

body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-input,
body[data-footer-buttons-has-text="1"] footer .actions-wrapper .action-item:not(:hover) .newsletter-input::placeholder,
body[data-footer-buttons-has-text="1"] footer .actions-wrapper a[data-site-popup-modal-trigger].is-site-popup-open {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
}

/* Featured events — bouton PDF compact (sous la hauteur globale 60px des .action-download) */
.featured-events-section {
  --featured-event-action-height: 2.25rem;
}

.featured-events-section .featured-event-item {
  align-items: stretch;
}

@media (min-width: 768px) {
  .featured-events-section .featured-event-item.featured-event-item--split,
  .featured-events-section .featured-event-item.grid.w-full:not(.astroide-featured-event-item) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  .featured-events-section .featured-event-item.featured-event-item--split .featured-event-inner-grid,
  .featured-events-section .featured-event-item.grid.w-full:not(.astroide-featured-event-item) .featured-event-inner-grid,
  .featured-events-section .featured-event-item.grid.w-full:not(.astroide-featured-event-item) .featured-event-shape > .grid {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 2rem !important;
    align-content: center;
    height: 100%;
  }
}

/* Colonne droite « à la une » : PDF en hauteur disponible + label centré */
.featured-events-section .featured-event-item .featured-event-left-stack {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.featured-events-section .featured-event-item .featured-event-left-meta {
  flex: 0 0 auto;
}

.featured-events-section .featured-event-item .featured-event-left-actions {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  margin-top: 2.5rem;
}

.featured-events-section .featured-event-item .featured-event-left-actions:has(.featured-event-pdf-wrap) {
  align-items: flex-start;
}

/* Rencontre regionale — edition/date alignes entre eux et centres verticalement dans la forme */
.featured-events-section .featured-event-item .featured-event-left-stack.featured-event-left-stack--center {
  justify-content: flex-start;
  align-self: start;
  position: relative;
  top: 30%;
  transform: none;
}

.featured-events-section .featured-event-item .featured-event-shape .grid:has(.featured-event-left-stack--center) {
  align-items: stretch;
}

.featured-events-section .featured-event-item .featured-event-left-stack.featured-event-left-stack--center .featured-event-left-meta {
  margin-block: 0;
  text-align: left;
}

.featured-events-section .featured-event-item .featured-event-left-stack.featured-event-left-stack--center > .featured-event-text {
  margin: 0;
}

.featured-events-section .featured-event-item .featured-event-left-stack.featured-event-left-stack--center .featured-event-left-actions {
  flex: 0 0 auto;
  justify-content: flex-start;
  margin-top: 1.25rem;
}

/* Bouton « à la une » : 1 ligne par défaut ; 2 lignes max si > 5 mots (classe --wrap en Twig) */
.featured-events-section .featured-event-btn__label {
  display: block;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.featured-events-section .featured-event-btn--wrap .featured-event-btn__label {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
  max-width: 16rem;
}

.featured-events-section .featured-event-btn--link.featured-event-btn--wrap {
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1.25rem !important;
}

.featured-events-section .featured-event-link-group {
  align-items: stretch;
}

.featured-events-section .featured-event-link-group .featured-event-btn--link {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - var(--ressource-action-height, 4rem));
}

.featured-events-section .featured-event-item .featured-event-pdf-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  align-self: flex-start;
  min-height: 0;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  --ressource-action-height: var(--featured-event-action-height, 2.25rem);
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf.download-action-button {
  flex: 0 0 auto;
  --ressource-action-height: var(--featured-event-action-height, 2.25rem);
  width: fit-content !important;
  max-width: 100% !important;
  min-height: var(--featured-event-action-height, 2.25rem) !important;
  max-height: var(--featured-event-action-height, 2.25rem) !important;
  height: var(--featured-event-action-height, 2.25rem) !important;
  grid-template-columns: auto 0 !important;
  column-gap: 0 !important;
  align-items: stretch;
  align-self: flex-start;
  box-sizing: border-box;
  transition: grid-template-columns 0.3s ease;
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf:hover {
  grid-template-columns: auto var(--featured-event-action-height, 2.25rem) !important;
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf .action-download__label,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf .action-download__label.button,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf .action-download__label.header-nav-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 0 0.9rem !important;
  margin: 0 !important;
  --vpadding: 0 !important;
  --hpadding: 0.9rem !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf:not(.featured-event-btn--wrap) .action-download__label.featured-event-btn__label {
  white-space: nowrap;
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf.featured-event-btn--wrap .action-download__label.featured-event-btn__label {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  text-wrap: balance;
  align-items: center;
  justify-content: center;
}

/* PDF « cahier » : la classe .button (fond --color-text + inset ring) écrase les styles inline ;
   on force les couleurs de l’onglet Couleurs (--evt-btn-* sur l’item, repli --featured-events-btn-* sur la section). */
.featured-events-section .featured-event-item a.action-download.event-featured-pdf .action-download__label.featured-event-btn__label {
  background-color: var(--evt-btn-bg, var(--featured-events-btn-bg)) !important;
  background: var(--evt-btn-bg, var(--featured-events-btn-bg)) !important;
  color: var(--evt-btn-text, var(--featured-events-btn-text)) !important;
  -webkit-text-fill-color: var(--evt-btn-text, var(--featured-events-btn-text)) !important;
  border: 1px solid var(--evt-btn-bg, var(--featured-events-btn-bg)) !important;
  border-color: var(--evt-btn-bg, var(--featured-events-btn-bg)) !important;
  outline: none !important;
  outline-color: var(--evt-btn-bg, var(--featured-events-btn-bg)) !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
  --button-ring-color: var(--evt-btn-bg, var(--featured-events-btn-bg));
}

/* À la une (rencontre régionale, etc.) — survol : contour + texte / icône = couleur bordure */
.featured-events-section .featured-event-item .featured-event-btn:hover,
.featured-events-section .featured-event-item .featured-event-btn--link:hover,
.featured-events-section .featured-event-item a.featured-event-btn.featured-event-btn--link:hover,
.featured-events-section .featured-event-item .featured-event-btn:focus-visible,
.featured-events-section .featured-event-item .featured-event-btn--link:focus-visible,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf.download-action-button:is(:hover, :focus-visible, :focus-within) .action-download__label {
  --evt-featured-hover-stroke: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000));
  background: transparent !important;
  background-color: transparent !important;
  color: var(--evt-featured-hover-stroke) !important;
  -webkit-text-fill-color: var(--evt-featured-hover-stroke) !important;
  border: 1px solid var(--evt-featured-hover-stroke) !important;
  border-color: var(--evt-featured-hover-stroke) !important;
  outline: none !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
}

.featured-events-section .featured-event-item .featured-event-btn:hover .featured-event-btn__label,
.featured-events-section .featured-event-item .featured-event-btn:hover .featured-event-btn-icon,
.featured-events-section .featured-event-item .featured-event-btn:hover span,
.featured-events-section .featured-event-item .featured-event-btn:focus-visible .featured-event-btn__label,
.featured-events-section .featured-event-item .featured-event-btn:focus-visible .featured-event-btn-icon,
.featured-events-section .featured-event-item .featured-event-btn:focus-visible span {
  color: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000)) !important;
  -webkit-text-fill-color: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000)) !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* PDF à la une : pastille masquée au repos, visible au survol uniquement (surcharge a.action-download:focus-within). */
.featured-events-section .featured-event-item a.action-download.event-featured-pdf .action-download-icon {
  height: var(--featured-event-action-height, 2.25rem) !important;
  min-height: 0 !important;
  max-height: var(--featured-event-action-height, 2.25rem) !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 solid transparent !important;
  border-width: 0 !important;
  aspect-ratio: 1 / 1;
  align-self: stretch;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease,
    width 0.3s ease,
    border-width 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf:not(:hover) .action-download-icon,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf:not(:hover):focus .action-download-icon,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf:not(:hover):focus-visible .action-download-icon,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf:not(:hover):focus-within .action-download-icon {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  border-width: 0 !important;
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf:hover .action-download-icon,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf:focus-visible .action-download-icon,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf:focus-within .action-download-icon {
  width: var(--featured-event-action-height, 2.25rem) !important;
  min-width: var(--featured-event-action-height, 2.25rem) !important;
  max-width: var(--featured-event-action-height, 2.25rem) !important;
  min-height: var(--featured-event-action-height, 2.25rem) !important;
  margin-left: -1px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000)) !important;
  background-color: transparent !important;
  background: transparent !important;
  color: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000)) !important;
  -webkit-text-fill-color: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000)) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf:is(:hover, :focus-visible, :focus-within) .action-download-icon .ressource-action-download-icon-svg,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf:is(:hover, :focus-visible, :focus-within) .action-download-icon svg,
.featured-events-section .featured-event-item a.action-download.event-featured-pdf:is(:hover, :focus-visible, :focus-within) .action-download-icon svg :is(path, line, polygon, rect, circle) {
  color: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000)) !important;
  fill: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000)) !important;
  stroke: var(--evt-btn-hover-border, var(--evt-btn-hover-text, #000000)) !important;
}

.featured-events-section .featured-event-item a.action-download.event-featured-pdf .action-download-icon .ressource-action-download-icon-svg {
  width: 1.35rem;
  height: 0.8rem;
}

/* Astroide only: featured events custom left-column layout and separators */
.featured-events-section .astroide-featured-event-item {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--featured-events-text, currentColor);
}

.featured-events-section .astroide-featured-event-item:last-child {
  margin-bottom: 0;
}

/* Astroïde : espace sous le bloc « à la une » (avant la fin de la section). */
.featured-events-section.featured-events-section--astroide {
  margin-bottom: 0;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.featured-events-section.featured-events-section--astroide > .mb-12 {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .featured-events-section.featured-events-section--astroide {
    padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
  }
}

/* Astroïde « à la une » : 2 colonnes ≥768px (grille pilotée en CSS pour permettre 1 colonne en mobile) */
.featured-event-item.astroide-featured-event-item.grid.w-full {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .featured-event-item.astroide-featured-event-item.grid.w-full {
    grid-template-columns: 1fr 1fr;
  }
}

.astroide-featured-left-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-height: 6rem;
}

.astroide-featured-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* When a fixed viewport height is selected, center the featured block(s) vertically */
.featured-events-section[data-featured-min-height]:not([data-featured-min-height="auto"]) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-events-section[data-featured-min-height]:not([data-featured-min-height="auto"]) > .mb-12 {
  margin-bottom: 0;
}

.featured-events-section[data-featured-min-height="half-screen"] {
  min-height: 50vh;
}

.featured-events-section[data-featured-min-height="three-quarters-screen"] {
  min-height: 75vh;
}

.featured-events-section[data-featured-min-height="screen"] {
  min-height: 100vh;
}

@supports (min-height: 100svh) {
  .featured-events-section[data-featured-min-height="half-screen"] {
    min-height: 50svh;
  }

  .featured-events-section[data-featured-min-height="three-quarters-screen"] {
    min-height: 75svh;
  }

  .featured-events-section[data-featured-min-height="screen"] {
    min-height: 100svh;
  }
}

/* Legacy fallback for current rendered markup (without data-featured-min-height) */
main > section.px-4.py-16.md\:px-8:has(> section.mb-12 > .featured-event-item) {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

main > section.px-4.py-16.md\:px-8:has(> section.mb-12 > .featured-event-item) > section.mb-12 {
  margin-bottom: 0;
}

@supports (min-height: 100svh) {
  main > section.px-4.py-16.md\:px-8:has(> section.mb-12 > .featured-event-item) {
    min-height: 85svh;
  }
}

/* Global override: referentiel button must follow panel tokens on desktop and mobile */
header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel,
header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel,
header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel:hover,
header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel:hover {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 2px solid var(--referential-border, var(--color-text, #000000)) !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  background-clip: border-box !important;
}

/* Header: au hover, les boutons parents prennent le style Referentiel
   (hors bouton referentiel lui-meme et hors bouton recherche). */
body[data-header-buttons-has-bg="1"] header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle):hover,
body[data-header-buttons-has-bg="1"] header .actions-wrapper .action-item > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle):hover,
body[data-header-buttons-has-text="1"] header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle):hover,
body[data-header-buttons-has-text="1"] header .actions-wrapper .action-item > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle):hover {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--referential-border, var(--color-text, #000000)) !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel:is(:hover, :focus-visible, :active),
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel:is(:hover, :focus-visible, :active) {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 2px solid var(--bw-referential-border, var(--referential-border, #000000)) !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"] header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle):hover,
body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"] header .actions-wrapper .action-item > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle):hover,
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"] header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle):hover,
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"] header .actions-wrapper .action-item > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle):hover {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

/* Tant que le sous-menu (enfants / descendants) est survole ou focus,
   le bouton parent conserve le style hover. */
header .actions-wrapper .action-item:has(> .submenu:hover) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item:has(> .submenu:focus-within) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item:has(> .submenu .is-breadcrumb-nav-hover) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle) {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--referential-border, var(--color-text, #000000)) !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .action-item:has(> .submenu:hover) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"] header .actions-wrapper .action-item:has(> .submenu:focus-within) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"] header .actions-wrapper .action-item:has(> .submenu .is-breadcrumb-nav-hover) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle) {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

/* Conserver aussi la forme "hover" (inversion des coins) tant que le sous-menu est actif. */
header .actions-wrapper .action-item:has(> .submenu:hover) > .button.header-nav-button.button--rounded:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item:has(> .submenu:focus-within) > .button.header-nav-button.button--rounded:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item:has(> .submenu .is-breadcrumb-nav-hover) > .button.header-nav-button.button--rounded:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button.button--rounded:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item > .button.header-nav-button.button--rounded.is-home-exergue-hover:not(.button--referentiel):not(.menu-search__toggle) {
  border-radius: 0 !important;
}

header .actions-wrapper .action-item:has(> .submenu:hover) > .button.header-nav-button.button--square:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item:has(> .submenu:focus-within) > .button.header-nav-button.button--square:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item:has(> .submenu .is-breadcrumb-nav-hover) > .button.header-nav-button.button--square:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button.button--square:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item > .button.header-nav-button.button--square.is-home-exergue-hover:not(.button--referentiel):not(.menu-search__toggle) {
  border-radius: 9999px !important;
}

/* Home : mot en exergue survolé → bouton parent = même état que :hover */
header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-home-exergue-hover,
header .actions-wrapper .action-item > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-home-exergue-hover,
header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-header-buttons-has-bg="1"] header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-header-buttons-has-bg="1"] header .actions-wrapper .action-item.is-home-exergue-hover > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-header-buttons-has-text="1"] header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-header-buttons-has-text="1"] header .actions-wrapper .action-item.is-home-exergue-hover > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover:has(> .submenu:hover) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover:has(> .submenu:focus-within) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.submenu-active.is-home-exergue-hover > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item:has(.submenu).submenu-active.is-home-exergue-hover > .button,
header .actions-wrapper .action-item:has(.submenu).is-home-exergue-hover > .button.is-home-exergue-hover {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--referential-border, var(--color-text, #000000)) !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"] header .actions-wrapper .action-item.is-home-exergue-hover > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"] header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"] header .actions-wrapper .action-item.is-home-exergue-hover > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"] header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"] header .actions-wrapper .action-item.is-home-exergue-hover > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle) {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

/* External stylesheet may target #openLightbox: enforce panel colors there too */
header .actions-wrapper #openLightbox,
header .actions-wrapper #openLightbox:hover {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border-color: var(--referential-border, var(--color-text, #000000)) !important;
  outline-color: var(--referential-border, var(--color-text, #000000)) !important;
}

header .actions-wrapper #openLightbox span:after {
  color: var(--referential-text, var(--color-text, #000000)) !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper #openLightbox,
body[data-contrast-mode="bw"] header .actions-wrapper #openLightbox:hover {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border-color: var(--bw-referential-border, var(--referential-border, #000000)) !important;
  outline-color: var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper #openLightbox span:after {
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
}

/* =========================================================================
   Mode N&B : remappage global des variables de thème
   -------------------------------------------------------------------------
   Quand le bouton N&B est actif (body[data-contrast-mode="bw"]), on remappe
   les variables utilisees par l'ensemble du site (header, boutons, logo,
   burger, footer, referentiel) vers leurs equivalents --bw-* definis par
   le Panel pour chaque page (cf. default.twig + blueprint style-header-footer).

   Les overrides sont conditionnes aux attributs data-bw-*-has-* poses sur
   <body> par la template : si la couleur N&B n'est pas renseignee dans le
   Panel, on conserve la couleur normale. Le !important permet de depasser
   la specificite du style inline pose sur <body> pour les variables.
   ========================================================================= */

/* Header : fond */
body[data-contrast-mode="bw"][data-bw-header-has-bg="1"] {
  --header-bg: var(--bw-header-bg) !important;
  --header-background: var(--bw-header-bg) !important;
}

/* Header : couleur de texte */
body[data-contrast-mode="bw"][data-bw-header-has-text="1"] {
  --header-text: var(--bw-header-text) !important;
  --color-text: var(--bw-header-text) !important;
}

/* Header : fond des boutons de navigation */
body[data-contrast-mode="bw"][data-bw-header-buttons-has-bg="1"] {
  --header-button-bg: var(--bw-header-button-bg) !important;
  --header-btn-bg: var(--bw-header-button-bg) !important;
  --btn-bg: var(--bw-header-button-bg) !important;
  --header-btn-hover-text: var(--bw-header-button-bg) !important;
  --btn-hover-text: var(--bw-header-button-bg) !important;
}

/* Header : texte des boutons de navigation */
body[data-contrast-mode="bw"][data-bw-header-buttons-has-text="1"] {
  --header-button-text: var(--bw-header-button-text) !important;
  --header-btn-text: var(--bw-header-button-text) !important;
  --btn-text: var(--bw-header-button-text) !important;
  --header-btn-hover-bg: var(--bw-header-button-text) !important;
  --btn-hover-bg: var(--bw-header-button-text) !important;
}

/* Logo : couleur */
body[data-contrast-mode="bw"][data-bw-logo-has-color="1"] {
  --logo-color: var(--bw-logo-color) !important;
  --header-logo: var(--bw-logo-color) !important;
}

/* Burger (menu mobile) : couleur */
body[data-contrast-mode="bw"][data-bw-burger-has-color="1"] {
  --burger-color: var(--bw-burger-color) !important;
}

/* Referentiel : fond / texte / bordure (en complement des rules specifiques
   plus haut qui ciblent .button--referentiel et #openLightbox). On expose
   aussi les variables --referential-* pour d'autres usages eventuels. */
body[data-contrast-mode="bw"] {
  --referential-bg: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  --referential-text: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  --referential-border: var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

/* Footer : fond */
body[data-contrast-mode="bw"][data-bw-footer-has-bg="1"] {
  --footer-bg: var(--bw-footer-bg) !important;
}

/* Footer : texte */
body[data-contrast-mode="bw"][data-bw-footer-has-text="1"] {
  --footer-text: var(--bw-footer-text) !important;
}

/* Footer : fond des boutons */
body[data-contrast-mode="bw"][data-bw-footer-buttons-has-bg="1"] {
  --footer-button-bg: var(--bw-footer-button-bg) !important;
  --footer-btn-bg: var(--bw-footer-button-bg) !important;
}

/* Footer : texte des boutons */
body[data-contrast-mode="bw"][data-bw-footer-buttons-has-text="1"] {
  --footer-button-text: var(--bw-footer-button-text) !important;
  --footer-btn-text: var(--bw-footer-button-text) !important;
}

/* =============================================================================
   MODE N&B - Defaults globaux automatiques (site entier)
   -----------------------------------------------------------------------------
   En N&B, on force des valeurs par defaut noir/blanc sur TOUT le site, meme
   si aucune couleur n'est saisie dans le Panel "Mode N&B". Les champs Panel
   (--bw-*) restent prioritaires si renseignes (les regles plus specifiques
   body[data-contrast-mode="bw"][data-bw-*-has-*="1"] au-dessus l'emportent),
   mais les fallbacks garantissent un rendu N&B correct partout par defaut.
   Ceci corrige notamment les cas "burger blanc sur fond blanc".
   ============================================================================= */
body[data-contrast-mode="bw"] {
  /* Header : fond noir + texte blanc */
  --header-bg: var(--bw-header-bg, #000000) !important;
  --header-background: var(--bw-header-bg, #000000) !important;
  --header-text: var(--bw-header-text, #ffffff) !important;
  --color-text: var(--bw-header-text, #ffffff) !important;

  /* Boutons header : inversion (fond blanc + texte noir) */
  --header-button-bg: var(--bw-header-button-bg, #ffffff) !important;
  --header-btn-bg: var(--bw-header-button-bg, #ffffff) !important;
  --btn-bg: var(--bw-header-button-bg, #ffffff) !important;
  --header-button-text: var(--bw-header-button-text, #000000) !important;
  --header-btn-text: var(--bw-header-button-text, #000000) !important;
  --btn-text: var(--bw-header-button-text, #000000) !important;
  --header-btn-hover-text: var(--bw-header-button-bg, #ffffff) !important;
  --btn-hover-text: var(--bw-header-button-bg, #ffffff) !important;
  --header-btn-hover-bg: var(--bw-header-button-text, #000000) !important;
  --btn-hover-bg: var(--bw-header-button-text, #000000) !important;

  /* Logo + burger : suivent la couleur du TEXTE du header pour garantir un
     contraste automatique avec le fond du header (si header bg blanc =>
     text noir => burger noir ; si header bg noir => text blanc => burger
     blanc). Les champs Panel bw_logo_color / bw_header_burger restent
     prioritaires s'ils sont renseignes. */
  --logo-color: var(--bw-logo-color, var(--bw-header-text, #000000)) !important;
  --header-logo: var(--bw-logo-color, var(--bw-header-text, #000000)) !important;
  --burger-color: var(--bw-burger-color, var(--bw-header-text, #000000)) !important;

  /* Footer : fond noir + texte blanc + boutons inverses */
  --footer-bg: var(--bw-footer-bg, #000000) !important;
  --footer-text: var(--bw-footer-text, #ffffff) !important;
  --footer-button-bg: var(--bw-footer-button-bg, #ffffff) !important;
  --footer-btn-bg: var(--bw-footer-button-bg, #ffffff) !important;
  --footer-button-text: var(--bw-footer-button-text, #000000) !important;
  --footer-btn-text: var(--bw-footer-button-text, #000000) !important;
}

/* Application directe des couleurs N&B (filets de securite : si la page n'a
   pas de couleur normale definie dans le Panel, les selecteurs
   body[data-header-has-*] et co. ne matchent pas. On force donc ici
   l'application des couleurs N&B sur les elements concernes, avec fallbacks
   garantissant un rendu correct meme sans champ Panel rempli). */

body[data-contrast-mode="bw"] header {
  background-color: var(--bw-header-bg, #000000) !important;
  color: var(--bw-header-text, #ffffff) !important;
}

body[data-contrast-mode="bw"] header .logo-morph,
body[data-contrast-mode="bw"] header .logo-morph * {
  color: var(--bw-logo-color, var(--bw-header-text, #000000)) !important;
}

/* Burger menu : applique la couleur a tous les selecteurs possibles
   (classe .burger-menu, id #mobile-menu-toggle, SVG enfant, fill pour paths).
   Fallback chain : bw-burger-color > bw-header-text > #000000 (noir sur blanc).
   On base le fallback sur --bw-header-text (pas --bw-logo-color) car header-text
   est toujours contraste avec header-bg : si header-bg=blanc alors header-text=
   noir et le burger est noir et visible ; si header-bg=noir alors header-text=
   blanc et le burger est blanc. Cela corrige le cas "burger blanc sur blanc". */
body[data-contrast-mode="bw"] .burger-menu,
body[data-contrast-mode="bw"] .burger-menu *,
body[data-contrast-mode="bw"] #mobile-menu-toggle,
body[data-contrast-mode="bw"] #mobile-menu-toggle svg,
body[data-contrast-mode="bw"] #mobile-menu-toggle svg *,
body[data-contrast-mode="bw"] .header-mobile-actions #mobile-menu-toggle,
body[data-contrast-mode="bw"] .header-mobile-actions #mobile-menu-toggle svg,
body[data-contrast-mode="bw"] .header-mobile-actions #mobile-menu-toggle svg * {
  color: var(--bw-burger-color, var(--bw-header-text, #000000)) !important;
  fill: var(--bw-burger-color, var(--bw-header-text, #000000)) !important;
}

body[data-contrast-mode="bw"] footer {
  background-color: var(--bw-footer-bg, #000000) !important;
  color: var(--bw-footer-text, #ffffff) !important;
}

/* PROD hard guardrail: footer button labels stay hidden until hover */
footer nav.footer-actions .action-item:not(:hover) > a.button:not(.is-site-popup-open),
footer nav.footer-actions .action-item:not(:hover) > .button.header-nav-button:not(.is-site-popup-open),
footer nav.footer-actions .action-item:not(:hover) > .button.button:not(.is-site-popup-open) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  overflow: hidden;
  transition-property: background-color, width, max-width, padding, border-radius;
}

footer nav.footer-actions a[data-site-popup-modal-trigger].is-site-popup-open,
body.site-popup-modal-open footer nav.footer-actions .action-item:not(:hover) > a.is-site-popup-open,
body[data-footer-has-text="1"].site-popup-modal-open footer nav.footer-actions .action-item:not(:hover) > a.is-site-popup-open,
body[data-footer-buttons-has-text="1"].site-popup-modal-open footer .actions-wrapper .action-item:not(:hover) > a.is-site-popup-open {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-color: #ffffff !important;
  overflow: visible !important;
}

footer nav.footer-actions .action-item:not(:hover) > a.button:not(.is-site-popup-open)::first-letter,
footer nav.footer-actions .action-item:not(:hover) > .button.header-nav-button:not(.is-site-popup-open)::first-letter,
footer nav.footer-actions .action-item:not(:hover) > .button.button:not(.is-site-popup-open)::first-letter,
footer nav.footer-actions .action-item:not(:hover) .newsletter-submit::first-letter {
  color: var(--footer-button-text, var(--footer-btn-text, var(--color-background, #ffffff))) !important;
  -webkit-text-fill-color: var(--footer-button-text, var(--footer-btn-text, var(--color-background, #ffffff))) !important;
}

footer nav.footer-actions .action-item:not(:hover) .newsletter-label,
footer nav.footer-actions .action-item:not(:hover) .newsletter-label::first-letter {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* PROD guardrail: search UI must follow panel colors */
body .menu-search__toggle,
body .menu-search__toggle.button,
body .menu-search__toggle input,
body .menu-search__toggle .menu-search__close {
  background-color: var(--mobile-search-popup-bg, var(--header-btn-bg, var(--btn-bg, #000000))) !important;
  color: var(--mobile-search-popup-text, var(--header-btn-text, var(--btn-text, #ffffff))) !important;
  border-color: var(--mobile-search-popup-bg, var(--header-btn-bg, var(--btn-bg, #000000))) !important;
  outline-color: var(--mobile-search-popup-bg, var(--header-btn-bg, var(--btn-bg, #000000))) !important;
}

body .menu-search__toggle input::placeholder {
  color: var(--mobile-search-popup-text, var(--header-btn-text, var(--btn-text, #ffffff))) !important;
  opacity: 1;
}

body .search-results {
  background: var(
    --desktop-search-results-bg,
    var(--mobile-search-panel-bg, var(--page-bg, var(--bg-body, var(--color-background, #ffffff))))
  ) !important;
  color: var(--desktop-search-results-text, var(--mobile-search-popup-text, #ffffff)) !important;
}

body .search-results .search-result-item,
body .search-results .search-result-item.search-result-item-more,
body .search-results .search-results-more {
  background: var(--desktop-search-item-bg, var(--desktop-search-results-bg, #000000)) !important;
  color: var(--desktop-search-item-text, var(--desktop-search-results-text, #ffffff)) !important;
  border-color: var(--desktop-search-item-bg, var(--desktop-search-results-bg, #000000)) !important;
  outline-color: var(--desktop-search-item-bg, var(--desktop-search-results-bg, #000000)) !important;
}

body .search-results .search-result-item a,
body .search-results .search-result-item .search-result-title,
body .search-results .search-result-item .search-result-snippet,
body .search-results .search-result-item .search-result-parent,
body .search-results .search-results-more {
  color: var(--desktop-search-item-text, var(--desktop-search-results-text, #ffffff)) !important;
  text-decoration-color: var(--desktop-search-item-text, var(--desktop-search-results-text, #ffffff)) !important;
}

/* Recherche header : Caliste majuscules (placeholder WebKit + libellés section type LAF) */
body .menu-search input[type="search"],
body .menu-search__toggle input[type="search"] {
  font-family: "Caliste", "Carliste", serif !important;
  text-transform: uppercase !important;
}

body .menu-search input[type="search"]::placeholder,
body .menu-search__toggle input[type="search"]::placeholder {
  font-family: "Caliste", "Carliste", serif !important;
  text-transform: uppercase !important;
}

body .search-results .search-result-parent,
body .search-results .search-result-parent.font-caliste {
  font-family: "Caliste", "Carliste", serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}

/* Mode N&B : capsules recherche = fond noir, texte blanc (tokens saison peuvent être noirs) */
body[data-contrast-mode="bw"] .search-results .search-result-item,
body[data-contrast-mode="bw"] .search-results .search-result-item.search-result-item-more,
body[data-contrast-mode="bw"] .search-results .search-results-more {
  background: #000000 !important;
  border-color: #000000 !important;
  outline-color: #000000 !important;
  color: #ffffff !important;
}

/* Popup recherche mobile N&B : fond résultats + barre blanche sur noir */
body[data-contrast-mode="bw"] .mobile-search-overlay__backdrop {
  background: color-mix(in srgb, #000000 96%, #ffffff 4%) !important;
}

body[data-contrast-mode="bw"] .mobile-search-overlay__panel {
  background: #000000 !important;
}

body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__toggle,
body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__toggle.button {
  background-color: #000000 !important;
  border-color: #000000 !important;
  outline-color: #000000 !important;
  color: #ffffff !important;
}

body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__toggle .menu-search__form,
body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__toggle .menu-search__form h1,
body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__close,
body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__close svg,
body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__icon-wrap {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-contrast-mode="bw"] body .menu-search--mobile-popup.is-open .menu-search__toggle input[type="search"],
body[data-contrast-mode="bw"] body .menu-search--mobile-popup.is-open .menu-search__toggle input,
body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__form input[type="search"] {
  background-color: transparent !important;
  border-color: transparent !important;
  outline-color: transparent !important;
  caret-color: #ffffff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
}

body[data-contrast-mode="bw"] body .menu-search--mobile-popup.is-open .menu-search__toggle input[type="search"]::placeholder,
body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__form input[type="search"]::placeholder {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  opacity: 0.55 !important;
}

body[data-contrast-mode="bw"] .menu-search--mobile-popup.is-open .menu-search__icon-wrap .menu-search__icon-loupe :is(circle, path) {
  stroke: #ffffff !important;
}

body[data-contrast-mode="bw"] .search-results .search-result-item a,
body[data-contrast-mode="bw"] .search-results .search-result-item .search-result-title,
body[data-contrast-mode="bw"] .search-results .search-result-item .search-result-snippet,
body[data-contrast-mode="bw"] .search-results .search-result-item .search-result-parent,
body[data-contrast-mode="bw"] .search-results .search-results-more,
body[data-contrast-mode="bw"] .search-results > .no-result,
body[data-contrast-mode="bw"] .search-results .search-results-more .more-dots,
body[data-contrast-mode="bw"] .search-results .search-results-more .more-dots .dot {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}

/* PROD guardrail: stabilize header logo size across environments */
header .logo-block {
  width: clamp(14.5rem, 18vw, 19rem) !important;
  max-width: clamp(14.5rem, 18vw, 19rem) !important;
  min-width: clamp(11rem, 14vw, 14rem) !important;
}

/* Logo justifie a gauche a l'interieur du padding (px-4) du <header>,
   avant, pendant et apres le shrink. */
header .header-left {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

header .header-left figure,
header .header-left figure > div,
header .header-left figure a.logo-block {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Espace logo ↔ burger SVG (token --spacing du thème). */
.gap-logo-burger {
  gap: calc(var(--spacing) * 5);
}

@media (min-width: 1024px) {
  /* Grand gap logo ↔ burger : identique avant et après shrink. */
  .logo-burger-row.gap-logo-burger {
    gap: calc(var(--spacing) * 18);
  }
}

/* Les images statiques internes (logo fallback + masque) remplissent le
   conteneur .logo-morph. Pour .logo-morph lui-meme, on calcule la largeur
   PLUS BAS en dur a partir de --nav-item-height (meme formule dans les
   etats normal / floating / shrunk), pour eviter un saut brutal lors de
   la transition entre "width: 100%" (pourcentage) et "width: calc()"
   (valeur absolue) : certains navigateurs ne savent pas interpoler entre
   ces deux types de valeurs, ce qui provoque un rétrécissement saccadé
   en coin gauche juste avant le shrink fluide. */
header .logo-block .logo-morph__logo,
header .logo-block .logo-morph__mask {
  width: 100% !important;
  max-width: 100% !important;
}

/* Nav / breadcrumb interne : on garde une baseline « bas » ou les regles locales.
   Logo (colonne gauche + .logo-block) : alignement HAUT pour ancrer le coin
   haut-gauche : avec flex-end, le bas du logo restait plaque sur la ligne du
   fil d'Ariane — au shrink la boite diminuait « par le bas » et donnait une
   chute puis un rebond quand la hauteur du header se recalculait. */
header .header-right,
header .actions-wrapper,
header .breadcrumb {
  align-items: flex-end !important;
}

header .header-left,
header .header-left figure,
header .header-left figure > div,
header .logo-block {
  align-items: flex-start !important;
}

header .logo-block {
  display: flex;
  height: var(--nav-item-height) !important;
  min-height: var(--nav-item-height) !important;
}

header .logo-block .logo-morph {
  display: block;
  line-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 1 auto;
  align-self: flex-start;
}

/* --nav-item-height unifie sur tout le header : meme hauteur que le logo
   (ratio Lottie 700x180 = 180/700). Partagee par la fleche, breadcrumb, menu.
   On cible aussi header.header-floating pour ecraser la valeur par defaut
   posee dans blank.twig qui reduisait le SVG + boutons des l'ajout de
   header-floating. */
header,
header.header-floating {
  /* ms : shrink + expand Lottie + layout (voir blank.twig, même durée les deux sens). */
  --header-shrink-layout-ms: 500;
  --nav-item-height: calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700) !important;
}

/* Header flottant, hors shrink : largeur « repos » du bloc logo. */
header.header-floating:not(.header-shrunk) .logo-block {
  width: clamp(14.5rem, 18vw, 19rem) !important;
  max-width: clamp(14.5rem, 18vw, 19rem) !important;
  min-width: clamp(11rem, 14vw, 14rem) !important;
}

/* Dé-shrink : pendant data-logo-lottie-tweening, .logo-block grossit avec
   --nav-item-height (même formule que .logo-morph), en phase avec le Lottie.
   Sans cela le clamp pleine largeur s applique dès t=0 et le conteneur saute. */
header.header-floating:not(.header-shrunk)[data-logo-lottie-tweening="1"] .logo-block {
  width: calc(var(--nav-item-height) * 700 / 180) !important;
  max-width: calc(var(--nav-item-height) * 700 / 180) !important;
  min-width: 0 !important;
  height: var(--nav-item-height) !important;
  min-height: var(--nav-item-height) !important;
  max-height: var(--nav-item-height) !important;
}

/* Aspect ratio du logo = artboard Lottie 700x180 (rendu meet, sans stretch). */
header .logo-morph,
header.header-floating .logo-morph,
header.header-floating.header-shrunk .logo-morph {
  aspect-ratio: 700 / 180 !important;
  width: calc(var(--nav-item-height) * 700 / 180) !important;
  max-width: calc(var(--nav-item-height) * 700 / 180) !important;
  min-width: 0 !important;
  /* Hauteur explicite (au lieu de "auto") meme hors du shrink :
     evite le passage de "auto" (non-animable) a une valeur explicite
     au moment de l'ajout de .header-shrunk. */
  height: var(--nav-item-height) !important;
  min-height: var(--nav-item-height) !important;
  max-height: var(--nav-item-height) !important;
}

/* Neutralise le min-height defini dans blank.twig qui forcait une
   hauteur "shrinkee" des que header-floating etait actif. On garde le
   logo a sa taille naturelle pendant toute la duree de l'animation.
   On fige aussi la hauteur sur --nav-item-height (au lieu de laisser
   "auto") pour permettre la transition animable entre les etats. */
header.header-floating figure a.logo-block,
header figure a.logo-block {
  min-height: 0 !important;
  height: var(--nav-item-height) !important;
  max-height: var(--nav-item-height) !important;
}

/* Pas d'etape intermediaire pour les boutons : pendant l'animation
   (header-floating sans header-shrunk), ils conservent EXACTEMENT la
   hauteur qu'ils ont par defaut (--nav-item-height defini plus haut).
   Seul l'ajout de .header-shrunk declenche leur passage en petite taille. */

/* Transitions fluides pour un retrecissement/agrandissement smooth.
   On cible aussi le SVG ".nav-active-page__icon", ses boutons parent et
   page active, les boutons principaux du menu (pas les liens du sous-menu :
   ceux-ci restent exclus pour eviter un effet « volet » a l ouverture en shrink),
   pour qu'ils suivent en douceur la variation de taille - EN MEME TEMPS
   que le logo. Le libelle interne PDF (.action-download__label) est inclus
   explicitement car il n est pas enfant direct de .action-item. */
header .logo-block,
header figure a.logo-block,
header .logo-morph,
header .logo-morph__logo,
header .logo-morph__lottie,
header .actions-wrapper,
header .actions-wrapper .action-item,
header .actions-wrapper .action-item > .button,
header .actions-wrapper .action-item > button,
header .actions-wrapper .action-item .action-download__label.button,
header .breadcrumb,
header .breadcrumb .button,
header .breadcrumb .breadcrumb-current-button,
header .breadcrumb .breadcrumb-parent-button,
header .nav-active-page__icon,
header .nav-active-page__icon svg,
header .nav-active-page__button,
header .header-mobile-actions #mobile-menu-toggle,
header .header-mobile-actions #mobile-menu-toggle svg,
header .header-mobile-actions .contrast-toggle-group {
  /* Courbe Material + duree = tween Lottie (voir --header-shrink-layout-ms sur header). */
  transition: width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1), max-width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1), min-width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
              height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1), min-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1), max-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
              padding calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1), padding-inline calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
              padding-block calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1), padding-top calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1), padding-bottom calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
              font-size calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1), line-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Shrink : courbe à départ rapide (Material 0.4,0,0.2,1 = latence perceptible). */
header.header-floating.header-shrunk[data-header-morph="shrink"][data-logo-lottie-tweening="1"] {
  --header-shrink-layout-ease: cubic-bezier(0.04, 1, 0.22, 1);
}

header.header-floating.header-shrunk[data-header-morph="shrink"][data-logo-lottie-tweening="1"] :is(
  .logo-block,
  figure a.logo-block,
  .logo-morph,
  .logo-morph__logo,
  .logo-morph__lottie,
  .actions-wrapper,
  .actions-wrapper .action-item,
  .actions-wrapper .action-item > .button,
  .actions-wrapper .action-item > button,
  .actions-wrapper .action-item .action-download__label.button,
  .breadcrumb,
  .breadcrumb .button,
  .breadcrumb .breadcrumb-current-button,
  .breadcrumb .breadcrumb-parent-button,
  .nav-active-page__icon,
  .nav-active-page__icon svg,
  .nav-active-page__button,
  .header-mobile-actions #mobile-menu-toggle,
  .header-mobile-actions #mobile-menu-toggle svg,
  .header-mobile-actions .contrast-toggle-group,
  .header-left
) {
  transition-timing-function: var(--header-shrink-layout-ease, cubic-bezier(0.04, 1, 0.22, 1)) !important;
}

/* Sous-menu ouvert en header shrink : pas de tween --header-shrink-layout-ms sur le
   bouton parent (sinon « déroulé » très lent) ni sur le panneau .submenu. */
header.header-floating.header-shrunk .actions-wrapper .action-item:has(.submenu):is(:hover, .submenu-active, :focus-within) > .button,
header.header-floating.header-shrunk .actions-wrapper .action-item:has(.submenu):is(:hover, .submenu-active, :focus-within) > button {
  transition: none !important;
}

header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu,
header.header-floating.header-shrunk .actions-wrapper .action-item.submenu-active > .submenu,
header.header-floating.header-shrunk .actions-wrapper .action-item:focus-within > .submenu {
  transition: none !important;
}

/* Aucune tween du layout shrink sur le contenu du sous-menu (effet « volet »). */
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu .button,
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu a.button,
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu .header-nav-button {
  transition: none !important;
}

/* Shrink + sous-menu : le header « grandit » (baseline, capsule, extender).
   Sans cela, .actions-wrapper / .action-item gardent le tween long --header-shrink-layout-ms
   sur padding / tailles → effet volet cheap quand le bloc se réorganise. */
header.header-floating.header-shrunk:has(.action-item.submenu-active) .actions-wrapper,
header.header-floating.header-shrunk:has(.action-item:has(.submenu):hover) .actions-wrapper,
header.header-floating.header-shrunk:has(.action-item:has(.submenu):focus-within) .actions-wrapper,
header.header-floating.header-shrunk:has(.action-item.submenu-active) .actions-wrapper .action-item,
header.header-floating.header-shrunk:has(.action-item:has(.submenu):hover) .actions-wrapper .action-item,
header.header-floating.header-shrunk:has(.action-item:has(.submenu):focus-within) .actions-wrapper .action-item {
  transition: none !important;
}

/* Dé-shrink : boutons fil d’Ariane + icône page active — même axe vertical que le
   logo (croissance depuis le haut, pas depuis la baseline du flex items-end). */
header.header-floating .breadcrumb,
header.header-floating .breadcrumb ol.flex {
  align-items: flex-start !important;
}

/* Colonne logo + fil d’Ariane : ancrage haut en scroll pour que logo et 2 boutons
   grossissent en phase (même --nav-item-height / --header-shrink-layout-ms). */
header.header-floating .header-left {
  align-items: flex-start !important;
}

/* Icône « menu » (nav-active-page) : ancrée en haut du header au shrink/dé-shrink ;
   SVG avec origine bas-droite pour un agrandissement cohérent avec les boutons. */
header.header-floating .nav-active-page {
  align-items: flex-start !important;
}
header.header-floating .nav-active-page__icon {
  align-self: flex-start !important;
  align-items: flex-start !important;
  justify-content: flex-end;
  top: auto !important;
  margin-top: 0 !important;
}
header.header-floating .nav-active-page__icon svg {
  transform-origin: 100% 100%;
  display: block;
}
header.header-floating .nav-active-page__button {
  align-self: flex-start;
}

/* Lottie logo : éviter contain:paint/style — ils provoquent un mini-flash au
   début du crossfade hover entre les deux couches (repaint forcé au 1er frame).
   Layout seul limite encore le reflow sans isoler les peintures des enfants. */
header .logo-morph {
  contain: layout;
  isolation: isolate;
}

header .logo-morph__lottie {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Navigation / haut de page : pas de transition de taille sur le logo
   (apparition directe a la taille finale). En scroll (.header-floating),
   les memes proprietes suivent --header-shrink-layout-ms comme le reste du header. */
header:not(.header-floating) .logo-block,
header:not(.header-floating) figure a.logo-block,
header:not(.header-floating) .logo-morph,
header:not(.header-floating) .logo-morph__logo,
header:not(.header-floating) .logo-morph__lottie {
  transition: none !important;
}

/* Taille reduite : appliquee quand la classe .header-shrunk est ajoutee par le JS.
   IMPORTANT : on NE touche PAS a .logo-block (sa largeur reste constante
   entre l'etat par defaut et l'etat shrunk). Sinon .header-left retrecit,
   .header-right (flex-1) s'elargit, et les boutons principaux deviennent
   plus larges - ce qu'on veut eviter. Seul .logo-morph retrecit visuellement
   a l'interieur de .logo-block, aligne a gauche. */

header.header-floating.header-shrunk {
  /* Même air vertical qu’en haut qu’en bas (le JS lit toujours padding-top pour le gap sous-menu). */
  padding-top: var(--site-chrome-inset-block, 0.75rem) !important;
  padding-bottom: 1rem !important;
  --nav-item-height: calc(clamp(10rem, 12vw, 12.5rem) * 180 / 700) !important;
}

/* --- PARITE EXACTE LOGO / BOUTONS EN ETAT SHRINK ------------------------
   Objectif : la hauteur du logo retreci == la hauteur des boutons du
   header (a.button.header-nav-button dans .action-item, incluant le
   bouton parent "rassembler" et tous les boutons du sous-menu).
   On aligne les DEUX sur la meme valeur : --nav-item-height (qui suit
   exactement le ratio Lottie 700:180, soit la largeur du logo
   multipliee par 180/700). */

/* 1) Logo : largeur + hauteur sont desormais definies PLUS HAUT dans
   un selecteur qui couvre les trois etats (normal / floating / shrunk)
   avec la MEME formule calc(var(--nav-item-height) * 700 / 180). Seule
   --nav-item-height change de valeur entre les etats, ce qui permet
   une transition CSS propre (pas de saut entre deux types de valeurs).
   On ne garde ici que l'alignement a gauche dans .logo-block. */
header.header-floating.header-shrunk .logo-morph {
  margin-right: auto; /* reste cale a gauche dans .logo-block */
}

/* On garde le conteneur .logo-block a sa hauteur naturelle (pas de cadre
   vertical supplementaire) sans toucher a sa LARGEUR, pour preserver la
   largeur de .header-left (et donc la largeur des boutons). */
header.header-floating.header-shrunk .logo-block {
  height: var(--nav-item-height) !important;
  min-height: var(--nav-item-height) !important;
  max-height: var(--nav-item-height) !important;
  justify-content: flex-start !important;
}

/* Hauteur explicite AUSSI hors du shrink : sans cela, le height passe
   de "auto" (non-animable) a une valeur px au moment precis ou
   header-shrunk est ajoute, ce qui provoque un saccade vertical
   juste avant le rétrécissement. En posant la meme formule dans les
   deux etats, la transition CSS interpole correctement du grand
   --nav-item-height vers le petit, sans rupture. */
/* Les boutons PRINCIPAUX du header + breadcrumb gardent une hauteur fixe.
   On exclut les boutons du sous-menu qui doivent pouvoir grandir verticalement
   pour eviter la troncature du texte (cf. regles specifiques plus bas). */
header .actions-wrapper .action-item,
header .actions-wrapper .action-item > .button,
header .actions-wrapper .action-item > .button.header-nav-button,
header .breadcrumb .button,
header .breadcrumb .breadcrumb-current-button,
header .breadcrumb .breadcrumb-parent-button,
header .nav-active-page__button {
  height: var(--nav-item-height) !important;
  min-height: var(--nav-item-height) !important;
  max-height: var(--nav-item-height) !important;
}

/* Header : anneau intérieur 2px (hover sans décalage de layout). */
header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button:not(.button--referentiel),
header .actions-wrapper .action-item > .submenu :is(.button, a.button, button.button).header-nav-button,
header .actions-wrapper .menu-search__toggle.button,
header .actions-wrapper .contrast-toggle.button,
header .actions-wrapper .action-item > a.action-download.download-action-button {
  --header-btn-inset-ring: 1px;
  --header-btn-inset-color: transparent;
  border: 0 !important;
  border-width: 0 !important;
  --border-width: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-offset: 0 !important;
  box-sizing: border-box !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 0 0 var(--header-btn-inset-ring) var(--header-btn-inset-color) !important;
}

/* Référentiel : bordure 2px — token Panel « Référentiel — bordure » (--referential-border) */
header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel,
header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel {
  --header-btn-inset-color: transparent;
  border: 2px solid var(--referential-border, var(--color-text, #000000)) !important;
  border-width: 2px !important;
  box-shadow: none !important;
  background-clip: border-box !important;
}

header .actions-wrapper .contrast-toggle-group {
  border: 2px solid var(--referential-border, var(--color-text, #000000)) !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .contrast-toggle-group {
  border: 2px solid var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

header .actions-wrapper .contrast-toggle-group > .contrast-toggle.button {
  box-shadow: none !important;
  border: 0 !important;
}

header .actions-wrapper .menu-search__toggle.button {
  --header-btn-inset-color: #000000;
  box-shadow: inset 0 0 0 1px #000000 !important;
}

header .actions-wrapper .menu-search__toggle.button:is(:hover, :focus-visible, :active) {
  border-radius: 9999px !important;
}

/* 2) Boutons PRINCIPAUX du header (PAS le sous-menu) : meme hauteur exacte
   que le logo. On neutralise tout padding vertical, tout min/max-height
   parasite, et on fige sur --nav-item-height. Les boutons du sous-menu
   sont geres separement (cf. plus bas) avec height: auto pour eviter
   de tronquer le texte long. */
header.header-floating.header-shrunk .actions-wrapper .action-item,
header.header-floating.header-shrunk .actions-wrapper .action-item > .button,
header.header-floating.header-shrunk .actions-wrapper .action-item > .button.header-nav-button {
  height: var(--nav-item-height) !important;
  min-height: var(--nav-item-height) !important;
  max-height: var(--nav-item-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  --vpadding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1120px) and (min-width: 1024px) {
  header .logo-block {
    width: clamp(12rem, 16vw, 15rem) !important;
    max-width: clamp(12rem, 16vw, 15rem) !important;
    min-width: clamp(10.5rem, 14vw, 12rem) !important;
  }

  header,
  header.header-floating {
    --nav-item-height: calc(clamp(12rem, 16vw, 15rem) * 180 / 700) !important;
  }

  /* .logo-block conserve sa largeur par defaut dans cet etat aussi pour
     que les boutons ne s'elargissent pas. Seul .logo-morph retrecit. */

  header.header-floating.header-shrunk {
    --nav-item-height: calc(clamp(8.5rem, 10vw, 10rem) * 180 / 700) !important;
  }
}

/* Global text selection: invert theme text/background colors */
::selection {
  background: var(--color-text, #000000) !important;
  color: var(--color-background, #ffffff) !important;
}

::-moz-selection {
  background: var(--color-text, #000000) !important;
  color: var(--color-background, #ffffff) !important;
}

*::selection {
  background: var(--color-text, #000000) !important;
  color: var(--color-background, #ffffff) !important;
}

*::-moz-selection {
  background: var(--color-text, #000000) !important;
  color: var(--color-background, #ffffff) !important;
}

/* In layouts, selection follows layout colors first */
.layout-section ::selection {
  background: var(--section-text, var(--color-text, #000000)) !important;
  color: var(--section-bg, var(--color-background, #ffffff)) !important;
}

.layout-section ::-moz-selection {
  background: var(--section-text, var(--color-text, #000000)) !important;
  color: var(--section-bg, var(--color-background, #ffffff)) !important;
}

.layout-section *::selection {
  background: var(--section-text, var(--color-text, #000000)) !important;
  color: var(--section-bg, var(--color-background, #ffffff)) !important;
}

.layout-section *::-moz-selection {
  background: var(--section-text, var(--color-text, #000000)) !important;
  color: var(--section-bg, var(--color-background, #ffffff)) !important;
}

/* Ensure form/text UI also follows selection inversion */
input::selection,
textarea::selection,
button::selection,
a::selection,
span::selection,
p::selection,
h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection,
li::selection {
  background: var(--color-text, #000000) !important;
  color: var(--color-background, #ffffff) !important;
}

input::-moz-selection,
textarea::-moz-selection,
button::-moz-selection,
a::-moz-selection,
span::-moz-selection,
p::-moz-selection,
h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, h4::-moz-selection, h5::-moz-selection, h6::-moz-selection,
li::-moz-selection {
  background: var(--color-text, #000000) !important;
  color: var(--color-background, #ffffff) !important;
}

/* Strong layout-specific selection for rich text blocks */
.layout-section[data-has-seasonal="1"] .copy *::selection,
.layout-section[data-has-seasonal="1"] .copy *::-moz-selection {
  background: var(--section-text, var(--color-text, #000000)) !important;
  color: var(--section-bg, var(--color-background, #ffffff)) !important;
}

/* Per-block text selection in themed layouts (explicit element targets) */
.layout-section[data-has-seasonal="1"] p::selection,
.layout-section[data-has-seasonal="1"] span::selection,
.layout-section[data-has-seasonal="1"] a::selection,
.layout-section[data-has-seasonal="1"] li::selection,
.layout-section[data-has-seasonal="1"] h1::selection,
.layout-section[data-has-seasonal="1"] h2::selection,
.layout-section[data-has-seasonal="1"] h3::selection,
.layout-section[data-has-seasonal="1"] h4::selection,
.layout-section[data-has-seasonal="1"] h5::selection,
.layout-section[data-has-seasonal="1"] h6::selection,
.layout-section[data-has-seasonal="1"] blockquote::selection,
.layout-section[data-has-seasonal="1"] em::selection,
.layout-section[data-has-seasonal="1"] strong::selection {
  background: var(--section-text, var(--color-text, #000000)) !important;
  color: var(--section-bg, var(--color-background, #ffffff)) !important;
}

.layout-section[data-has-seasonal="1"] p::-moz-selection,
.layout-section[data-has-seasonal="1"] span::-moz-selection,
.layout-section[data-has-seasonal="1"] a::-moz-selection,
.layout-section[data-has-seasonal="1"] li::-moz-selection,
.layout-section[data-has-seasonal="1"] h1::-moz-selection,
.layout-section[data-has-seasonal="1"] h2::-moz-selection,
.layout-section[data-has-seasonal="1"] h3::-moz-selection,
.layout-section[data-has-seasonal="1"] h4::-moz-selection,
.layout-section[data-has-seasonal="1"] h5::-moz-selection,
.layout-section[data-has-seasonal="1"] h6::-moz-selection,
.layout-section[data-has-seasonal="1"] blockquote::-moz-selection,
.layout-section[data-has-seasonal="1"] em::-moz-selection,
.layout-section[data-has-seasonal="1"] strong::-moz-selection {
  background: var(--section-text, var(--color-text, #000000)) !important;
  color: var(--section-bg, var(--color-background, #ffffff)) !important;
}

/**===================================
  SCROLLBARS PERSONNALISÉS
====================================**/

/* Navigateurs modernes (Firefox, etc.) */
html {
  scrollbar-width: thin;
  scrollbar-color: #000000 transparent;
}

/* Navigateurs WebKit (Chrome, Edge, Safari…) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #000000;
  border-radius: 9999px; /* capsule */
  border: 2px solid transparent; /* affine la pastille */
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #222222;
}

/* ==================================================
   Safety net (color-only): protects panel theming
   ================================================== */

/* Global fallback coherence */
body {
  background-color: var(--page-bg, var(--bg-body, var(--color-background, #ffffff)));
  color: var(--color-text, #000000);
}

/* Layout content inherits section palette consistently */
.layout-section[data-has-seasonal="1"],
.layout-section[data-has-seasonal="1"] * {
  border-color: var(--section-text, currentColor);
}

/* Listes déroulantes (bloc steps) : pas de bordure / contour sur le texte (thème saisonnier) */
.layout-section[data-has-seasonal="1"] .steps-block,
.layout-section[data-has-seasonal="1"] .steps-block :is(.steps-title, .steps-panel-body, .steps-panel-body *) {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* Mode N&B : lignes / séparateurs (token Panel « N&B — lignes / séparateurs » sur le layout).
   Placé après les bordures saisonnières pour l’emporter sur border-color des sections. */
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout-line-color="1"] .block-type-divider,
body[data-contrast-mode="bw"] .layout-section[style*="--bw-layout-line-color"] .block-type-divider {
  background-color: var(--bw-layout-line-color, var(--layout-line-color, var(--divider-block-color, #000000))) !important;
  background: var(--bw-layout-line-color, var(--layout-line-color, var(--divider-block-color, #000000))) !important;
  color: var(--bw-layout-line-color, var(--layout-line-color, var(--divider-block-color, #000000))) !important;
}

body[data-contrast-mode="bw"] .layout-section.layout-section--table-4-cols[data-has-bw-layout-line-color="1"],
body[data-contrast-mode="bw"] .layout-section.layout-section--table-4-cols[style*="--bw-layout-line-color"],
body[data-contrast-mode="bw"] .layout-section.layout-section--table-4-cols[data-has-layout-line-color="1"] {
  border-top-color: var(--bw-layout-line-color, var(--layout-line-color, currentColor)) !important;
}

.layout-section[data-has-seasonal="1"] a:not(.button) {
  color: var(--section-text, currentColor);
  text-decoration-color: var(--section-text, currentColor);
}

/* Inputs in themed zones */
.layout-section[data-has-seasonal="1"] input,
.layout-section[data-has-seasonal="1"] textarea {
  background-color: var(--section-bg, transparent);
  color: var(--section-text, inherit);
  border-color: var(--section-text, currentColor);
}

/* Select/dropdown in themed zones - uses dedicated select text color if defined */
/* High specificity to override layout text color */
.layout-section[data-has-seasonal="1"][data-has-seasonal="1"] select,
.layout-section[data-has-select-color="1"][data-has-select-color="1"] select,
section.layout-section[data-has-seasonal="1"] select,
section[data-has-seasonal="1"] select {
  background-color: var(--section-bg, transparent) !important;
  color: var(--section-select-text, var(--section-text, inherit)) !important;
  border-color: var(--section-select-text, var(--section-text, currentColor)) !important;
}

/* Select options also need the color - high specificity */
.layout-section[data-has-seasonal="1"][data-has-seasonal="1"] select option,
.layout-section[data-has-select-color="1"][data-has-select-color="1"] select option,
section.layout-section[data-has-seasonal="1"] select option,
section[data-has-seasonal="1"] select option {
  color: var(--section-select-text, var(--section-text, inherit)) !important;
  background-color: var(--section-bg, #fff) !important;
}

/* Mode N&B - Select/dropdown - high specificity */
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][data-has-bw-layout="1"] select,
body[data-contrast-mode="bw"] section.layout-section[data-has-bw-layout="1"] select,
body[data-contrast-mode="bw"] .layout-section select,
body[data-contrast-mode="bw"] section[data-has-seasonal="1"] select {
  color: var(--bw-section-select-text, var(--bw-section-text, inherit)) !important;
  border-color: var(--bw-section-select-text, var(--bw-section-text, currentColor)) !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][data-has-bw-layout="1"] select option,
body[data-contrast-mode="bw"] section.layout-section[data-has-bw-layout="1"] select option,
body[data-contrast-mode="bw"] .layout-section select option {
  color: var(--bw-section-select-text, var(--bw-section-text, inherit)) !important;
  background-color: var(--bw-section-bg, #fff) !important;
}

.layout-section[data-has-seasonal="1"] input::placeholder,
.layout-section[data-has-seasonal="1"] textarea::placeholder {
  color: var(--section-text, currentColor);
  opacity: 0.75;
}

/* Footer form fallback coherence */
footer input,
footer textarea,
footer select {
  color: var(--footer-btn-text, var(--footer-text, inherit));
  border-color: var(--footer-btn-bg, var(--footer-bg, currentColor));
}

/* Accessible focus ring aligned with active theme tokens */
:focus-visible {
  outline-color: var(--header-btn-bg, var(--section-text, var(--color-text, #000000)));
}

/* Hard override: referentiel button must follow panel seasonal tokens */
header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel,
header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel,
header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel:is(:hover, :focus-visible, :active),
header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel:is(:hover, :focus-visible, :active) {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 2px solid var(--referential-border, var(--color-text, #000000)) !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  background-clip: border-box !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > :is(.button, a.button, button.button).header-nav-button.button--referentiel:is(:hover, :focus-visible, :active),
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > a.button.header-nav-button.button--referentiel:is(:hover, :focus-visible, :active) {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 2px solid var(--bw-referential-border, var(--referential-border, #000000)) !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =====================================
   MODE N&B - COULEURS SPECIFIQUES AUX LAYOUTS
   =====================================
   Quand le mode N&B est actif, les sections de layout qui ont defini
   des couleurs N&B specifiques (via le Panel) les appliquent.
   Les variables --bw-section-* sont posees sur chaque <section> par layouts.twig. */

body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] {
  background-color: var(--bw-section-bg, var(--section-bg, inherit)) !important;
  color: var(--bw-section-text, var(--section-text, inherit)) !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .button,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] a.button {
  background-color: var(--bw-section-button-bg, var(--section-button-bg, var(--bw-section-text, #000000))) !important;
  color: var(--bw-section-button-text, var(--section-button-text, #ffffff)) !important;
  -webkit-text-fill-color: var(--bw-section-button-text, var(--section-button-text, #ffffff)) !important;
  border-color: var(--bw-section-button-bg, var(--section-button-bg, var(--bw-section-text, #000000))) !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .button:hover,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] a.button:hover {
  background-color: var(--bw-section-button-text, var(--section-button-text, #ffffff)) !important;
  color: var(--bw-section-button-bg, var(--section-button-bg, #000000)) !important;
  -webkit-text-fill-color: var(--bw-section-button-bg, var(--section-button-bg, #000000)) !important;
  border-color: var(--bw-section-button-text, var(--section-button-text, #ffffff)) !important;
}

/* Survol N&B personnalisé (Panel : layout → Mode N&B → survol fond / bordure / texte) */
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .button:hover,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] a.button:hover {
  background-color: var(--bw-section-button-hover-bg) !important;
  background: var(--bw-section-button-hover-bg) !important;
  color: var(--bw-section-button-hover-text) !important;
  -webkit-text-fill-color: var(--bw-section-button-hover-text) !important;
  border-color: var(--bw-section-button-hover-border, var(--bw-section-button-hover-bg)) !important;
  outline-color: var(--bw-section-button-hover-border, var(--bw-section-button-hover-bg)) !important;
}

/* Textes, liens et autres elements dans les sections N&B */
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h1,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h2,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h3,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h4,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h5,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h6,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] p,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] li,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] span:not(.action-download__label):not(.action-download-icon) {
  color: var(--bw-section-text, var(--section-text, inherit)) !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] a:not(.button) {
  color: var(--bw-section-text, var(--section-text, inherit)) !important;
}

/* Newsletter button */
.newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  text-transform: lowercase;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.newsletter-btn .newsletter-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.newsletter-btn .newsletter-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

footer .newsletter-btn {
  background-color: var(--footer-btn-bg, #000);
  color: var(--footer-btn-text, #fff);
  border: 1.5px solid var(--footer-btn-bg, #000);
}

footer .newsletter-btn:hover {
  background-color: var(--footer-btn-text, #fff);
  color: var(--footer-btn-bg, #000);
  border-color: var(--footer-btn-bg, #000);
}

/* =============================================================================
   STEPS - Couleur de texte indépendante du layout (PRIORITÉ MAXIMALE)
   ============================================================================= */

/* Steps gardent toujours leur couleur par défaut (blanc sur fond noir) */
.layout-section .steps-item .steps-badge,
.layout-section .steps-item .steps-summary .steps-badge,
.layout-section .steps-summary .steps-badge,
.layout-section span.steps-badge,
.layout-section .steps-badge.is-square,
.layout-section .steps-badge.is-circle,
.layout-section .steps-badge,
.layout-section[data-has-seasonal="1"] .steps-badge,
.layout-section[data-has-seasonal="1"] span.steps-badge {
  color: var(--steps-text-color, #fff) !important;
}

.layout-section .steps-title,
.layout-section .steps-panel,
.layout-section .steps-panel span,
.layout-section .steps-content,
.layout-section .steps-content *,
.layout-section[data-has-seasonal="1"] .steps-title,
.layout-section[data-has-seasonal="1"] .steps-panel,
.layout-section[data-has-seasonal="1"] .steps-panel span,
.layout-section[data-has-seasonal="1"] .steps-content,
.layout-section[data-has-seasonal="1"] .steps-content * {
  color: var(--steps-text-color, #fff) !important;
}

/* Si une couleur spécifique est définie via le champ "listes déroulantes" */
.layout-section[data-has-select-color="1"] .steps-badge,
.layout-section[data-has-select-color="1"] span.steps-badge,
.layout-section[data-has-select-color="1"] .steps-title,
.layout-section[data-has-select-color="1"] .steps-panel,
.layout-section[data-has-select-color="1"] .steps-panel span,
.layout-section[data-has-select-color="1"] .steps-content,
.layout-section[data-has-select-color="1"] .steps-content * {
  color: var(--section-select-text, #fff) !important;
}

/* Mode N&B - Steps gardent leur couleur par défaut */
body[data-contrast-mode="bw"] .layout-section .steps-badge,
body[data-contrast-mode="bw"] .layout-section span.steps-badge,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-badge,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] span.steps-badge,
body[data-contrast-mode="bw"] .layout-section .steps-title,
body[data-contrast-mode="bw"] .layout-section .steps-panel,
body[data-contrast-mode="bw"] .layout-section .steps-panel span,
body[data-contrast-mode="bw"] .layout-section .steps-content,
body[data-contrast-mode="bw"] .layout-section .steps-content *,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-title,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-panel,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-panel span,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-content,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-content * {
  color: var(--steps-text-color, #fff) !important;
}

/* Mode N&B avec couleur spécifique définie */
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-badge,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] span.steps-badge,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-title,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-panel,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-panel span,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-content,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-content * {
  color: var(--bw-section-select-text, #fff) !important;
}

/* Texte N&B défini sur le bloc liste déroulante (priorité sur le layout) */
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-badge,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] span.steps-badge,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-title,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-panel,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-panel span,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-content,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-content * {
  color: var(--steps-bw-text-color) !important;
}

/* Listes déroulantes (steps) : survol ligne fermée = fond blanc / texte noir en N&B */
body[data-contrast-mode="bw"] .layout-section .steps-item:not([open]) .steps-summary:hover .steps-panel,
body[data-contrast-mode="bw"] .layout-section .steps-item:not([open]) .steps-summary:hover .steps-panel span,
body[data-contrast-mode="bw"] .layout-section .steps-item:not([open]) .steps-summary:hover .steps-title,
body[data-contrast-mode="bw"] .layout-section .steps-item:not([open]) .steps-summary:hover .steps-badge,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-item:not([open]) .steps-summary:hover .steps-panel,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-item:not([open]) .steps-summary:hover .steps-panel span,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-item:not([open]) .steps-summary:hover .steps-title,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .steps-item:not([open]) .steps-summary:hover .steps-badge,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-item:not([open]) .steps-summary:hover .steps-panel,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-item:not([open]) .steps-summary:hover .steps-panel span,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-item:not([open]) .steps-summary:hover .steps-title,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"][style*="--bw-section-select-text"] .steps-item:not([open]) .steps-summary:hover .steps-badge,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-item:not([open]) .steps-summary:hover .steps-panel,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-item:not([open]) .steps-summary:hover .steps-panel span,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-item:not([open]) .steps-summary:hover .steps-title,
body[data-contrast-mode="bw"] .steps-block[data-has-bw-steps-text="1"] .steps-item:not([open]) .steps-summary:hover .steps-badge {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Bloc code — couleurs saison (variables sur .code-block-wrap, pas de style inline sur pre) */
body:not([data-contrast-mode="bw"]) .code-block-wrap[data-has-code-season-bg="1"] pre {
  background: var(--code-bg) !important;
  border-color: var(--code-bg) !important;
}
body:not([data-contrast-mode="bw"]) .code-block-wrap[data-has-code-season-text="1"] pre,
body:not([data-contrast-mode="bw"]) .code-block-wrap[data-has-code-season-text="1"] pre code {
  color: var(--code-text) !important;
}
/* Bloc code — mode N&B : fond noir / texte blanc (priorité sur la couleur de section) */
body[data-contrast-mode="bw"] .code-block-wrap pre {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body[data-contrast-mode="bw"] .code-block-wrap pre code,
body[data-contrast-mode="bw"] .code-block-wrap pre code *,
body[data-contrast-mode="bw"] .layout-section .code-block-wrap pre,
body[data-contrast-mode="bw"] .layout-section .code-block-wrap pre code,
body[data-contrast-mode="bw"] .layout-section .code-block-wrap pre * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Surcharges optionnelles via Panel (onglet Couleurs du bloc Code) */
body[data-contrast-mode="bw"] .code-block-wrap[data-has-code-bw-bg="1"] pre {
  background: var(--code-bw-bg) !important;
  border-color: var(--code-bw-bg) !important;
}
body[data-contrast-mode="bw"] .code-block-wrap[data-has-code-bw-text="1"] pre,
body[data-contrast-mode="bw"] .code-block-wrap[data-has-code-bw-text="1"] pre code,
body[data-contrast-mode="bw"] .code-block-wrap[data-has-code-bw-text="1"] pre * {
  color: var(--code-bw-text) !important;
  -webkit-text-fill-color: var(--code-bw-text) !important;
}

/* =============================================================================
   MODE N&B - GARDE-FOUS PROD (priorit\u00e9 main.css)
   -----------------------------------------------------------------------------
   Ces r\u00e8gles s'assurent que le mode N&B s'applique uniform\u00e9ment quel que soit
   l'ordre de chargement des CSS. Elles couvrent :
     - scrollbar du navigateur
     - fond de page (forc\u00e9 blanc par d\u00e9faut, override possible via --bw-page-bg)
     - \u00e9v\u00e9nements "\u00e0 la une" et "archiv\u00e9s" (events-list)
   ============================================================================= */

/* -- Scrollbar en N&B (Firefox + WebKit) -- */
body[data-contrast-mode="bw"] {
  scrollbar-color: #000000 #ffffff !important;
  scrollbar-width: auto !important;
}
body[data-contrast-mode="bw"] ::-webkit-scrollbar {
  background-color: #ffffff !important;
}
body[data-contrast-mode="bw"] ::-webkit-scrollbar-thumb {
  background-color: #000000 !important;
  border: 2px solid #ffffff !important;
}
body[data-contrast-mode="bw"] ::-webkit-scrollbar-track,
body[data-contrast-mode="bw"] ::-webkit-scrollbar-corner {
  background-color: #ffffff !important;
}

/* -- Fond de page forc\u00e9 en N&B --
   Par d\u00e9faut, on force le fond blanc pour toutes les pages en N&B.
   Si le Panel fournit une valeur via --bw-page-bg, elle prend le dessus. */
body[data-contrast-mode="bw"] {
  --page-bg: var(--bw-page-bg, #ffffff) !important;
  --bg-body: var(--bw-page-bg, #ffffff) !important;
  background: var(--bw-page-bg, #ffffff) !important;
}

/* Bloc code N&B — garde-fou (texte blanc sur fond noir, même avec layout saisonnier) */
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .code-block-wrap pre,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .code-block-wrap pre {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .code-block-wrap pre code,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .code-block-wrap pre code {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* =============================================================================
   MODE N&B - \u00c9v\u00e9nements "\u00e0 la une" (featured)
   -----------------------------------------------------------------------------
   Les variables --bw-evt-* sont pos\u00e9es en inline sur .featured-event-item via
   event-item.twig. Par d\u00e9faut (hors N&B), les styles inline utilisent --evt-*.
   En N&B, on re-route vers --bw-evt-* avec fallback noir/blanc.
   ============================================================================= */
body[data-contrast-mode="bw"] .featured-event-item .featured-event-shape {
  background: var(--bw-evt-shape-bg, #000000) !important;
  color: var(--bw-evt-text, #ffffff) !important;
}
body[data-contrast-mode="bw"] .featured-event-item .featured-event-text {
  color: var(--bw-evt-text, #ffffff) !important;
}

/* Astroïde « à la une » : lien inscription (inline --evt-text = couleur saison) */
body[data-contrast-mode="bw"] .featured-event-item .astroide-featured-registration-link,
body[data-contrast-mode="bw"] .astroide-featured-event-item .astroide-featured-registration-link,
body[data-contrast-mode="bw"] .astroide-featured-event-item .astroide-featured-cell a:not(.button) {
  color: var(--bw-evt-text, #ffffff) !important;
  -webkit-text-fill-color: var(--bw-evt-text, #ffffff) !important;
}

body[data-contrast-mode="bw"] .featured-event-item .astroide-featured-registration-link:hover,
body[data-contrast-mode="bw"] .featured-event-item .astroide-featured-registration-link:focus-visible,
body[data-contrast-mode="bw"] .astroide-featured-event-item .astroide-featured-registration-link:hover,
body[data-contrast-mode="bw"] .astroide-featured-event-item .astroide-featured-registration-link:focus-visible {
  color: var(--bw-evt-text, #ffffff) !important;
}

body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn {
  background: var(--bw-evt-btn-bg, #ffffff) !important;
  color: var(--bw-evt-btn-text, #000000) !important;
  border-color: var(--bw-evt-btn-bg, #ffffff) !important;
  outline-color: var(--bw-evt-btn-bg, #ffffff) !important;
}
body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn:hover,
body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn:focus-visible,
body[data-contrast-mode="bw"] .featured-events-section .featured-event-item .featured-event-btn--link:hover,
body[data-contrast-mode="bw"] .featured-events-section .featured-event-item .featured-event-btn--link:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  -webkit-text-fill-color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  border: 1px solid var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  border-color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  outline: none !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] .featured-event-item:not(:hover):not(:focus-visible) .featured-event-btn-icon,
body[data-contrast-mode="bw"] .featured-event-item:not(:hover):not(:focus-visible) .featured-event-btn span {
  color: var(--bw-evt-btn-text, #000000) !important;
}

body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn:hover .featured-event-btn-icon,
body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn:hover .featured-event-btn__label,
body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn:hover span,
body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn:focus-visible .featured-event-btn-icon,
body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn:focus-visible .featured-event-btn__label,
body[data-contrast-mode="bw"] .featured-event-item .featured-event-btn:focus-visible span {
  color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  -webkit-text-fill-color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
}

body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf .action-download__label.featured-event-btn__label {
  background-color: var(--bw-evt-btn-bg, var(--bw-featured-events-btn-bg, #ffffff)) !important;
  background: var(--bw-evt-btn-bg, var(--bw-featured-events-btn-bg, #ffffff)) !important;
  color: var(--bw-evt-btn-text, var(--bw-featured-events-btn-text, #000000)) !important;
  -webkit-text-fill-color: var(--bw-evt-btn-text, var(--bw-featured-events-btn-text, #000000)) !important;
  border-color: var(--bw-evt-btn-bg, var(--bw-featured-events-btn-bg, #ffffff)) !important;
  outline-color: var(--bw-evt-btn-bg, var(--bw-featured-events-btn-bg, #ffffff)) !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf .action-download-icon {
  border-color: var(--bw-evt-btn-bg, var(--bw-featured-events-btn-bg, #ffffff)) !important;
  background-color: var(--bw-evt-btn-bg, var(--bw-featured-events-btn-bg, #ffffff)) !important;
  color: var(--bw-evt-btn-text, var(--bw-featured-events-btn-text, #000000)) !important;
}

/* =============================================================================
   Événements archivés — layout Kirby (.archived-events-section / .event-item)
   - Hauteur minimale (pastille) ; le bouton grandit si le texte revient à la ligne.
   - Pastilles PDF : circulaires (border-radius: 50%), taille fixe.
   - Libellés / boutons seuls : alternance rond ↔ carré ; au survol/focus,
     inversion (transition border-radius 0.3s ease).
   ============================================================================= */
.archived-events-section .archived-event-item {
  --archived-btn-height: var(--ressource-action-height, 60px);
}

/* Même filet qu’entre deux lignes : bordure haute sur le premier item (y compris si un titre précède dans la section). */
.archived-events-section > .archived-event-item:first-of-type {
  border-top: 1px solid var(--arch-evt-text);
}

body[data-contrast-mode="bw"] .archived-events-section > .archived-event-item:first-of-type {
  border-top: 1px solid var(--bw-arch-evt-text, #000000) !important;
}

/* Ligne d’en-tête : 1er élément de chaque colonne sur la même bande ; le reste s’empile en dessous */
.archived-events-section .archived-event-item .kirby-inner-grid {
  align-items: start;
}

.archived-events-section .archived-event-item .layout-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  min-width: 0;
}

.archived-events-section .archived-event-item .layout-column > .space-y-10 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.archived-events-section .archived-event-item aside.block-type-actions {
  flex-direction: column;
  align-items: stretch;
}

.archived-events-section .archived-event-item .archived-event-text {
  font-size: var(--text-action) !important;
  line-height: var(--text-action--line-height, 1.25) !important;
  /* Même bande verticale que .action-download__label / boutons simples */
  min-height: var(--archived-btn-height);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.archived-events-section .archived-event-item .layout-column:nth-child(3) .archived-event-text {
  justify-content: flex-end;
}

.archived-events-section .archived-event-item .archived-event-text p {
  margin: 0;
  width: 100%;
  padding-block: clamp(0.35rem, 1.2vw, 0.65rem);
  box-sizing: border-box;
}

.archived-events-section .archived-event-item .layout-column:nth-child(3) .archived-event-text p {
  text-align: right;
}

/* Colonne actions : empiler verticalement (pas de rangée horizontale) */
.archived-events-section .archived-event-item .archived-event-actions-stack {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 0.5rem;
}

.archived-events-section .archived-event-item .archived-event-actions-stack .action-item {
  width: 100%;
  max-width: 100%;
}

.archived-events-section .archived-event-item aside.block-type-actions .action-item {
  display: flex;
  align-items: flex-start;
}

/* Boutons archives — au repos : bordure 1px (couleur = fond, invisible) ; au survol : bloc harmonisé ci-dessous */
.archived-events-section .archived-event-item a.archived-event-btn:not(.action-download.download-action-button) {
  min-height: var(--archived-btn-height);
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  --vpadding: 0;
  padding-block: clamp(0.35rem, 1.2vw, 0.65rem);
  padding-inline: clamp(0.65rem, 2vw, 1.35rem);
  line-height: 1.25;
  transition: border-radius 0.3s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  min-width: 0;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: break-word;
  border: 1px solid var(--arch-evt-btn-bg, currentColor) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
  --border-width: 1px !important;
}

.archived-events-section .archived-event-item a.archived-event-btn:not(.action-download.download-action-button) > * {
  min-width: 0;
}

/* Archives — PDF fullwidth (comme page Réseau / rapport d’activité) */
.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .actions-wrapper,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .actions-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* Archives — PDF : pleine ligne (2+ mots) ou demi-ligne (1 mot) + pastille au survol */
.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item.archived-event-pdf--full:has(> a.archived-event-btn.action-download.download-action-button),
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item.archived-event-pdf--full:has(> a.archived-event-btn.action-download.download-action-button) {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item.archived-event-pdf--compact:has(> a.archived-event-btn.action-download.download-action-button),
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item.archived-event-pdf--compact:has(> a.archived-event-btn.action-download.download-action-button) {
  flex: 0 0 calc((100% - 0.5rem) / 2) !important;
  width: calc((100% - 0.5rem) / 2) !important;
  max-width: calc((100% - 0.5rem) / 2) !important;
  min-width: 0 !important;
}

/* Empilement vertical : PDF compacts en pleine largeur sous le 1er bouton */
.archived-events-section
  .archived-event-item
  .archived-event-actions-stack
  .action-item.archived-event-pdf--compact:has(> a.archived-event-btn.action-download.download-action-button) {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* « Synthèse » : libellé toujours sur une ligne quand la pastille réduit la zone texte */
.archived-events-section
  .archived-event-item
  .action-item.archived-event-pdf--synthese
  > a.archived-event-btn.action-download.download-action-button {
  min-width: calc(var(--archived-btn-height) + 7.75rem);
}

.archived-events-section
  .archived-event-item
  .action-item.archived-event-pdf--synthese
  .action-download__label {
  white-space: nowrap !important;
  text-wrap: nowrap;
}

.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 0 !important;
  column-gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: var(--archived-btn-height);
  height: auto;
  max-height: none;
  align-items: stretch !important;
  grid-auto-rows: auto;
  transition: grid-template-columns 0.3s ease;
}

.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button:hover,
.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-visible,
.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-within,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button:hover,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-visible,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-within {
  grid-template-columns: minmax(0, 1fr) var(--archived-btn-height) !important;
}

.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button
  .action-download__label,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button
  .action-download__label {
  grid-column: 1 !important;
  width: 100% !important;
}

.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button
  .action-download-icon,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button
  .action-download-icon {
  opacity: 0 !important;
  overflow: hidden !important;
  justify-self: end;
  transition:
    opacity 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button:hover
  .action-download-icon,
.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-visible
  .action-download-icon,
.archived-events-section
  .archived-event-item
  aside.block-type-actions.is-fullwidth
  .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-within
  .action-download-icon,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button:hover
  .action-download-icon,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-visible
  .action-download-icon,
.archived-events-section
  .archived-event-item
  aside.block-type-actions[data-layout-actions-fullwidth='1']
  .action-item
  > a.archived-event-btn.action-download.download-action-button:focus-within
  .action-download-icon {
  opacity: 1 !important;
}

/* Grille PDF hors fullwidth : pastille toujours réservée */
.archived-events-section
  .archived-event-item
  aside.block-type-actions:not(.is-fullwidth):not([data-layout-actions-fullwidth='1'])
  .action-item
  > a.archived-event-btn.action-download.download-action-button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--archived-btn-height) !important;
  grid-auto-rows: auto;
  min-height: var(--archived-btn-height);
  height: auto;
  max-height: none;
  align-items: stretch !important;
}

.archived-events-section
  .archived-event-item
  a.archived-event-btn.action-download
  .action-download__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  align-self: stretch;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-inline: clamp(0.65rem, 2vw, 1.35rem);
  padding-block: clamp(0.35rem, 1.2vw, 0.65rem);
  box-sizing: border-box;
  border: 1px solid var(--arch-evt-btn-bg, currentColor) !important;
  border-style: solid !important;
  outline: none !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
}

/* Pastille : taille fixe (coins → règles Inverse Shape PDF ci-dessus) */
.archived-events-section .archived-event-item .action-download-icon {
  width: var(--archived-btn-height);
  min-width: var(--archived-btn-height);
  height: var(--archived-btn-height) !important;
  min-height: var(--archived-btn-height);
  max-height: var(--archived-btn-height);
  align-self: center;
  box-sizing: border-box;
  border: 1px solid var(--arch-evt-btn-bg, currentColor);
  border-style: solid;
}

/* Archives — survol harmonisé : bordure 1px contrastée (--arch-evt-btn-hover-text, pas le fond) */
.archived-events-section .archived-event-item a.archived-event-btn:not(.action-download):is(:hover, :focus-visible),
.archived-events-section .archived-event-item a.archived-event-btn.action-download:is(:hover, :focus-visible, :focus-within) .action-download__label,
.archived-events-section .archived-event-item a.archived-event-btn.action-download:is(:hover, :focus-visible, :focus-within) .action-download-icon,
.archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:is(:hover, :focus-visible, :focus-within) .action-download__label,
.archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:is(:hover, :focus-visible, :focus-within) .action-download-icon {
  background-color: var(--arch-evt-btn-hover-bg, var(--arch-evt-btn-text, #ffffff)) !important;
  background: var(--arch-evt-btn-hover-bg, var(--arch-evt-btn-text, #ffffff)) !important;
  color: var(--arch-evt-btn-hover-text, var(--arch-evt-btn-bg, #000000)) !important;
  -webkit-text-fill-color: var(--arch-evt-btn-hover-text, var(--arch-evt-btn-bg, #000000)) !important;
  border: 1px solid var(--arch-evt-btn-hover-border, var(--arch-evt-btn-hover-text, var(--arch-evt-btn-bg, #000000))) !important;
  border-color: var(--arch-evt-btn-hover-border, var(--arch-evt-btn-hover-text, var(--arch-evt-btn-bg, #000000))) !important;
  border-width: 1px !important;
  border-style: solid !important;
  outline: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
  --border-width: 1px !important;
}

/* Annule .button:hover { border-color: transparent } (bundle) dans les archives */
.archived-events-section .archived-event-item .button:is(:hover, :focus-visible) {
  border-style: solid !important;
}

/* =============================================================================
   MODE N&B - \u00c9v\u00e9nements archiv\u00e9s
   -----------------------------------------------------------------------------
   - .archived-events-section : container parent (fond de la section)
   - .archived-event-item     : item individuel (fond/texte/bordure)
   - .archived-event-btn      : boutons de l'item
   ============================================================================= */
body[data-contrast-mode="bw"] .archived-events-section {
  background: var(--bw-arch-section-bg, #ffffff) !important;
}
body[data-contrast-mode="bw"] .archived-event-item {
  background: var(--bw-arch-evt-bg, #ffffff) !important;
  color: var(--bw-arch-evt-text, #000000) !important;
  border-bottom-color: var(--bw-arch-evt-text, #000000) !important;
}
body[data-contrast-mode="bw"] .archived-event-item .archived-event-text,
body[data-contrast-mode="bw"] .archived-event-item .archived-event-text * {
  color: var(--bw-arch-evt-text, #000000) !important;
}
body[data-contrast-mode="bw"] .archived-event-item .archived-event-btn {
  background: var(--bw-arch-evt-btn-bg, #000000) !important;
  color: var(--bw-arch-evt-btn-text, #ffffff) !important;
  border-color: var(--bw-arch-evt-btn-bg, #000000) !important;
  outline-color: var(--bw-arch-evt-btn-bg, #000000) !important;
}
/* Archives — survol N&B (autres pages que rencontre régionale) */
body[data-contrast-mode="bw"] .archived-events-section:not(.events-archived-pdf-zone) .archived-event-item a.archived-event-btn:not(.action-download):is(:hover, :focus-visible),
body[data-contrast-mode="bw"] .archived-events-section:not(.events-archived-pdf-zone) .archived-event-item a.archived-event-btn.action-download:is(:hover, :focus-visible, :focus-within) .action-download__label,
body[data-contrast-mode="bw"] .archived-events-section:not(.events-archived-pdf-zone) .archived-event-item a.archived-event-btn.action-download:is(:hover, :focus-visible, :focus-within) .action-download-icon {
  background: var(--bw-arch-evt-btn-hover-bg, var(--bw-arch-evt-btn-text, #ffffff)) !important;
  background-color: var(--bw-arch-evt-btn-hover-bg, var(--bw-arch-evt-btn-text, #ffffff)) !important;
  color: var(--bw-arch-evt-btn-hover-text, var(--bw-arch-evt-btn-bg, #000000)) !important;
  -webkit-text-fill-color: var(--bw-arch-evt-btn-hover-text, var(--bw-arch-evt-btn-bg, #000000)) !important;
  border: 1px solid var(--bw-arch-evt-btn-hover-border, var(--bw-arch-evt-btn-hover-text, var(--bw-arch-evt-btn-bg, #000000))) !important;
  border-color: var(--bw-arch-evt-btn-hover-border, var(--bw-arch-evt-btn-hover-text, var(--bw-arch-evt-btn-bg, #000000))) !important;
  border-width: 1px !important;
  border-style: solid !important;
  outline: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
  --border-width: 1px !important;
}

/* Rencontre régionale — survol N&B harmonisé (lien + PDF) */
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.archived-event-btn:not(.action-download):is(:hover, :focus-visible),
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.archived-event-btn.action-download:is(:hover, :focus-visible, :focus-within) .action-download__label,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:is(:hover, :focus-visible, :focus-within) .action-download__label,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.archived-event-btn.action-download:is(:hover, :focus-visible, :focus-within) .action-download-icon,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:is(:hover, :focus-visible, :focus-within) .action-download-icon {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
  border-width: 1px !important;
  border-style: solid !important;
  outline: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
  --border-width: 1px !important;
  opacity: 1 !important;
}

/* Concertation — événements à venir : survol N&B fond blanc / texte noir / contour noir */
body[data-contrast-mode="bw"] .concertation-events-section:not(.concertation-events-section--past) a.concertation-events-text-link.button:is(:hover, :focus-visible),
body[data-contrast-mode="bw"] .layout-section.concertation-events-section:not(.concertation-events-section--past) a.concertation-events-text-link.button:is(:hover, :focus-visible),
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"].concertation-events-section:not(.concertation-events-section--past) a.concertation-events-text-link.button:is(:hover, :focus-visible),
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"].concertation-events-section:not(.concertation-events-section--past) a.concertation-events-text-link.button:is(:hover, :focus-visible) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
  border-width: 1px !important;
  border-style: solid !important;
  outline: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
  --button-ring-color: #000000 !important;
  --border-width: 1px !important;
}

body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:hover .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:focus-visible .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:focus-within .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:hover .action-download-icon svg :is(path, line),
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:focus-visible .action-download-icon svg :is(path, line),
body[data-contrast-mode="bw"] .archived-events-section.events-archived-pdf-zone .archived-event-item a.action-download:focus-within .action-download-icon svg :is(path, line) {
  color: #000000 !important;
  fill: #000000 !important;
  stroke: #000000 !important;
}

body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:hover .action-download__label,
body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:focus-visible .action-download__label,
body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:focus-within .action-download__label {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  -webkit-text-fill-color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  border: 1px solid var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  border-color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
}

body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:hover .action-download-icon,
body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:focus-within .action-download-icon {
  border-color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  background-color: transparent !important;
  background: transparent !important;
  color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  -webkit-text-fill-color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
}

body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:is(:hover, :focus-visible, :focus-within) .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:is(:hover, :focus-visible, :focus-within) .action-download-icon svg,
body[data-contrast-mode="bw"] .featured-events-section .featured-event-item a.action-download.event-featured-pdf:is(:hover, :focus-visible, :focus-within) .action-download-icon svg :is(path, line, polygon, rect, circle) {
  color: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  fill: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
  stroke: var(--bw-evt-btn-hover-border, var(--bw-featured-events-btn-hover-border, #000000)) !important;
}

/* =============================================================================
   MODE N&B - Pages Ressources & Annonces (automatique, sans r\u00e9glage Panel)
   -----------------------------------------------------------------------------
   Sur ces deux pages, on force un rendu N&B propre en surchargeant toutes les
   variables CSS utilis\u00e9es par les templates. Aucune couleur saisie dans le
   Panel n'est prise en compte en mode N&B (contraste AA/AAA garanti).
   ----------------------------------------------------------------------------- */
body[data-contrast-mode="bw"] .ressources-page-custom,
body[data-contrast-mode="bw"] .annonces-page-custom {
  /* Zone de contenu = fond blanc */
  --ressources-content-bg: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;

  /* Barre de recherche : fond noir, texte blanc */
  --ressources-search-bg: #000000 !important;
  --ressources-search-text: #ffffff !important;

  /* Cat\u00e9gories (formes) : fond noir, texte blanc */
  --ressources-category-bg: #000000 !important;
  --ressources-category-text: #ffffff !important;

  /* Titre de la vue ressource/annonce ouverte : texte noir */
  --ressources-theme-title-text: #000000 !important;

  /* Filtres (dropdowns) : fond noir, texte blanc */
  --ressources-theme-filters-bg: #000000 !important;
  --ressources-theme-filters-text: #ffffff !important;

  /* Corps (accordion plus\u00a0: texte par d\u00e9faut) : noir sur blanc */
  --ressources-theme-text: #000000 !important;

  /* Boutons : fond noir / texte blanc (inversion au hover) */
  --ressources-theme-button-bg: #000000 !important;
  --ressources-theme-button-text: #ffffff !important;
  --ressources-theme-button-hover-bg: #ffffff !important;
  --ressources-theme-button-hover-text: #000000 !important;

  /* Bordures et lignes : noir */
  --ressources-theme-lines: #000000 !important;

  /* Fallback boutons ressource (utilis\u00e9s via --ressource-btn-*) */
  --ressource-btn-bg: #ffffff !important;
  --ressource-btn-text: #000000 !important;
  --ressource-btn-hover-bg: #000000 !important;
  --ressource-btn-hover-text: #ffffff !important;
}

/* Filtres (listes déroulantes) : survol = fond blanc / texte noir */
body[data-contrast-mode="bw"] .annonces-page-custom [data-annonces-filters] .ressources-dropdown-list li a:hover,
body[data-contrast-mode="bw"] .annonces-page-custom [data-annonces-filters] .ressources-dropdown-list li button:hover,
body[data-contrast-mode="bw"] .annonces-page-custom [data-annonces-filters] .ressources-dropdown[open] .ressources-dropdown-list li a:hover,
body[data-contrast-mode="bw"] .annonces-page-custom [data-annonces-filters] .ressources-dropdown[open] .ressources-dropdown-list li button:hover,
body[data-contrast-mode="bw"] .ressources-page-custom [data-theme-filters] .ressources-dropdown-list li a:hover,
body[data-contrast-mode="bw"] .ressources-page-custom [data-theme-filters] .ressources-dropdown-list li button:hover,
body[data-contrast-mode="bw"] .ressources-page-custom [data-theme-filters] .ressources-dropdown[open] .ressources-dropdown-list li a:hover,
body[data-contrast-mode="bw"] .ressources-page-custom [data-theme-filters] .ressources-dropdown[open] .ressources-dropdown-list li button:hover {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* \u00c9tat accordion ouvert : inversion (fond noir / texte blanc).
   Le template utilise --page-bg comme couleur de texte quand l'item est ouvert,
   et on force --page-bg \u00e0 blanc en N&B au niveau body, donc \u00e7a fonctionne
   naturellement. On r\u00e9affirme ici pour robustesse. */
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open],
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] {
  background: #000000 !important;
  color: #ffffff !important;

  /* Flip des variables boutons dans l'accordion ouvert : fond blanc + texte
     noir (sur fond noir de l'accordion), puis inversion au hover. */
  --ressource-btn-bg: #ffffff !important;
  --ressource-btn-text: #000000 !important;
  --ressource-btn-hover-bg: #000000 !important;
  --ressource-btn-hover-text: #ffffff !important;
  --ressources-theme-button-bg: #ffffff !important;
  --ressources-theme-button-text: #000000 !important;
  --ressources-theme-button-hover-bg: #000000 !important;
  --ressources-theme-button-hover-text: #ffffff !important;

  /* Lignes/bordures : blanc (visible sur noir) */
  --ressources-theme-lines: #ffffff !important;

  /* --page-bg est utilise par le template comme couleur de texte de l'accordion
     ouvert (qui inverse) : on le force a noir pour garder les textes des
     boutons visibles (texte noir sur fond blanc des boutons). */
  --page-bg: #000000 !important;
  --ressources-theme-text: #ffffff !important;
}
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] *:not(.ressource-action-button):not(.ressources-accordion-pdf):not(.action-download__label):not(.action-download-icon),
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] *:not(.ressource-action-button):not(.ressources-accordion-pdf):not(.action-download__label):not(.action-download-icon) {
  color: #ffffff !important;
  border-color: #ffffff !important;
}
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-plus,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-plus {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Boutons d'action (liens + telechargement PDF) dans l'accordion ouvert :
   fond blanc, texte noir, bordure blanche. Selecteurs tres specifiques pour
   surclasser les regles inline du template (ressources.twig / annonces.twig). */
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-button,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-button,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-button--download,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-button--download,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-links .ressource-action-button,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-links .ressource-action-button,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-files .ressource-action-button,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-files .ressource-action-button,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-files .ressource-action-button--download,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-files .ressource-action-button--download {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
  border-color: #ffffff !important;
  outline-color: #ffffff !important;
  text-decoration-color: #000000 !important;
}

/* Contenu interieur des boutons (span, svg, strong, etc.) : texte noir */
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-button *,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-button *,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-button--download *,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-button--download * {
  color: #000000 !important;
  border-color: #000000 !important;
  fill: #000000 !important;
}

/* Hover : inversion (fond noir, texte blanc, bordure blanche) */
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-button:hover,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-button:hover,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-button--download:hover,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-button--download:hover,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-links .ressource-action-button:hover,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-links .ressource-action-button:hover,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-files .ressource-action-button:hover,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-files .ressource-action-button:hover,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-accordion-files .ressource-action-button--download:hover,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-accordion-files .ressource-action-button--download:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-color: #ffffff !important;
  outline-color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-button:hover *,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-button:hover *,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-button--download:hover *,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-button--download:hover * {
  color: #ffffff !important;
  border-color: #ffffff !important;
  fill: #ffffff !important;
}

/* Icone de telechargement (carre avec fleche) dans l'accordion ouvert :
   bordure et fleche blanche, transparente, sur fond noir. */
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .ressource-action-download-icon,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .ressource-action-download-icon,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] .action-download-icon,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] .action-download-icon {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background: transparent !important;
}

/* Même apparence PDF au survol en N&B (accordion ouvert) : fond blanc, bord et picto noirs. */
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:hover .action-download__label,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:hover .action-download__label,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-visible .action-download__label,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-visible .action-download__label,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-within .action-download__label,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-within .action-download__label {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
  outline-color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
  --button-inset-ring: 0 !important;
  --border-width: 1px !important;
}

body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:hover .action-download-icon,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:hover .action-download-icon,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-within .action-download-icon,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-within .action-download-icon {
  opacity: 1 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
}

body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:hover .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:hover .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-visible .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-visible .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-within .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-within .action-download-icon .ressource-action-download-icon-svg {
  color: #000000 !important;
}

body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:hover svg :is(path, line),
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:hover svg :is(path, line),
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-visible svg :is(path, line),
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-visible svg :is(path, line),
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-within svg :is(path, line),
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressources-accordion-pdf:focus-within svg :is(path, line) {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* Liens <a> bruts sans classe .ressource-action-button (ex: underline dans le
   contenu): texte blanc sur fond noir de l'accordion ouvert. */
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a:not(.ressource-action-button):not(.ressource-action-button--download),
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a:not(.ressource-action-button):not(.ressource-action-button--download) {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}

/* Placeholder de la barre de recherche en N&B */
body[data-contrast-mode="bw"] .ressources-page-custom .ressources-search-input::placeholder,
body[data-contrast-mode="bw"] .annonces-page-custom .ressources-search-input::placeholder {
  color: #ffffff !important;
  opacity: 0.7 !important;
}

/* =============================================================================
   MODE N&B - Icone .nav-active-page__icon (SVG a 5 rectangles)
   -----------------------------------------------------------------------------
   Cet <a> a un attribut style="color:#FFFFFF !important" en inline, et ses
   <rect> enfants ont un attribut fill="#FFFFFF" hardcode dans le SVG.
   - L'attribut fill="..." d'un <rect> est une presentation attribute SVG
     (priorite INFERIEURE au CSS) : une regle CSS "fill: #000000 !important"
     le surclasse sans probleme.
   - L'attribut style="color:..." inline ne gene pas ici car les rects
     utilisent fill="..." et pas fill="currentColor".
   On force donc les 5 <rect> en noir en N&B pour garantir la visibilite.
   ============================================================================= */
body[data-contrast-mode="bw"] .nav-active-page__icon svg rect,
body[data-contrast-mode="bw"] .nav-active-page__icon svg .nav-icon-rect,
body[data-contrast-mode="bw"] .nav-active-page__icon svg .nav-icon-rect--corner,
body[data-contrast-mode="bw"] a.nav-active-page__icon svg rect,
body[data-contrast-mode="bw"] a.nav-active-page__icon svg .nav-icon-rect {
  fill: #000000 !important;
}

/* On reinitialise aussi le color de l'<a> et du <svg> pour que les rects qui
   utiliseraient currentColor (future-proof) soient aussi noirs. */
body[data-contrast-mode="bw"] .nav-active-page__icon,
body[data-contrast-mode="bw"] a.nav-active-page__icon,
body[data-contrast-mode="bw"] .nav-active-page__icon svg {
  color: #000000 !important;
}

/* =============================================================================
   MODE N&B - Sections layout (garde-fou universel)
   -----------------------------------------------------------------------------
   Force toutes les sections avec couleurs seasonal a rendre en BLANC/NOIR en
   N&B, meme si aucun token --bw-section-* n'est saisi au niveau du Panel.
   Corrige notamment la page "à propos du contrat de filière" dont certaines
   sections gardaient leur couleur seasonal en N&B.
   Priorite : si --bw-section-bg est defini (tokens bw_ du Panel), il est
   utilise. Sinon fallback explicite #ffffff / #000000.
   ============================================================================= */
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"],
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"],
body[data-contrast-mode="bw"] section.layout-section[data-has-seasonal="1"],
body[data-contrast-mode="bw"] section.layout-section[data-has-bw-layout="1"] {
  background-color: var(--bw-section-bg, #ffffff) !important;
  background: var(--bw-section-bg, #ffffff) !important;
  color: var(--bw-section-text, #000000) !important;
}

/* Contenu interieur (text, headings, copy) : hereditent du color du parent,
   mais certaines regles seasonal forcent les textes via selecteurs plus
   specifiques. On applique donc le meme fallback ici. */
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] h1,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] h2,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] h3,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] h4,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] p,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .copy,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .copy *,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h1,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h2,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h3,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] h4,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] p,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .copy,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .copy * {
  color: var(--bw-section-text, #000000) !important;
}

/* Boutons a l'interieur des sections en N&B : inverses (fond noir / texte
   blanc par defaut, avec surcharge possible via --bw-section-button-*). */
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions .button,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions button,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions .button,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions button {
  --button-ring-color: var(--bw-section-button-bg, #000000) !important;
  background-color: var(--bw-section-button-bg, #000000) !important;
  background: var(--bw-section-button-bg, #000000) !important;
  color: var(--bw-section-button-text, #ffffff) !important;
  -webkit-text-fill-color: var(--bw-section-button-text, #ffffff) !important;
  border-color: var(--bw-section-button-bg, #000000) !important;
  outline-color: var(--bw-section-button-bg, #000000) !important;
}

/* PDF layout (ex. rapports Réseau) : le libellé hérite des tokens N&B du panel
   (--bw-section-button-*), y compris -webkit-text-fill-color (sinon la règle
   saisonnière .block-type-actions .button garde le texte couleur « normale »). */
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions a.action-download.download-action-button .action-download__label {
  background-color: var(--bw-section-button-bg, var(--section-button-bg, #000000)) !important;
  background: var(--bw-section-button-bg, var(--section-button-bg, #000000)) !important;
  color: var(--bw-section-button-text, var(--section-button-text, #ffffff)) !important;
  -webkit-text-fill-color: var(--bw-section-button-text, var(--section-button-text, #ffffff)) !important;
  border-color: var(--bw-section-button-bg, var(--section-button-bg, #000000)) !important;
  outline-color: var(--bw-section-button-bg, var(--section-button-bg, #000000)) !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions .action-item > .button:hover:not(.action-download),
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions .action-item > button:hover,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions .action-item > .button:hover:not(.action-download),
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions .action-item > button:hover {
  background-color: var(--bw-section-button-text, #ffffff) !important;
  background: var(--bw-section-button-text, #ffffff) !important;
  color: var(--bw-section-button-bg, #000000) !important;
  -webkit-text-fill-color: var(--bw-section-button-bg, #000000) !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-item > .button:hover:not(.action-download),
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-item > button:hover {
  background-color: var(--bw-section-button-hover-bg) !important;
  background: var(--bw-section-button-hover-bg) !important;
  color: var(--bw-section-button-hover-text) !important;
  -webkit-text-fill-color: var(--bw-section-button-hover-text) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--bw-section-button-hover-border, var(--bw-section-button-hover-bg)) !important;
  outline: none !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:hover .action-download-icon,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:focus-within .action-download-icon {
  background-color: var(--bw-section-button-hover-bg) !important;
  background: var(--bw-section-button-hover-bg) !important;
  color: var(--bw-section-button-hover-text) !important;
  border: 1px solid var(--bw-section-button-hover-border, var(--bw-section-button-hover-bg)) !important;
  border-color: var(--bw-section-button-hover-border, var(--bw-section-button-hover-bg)) !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:hover .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:focus-visible .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:focus-within .action-download-icon .ressource-action-download-icon-svg,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:hover .action-download-icon svg :is(path, line),
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:focus-visible .action-download-icon svg :is(path, line),
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions .action-download:focus-within .action-download-icon svg :is(path, line) {
  color: var(--bw-section-button-hover-text) !important;
  fill: var(--bw-section-button-hover-text) !important;
  stroke: var(--bw-section-button-hover-text) !important;
}

/* PDF dans les blocs actions (ex. page Réseau) : pas d’inset .button:hover, bordure 1px libellé + pastille. */
.layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:hover .action-download__label,
.layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:focus-visible .action-download__label,
.layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:focus-within .action-download__label,
.layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:hover .action-download-icon,
.layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:focus-visible .action-download-icon,
.layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:focus-within .action-download-icon,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:hover .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:focus-visible .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:focus-within .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:hover .action-download-icon,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .layout-section[data-has-seasonal="1"] .block-type-actions a.action-download.download-action-button:focus-within .action-download-icon,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions a.action-download.download-action-button:hover .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions a.action-download.download-action-button:focus-visible .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions a.action-download.download-action-button:focus-within .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions a.action-download.download-action-button:hover .action-download-icon,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions a.action-download.download-action-button:focus-visible .action-download-icon,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-layout="1"] .block-type-actions a.action-download.download-action-button:focus-within .action-download-icon {
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: none !important;
  outline: none !important;
  --button-inset-ring: 0 !important;
}

body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions a.action-download.download-action-button:hover .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions a.action-download.download-action-button:focus-visible .action-download__label,
body[data-contrast-mode="bw"] .layout-section[data-has-bw-button-hover="1"] .block-type-actions a.action-download.download-action-button:focus-within .action-download__label {
  background-color: var(--bw-section-button-hover-bg) !important;
  background: var(--bw-section-button-hover-bg) !important;
  color: var(--bw-section-button-hover-text) !important;
  -webkit-text-fill-color: var(--bw-section-button-hover-text) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--bw-section-button-hover-border, var(--bw-section-button-hover-bg)) !important;
  outline-color: var(--bw-section-button-hover-border, var(--bw-section-button-hover-bg)) !important;
  box-shadow: none !important;
  outline: none !important;
  --button-inset-ring: 0 !important;
}

/* =============================================================================
   HEADER & SOUS-MENU - Responsivite ecrans larges
   -----------------------------------------------------------------------------
   Correctifs "ecrans larges" (point 1 des ajustements demandes) :

   Probleme : sur les TRES grands ecrans, les boutons du sous-menu etaient
   tronques visuellement. Cause racine : les regles en haut du fichier (vers
   les lignes 2476-2505) figent les boutons du sous-menu avec
   "height + min-height + max-height: var(--nav-item-height) !important" ET
   le CSS initial du submenu pose "white-space: nowrap". Quand le sous-menu
   reunit beaucoup de boutons avec du texte long sur un ecran large, flex
   distribue la largeur -> les boutons sont trop etroits pour leur texte
   (nowrap empeche le retour a la ligne) -> le texte est tronque /
   pixel-clippe.

   Solution : on leve le max-height, on autorise le texte a passer a la
   ligne (white-space: normal + word-break), on garde le min-height pour
   preserver le visuel en ligne courante, et on autorise le flex-wrap a
   TOUTES les largeurs (pas seulement <=1513px) pour que le sous-menu
   puisse se deployer sur 2+ lignes sans chevauchement ni troncature.
   Le JS main.js recalcule automatiquement --submenu-ext-height via
   getBoundingClientRect(), donc le fond du header (header-bg-extender)
   suit correctement la nouvelle hauteur du submenu sans changement JS.

   On ne touche PAS aux boutons PRINCIPAUX du header (.actions-wrapper
   .action-item > .button) : ils restent alignes sur --nav-item-height
   exact (hauteur fixe) pour conserver l'alignement avec le logo.
   ============================================================================= */
header .actions-wrapper .action-item > .submenu .button,
header .actions-wrapper .action-item > .submenu .button.header-nav-button,
header.header-floating .actions-wrapper .action-item > .submenu .button,
header.header-floating .actions-wrapper .action-item > .submenu .button.header-nav-button,
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu .button,
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu .button.header-nav-button {
  /* Meme hauteur de base que les boutons principaux (--nav-item-height), mais
     height: auto permet de grandir si le texte wrap sur plusieurs lignes. */
  height: auto !important;
  min-height: var(--nav-item-height) !important;
  max-height: none !important;
  flex: 1 1 clamp(7.5rem, 16vw, 14rem) !important;
  min-width: clamp(7rem, 14vw, 12rem) !important;
  max-width: 100% !important;
  /* Le texte peut maintenant passer a la ligne dans le bouton. */
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: break-word;
  overflow: visible !important;
  /* Padding interne generique pour espacer le texte des bords sur 2+ lignes. */
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  line-height: 1.15 !important;
}

/* On autorise le flex-wrap a TOUTES les largeurs (y compris les tres
   grands ecrans). Anciennement gere uniquement <=1513px. */
header .actions-wrapper .action-item > .submenu,
header.header-floating .actions-wrapper .action-item > .submenu,
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu {
  flex-wrap: wrap !important;
  row-gap: 0.45rem;
  align-content: flex-start;
  /* Le sous-menu peut maintenant grandir verticalement sans etre clippe. */
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Le header et ses ancetres directs ne doivent pas "clipper" le sous-menu
   etendu vers le bas : sous-menu est en position: fixed, donc overflow du
   header ne l'affecte pas directement. Mais on force overflow: visible au
   cas ou une regle en amont aurait pose hidden. z-index est deja tres eleve
   (9998 pour le sous-menu, 9999 pour le header). */
header,
header.header-floating,
header.header-floating.header-shrunk,
header .header-left,
header .header-right,
header .actions-wrapper,
header .actions-wrapper .action-item,
header .actions-wrapper .action-item:has(.submenu) {
  overflow: visible !important;
}

/* L'extender de fond du header (header-bg-extender) prend la couleur du
   fond du header. Il ne doit pas avoir de max-height qui le couperait. */
header .header-bg-extender {
  max-height: none !important;
  overflow: visible !important;
}

/* =============================================================================
   LARGEURS DE CONTENU - plein ecran sans marges laterales
   -----------------------------------------------------------------------------
   Les layouts (.layout-grid) etaient limites par defaut a "max-w-6xl" (72rem,
   1152px) via Tailwind et centres avec "mx-auto", ce qui creait sur grands
   ecrans deux grandes marges vides a gauche et a droite du contenu.

   Demande : les blocs doivent prendre le maximum de largeur, SANS marge
   gauche/droite. On leve donc totalement la contrainte max-w sur TOUTES
   les largeurs (pas seulement sur lg+) pour que la largeur du layout-grid
   suive celle de sa section parente (elle-meme 100% du viewport avec
   juste un petit px-4 / md:px-4 pour eviter que le texte ne touche
   physiquement les bords du viewport).

   On neutralise aussi les "max-w-copy" internes (sur .copy blocks,
   title.twig, heading.twig, etc.) : --spacing-copy est deja 'none', donc
   max-w-copy ne limitait pas en pratique, mais on s'assure qu'aucun
   reliquat d'ancien override ne contraint la largeur.

   Les sections configurees en fullwidth (sans .max-w-6xl) restent
   inchangees : elles etaient deja pleine largeur. On n'impacte pas non
   plus les headers/footers/autres composants specifiques.
   ============================================================================= */
.layout-section .layout-grid.max-w-6xl,
main .layout-grid.max-w-6xl {
  max-width: none !important;
  width: 100%;
  /* On conserve mx-auto (neutre quand max-width: none) au cas ou un
     conteneur parent aurait une largeur superieure ; cela garde un
     comportement predictible si la hierarchie change plus tard. */
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================================
   TITRES H1/H2 DE PAGE - centrage fiable plein largeur
   -----------------------------------------------------------------------------
   Les titres issus du snippet /snippets/title.twig (<header class="copy
   max-w-copy"><h1 ...>) et les blocs heading configures en "align: center"
   doivent etre centres horizontalement sur toute la largeur utile de la
   section, pas limite a une colonne 72rem.

   - text-center sur h1/h2/h3 : centre le texte dans le conteneur.
   - .copy.max-w-copy : neutralise la max-width (affichage 100%) et se
     centre lui-meme avec mx-auto (effet visible si le parent est plus
     large que le contenu texte).
   - balance : le texte centre se distribue proprement sur plusieurs
     lignes (Chrome/Safari/Firefox modernes supportent text-wrap: balance).
   ============================================================================= */
.copy.max-w-copy {
  max-width: none !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Titres de page rendus via title.twig : centres par defaut sur toutes
   les largeurs d'ecran (le h1 est directement enfant de .copy). */
header.copy.max-w-copy > h1,
header.copy.max-w-copy > h2,
header.copy.max-w-copy > h3 {
  text-align: center;
  text-wrap: balance;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}

/* =============================================================================
   TOGGLE CONTRASTE (Couleur / Noir & Blanc) - style "referentiel"
   -----------------------------------------------------------------------------
   Le toggle est un petit CARRE au coin arrondi identique au bouton Referentiel
   (meme taille, meme border-radius, memes tokens de couleur). A l'interieur,
   un petit rond (.contrast-toggle__thumb) glisse verticalement :
     - en haut : mode Couleur
     - en bas  : mode N&B
     Le rond utilise la meme couleur que la bordure du referentiel (--referential-border).

   Le conteneur suit EXACTEMENT les tokens du referentiel :
     --referential-bg / --referential-border / --referential-text en mode
     couleur, et --bw-referential-* en mode N&B du site. De cette maniere,
     visuellement, le toggle place juste apres le bouton Referentiel forme
     un duo coherent (meme forme, memes couleurs saisonnieres).

   Le JS pose data-contrast-mode="normal" | "bw" sur .contrast-toggle-group,
   et le CSS anime la position + la couleur du rond via cet attribut.
   Les deux .contrast-toggle sont des zones de clic transparentes
   superposees au thumb.
   ============================================================================= */
.contrast-toggle-group {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* Hauteur = boutons du header ; largeur etroite en pilule (~42%). */
  height: var(--nav-item-height) !important;
  min-height: var(--nav-item-height) !important;
  max-height: var(--nav-item-height) !important;
  width: calc(var(--nav-item-height) * 0.42);
  min-width: calc(var(--nav-item-height) * 0.42);
  max-width: calc(var(--nav-item-height) * 0.42);
  box-sizing: border-box;

  /* Meme bordure que le referentiel (Panel : Référentiel — bordure). */
  background: var(--referential-bg, var(--color-background, #ffffff));
  border: 2px solid var(--referential-border, var(--color-text, #000000));
  outline: none;
  /* Pilule etroite : border-radius arrondi complet. */
  border-radius: 9999px;

  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Les deux demi-boutons : 50% de hauteur, transparents, zones de clic
   au-dessus du thumb (z-index 2) pour capter clics et focus. */
.contrast-toggle-group > .contrast-toggle {
  flex: 1 1 0;
  height: 50%;
  min-height: 0 !important;
  max-height: 50% !important;
  width: 100%;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  font-size: inherit;
  line-height: 1;
}

/* Petit rond qui glisse entre le haut et le bas a l'interieur de la pilule.
   --thumb-size : ~22% de la hauteur (petit point discret adapte a la pilule etroite).
   --thumb-pad  : marge interieure haut/bas. */
.contrast-toggle-group > .contrast-toggle__thumb {
  --thumb-pad: calc(var(--nav-item-height) * 0.11);
  --thumb-size: calc(var(--nav-item-height) * 0.22);

  position: absolute;
  left: 50%;
  top: var(--thumb-pad);
  transform: translateX(-50%);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;

  /* Rond = meme couleur que la bordure du bouton referentiel. */
  background: var(--referential-border, var(--color-text, #000000));

  transition:
    top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.22s ease;
}

/* Etat data-contrast-mode="bw" du groupe : le rond descend en bas. */
.contrast-toggle-group[data-contrast-mode="bw"] > .contrast-toggle__thumb {
  top: calc(100% - var(--thumb-size) - var(--thumb-pad));
  background: var(--referential-border, var(--color-text, #000000));
}

/* ---------------------------------------------------------------------------
   Mode N&B du SITE : tokens --bw-referential-* (comme le bouton Referentiel).
   Bordure et rond = N&B — référentiel bordure du Panel.
   --------------------------------------------------------------------------- */
body[data-contrast-mode="bw"] .contrast-toggle-group {
  background: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  border: 2px solid var(--bw-referential-border, var(--referential-border, #000000)) !important;
  outline: none !important;
}

body[data-contrast-mode="bw"] .contrast-toggle-group > .contrast-toggle__thumb,
body[data-contrast-mode="bw"] .contrast-toggle-group[data-contrast-mode="bw"] > .contrast-toggle__thumb {
  background: var(--bw-referential-border, var(--referential-border, #000000));
}

/* Focus clavier accessible sur les demi-boutons. */
.contrast-toggle-group > .contrast-toggle:focus-visible {
  outline: 2px solid var(--referential-border, #000000);
  outline-offset: 2px;
  z-index: 3;
}

body[data-contrast-mode="bw"] .contrast-toggle-group > .contrast-toggle:focus-visible {
  outline-color: var(--bw-referential-border, #000000);
}

/* sr-only : texte masque visuellement, lu par les lecteurs d'ecran. */
.contrast-toggle .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Toggle mobile : affiche en flex dans la zone d'actions mobile. */
@media (max-width: 1021px) {
  .header-mobile-actions #mobile-header-contrast-toggle.contrast-toggle-group {
    display: flex !important;
  }
}

/* =============================================================================
   OVERRIDE FINAL : SUBMENU CONTAINER + BUTTONS - NE PAS COUPER LE BAS
   =============================================================================
   Cette regle a la plus haute priorite (fin du fichier + !important) pour
   garantir que les boutons du sous-menu ne sont jamais tronques verticalement.
   On force height: auto et overflow: visible sur tous les elements concernes. */

/* Conteneur .submenu : doit s'adapter a la hauteur de ses enfants
   et s'etendre jusqu'au bord droit du viewport (avec padding 1rem) */
header .submenu,
header .action-item > .submenu,
header.header-floating .submenu,
header.header-floating .action-item > .submenu,
header.header-floating.header-shrunk .submenu,
header.header-floating.header-shrunk .action-item > .submenu {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* Sous-menu visible : hauteur libre ; scroll seulement si .submenu-needs-scroll. */
header .action-item.submenu-active > .submenu,
header .action-item:focus-within > .submenu,
header.header-floating .action-item.submenu-active > .submenu,
header.header-floating .action-item:focus-within > .submenu,
header.header-floating.header-shrunk .action-item.submenu-active > .submenu,
header.header-floating.header-shrunk .action-item:focus-within > .submenu {
  max-height: none !important;
  overflow: visible !important;
}

header .actions-wrapper.submenu-needs-scroll .action-item.submenu-active > .submenu,
header .actions-wrapper.submenu-needs-scroll .action-item:focus-within > .submenu {
  max-height: var(--submenu-max-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Sous-menu cache : pas de contrainte de hauteur (mesure layout JS). */
header .action-item:not(.submenu-active):not(:focus-within) > .submenu,
header.header-floating .action-item:not(.submenu-active):not(:focus-within) > .submenu,
header.header-floating.header-shrunk .action-item:not(.submenu-active):not(:focus-within) > .submenu {
  max-height: none !important;
  overflow: visible !important;
  /* Le bord droit du sous-menu est desormais pilote dynamiquement par
     le JS via la variable --submenu-right : il s'aligne sur le bord
     droit du dernier .action-item visible (toggle de contraste), afin
     que le submenu et le toggle aient EXACTEMENT la meme extremite
     droite. On ne force plus `right: 1rem` ici (ce qui creait un
     desalignement quand le toggle etait plus a droite que 1rem du
     bord du viewport). */
}

/* =============================================================================
   BOUTONS SOUS-MENU : dimensions stables au hover
   -----------------------------------------------------------------------------
   Trait = box-shadow inset (pas d’outline : le fond ne déborde pas du cadre).
   ============================================================================= */
header .submenu .button,
header .submenu .button.header-nav-button,
header .submenu .header-nav-button,
header .action-item > .submenu .button,
header .action-item > .submenu .button.header-nav-button,
header.header-floating .submenu .button,
header.header-floating .submenu .header-nav-button,
header.header-floating.header-shrunk .submenu .button,
header.header-floating.header-shrunk .submenu .header-nav-button,
header .submenu .button:hover,
header .submenu .button.header-nav-button:hover,
header .submenu .header-nav-button:hover,
header .action-item > .submenu .button:hover,
header .action-item > .submenu .button.header-nav-button:hover,
header .submenu .button.is-breadcrumb-nav-hover,
header .submenu .button.header-nav-button.is-breadcrumb-nav-hover,
header .action-item > .submenu .button.is-breadcrumb-nav-hover,
header .action-item > .submenu .button.header-nav-button.is-breadcrumb-nav-hover,
header.header-floating .submenu .button:hover,
header.header-floating .submenu .header-nav-button:hover,
header.header-floating.header-shrunk .submenu .button:hover,
header.header-floating.header-shrunk .submenu .header-nav-button:hover {
  height: auto !important;
  max-height: none !important;
  min-height: var(--nav-item-height) !important;
  white-space: normal !important;
  overflow: visible !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  box-sizing: border-box !important;
  line-height: 1.15 !important;
  border: 0 none !important;
  --border-width: 1px !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 0 0 1px currentColor !important;
  background-clip: padding-box !important;
  /* Base neutre: la forme est geree juste en dessous (alternance 1 sur 2). */
  border-radius: 0 !important;
  transition: none !important;
  /* Aucune transformation de taille au hover. */
  transform: none !important;
}

/* En mode shrink uniquement: plus d'air vertical pour eviter
   la coupe visuelle des boutons du sous-menu. */
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu {
  padding-top: 0.0rem !important;
  padding-bottom: 0 !important;
}

header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu .button,
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu .button.header-nav-button,
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu .button:hover,
header.header-floating.header-shrunk .actions-wrapper .action-item > .submenu .button.header-nav-button:hover {
  min-height: calc(var(--nav-item-height) + 0.2rem) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

/* Sous-menu desktop: alternance des formes (1 sur 2) */
header .action-item > .submenu .button:nth-child(2n+1),
header .action-item > .submenu .button.header-nav-button:nth-child(2n+1),
header .submenu .button:nth-child(2n+1),
header .submenu .header-nav-button:nth-child(2n+1) {
  border-radius: 9999px !important;
}

header .action-item > .submenu .button:nth-child(2n),
header .action-item > .submenu .button.header-nav-button:nth-child(2n),
header .submenu .button:nth-child(2n),
header .submenu .header-nav-button:nth-child(2n) {
  border-radius: 0 !important;
}

/* Hover desktop: inversion de forme (arrondi <-> carre) */
header .action-item > .submenu .button:nth-child(2n+1):hover,
header .action-item > .submenu .button.header-nav-button:nth-child(2n+1):hover,
header .submenu .button:nth-child(2n+1):hover,
header .submenu .header-nav-button:nth-child(2n+1):hover,
header .action-item > .submenu .button:nth-child(2n+1).is-breadcrumb-nav-hover,
header .action-item > .submenu .button.header-nav-button:nth-child(2n+1).is-breadcrumb-nav-hover,
header .submenu .button:nth-child(2n+1).is-breadcrumb-nav-hover,
header .submenu .header-nav-button:nth-child(2n+1).is-breadcrumb-nav-hover {
  border-radius: 0 !important;
}

header .action-item > .submenu .button:nth-child(2n):hover,
header .action-item > .submenu .button.header-nav-button:nth-child(2n):hover,
header .submenu .button:nth-child(2n):hover,
header .submenu .header-nav-button:nth-child(2n):hover,
header .action-item > .submenu .button:nth-child(2n).is-breadcrumb-nav-hover,
header .action-item > .submenu .button.header-nav-button:nth-child(2n).is-breadcrumb-nav-hover,
header .submenu .button:nth-child(2n).is-breadcrumb-nav-hover,
header .submenu .header-nav-button:nth-child(2n).is-breadcrumb-nav-hover {
  border-radius: 9999px !important;
}

/* Au hover / focus : même palette « référentiel » que les boutons principaux
   (voir body[data-header-buttons-has-*] + hover plus haut dans ce fichier). */
body[data-header-buttons-has-bg="1"] header .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-header-buttons-has-bg="1"] header .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-header-buttons-has-bg="1"] header .submenu .button.header-nav-button:not(.button--referentiel).is-breadcrumb-nav-hover,
body[data-header-buttons-has-text="1"] header .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-header-buttons-has-text="1"] header .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-header-buttons-has-text="1"] header .submenu .button.header-nav-button:not(.button--referentiel).is-breadcrumb-nav-hover,
body[data-header-buttons-has-bg="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-header-buttons-has-bg="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-header-buttons-has-bg="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel).is-breadcrumb-nav-hover,
body[data-header-buttons-has-text="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-header-buttons-has-text="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-header-buttons-has-text="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel).is-breadcrumb-nav-hover {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--referential-border, var(--color-text, #000000)) !important;
}

body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"] header .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"] header .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"] header .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"] header .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"] header .action-item > .submenu .button.header-nav-button:not(.button--referentiel):focus-visible {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

/* Si <body> n’a pas data-header-buttons-* : aligné sur le hover du menu principal (snippet actions.twig). */
header .actions-wrapper .action-item > .submenu .button.header-nav-button:not(.button--referentiel):hover,
header .actions-wrapper .action-item > .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
header .actions-wrapper .action-item > .submenu .button.header-nav-button:not(.button--referentiel).is-breadcrumb-nav-hover,
header .submenu .button.header-nav-button:not(.button--referentiel):hover,
header .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
header .submenu .button.header-nav-button:not(.button--referentiel).is-breadcrumb-nav-hover {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--referential-border, var(--color-text, #000000)) !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .action-item > .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > .submenu .button.header-nav-button:not(.button--referentiel).is-breadcrumb-nav-hover,
body[data-contrast-mode="bw"] header .submenu .button.header-nav-button:not(.button--referentiel):hover,
body[data-contrast-mode="bw"] header .submenu .button.header-nav-button:not(.button--referentiel):focus-visible,
body[data-contrast-mode="bw"] header .submenu .button.header-nav-button:not(.button--referentiel).is-breadcrumb-nav-hover {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

/* Breadcrumb parent cliqué : même rendu que .breadcrumb-parent-button */
header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-parent-nav-hover,
header .actions-wrapper .action-item > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-parent-nav-hover,
header .actions-wrapper .action-item:has(> .submenu) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-parent-nav-hover,
header .actions-wrapper .action-item:has(> .submenu) > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-parent-nav-hover {
  background-color: var(--breadcrumb-parent-bg, transparent) !important;
  color: var(--breadcrumb-parent-text, var(--header-text, var(--color-text, #000000))) !important;
  -webkit-text-fill-color: var(--breadcrumb-parent-text, var(--header-text, var(--color-text, #000000))) !important;
  border: 2px solid var(--breadcrumb-parent-text, var(--header-text, var(--color-text, #000000))) !important;
  outline-color: var(--breadcrumb-parent-text, var(--header-text, var(--color-text, #000000))) !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-parent-nav-hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-parent-nav-hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item:has(> .submenu) > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-parent-nav-hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item:has(> .submenu) > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-parent-nav-hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 2px solid #000000 !important;
  outline-color: #000000 !important;
  box-shadow: none !important;
}

/* Sous-menu ouvert depuis le breadcrumb parent : conserver le style parent (pas le hover référentiel). */
header .actions-wrapper .action-item:has(> .submenu:hover) > .button.header-nav-button.is-breadcrumb-parent-nav-hover,
header .actions-wrapper .action-item:has(> .submenu:focus-within) > .button.header-nav-button.is-breadcrumb-parent-nav-hover,
header .actions-wrapper .action-item:has(> .submenu .is-breadcrumb-nav-hover) > .button.header-nav-button.is-breadcrumb-parent-nav-hover,
header .actions-wrapper .action-item.submenu-active > .button.header-nav-button.is-breadcrumb-parent-nav-hover,
header .actions-wrapper .action-item.submenu-active > a.button.header-nav-button.is-breadcrumb-parent-nav-hover {
  background-color: var(--breadcrumb-parent-bg, transparent) !important;
  color: var(--breadcrumb-parent-text, var(--header-text, var(--color-text, #000000))) !important;
  -webkit-text-fill-color: var(--breadcrumb-parent-text, var(--header-text, var(--color-text, #000000))) !important;
  border: 2px solid var(--breadcrumb-parent-text, var(--header-text, var(--color-text, #000000))) !important;
  outline-color: var(--breadcrumb-parent-text, var(--header-text, var(--color-text, #000000))) !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .action-item:has(> .submenu:hover) > .button.header-nav-button.is-breadcrumb-parent-nav-hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item:has(> .submenu:focus-within) > .button.header-nav-button.is-breadcrumb-parent-nav-hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item:has(> .submenu .is-breadcrumb-nav-hover) > .button.header-nav-button.is-breadcrumb-parent-nav-hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item.submenu-active > .button.header-nav-button.is-breadcrumb-parent-nav-hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item.submenu-active > a.button.header-nav-button.is-breadcrumb-parent-nav-hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 2px solid #000000 !important;
  outline-color: #000000 !important;
  box-shadow: none !important;
}

/* Breadcrumb : bouton principal sans sous-menu (ex. Référentiel) en état hover. */
header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-nav-hover,
header .actions-wrapper .action-item > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-nav-hover {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--referential-border, var(--color-text, #000000)) !important;
}

body[data-contrast-mode="bw"] header .actions-wrapper .action-item > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-nav-hover,
body[data-contrast-mode="bw"] header .actions-wrapper .action-item > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle).is-breadcrumb-nav-hover {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

@media (max-width: 767px) {
  /* Paragraphes : interligne navigateur (surcharge les blocs plus spécifiques) */
  p,
  .copy p {
    line-height: normal !important;
  }

  /* 1) Typographie globale mobile */
  p,
  .copy p,
  blockquote,
  figcaption,
  dt,
  dd,
  address,
  cite {
    font-size: 5vw;
  }

  .search-result-title,
  .search-result-snippet {
    font-size: 5vw !important;
  }

  /* Boutons menu mobile (uppercase) : typo légèrement plus grande */
  .uppercase,
  #mobile-menu-content .mobile-menu-link,
  #mobile-menu-content .mobile-menu-list.text-4xl,
  #mobile-menu-content .mobile-subpage-link {
    font-size: clamp(1.18rem, 5.3vw, 1.58rem) !important;
    line-height: 1.18 !important;
  }

  /* Popup recherche mobile : typo compacte (pas 5vw), pas de débordement */
  .menu-search--mobile-popup .search-results .search-result-item .search-result-title {
    font-size: clamp(1.15rem, 4.65vw, 1.42rem) !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item .search-result-snippet {
    display: none !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item .search-result-parent,
  .menu-search--mobile-popup .search-results .search-result-item .search-result-parent.font-caliste {
    font-size: clamp(1.08rem, 4.4vw, 1.32rem) !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  body .menu-search--mobile-popup.is-open .menu-search__toggle,
  body .menu-search--mobile-popup.is-open .menu-search__toggle.button {
    background-color: var(
      --mobile-search-bar-bg,
      var(--desktop-search-item-bg, var(--desktop-search-results-bg, #000000))
    ) !important;
    border-color: var(
      --mobile-search-bar-bg,
      var(--desktop-search-item-bg, var(--desktop-search-results-bg, #000000))
    ) !important;
    outline-color: var(
      --mobile-search-bar-bg,
      var(--desktop-search-item-bg, var(--desktop-search-results-bg, #000000))
    ) !important;
    color: var(
      --mobile-search-bar-text,
      var(--desktop-search-item-text, var(--desktop-search-results-text, #ffffff))
    ) !important;
  }

  body .menu-search--mobile-popup.is-open .menu-search__toggle input[type="search"],
  body .menu-search--mobile-popup.is-open .menu-search__toggle input[type="search"]::placeholder,
  body .menu-search--mobile-popup.is-open .menu-search__close,
  body .menu-search--mobile-popup.is-open .menu-search__icon-wrap {
    color: var(
      --mobile-search-bar-text,
      var(--desktop-search-item-text, var(--desktop-search-results-text, #ffffff))
    ) !important;
  }

  .menu-search--mobile-popup.is-open .search-results:not(:empty) {
    display: block !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item,
  .menu-search--mobile-popup .search-results .search-result-item.is-visible {
    flex: none !important;
    flex-shrink: 0 !important;
    min-height: max-content !important;
    padding-top: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item:nth-child(2n) {
    border-radius: 0 !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item a {
    flex-shrink: 0 !important;
    min-height: max-content !important;
    padding-top: 0.88rem !important;
    padding-bottom: 0.88rem !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item.search-result-item-more {
    margin-top: 0.12rem !important;
  }

  body .menu-search--mobile-popup.is-open .menu-search__toggle input[type="search"]::placeholder {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    opacity: 0.55 !important;
  }

  body .menu-search--mobile-popup.is-open .menu-search__toggle input[type="search"] {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }

  /* Résultats recherche header (pas le popup mobile déplacé sur body) */
  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-result-item,
  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-result-item.is-visible {
    margin: 0.12rem 0 !important;
    padding-top: 0 !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item a {
    gap: 0.22rem !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item a br {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item .search-result-snippet {
    margin-top: 0.04rem !important;
  }

  .menu-search--mobile-popup .search-results .search-result-item .search-result-parent,
  .menu-search--mobile-popup .search-results .search-result-item .search-result-parent.font-caliste {
    font-size: clamp(1.08rem, 4.4vw, 1.32rem) !important;
    margin-top: 0.1rem !important;
  }

  #mobile-menu {
    max-width: 99% !important;
    width: 99% !important;
    left: 0.5% !important;
    right: auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #mobile-menu-content {
    padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem)) !important;
  }

  #mobile-menu-content .mobile-footer-actions-block {
    padding-bottom: max(1.35rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
  }

  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-result-item a {
    padding: 1rem 3.65rem !important;
    gap: 0.12rem !important;
  }

  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-result-item .search-result-title {
    font-size: clamp(0.95rem, 3.9vw, 1.15rem) !important;
    line-height: 1.24 !important;
  }

  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-result-item .search-result-snippet {
    font-size: clamp(0.88rem, 3.5vw, 1.05rem) !important;
    line-height: 1.34 !important;
    margin-top: 0.1rem !important;
  }

  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-result-item .search-result-parent {
    font-size: clamp(0.74rem, 2.9vw, 0.92rem) !important;
    margin-top: 0.28rem !important;
  }

  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-result-item.search-result-item-more {
    margin-left: 0.60rem !important;
    margin-right: 0.60rem !important;
  }

  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-results-more {
    padding: 1rem 3.65rem !important;
    font-size: clamp(1rem, 3.8vw, 1.15rem) !important;
  }

  header .menu-search:not(.menu-search--mobile-popup) .search-results .search-results-more .more-dots .dot {
    font-size: 1.25em;
  }

  /* Typo menu mobile : gérée dans mobile-menu.twig (clamp), pas de 5vw ici */

  /* Accordéons : texte du <summary> (titre, métas, info) = typo <p> mobile (5vw) */
  .ressource-accordion-item .ressource-accordion-summary .ressource-accordion-title,
  .ressource-accordion-item .ressource-accordion-summary .ressource-accordion-meta,
  .ressource-accordion-item .ressource-accordion-summary .ressource-accordion-meta *,
  .ressource-accordion-item .ressource-accordion-summary .annonces-accordion-info,
  .ressource-accordion-item .ressource-accordion-summary .annonces-accordion-info * {
    font-size: 5vw !important;
    line-height: normal;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ressource-accordion-item:not([open]) .ressource-accordion-summary .ressource-accordion-title,
  .ressource-accordion-item:not([open]) .ressource-accordion-summary .ressource-accordion-meta,
  .ressource-accordion-item:not([open]) .ressource-accordion-summary .annonces-accordion-info {
    padding-bottom: 0 !important;
  }

  .ressource-accordion-item .ressource-accordion-summary .ressource-accordion-plus {
    font-size: 5vw !important;
    width: 2.45em;
    height: 2.45em;
    min-width: 2.45em;
    min-height: 2.45em;
    line-height: 1;
    align-self: flex-end;
    margin-top: 0 !important;
  }

  /* Boutons : même taille que les blocs Texte tablo (défaut text-2xl / --tablo-text-fs) */
  a.button,
  button.button,
  a.action-download,
  .copy a.button,
  .layout-section .block-type-actions .button,
  .layout-section .block-type-actions a.button,
  .layout-section .block-type-actions button.button,
  .actions-wrapper .button,
  .actions-wrapper a.button,
  .actions-wrapper button.button,
  a.archived-event-btn,
  .newsletter-btn {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height, 1.25);
  }

  a.action-download .action-download__label,
  .action-download__label.button {
    font-size: var(--text-2xl) !important;
    line-height: var(--text-2xl--line-height, 1.25) !important;
  }

  /* Boutons layout fullwidth : plus de hauteur, interligne resserré (font-size inchangé) */
  .layout-section .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"]) {
    --ressource-action-height: 4.75rem;
  }

  .layout-section .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"])
    .actions-wrapper .action-item > :is(.button, a.button, button.button):not(.action-download) {
    height: auto;
    min-height: var(--ressource-action-height);
    padding-block: 0.6rem !important;
    line-height: 1.1;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  .layout-section .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"])
    .actions-wrapper .action-item > .action-download,
  .layout-section .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"])
    .actions-wrapper .action-item > a.action-download.download-action-button {
    min-height: var(--ressource-action-height);
    height: auto;
    align-items: stretch;
  }

  .layout-section .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"])
    .actions-wrapper .action-item > .action-download .action-download__label,
  .layout-section .block-type-actions:is(.is-fullwidth, [data-layout-actions-fullwidth="1"])
    .actions-wrapper .action-item > a.action-download .action-download__label {
    height: auto;
    min-height: var(--ressource-action-height);
    padding-block: 0.55rem !important;
    line-height: 1.1 !important;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  h1:not(.tablo-heading__tag) {
    font-size: 2rem !important;
  }

  h2:not(.tablo-heading__tag):not(.calc-title),
  .copy > h2:not(.tablo-heading__tag):not(.calc-title) {
    font-size: 2rem !important;
    line-height: 1.45;
  }

  h4.tablo-heading__tag:not(.tablo-heading--fit-line),
  h4.tablo-heading__tag.text-5xl:not(.tablo-heading--fit-line),
  h4.tablo-heading__tag:not(.tablo-heading--fit-line) :is(p, span, strong, em) {
    font-size: 3rem !important;
    line-height: 1.1 !important;
  }

  /* Titres h2 (3XL) et h4 (5XL) — heading-fit-mobile.js */
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line,
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line :is(p, span, strong, em) {
    width: 100%;
    max-width: 100%;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.15;
  }

  h4.tablo-heading__tag.tablo-heading--fit-line,
  h4.tablo-heading__tag.tablo-heading--fit-line :is(p, span, strong, em) {
    line-height: 1.1;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* 1 mot : une seule ligne (pas de coupure type « gouvernanc/e ») */
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line[data-fit-word-count="1"],
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line--one-word,
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line[data-fit-word-count="1"] :is(p, span, strong, em),
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line--one-word :is(p, span, strong, em) {
    white-space: nowrap;
    text-wrap: nowrap;
  }

  /* 2+ mots : même taille max, retour à la ligne autorisé */
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line:not([data-fit-word-count="1"]):not([data-fit-word-count="0"]),
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line--multi-word,
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line:not([data-fit-word-count="1"]):not([data-fit-word-count="0"]) :is(p, span, strong, em),
  :is(h2, h4).tablo-heading__tag.tablo-heading--fit-line--multi-word :is(p, span, strong, em) {
    white-space: normal;
    text-wrap: balance;
  }

  .tablo-block-heading:has(> :is(h2, h4).tablo-heading--fit-line) {
    width: 100%;
    max-width: 100%;
  }

  h3:not(.tablo-heading__tag),
  h4:not(.tablo-heading__tag),
  h5:not(.tablo-heading__tag),
  h6:not(.tablo-heading__tag),
  .copy > h3:not(.tablo-heading__tag),
  .copy > h4:not(.tablo-heading__tag),
  .copy > h5:not(.tablo-heading__tag),
  .copy > h6:not(.tablo-heading__tag) {
    font-size: 5vw !important;
    line-height: 1.45;
  }

  /* Page membres mobile : text-2xl unifié (h2, badges et text-4xl tablo exclus) */
  .network-container {
    --tablo-text-fs: var(--text-2xl);
    --tablo-text-lh: var(--text-2xl--line-height);
    --reseau-annuaire-entry-fs: var(--text-xl);
    --reseau-annuaire-entry-lh: 1.2;
  }

  .network-container :is(p, .copy p) {
    font-size: var(--tablo-text-fs) !important;
    line-height: var(--tablo-text-lh) !important;
  }

  .network-container #lieux-list .lieu-item .lieu-main > h3,
  .network-container #lieux-list .lieu-item .lieu-main > .city {
    font-size: var(--reseau-annuaire-entry-fs) !important;
    line-height: var(--reseau-annuaire-entry-lh) !important;
  }

  li,
  .copy li {
    font-size: 5vw;
    padding-left: 0 !important;
  }

  .copy.tablo-block-list:is(.text-xl, .text-2xl):not(.text-4xl) li {
    font-size: var(--text-2xl) !important;
    line-height: var(--text-2xl--line-height) !important;
  }

  .copy ul,
  .copy ol {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style-position: inside;
  }

  /* Blocs liste (Writer <li><p>) : puce sur la 1re ligne du texte, pas au-dessus */
  .copy.tablo-block-list > :is(ul, ol) {
    list-style-position: outside !important;
    padding-left: 1.25em !important;
    margin-left: 0 !important;
  }

  .copy.tablo-block-list > :is(ul, ol) > li {
    padding-left: 0 !important;
    display: list-item;
  }

  .copy.tablo-block-list > :is(ul, ol) > li > :is(p, div) {
    display: inline;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Blocs Texte / titres h3 / listes : typo tablo 2XL en mobile (4XL grand texte inchangé) */
  h3.tablo-heading__tag.text-4xl,
  h3.tablo-heading__tag.text-4xl :is(p, span, strong, em),
  .tablo-block-heading h3.tablo-heading__tag.text-4xl,
  .tablo-block-heading h3.tablo-heading__tag.text-4xl :is(p, span, strong, em),
  .copy.tablo-text-block.tablo-text-sized:not([style*="--tablo-text-fs:var(--text-4xl)"]),
  .copy.tablo-text-block.tablo-text-sized:not([style*="--tablo-text-fs:var(--text-4xl)"]) :is(p, li, a, em, strong),
  .copy.tablo-text-block.tablo-text-sized:not([style*="--tablo-text-fs:var(--text-4xl)"]) .typewriter-final :is(p, li, a, em, strong),
  .copy.tablo-text-block.tablo-text-sized:not([style*="--tablo-text-fs:var(--text-4xl)"]) .typewriter-live :is(p, li, a, em, strong),
  .copy.tablo-block-list:is(.text-2xl, .text-xl):not(.text-4xl),
  .copy.tablo-block-list:is(.text-2xl, .text-xl):not(.text-4xl) > .tablo-block-list__intro,
  .copy.tablo-block-list:is(.text-2xl, .text-xl):not(.text-4xl) > .tablo-block-list__intro :is(p, li, div, a, em, strong),
  .copy.tablo-block-list:is(.text-2xl, .text-xl):not(.text-4xl) > :is(ul, ol),
  .copy.tablo-block-list:is(.text-2xl, .text-xl):not(.text-4xl) > :is(ul, ol) > li,
  .copy.tablo-block-list:is(.text-2xl, .text-xl):not(.text-4xl) > :is(ul, ol) li :is(p, div, a, em, strong) {
    --tablo-text-fs: var(--text-2xl) !important;
    --tablo-text-lh: var(--text-2xl--line-height) !important;
    font-size: var(--text-2xl) !important;
    line-height: var(--text-2xl--line-height) !important;
  }

  /* Listes tablo text-xl/2xl : <li> sans <p> (texte direct) + puces */
  .copy.tablo-block-list:is(.text-xl, .text-2xl):not(.text-4xl) > :is(ul, ol),
  .copy.tablo-block-list:is(.text-xl, .text-2xl):not(.text-4xl) > :is(ul, ol) > li,
  .copy.tablo-block-list:is(.text-xl, .text-2xl):not(.text-4xl) > :is(ul, ol) > li :is(em, strong, a, span) {
    font-size: var(--text-2xl) !important;
    line-height: var(--text-2xl--line-height) !important;
  }

  /* Annonces : texte détail d’accordéon — <p> alignés sur les paragraphes mobile (5vw), surclasse 0.7rem / état ouvert */
  .annonces-accordion-content .annonces-accordion-text p,
  .annonces-accordion-content .ressource-accordion-text.annonces-accordion-text p,
  .ressource-accordion-item[open] .annonces-accordion-content .annonces-accordion-text p,
  .ressource-accordion-item[open] .annonces-accordion-content .ressource-accordion-text.annonces-accordion-text p {
    font-size: 5vw !important;
    line-height: normal;
  }

  /* Accordéons Ressources : <summary> empilé (Annonces = grille dédiée dans annonces.css) */
  summary.ressource-accordion-summary:not(.annonces-accordion-summary),
  .ressource-accordion-summary:not(.annonces-accordion-summary) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0;
  }

  .ressource-accordion-summary .ressource-accordion-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
    width: 100%;
    min-width: 0;
  }

  /* Ressources : même offset que le reste du site (voir --site-main-offset-top) */
  main:has(.ressources-page-custom) {
    margin-top: max(
      var(--site-main-offset-top, 9.5rem),
      clamp(9.25rem, 10vh + 5.75rem, 14.5rem)
    ) !important;
  }

  /* Placeholders recherche : popup mobile = typo barre (plus grand que 5vw global) */
  .menu-search input::placeholder,
  .ressources-search-input::placeholder {
    font-size: 5vw;
  }

  .menu-search--mobile-popup input[type="search"]::placeholder,
  .menu-search--mobile-popup.is-open input[type="search"]::placeholder,
  body .menu-search--mobile-popup.is-open .menu-search__toggle input[type="search"]::placeholder {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }

  /* 2) Filets de fond : chevauchement entre sections colorées ; gap entre boutons de layout */
  .layout-section[data-has-seasonal="1"] + .layout-section,
  .layout-section[data-has-bw-layout="1"] + .layout-section {
    margin-top: -1px;
  }

  .kirby-inner-grid {
    --kirby-inner-gap: 0.5rem;
    gap: var(--kirby-inner-gap) !important;
  }

  .kirby-inner-grid:has(.tablo-text-block):has(.steps-block) {
    --kirby-inner-gap: 3rem;
  }
  .layout-section .block-type-actions.is-fullwidth .actions-wrapper,
  .layout-section .block-type-actions[data-layout-actions-fullwidth="1"] .actions-wrapper {
    gap: 0.5rem !important;
    row-gap: 0.5rem !important;
  }

  .layout-section .block-type-actions .actions-wrapper .action-item + .action-item > :is(
    .button,
    a.button,
    button.button,
    a.action-download,
    .action-download
  ) {
    margin-top: 0;
  }

  .archived-events-section .archived-event-item .archived-event-actions-stack {
    gap: 0.5rem !important;
  }

  .archived-events-section .archived-event-item .archived-event-actions-stack .action-item + .action-item > :is(
    a.archived-event-btn,
    a.action-download,
    .action-download
  ) {
    margin-top: 0;
  }

  /* Événements à la une (Astroïde) : une colonne (surcharge toute règle résiduelle) */
  .featured-event-item.astroide-featured-event-item.grid.w-full {
    grid-template-columns: 1fr !important;
  }

  .astroide-featured-left-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Page Ressources : champ de recherche aligné sur le corps mobile */
  .ressources-search-input.ressources-search-input--theme-size {
    font-size: 5vw !important;
  }

  .ressources-search-input.ressources-search-input--theme-size::placeholder {
    font-size: 5vw;
  }

  /* Événements archivés : grille 2 colonnes (sauf page Rencontre régionale) */
  body:not(.page-rencontre-regionale) .archived-event-item .kirby-inner-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem;
    align-items: start;
  }

  body:not(.page-rencontre-regionale) .archived-event-item .layout-column {
    grid-column: span 1 !important;
  }

  /* 3) Carte Réseau : contrôle plein écran bien visible */
  .mapboxgl-ctrl-top-right {
    top: 0.5rem;
    right: 0.5rem;
    z-index: 30;
  }

  .mapboxgl-ctrl-group {
    transform: scale(1.05);
    transform-origin: top right;
  }
}

/* =============================================================================
   David : graisse regular partout (surcharge Tablo .copy strong, etc.)
   ============================================================================= */
.font-david,
h3.tablo-heading__tag,
.ressources-dropdown-label,
.ressources-dropdown-list li a,
.ressources-dropdown-list li button,
.ressources-theme-filter-field label,
.calc-section,
.calc-section :is(.calc-title, .calc-help-main, .calc-help-extra, .calc-help--col-a, .calc-field-label, .calc-subtotal-label) {
  font-synthesis: none;
}

.font-david :is(strong, b),
h3.tablo-heading__tag :is(strong, b),
.copy :is(strong, b) {
  font-weight: normal !important;
  font-synthesis: none;
}

/* =============================================================================
/* Formes boutons d'action → assets/action-button-shapes.css */

/* Surcharge Tablo/Tailwind (@layer) : pas de gras dans les blocs texte. */
.copy :is(strong, b),
.tablo-text-block :is(strong, b),
.prose :is(strong, b),
.tablo-heading__tag :is(strong, b) {
  font-weight: normal !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
}

/* Rendu typographique global : regular partout sur le site (surcharge Tablo / utilitaires). */
html :where(*, *::before, *::after) {
  font-weight: normal !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
  letter-spacing: normal !important;
}

/* =============================================================================
   Logo header mobile — même ratio 700×180 que desktop.
   Placé en fin de fichier pour écraser header-floating (clamp largeur) et
   .logo-morph (dimensions fixes) qui déformaient le logo sur petit écran.
   ============================================================================= */
@media (max-width: 1021px) {
  header .logo-block,
  header.header-floating:not(.header-shrunk) .logo-block,
  header.header-floating.header-shrunk .logo-block,
  header.header-floating:not(.header-shrunk)[data-logo-lottie-tweening="1"] .logo-block,
  header figure a.logo-block {
    --logo-w-natural: calc(var(--nav-item-height) * 700 / 180);
    --logo-w-cap: calc(100vw - var(--nav-item-height) * 2 - 2rem);
    --logo-h-natural: var(--nav-item-height);
    --logo-h-cap: calc(var(--logo-w-cap) * 180 / 700);
    width: min(var(--logo-w-natural), var(--logo-w-cap)) !important;
    max-width: var(--logo-w-cap) !important;
    min-width: 0 !important;
    height: min(var(--logo-h-natural), var(--logo-h-cap)) !important;
    min-height: min(var(--logo-h-natural), var(--logo-h-cap)) !important;
    max-height: min(var(--logo-h-natural), var(--logo-h-cap)) !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }

  header .logo-block > .logo-morph,
  header a.logo-block > .logo-morph,
  header .logo-block .logo-morph,
  header .logo-morph,
  header.header-floating .logo-morph,
  header.header-floating.header-shrunk .logo-morph {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: unset !important;
    display: block;
    flex: 0 0 auto !important;
    align-self: auto !important;
  }

  header .logo-morph__hover-lottie,
  header .logo-morph__lottie {
    width: 100% !important;
    height: 100% !important;
  }

  header .logo-morph__hover-lottie svg,
  header .logo-morph__lottie svg {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    preserveAspectRatio: xMinYMid meet !important;
  }

  /* Rencontre régionale — surcharge finale (bat les règles résiduelles + ancien HTML inline grid) */
  body.page-rencontre-regionale .featured-events-section .featured-event-item,
  body.page-rencontre-regionale .featured-events-section .featured-event-item.grid.w-full,
  body.page-rencontre-regionale .featured-events-section .featured-event-item.featured-event-item--split {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: 100% !important;
    gap: 1rem !important;
  }

  body.page-rencontre-regionale .featured-events-section .featured-event-item > .featured-event-shape {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-rencontre-regionale .featured-events-section .featured-event-item .featured-event-inner-grid,
  body.page-rencontre-regionale .featured-events-section .featured-event-item .featured-event-shape > .grid,
  body.page-rencontre-regionale .featured-events-section .featured-event-item .featured-event-shape .grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    width: 100% !important;
    height: auto !important;
    gap: 1rem !important;
    row-gap: 1rem !important;
  }

  body.page-rencontre-regionale .featured-events-section .featured-event-item .featured-event-left-stack,
  body.page-rencontre-regionale .featured-events-section .featured-event-item .featured-event-inner-grid > .featured-event-left-stack {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    transform: none !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .kirby-inner-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    flex-direction: unset !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .kirby-inner-grid > .layout-column,
  body.page-rencontre-regionale .archived-events-section .archived-event-item .kirby-inner-grid .layout-column[class*='col-span-'] {
    width: auto !important;
    max-width: none !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .kirby-inner-grid .layout-column[class*='col-span-'] {
    grid-column: auto !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .archived-event-col-city {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .archived-event-col-date {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .archived-event-col-actions-primary,
  body.page-rencontre-regionale .archived-events-section .archived-event-item .archived-event-col-actions-extra {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .archived-event-col-actions-primary {
    grid-row: 2 !important;
  }

  body.page-rencontre-regionale .archived-events-section .archived-event-item .archived-event-col-actions-extra {
    grid-row: 3 !important;
  }
}

/* =============================================================================
   MODE N&B — boutons .ressource-action-button (Annonces / Ressources)
   Annule les variables --ressource-btn-* injectées en inline par le Panel
   (priorité stylesheet !important sur l’élément > style="" sans !important).
   Repos : fond blanc / texte noir — hover : fond noir / texte blanc.
   ============================================================================= */
body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button,
body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button:link,
body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button:visited,
body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button:active,
body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button:focus,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button:link,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button:visited,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button:active,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button:focus,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressource-action-button,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressource-action-button {
  --ressource-btn-bg: #ffffff !important;
  --ressource-btn-text: #000000 !important;
  --ressource-btn-hover-bg: #000000 !important;
  --ressource-btn-hover-text: #ffffff !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 2px solid #ffffff !important;
  border-color: #ffffff !important;
  outline: none !important;
  outline-color: #ffffff !important;
  text-decoration-color: #000000 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button *,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button *,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressource-action-button *,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressource-action-button * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  fill: #000000 !important;
}

body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button:hover,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button:hover,
body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button:hover:visited,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button:hover:visited,
body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button:focus-visible,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button:focus-visible,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressource-action-button:hover,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressource-action-button:hover {
  --ressource-btn-bg: #000000 !important;
  --ressource-btn-text: #ffffff !important;
  --ressource-btn-hover-bg: #000000 !important;
  --ressource-btn-hover-text: #ffffff !important;
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-color: #ffffff !important;
  outline: none !important;
  text-decoration-color: #ffffff !important;
  box-shadow: none !important;
}

body[data-contrast-mode="bw"] .annonces-page-custom a.ressource-action-button:hover *,
body[data-contrast-mode="bw"] .ressources-page-custom a.ressource-action-button:hover *,
body[data-contrast-mode="bw"] .annonces-page-custom .ressource-accordion-item[open] a.ressource-action-button:hover *,
body[data-contrast-mode="bw"] .ressources-page-custom .ressource-accordion-item[open] a.ressource-action-button:hover * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
}

/* =============================================================================
   MOBILE — burger : ne pas rogner l’icône (légèrement plus petit que le toggle N&B)
   ============================================================================= */
@media (max-width: 1021px) {
  header > .flex.flex-row:first-of-type,
  header .header-mobile-actions {
    overflow: visible !important;
  }

  .header-mobile-actions #mobile-menu-toggle {
    overflow: visible !important;
    width: var(--nav-item-height) !important;
    min-width: var(--nav-item-height) !important;
    max-width: var(--nav-item-height) !important;
    height: var(--nav-item-height) !important;
    min-height: var(--nav-item-height) !important;
    max-height: var(--nav-item-height) !important;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Même boîte que le toggle N&B ; icône quasi pleine sans dépasser le cadre */
  .header-mobile-actions #mobile-menu-toggle svg {
    width: 94% !important;
    height: 94% !important;
    max-width: 94%;
    max-height: 94%;
    overflow: visible;
    display: block;
    flex-shrink: 0;
  }
}