/* ====== Monageréel UI (scopé) — DERNIÈRE VERSION ====== */
:root{
  --mr-bg:#f7f8fa; --mr-text:#121417; --mr-muted:#5f6b7a; --mr-border:#e6e8eb; --mr-card:#ffffff;
  --mr-accent:#2e7d32; --mr-accent-600:#27672b; --mr-accent-050:#eaf4eb; --mr-shadow:0 6px 24px rgba(18,20,23,.06);

  /* Niveaux */
  --mr-pos-bg:#eaf4eb; --mr-pos-fg:#2e7d32;
  --mr-neu-bg:#fff7e0; --mr-neu-fg:#b38600;
  --mr-neg-bg:#fff1e6; --mr-neg-fg:#d97706;

  /* Skeleton */
  --mr-skel-base:#eef0f3; --mr-skel-shine:#f7f8fa;
}

.mr-container *{ box-sizing:border-box; }
.mr-container{
  max-width:720px;
  margin:24px auto;
  padding:12px;
  color:var(--mr-text);

  /* Réserve de la place pour le questionnaire dès le chargement */
  min-height: 520px; /* ajuste à 520–600px selon la hauteur max de tes slides sur mobile */
}


/* Card */
.mr-card{
  background:var(--mr-card);
  border:1px solid var(--mr-border);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--mr-shadow);

  /* Évite qu'une petite carte soit remplacée par une énorme → limite le CLS */
  min-height: 320px; /* à adapter, mais 300–360px est un bon ordre de grandeur */
}


/* Titles + help */
.mr-h1{ font-size:1.6rem; line-height:1.25; margin:0 0 16px; font-weight:800; letter-spacing:.2px; }
.mr-help{ font-size:.95rem; color:var(--mr-muted); margin-top:10px; }

/* Layout */
.mr-step{ margin-bottom:18px; }
.mr-row{ display:flex; gap:12px; align-items:center; }
.mr-col{ display:flex; flex-direction:column; gap:10px; width:100%; }

/* Inputs */
.mr-label{ font-size:.95rem; font-weight:600; color:var(--mr-text); margin:2px 0 4px; }
.mr-input,.mr-select,.mr-range{
  width:100%; padding:12px 14px; border:1px solid var(--mr-border); border-radius:12px; background:#fff; color:var(--mr-text);
  line-height:1.25; outline:none; min-height:44px;
}
.mr-select{ appearance:none; background-image:none; }
.mr-input::placeholder{ color:#9aa3af; }
.mr-input:focus,.mr-select:focus,.mr-range:focus{
  border-color:var(--mr-accent); box-shadow:0 0 0 3px var(--mr-accent-050);
}

/* Buttons — style par défaut : fond blanc, texte vert */
.mr-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:12px 18px; font-weight:700;
  border:1px solid var(--mr-accent); cursor:pointer; user-select:none;
  background:#fff; color:var(--mr-accent); transition:.15s ease-in-out;
}
.mr-btn:hover{ background:var(--mr-accent-050); }

/* Bouton plein (optionnel) : ajouter la classe .mr-btn--filled si besoin */
.mr-btn.mr-btn--filled{ background:var(--mr-accent); color:#fff; border-color:transparent; }
.mr-btn.mr-btn--filled:hover{ background:var(--mr-accent-600); }

/* Compat rétro avec .secondary (identique au style par défaut) */
.mr-btn.secondary{ background:#fff; color:var(--mr-accent); border-color:var(--mr-accent); }
.mr-btn.secondary:hover{ background:var(--mr-accent-050); }

/* Badges */
.mr-badge{
  display:inline-block; border-radius:999px; padding:6px 10px; border:1px solid var(--mr-border);
  background:#fff; color:var(--mr-text); font-weight:600; font-size:.9rem; line-height:1;
}
.mr-badge--Positif{ background:var(--mr-pos-bg); color:var(--mr-pos-fg); border-color:transparent; }
.mr-badge--Neutre{ background:#e6f0ff; color:#1d4ed8; border-color:transparent; }
.mr-badge--Negatif{ background:var(--mr-neg-bg); color:var(--mr-neg-fg); border-color:transparent; }
.mr-pills{ display:flex; flex-wrap:wrap; gap:10px; }

/* Jauge */
#monagereel-root #gauge{ height:200px; display:flex; align-items:center; justify-content:center; }
.mr-gauge div{ font-size:2.4rem; font-weight:900; color:var(--mr-accent); }

/* ===== Accordion ===== */
.mr-accordion .item{
  border:1px solid var(--mr-border); border-radius:14px; margin-bottom:12px; overflow:hidden; background:#fff;
}

/* Header : titre à gauche, bouton à droite, chevron bord droit */
.mr-accordion .header{
  position:relative; display:flex; align-items:center; justify-content:flex-start;
}
.mr-accordion .header > strong{ flex:0 1 auto; }

/* Bouton "Ouvrir" : poussé à droite, juste avant le chevron */
.mr-accordion .header .mr-open-btn{
  margin-left:auto; display:inline-flex; align-items:center;
  padding-right:28px;             /* place réservée au chevron */
}

/* Fallback si la classe .mr-open-btn a été oubliée : dernier .mr-btn du header */
.mr-accordion .header .mr-btn:last-child{ margin-left:auto; padding-right:28px; }

/* Chevron à droite */
.mr-accordion .header::after{
  content:"\25BE";
  position:absolute; right:16px; top:50%;
  transform:translateY(-50%);
  transition:transform .15s ease;
}
.mr-accordion .item.open .header::after{ transform:translateY(-50%) rotate(180deg); }

.mr-accordion .header:hover{ background:var(--mr-accent-050); }
.mr-accordion .content{ padding:12px 16px; display:none; color:var(--mr-text); }
.mr-accordion .item.open .content{ display:block; }

/* Thème headers colorés */
/* Positif */
.item.mr-theme-pos .header{ background:var(--mr-pos-bg); color:var(--mr-pos-fg); }
/* Neutre → même rendu que Positif (spécifiquement demandé) */
.item.mr-theme-neu .header{ background:var(--mr-pos-bg); color:var(--mr-pos-fg); }
/* Négatif */
.item.mr-theme-neg .header{ background:var(--mr-neg-bg); color:var(--mr-neg-fg); }

/* === Bouton "Ouvrir" thémé par item === */
/* Positif & Neutre → vert (bord + texte), hover teinté */
.mr-accordion .item.mr-theme-pos .header .mr-open-btn,
.mr-accordion .item.mr-theme-neu .header .mr-open-btn,
.mr-accordion .item.mr-theme-pos .header .mr-btn:last-child,
.mr-accordion .item.mr-theme-neu .header .mr-btn:last-child{
  color:var(--mr-pos-fg); border-color:var(--mr-pos-fg);
}
.mr-accordion .item.mr-theme-pos .header .mr-open-btn:hover,
.mr-accordion .item.mr-theme-neu .header .mr-open-btn:hover,
.mr-accordion .item.mr-theme-pos .header .mr-btn:last-child:hover,
.mr-accordion .item.mr-theme-neu .header .mr-btn:last-child:hover{
  background:var(--mr-pos-bg);
}

/* Négatif → rouge/orange */
.mr-accordion .item.mr-theme-neg .header .mr-open-btn,
.mr-accordion .item.mr-theme-neg .header .mr-btn:last-child{
  color:var(--mr-neg-fg); border-color:var(--mr-neg-fg);
}
.mr-accordion .item.mr-theme-neg .header .mr-open-btn:hover,
.mr-accordion .item.mr-theme-neg .header .mr-btn:last-child:hover{
  background:var(--mr-neg-bg);
}

/* Variante "plein" si utilisée dans l'accordéon */
.mr-accordion .item.mr-theme-pos .header .mr-open-btn.mr-btn--filled,
.mr-accordion .item.mr-theme-neu .header .mr-open-btn.mr-btn--filled{
  background:var(--mr-pos-fg); color:#fff; border-color:transparent;
}
.mr-accordion .item.mr-theme-neg .header .mr-open-btn.mr-btn--filled{
  background:var(--mr-neg-fg); color:#fff; border-color:transparent;
}

/* Contenu factoriel : titres & largeur de lecture */
.mr-theme-blocks h4{
  margin:16px 0 8px; font-size:1.05rem; line-height:1.35; letter-spacing:.2px;
}
.mr-theme-blocks p{ margin:6px 0 10px; line-height:1.55; max-width:80ch; }

/* “Lire plus” */
.mr-collapsible{ max-height:8.5em; overflow:hidden; position:relative; }
.mr-collapsible::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5em;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

/* Top 3 → cartes empilées partout */
.mr-top3{
  margin:12px 0 18px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;

  /* Réserve un peu de place même avant d'avoir les 2–3 lignes */
  min-height: 120px;
}

.mr-top3 li{
  border:1px solid var(--mr-border); border-radius:12px; padding:12px 14px; background:#fff; box-shadow:var(--mr-shadow);
}
.mr-top3 li::before{ display:none; }

/* En-tête aligné */
.mr-top3-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px; }
.mr-top3-factor{ font-weight:700; white-space:nowrap; }
.mr-top3-titre{ font-weight:600; flex:1; }
.mr-top3-body{ margin:6px 0 0; line-height:1.55; }

/* Skeletons */
.mr-skeleton{ position:relative; overflow:hidden; background:var(--mr-skel-base); border-radius:10px; min-height:14px; }
.mr-skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--mr-skel-shine), transparent);
  animation:mr-shimmer 1.2s infinite;
}
@keyframes mr-shimmer{ 100%{ transform:translateX(100%);} }

/* Accessibilité & focus */
.mr-accordion .header:focus-visible,
.mr-btn:focus-visible,
.mr-input:focus-visible,
.mr-select:focus-visible{
  outline:3px solid var(--mr-accent-050);
  box-shadow:0 0 0 3px var(--mr-accent-050);
}
/* Zone des thèmes détaillés : réserve une hauteur pour limiter le CLS quand le texte arrive */
#themes{
  min-height: 100px; /* ajuste si nécessaire */
}
/* Footer spacing with Astra */
#page .mr-container{ margin-top:12px; }

/* Responsive */
@media(min-width:900px){
  .mr-container{ padding:18px; }
  .mr-h1{ font-size:1.9rem; }
}
/* Bouton "Ouvrir" quand l'accordéon est ouvert → gris clair, cohérent partout */
.mr-accordion .item.open .header .mr-open-btn{
  background:#f3f4f6;          /* gris clair */
  color:var(--mr-muted);        /* texte gris */
  border-color:var(--mr-border);
}
.mr-accordion .item.open .header .mr-open-btn:hover{
  background:#e9ecef;          /* léger foncé au hover */
}

/* (si tu utilises la variante pleine) */
.mr-accordion .item.open .header .mr-open-btn.mr-btn--filled{
  background:#9ca3af;           /* gris moyen */
  color:#fff;
  border-color:#9ca3af;
}

/* Focus visible du bouton en état ouvert (évite halo vert/bleu) */
.mr-accordion .item.open .header .mr-open-btn:focus-visible{
  outline:3px solid #f3f4f6;
  box-shadow:0 0 0 3px #f3f4f6;
}
/* ===== Compact: phrase commune + TOP3 ===== */

/* Phrase commune ("Tu peux rajeunir…") */
.mr-card .mr-help{
  margin:4px 0 8px;        /* avant: ~10px */
  line-height:1.3;
}
#gain-line{ letter-spacing:.1px; }

/* Liste TOP3 (ul) */
.mr-top3{
  margin:6px 0 10px;       /* avant: 12px 0 18px */
  gap:6px;                 /* avant: 12px */
}

/* Carte TOP3 (li) */
.mr-top3 li{
  padding:8px 10px;        /* avant: 12px 14px */
  border-radius:10px;      /* avant: 12px */
  box-shadow:var(--mr-shadow);
}

/* En-tête de carte */
.mr-top3-head{
  margin-bottom:2px;       /* avant: 6px */
  gap:8px;                 /* avant: 10px */
  align-items:center;      /* réduit la hauteur */
}
.mr-top3-factor,
.mr-top3-titre{
  font-size:.95rem;        /* un poil plus compact */
}

/* Corps de carte */
.mr-top3-body{
  margin:0;                /* avant: 6px 0 0 */
  line-height:1.4;         /* avant: 1.55 */
}

/* Espacement avec les sections suivantes (thèmes) */
#themes{ margin-top:10px; } /* avant: ~par défaut plus grand */

/* ========= Ajustement mobile : lisibilité TOP3 ========= */
@media (max-width: 600px){
  .mr-top3-head{
    display:flex;
    flex-direction: column;   /* facteur ligne 1, titre ligne 2 */
    align-items:flex-start;
    gap:2px;
  }
  .mr-top3-factor{
    white-space: nowrap;      /* "Activité physique" reste sur une ligne */
  }
}

.mr-share-brand {
  text-align: center;
  font-size: 20px;
  color: #7d7d7d;
  margin-bottom: 10px;
  margin-top: -5px;
}

/* =========================
   CARRÉ DE PARTAGE — VERSION CLAIR + BANDEAU VERT
   ========================= */

#age-share-square {
  position: fixed;
  left: -9999px;
    top: -9999px; /* bien hors écran en X et en Y */

	width: 1080px;
	height: 1080px;
  padding: 32px 40px 40px;
  box-sizing: border-box;

  /* Bandeau vert en haut (120px) puis fond clair */
  background:
    linear-gradient(to bottom, #20b26b 0, #20b26b 120px, #f7f8fa 120px, #f7f8fa 100%);
  color: #111827;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  
}
.mr-card--loading{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* Conteneur interne centré */
#age-share-square-inner {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* Titre en haut (branding) → blanc sur bandeau vert */
#age-share-square .share-branding {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;       /* texte blanc */
  text-align: center;
  margin-bottom: 18px;
}

/* Sous-titre éventuel sous le titre, toujours dans le vert */
#age-share-square .share-subtitle {
  font-size: 18px;
  color: #e5e7eb;
  margin-top: -4px;
}

/* Wrapper de la jauge (on garde la présentation) */
#age-share-square .share-gauge-wrapper {
  margin: 30px auto 8px;
	width: 520px;
	height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Conteneur de la jauge (inchangé) */
#age-share-square #share-gauge {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Taille de la jauge dans le carré partagé */
#age-share-square #share-gauge > div {
  transform: scale(2.4);
  transform-origin: center;
}

/* Phrase "Tu peux rajeunir..." / "Tu es très proche..." */
#age-share-square .share-gain-text {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 600;
  color: #111827;       /* texte foncé (zone fond clair) */
  white-space: nowrap;  /* reste sur une ligne */
}
#age-share-square .share-gain-text strong {
  color: #20b26b;       /* vert de ta jauge */
}

/* Liste Top 2 : cartes claires */
#age-share-square #share-top3 {
  padding-top: 20px;
  margin: 0;
  list-style: none;
}

#age-share-square #share-top3 li {
  font-size: 20px;
  line-height: 1.4;
  margin: 8px auto;
  padding: 14px 18px;
  max-width: 640px;

  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);

  text-align: left;
  color: #111827;
}

#age-share-square #share-top3 li strong {
  color: #111827;
  font-weight: 700;
}

#age-share-square #share-top3 li::before {
  content: "•";
  margin-right: 8px;
  color: #20b26b;
}
/* Wrapper jauge + bouton partage */
.mr-gauge-wrap {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto 8px;

  /* Réserve la hauteur du cadran pour éviter les sauts à son rendu */
  min-height: 200px; /* cohérent avec #monagereel-root #gauge{ height:200px; } */
}

/* Petit bouton partage rond, en haut à droite du cadran */
.mr-share-icon-btn {
  position: absolute;
  top: -8px;   /* plus loin du cadran en vertical */
  right: -12px; /* plus loin du cadran en horizontal */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Icône type “share” */
.mr-share-icon-btn svg {
  width: 18px;
  height: 18px;
  color: #20b26b; /* même vert que ta jauge */
}
/* ===== CTA HERO ===== */

.cta-age-reel{
  margin:45px auto 60px;
  max-width:760px;
  padding:30px 26px;
  background:#f0fdf4;
  border:1px solid #cfe8d8;
  border-radius:20px;
  color:#1f2937;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  text-align:center;
}

/* Titre */
.cta-title{
  margin:0 0 14px;
  color:#25623b;
  font-size:2rem;
  line-height:1.2;
  font-weight:800;
}

/* Sous texte */
.cta-sub{
  margin:0 auto 22px;
  max-width:620px;
  font-size:1.08rem;
}

/* Bouton wrapper */
.cta-btn-wrap{
  margin-bottom:16px;
}

/* Bouton principal */
.cta-main-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#4CAF50;
  color:#ffffff;

  padding:18px 40px;

  font-size:1.35rem;
  font-weight:700;

  border-radius:999px;
  text-decoration:none;

  box-shadow:0 6px 18px rgba(76,175,80,0.35);
  transition:all 0.2s ease;
}

.cta-main-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(76,175,80,0.45);
}

/* Disclaimer */
.cta-disclaimer{
  margin:0 0 22px;
  font-size:0.9rem;
  color:#6b7280;
}

/* Texte bas */
.cta-text{
  text-align:left;
  max-width:640px;
  margin:0 auto;
}

.cta-text p{
  margin-bottom:14px;
  line-height:1.55;
}

/* ===== MOBILE ===== */
@media (max-width: 480px){

  .cta-age-reel{
    margin:18px 14px 24px;
    padding:20px 16px;
    border-radius:16px;
  }

  .cta-title{
    font-size:1.5rem;
  }

  .cta-sub{
    font-size:1rem;
  }

  .cta-main-btn{
    width:100%;
    font-size:1.2rem;
    padding:16px;
  }

  .cta-disclaimer{
    font-size:0.85rem;
  }
}
/* =========================
   AJOUTS CIBLÉS — nouveau HTML share
   À coller tout en bas du fichier
   ========================= */

/* Bloc branding plus haut et plus compact */
#age-share-square .share-branding-wrap{
  margin-top: -14px;
  margin-bottom: 6px;
}

#age-share-square .share-title{
  font-size: 20px;
  font-weight: 600;
  color: #ecfdf5;
  line-height: 1.15;
  margin-top: -6px;
}

/* On remonte légèrement la jauge sans casser son scale actuel */
#age-share-square .share-gauge-wrapper{
  margin: 18px auto 0;
}

/* Bloc score sous la jauge */
#age-share-square .share-score-block{
  margin-top: -8px;
  margin-bottom: 6px;
  text-align: center;
}

#age-share-square .share-score-label{
  font-size: 22px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.15;
  margin-bottom: 2px;
}

/* Très gros score */
#age-share-square .share-score-value{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

#age-share-square #share-score-number{
  font-size: 96px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

#age-share-square .share-score-unit{
  font-size: 34px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  padding-bottom: 8px;
}

/* Message juste sous le score */
#age-share-square .share-gain-text{
  margin-top: 2px !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  white-space: normal;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Top 2 un peu plus serré */
#age-share-square #share-top3{
  padding-top: 18px !important;
  max-width: 640px;
  margin: 0 auto;
}

#age-share-square #share-top3 li{
  margin: 8px auto;
  padding: 12px 16px;
  font-size: 19px;
  line-height: 1.35;
}

/* CTA bas */
#age-share-square .share-cta{
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
  color: #20b26b;
  line-height: 1.2;
}
/* ===== Affiliation V1 ===== */
.mr-aff-card{
  margin:16px 0 18px;
  padding:16px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
}
.mr-aff-kicker{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.65;
  margin-bottom:6px;
}
.mr-aff-title{font-weight:700;line-height:1.35;margin-bottom:12px;}
.mr-aff-btn{display:inline-flex;text-decoration:none;align-items:center;justify-content:center;}
.mr-aff-disclosure{font-size:11px;opacity:.55;margin-top:8px;}
.mr-aff-test-note{display:inline-block;font-size:12px;font-weight:600;padding:7px 9px;border:1px dashed rgba(0,0,0,.25);border-radius:8px;}
.mr-aff-debug{font-size:11px;opacity:.55;margin-top:9px;word-break:break-word;}