/* /al-fix.css - correctifs agreges adaptlaw.be (integration du 2026-09-22).
   Charge en DERNIER dans le <head> (apres <style id="al-icon">) par nginx : <link rel=stylesheet href=/al-fix.css?v=N>.
   Toute modification impose d'incrementer ?v= (cache immutable d'un an).
   Ordre : g-header, g-anim, g-layout, g-contacts, g-news, g-forms, g-cookies, g-lang-js.
   Audit : aucune paire (media, selecteur, propriete) declaree par deux familles (tools/css_audit.py). */

/* ================================================================
   g-header : en-tete, menus, pied de page desktop
   ================================================================ */
/* ==== g-header : en-tete et menus (gabarits FR 478, EN 18023, NL 18024 ; memes data-id) ====
   Grille commune de l'en-tete : gouttiere laterale G identique a gauche et a droite
   - mobile (<=767) : 10 px
   - tablette (768-1024) : 20 px
   - desktop (>=1025) : max(20 px, (largeur-1180)/2) -> 50 a 1280, 130 a 1440, 370 a 1920
   Le pied de page (#colophon) est cale sur la meme grille au-dela de 1025 px (align-entete#9). */

/* align-entete#1 nav-desktop#4 : colonnes en largeur de contenu au lieu de 20/80 % (FR) et 25/75 % (EN/NL),
   jamais de retour a la ligne (>=768 : couvre aussi la tablette a 768 px avec barre de defilement,
   ou le selecteur EN/NL passait sous le logo) */
@media (min-width:768px){
  #masthead .elementor-element-4a1a9f5>.elementor-container>.elementor-column.elementor-element-8a7134f{width:auto;flex:0 0 auto}
  #masthead .elementor-element-4a1a9f5>.elementor-container>.elementor-column.elementor-element-d1cfe47{width:auto;flex:1 1 0;min-width:0}
  #masthead .elementor-element-4a1a9f5>.elementor-container>.elementor-column>.elementor-widget-wrap{flex-wrap:nowrap}
}
/* align-entete#6 nav-desktop#4 : desktop >=1025, marges symetriques (le bouton RDV n'est plus colle au bord) */
@media (min-width:1025px){
  #masthead .elementor-element.elementor-element-4a1a9f5{padding-left:10px;padding-right:10px}
  #masthead .elementor-element-4a1a9f5 .elementor-element-d1cfe47>.elementor-element-populated{padding-right:10px}
}

/* align-entete#6 : tablette 768-1024, marge droite 15 -> 20 (gauche = 10 de marge + 10 de padding) */
@media (min-width:768px) and (max-width:1024px){
  #masthead .elementor-element-4a1a9f5 .elementor-element-d1cfe47>.elementor-element-populated{padding-right:20px}
}

/* align-entete#8 nav-mobile#9 : meme position du logo et du selecteur dans les 3 gabarits (>=768) */
@media (min-width:768px){
  #masthead .elementor-element-4a1a9f5 .elementor-element-99e87cb>.elementor-widget-container{margin-right:25px}
  #masthead .elementor-element-4a1a9f5 .elementor-element-df0b6c6>.elementor-widget-container{margin:0}
  /* icone LinkedIn : supprime l'espace de ligne sous l'icone (centre -2,9 px) */
  #masthead .elementor-element-4a1a9f5 .elementor-element-3332e18 .elementor-icon-wrapper{display:flex}
}
@media (min-width:768px) and (max-width:1024px){
  #masthead .elementor-element-4a1a9f5 .elementor-element-df0b6c6{align-self:center}
}

/* align-entete#1 nav-desktop#4 : 1025-1139, espacements resserres pour que FR (le plus long) tienne
   sur une ligne meme avec une barre de defilement Windows de 15-17 px */
@media (min-width:1025px) and (max-width:1139px){
  #masthead .elementor-element-4a1a9f5 .elementor-nav-menu--main .elementor-item{padding-left:6px;padding-right:6px}
  #masthead .elementor-element-4a1a9f5 .elementor-element-99e87cb>.elementor-widget-container{margin-right:20px}
  #masthead .elementor-element-4a1a9f5 .elementor-element-3332e18>.elementor-widget-container{margin-left:12px;margin-right:12px}
  #masthead .elementor-element-4a1a9f5 .elementor-element-22af6b8 .elementor-button{padding-left:22px;padding-right:24px}
}
@media (min-width:1025px) and (max-width:1079px){
  #masthead .elementor-element-4a1a9f5 .elementor-nav-menu--main .elementor-item{letter-spacing:.5px}
  #masthead .elementor-element-4a1a9f5 .elementor-element-22af6b8 .elementor-button{padding-left:18px;padding-right:20px}
}

/* align-entete#9 : pied de page sur la grille de l'en-tete (contenu a max(20, (L-1180)/2) des deux bords) */
@media (min-width:1025px){
  #colophon .elementor-element.elementor-element-e22c611{padding-left:0;padding-right:0}
  #colophon .elementor-element.elementor-element-e22c611>.elementor-container{max-width:1220px}
}
@media (min-width:2000px){
  /* le CSS additionnel force 1400 px sur tous les conteneurs au-dela de 2000 px ; +20 px pour
     compenser les 2 paddings de colonne du pied (logo de l'en-tete a (L-1400)/2+10) */
  #colophon .elementor-element.elementor-element-e22c611>.elementor-container{max-width:1420px !important}
}

/* align-entete#2 nav-mobile#1 : tablette 768-1024, le panneau du burger sort du flux (l'en-tete reste a 81 px)
   et s'etend sur toute la largeur sous l'en-tete, comme le menu mobile (equivalent de l'option Elementor
   « Pleine largeur » des widgets 3926b5b/6e50d5a/3c3331e). Le bloc conteneur devient la section 4a1a9f5. */
@media (min-width:768px) and (max-width:1024px){
  #masthead .elementor-element-4a1a9f5>.elementor-container,
  #masthead .elementor-element-4a1a9f5 .elementor-element-d1cfe47,
  #masthead .elementor-element-4a1a9f5 .elementor-element-d1cfe47>.elementor-widget-wrap,
  #masthead .elementor-element-4a1a9f5 .elementor-widget-nav-menu,
  #masthead .elementor-element-4a1a9f5 .elementor-widget-nav-menu>.elementor-widget-container{position:static}
  #masthead .elementor-element-4a1a9f5 .elementor-widget-nav-menu>.elementor-widget-container{margin-top:0}
  #masthead .elementor-element-4a1a9f5 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{position:absolute;top:100%;left:0;right:0;width:auto;margin-top:0;z-index:9997;box-shadow:0 12px 24px rgb(0 0 0 / .18)}
}

/* align-entete#3 langues#8 align-entete#6 : mobile <=767. Corrige le bloc al-hdrmobile (style al-icon) sans perdre ce qu'il apporte
   (logo jusqu'a 127 px, bouton RDV compact sur une ligne) : la colonne de droite prend la largeur de son contenu,
   la colonne du logo prend le reste et le logo retrecit seulement s'il manque de la place -> jamais de
   chevauchement avec le selecteur, une seule rangee jusqu'a 300 px. Marges 10/10. */
@media (max-width:767px){
  #masthead .elementor-top-section.elementor-hidden-desktop>.elementor-container{flex-wrap:nowrap}
  #masthead .elementor-top-section.elementor-hidden-desktop>.elementor-container>.elementor-column:first-child{width:auto;flex:1 1 0;min-width:0}
  #masthead .elementor-top-section.elementor-hidden-desktop>.elementor-container>.elementor-column:first-child>.elementor-widget-wrap{padding-right:12px}
  #masthead .elementor-top-section.elementor-hidden-desktop>.elementor-container>.elementor-column:last-child{width:auto;flex:0 0 auto;max-width:none}
  #masthead .elementor-top-section.elementor-hidden-desktop>.elementor-container>.elementor-column:last-child>.elementor-widget-wrap{flex-wrap:nowrap;padding-right:10px}
  #masthead .elementor-top-section.elementor-hidden-desktop .elementor-widget-image img{max-width:100% !important}
}

/* align-entete#7 nav-mobile#7 : le padding gauche de 5 px du widget burger faussait le calcul « stretch »
   d'Elementor (panneau a -5 px). On le remplace par une marge sur le widget lui-meme (bloc conteneur). */
@media (max-width:767px){
  #masthead .elementor-widget-nav-menu.elementor-nav-menu--stretch>.elementor-widget-container{padding-left:0}
  #masthead .elementor-widget-nav-menu.elementor-nav-menu--stretch{margin-left:5px}
}

/* nav-mobile#8 : panneau du burger (mobile et tablette) - texte 14 px, cibles de 44 px,
   entree active / survolee / depliee en marine sur creme (15,7:1) avec un filet dore a gauche */
#masthead nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item{font-size:14px;padding-top:15px;padding-bottom:15px}
#masthead nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-sub-item{font-size:13px}
#masthead .elementor-nav-menu--dropdown a.elementor-item-active,
#masthead .elementor-nav-menu--dropdown a.highlighted,
#masthead .elementor-nav-menu--dropdown a:hover,
#masthead .elementor-nav-menu--dropdown a:focus{color:#01034A;fill:#01034A;background-color:#F1E9E0;background-image:linear-gradient(#CCAF8F,#CCAF8F);background-size:3px 100%;background-repeat:no-repeat;background-position:0 0;background-origin:border-box}
/* revérif nav-mobile : Elementor arrondit de 2px le 1er et le dernier lien du menu deroulant (reglage
   « Dropdown border radius » du widget 3926b5b). Le 1er sous-lien surligne laissait voir le blanc du
   sous-menu dans son coin : le filet dore etait coupe a la jonction avec le parent surligne. */
#masthead nav.elementor-nav-menu--dropdown a{border-radius:0}
/* revérif nav-mobile#8 (suite) : selecteur de langue de l'en-tete, cibles tactiles de 44 px sur mobile
   et tablette (entrees de 21 px et bouton de 28 px avant). L'en-tete garde sa hauteur de 81 px. */
@media (max-width:1024px){
  #masthead .cpel-switcher__list .cpel-switcher__lang a{padding-top:11px;padding-bottom:11px;line-height:22px}
  #masthead .cpel-switcher__toggle>a{padding-top:10px;padding-bottom:10px;line-height:24px}
}

/* nav-mobile#2 : un tap sur le chevron (svg) doit replier le sous-menu, pas suivre le lien parent.
   SmartMenus ne reconnait que la cible span.sub-arrow ; zone tactile portee a ~44 px sans changer la hauteur. */
#masthead .elementor-nav-menu .sub-arrow svg,
#masthead .elementor-nav-menu .sub-arrow i{pointer-events:none}
#masthead nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-arrow{padding:17px;margin-top:-17px;margin-bottom:-17px}

/* langues#9 : la fleche du selecteur suit la couleur du lien (marine sur fond blanc au survol / focus) */
#masthead .cpel-switcher__lang a:hover .cpel-switcher__icon,
#masthead .cpel-switcher__lang a:focus .cpel-switcher__icon{color:inherit}

/* ================================================================
   g-anim : colonnes de bio des fiches avocats, animations d'entree
   ================================================================ */
/* align-contenu#1 align-contenu#2 align-contenu#10 cta-externes#2 mailto-tel#1 :
   colonnes de bio des 24 pages avocats (data-anim-child="slide-right delay-3" dans un
   [data-anim-wrap]). L'animation d'apparition du theme Hellix n'est jamais lancee
   (window.onload affecte apres load, jamais appele) : la colonne restait a opacity:0,
   translate3d(-34px) et pointer-events:none, et le wrap en pointer-events:none.
   On fige l'etat final voulu par le theme (.is-in-view) : visible, en place, cliquable.
   Aucune autre page du site ne porte data-anim / data-anim-child / data-anim-wrap. */
[data-anim-wrap]{pointer-events:auto}
[data-anim^=slide-],[data-anim-child^=slide-],[data-anim^=fade],[data-anim-child^=fade]{opacity:1;transform:none;pointer-events:auto;transition:none}

/* widgets#1 align-contenu#3 : garde-fou si une section etiree garde l'animation
   fadeInRight (page non patchee, re-export WordPress). La translation de 100 % fausse
   le calcul de StretchElement (left:-Wpx fige = page blanche) et elargit le viewport
   mobile a 780 px. Un fondu simple, sans translation, supprime la course. */
.elementor-section-stretched.animated.fadeInRight{animation-name:fadeIn}

/* revérif align-contenu#2 : colonnes de bio des pages avocats.
   - mobile : texte justifie dans 290 px = blancs de 30 a 38 px entre les mots -> aligne a gauche ;
   - tablette 768-991 : la colonne (col-md-10, 83 %) restait calee a gauche d'un conteneur centre -> pleine largeur ;
   - desktop : le conteneur du theme (1330 px) decalait le texte par rapport a l'en-tete (grille de 1180-1200 px)
     -> meme grille : le bord gauche du texte tombe sous le logo, a toutes les largeurs testees (1040 a 1920). */
@media (max-width:767px){[data-anim-child] .elementor-widget-text-editor p,[data-anim-child] .elementor-widget-text-editor li{text-align:left}}
@media (min-width:768px) and (max-width:991px){[data-anim-wrap]>.elementor-container>[data-anim-child].col-md-10{flex:0 0 100%;max-width:100%}}
@media (min-width:1025px){.elementor-top-section>.elementor-container.container:has([data-anim-wrap]){max-width:min(1210px,calc(100% - 10px))}}

/* ================================================================
   g-layout : mise en page du contenu (tableau cookies, noms, grille equipe, popups)
   ================================================================ */
/* ===== g-layout : mise en page du contenu ===== */

/* align-contenu#4 : tableau de la politique cookies (FR/EN/NL). Les width="537/113/282/142"
   collés depuis Word servent de largeur minimale en table-layout:auto : 537 px sur un écran de 390.
   Sous 768 px, le tableau suit la largeur de la colonne, et sous 360 px les marges internes
   se resserrent (NL : « taalinstellingen », « doelstelling »). Le bureau garde ses 537 px. */
@media (max-width:767px){
  .elementor-widget-text-editor table[width]{width:100% !important;max-width:100%}
  .elementor-widget-text-editor table[width] td{width:auto !important;padding:10px 8px;text-align:left;vertical-align:top}
}
@media (max-width:359px){
  .elementor-widget-text-editor table[width] td{padding:8px 4px}
}

/* align-contenu#8 : noms des avocats en h2 de 40 px sur mobile ; « Vandenbossche » (294 px)
   ne tient pas dans 290 px et break-words le coupe sans trait d'union. On réduit la taille sous
   768 px : 28 px à 320, 35 px à 390, 40 px maximum. Seuls les noms (fiches et listes /avocats/)
   portent ce sélecteur. */
@media (max-width:767px){
  .sectionHeading h2.elementor-heading-title{font-size:clamp(1.75rem,10vw - .25rem,2.5rem)}
}

/* align-contenu#11 : 3 pages compétences NL (familierecht 18059, handelsrecht 18036,
   vennootschapsrecht 18048). On rétablit les deux réglages mobiles des pages saines : le contenu
   passe avant la colonne latérale (column-reverse) et le menu latéral est masqué. */
@media (max-width:767px){
  .elementor-18059 .elementor-element.elementor-element-f47cb62,
  .elementor-18036 .elementor-element.elementor-element-f47cb62,
  .elementor-18048 .elementor-element.elementor-element-f47cb62{--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial}
  .elementor-18059 .elementor-element.elementor-element-5ac4f49,
  .elementor-18036 .elementor-element.elementor-element-6c74ee9,
  .elementor-18048 .elementor-element.elementor-element-74d269d{display:none !important}
}

/* align-contenu#13 + medias#6 : grille « L'équipe » des accueils FR (88f3396), EN (ff9add3)
   et NL (b513eb6). La 7e carte, seule sur sa ligne, passe dans la colonne du milieu.
   La règle ne joue que si la dernière ligne ne compte qu'une carte (7, 10, 13 cartes...).
   22/09 (demande d'Edjona) : tablette seulement ; sur ordinateur (> 1024 px) la carte reste a gauche. */
@media (min-width:768px) and (max-width:1024px){
  .e-grid.elementor-element-88f3396 > .e-con:last-child:nth-child(3n+1),
  .e-grid.elementor-element-ff9add3 > .e-con:last-child:nth-child(3n+1),
  .e-grid.elementor-element-b513eb6 > .e-con:last-child:nth-child(3n+1){grid-column:2}
}

/* align-contenu#14 : liste de contact des fiches avocats (téléphone, e-mail, LinkedIn).
   L'écart de 15 px entre lignes n'existait que sur les pages où une règle orpheline avait été
   collée (/avocats/, Esther, Noémie). On le généralise, bien ciblé : 31 px entre lignes partout. */
[data-anim-child] .elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items{row-gap:15px}
/* revérif align-contenu NEW#1 : la regle ci-dessus touchait aussi les liens legaux du pied de page (et une regle
   orpheline LiteSpeed fait de meme sur 9 pages avocats) : pied de page ramene a son espacement d'origine. */
#colophon .elementor-icon-list-items.elementor-inline-items{row-gap:normal}
/* revérif align-contenu#14 : la coupure dependait de la longueur de l'e-mail (LinkedIn seul sur sa ligne chez
   certains avocats, pas chez d'autres). Disposition choisie selon la largeur du widget, identique pour tous :
   une ligne si le widget fait 500 px ou plus, sinon une colonne (tel / e-mail / LinkedIn). Listes de contact
   seulement (celles qui contiennent un lien mailto:). */
.elementor-widget-icon-list:has(.elementor-inline-items a[href^="mailto:"]){container-type:inline-size}
@container (min-width:500px){.elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items:has(a[href^="mailto:"]){flex-wrap:nowrap}}
@container (max-width:499.98px){.elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items:has(a[href^="mailto:"]){flex-direction:column;align-items:flex-start}}

/* widgets#8 : popup avocat. Magnific Popup déplace la fenêtre hors de .ekit-wid-con : la police
   des icônes redevient celle du thème (icomoon), qui n'a pas ces glyphes. On la rétablit.
   Les icônes LinkedIn, e-mail et la croix de fermeture réapparaissent. */
.elementskit-team-popup .icon::before{font-family:elementskit !important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* widgets#4 : cartes équipe des accueils. La zone du nom (.hover-area) était en
   visibility:hidden : aucun lien atteignable au clavier. Elle reste invisible (opacity 0) et
   sans clic tant que la carte n'est ni survolée ni focalisée, mais ses liens sont dans l'ordre
   de tabulation ; le focus clavier affiche la carte comme au survol. */
.ekit-wid-con .profile-image-card .hover-area{visibility:visible;pointer-events:none}
.ekit-wid-con .profile-image-card:hover .hover-area,
.ekit-wid-con .profile-image-card:focus-within .hover-area{pointer-events:auto}
.ekit-wid-con .profile-image-card:focus-within .hover-area{opacity:1;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.ekit-wid-con .profile-image-card:focus-within::before{opacity:1;visibility:visible}
.ekit-wid-con .image-card-v2 .profile-image-card:focus-within::before{opacity:.93;-webkit-transform:scale(1);transform:scale(1)}
.ekit-wid-con .profile-image-card a:focus-visible,
.elementskit-team-popup a:focus-visible,
.elementskit-team-popup .ekit-team-modal-close:focus-visible{outline:2px solid #CCAF8F;outline-offset:3px}
.ekit-wid-con .profile-image-card{cursor:pointer}

/* revérif widgets#2 : carte avocat tapee avant la fin du chargement differe : retour visuel discret
   jusqu'a l'ouverture de la popup (pose et retiree par /al-ux.js). */
.ekit-wid-con .profile-image-card.al-card-wait{opacity:.75;cursor:progress;transition:opacity .2s}

/* ================================================================
   g-contacts : pied de page mobile, LinkedIn de l'en-tete, liens soulignes
   ================================================================ */
/* ===== g-contacts ===== */

/* align-entete#4 : pied de page sur petits mobiles. Le numero est rendu insecable par patch.py
   (+32 490 51 32 88 et 0802 595 321) ; sous 341 px la colonne Contact (moitie de largeur) est trop
   etroite pour 14 px : on reduit legerement la taille pour que la ligne tienne sans deborder a gauche. */
@media (max-width:340px){
  footer .elementor-element.elementor-element-6dbde86 .elementor-icon-list-item .elementor-icon-list-text{font-size:13px}
}
@media (max-width:319px){
  footer .elementor-element.elementor-element-6dbde86 .elementor-icon-list-item .elementor-icon-list-text{font-size:12px}
}
/* align-entete#4 : separateur orphelin en fin de ligne (liens Vie privee / Cookies / Mentions legales).
   La classe al-eol est posee par ux.js sur l'element qui termine une ligne quand la liste passe a la ligne.
   visibility (et non display) : le trait garde sa largeur de 1 px, la mise en ligne ne bouge pas (pas d'oscillation). */
footer .elementor-icon-list--layout-inline .elementor-icon-list-item.al-eol::after{visibility:hidden!important}

/* nav-desktop#3 : icone LinkedIn de l'en-tete, zone cliquable portee de 14x14 a 24x24 sans deplacer l'icone */
.elementor-element-3332e18 .elementor-icon-wrapper .elementor-icon{padding:5px;margin:-5px}

/* cta-externes#10 : liens du texte courant reconnaissables (meme gris que le texte, sans soulignement).
   Pages legales FR/EN/NL (tous les liens du texte) + liens externes et e-mails des blocs de texte. */
:is(.page-id-15446,.page-id-17811,.page-id-17822,.page-id-17957,.page-id-17949,.page-id-17971,.page-id-17956,.page-id-17950,.page-id-17972) .elementor-widget-text-editor a,
.elementor-widget-text-editor a[href^="http"],
.elementor-widget-text-editor a[href^="mailto:"]{text-decoration:underline;text-underline-offset:.15em}

/* ================================================================
   g-news : bannieres d'articles, date, liste .al-news EN/NL
   ================================================================ */
/* medias#1 : banniere des articles (modele Single Post 31, conteneur 3c9ea85) - l'image a la une
   etait posee sans taille/position/repetition (mosaique, coin haut-gauche seulement). */
.elementor-31 .elementor-element.elementor-element-3c9ea85:not(.elementor-motion-effects-element-type-background),
.elementor-31 .elementor-element.elementor-element-3c9ea85>.elementor-motion-effects-container>.elementor-motion-effects-layer{background-size:cover;background-position:center center;background-repeat:no-repeat}
/* medias#1 : portraits - garder le visage dans le bandeau (Barbara 20758, Mailys 20531) */
.postid-20758 .elementor-31 .elementor-element.elementor-element-3c9ea85:not(.elementor-motion-effects-element-type-background){background-position:center 26%}
.postid-20531 .elementor-31 .elementor-element.elementor-element-3c9ea85:not(.elementor-motion-effects-element-type-background){background-position:center 52%}

/* align-contenu#6 langues#3 widgets#10 : date des articles, desormais du texte (ancien lien vers /AAAA/MM/JJ/) -
   meme mise en page que l'ancien <a> (flex, icone centree) */
.elementor-widget-post-info .elementor-icon-list-item>.al-date{display:flex;align-items:var(--icon-vertical-align,center);font-size:inherit}

/* widgets#3 align-contenu#7 langues#1 langues#2 : liste des 12 articles FR sur /en/blog/ et /nl/bloggen/
   (autonome : ne depend d'aucune CSS de widget absente de ces pages) */
.al-news{box-sizing:border-box;width:100%;max-width:1160px;margin:0 auto;padding:8px 0 24px;text-align:left;word-spacing:normal;font-family:"Work Sans",sans-serif;color:#615e5e}
.al-news *,.al-news *::before,.al-news *::after{box-sizing:border-box}
.al-news .al-news__intro{margin:0 0 40px;max-width:760px;text-align:left;font-size:17px;line-height:1.6;color:#181d23}
.al-news .al-news__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
.al-news .al-news__item{margin:0;padding:0;list-style:none;min-width:0}
.al-news .al-news__item::before,.al-news .al-news__item::marker{content:none}
.al-news .al-news__card{position:relative;z-index:0;display:flex;flex-direction:column;height:100%;margin:0}
.al-news .al-news__thumb{position:relative;overflow:hidden;margin:0 0 18px;padding-top:83.33%;background:#01034a}
.al-news .al-news__thumb img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;object-fit:cover;object-position:center center;transition:transform .5s ease}
.al-news .al-news__body{display:flex;flex-direction:column;flex:1 1 auto}
.al-news .al-news__meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 10px;font-size:13px;line-height:1.4;color:#615e5e}
.al-news .al-news__lang{display:inline-block;padding:1px 6px;border:1px solid #ccaf8f;border-radius:2px;font-size:11px;font-weight:600;letter-spacing:.08em;line-height:1.4;color:#01034a}
.al-news .al-news__title{margin:0 0 14px;padding:0;text-align:left;hyphens:manual;font-family:"Work Sans",sans-serif;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:#181d23}
.al-news .al-news__title a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
.al-news .al-news__title a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
.al-news .al-news__title a:focus:not(:focus-visible){outline:none}
.al-news .al-news__title a:focus-visible{outline:none}
.al-news .al-news__title a:focus-visible::after{outline:2px solid #01034a;outline-offset:6px}
.al-news .al-news__more{margin-top:auto;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#01034a}
.al-news .al-news__arrow{display:inline-block;color:#ccaf8f;transition:transform .2s ease}
@media (hover:hover){
.al-news .al-news__card:hover .al-news__thumb img{transform:scale(1.04)}
.al-news .al-news__card:hover .al-news__title{color:#01034a;text-decoration:underline;text-underline-offset:3px}
.al-news .al-news__card:hover .al-news__arrow{transform:translateX(4px)}
}
@media (max-width:1024px){.al-news .al-news__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}}
@media (max-width:767px){
.al-news{padding:0 0 8px}
.al-news .al-news__intro{margin:0 0 28px;font-size:16px}
.al-news .al-news__grid{grid-template-columns:minmax(0,1fr);gap:36px}
.al-news .al-news__title{font-size:17px}
}

/* ================================================================
   g-forms : formulaire de contact
   ================================================================ */
/* ===== g-forms : formulaire de contact /contact/, /en/contact/, /nl/contact/ (widget Elementor dad7bf3) ===== */

/* formulaires#10 : champs à 16 px (sous 16 px, iOS zoome au focus). 0,2,1 bat la règle du thème « form input[type=text] » (0,1,2). */
.elementor-form input.elementor-field-textual,
.elementor-form textarea.elementor-field-textual{font-size:16px}

/* formulaires#8 + formulaires#10 : plus de padding fixe de 133 px (le bouton débordait des champs à 320-375 px et à 768 px),
   largeur bornée à 340 px (aspect desktop d'origine), hauteur tactile de 48 px (= hauteur des champs).
   0,4,1 bat « .elementor-809 .elementor-element.elementor-element-dad7bf3 .elementor-button » (0,4,0). */
body .elementor-widget-form .elementor-form .elementor-button[type=submit]{padding:0 24px;width:100%;max-width:340px;min-height:48px}
@media (max-width:767px){body .elementor-widget-form .elementor-form .elementor-button[type=submit]{max-width:none}}

/* formulaires#5 : astérisque des champs obligatoires (la règle Elementor « mark required » a été purgée de la CSS combinée).
   La 2e déclaration masque l'astérisque aux lecteurs d'écran (l'attribut required suffit) ; ignorée là où elle n'est pas comprise. */
.elementor-form .elementor-mark-required .elementor-field-required .elementor-field-label:after{content:"*";content:"*"/"";color:#b00020;padding-inline-start:.2em}
.elementor-form .al-form-note{margin:0 0 12px;font-size:14px;line-height:1.4;color:#615e5e}
@media (max-width:767px){.elementor-form .al-form-note{margin-top:10px}}

/* formulaires#5 : erreurs de validation sous chaque champ (textes posés par /al-contact.js). */
.elementor-form .al-field-err{flex-basis:100%;max-width:100%;margin-top:6px;font-size:14px;line-height:1.35;font-weight:500;color:#b00020}
.elementor-form .al-field-err[hidden]{display:none}
/* !important : la bordure vient d'une règle du widget plus spécifique (.elementor-809 … .elementor-field:not(…)). */
.elementor-form .elementor-field-group .elementor-field[aria-invalid="true"]{border-color:#b00020 !important;box-shadow:0 0 0 1px #b00020}

/* formulaires#2 : champ piège (déjà masqué par son style inline ; filet de sécurité). Pas de display:none, que certains robots sautent. */
.elementor-form .al-hp{position:absolute !important;left:-10000px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}

/* formulaires#3 : état d'envoi visible (champs estompés, curseur d'attente, roue dans le bouton). */
.elementor-form.al-sending .elementor-field-group:not(.e-form__buttons){opacity:.55;transition:opacity .2s}
.elementor-form .elementor-button[aria-disabled="true"]{cursor:progress}
.elementor-form .al-spin{display:inline-block;box-sizing:border-box;width:1em;height:1em;margin-inline-end:.55em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:al-spin .8s linear infinite}
@keyframes al-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.elementor-form .al-spin{animation-duration:2.4s}}

/* formulaires#3 : messages finaux (régions live role=status / role=alert, présentes vides dès le chargement). */
.elementor-form .al-form-msg{margin-top:14px;font-size:15px;font-weight:600;line-height:1.4}
.elementor-form .al-form-msg:empty,.elementor-form .al-form-msg.al-quiet{margin:0}
.elementor-form .al-form-msg--ok{color:#1a7f37}
.elementor-form .al-form-msg--err{color:#b00020}
.elementor-form .al-vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ================================================================
   g-cookies : bandeau cookies
   ================================================================ */
/* cookies#1 align-contenu#5 cookies#2 : bandeau cookies lisible et aux couleurs du site.
   Cause : les boutons portent cn-button-custom (classe ncookie-lg sans CSS), le style du plugin
   ne s'applique donc pas, et le reset du theme (button{padding/background:unset}) les laisse en
   noir (buttontext) sur le marine : 1,1:1. Ici : texte blanc 18,9:1, Accepter dore #CCAF8F sur
   marine 9,1:1, Refuser en contour blanc 18,9:1, cibles >= 44 px, focus visible, croix 44 px. */
#cookie-notice{font-family:"Work Sans",Sans-serif;font-size:14px;line-height:1.5;letter-spacing:0;font-weight:400;text-align:left}
#cookie-notice:not(.cookie-notice-hidden){border-top:1px solid rgba(204,175,143,.55);box-shadow:0 -8px 24px rgba(1,3,74,.22)}
#cookie-notice .cookie-notice-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 32px;position:relative;max-width:1240px;margin:0 auto;padding:14px 76px 14px 24px;text-align:left;color:#fff}
#cookie-notice #cn-notice-text{display:block;flex:1 1 340px;max-width:660px;margin:0;padding:0;color:#fff;font-size:14px;line-height:1.5}
#cookie-notice #cn-notice-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;flex:0 1 auto;margin:0}
#cookie-notice .cn-buttons-container .cn-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;min-width:44px;margin:0;padding:10px 22px;border:1px solid #fff;border-radius:0;background:transparent;color:#fff;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;box-shadow:none;text-shadow:none;outline:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
#cookie-notice .cn-buttons-container #cn-accept-cookie{background:#CCAF8F;border-color:#CCAF8F;color:#01034A}
#cookie-notice .cn-buttons-container #cn-accept-cookie:hover{background:#fff;border-color:#fff;color:#01034A}
#cookie-notice .cn-buttons-container #cn-refuse-cookie:hover{background:rgba(255,255,255,.14);color:#fff}
#cookie-notice .cn-buttons-container #cn-more-info{border-color:transparent;background:transparent;padding:10px 6px;color:#fff;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
#cookie-notice .cn-buttons-container #cn-more-info:hover{color:#CCAF8F}
#cookie-notice .cn-buttons-container .cn-button:focus{outline:none}
#cookie-notice .cn-close-icon{position:absolute;top:50%;right:16px;width:44px;height:44px;margin:-22px 0 0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;opacity:1;cursor:pointer;box-shadow:none}
#cookie-notice .cn-close-icon:focus{outline:none}
#cookie-notice .cn-close-icon:before,#cookie-notice .cn-close-icon:after{left:21px;top:13px;width:2px;height:18px;background-color:#fff}
#cookie-notice .cn-close-icon:hover:before,#cookie-notice .cn-close-icon:hover:after{background-color:#CCAF8F}
#cookie-notice .cn-buttons-container .cn-button:focus-visible,#cookie-notice .cn-close-icon:focus-visible{outline:2px solid #CCAF8F;outline-offset:2px}
@media (max-width:1024px){#cookie-notice .cookie-notice-container{justify-content:flex-start}}
@media (max-width:767px){
#cookie-notice .cookie-notice-container{display:block;padding:12px 16px 12px 16px}
#cookie-notice #cn-notice-text{max-width:none;min-height:36px;margin:0 0 10px;padding:0 40px 0 0;font-size:13px;line-height:1.45}
#cookie-notice #cn-notice-buttons{gap:8px}
#cookie-notice .cn-buttons-container .cn-button{padding:10px 14px}
#cookie-notice .cn-buttons-container #cn-more-info{flex:1 1 0;min-width:auto;justify-content:flex-start;padding:6px 4px;white-space:normal;text-align:left;font-size:13px;line-height:1.35}
#cookie-notice .cn-close-icon{top:4px;right:4px;margin:0}
}
/* cookies#5 : tant que le bandeau est affiche, le pied de page reserve sa hauteur (mesuree par
   /al-ux.js dans --al-cn-h) : les liens Vie privee / Cookies / Mentions legales restent visibles. */
html.al-cn-on #colophon{padding-bottom:var(--al-cn-h,0px)}
/* nav-mobile#5 : menu mobile ouvert = bandeau masque (il revient a la fermeture du menu), sinon il
   couvre les dernieres entrees quand « Avocats » est deplie. html.al-menu-open est pose par /al-ux.js,
   qui ne compte que les burgers visibles (pas de :has ici : il retenait le burger de l'en-tete masque
   apres une rotation d'ecran, et le bandeau restait cache sans aucun menu a l'ecran). */
@media (max-width:1024px){
html.al-menu-open #cookie-notice{visibility:hidden;pointer-events:none}
}

/* cookies#1 (conformité APD / EDPB) : Accepter et Refuser strictement identiques (même couleur, même taille, même survol) */
#cookie-notice .cn-buttons-container #cn-refuse-cookie{background:#CCAF8F;border-color:#CCAF8F;color:#01034A}
#cookie-notice .cn-buttons-container #cn-refuse-cookie:hover{background:#fff;border-color:#fff;color:#01034A}

/* ================================================================
   g-lang-js : selecteur de langue (clavier)
   ================================================================ */
/* langues#7 : liste du selecteur de langue repliee = hors tabulation et hors arbre d'accessibilite.
   La classe al-cpel est posee par ux.js uniquement quand le CSS du plugin replie vraiment la liste
   (max-height:0) ; la transition de visibility suit celle de max-height (0,3 s a la fermeture). */
.cpel-switcher__nav.al-cpel .cpel-switcher__list{visibility:hidden;transition:max-height .3s ease-out,visibility 0s linear .3s}
.cpel-switcher__nav.al-cpel .cpel-switcher__toggle--on+.cpel-switcher__list{visibility:visible;transition:max-height .4s ease-in,visibility 0s linear 0s}
/* langues#7 : anneau de focus visible sur le bouton et les langues au clavier */
.cpel-switcher__nav a:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
