/* ============================================================================
 * effets.css — Effets de texte pour le manuel (classes dd-fx-*)
 * À inclure DANS L'ÉDITEUR (editeur.php) ET DANS LE LECTEUR (pages publiques),
 * pour un rendu identique des deux côtés.
 * Chaque effet s'applique à un <span class="dd-fx-XXX">…</span>.
 * Tu peux supprimer les blocs des effets que tu ne veux pas garder.
 * ========================================================================== */

/* base commune : n'altère pas le flux du texte */
[class*="dd-fx-"]{ -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ---------- 1. SURLIGNAGES (feutre) ---------- */
.dd-fx-surligne{ background:linear-gradient(transparent 55%, #ffe9a8 55%); padding:0 .05em; }
.dd-fx-surligne-vert{ background:linear-gradient(transparent 55%, #b8efc4 55%); padding:0 .05em; }
.dd-fx-surligne-rose{ background:linear-gradient(transparent 55%, #ffc6d9 55%); padding:0 .05em; }
.dd-fx-surligne-bleu{ background:linear-gradient(transparent 55%, #bfe0ff 55%); padding:0 .05em; }
.dd-fx-surligne-total{ background:#fff3bf; padding:.05em .25em; border-radius:4px; }

/* ---------- 2. PASTILLE / ÉTIQUETTE ---------- */
.dd-fx-pastille{ background:#2451b3; color:#fff; padding:.08em .55em; border-radius:999px; font-weight:600; }
.dd-fx-pastille-vert{ background:#2e7d32; color:#fff; padding:.08em .55em; border-radius:999px; font-weight:600; }
.dd-fx-pastille-rouge{ background:#c0392b; color:#fff; padding:.08em .55em; border-radius:999px; font-weight:600; }
.dd-fx-etiquette{ background:#fff3bf; color:#7a5a00; padding:.05em .45em; border:1px solid #e6c84a; border-radius:6px; font-weight:600; }

/* ---------- 3. DÉGRADÉS (texte coloré) ---------- */
.dd-fx-degrade{ background:linear-gradient(90deg,#6a3df0,#c0392b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.dd-fx-degrade-froid{ background:linear-gradient(90deg,#0ea5e9,#6a3df0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.dd-fx-degrade-chaud{ background:linear-gradient(90deg,#f59e0b,#e11d48); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.dd-fx-degrade-foret{ background:linear-gradient(90deg,#16a34a,#0e7490); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.dd-fx-or{ background:linear-gradient(90deg,#b8860b,#ffe9a8,#b8860b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }

/* ---------- 4. DÉGRADÉ ANIMÉ + ARC-EN-CIEL ---------- */
.dd-fx-degrade-anime{ background:linear-gradient(90deg,#6a3df0,#e11d48,#f59e0b,#6a3df0); background-size:300% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; animation:ddfxGrad 6s linear infinite; }
.dd-fx-arcenciel{ background:linear-gradient(90deg,#e11d48,#f59e0b,#facc15,#16a34a,#0ea5e9,#6a3df0,#e11d48); background-size:300% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; animation:ddfxGrad 8s linear infinite; }
@keyframes ddfxGrad{ from{background-position:0 center} to{background-position:300% center} }

/* ---------- 5. CONTOUR (outline) ---------- */
.dd-fx-contour{ color:transparent; -webkit-text-stroke:1px var(--encre,#222); font-weight:700; }
.dd-fx-contour-couleur{ color:transparent; -webkit-text-stroke:1.2px #2451b3; font-weight:700; }

/* ---------- 6. OMBRES / RELIEF ---------- */
.dd-fx-ombre{ text-shadow:2px 2px 0 rgba(0,0,0,.18); }
.dd-fx-ombre-douce{ text-shadow:0 2px 6px rgba(0,0,0,.30); }
.dd-fx-releve{ color:#e7ebf3; text-shadow:1px 1px 0 #b7c0d4, 2px 2px 0 #9aa6bf; font-weight:700; }
.dd-fx-creux{ color:#cfd6e4; text-shadow:1px 1px 1px #fff, -1px -1px 1px rgba(0,0,0,.35); font-weight:700; }
.dd-fx-3d{ color:#e11d48; text-shadow:1px 1px 0 #a3122f,2px 2px 0 #a3122f,3px 3px 0 #a3122f,4px 4px 4px rgba(0,0,0,.25); font-weight:800; }

/* ---------- 7. NÉON / LUEUR ---------- */
.dd-fx-neon{ color:#fff; text-shadow:0 0 4px #fff,0 0 10px #0ff,0 0 20px #0ff,0 0 40px #06f; font-weight:700; }
.dd-fx-neon-rose{ color:#fff; text-shadow:0 0 4px #fff,0 0 10px #f0f,0 0 20px #f0f,0 0 40px #b02bb0; font-weight:700; }
.dd-fx-lueur{ text-shadow:0 0 8px currentColor; }

/* ---------- 8. RÉTRO / FUN ---------- */
.dd-fx-retro{ color:#ffd23f; text-shadow:2px 2px 0 #e11d48,4px 4px 0 #6a3df0; font-weight:800; letter-spacing:.02em; }
.dd-fx-comic{ font-weight:800; color:#222; -webkit-text-stroke:.5px #222; text-shadow:2px 2px 0 #ffd23f; }
.dd-fx-souligne-anime{ background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0 2px; transition:background-size .35s ease; }
.dd-fx-souligne-anime:hover{ background-size:100% 2px; }

/* ---------- 9. ESPACEMENT / CASSE ---------- */
.dd-fx-espace{ letter-spacing:.22em; }
.dd-fx-petitescaps{ font-variant:small-caps; letter-spacing:.04em; }
.dd-fx-majus{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; }

/* ---------- 10. ANIMATIONS texte ---------- */
.dd-fx-clignote{ animation:ddfxBlink 1.1s steps(2,start) infinite; }
@keyframes ddfxBlink{ 50%{opacity:.25} }
.dd-fx-pulse{ display:inline-block; animation:ddfxPulse 1.6s ease-in-out infinite; }
@keyframes ddfxPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.dd-fx-tremble{ display:inline-block; animation:ddfxShake .5s linear infinite; }
@keyframes ddfxShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-1px) rotate(-1deg)} 75%{transform:translateX(1px) rotate(1deg)} }

/* Respect des préférences d'accessibilité : on coupe les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .dd-fx-degrade-anime,.dd-fx-arcenciel,.dd-fx-clignote,.dd-fx-pulse,.dd-fx-tremble{ animation:none !important; }
}

/* ---------- 11. INSPIRÉS (créations maison) ---------- */
/* Aurora : dégradé doux et lumineux qui ondule */
.dd-fx-aurora{
  background:linear-gradient(90deg,#7ce0d3,#6a8cff,#b06aff,#7ce0d3);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:700; animation:ddfxGrad 7s linear infinite;
  filter:drop-shadow(0 0 6px rgba(120,160,255,.45));
}
/* Contour décalé : double contour léger façon "outline offset" */
.dd-fx-outline-offset{
  color:var(--encre,#222);
  text-shadow:2px 2px 0 #fff, 3px 3px 0 #2451b3;
  font-weight:700;
}
/* Reflet : léger miroir sous le texte via box-reflect (WebKit/Blink) */
.dd-fx-reflet{
  display:inline-block; font-weight:700;
  -webkit-box-reflect:below 0 linear-gradient(transparent 55%, rgba(0,0,0,.28));
}

/* ============================================================================
 * Menu du bouton ✨ Effets (éditeur seulement) + bouton dans la barre inline
 * ========================================================================== */
.dd-itool-fx{ font-size:15px; }
.dd-fx-veil{ position:fixed; inset:0; z-index:9700; background:transparent; }
.dd-fx-menu{
  position:fixed; z-index:9701; max-height:320px; overflow-y:auto;
  background:var(--surface,#fff); border:1px solid var(--trait,#d8deea); border-radius:12px;
  box-shadow:0 16px 44px rgba(20,30,60,.22); padding:6px;
}
.dd-fx-item{
  display:flex; align-items:center; gap:10px; width:100%;
  border:0; background:transparent; border-radius:8px;
  padding:6px 8px; cursor:pointer; text-align:left; font:inherit;
}
.dd-fx-item:hover{ background:color-mix(in srgb, var(--accent,#2451b3) 8%, var(--surface,#fff)); }
.dd-fx-prev{
  flex:0 0 52px; text-align:center; font-size:16px; font-weight:700;
  background:var(--surface2,#f7f9fc); border:1px solid var(--trait,#eef1f7); border-radius:6px; padding:3px 4px;
  white-space:nowrap; overflow:hidden;
}
.dd-fx-lbl{ font-size:13px; color:var(--encre2,#33415c); }

/* ============================================================================
 * BLOCS « éditeur ultime » — rendu public + aperçu (mn-*) et aides éditeur (dd-*)
 * Tout est écrit pour ce projet (aucun code tiers). Variables du thème réutilisées.
 * ========================================================================== */

/* ---- aides d'édition (n'apparaissent que dans l'éditeur) ---- */
.dd-blk-edit{ display:flex; flex-direction:column; gap:10px; }
.dd-blk-lbl{ font-weight:700; font-size:13px; color:var(--encre2,#33415c); letter-spacing:.02em; }
.dd-stack-item{ border:1px solid var(--trait,#e6e9f2); border-radius:10px; padding:10px; background:var(--surface,#fafbff); display:flex; flex-direction:column; gap:8px; }
.dd-stack-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dd-stack-head .dd-input{ flex:1 1 auto; min-width:0; }
.dd-area{ min-height:60px; border:1px solid var(--trait,#d8deea); border-radius:8px; padding:8px; background:var(--surface,#fff); }
.dd-small{ font-size:12px; color:var(--doux,#647089); }
.dd-mini-add{ align-self:flex-start; border:1px dashed #9db0d8; background:color-mix(in srgb, var(--accent,#2451b3) 10%, var(--surface,#fff)); color:#2451b3; border-radius:8px; padding:6px 12px; cursor:pointer; font:inherit; font-size:13px; }
.dd-mini-add:hover{ background:#e0e9ff; }
.dd-mini-del{ border:0; background:#fff0f0; color:#c0392b; border-radius:7px; padding:5px 9px; cursor:pointer; font-size:13px; }
.dd-mini-del:hover{ background:#ffe0e0; }
.dd-tbl-edit{ border-collapse:collapse; width:100%; }
.dd-tbl-edit td{ border:1px solid var(--trait,#e0e4ee); padding:2px; }
.dd-tbl-edit .dd-input{ width:100%; border:0; background:transparent; }
.dd-tbl-x{ width:34px; text-align:center; border:0 !important; background:transparent; }

/* ====================== ONGLETS ====================== */
.mn-tabs{ border:1px solid var(--trait,#e3e7f1); border-radius:12px; overflow:hidden; background:var(--surface,#fff); }
.mn-tabs-bar{ display:flex; flex-wrap:wrap; gap:2px; background:var(--surface2,#f4f6fb); padding:6px 6px 0; border-bottom:1px solid var(--trait,#e3e7f1); }
.mn-tab-btn{ border:0; background:transparent; padding:9px 16px; cursor:pointer; font:inherit; font-weight:600; color:var(--doux,#5a6679); border-radius:8px 8px 0 0; }
.mn-tab-btn:hover{ color:#2451b3; }
.mn-tab-btn.is-on{ background:var(--surface,#fff); color:#2451b3; box-shadow:0 -2px 0 #2451b3 inset; }
.mn-tabs-body{ padding:16px 18px; }
.mn-tab-pane{ display:none; }
.mn-tab-pane.is-on{ display:block; }

/* ====================== ACCORDÉON ====================== */
.mn-accordeon{ display:flex; flex-direction:column; gap:8px; }
.mn-acc-item{ border:1px solid var(--trait,#e3e7f1); border-radius:10px; background:var(--surface,#fff); overflow:hidden; }
.mn-acc-head{ list-style:none; cursor:pointer; padding:12px 16px; font-weight:600; color:var(--encre,#28324a); display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface2,#f7f9fd); }
.mn-acc-head::-webkit-details-marker{ display:none; }
.mn-acc-item[open] .mn-acc-head{ color:#2451b3; }
.mn-acc-fleche{ transition:transform .18s ease; color:#9aa7c2; }
.mn-acc-item[open] .mn-acc-fleche{ transform:rotate(90deg); }
.mn-acc-corps{ padding:12px 16px; }

/* ====================== GRILLE DE CARTES ====================== */
.mn-grille{ display:grid; gap:14px; }
.mn-grille-2{ grid-template-columns:repeat(2,1fr); }
.mn-grille-3{ grid-template-columns:repeat(3,1fr); }
.mn-grille-4{ grid-template-columns:repeat(4,1fr); }
.mn-card{ border:1px solid var(--trait,#e6e9f2); border-radius:12px; padding:16px; background:var(--surface,#fff); box-shadow:0 2px 10px rgba(30,40,80,.04); }
.mn-card-ico{ font-size:26px; margin-bottom:8px; }
.mn-card-t{ font-weight:700; color:var(--encre,#28324a); margin-bottom:4px; }
.mn-card-x{ font-size:14px; color:var(--encre2,#4d5970); }
@media(max-width:760px){ .mn-grille-3,.mn-grille-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .mn-grille-2,.mn-grille-3,.mn-grille-4{ grid-template-columns:1fr; } }

/* ====================== TÉMOIGNAGES ====================== */
.mn-temos{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.mn-temo{ margin:0; border:1px solid var(--trait,#e6e9f2); border-radius:12px; padding:16px; background:var(--surface,#fff); box-shadow:0 2px 10px rgba(30,40,80,.04); }
.mn-temo-note{ color:#f5a623; letter-spacing:2px; margin-bottom:6px; }
.mn-temo blockquote{ margin:0 0 10px; font-style:italic; color:var(--encre2,#374055); }
.mn-temo figcaption{ font-size:13px; color:var(--doux,#5a6679); }
.mn-temo figcaption b{ color:var(--encre,#28324a); }
.mn-temo figcaption span{ display:block; color:var(--doux,#8a93a8); }

/* ====================== LIENS SOCIAUX ====================== */
.mn-socials{ display:flex; flex-wrap:wrap; gap:10px; }
.mn-soc{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:color-mix(in srgb, var(--accent,#2451b3) 10%, var(--surface,#fff)); color:#2451b3; font-weight:600; font-size:14px; text-decoration:none; border:1px solid #dce6ff; }
.mn-soc:hover{ background:#e0e9ff; }
.mn-soc-ic{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#2451b3; color:#fff; font-size:12px; font-weight:700; }
.mn-soc-youtube .mn-soc-ic{ background:#e0322b; } .mn-soc-youtube{ color:#b21d17; background:#fdeceb; border-color:#f8d4d1; }
.mn-soc-instagram .mn-soc-ic{ background:#c13584; } .mn-soc-instagram{ color:#a02a6e; background:#fbecf5; border-color:#f3d4e7; }
.mn-soc-facebook .mn-soc-ic{ background:#1877f2; }
.mn-soc-tiktok .mn-soc-ic{ background:#111; } .mn-soc-tiktok{ color:#111; background:#eee; border-color:#ddd; }
.mn-soc-x .mn-soc-ic{ background:#111; } .mn-soc-x{ color:#111; background:#eee; border-color:#ddd; }
.mn-soc-mail .mn-soc-ic{ background:#5a6679; }

/* ====================== COMPTEURS ====================== */
.mn-compteurs{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); text-align:center; }
.mn-compteur{ padding:14px; }
.mn-compteur-v{ font-size:38px; font-weight:800; color:#2451b3; line-height:1; }
.mn-compteur-s{ font-size:22px; margin-left:2px; }
.mn-compteur-l{ margin-top:6px; font-size:14px; color:var(--doux,#5a6679); }

/* ====================== DIVISEURS ====================== */
.mn-div{ display:flex; align-items:center; justify-content:center; margin:18px 0; }
.mn-div-ligne .mn-div-deco{ height:1px; width:60%; background:var(--trait,#d6dcea); }
.mn-div-double .mn-div-deco{ height:6px; width:60%; border-top:2px solid #c5cde0; border-bottom:2px solid #c5cde0; }
.mn-div-points .mn-div-deco{ width:60%; height:6px; background-image:radial-gradient(circle, #b9c2da 2px, transparent 2.5px); background-size:18px 6px; background-repeat:repeat-x; background-position:center; }
.mn-div-degrade .mn-div-deco{ height:3px; width:70%; border-radius:3px; background:linear-gradient(90deg,transparent,#2451b3,transparent); }
.mn-div-zigzag .mn-div-deco{ width:60%; height:8px; background:linear-gradient(135deg,#c5cde0 25%,transparent 25%) -8px 0,linear-gradient(225deg,#c5cde0 25%,transparent 25%) -8px 0; background-size:16px 16px; background-repeat:repeat-x; }
.mn-div-etoile{ color:#9aa7c2; }
.mn-div-etoile .mn-div-deco{ width:auto; }
.mn-div-etoile .mn-div-deco::before{ content:"✦ ✦ ✦"; letter-spacing:14px; color:#b9c2da; }
.mn-div-texte{ gap:14px; }
.mn-div-texte::before, .mn-div-texte::after{ content:""; flex:1; height:1px; background:var(--trait,#d6dcea); }
.mn-div-texte span{ font-weight:700; color:var(--doux,#5a6679); text-transform:uppercase; letter-spacing:.08em; font-size:13px; }

/* ====================== FORMES / BANNIÈRES ====================== */
.mn-forme{ margin:14px 0; }
.mn-forme-in{ color:#fff; font-weight:700; }
.mn-forme-ruban .mn-forme-in{ display:inline-block; background:var(--mn-forme-col); padding:10px 22px; position:relative; }
.mn-forme-ruban .mn-forme-in::before, .mn-forme-ruban .mn-forme-in::after{ content:""; position:absolute; top:100%; border:7px solid transparent; }
.mn-forme-ruban .mn-forme-in::before{ left:0; border-top-color:var(--mn-forme-col); border-right-color:var(--mn-forme-col); filter:brightness(.7); }
.mn-forme-ruban .mn-forme-in::after{ right:0; border-top-color:var(--mn-forme-col); border-left-color:var(--mn-forme-col); filter:brightness(.7); }
.mn-forme-pilule .mn-forme-in{ display:inline-block; background:var(--mn-forme-col); padding:10px 26px; border-radius:999px; }
.mn-forme-note .mn-forme-in{ display:block; background:var(--mn-forme-col); padding:16px 20px; border-radius:4px; box-shadow:3px 3px 0 rgba(0,0,0,.15); }
.mn-forme-fleche .mn-forme-in{ display:inline-block; background:var(--mn-forme-col); padding:10px 28px 10px 20px; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.mn-forme-nuage .mn-forme-in{ display:inline-block; background:var(--mn-forme-col); padding:14px 22px; border-radius:16px; position:relative; }
.mn-forme-nuage .mn-forme-in::after{ content:""; position:absolute; left:28px; top:100%; border:10px solid transparent; border-top-color:var(--mn-forme-col); }
.mn-forme-biseau .mn-forme-in{ display:inline-block; background:var(--mn-forme-col); padding:12px 24px; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); }

/* ====================== TABLEAUX STYLÉS ====================== */
.mn-tbls{ border-collapse:collapse; width:100%; font-size:14px; }
.mn-tbls th, .mn-tbls td{ padding:9px 12px; text-align:left; }
.mn-tbls th{ background:#2451b3; color:#fff; font-weight:700; }
.mn-tbls-raye td{ border-bottom:1px solid var(--trait,#eef1f7); }
.mn-tbls-raye tr:nth-child(even) td{ background:color-mix(in srgb, var(--encre,#28324a) 4%, var(--surface,#fff)); }
.mn-tbls-bord th, .mn-tbls-bord td{ border:1px solid var(--trait,#cdd6e8); }
.mn-tbls-minimal th{ background:transparent; color:#2451b3; border-bottom:2px solid #2451b3; }
.mn-tbls-minimal td{ border-bottom:1px solid var(--trait,#eef1f7); }
.mn-tbls-encadre{ border:2px solid #2451b3; border-radius:10px; overflow:hidden; }
.mn-tbls-encadre th{ background:#2451b3; }
.mn-tbls-encadre td{ border-bottom:1px solid var(--trait,#e3e9f6); }

/* ---- impression : déplie tout, neutralise les onglets ---- */
@media print{
  .mn-tab-pane{ display:block !important; }
  .mn-tabs-bar{ display:none; }
  .mn-acc-corps{ display:block !important; }
  .mn-acc-fleche{ display:none; }
}

/* ====================== CARTES NUMÉROTÉES ====================== */
.mn-cnums{ display:grid; gap:22px; }
.mn-cnums-1{ grid-template-columns:1fr; }
.mn-cnums-2{ grid-template-columns:repeat(2,1fr); }
.mn-cnums-3{ grid-template-columns:repeat(3,1fr); }
.mn-cnum{ background:var(--mn-cnum-col,#c8553d); color:#fff; border-radius:16px; padding:26px 28px; }
.mn-cnum-pastille{ width:64px; height:64px; border-radius:50%; background:var(--surface,#fff); color:var(--mn-cnum-col,#c8553d);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin-bottom:16px; }
.mn-cnum-t{ font-size:18px; font-weight:700; margin-bottom:8px; }
.mn-cnum-x{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.92); }
.mn-cnum-x b, .mn-cnum-x strong{ color:#fff; }
@media(max-width:760px){ .mn-cnums-2,.mn-cnums-3{ grid-template-columns:1fr; } }

/* ====================== PANNEAUX COLORÉS ====================== */
.mn-panneaux{ display:grid; gap:0; border-radius:14px; overflow:hidden; }
.mn-panneaux-1{ grid-template-columns:1fr; }
.mn-panneaux-2{ grid-template-columns:repeat(2,1fr); }
.mn-panneaux-3{ grid-template-columns:repeat(3,1fr); }
.mn-pan{ background:var(--mn-pan-col,#5a9e88); color:#fff; padding:40px 42px; }
.mn-pan-t{ font-size:30px; font-weight:800; margin:0 0 14px; color:#fff; line-height:1.1; }
.mn-pan-x{ font-size:16px; line-height:1.6; color:rgba(255,255,255,.94); margin-bottom:18px; }
.mn-pan-x b, .mn-pan-x strong{ color:#fff; }
.mn-pan-sep{ height:2px; background:rgba(255,255,255,.45); margin:8px 0 22px; }
/* chiffres-clés */
.mn-pan-chiffres{ display:flex; flex-wrap:wrap; gap:34px; margin-bottom:8px; }
.mn-pan-ch-v{ font-size:34px; font-weight:800; line-height:1.05; }
.mn-pan-ch-l{ font-size:14px; font-weight:600; margin-top:4px; color:rgba(255,255,255,.9); }
/* liste à coches */
.mn-pan-coches{ list-style:none; margin:0 0 18px; padding:0; }
.mn-pan-coches li{ position:relative; padding:7px 0 7px 32px; font-size:16px; line-height:1.45; }
.mn-pan-coches li::before{
  content:"✓"; position:absolute; left:0; top:7px;
  width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
  transform:scale(0); transition:transform .35s cubic-bezier(.2,1.4,.5,1);
}
/* bouton */
.mn-pan-btn{ display:inline-block; margin-top:8px; padding:14px 30px; border:2px solid #fff; color:#fff;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:14px; text-decoration:none;
  border-radius:4px; cursor:pointer; transition:background .2s ease, color .2s ease, transform .15s ease; }
.mn-pan-btn:hover{ background:var(--surface,#fff); color:var(--mn-pan-col,#5a9e88); transform:translateY(-2px); }
@media(max-width:760px){ .mn-panneaux-2,.mn-panneaux-3{ grid-template-columns:1fr; } .mn-pan-t{ font-size:24px; } }

/* ---- animations (n'agissent que si JS actif : <html class="mn-anim-js">) ---- */
.mn-anim-js .mn-panneaux .mn-pan{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.mn-anim-js .mn-panneaux .mn-pan.mn-anim-in{ opacity:1; transform:none; }
/* coches : révélées en cascade une fois le panneau visible */
.mn-anim-js .mn-pan .mn-pan-coches li::before{ transform:scale(0); }
.mn-anim-js .mn-pan.mn-anim-in .mn-pan-coches li:nth-child(1)::before{ transition-delay:.15s; transform:scale(1); }
.mn-anim-js .mn-pan.mn-anim-in .mn-pan-coches li:nth-child(2)::before{ transition-delay:.25s; transform:scale(1); }
.mn-anim-js .mn-pan.mn-anim-in .mn-pan-coches li:nth-child(3)::before{ transition-delay:.35s; transform:scale(1); }
.mn-anim-js .mn-pan.mn-anim-in .mn-pan-coches li:nth-child(4)::before{ transition-delay:.45s; transform:scale(1); }
.mn-anim-js .mn-pan.mn-anim-in .mn-pan-coches li:nth-child(5)::before{ transition-delay:.55s; transform:scale(1); }
.mn-anim-js .mn-pan.mn-anim-in .mn-pan-coches li:nth-child(6)::before{ transition-delay:.65s; transform:scale(1); }
.mn-anim-js .mn-pan.mn-anim-in .mn-pan-coches li:nth-child(n+7)::before{ transition-delay:.75s; transform:scale(1); }
/* aperçu éditeur : pas d'observer -> on affiche les coches directement */
.dd-body-view .mn-pan-coches li::before{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .mn-anim-js .mn-panneaux .mn-pan{ opacity:1; transform:none; transition:none; }
  .mn-pan-coches li::before{ transform:scale(1) !important; transition:none; }
}
@media print{
  .mn-panneaux .mn-pan{ opacity:1 !important; transform:none !important; }
  .mn-pan-coches li::before{ transform:scale(1) !important; }
}

/* ====================== CHIFFRES CLÉS — variante CERCLES ====================== */
.mn-compteurs-cercles{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.mn-compteurs-cercles .mn-compteur{ display:flex; flex-direction:column; align-items:center; }
.mn-compteurs-cercles .mn-compteur-v{ width:120px; height:120px; border-radius:50%; background:var(--surface,#fff); color:var(--encre,#1c1c1c);
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800;
  border:3px solid var(--mn-cpt-col,#2451b3); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.mn-compteurs-cercles .mn-compteur-l{ margin-top:14px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-size:13px; color:inherit; }

/* ====================== CARTES PROCESS ====================== */
.mn-process{ display:grid; gap:30px 48px; }
.mn-process-1{ grid-template-columns:1fr; }
.mn-process-2{ grid-template-columns:repeat(2,1fr); }
.mn-process-3{ grid-template-columns:repeat(3,1fr); }
.mn-proc-num{ width:62px; height:62px; border-radius:50%; background:var(--mn-proc-col,#2b2b2b); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; margin-bottom:14px; }
.mn-proc-x{ color:var(--encre2,#4d5970); line-height:1.6; font-size:15px; }
@media(max-width:700px){ .mn-process-2,.mn-process-3{ grid-template-columns:1fr; } }

/* ====================== CADRE + TEXTE ====================== */
.mn-cadre{ display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; }
.mn-cadre-box{ border:6px solid var(--mn-cadre-col,#4b6fd8); padding:54px 40px; min-height:230px; display:flex; align-items:flex-end; }
.mn-cadre-t{ font-size:30px; font-weight:800; color:var(--encre,#1c1c1c); line-height:1.15; }
.mn-cadre-btn{ display:inline-block; background:var(--mn-cadre-col,#4b6fd8); color:#fff; font-weight:700;
  padding:10px 26px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; font-size:13px;
  text-decoration:none; margin-bottom:18px; transition:transform .15s ease, filter .2s ease; }
.mn-cadre-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.mn-cadre-x{ color:var(--encre2,#4d5970); line-height:1.7; font-size:16px; }
@media(max-width:760px){ .mn-cadre{ grid-template-columns:1fr; } .mn-cadre-box{ padding:36px 26px; min-height:0; } }

/* ====================== CARTE IMAGE + TEXTE DÉCALÉE ====================== */
.mn-imgcard{ position:relative; max-width:420px; margin:0 auto; }
.mn-imgcard-img img{ display:block; width:100%; border-radius:2px; }
.mn-imgcard-ph{ background:var(--surface2,#eef1f7); color:var(--doux,#8a93a8); padding:60px; text-align:center; border-radius:2px; }
.mn-imgcard-panel{ background:var(--surface,#fff); box-shadow:0 10px 30px rgba(0,0,0,.12); padding:26px 28px; text-align:center; }
.mn-imgcard-bas .mn-imgcard-panel{ margin:-70px 24px 0; position:relative; }
.mn-imgcard-t{ font-size:24px; font-weight:800; margin-bottom:10px; }
.mn-imgcard-x{ color:var(--doux,#54607a); line-height:1.6; font-size:15px; }

/* ====================== IMAGE + PANNEAU SOMBRE ====================== */
.mn-imgp{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; }
.mn-imgp-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.mn-imgp-ph{ background:var(--surface2,#eef1f7); color:var(--doux,#8a93a8); min-height:320px; display:flex; align-items:center; justify-content:center; }
.mn-imgp-panel{ background:var(--mn-imgp-col,#111); color:#fff; padding:48px 46px; }
.mn-imgp-t{ font-size:40px; font-weight:800; line-height:1.05; margin-bottom:14px; }
.mn-imgp-st{ font-size:20px; font-weight:600; margin-bottom:16px; color:rgba(255,255,255,.92); }
.mn-imgp-x{ font-size:15px; line-height:1.7; color:rgba(255,255,255,.82); margin-bottom:24px; }
.mn-imgp-x b, .mn-imgp-x strong{ color:#fff; }
.mn-imgp-btn{ display:inline-block; border:1px solid rgba(255,255,255,.7); color:#fff; padding:14px 34px;
  text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:600; text-decoration:none;
  transition:background .2s ease, color .2s ease; }
.mn-imgp-btn:hover{ background:var(--surface,#fff); color:var(--mn-imgp-col,#111); }
@media(max-width:760px){ .mn-imgp{ grid-template-columns:1fr; } .mn-imgp-media{ order:-1; } .mn-imgp-t{ font-size:30px; } }

/* ---- animations (révélées au scroll si JS actif) ---- */
.mn-anim-js .mn-process .mn-proc,
.mn-anim-js .mn-imgcard,
.mn-anim-js .mn-imgp-panel{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.mn-anim-js .mn-process .mn-proc.mn-anim-in,
.mn-anim-js .mn-imgcard.mn-anim-in,
.mn-anim-js .mn-imgp-panel.mn-anim-in{ opacity:1; transform:none; }
.mn-anim-js .mn-compteurs-cercles .mn-compteur-v{ transform:scale(.6); opacity:0; transition:transform .5s cubic-bezier(.2,1.3,.5,1), opacity .5s ease; }
.mn-anim-js .mn-compteurs-cercles.mn-anim-in .mn-compteur-v{ transform:scale(1); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .mn-anim-js .mn-process .mn-proc,.mn-anim-js .mn-imgcard,.mn-anim-js .mn-imgp-panel,
  .mn-anim-js .mn-compteurs-cercles .mn-compteur-v{ opacity:1 !important; transform:none !important; transition:none; }
}
@media print{
  .mn-process .mn-proc,.mn-imgcard,.mn-imgp-panel,.mn-compteurs-cercles .mn-compteur-v{ opacity:1 !important; transform:none !important; }
  .mn-imgp{ grid-template-columns:1fr 1fr; }
}

/* ====================== GALERIE + PANNEAU ====================== */
.mn-galerie{ position:relative; }
.mn-gal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.mn-gal-img img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:2px; }
.mn-gal-panel{ background:var(--mn-gal-col,#111); color:#fff; padding:34px 36px; text-align:center;
  max-width:440px; margin:-90px auto 0; position:relative; z-index:2; }
.mn-gal-t{ font-size:30px; font-weight:800; margin-bottom:12px; }
.mn-gal-x{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.85); margin-bottom:18px; }
.mn-gal-btn{ display:inline-block; background:var(--surface,#fff); color:var(--encre,#1c1c1c); font-weight:700; padding:13px 30px;
  text-transform:uppercase; letter-spacing:.06em; font-size:13px; text-decoration:none; transition:transform .15s ease; }
.mn-gal-btn:hover{ transform:translateY(-2px); }
@media(max-width:600px){ .mn-gal-panel{ margin-top:-40px; } }

/* ====================== TIMELINE ====================== */
.mn-timeline{ position:relative; padding-left:30px; }
.mn-timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--mn-tl-col,#2451b3); opacity:.35; }
.mn-tl-item{ position:relative; padding-bottom:22px; }
.mn-tl-dot{ position:absolute; left:-30px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--mn-tl-col,#2451b3); box-shadow:0 0 0 4px rgba(36,81,179,.15); }
.mn-tl-card{ background:var(--surface,#fff); border:1px solid var(--trait,#e6e9f2); border-radius:10px; padding:14px 18px; }
.mn-tl-date{ font-weight:800; color:var(--mn-tl-col,#2451b3); font-size:14px; }
.mn-tl-t{ font-weight:700; color:var(--encre,#28324a); margin:2px 0 6px; }
.mn-tl-x{ color:var(--doux,#54607a); font-size:14px; line-height:1.55; }

/* ====================== CARTES FLIP ====================== */
.mn-flips{ display:grid; gap:16px; }
.mn-flips-2{ grid-template-columns:repeat(2,1fr); }
.mn-flips-3{ grid-template-columns:repeat(3,1fr); }
.mn-flips-4{ grid-template-columns:repeat(4,1fr); }
.mn-flip{ perspective:1000px; min-height:160px; }
.mn-flip-in{ position:relative; width:100%; height:100%; min-height:160px; transition:transform .6s; transform-style:preserve-3d; cursor:pointer; }
.mn-flip:hover .mn-flip-in, .mn-flip:focus-within .mn-flip-in{ transform:rotateY(180deg); }
.mn-flip-front, .mn-flip-back{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:12px; padding:22px; display:flex; align-items:center; justify-content:center; text-align:center; }
.mn-flip-front{ background:var(--mn-flip-col,#2451b3); color:#fff; font-weight:700; font-size:17px; }
.mn-flip-back{ background:var(--surface,#fff); border:1px solid var(--trait,#e6e9f2); color:var(--encre2,#374055); transform:rotateY(180deg); font-size:15px; line-height:1.5; }
@media(max-width:700px){ .mn-flips-3,.mn-flips-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .mn-flips-2,.mn-flips-3,.mn-flips-4{ grid-template-columns:1fr; } }

/* ====================== BARRES DE PROGRESSION ====================== */
.mn-progs{ display:flex; flex-direction:column; gap:16px; }
.mn-prog-head{ display:flex; justify-content:space-between; font-size:14px; font-weight:600; color:var(--encre2,#33415c); margin-bottom:6px; }
.mn-prog-track{ height:12px; background:var(--surface2,#eef1f7); border-radius:999px; overflow:hidden; }
.mn-prog-fill{ height:100%; background:var(--mn-prog-col,#2451b3); border-radius:999px; transition:width 1s cubic-bezier(.3,1,.4,1); }

/* ====================== STEPPER ====================== */
.mn-stepper{ display:grid; gap:18px; position:relative; }
.mn-stepper-2{ grid-template-columns:repeat(2,1fr); }
.mn-stepper-3{ grid-template-columns:repeat(3,1fr); }
.mn-stepper-4{ grid-template-columns:repeat(4,1fr); }
.mn-stepper-5{ grid-template-columns:repeat(5,1fr); }
.mn-step{ text-align:center; position:relative; padding:0 8px; }
.mn-step-num{ width:46px; height:46px; border-radius:50%; background:var(--mn-step-col,#2451b3); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; margin:0 auto 10px; position:relative; z-index:2; }
.mn-step:not(:last-child)::after{ content:""; position:absolute; top:23px; left:60%; width:80%; height:2px; background:var(--mn-step-col,#2451b3); opacity:.3; z-index:1; }
.mn-step-t{ font-weight:700; color:var(--encre,#28324a); margin-bottom:4px; }
.mn-step-x{ font-size:13px; color:var(--doux,#54607a); line-height:1.5; }
@media(max-width:700px){ .mn-stepper{ grid-template-columns:1fr !important; } .mn-step:not(:last-child)::after{ display:none; } }

/* ---- animations lot 2 ---- */
.mn-anim-js .mn-timeline .mn-tl-item,
.mn-anim-js .mn-flips .mn-flip,
.mn-anim-js .mn-stepper .mn-step,
.mn-anim-js .mn-gal-panel{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.mn-anim-js .mn-timeline.mn-anim-in .mn-tl-item,
.mn-anim-js .mn-flips.mn-anim-in .mn-flip,
.mn-anim-js .mn-stepper.mn-anim-in .mn-step,
.mn-anim-js .mn-gal-panel.mn-anim-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .mn-anim-js .mn-timeline .mn-tl-item,.mn-anim-js .mn-flips .mn-flip,.mn-anim-js .mn-stepper .mn-step,.mn-anim-js .mn-gal-panel{ opacity:1 !important; transform:none !important; transition:none; }
  .mn-flip-in{ transition:none; }
}
@media print{
  .mn-flip-in{ transform:none !important; }
  .mn-flip-back{ position:relative; transform:none; }
  .mn-flip-front{ position:relative; }
  .mn-prog-fill{ transition:none; }
  .mn-timeline .mn-tl-item,.mn-stepper .mn-step,.mn-gal-panel,.mn-flips .mn-flip{ opacity:1 !important; transform:none !important; }
}