/* Skill Menu - modele Pilule
   Les valeurs ci-dessous sont les defauts du modele. Les reglages enregistres
   dans l'administration sont ecrits plus tard dans la page et les remplacent. */

.skm-shell,
.skm-nav {
  --skm-bar-bg: transparent;
  --skm-bar-max: 1160px;
  --skm-bar-top: 24px;
  --skm-bar-x: 0px;
  --skm-bar-y: 0px;

  --skm-stick-top: 0px;
  --skm-stick-bottom: 0px;
  --skm-bar-bg-stuck: #ffffff;
  --skm-stuck-pill-bg: transparent;
  --skm-stuck-link-color: #111827;
  --skm-stuck-shadow: 0 4px 20px rgba(15, 23, 42, .12);

  --skm-pill-bg: #ffffff;
  --skm-pill-shadow: 0 6px 20px rgba(15, 23, 42, .10);

  --skm-link-color: #111827;
  --skm-link-weight: 500;
  --skm-link-transform: none;
  --skm-link-spacing: 0px;
  --skm-link-size: 15px;
  --skm-link-gap: 34px;
  /* Les paliers d'adaptation RESSERRENT ces deux reglages au lieu de
     leur imposer une valeur. A 1, rien ne bouge. */
  --skm-serre-ecart: 1;
  --skm-serre-texte: 1;
  --skm-home-gap: 8px;
  --skm-home-size: 40px;

  --skm-brand-size: 20px;
  --skm-brand-color: #111827;
  --skm-brand-gap: 22px;

  /* Telephone. Memes valeurs qu'avant, en reglages. */
  --skm-burger-size: 40px;
  --skm-burger-bg: #111827;
  --skm-burger-color: #ffffff;
  --skm-tiroir-bg: #ffffff;
  --skm-tiroir-radius: 26px;

  /* La barre sur telephone. Toutes ces valeurs sont celles qui etaient
     ecrites en dur : au defaut, rien ne bouge d'un pixel. */
  --skm-m-bar-h: 52px;
  --skm-m-pill-gap: 4px;
  --skm-m-home-size: 40px;
  --skm-m-btn-size: 40px;
  --skm-m-side-gap: 8px;
  --skm-m-mega-n: 2;

  /* Le tiroir une fois deroule. */
  --skm-tiroir-ink: #111827;
  --skm-tiroir-pad: 10px;
  --skm-tiroir-item-gap: 2px;
  --skm-tiroir-item-pad: 13px;
  --skm-tiroir-item-radius: 16px;
  --skm-tiroir-item-bg: rgba(17, 24, 39, .06);
  --skm-tiroir-echelle: 1;

  --skm-active-bg: #111827;
  --skm-active-color: #ffffff;

  --skm-btn-bg: #111827;
  --skm-btn-color: #ffffff;
  --skm-btn-size: 44px;

  --skm-badge-bg: #92d050;
  --skm-badge-color: #111827;

  --skm-cta-bg: #111827;
  --skm-cta-color: #ffffff;
  --skm-cta-hover-bg: #374151;
  --skm-cta-hover-color: #ffffff;
  --skm-cta-size: 14px;
  --skm-cta-pad: 12px 22px;
  --skm-cta-weight: 600;
  --skm-cta-transform: none;
  --skm-cta-radius: 999px;

  --skm-mega-bg: #ffffff;
  --skm-mega-ink: #111827;
  --skm-mega-radius: 26px;
  --skm-mega-n: 3;
  --skm-mega-max: 100%;

  /* Taille d'une case du panneau. Les valeurs ci-dessous sont EXACTEMENT
     celles qui etaient ecrites en dur dans les regles plus bas : tant que
     personne n'y touche, le rendu ne bouge pas d'un pixel. */
  --skm-card-ratio: 1.6;
  --skm-card-gap: 16px;
  --skm-card-label: 13.5px;
  --skm-card-pad: 11px;
  /* Taille de l'image quand les entrees sont en lignes. */
  --skm-ligne-img: 64px;

  --skm-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Enveloppe ---- */

.skm-shell {
  container-type: inline-size;
  container-name: skmnav;
  width: 100%;
  /* Pas de marge laterale ICI : la coque est le conteneur des paliers, et
     sa marge interieure decalait tous les seuils de 32 px (un iPad de 768 px
     recevait les reglages telephone). La marge passe sur la barre. */
  padding: var(--skm-bar-top, 24px) 0 0;
  box-sizing: border-box;
  /* Le menu passe DEVANT le contenu de la page, dans tous les modes. Dans la
     page, il n'avait aucun ordre d'empilement : les sections du dessous
     (Elementor les empile) recouvraient le panneau deroulant. */
  position: relative;
  z-index: 1000;
}

/* Barre d'administration WordPress : le menu par-dessus ou epingle passait
   dessous, justement dans le mode ou l'on teste en etant connecte. */
body.admin-bar .skm-shell { --skm-admin-h: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
  /* Sous 600 px, la barre WordPress defile avec la page. */
  body.admin-bar .skm-shell.is-stuck { --skm-admin-h: 0px; }
}


.skm-nav { font-family: var(--skm-font, inherit); }

.skm-nav,
.skm-nav *,
.skm-nav *::before,
.skm-nav *::after { box-sizing: border-box; }

.skm-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: calc(100% - 2 * var(--skm-bord-x, 16px));
  max-width: var(--skm-bar-max);
  margin: 0 auto;
  /* Deplacement libre de la barre. `translate` et non une marge : la barre
     bouge sans changer de largeur et sans rien pousser autour d'elle. */
  translate: var(--skm-bar-x) var(--skm-bar-y);
  background: var(--skm-bar-bg);
  border-radius: 999px;
  /* Plus de `font-family: inherit` ici : il ecrasait le reglage Police,
     pose plus haut sur la meme barre, et la police choisie ne changeait rien. */
}

/* ---- Pilule : accueil + entrees ---- */

.skm-pill {
  display: flex;
  align-items: center;
  gap: var(--skm-home-gap);
  min-height: 56px;
  padding: 0 34px 0 8px;
  background: var(--skm-pill-bg);
  border-radius: 999px;
  box-shadow: var(--skm-pill-shadow);
}

.skm-home {
  display: grid;
  place-items: center;
  width: var(--skm-home-size);
  height: var(--skm-home-size);
  flex: 0 0 var(--skm-home-size);
  border-radius: 50%;
  color: var(--skm-link-color);
  text-decoration: none;
  transition: background .25s var(--skm-ease);
}

.skm-home:hover { background: rgba(17, 24, 39, .07); }
/* L'icone suit la taille du rond : 19 px pour 40, comme avant. */
.skm-home .skm-i { width: calc(var(--skm-home-size) * .475); height: calc(var(--skm-home-size) * .475); }

.skm-menu {
  display: flex;
  align-items: center;
  gap: calc(var(--skm-link-gap) * var(--skm-serre-ecart));
  margin: 0;
  padding: 0;
  list-style: none;
}

.skm-menu > li { position: static; margin: 0; }

/* DEUX REGLAGES ETAIENT MUETS ICI, et la cause tenait en deux lignes.
   Cette regle declarait `font-weight` et `letter-spacing` DEUX FOIS : une
   fois avec la variable du reglage, une fois avec une valeur en dur, plus
   bas. Dans une meme regle, c'est la derniere declaration qui gagne : la
   Graisse restait a 500 quoi qu'on choisisse, et l'Interlettrage ne bougeait
   pas d'un pixel (-.01em sur 14px, soit les -0,14px mesures).
   Le defaut d'un reglage vit dans sa VARIABLE, jamais dans une seconde
   declaration qui la recouvre. */
.skm-menu > li > a {
  display: block;
  font-weight: var(--skm-link-weight);
  text-transform: var(--skm-link-transform);
  letter-spacing: var(--skm-link-spacing);
  padding: 12px 14px;
  margin: 0 -14px;
  border-radius: 999px;
  color: var(--skm-link-color);
  font-size: calc(var(--skm-link-size) * var(--skm-serre-texte));
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s var(--skm-ease);
}

/* Le fond de survol deborde de chaque cote grace a la marge negative :
   l'espace entre les liens reste celui que vous reglez, et la pastille de
   survol a quand meme de quoi respirer. */
.skm-menu > li:not(.is-button) > a:hover {
  background: var(--skm-link-hover-bg);
  color: var(--skm-link-hover-color);
  opacity: 1;
}

.skm-menu > li.is-current > a {
  padding: 12px 26px;
  margin: 0;
  background: var(--skm-active-bg);
  color: var(--skm-active-color);
  opacity: 1;
}

/* ---- Boutons ronds ---- */

.skm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.skm-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--skm-btn-size);
  height: var(--skm-btn-size);
  flex: 0 0 var(--skm-btn-size);
  border-radius: 50%;
  background: var(--skm-btn-bg);
  color: var(--skm-btn-color);
  text-decoration: none;
  /* MEME ombre que la pilule, et la MEME variable : le reglage "Ombre" de la
     barre les pilote tous les deux. Donner sa propre ombre aux pastilles
     aurait fait deux reglages pour une seule intention, et ils auraient
     fini par ne plus se ressembler. */
  box-shadow: var(--skm-pill-shadow);
  transition: transform .25s var(--skm-ease), filter .25s var(--skm-ease),
              box-shadow .25s var(--skm-ease);
}

.skm-btn:hover {
  background: var(--skm-btn-hover-bg);
  color: var(--skm-btn-hover-color);
}
.skm-btn .skm-i { width: 18px; height: 18px; }

.skm-btn__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  /* Taille reglable (Panier > Taille de la bulle). 19 px, 11 px de chiffre :
     les valeurs d'avant, au defaut. */
  min-width: var(--skm-badge-size, 19px);
  height: var(--skm-badge-size, 19px);
  padding: 0 calc(var(--skm-badge-size, 19px) * .26);
  border-radius: 999px;
  background: var(--skm-badge-bg);
  color: var(--skm-badge-color);
  font-size: calc(var(--skm-badge-size, 19px) * .58);
  font-weight: 700;
  line-height: var(--skm-badge-size, 19px);
  text-align: center;
}

/* ---- Bouton menu (mobile) ---- */

/* ---- Blindage contre les styles de bouton du theme ----
   Les pastilles sont des liens, sauf la Recherche : un vrai <button>. Les
   themes habillent tous les boutons (marges laterales, largeur minimale,
   majuscules, interligne) et ces regles passaient devant les notres : sur
   un site, la loupe s'etirait en ovale a cote de deux ronds parfaits. Le
   rond est donc impose ici, quel que soit le theme. */
.skm-shell button.skm-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box !important;
  width: var(--skm-btn-size) !important;
  height: var(--skm-btn-size) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--skm-btn-bg) !important;
  color: var(--skm-btn-color) !important;
  font-size: inherit !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-indent: 0 !important;
  outline-offset: 2px;
}
.skm-shell button.skm-btn:hover,
.skm-shell button.skm-btn:focus,
.skm-shell button.skm-btn[aria-expanded="true"] {
  background: var(--skm-btn-hover-bg) !important;
  color: var(--skm-btn-hover-color) !important;
}
/* Le bouton menu : sa forme est la sienne, mais le theme ne doit pas lui
   ajouter de marge, de largeur minimale ni de majuscules. */
.skm-shell button.skm-burger {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.skm-burger {
  display: none;
  width: var(--skm-burger-size);
  height: var(--skm-burger-size);
  flex: 0 0 var(--skm-burger-size);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--skm-burger-bg);
  color: var(--skm-burger-color);
  cursor: pointer;
}

.skm-burger .skm-i { width: 20px; height: 20px; flex: 0 0 auto; }

/* Avec un mot a cote de l'icone, le bouton cesse d'etre un rond : il
   s'allonge en pilule, juste assez pour le texte. */
.skm-burger__texte {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* JAMAIS DE `display` ICI.
   `.skm-burger` est `display: none` sur ordinateur, et c'est ce qui le cache.
   Cette regle est plus precise : y poser un `display` le faisait reapparaitre
   SUR ORDINATEUR des qu'on ecrivait un mot a cote, en plein milieu du menu
   deja etale. Et il n'y ouvre rien, puisque le tiroir n'existe pas a cette
   largeur. La forme est ici, l'affichage reste decide par `mobile.css`. */
.skm-burger:has(.skm-burger__texte) {
  width: auto;
  flex-basis: auto;
  padding: 0 16px 0 13px;
  border-radius: 999px;
}
/* Le remplissage, impose lui aussi : le theme ne l'elargit plus. */
.skm-shell button.skm-burger { padding: 0 !important; }
.skm-shell button.skm-burger:has(.skm-burger__texte) { padding: 0 16px 0 13px !important; border-radius: 999px !important; }

/* ---- Sous-menu : liste simple ---- */

.skm-sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--skm-mega-bg);
  border-radius: 18px;
  box-shadow: 0 20px 44px rgba(15, 23, 42, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .24s var(--skm-ease), transform .24s var(--skm-ease), visibility .24s;
}

.skm-menu > li.has-sub--list { position: relative; }

.skm-sub a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--skm-mega-ink);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.skm-sub a:hover { background: rgba(17, 24, 39, .06); }

/* ---- La marque ----
   Elle ouvre la barre. Un logo prend la hauteur reglee et garde ses
   proportions ; a defaut, le texte prend cette taille-la. */

.skm-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: var(--skm-brand-gap);
  color: var(--skm-brand-color);
  font-size: var(--skm-brand-size);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.skm-brand--img img {
  display: block;
  width: auto;
  height: var(--skm-brand-size);
  /* `max-width: 100%` du theme reduirait un logo large sur mobile : on garde
     la hauteur reglee, c'est elle qui fait foi. */
  max-width: none;
}

/* ---- Le logo dans un rond, a gauche, separe du menu ----
   Meme fond et meme ombre que la pilule et les pastilles : les trois blocs
   de la barre parlent la meme langue. */
.skm-rond {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--skm-rond-size, 56px);
  height: var(--skm-rond-size, 56px);
  margin-right: var(--skm-rond-gap, 16px);
  overflow: hidden;
  border-radius: 50%;
  background: var(--skm-pill-bg);
  box-shadow: var(--skm-pill-shadow);
  color: var(--skm-link-color);
  text-decoration: none;
}
/* Le logo est pose au centre exact du rond, en absolu : les styles d'image
   du theme (height:auto, marges, float, max-width) le decalaient vers le
   bas et la gauche. Les curseurs Horizontal / Vertical le recadrent ensuite,
   en % de la taille du rond (0 = centre). */
.skm-shell .skm-rond img,
.skm-shell .skm-rond .skm-rond__teinte {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 72% !important;
  height: 72% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translate(calc(-50% + var(--skm-rond-x, 0) * var(--skm-rond-size, 56px) / 100), calc(-50% + var(--skm-rond-y, 0) * var(--skm-rond-size, 56px) / 100)) !important;
}
.skm-shell .skm-rond .skm-rond__teinte {
  width: 62% !important;
  height: 62% !important;
}
.skm-rond__teinte {
  background: var(--skm-link-color);
  -webkit-mask: var(--skm-rond-img) center / contain no-repeat;
          mask: var(--skm-rond-img) center / contain no-repeat;
}
/* Logo en texte : une pastille a la hauteur du rond, aussi large que le nom. */
.skm-rond--texte,
.skm-rond--texte.skm-rond--deborde {
  width: auto;
  min-width: var(--skm-rond-size, 56px);
  padding: 0 calc(var(--skm-rond-size, 56px) * .36);
  border-radius: 999px;
}
.skm-rond__texte {
  color: var(--skm-logo-texte-color, var(--skm-link-color));
  font-size: var(--skm-logo-texte-size, 20px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.skm-rond__initiale { font-size: calc(var(--skm-rond-size, 56px) * .38); font-weight: 800; line-height: 1; }
.skm-rond .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skm-rond--cercle { overflow: visible; box-shadow: var(--skm-pill-shadow), 0 0 0 3px var(--skm-pill-bg), 0 0 0 5px var(--skm-rond-ring, #b8954a); }
.skm-rond--cercle img, .skm-rond--cercle .skm-rond__teinte { border-radius: 50%; }
/* Il deborde : plus grand que la pilule, il depasse en haut et en bas sans
   grandir la barre. */
.skm-rond--deborde {
  width: calc(var(--skm-rond-size, 56px) + 16px);
  height: calc(var(--skm-rond-size, 56px) + 16px);
  margin-top: -8px;
  margin-bottom: -8px;
}
/* Collee au rond, la pilule laisse l'espace libre a droite. */
.skm-rond + .skm-pill { margin-right: auto; }
.skm-nav[data-align="center"] .skm-rond { grid-column: 1; justify-self: end; }
.skm-shell.is-sticky.is-recolor.is-stuck .skm-rond { background: var(--skm-stuck-pill-bg); }

/* Le texte de remplacement des lecteurs d'ecran : lu, jamais vu. Il sort de
   l'ecran au lieu d'etre en `display: none`, qui l'effacerait aussi pour eux. */
.skm-brand .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Sous-menu : panneau large ---- */

.skm-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 20px 22px 22px;
  background: var(--skm-mega-bg);
  color: var(--skm-mega-ink);
  border-radius: var(--skm-mega-radius);
  box-shadow: 0 28px 64px rgba(15, 23, 42, .22);
  max-width: var(--skm-mega-max);
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .26s var(--skm-ease), transform .26s var(--skm-ease), visibility .26s;
}

/* Pont invisible : la souris descend de la barre au panneau sans fermeture. */
.skm-panel::before {
  content: "";
  position: absolute;
  inset: -16px 0 auto 0;
  height: 16px;
}

.skm-menu > li.is-open > .skm-panel,
.skm-menu > li.is-open > .skm-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.skm-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 13px;
  margin-bottom: 17px;
  border-bottom: 1px solid rgba(17, 24, 39, .12);
}

.skm-panel__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Le corps du panneau : les blocs choisis pour cet onglet, dans leur ordre.
   Les pistes sont posees en style inline par le rendu, puisqu'elles dependent
   des blocs actifs. */
.skm-panel__body {
  display: grid;
  grid-template-columns: var(--skm-pistes, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.skm-panel__grid {
  display: grid;
  grid-template-columns: repeat(var(--skm-mega-n), minmax(0, 1fr));
  gap: var(--skm-card-gap);
}

/* ---- Troisieme niveau ----
   Il prend la place du corps du panneau, au lieu de s'ouvrir en dessous : le
   panneau garde sa taille, et rien ne saute sous la souris.

   ATTENTION a l'attribut `hidden` : sa regle est `display: none`, mais une
   classe qui pose `display: grid` ou `block` la bat, puisqu'elle est plus
   precise. Les deux lignes ci-dessous sont donc OBLIGATOIRES, sans quoi les
   deux niveaux s'afficheraient l'un sous l'autre, en silence. */

.skm-panel__body[hidden],
.skm-sousniveau[hidden] { display: none; }

.skm-sousniveau { display: block; }

.skm-sousniveau__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.skm-retour {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border: 1px solid rgba(17, 24, 39, .14);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .2s var(--skm-ease), background .2s var(--skm-ease);
}

.skm-retour:hover { border-color: rgba(17, 24, 39, .34); background: rgba(17, 24, 39, .04); }

.skm-retour__fleche {
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 0 1.6px 1.6px;
  transform: rotate(45deg);
}

.skm-sousniveau__titre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}

/* La fleche qui annonce qu'une carte mene a un niveau de plus. */
.skm-card__fleche {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg) translateY(1px);
  opacity: .45;
  vertical-align: middle;
  transition: opacity .2s var(--skm-ease), transform .2s var(--skm-ease);
}

.skm-card--profond:hover .skm-card__fleche {
  opacity: .9;
  transform: rotate(45deg) translate(2px, -1px);
}

/* ---- Carte de mise en avant ---- */

.skm-promo,
.skm-rdv {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border-radius: 20px;
  background: var(--skm-promo-bg, linear-gradient(158deg, #1f2937 0%, #0b1220 100%));
  color: var(--skm-promo-ink, #ffffff);
  text-decoration: none;
  transition: transform .3s var(--skm-ease);
}

.skm-promo:hover,
.skm-rdv:hover { transform: translateY(-3px); }

.skm-promo__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
}

.skm-promo__title {
  margin: 12px 0 9px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
}

.skm-promo__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  opacity: .62;
}

.skm-promo__btn { margin-top: auto; padding-top: 20px; }

.skm-promo__btn i {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--skm-badge-bg);
  color: var(--skm-badge-color);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
}

/* ---- Carte rendez-vous ---- */

.skm-rdv {
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 18px;
  text-align: center;
}

.skm-rdv__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--skm-badge-bg);
}

.skm-rdv__icon .skm-i { width: 22px; height: 22px; }

.skm-rdv strong { font-size: 15px; font-weight: 600; line-height: 1.3; }

.skm-rdv em {
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--skm-badge-bg);
}

.skm-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, .12);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color .25s var(--skm-ease), box-shadow .25s var(--skm-ease);
}

.skm-card:hover {
  border-color: rgba(17, 24, 39, .3);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.skm-card__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--skm-card-ratio);
  overflow: hidden;
  background: rgba(17, 24, 39, .06);
}

.skm-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--skm-ease);
}

.skm-card:hover .skm-card__thumb img { transform: scale(1.06); }

.skm-card__letter {
  font-size: 28px;
  font-weight: 700;
  opacity: .25;
}

.skm-card__body {
  display: block;
  padding: var(--skm-card-pad) calc(var(--skm-card-pad) + 3px) calc(var(--skm-card-pad) + 2px);
}

.skm-card__label {
  display: block;
  font-size: var(--skm-card-label);
  font-weight: 600;
  line-height: 1.35;
}

.skm-card__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--skm-badge-bg);
  color: var(--skm-badge-color);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  vertical-align: middle;
}

/* Carte mise en avant : bordure de couleur, un halo leger, et le badge en
   ruban sur l'image. Sans couleur choisie, le corail. */
.skm-card.skm-card--vedette {
  border: 2px solid var(--skm-vedette, #ff3939);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--skm-vedette, #ff3939) 16%, transparent);
}
.skm-card.skm-card--vedette:hover {
  border-color: var(--skm-vedette, #ff3939);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--skm-vedette, #ff3939) 24%, transparent), 0 10px 24px rgba(15, 23, 42, .12);
}
.skm-card--vedette .skm-card__label { color: var(--skm-vedette, #ff3939); }
/* Agrandie : `scale` et non `transform`, pour garder le soulevement au survol.
   Elle passe devant ses voisines, qu'elle deborde a peine. */
.skm-card.skm-card--agrandie { position: relative; z-index: 2; scale: var(--skm-vedette-taille, 1); }
/* L'etiquette : quelques mots en haut a droite de la case. */
.skm-card__etiquette {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  color: var(--skm-vedette, #ff3939);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--skm-vedette, #ff3939), 0 4px 10px rgba(15, 23, 42, .16);
}
.skm-card__ruban {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--skm-vedette, #ff3939);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}

.skm-card__desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  opacity: .6;
}

/* ---- Tablette et mobile ---- */

@media (max-width: 1080px) {
  .skm-nav { --skm-serre-ecart: .7; }
}

/* ---- Bloc de droite : boutons ronds ---- */

.skm-side {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---- Une entree du menu affichee en bouton ----
   Elle reste a sa place dans le menu : c'est la meme entree, habillee.
   Le second selecteur de chaque regle vise cette entree-la : sans lui, la
   regle des liens ordinaires, plus precise, reprendrait le dessus. */

.skm-cta,
.skm-menu > li.is-button > a {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: var(--skm-cta-pad);
  letter-spacing: normal;
  font-family: var(--skm-cta-font, inherit);
  text-transform: var(--skm-cta-transform);
  border: 2px solid var(--skm-cta-bg);
  border-radius: var(--skm-cta-radius);
  background: var(--skm-cta-bg);
  color: var(--skm-cta-color);
  font-size: var(--skm-cta-size);
  font-weight: var(--skm-cta-weight);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .22s var(--skm-ease), color .22s var(--skm-ease),
              border-color .22s var(--skm-ease), transform .22s var(--skm-ease),
              box-shadow .22s var(--skm-ease);
}

.skm-cta:hover,
.skm-menu > li.is-button > a:hover {
  background: var(--skm-cta-hover-bg);
  border-color: var(--skm-cta-hover-bg);
  color: var(--skm-cta-hover-color);
}

.skm-nav[data-cta="lift"] .skm-menu > li.is-button > a:hover { transform: translateY(-2px); }
.skm-nav[data-cta="scale"] .skm-menu > li.is-button > a:hover { transform: scale(1.06); }

.skm-nav[data-cta="glow"] .skm-menu > li.is-button > a:hover {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--skm-cta-bg) 22%, transparent);
}

/* Contour : le fond ne vient qu'au survol. */
.skm-cta--outline,
.skm-menu > li.is-button > a.skm-cta--outline {
  background: transparent;
  color: var(--skm-cta-bg);
}

.skm-cta--outline:hover,
.skm-menu > li.is-button > a.skm-cta--outline:hover {
  background: var(--skm-cta-hover-bg);
  color: var(--skm-cta-hover-color);
}

/* Discret : un fond a peine pose, pour un bouton secondaire. */
.skm-cta--soft,
.skm-menu > li.is-button > a.skm-cta--soft {
  /* Repli pour les navigateurs sans color-mix : un gris tres clair. */
  background: rgba(17, 24, 39, .09);
  background: color-mix(in srgb, var(--skm-cta-bg) 12%, transparent);
  border-color: transparent;
  color: var(--skm-cta-bg);
}

.skm-cta--soft:hover,
.skm-menu > li.is-button > a.skm-cta--soft:hover {
  border-color: transparent;
  background: var(--skm-cta-hover-bg);
  color: var(--skm-cta-hover-color);
}

/* ---- Mode par-dessus ----
   La coque sort du flux : votre banniere commence en haut de page et le menu
   se pose dessus. Une fois defile, il reprend un fond lisible. */

.skm-shell.is-overlay {
  position: absolute;
  /* Sous la barre WordPress et sous la barre d'annonce, au lieu de les
     recouvrir (la hauteur de l'annonce est posee par le script). */
  top: calc(var(--skm-admin-h, 0px) + var(--skm-annonce-h, 0px));
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ---- Epinglage ----
   Le menu suit la page. En haut il tient tout seul avec position: sticky ;
   en bas il doit passer en fixe, et la cale rendue avec lui garde sa place
   dans le flux pour que la page ne remonte pas d'un cran. */

/* L'espace au-dessus fait deja partie de la coque. On la remonte d'autant,
   pour que la distance reglee ici soit exactement l'ecart que l'on voit entre
   le bord de l'ecran et le menu, et non cet ecart ajoute a l'autre. */
.skm-shell.is-sticky.is-stick-top {
  position: sticky;
  top: calc(var(--skm-stick-top) - var(--skm-bar-top, 24px) + var(--skm-admin-h, 0px));
  z-index: 1000;
}

/* Par-dessus ET epingle : la coque doit rester hors du flux tant qu'elle
   n'est pas detachee. La regle ci-dessus, plus precise, la remettait en
   sticky : le menu poussait la banniere au lieu de s'y poser, puis la page
   sautait d'un cran au moment ou il passait en fixe. */
.skm-shell.is-overlay.is-sticky.is-stick-top {
  position: absolute;
  top: calc(var(--skm-admin-h, 0px) + var(--skm-annonce-h, 0px));
}

.skm-shell.is-sticky.is-stick-bottom {
  position: fixed;
  /* `top:auto` : avec le mode par-dessus, `top:0` restait pose, gagnait sur
     `bottom`, et le menu "epingle en bas" se fixait en haut. */
  top: auto;
  bottom: var(--skm-stick-bottom);
  left: 0;
  right: 0;
  z-index: 1000;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* La cale ne sert que la : elle reprend la hauteur mesuree du menu. */
.skm-hold { width: 100%; }

/* Des que la barre se detache de sa place, elle reprend un fond lisible :
   sinon le contenu qui passe dessous rend le menu illisible. */
.skm-shell.is-sticky.is-recolor.is-stuck {
  background: var(--skm-bar-bg-stuck);
  box-shadow: var(--skm-stuck-shadow);
}

.skm-shell.is-sticky.is-recolor.is-stuck .skm-pill {
  background: var(--skm-stuck-pill-bg);
  box-shadow: none;
}

.skm-shell.is-sticky.is-recolor.is-stuck .skm-menu > li:not(.is-current):not(.is-button) > a,
.skm-shell.is-sticky.is-recolor.is-stuck .skm-home {
  color: var(--skm-stuck-link-color);
}

/* En mode par-dessus la coque est deja hors flux : elle peut passer en fixe
   sans decaler le contenu d'un pixel. */
.skm-shell.is-overlay.is-sticky.is-stick-top.is-stuck {
  position: fixed;
  top: calc(var(--skm-stick-top) - var(--skm-bar-top, 24px) + var(--skm-admin-h, 0px));
}

/* ---- Arrivee ----
   Le mouvement ne joue qu'au moment ou le menu s'epingle, une seule fois. */

.skm-shell[data-stick="slide"].is-stick-top.is-stuck { animation: skm-vient-du-haut .32s var(--skm-ease); }
.skm-shell[data-stick="slide"].is-stick-bottom.is-stuck { animation: skm-vient-du-bas .32s var(--skm-ease); }
.skm-shell[data-stick="fade"].is-stuck { animation: skm-fondu .32s var(--skm-ease); }
.skm-shell[data-stick="shrink"].is-stuck { animation: skm-resserre .32s var(--skm-ease); }

@keyframes skm-vient-du-haut {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes skm-vient-du-bas {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes skm-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes skm-resserre {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ---- Se cacher en descendant ----
   Le menu s'efface vers son propre bord, pour ne jamais traverser l'ecran. */

.skm-shell.is-sticky {
  transition: transform .3s var(--skm-ease), background .3s var(--skm-ease),
              box-shadow .3s var(--skm-ease);
}

.skm-shell.is-stick-top.is-away { transform: translateY(-100%); }
.skm-shell.is-stick-bottom.is-away { transform: translateY(calc(100% + var(--skm-stick-bottom))); }

/* ---- Panneaux d'un menu pose en bas ----
   Un panneau qui s'ouvrirait vers le bas sortirait de l'ecran : il s'ouvre
   donc vers le haut, et le pont de survol change de cote avec lui. */

.skm-shell.is-stick-bottom .skm-panel,
.skm-shell.is-stick-bottom .skm-sub {
  top: auto;
  bottom: calc(100% + 12px);
  transform: translateY(10px);
}

.skm-shell.is-stick-bottom .skm-panel::before { inset: auto 0 -16px 0; }

.skm-shell.is-stick-bottom .skm-menu > li.is-open > .skm-panel,
.skm-shell.is-stick-bottom .skm-menu > li.is-open > .skm-sub { transform: translateY(0); }

/* Le mouvement n'est jamais impose a qui demande moins d'animations. */
@media (prefers-reduced-motion: reduce) {
  .skm-shell.is-sticky { transition: none; }
  .skm-shell.is-stuck { animation: none; }
}

/* ---- Position du menu dans la barre ----
   La grille en trois colonnes centre la pilule sur la barre elle-meme, et non
   sur la place qui reste : le centrage tient meme si les boutons changent de
   nombre ou de taille. */

.skm-nav[data-align="center"] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.skm-nav[data-align="center"] .skm-pill { grid-column: 2; }
.skm-nav[data-align="center"] .skm-side { grid-column: 3; justify-self: end; }

.skm-nav[data-align="all"] { justify-content: center; }

.skm-nav[data-align="right"] { flex-direction: row-reverse; }
.skm-nav[data-align="right"] .skm-side { margin-right: auto; }

/* ---- Animations au survol ----
   Le mouvement sert a confirmer que le lien repond, pas a decorer. Il reste
   court, et il disparait si le systeme demande moins d'animations. */

.skm-menu > li > a { transition: transform .22s var(--skm-ease), background .22s var(--skm-ease), color .22s var(--skm-ease); }

/* Trait qui se deploie depuis le centre. */
.skm-nav[data-hover="underline"] .skm-menu > li > a,
.skm-nav[data-hover="both"] .skm-menu > li > a { position: relative; }

.skm-nav[data-hover="underline"] .skm-menu > li:not(.is-current):not(.is-button) > a::after,
.skm-nav[data-hover="both"] .skm-menu > li:not(.is-current):not(.is-button) > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .26s var(--skm-ease);
}

.skm-nav[data-hover="underline"] .skm-menu > li:not(.is-current):not(.is-button) > a:hover::after,
.skm-nav[data-hover="both"] .skm-menu > li:not(.is-current):not(.is-button) > a:hover::after { transform: scaleX(1); }

/* Le lien se souleve. Une entree affichee en bouton est mise de cote : elle
   suit l'effet reglé pour les boutons, sinon les deux se contrarieraient. */
.skm-nav[data-hover="lift"] .skm-menu > li:not(.is-button) > a:hover,
.skm-nav[data-hover="both"] .skm-menu > li:not(.is-button) > a:hover { transform: translateY(-2px); }

/* La pastille de fond apparait en grandissant. */
.skm-nav[data-hover="fill"] .skm-menu > li:not(.is-button) > a { transform: scale(.96); }
.skm-nav[data-hover="fill"] .skm-menu > li:not(.is-button) > a:hover { transform: scale(1); }

.skm-nav[data-hover="none"] .skm-menu > li:not(.is-button) > a:hover { transform: none; }

/* Boutons ronds. */
.skm-btn { transition: transform .22s var(--skm-ease), background .22s var(--skm-ease), color .22s var(--skm-ease); }
.skm-btn .skm-i { transition: transform .28s var(--skm-ease); }

.skm-nav[data-btn="lift"] .skm-btn:hover { transform: translateY(-3px); }
.skm-nav[data-btn="scale"] .skm-btn:hover { transform: scale(1.1); }
.skm-nav[data-btn="spin"] .skm-btn:hover .skm-i { transform: rotate(-12deg) scale(1.12); }
.skm-nav[data-btn="none"] .skm-btn:hover { transform: none; }

/* La pastille du panier accompagne le mouvement. */
.skm-btn__badge { transition: transform .22s var(--skm-ease); }
/* La bulle du panier est posee vide et cachee ; le script la montre. Une
   classe qui donne un `display` battrait l'attribut `hidden` : on le redit. */
.skm-btn__badge[hidden] { display: none; }
.skm-btn:hover .skm-btn__badge { transform: scale(1.12); }

/* Cartes du sous-menu. */
.skm-card { transition: transform .26s var(--skm-ease), border-color .26s var(--skm-ease), box-shadow .26s var(--skm-ease); }
.skm-card:hover { transform: translateY(-3px); }

/* ---- Adaptation progressive ----
   Le menu ne bascule pas en bouton des qu'il serre : on resserre d'abord
   l'espacement, puis le texte, et le bouton n'apparait qu'en dernier recours.
   Les paliers observent la largeur du conteneur et non celle de l'ecran, pour
   que l'apercu du configurateur reagisse exactement comme le site.
   Les paliers RESSERRENT ce que vous avez regle, ils ne le remplacent pas.
   Avant, ils ecrivaient une taille et un espacement en dur, avec un selecteur
   plus precis que les reglages : des 1366 px de conteneur, soit un ecran
   ordinaire, la Taille du texte et l'Espace entre les liens ne faisaient plus
   RIEN. Mesure le 2026-10-12 : 28 px demandes, 14 px rendus. */

@container skmnav (max-width: 1480px) {
  .skm-shell .skm-nav { --skm-serre-ecart: .76; }
}

@container skmnav (max-width: 1366px) {
  .skm-shell .skm-nav { --skm-serre-ecart: .53; --skm-serre-texte: .93; }
  .skm-pill { padding-right: 22px; }
}

@container skmnav (max-width: 1180px) {
  .skm-shell .skm-nav { --skm-serre-ecart: .38; --skm-serre-texte: .9; }
  .skm-pill { padding-right: 16px; }
  .skm-menu > .is-current > a { padding-left: 18px; padding-right: 18px; }
}

/* ---- Bouton menu ---- */

/* ---- Bouton menu ----
   La version telephone vit dans `mobile.css`, parce que son seuil de bascule
   est reglable et qu'une requete de conteneur n'accepte pas de variable.
   Le plugin y remplace le seuil puis l'ecrit dans la page. */

@container skmnav (max-width: 600px) {
  .skm-cta { padding: 9px 13px; font-size: 13px; }
  .skm-nav { --skm-bord-x: 10px; }
  .skm-nav { gap: 8px; }
  .skm-actions { gap: 6px; }
  .skm-nav { --skm-btn-size: 40px; }
}

/* Menu reste en barre ("Jamais", ou "Sous 860 px" sur une grande tablette) :
   les colonnes de tablette et de telephone choisies par panneau ou par
   sous-sous-menu s'appliquent aussi. En bouton, c'est `mobile.css` qui
   decide, avec un selecteur plus precis. */
@container skmnav (min-width: 768px) and (max-width: 1024px) {
  .skm-panel__grid { grid-template-columns: repeat(var(--skm-col-t, var(--skm-mega-n)), minmax(0, 1fr)); }
  .skm-panel { max-width: var(--skm-pw-t, var(--skm-mega-max)); }
}

@container skmnav (max-width: 767px) {
  .skm-panel__grid { grid-template-columns: repeat(var(--skm-col-m, var(--skm-mega-n)), minmax(0, 1fr)); }
  .skm-panel { max-width: var(--skm-pw-m, var(--skm-mega-max)); }
}

/* ---- Entrees en LIGNES ----
   Une entree par ligne, petite image a gauche, texte a droite. Le rendu a
   deja tranche, appareil par appareil (`data-pres-d/t/m` sur le panneau) :
   chaque largeur ne lit que SON attribut. Les memes trois regles sont donc
   ecrites trois fois, une par largeur ; une requete de conteneur ne se
   partage pas.
   Le selecteur passe devant ceux des colonnes (`.skm-nav .skm-panel__grid`,
   et la regle ecrite pour la tablette) : en lignes, c'est une colonne. */

@container skmnav (min-width: 1025px) {
  .skm-nav .skm-panel[data-pres-d="lignes"] .skm-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .skm-nav .skm-panel[data-pres-d="lignes"] .skm-card { flex-direction: row; align-items: center; }
  .skm-nav .skm-panel[data-pres-d="lignes"] .skm-card__thumb { flex: 0 0 var(--skm-ligne-img); width: var(--skm-ligne-img); aspect-ratio: 1; margin: 8px 0 8px 8px; border-radius: 10px; }
}

@container skmnav (min-width: 768px) and (max-width: 1024px) {
  .skm-nav .skm-panel[data-pres-t="lignes"] .skm-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .skm-nav .skm-panel[data-pres-t="lignes"] .skm-card { flex-direction: row; align-items: center; }
  .skm-nav .skm-panel[data-pres-t="lignes"] .skm-card__thumb { flex: 0 0 var(--skm-ligne-img); width: var(--skm-ligne-img); aspect-ratio: 1; margin: 8px 0 8px 8px; border-radius: 10px; }
}

@container skmnav (max-width: 767px) {
  .skm-nav .skm-panel[data-pres-m="lignes"] .skm-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .skm-nav .skm-panel[data-pres-m="lignes"] .skm-card { flex-direction: row; align-items: center; }
  .skm-nav .skm-panel[data-pres-m="lignes"] .skm-card__thumb { flex: 0 0 var(--skm-ligne-img); width: var(--skm-ligne-img); aspect-ratio: 1; margin: 8px 0 8px 8px; border-radius: 10px; }
}

@container skmnav (max-width: 420px) {
  .skm-panel__grid { grid-template-columns: repeat(var(--skm-col-m, min(var(--skm-mega-n), 1)), minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .skm-nav *,
  .skm-shell { transition-duration: .01ms !important; animation: none !important; }
  .skm-nav *:hover { transform: none !important; }
}

/* Liste simple : les niveaux du dessous s'emboitent, en retrait, et restent
   visibles une fois la liste ouverte. Ils font partie de la liste du
   dessus : ni flottement, ni animation propre. */
.skm-sub .skm-sub--sous {
  position: static;
  min-width: 0;
  margin: 0 0 4px 14px;
  padding: 0 0 0 8px;
  border-left: 1px solid rgba(17, 24, 39, .12);
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  /* `inherit`, jamais `visible` : un enfant visible resterait affiche
     sous une liste parente cachee. */
  visibility: inherit;
  /* La version telephone cache les `.skm-sub` par `display: none` et
     n'ouvre que celle de l'entree touchee : celle-ci suit sa parente. */
  display: block;
  transform: none;
}
.skm-sub .skm-sub--sous a { padding: 7px 12px; font-size: 13px; }