/* ============================================================
 MUSCU BY JO — feuille de liaison entre Elementor et la feuille du site
 Écrite à la main, à côté de muscubyjo-2026.css qui, elle, est générée.
 Chargée seulement sur les pages de la refonte (body.refonte-2026).

 Le principe : les pages se montent en conteneurs et widgets natifs,
 avec les classes des maquettes. Elementor ajoute ses propres réglages
 (typographies du kit, marges, espacements, style de bouton) qui passent
 devant le dessin des maquettes. Cette feuille les retire, rien de plus :
 elle ne dessine rien elle-même.

 Les règles en :where(...) ont une priorité minimale : elles battent
 Elementor par leur ordre de chargement, et laissent gagner toute règle
 de la maquette plus précise (« .hero h1 », « .mcta .btn »…).
 ============================================================ */


/* 1. Typographies et couleurs globales du kit
   Mises à « initial », les déclarations d'Elementor qui les utilisent
   deviennent invalides et la propriété hérite de la maquette.
   Le kit, et donc le site en ligne, n'est pas touché. */
body.refonte-2026 {
  --e-global-color-primary: initial;
  --e-global-color-secondary: initial;
  --e-global-color-text: initial;
  --e-global-color-accent: initial;

  --e-global-typography-primary-font-family: initial;
  --e-global-typography-primary-font-size: initial;
  --e-global-typography-primary-font-style: initial;
  --e-global-typography-primary-font-weight: initial;
  --e-global-typography-primary-letter-spacing: initial;
  --e-global-typography-primary-line-height: initial;
  --e-global-typography-primary-text-decoration: initial;
  --e-global-typography-primary-text-transform: initial;

  --e-global-typography-secondary-font-family: initial;
  --e-global-typography-secondary-font-size: initial;
  --e-global-typography-secondary-font-style: initial;
  --e-global-typography-secondary-font-weight: initial;
  --e-global-typography-secondary-letter-spacing: initial;
  --e-global-typography-secondary-line-height: initial;
  --e-global-typography-secondary-text-decoration: initial;
  --e-global-typography-secondary-text-transform: initial;

  --e-global-typography-text-font-family: initial;
  --e-global-typography-text-font-size: initial;
  --e-global-typography-text-font-style: initial;
  --e-global-typography-text-font-weight: initial;
  --e-global-typography-text-letter-spacing: initial;
  --e-global-typography-text-line-height: initial;
  --e-global-typography-text-text-decoration: initial;
  --e-global-typography-text-text-transform: initial;

  --e-global-typography-accent-font-family: initial;
  --e-global-typography-accent-font-size: initial;
  --e-global-typography-accent-font-style: initial;
  --e-global-typography-accent-font-weight: initial;
  --e-global-typography-accent-letter-spacing: initial;
  --e-global-typography-accent-line-height: initial;
  --e-global-typography-accent-text-decoration: initial;
  --e-global-typography-accent-text-transform: initial;
}


/* Fond de page : le kit peint le body en blanc (.elementor-kit-142) et passe
   devant le « body » de la maquette. On rend la main à la maquette. */
body.refonte-2026.refonte-2026 {
  background-color: var(--cream);
}

/* Liens : Elementor retire le soulignement de tous les liens (.elementor a).
   La maquette garde celui du navigateur, sauf là où elle l'enlève elle-même
   (menus, fil d'Ariane, boutons), par des règles plus précises que celle-ci. */
:where(body.refonte-2026) .elementor a {
  text-decoration: underline;
}


/* 2. Conteneurs : ni marge intérieure ni espacement par défaut
   Elementor met 10 px de marge intérieure et 20 px entre les widgets.
   Les maquettes fixent les leurs (.wrap, gap des grilles). */
body.refonte-2026 .e-con {
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
}
body.refonte-2026 .elementor-element {
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
}
/* Un conteneur imbriqué prend la largeur de son contenu, comme une div de
   maquette : Elementor lui impose 100 % (ou la largeur saisie dans l'éditeur). */
:where(body.refonte-2026) .e-con .e-con {
  width: auto;
}
/* Sauf « .wrap », qui occupe toute la largeur disponible (jusqu'à son
   max-width de maquette), même si son parent centre ses enfants. */
:where(body.refonte-2026) .e-con > .e-con.wrap {
  width: 100%;
  align-self: stretch;
}
/* En direction Ligne, Elementor fait grandir et étirer chaque widget.
   Les maquettes ne le font que là où leurs propres règles le demandent. */
:where(body.refonte-2026) .e-con > .elementor-widget {
  flex-grow: 0;
  align-self: auto;
  /* Elementor laisse un widget rétrécir sous la taille de son contenu
     (min-width: 0) : les pastilles « facts » s'écrasaient au lieu de défiler. */
  min-width: auto;
}
/* Sur mobile, Elementor autorise le retour à la ligne de tout conteneur en
   Ligne. Les maquettes ne l'autorisent que là où elles l'écrivent. */
:where(body.refonte-2026) .e-con.e-flex {
  flex-wrap: nowrap;
}


/* 3. Titres : Elementor force un interligne de 1 */
:where(body.refonte-2026) .elementor-heading-title {
  line-height: inherit;
}


/* 4. Boutons
   La classe « btn » se pose sur l'enveloppe du widget : c'est elle qui
   prend le dessin de la maquette, y compris ses variantes de contexte
   (.hero .actions .btn, .mcta .btn…). Le lien d'Elementor s'efface dans
   cette enveloppe, et un calque invisible rend toute sa surface cliquable. */
body.refonte-2026 .elementor-widget-button.btn {
  position: relative;
}
/* Dans la maquette, un bouton garde sa largeur naturelle ; dans un conteneur
   en colonne, Elementor l'étire. Les règles de maquette qui veulent un bouton
   pleine largeur (.hero .actions .btn, .mcta .btn…) passent devant. */
:where(body.refonte-2026) .e-con > .elementor-widget-button.btn {
  align-self: flex-start;
}
body.refonte-2026 .elementor-widget-button.btn .elementor-widget-container,
body.refonte-2026 .elementor-widget-button.btn .elementor-button-wrapper,
body.refonte-2026 .elementor-widget-button.btn .elementor-button-content-wrapper {
  display: contents;
}
body.refonte-2026 .elementor-widget-button.btn .elementor-button {
  all: unset;
  display: contents;
}
body.refonte-2026 .elementor-widget-button.btn .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
}
body.refonte-2026 .elementor-widget-button.btn:has(.elementor-button:focus-visible) {
  outline: 2px solid var(--brick);
  outline-offset: 3px;
}


/* 5. Liens dans les titres (widget Titre avec lien, ex. « Mon accès »)
   Le lien reprend la décoration de son titre au lieu du soulignement par défaut. */
:where(body.refonte-2026) .elementor-heading-title a {
  text-decoration: inherit;
}


/* 6. Logo (widget Image avec la classe « logo »)
   La maquette dimensionne « img.logo » ; ici la classe est sur l'enveloppe,
   qui prend la hauteur : l'image la remplit. */
/* Les proportions sont celles des fichiers logo (viewBox 300 × 161,25) :
   la largeur se déduit de la hauteur que la maquette fixe (52, 38, 36 px). */
body.refonte-2026 .elementor-widget-image.logo {
  width: auto;
  aspect-ratio: 300 / 161.25;
  flex: 0 0 auto;
}
body.refonte-2026 .elementor-widget-image.logo a,
body.refonte-2026 .elementor-widget-image.logo .elementor-widget-container {
  display: block;
  height: 100%;
}
body.refonte-2026 .elementor-widget-image.logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}


/* 7. Menus (widget Menu d'Elementor Pro dans nav.top et footer.ft)
   La maquette dessine « ul » et « a » ; Elementor ajoute des marges
   intérieures aux liens, un soulignement animé et ses couleurs. */
body.refonte-2026 :is(nav.top, footer.ft) .elementor-widget-nav-menu {
  --e-nav-menu-horizontal-menu-item-margin: 0px;
}
body.refonte-2026 :is(nav.top, footer.ft) .elementor-nav-menu--main a.elementor-item {
  padding: 0;
  flex-grow: 0;
}
body.refonte-2026 :is(nav.top, footer.ft) .elementor-nav-menu a.elementor-item::before,
body.refonte-2026 :is(nav.top, footer.ft) .elementor-nav-menu a.elementor-item::after {
  display: none;
}
/* Sous 960 px, la maquette masque « nav.top ul » : on garde visible
   la liste du menu déroulant d'Elementor, qui tient lieu de menu mobile. */
@media (max-width: 960px) {
  body.refonte-2026 nav.top .elementor-nav-menu--dropdown ul {
    display: block;
  }
  /* Le bouton du menu d'Elementor prend la place et l'allure du « .burger »
     de la maquette : en dernier, à droite du bouton d'appel. Seule règle de
     dessin de cette feuille, faute de classe de maquette à poser dessus. */
  body.refonte-2026 nav.top .elementor-widget-nav-menu {
    order: 3;
    flex: 0 0 auto;
  }
  /* Le menu déroulant s'ouvre sous le header, sur toute sa largeur, au lieu
     d'élargir le header même replié. Allure provisoire, aux couleurs de la
     maquette, en attendant le menu mobile qu'Agathe doit valider. */
  body.refonte-2026 nav.top > .wrap,
  body.refonte-2026 nav.top .elementor-widget-nav-menu,
  body.refonte-2026 nav.top .elementor-widget-nav-menu .elementor-widget-container {
    position: static;
  }
  body.refonte-2026 nav.top .elementor-nav-menu--dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
  }
  body.refonte-2026 nav.top .elementor-nav-menu--dropdown a.elementor-item {
    padding: 12px 28px;
    color: var(--ink);
    background: transparent;
  }
  body.refonte-2026 nav.top .elementor-nav-menu--dropdown a.elementor-item:hover {
    color: var(--brick);
  }
  body.refonte-2026 nav.top .elementor-menu-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    font-size: 20px;
  }
}
@media (max-width: 380px) {
  body.refonte-2026 nav.top .elementor-menu-toggle {
    width: 44px;
    height: 44px;
  }
}


/* 8. Premier écran sur mobile
   La maquette réordonne sur-titre, titre, photo, texte… et donne au titre
   « .hero h1 { order: 2 } ». Dans Elementor, c'est l'enveloppe du widget
   qui est dans la grille, pas le h1 : on lui reporte son rang. */
@media (max-width: 700px) {
  body.refonte-2026 .hero .elementor-widget-heading:has(> .elementor-widget-container > h1) {
    order: 2;
  }
}

/* Variante : plus spécifique que « body.p-x .pb .yesno div », et garde le cadre
   quand c'est le widget lui-même qui est la case : enfant direct de la grille
   (ou de son .wrap), comme les chiffres de .proof, .strip, .keyfacts, .stats.
   Seuls les widgets rangés dans une case conteneur (.yn > .y) sont remis à zéro. */
body.refonte-2026[class] :is(.yn, .yesno, .strip, .stats, .keyfacts, .press, .proof, .ig) :is(.elementor-widget-container, .elementor-heading-title, .elementor-widget:not(.y, .n, :is(.yn, .yesno, .strip, .stats, .keyfacts, .press, .proof, .ig) > *, :is(.yn, .yesno, .strip, .stats, .keyfacts, .press, .proof, .ig) > .wrap > *)) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Logos des cartes programme (.vis) : la maquette centre l'image dans la case.
   Dans Elementor, c'est l'enveloppe du widget qui est centrée et prend toute la
   largeur ; l'image, réduite à 72 % et en display:block, restait calée à gauche. */
body.refonte-2026 .vis > .elementor-widget-image img {
    margin-inline: auto;
}

/* Pied de page : « .ft-wrap » occupe toute la largeur disponible, comme « .wrap »
   (section 2). Ses marges automatiques le réduisaient sinon à la largeur de son contenu. */
:where(body.refonte-2026) .e-con > .e-con.ft-wrap {
    width: 100%;
    align-self: stretch;
}

/* Avis : « .grid » et « .caps » sont des colonnes de texte (columns: 3 / 4),
   qui ne s'appliquent qu'à un bloc. Elementor en fait des conteneurs flex :
   chaque avis et chaque capture prenait toute la largeur. :where garde la
   priorité basse, pour que le carrousel mobile (display: grid) passe devant. */
body.p-avis :where(.grid.e-con, .caps.e-con) {
    display: block;
}
body.p-avis :where(.grid, .caps) > .elementor-widget {
    break-inside: avoid;
}

/* Carrousels mobiles : la règle de page (grid-template-columns: 1fr) gagnait sur
   « none » à spécificité égale, et la 1re carte n'avait plus que la place restante */
@media (max-width: 700px) {
    body.refonte-2026[class] :is(.sit, .progs, .avis, .recv, .cmpcards, .guides, .list, .ebooks) {
        grid-template-columns: none;
    }
}