/* CercleKit — Menu simple : un menu WordPress rendu en barre horizontale, les
 * entrées à enfants ouvrant un déroulé ; sous le point de rupture, la barre se
 * replie en burger et le menu devient un TIROIR PLEIN ÉCRAN (logo, titre,
 * entrées à chevrons, pied de page à boutons).
 *
 * JETONS. Aucune mesure de design n'est écrite en dur : rayons, espacements et
 * ombres passent par les jetons du SITE (--ck-radius*, --ck-space-*,
 * --ck-shadow*) avec, en repli, leur valeur d'aujourd'hui — un site qui n'a
 * rien réglé ne bouge pas, un site qui règle ses jetons voit le menu suivre.
 * Les COULEURS viennent des contrôles Elementor.
 *
 * ⚠ LES `!important` DES BOUTONS NE SONT PAS DU CONFORT. Un thème qui style
 * `button` ou `[type="button"]` a la MÊME spécificité (0,1,0) qu'une classe et
 * gagne par ORDRE DE CHARGEMENT : sans eux, le burger reste affiché en desktop
 * et prend l'habillage du thème. Le Menu CercleKit s'est fait avoir deux fois
 * sur ce point exact (voir cercle-menu.css) — même canon ici.
 *
 * Moteur : assets/widgets/cercle-menu-simple/cercle-menu-simple.js
 */

.ckms{
  /* Mesures — jetons du site */
  --ckms-gap:        var(--ck-space-xs, 4px);
  --ckms-pad-y:      var(--ck-space-sm, 8px);
  --ckms-pad-x:      var(--ck-space-md, 12px);
  --ckms-radius:     var(--ck-radius-sm, 4px);
  --ckms-sub-radius: var(--ck-radius, 8px);
  /* TOUJOURS 0 (décision Kévin, 4.2.716) : un déroulé n'a pas de marge
     interne, l'item remplit toute la largeur du panneau — la respiration se
     règle par « Marge interne d'un item », pas par un liseré de panneau.
     L'ancien contrôle « Marge du panneau » n'est plus lu (donnée conservée). */
  --ckms-sub-pad:    0px;
  --ckms-sub-shadow: var(--ck-shadow, 0 4px 20px rgba(0, 0, 0, .08));
  --ckms-sub-gap:    var(--ck-space-xs, 4px);   /* écart barre ↔ déroulé */
  --ckms-sub-min:    12.5rem;
  --ckms-caret:      .75em;
  --ckms-dur:        200ms;

  /* Couleurs de la barre — posées par les contrôles. Replis neutres : hériter
     du contexte plutôt qu'imposer une teinte au site du client. */
  --ckms-text:       inherit;
  --ckms-text-h:     inherit;
  --ckms-text-a:     inherit;
  --ckms-bg:         transparent;
  --ckms-bg-h:       transparent;
  --ckms-sub-bg:     #fff;          /* un déroulé doit être opaque : repli seul */
  --ckms-sub-text:   inherit;
  --ckms-sub-text-h: inherit;
  --ckms-sub-bg-h:   transparent;
  --ckms-line:       transparent;

  /* Burger */
  --ckms-burger-color:      currentColor;
  --ckms-burger-color-open: var(--ckms-burger-color);
  --ckms-burger-w:          1.75rem;
  --ckms-burger-bar:        2px;
  --ckms-burger-radius:     var(--ck-radius-pill, 999px);
  --ckms-burger-pad:        var(--ck-space-xs, 4px);
  --ckms-burger-bg:         transparent;

  /* Tiroir mobile */
  --ckms-drawer-bg:       #fff;     /* un tiroir plein écran doit être opaque */
  --ckms-drawer-pad:      var(--ck-space-xl, 24px);
  --ckms-drawer-title:    inherit;
  --ckms-drawer-item-pad: var(--ck-space-lg, 16px);
  --ckms-drawer-gap:      var(--ck-space-xl, 24px);

  /* Pied du tiroir */
  --ckms-foot-bg:    transparent;
  --ckms-foot-text:  inherit;
  --ckms-foot-line:  transparent;
  --ckms-foot-pad:   var(--ck-space-xl, 24px);
  --ckms-foot-gap:   var(--ck-space-md, 12px);
  --ckms-foot-radius: 0px;

  position:relative;
  display:block;
  font:inherit;
}
.ckms *,.ckms *::before,.ckms *::after{box-sizing:border-box;}

/* ─────────────────────────── La barre ─────────────────────────── */

.ckms__list{list-style:none;margin:0;padding:0;}
.ckms__list--root{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--ckms-gap);
}

.ckms__item{position:relative;margin:0;}

/* Ligne « lien + chevron » : le lien reste un vrai lien (il navigue), le chevron
   est un bouton distinct (il ouvre). Sans ça, un parent qui est AUSSI une page
   devient inatteignable — le défaut classique des menus déroulants. */
.ckms__row{display:flex;align-items:center;}

.ckms .ckms__link{
  display:inline-flex !important;align-items:center;
  min-height:0 !important;width:auto !important;
  margin:0 !important;padding:var(--ckms-pad-y) var(--ckms-pad-x);
  background:var(--ckms-bg) !important;color:var(--ckms-text);
  border:0 !important;border-radius:var(--ckms-radius) !important;box-shadow:none !important;
  font:inherit;line-height:1.3;text-align:left;text-transform: none;text-decoration:none;
  cursor:pointer;
  transition:color var(--ckms-dur) ease,background var(--ckms-dur) ease;
}
.ckms .ckms__link:hover,
.ckms .ckms__link:focus-visible{
  color:var(--ckms-text-h);background:var(--ckms-bg-h) !important;outline:none;
}
/* Un lien cliqué garde le focus : sans ça il « resterait » en couleur de survol
   après la navigation (ou après un clic sur une ancre). */
.ckms .ckms__link:focus:not(:hover):not(:focus-visible){
  color:var(--ckms-text);background:var(--ckms-bg) !important;
}
.ckms__item.is-current > .ckms__row > .ckms__link{color:var(--ckms-text-a);}

/* Icône de l'accueil : posée dans le lien, elle suit sa couleur (normal,
   survol, page courante) par currentColor — rien à re-régler. */
.ckms__home-icon{
  display:inline-flex;align-items:center;flex:none;
  margin-right:var(--ckms-home-gap, .45em);
  font-size:var(--ckms-home-size, 1em);line-height:1;
}
.ckms__home-icon svg{width:1em;height:1em;display:block;}
/* « Icône seule » : le libellé sort de l'écran, pas du balisage — un lecteur
   d'écran continue d'annoncer le mot. Barre et tiroir ont chacun leur règle
   (« sur mobile on veut le mot alors que sur desktop non ») : --icon-only ne
   joue que dans la barre, --dr-icon-only que dans le tiroir. */
.ckms:not(.ckms--mobile) .ckms__link--icon-only .ckms__home-icon,
.ckms--mobile .ckms__link--dr-icon-only .ckms__home-icon{margin-right:0;}
.ckms:not(.ckms--mobile) .ckms__link--icon-only .ckms__label,
.ckms--mobile .ckms__link--dr-icon-only .ckms__label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px;white-space:nowrap;
}

/* Chevron : bouton d'ouverture. Mêmes résets que le burger, même raison. */
.ckms .ckms__toggle{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:auto !important;height:auto !important;min-height:0 !important;
  margin:0 0 0 calc(-1 * var(--ck-space-xs, 4px)) !important;
  padding:var(--ckms-pad-y) var(--ckms-pad-x) var(--ckms-pad-y) 0 !important;
  background:transparent !important;color:inherit !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  font:inherit;line-height:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.ckms .ckms__toggle:hover,.ckms .ckms__toggle:focus-visible{background:transparent !important;outline:none;}
/* DEUX icônes, jamais une rotation : l'icône « ouvert » est un dessin à part
   entière, pas la même retournée — une flèche, un « + » qui devient « − », une
   croix… Le balisage porte les deux, le CSS n'en montre qu'une. */
.ckms__caret{
  width:var(--ckms-caret);height:var(--ckms-caret);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
}
.ckms__caret svg{width:100%;height:100%;}
.ckms__caret--open{display:none;}
.ckms__item.is-open > .ckms__row > .ckms__toggle .ckms__caret--closed{display:none;}
.ckms__item.is-open > .ckms__row > .ckms__toggle .ckms__caret--open{display:inline-flex;}
/* La BARRE et le TIROIR ont chacun leur paire : dans une barre, un chevron
   descend (un panneau tombe) ; dans un tiroir, il pointe à droite (on entre
   dans une section). Les deux paires sont dans le balisage, le contexte en
   montre une — aucune rotation, aucun JS. */
.ckms:not(.ckms--mobile) .ckms__caret--dr{display:none !important;}
.ckms--mobile .ckms__caret--bar{display:none !important;}

/* ─────────────────────────── Les déroulés (bureau) ─────────────────────────── */

.ckms__sub{
  list-style:none;margin:0;
  padding:var(--ckms-sub-pad);
  min-width:var(--ckms-sub-min);
  background:var(--ckms-sub-bg);
  border-radius:var(--ckms-sub-radius);
  box-shadow:var(--ckms-sub-shadow);
}
.ckms__sub .ckms__link{
  width:100% !important;color:var(--ckms-sub-text);white-space:normal;
  /* Défaut seulement : « Marge interne d'un item » (Style › Déroulés) écrit la
     sienne par-dessus, avec les quatre cases d'Elementor. */
  padding:var(--ckms-pad-y) var(--ckms-pad-x);
}
.ckms__sub .ckms__link:hover,
.ckms__sub .ckms__link:focus-visible{
  color:var(--ckms-sub-text-h);background:var(--ckms-sub-bg-h) !important;
}
.ckms__sub .ckms__row{border-bottom:1px solid var(--ckms-line);}
.ckms__sub .ckms__item:last-child > .ckms__row{border-bottom:0;}
.ckms__link--parent{font-weight:600;}

/* ── Les coins des items ÉPOUSENT le panneau (demande de Kévin, 4.2.719) ──
 * Les items remplissent le panneau bord à bord (4.2.716) : un fond de survol
 * aux quatre coins arrondis flottait au milieu, et un fond carré dépassait
 * des coins du panneau. La règle : PREMIER item arrondi en haut seulement,
 * items du milieu carrés, DERNIER arrondi en bas seulement — au rayon du
 * PANNEAU (--ckms-sub-radius), le seul réglage d'arrondi du déroulé.
 * `.ckms__back + …` et non `:first-child` : le bouton « Retour » du tiroir
 * mobile est TOUJOURS le premier <li> du sous-menu (masqué sur le bureau,
 * mais compté par :first-child).
 * ⚠ L'ORDRE de ces règles est la mécanique : base carrée → haut → bas →
 * seul item (haut ET bas). Chacune écrase toute la précédente (shorthand),
 * à spécificité croissante ou égale. */
.ckms:not(.ckms--mobile) .ckms__sub .ckms__link{border-radius:0 !important;}
.ckms:not(.ckms--mobile) .ckms__sub > .ckms__back + .ckms__item > .ckms__row > .ckms__link{
  border-radius:var(--ckms-sub-radius) var(--ckms-sub-radius) 0 0 !important;
}
.ckms:not(.ckms--mobile) .ckms__sub > .ckms__item:last-child > .ckms__row > .ckms__link{
  border-radius:0 0 var(--ckms-sub-radius) var(--ckms-sub-radius) !important;
}
.ckms:not(.ckms--mobile) .ckms__sub > .ckms__back + .ckms__item:last-child > .ckms__row > .ckms__link{
  border-radius:var(--ckms-sub-radius) !important;
}

/* `visibility` (et pas `display`) : l'ouverture s'anime, et le déroulé fermé
   reste hors du parcours clavier — ce que `opacity:0` seul ne donne pas. */
.ckms:not(.ckms--mobile) .ckms__sub{
  position:absolute;top:100%;left:0;z-index:100;
  margin-top:var(--ckms-sub-gap);
  opacity:0;visibility:hidden;transform:translateY(calc(-1 * var(--ck-space-xs, 4px)));
  transition:opacity var(--ckms-dur) ease,transform var(--ckms-dur) ease,visibility var(--ckms-dur);
}
.ckms:not(.ckms--mobile) .ckms__item.is-open > .ckms__sub{
  opacity:1;visibility:visible;transform:translateY(0);
}
/* Niveau 3 et au-delà : en éventail sur le côté. */
.ckms:not(.ckms--mobile) .ckms__sub .ckms__sub{
  top:calc(-1 * var(--ckms-sub-pad));left:100%;
  margin:0 0 0 var(--ckms-sub-gap);
  transform:translateX(calc(-1 * var(--ck-space-xs, 4px)));
}
.ckms:not(.ckms--mobile) .ckms__item.is-open > .ckms__sub .ckms__sub{transform:none;}
/* Le déroulé sortirait de l'écran à droite : il bascule de l'autre côté.
   Classe posée par le JS à l'ouverture (une mesure, pas une supposition). */
.ckms:not(.ckms--mobile) .ckms__sub.is-flip{left:auto;right:0;}
.ckms:not(.ckms--mobile) .ckms__sub .ckms__sub.is-flip{
  left:auto;right:100%;margin:0 var(--ckms-sub-gap) 0 0;
}
/* Pont invisible barre ↔ déroulé : sans lui, l'écart se traverse en « quittant »
   l'item et le déroulé se referme sous le curseur. */
.ckms:not(.ckms--mobile) .ckms__item--has > .ckms__sub::before{
  content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--ckms-sub-gap));
  height:var(--ckms-sub-gap);
}

/* ─────────────────────────── Le burger ───────────────────────────
 * Canon repris du Menu CercleKit : display, fond, bordure, padding et couleur
 * en !important — un reset de thème sur `button`/`[type="button"]` a la même
 * spécificité qu'une classe et passerait devant. */

.ckms__burger{display:none !important;}

.ckms--mobile .ckms__burger{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:auto !important;height:auto !important;min-height:0 !important;
  padding:var(--ckms-burger-pad) !important;margin:0 !important;
  background:var(--ckms-burger-bg) !important;
  border:0 !important;box-shadow:none !important;
  border-radius:var(--ckms-radius) !important;
  color:var(--ckms-burger-color) !important;
  cursor:pointer;line-height:0;
  -webkit-appearance:none;appearance:none;
  /* AU-DESSUS du tiroir : c'est le même bouton qui ouvre et qui ferme. */
  position:relative;z-index:100001;
}
.ckms__burger:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

/* Libellé à côté du burger (« MENU »). Il vit DANS le bouton : un mot posé à
   côté serait un second élément à aligner, et ne réagirait pas au clic.
   `!important` sur display ET color — même canon que le bouton : le mot est un
   <span> DANS un <button>, et un thème qui style `button span` (0,1,1) bat
   `.ckms__burger-label` (0,1,0). C'est ce qui pouvait faire disparaître le mot
   sur un site au thème bavard alors qu'il s'affichait sur le banc local. */
.ckms__burger-label{
  display:none !important;
  line-height:1;white-space:nowrap;
  color:var(--ckms-burger-color) !important;
  /* Décalage vertical réglable (« Décalage vertical du mot ») : un mot en
     capitales ou une typo à l'x-height inhabituelle ne tombe jamais pile sur
     l'axe optique des barres — le réglage rattrape ça. Transform : ne bouge
     ni la hauteur du bouton ni l'alignement flex. */
  transform:translateY(var(--ckms-burger-label-dy, 0px));
}
.ckms--mobile .ckms__burger-label{display:inline-block !important;}
.ckms.is-drawer-open .ckms__burger-label{color:var(--ckms-burger-color-open) !important;}
.ckms--mobile .ckms__burger{gap:var(--ckms-burger-gap, var(--ck-space-sm, 8px));}
.ckms__burger--label-before .ckms__bars{order:2;}

/* La hauteur du bloc DÉRIVE de l'espace entre les barres : n×barre +
   (n−1)×espace. `--ckms-burger-space` (le contrôle « Espace entre les
   barres ») vaut pour 2 et 3 barres ; son REPLI recalcule l'espace qui donne
   la hauteur historique 0,62×largeur — un site qui ne règle rien garde son
   burger au pixel près, en 2 comme en 3 barres (les deux replis diffèrent
   pour ça). Les barres restent posées en absolu haut / milieu / bas : à
   hauteur juste, l'espacement est uniforme sans bouger leurs ancres. */
.ckms__bars{
  --ckms-bsp: var(--ckms-burger-space, calc((var(--ckms-burger-w) * .62 - 3 * var(--ckms-burger-bar)) / 2));
  position:relative;display:block;
  width:var(--ckms-burger-w);
  height:calc(3 * var(--ckms-burger-bar) + 2 * var(--ckms-bsp));
}
.ckms__bars--2{
  --ckms-bsp: var(--ckms-burger-space, calc(var(--ckms-burger-w) * .62 - 2 * var(--ckms-burger-bar)));
  height:calc(2 * var(--ckms-burger-bar) + var(--ckms-bsp));
}
/* Barres peintes par la VARIABLE, pas par `currentColor` : un reset de thème
   `[type="button"]{color:…}` teinterait sinon les barres. */
.ckms__bars i{
  position:absolute;left:0;width:100%;height:var(--ckms-burger-bar);
  background:var(--ckms-burger-color);border-radius:var(--ckms-burger-radius);
  transition:transform var(--ckms-dur) ease,opacity calc(var(--ckms-dur) * .6) ease,background-color var(--ckms-dur) ease;
}
/* Positions CALCULÉES, pas de pourcentage : `top:50% + translateY(-50%)` se
   rendait en sous-pixel (un transform ne s'arrondit pas) pendant que les
   barres haut/bas étaient arrondies par le layout — à mesures impaires, les
   deux écarts ne tombaient pas pareil à l'écran (remonté par Kévin). Ici les
   trois barres sortent de la même arithmétique : écarts égaux par
   construction. */
.ckms__bars i:nth-child(1){top:0;}
.ckms__bars i:nth-child(2){top:calc(var(--ckms-burger-bar) + var(--ckms-bsp));}
.ckms__bars i:nth-child(3){bottom:0;}

/* Le burger DEVIENT la croix. */
.ckms.is-drawer-open .ckms__burger{color:var(--ckms-burger-color-open) !important;}
.ckms.is-drawer-open .ckms__bars i{background:var(--ckms-burger-color-open);}
.ckms.is-drawer-open .ckms__bars i:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
.ckms.is-drawer-open .ckms__bars i:nth-child(2){opacity:0;}
.ckms.is-drawer-open .ckms__bars i:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);}

/* DEUX barres. ⚠ CE BLOC DOIT RESTER APRÈS celui du trois-barres : à
   spécificité égale, c'est l'ordre qui tranche, et la règle générique
   `…is-drawer-open .ckms__bars i:nth-child(2){opacity:0}` effaçait sinon la
   SECONDE barre — la croix n'avait plus qu'un trait. Même piège que les
   animations du tiroir. */
.ckms__bars--2 i:nth-child(1){top:0;}
.ckms__bars--2 i:nth-child(2){top:auto;bottom:0;transform:none;}
.ckms.is-drawer-open .ckms__bars--2 i:nth-child(1){top:50%;bottom:auto;opacity:1;transform:translateY(-50%) rotate(45deg);}
.ckms.is-drawer-open .ckms__bars--2 i:nth-child(2){top:50%;bottom:auto;opacity:1;transform:translateY(-50%) rotate(-45deg);}

/* ─────────────────────────── Le tiroir plein écran ─────────────────────────── */

/* Chrome du tiroir : n'existe QUE sous le point de rupture. `!important` pour la
   même raison que le burger — le contenu est du texte et des images, mais le
   masquage doit être hors d'atteinte du thème. */
.ckms__drawer-head,.ckms__title,.ckms__foot{display:none !important;}

.ckms--mobile .ckms__panel{
  position:fixed;inset:0;z-index:100000;
  display:flex;flex-direction:column;
  gap:var(--ckms-drawer-gap);
  /* Marges PAR CÔTÉ (contrôle DIMENSIONS), repli sur l'ancien curseur
     (--ckms-drawer-pad) : un site qui avait réglé le curseur garde sa marge
     tant que le nouveau contrôle est vide. Même chaîne partout. */
  margin:0;
  padding:var(--ckms-drawer-pad-t, var(--ckms-drawer-pad))
          var(--ckms-drawer-pad-r, var(--ckms-drawer-pad))
          var(--ckms-drawer-pad-b, var(--ckms-drawer-pad))
          var(--ckms-drawer-pad-l, var(--ckms-drawer-pad));
  background:var(--ckms-drawer-bg);
  border-radius:0;box-shadow:none;
  overflow:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;
  transition:opacity var(--ckms-dur) ease,transform var(--ckms-dur) ease,visibility var(--ckms-dur);
}
/* Position de DÉPART du tiroir : fondu (défaut, aucun décalage) ou glissement.
 *
 * ⚠ CE BLOC DOIT RESTER AVANT L'ÉTAT OUVERT. `.ckms--mobile[data-drawer-fx=…]
 * .ckms__panel` et `.ckms--mobile.is-drawer-open .ckms__panel` ont la MÊME
 * spécificité (0,3,0) : c'est l'ORDRE d'écriture qui tranche. Déclaré APRÈS,
 * comme en 4.2.694, le décalage de départ gagnait même tiroir OUVERT — le
 * panneau restait hors de l'écran et n'apparaissait jamais. Un glissement
 * rendait donc le menu mobile inutilisable. */
.ckms--mobile[data-drawer-fx="right"] .ckms__panel{transform:translateX(100%);}
.ckms--mobile[data-drawer-fx="left"]  .ckms__panel{transform:translateX(-100%);}
.ckms--mobile[data-drawer-fx="top"]   .ckms__panel{transform:translateY(-100%);}

.ckms--mobile.is-drawer-open .ckms__panel{opacity:1;visibility:visible;transform:none;}

/* En-tête du tiroir : une bande VIDE, et c'est son métier. La croix est le
   burger du site — il flotte au-dessus du panneau, là où le site l'a posé. Cette
   bande réserve sa place pour que le titre ne passe pas dessous. Le LOGO du
   tiroir, lui, ne vient pas d'ici : c'est celui d'En-tête → Mobile → « Logo sur
   le tiroir mobile », posé en fixe par le module En-tête. */
.ckms--mobile .ckms__drawer-head{
  display:flex !important;align-items:center;
  /* Hauteur réservée à la croix. Par défaut elle est MESURÉE au premier
     ouvrage (--ckms-head-auto, posée par le JS) : la croix, c'est le burger, et
     il est là où le site a posé le widget — sous un logo, dans une barre haute,
     n'importe où. Un chiffre écrit ici serait juste sur un site et faux sur le
     suivant. Le contrôle « Hauteur réservée en haut » reprend la main dès qu'il
     est renseigné. */
  min-height:var(--ckms-drawer-head-h, var(--ckms-head-auto, 3.5rem));
  flex:0 0 auto;
}

.ckms--mobile .ckms__title{
  display:block !important;
  margin:0;padding:0 0 var(--ckms-item-pad-b, var(--ckms-drawer-item-pad));
  border-bottom:1px solid var(--ckms-drawer-line, var(--ckms-line));
  color:var(--ckms-drawer-title);
  flex:0 0 auto;
}

/* Le CORPS { titre + entrées } occupe la place libre entre l'en-tête et le
   pied : c'est LUI qui porte le placement vertical du contenu (haut / centre /
   bas) — avant, le réglage ne déplaçait que la liste, et le titre restait
   collé en haut, hors du calcul (remonté par Kévin). En colonne flex,
   `justify-content` place le bloc entier ; le `gap` reprend l'écart que le
   panneau mettait entre le titre et la liste quand ils étaient ses enfants
   directs. `position:relative` : c'est la SCÈNE des sous-tiroirs — un
   sous-tiroir ouvert recouvre donc { titre + entrées }, d'un seul tenant. */
.ckms--mobile .ckms__body{
  display:flex;flex-direction:column;
  gap:var(--ckms-drawer-gap);
  flex:1 1 auto;min-height:0;
  position:relative;overflow:hidden;
  justify-content:var(--ckms-drawer-valign, flex-start);
}
.ckms--mobile .ckms__list--root{
  display:flex;flex-direction:column;
  flex:0 0 auto;
  /* La barre pose `align-items:center` — utile en ligne, désastreux en colonne :
     l'axe change, et les entrées se retrouvaient centrées EN LARGEUR, réduites à
     la largeur de leur texte, séparateurs compris. */
  align-items:stretch;
}
.ckms--mobile .ckms__item{position:static;}
/* Le chevron se colle AU MOT (flex-start), il ne part plus à l'autre bout de
   la ligne (space-between) — demande de Kévin : l'œil lit « mot + flèche »,
   pas « mot ......... flèche ». Toute la ligne reste cliquable : le JS ouvre
   aussi au clic sur le FOND de la ligne, pas seulement sur le lien. */
.ckms--mobile .ckms__row{
  justify-content:flex-start;
  border-bottom:1px solid var(--ckms-drawer-line, var(--ckms-line));
}
/* …mais `justify-content` seul ne suffisait pas : le lien du tiroir est en
   `width:100% !important` (plein doigt pour les items SANS enfants) et
   poussait le chevron en bout de ligne quand même (mesuré : chevron à 339px
   pour un mot fini à 86). Sur un item À enfants, le lien reprend sa largeur
   de contenu — le chevron vient se coller au mot. */
.ckms--mobile .ckms__item--has > .ckms__row > .ckms__link{
  width:auto !important;flex:0 1 auto;
}
/* Le survol de la LIGNE colore le mot ET le chevron ensemble : le chevron est
   un <button> voisin du lien, un survol posé sur le seul lien le laissait à
   l'ancienne couleur (remonté par Kévin). `!important` sur le chevron : sa
   couleur de base est `inherit !important` (canon des boutons). */
.ckms--mobile .ckms__row:hover .ckms__link,
.ckms--mobile .ckms__row:hover .ckms__toggle{
  color:var(--ckms-drawer-text-h, var(--ckms-sub-text-h)) !important;
}
/* Les couleurs du TIROIR retombent sur celles des déroulés tant qu'on ne les a
   pas réglées : un site qui n'a habillé que ses déroulés garde un tiroir juste.
   (D'où l'absence de `--ckms-drawer-text` dans le bloc `.ckms` : une variable
   déclarée là aurait une valeur, et le repli ne jouerait jamais.) */
.ckms--mobile .ckms__link{
  width:100% !important;color:var(--ckms-drawer-text, var(--ckms-sub-text));
  padding:var(--ckms-item-pad-t, var(--ckms-drawer-item-pad))
          var(--ckms-item-pad-r, 0px)
          var(--ckms-item-pad-b, var(--ckms-drawer-item-pad))
          var(--ckms-item-pad-l, 0px) !important;
}
.ckms--mobile .ckms__link:hover,
.ckms--mobile .ckms__link:focus-visible{
  color:var(--ckms-drawer-text-h, var(--ckms-sub-text-h));background:transparent !important;
}
.ckms--mobile .ckms__toggle{
  padding:var(--ckms-item-pad-t, var(--ckms-drawer-item-pad)) 0
          var(--ckms-item-pad-b, var(--ckms-drawer-item-pad)) 0 !important;
  /* Une petite respiration entre le mot et le chevron (demande de Kévin) —
     le chevron collé au ras de la dernière lettre se lisait comme un
     caractère de plus. */
  margin:0 0 0 var(--ck-space-xs, 4px) !important;
}

/* SOUS-TIROIRS : sur mobile, un sous-menu ne se déplie pas sous son parent — il
   GLISSE par-dessus la liste, et un bouton « retour » ramène en arrière. Même
   principe que le Menu à tiroirs. Un accordéon repoussait tout le menu vers le
   bas et obligeait à défiler pour retrouver ce qu'on venait d'ouvrir. */
.ckms--mobile .ckms__sub{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  /* Le sous-tiroir SUIT le placement du tiroir : contenu centré → sous-tiroir
     centré. Sans ça, il se plaquait en haut de la scène pendant que le niveau
     au-dessus était au centre (remonté par Kévin). */
  justify-content:var(--ckms-drawer-valign, flex-start);
  min-width:0;margin:0;padding:0;
  background:var(--ckms-drawer-bg);
  border-radius:0;box-shadow:none;
  overflow:auto;-webkit-overflow-scrolling:touch;
  height:auto;
  transform:translateX(100%);
  transition:transform var(--ckms-dur) ease;
}
.ckms--mobile .ckms__item.is-open > .ckms__sub{transform:translateX(0);}
.ckms--mobile .ckms__sub .ckms__row{border-bottom:1px solid var(--ckms-drawer-line, var(--ckms-line));}
.ckms--mobile .ckms__sub .ckms__link{
  padding:var(--ckms-item-pad-t, var(--ckms-drawer-item-pad))
          var(--ckms-item-pad-r, 0px)
          var(--ckms-item-pad-b, var(--ckms-drawer-item-pad))
          var(--ckms-item-pad-l, 0px) !important;
}

/* ── Réseaux sociaux du tiroir ──
 * Le MÊME balisage et la MÊME feuille que le widget « Réseaux sociaux
 * CercleKit » (.ck-social) : l'enveloppe .ckms__social porte les classes de
 * forme/effet/marque, la feuille cercle-social fait le reste. N'existe que
 * dans le tiroir — la barre bureau n'en veut pas. */
.ckms__social{display:none !important;}
.ckms--mobile .ckms__social{display:block !important;flex:0 0 auto;}
/* Dans le PIED depuis la 4.2.709 : sans réglage propre, la rangée suit
   « Alignement des éléments » du pied — le contrôle « Alignement » des
   réseaux, plus spécifique, reprend la main s'il est réglé. */
.ckms--mobile .ckms__social .ck-social{justify-content:var(--ckms-foot-halign, flex-start);}
.ckms__social--empty{opacity:.6;font-size:.85em;}

/* Le bouton « retour », en tête du sous-tiroir. Il n'existe QUE sur mobile :
   sur le bureau, le déroulé se ferme en s'éloignant. */
.ckms__back{display:none !important;}
.ckms--mobile .ckms__back{display:block !important;}
.ckms--mobile .ckms .ckms__back-btn,
.ckms--mobile .ckms__back-btn{
  display:inline-flex !important;align-items:center;gap:var(--ck-space-sm, 8px);
  width:auto !important;height:auto !important;min-height:0 !important;
  margin:0 !important;
  padding:var(--ckms-item-pad-t, var(--ckms-drawer-item-pad))
          var(--ckms-item-pad-r, 0px)
          var(--ckms-item-pad-b, var(--ckms-drawer-item-pad))
          var(--ckms-item-pad-l, 0px) !important;
  background:transparent !important;color:var(--ckms-drawer-text, var(--ckms-sub-text)) !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  font:inherit;text-transform: none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.ckms__back-btn svg{width:var(--ckms-caret);height:var(--ckms-caret);flex:0 0 auto;}

/* Pied du tiroir : le bloc d'appel (titre + boutons). Il déborde volontairement
   la marge du panneau (marges négatives) pour aller au bord de l'écran, comme
   un bandeau — sinon un fond sombre laisserait une bande claire sur les côtés. */
/* Colonne à gouttière : l'écart vit dans le `gap` du bloc, pas dans les marges
   du trait. Avant, couper le trait supprimait AUSSI l'espacement — le réglage
   « Écart entre les éléments » ne pilotait donc rien dans ce cas. */
.ckms--mobile .ckms__foot{
  display:flex !important;flex-direction:column;
  gap:var(--ckms-foot-gap);
  flex:0 0 auto;
  min-height:var(--ckms-foot-minh, 0px);
  justify-content:var(--ckms-foot-valign, flex-start);
  /* Alignement HORIZONTAL des éléments (« Alignement des éléments ») :
     align-items place les blocs, text-align suit pour les lignes qui
     débordent. Repli `stretch` = le comportement d'avant le réglage. */
  align-items:var(--ckms-foot-halign, stretch);
  text-align:var(--ckms-foot-ta, inherit);
  margin:0 calc(-1 * var(--ckms-drawer-pad-r, var(--ckms-drawer-pad)))
           calc(-1 * var(--ckms-drawer-pad-b, var(--ckms-drawer-pad)))
           calc(-1 * var(--ckms-drawer-pad-l, var(--ckms-drawer-pad)));
  padding:var(--ckms-foot-pad-t, var(--ckms-foot-pad))
          var(--ckms-foot-pad-r, var(--ckms-foot-pad))
          var(--ckms-foot-pad-b, var(--ckms-foot-pad))
          var(--ckms-foot-pad-l, var(--ckms-foot-pad));
  background:var(--ckms-foot-bg);
  border-radius:var(--ckms-foot-radius);
  color:var(--ckms-foot-text);
}
.ckms__foot-title{margin:0;color:var(--ckms-foot-text);}
.ckms__foot-sep{
  height:1px;margin:0;width:100%;
  background:var(--ckms-foot-line);border:0;
}
.ckms__foot-actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--ckms-foot-gap);
  /* Suit l'alignement du pied : des boutons sur plusieurs lignes se rangent
     du même côté que le reste. `flex-start` en repli = l'existant. */
  justify-content:var(--ckms-foot-halign, flex-start);
}

/* ── Éditeur : le chrome de dépôt d'Elementor s'efface tiroir ouvert ──
 * Les boîtes « Glissez un widget ici » (conteneur vide, z-index:1) et la zone
 * d'ajout de section vivent dans le contexte d'empilement RACINE. Le tiroir, à
 * z-index:100000, est PLAFONNÉ par le contexte de son ancêtre : dès que le
 * conteneur d'en-tête du site porte un petit z-index (réglage courant), la
 * boîte de dépôt — plus tard dans le DOM — s'incruste PAR-DESSUS le tiroir
 * ouvert (capture de Kévin, 4.2.696). On ne se bat pas à coups de z-index :
 * `ck-panel-open` est déjà posé sur <html> quand un panneau est ouvert, et le
 * tiroir recouvre l'écran — ce chrome est invisible de toute façon. Il
 * revient à la fermeture, avec la classe. `visibility` et non `display` :
 * ne pas faire bouger la mise en page de l'éditeur sous le tiroir. */
html.ck-panel-open body.elementor-editor-active .elementor-empty-view,
html.ck-panel-open body.elementor-editor-active .elementor-add-section{
  visibility:hidden !important;
}

/* ⚠ NE PAS remettre de règle « à plat dans l'éditeur ».
 * Essayé en 4.2.691 : le panneau passait en `static` sous
 * `body.elementor-editor-active` pour pouvoir le styler. Résultat en vue
 * mobile — le tiroir était DÉPLIÉ d'entrée, cachait tout le reste, et n'était
 * même plus en plein écran : on ne pouvait donc ni travailler à côté, ni voir
 * ce que le tiroir donne vraiment. L'éditeur montre le MÊME tiroir que le
 * site : fermé au départ, plein écran quand le burger l'ouvre, refermé par la
 * croix. */

/* ── Verrou de défilement ──
 * Le tiroir couvre l'écran : sans ça, la page continue de défiler DERRIÈRE lui. */
html.ckms-lock{overflow:hidden !important;touch-action:none;}

/* ─────────────────────────── Aperçu éditeur ─────────────────────────── */

.ckms--empty{
  padding:var(--ck-space-md, 12px) var(--ck-space-lg, 16px);
  border:1px dashed currentColor;border-radius:var(--ck-radius, 8px);
  opacity:.6;
}