body{margin:0;background:#FBF9F7;color:#1C2233;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#3D5DB8;text-decoration:none}
a:hover{color:#1C2233}
h1,h2,h3,h4{font-family:'Sora',sans-serif;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
input,select,textarea{font-family:inherit}

.hv0:hover{color:#fff !important}
.hv1:hover{background:#EEF1FA !important}
.hv2:hover{background:#E1E7F7 !important}
.hv3:hover{color:#1C2233 !important}
.hv4:hover{background:#3D5DB8 !important;color:#fff !important}
.hv5:hover{background:#3D5DB8 !important}
.hv6:hover{background:#4A6BC9 !important;color:#fff !important}
.hv7:hover{background:#4A6BC9 !important;color:#fff !important;border-color:#4A6BC9 !important}
.hv8:hover{background:#FFDCCF !important}
.hv9:hover{background:#E3A593 !important}
.hv10:hover{background:#3A58B0 !important}
.hv11:hover{color:#1C2233 !important;border-color:#1C2233 !important}
.hv12:hover{filter:none !important;opacity:1 !important}
.hv13:hover{box-shadow:inset 0 0 0 1px #8FA6E3 !important}
.hv14:hover{box-shadow:0 0 0 2px #6B8CD5 !important}
.hv15:hover{border-color:#6B8CD5 !important}
.hv16:hover{background:#3A58B0 !important;color:#fff !important}
.hv17:hover{border-color:#6B8CD5 !important;color:#1C2233 !important}
.hv18:hover{color:#FFDCCF !important}

/* Mobile navigation (hamburger). The header row comes from the generated
   template: header > div:nth-child(2) holds the logo link, <nav> and the CTA link (target=_blank). */
.mnav-toggle, .mnav { display: none; }

@media (max-width: 960px) {
  header > div:nth-child(2) { padding-top: 10px !important; padding-bottom: 10px !important; }
  header > div:nth-child(2) > nav:not(.mnav),
  header > div:nth-child(2) > a[target] { display: none !important; }

  .mnav-toggle {
    display: flex; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 999px;
    background: #EEF1FA; color: #1C2233; cursor: pointer; align-items: center; justify-content: center;
  }
  .mnav-toggle:hover { background: #E1E7F7; }
  .mnav-toggle:focus-visible { outline: 2px solid #4A6BC9; outline-offset: 2px; }
  .mnav-bars { position: relative; width: 20px; height: 14px; }
  .mnav-bars span {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .2s, opacity .2s, top .2s;
  }
  .mnav-bars span:nth-child(1) { top: 0; }
  .mnav-bars span:nth-child(2) { top: 6px; }
  .mnav-bars span:nth-child(3) { top: 12px; }
  .mnav-toggle[aria-expanded="true"] .mnav-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .mnav-toggle[aria-expanded="true"] .mnav-bars span:nth-child(2) { opacity: 0; }
  .mnav-toggle[aria-expanded="true"] .mnav-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .mnav {
    display: flex; flex-direction: column; gap: 2px; flex-basis: 100%;
    max-height: calc(100vh - 140px); overflow-y: auto; padding: 8px 0 16px;
    border-top: 1px solid #E4E7F2; animation: mnav-in .18s ease-out;
  }
  .mnav[hidden] { display: none; }
  .mnav-label {
    font: 600 12px 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase;
    color: #3D5DB8; padding: 14px 14px 4px;
  }
  .mnav-item {
    border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 16px;
    padding: 13px 14px; font: 500 17px 'DM Sans', sans-serif; color: #1C2233;
    display: flex; flex-direction: column; gap: 3px;
  }
  .mnav-item small { font: 400 14px/1.4 'DM Sans', sans-serif; color: #4A4F63; }
  .mnav-item:hover, .mnav-item[aria-current="page"] { background: #EEF1FA; }
  .mnav-cta {
    margin-top: 12px; text-align: center; background: #4A6BC9; color: #fff !important;
    font: 600 16px 'Sora', sans-serif; padding: 15px 20px; border-radius: 999px;
  }
  .mnav-cta:hover { background: #3D5DB8; }
}

@keyframes mnav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Menus déroulants Services et Secteurs (en-tête, au survol) */
.dd { position: relative; }
.dd-panel { position: absolute; top: 100%; left: 0; padding-top: 10px; z-index: 60; display: none; }
.dd:hover .dd-panel, .dd:focus-within .dd-panel { display: block; }
.dd.dd-off .dd-panel { display: none; }
.dd-box { background: #fff; border: 1px solid #E4E7F2; border-radius: 24px; box-shadow: 0 24px 60px rgba(28, 34, 51, .18); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dd-box a { text-decoration: none; }
@media (max-width: 960px) {
  .mnav-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
  .mnav-subitem { font: 500 14px 'DM Sans', sans-serif; color: #3D5DB8; background: #EEF1FA; padding: 6px 12px; border-radius: 999px; }
  .mnav-subitem[aria-current="page"] { background: #4A6BC9; color: #fff; }
}

/* Accueil : colonne texte plus large sur grand écran */
@media (min-width: 1000px) { .hero-hp { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) !important; } }

/* Bandeau logos de l'accueil : les logos carrés ou ronds montent plus haut pour peser autant que les logos larges */
.logo-hp[src*="Burger_King"], .logo-hp[src*="Ouigo"] { max-height: 54px !important; }
.logo-hp[src*="pokawa"], .logo-hp[src*="crepte_touch"] { max-height: 60px !important; }
.logo-hp[src*="au-bureau"] { max-height: 50px !important; }

/* Navigation buttons of the design turned into links (tools/dc2react.py). */
a.btnlink { display: inline-block; color: #1C2233; text-align: center; text-decoration: none; }

/* Pages carried over from the previous site (main.js · ContentPage), in the design's palette. */
.cp { color: #1C2233; }
.cp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.cp-narrow { max-width: 860px; }
.cp-section { padding: 72px 0; }
.cp-alt { background: #EEF1FA; }
.cp-kicker {
  display: block; font: 600 13px 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #3D5DB8; margin-bottom: 14px;
}
.cp-hero { background: #4A6BC9; color: #fff; padding: 48px 0 48px; }
.cp-hero .cp-kicker { color: #FFDCCF; }
.cp-hero h1 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; max-width: 900px; }
.cp-lead { font-size: 17px; line-height: 1.55; max-width: 760px; margin-top: 16px; color: #F2F5FD; }
.cp h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; margin-bottom: 18px; }
.cp-sub { color: #4A4F63; font-size: 17px; margin: -6px 0 28px; }
.cp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.cp-btn {
  display: inline-block; border: 0; cursor: pointer; background: #fff; color: #1C2233 !important;
  font: 600 15px 'Sora', sans-serif; padding: 14px 22px; border-radius: 999px; text-decoration: none;
}
.cp-section .cp-btn, .cp-form .cp-btn { background: #4A6BC9; color: #fff !important; }
.cp-section .cp-btn:hover, .cp-form .cp-btn:hover { background: #3D5DB8; }
.cp-btn-ghost { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px #fff; }
.cp-btn:disabled { opacity: .6; cursor: wait; }

/* Articles & legal pages */
.cp-prose { font-size: 18px; line-height: 1.7; color: #2A3045; }
.cp-prose > a:first-child { display: inline-block; font: 600 14px 'Sora', sans-serif; margin-bottom: 28px; }
.cp-prose h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0 0 22px; color: #1C2233; }
.cp-prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 44px 0 14px; }
.cp-prose h3 { font-size: 21px; margin: 30px 0 10px; }
.cp-prose h4 { font-size: 18px; margin: 24px 0 8px; }
.cp-prose p, .cp-prose ul, .cp-prose ol, .cp-prose table, .cp-prose blockquote { margin: 0 0 18px; }
.cp-prose ul, .cp-prose ol { padding-left: 24px; }
.cp-prose li { margin-bottom: 6px; }
.cp-prose img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 24px; margin: 8px 0 32px; }
.cp-prose blockquote { border-left: 4px solid #E3A593; padding: 6px 0 6px 22px; font-style: italic; color: #4A4F63; }
.cp-prose table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.cp-prose th, .cp-prose td { border: 1px solid #E4E7F2; padding: 10px 12px; text-align: left; vertical-align: top; }
.cp-prose th { background: #EEF1FA; font-family: 'Sora', sans-serif; font-weight: 600; }

/* Qui sommes-nous */
.cp-timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.cp-timeline li { background: #fff; border: 1px solid #E4E7F2; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
.cp-year { font: 800 34px 'Sora', sans-serif; color: #4A6BC9; }
.cp-team { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 20px; }
.cp-team li { background: #fff; border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.cp-team img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; margin-bottom: 10px; background: #F6DCD3; }
.cp-team strong { font: 700 17px 'Sora', sans-serif; }
.cp-team span { color: #4A4F63; font-size: 15px; }
.cp-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cp-band h2 { margin: 0; }
.cp-faq details { background: #fff; border-radius: 18px; padding: 18px 22px; margin-bottom: 10px; }
.cp-faq summary { cursor: pointer; font: 600 17px 'Sora', sans-serif; }
.cp-faq p { margin-top: 12px; line-height: 1.6; color: #4A4F63; }

/* Cards (ressources) */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.cp-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.cp-card { background: #fff; border: 1px solid #E4E7F2; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.cp-card { scroll-margin-top: 150px; }
.cp-card:target { box-shadow: 0 0 0 3px #E3A593; }
.cp-card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #EEF1FA; }
.cp-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cp-card h3 { font-size: 19px; line-height: 1.25; }
.cp-card h3 a { color: #1C2233; }
.cp-card h3 a:hover { color: #3D5DB8; }
.cp-card p { color: #4A4F63; line-height: 1.5; font-size: 15px; }
.cp-tag { align-self: flex-start; font: 600 12px 'Sora', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #1C2233; background: #F6DCD3; padding: 5px 10px; border-radius: 999px; }
.cp-more { margin-top: auto; font: 600 14px 'Sora', sans-serif; }

/* Livres blancs */
.cp-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.cp-pages img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 30px rgba(28, 34, 51, .14); background: #fff; }
.cp-form { background: #fff; border-radius: 32px; padding: 40px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 140px; }
.cp-form h2 { margin: 0; }
.cp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.cp-fields label { display: flex; flex-direction: column; gap: 6px; font: 600 14px 'Sora', sans-serif; }
.cp-fields input:not([type=checkbox]), .cp-fields select {
  font: 400 16px 'DM Sans', sans-serif; padding: 14px; border: 1.5px solid #DCE0EE; border-radius: 14px; background: #FBF9F7; color: #1C2233;
}
.cp-full { grid-column: 1 / -1; }
.cp-check { flex-direction: row !important; align-items: flex-start; font: 400 14px/1.45 'DM Sans', sans-serif !important; color: #4A4F63; }
.cp-check input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.cp-error { color: #B23A48; font-weight: 500; }
.cp-sent h3 { font-size: 26px; }

@media (max-width: 640px) {
  .cp-wrap { padding: 0 16px; }
  .cp-section { padding: 52px 0; }
  .cp-hero { padding: 60px 0 56px; }
  .cp-form { padding: 24px; border-radius: 24px; }
}

/* Cookie banner (consent.js) */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; max-width: 720px; margin: 0 auto;
  background: #1C2233; color: #E8EDFA; border-radius: 20px; padding: 16px 20px; display: flex; gap: 16px;
  align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 18px 50px rgba(28, 34, 51, .35);
  font: 400 14px/1.45 'DM Sans', sans-serif;
}
.cookie-banner p { flex: 1 1 280px; }
.cookie-banner a { color: #FFDCCF; }
.cookie-banner div { display: flex; gap: 8px; }
.cookie-banner button { border: 0; cursor: pointer; border-radius: 999px; padding: 10px 18px; font: 600 14px 'Sora', sans-serif; background: transparent; color: #E8EDFA; box-shadow: inset 0 0 0 1.5px #5A79CF; }
.cookie-banner button[data-v=accepted] { background: #4A6BC9; color: #fff; box-shadow: none; }

/* Page /plateforme (main.js · PlateformePage) */
.pf-shared { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.pf-shared li { font: 600 14px 'Sora', sans-serif; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); padding: 8px 14px; border-radius: 999px; }
.pf-tag { align-self: flex-start; font: 600 12px 'Sora', sans-serif; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.pf-tag-h { background: #4A6BC9; color: #fff; }
.pf-tag-p { background: #DCE4F7; color: #1C2233; }
.pf-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 500px); gap: 48px; align-items: center; }
.pf-hero { padding: 40px 0 44px; }
.pf-video { margin: 0; }
.pf-video video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: min(560px, calc(100vh - 190px)); object-fit: cover; border-radius: 28px; background: #EEF1FA; box-shadow: 0 30px 70px rgba(28, 34, 51, .35); }
.pf-cycle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 12px; }
.pf-side { display: flex; flex-direction: column; gap: 14px; }
.pf-side-title { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; border-radius: 18px; color: #fff; background: #4A6BC9; }
.pf-side-p .pf-side-title { background: #6B8CD5; }
.pf-side-title .pf-tag { background: rgba(255, 255, 255, .2); color: #fff; }
.pf-side-title span:last-child { font: 700 clamp(18px, 1.6vw, 22px)/1.2 'Sora', sans-serif; color: #fff; }
.pf-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pf-card { background: #fff; border: 1px solid #E4E7F2; border-left: 5px solid #4A6BC9; border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.pf-card.pf-p { border-left-color: #6B8CD5; }
.pf-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-story-card .pf-card-head { justify-content: space-between; }
.pf-num { font: 800 13px 'Sora', sans-serif; color: #fff; background: #4A6BC9; border-radius: 999px; padding: 3px 9px; }
.pf-p .pf-num { background: #6B8CD5; }
.pf-step, .pf-when { font: 600 12px 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #3D5DB8; }
.pf-card h3, .pf-story-card h3 { font-size: 18px; line-height: 1.25; }
.pf-card p, .pf-story-card p { color: #4A4F63; line-height: 1.5; font-size: 15px; }
.pf-ring { display: block; width: 100%; height: auto; overflow: visible; }
.pf-ring-lane { font: 700 17px 'Sora', sans-serif; }
.pf-ring-cross { font: 600 12.5px 'Sora', sans-serif; fill: #1C2233; }
.pf-ring-center { font: 800 21px 'Sora', sans-serif; fill: #fff; }
.pf-ring-num { font: 800 15px 'Sora', sans-serif; fill: #fff; }
.pf-ring-step { font: 700 14px 'Sora', sans-serif; fill: #1C2233; }
.pf-story { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; counter-reset: story; }
.pf-story-card { background: #fff; border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; border-top: 5px solid #4A6BC9; }
.pf-story-card.pf-p { border-top-color: #6B8CD5; }
.pf-table-wrap { overflow-x: auto; margin-top: 8px; }
.pf-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #E4E7F2; border-radius: 22px; overflow: hidden; }
.pf-table th, .pf-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid #E4E7F2; line-height: 1.5; }
.pf-table tbody tr:last-child th, .pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table thead th { background: #EEF1FA; }
.pf-table tbody th { font: 700 15px 'Sora', sans-serif; width: 22%; }
.pf-table td { color: #4A4F63; width: 39%; }
.pf-gain { background: #fff; border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.pf-gain h3 { font-size: 20px; }
.pf-gain p { color: #4A4F63; line-height: 1.55; }
.pf-exit { background: #fff; border: 1px solid #E4E7F2; border-radius: 24px; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.pf-exit h3 { font-size: 23px; line-height: 1.2; }
.pf-exit p { color: #4A4F63; line-height: 1.55; }
.pf-exit .cp-btn { align-self: flex-start; margin-top: auto; }
.cp-hero .cp-btn[href="#boucle"] { background: #fff; }

@media (max-width: 1080px) {
  .pf-cycle { grid-template-columns: 1fr 1fr; }
  .pf-ring-wrap { grid-column: 1 / -1; grid-row: 1; max-width: 460px; justify-self: center; width: 100%; }
}
@media (max-width: 860px) {
  .pf-hero-grid { grid-template-columns: 1fr; }
  .pf-video { max-width: 440px; }
  .pf-cycle { grid-template-columns: 1fr; }
}


/* Livres blancs : présentation, sommaire, public */
.cp-wp-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 48px; align-items: start; }
.cp-wp-side { background: #EEF1FA; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.cp-wp-side h3 { font-size: 18px; margin-top: 6px; }
.cp-wp-side ol, .cp-wp-side ul { margin: 0; padding-left: 20px; color: #4A4F63; line-height: 1.6; }
.cp-wp-side .cp-btn { align-self: flex-start; margin-top: 10px; }
@media (max-width: 860px) { .cp-wp-grid { grid-template-columns: 1fr; } }

/* En-têtes de page compacts (grand écran) : titre et marges réduits pour que l'en-tête tienne dans l'écran.
   Les sections viennent de la maquette avec des styles en ligne, d'où les sélecteurs sur l'attribut style.
   Chaque sélecteur existe en deux formes : celle du HTML pré-rendu (« padding:80px 32px ») et celle que le
   navigateur écrit quand React affiche la page après une navigation (« padding: 80px 32px »). */
@media (min-width: 900px) {
  h1[style*="font-size:clamp(40px,5vw"], h1[style*="font-size: clamp(40px, 5vw"], h1[style*="font-size:clamp(34px,4vw,56px)"], h1[style*="font-size: clamp(34px, 4vw, 56px)"] { font-size: clamp(34px, 3.7vw, 54px) !important; }
  /* Méthode, Services, Secteurs : en-tête puis section suivante resserrée */
  section[style*="padding:80px 32px"]:has(h1), section[style*="padding: 80px 32px"]:has(h1) { padding-top: 40px !important; padding-bottom: 8px !important; gap: 16px !important; }
  section[style*="padding:80px 32px"]:has(h1) + section[style*="padding:96px 32px"], section[style*="padding: 80px 32px"]:has(h1) + section[style*="padding: 96px 32px"] { padding-top: 40px !important; }
  /* Pages service et secteur */
  section[style*="padding:24px 32px 72px"]:has(h1), section[style*="padding: 24px 32px 72px"]:has(h1) { padding-bottom: 44px !important; }
  /* Contact, Devenir Smiceur, Horizon, Pulse (en-têtes sur fond coloré) */
  div[style*="padding:96px 32px"]:has(h1), div[style*="padding: 96px 32px"]:has(h1) { padding-top: 44px !important; padding-bottom: 56px !important; }
  div[style*="padding:88px 32px"]:has(h1), div[style*="padding: 88px 32px"]:has(h1) { padding-top: 40px !important; }
  div[style*="padding:88px 32px 64px"]:has(h1), div[style*="padding: 88px 32px 64px"]:has(h1) { padding-bottom: 44px !important; }
  div[style*="padding:88px 32px;"]:has(h1), div[style*="padding: 88px 32px;"]:has(h1) { padding-bottom: 48px !important; }
  div[style*="padding-bottom:88px"]:has(> h1), div[style*="padding-bottom: 88px"]:has(> h1) { padding-bottom: 44px !important; gap: 18px !important; }
  /* Maquettes de téléphone des en-têtes Devenir Smiceur et Pulse : un peu plus petites */
  div[style*="max-width:300px;margin:0 auto 64px;border:9px solid"], div[style*="max-width: 300px; margin: 0px auto 64px; border: 9px solid"] { max-width: 260px !important; margin-bottom: 40px !important; }
  div[style*="width:340px;background:#4A6BC9;border-radius:48px"], div[style*="width: 340px; background: rgb(74, 107, 201); border-radius: 48px"] { zoom: .84; }
}

/* Page /diagnostic (main.js · DiagnosticPage) */
.dg-section { background: #EEF1FA; padding-top: 48px; }
.dg-quiz { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 140px; }
.dg-progress { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.dg-progress span { height: 6px; border-radius: 3px; background: #D5DCF0; transition: background .2s; }
.dg-progress span.is-done { background: #4A6BC9; }
.dg-progress span.is-current { background: #6B8CD5; }
.dg-card { background: #fff; border-radius: 32px; padding: 36px 40px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 20px 50px rgba(28, 34, 51, .08); }
.dg-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 600 13px 'Sora', sans-serif; color: #7D85B8; }
.dg-step { color: #3D5DB8; letter-spacing: .06em; text-transform: uppercase; }
.dg-q { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; font-weight: 700; margin: 0; }
.dg-options { display: flex; flex-direction: column; gap: 10px; }
.dg-option { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 14px; align-items: center; padding: 16px 20px; border: 1.5px solid #E4E7F2; border-radius: 18px; font: 500 16px/1.4 'DM Sans', sans-serif; color: #1C2233; transition: border-color .15s, background .15s; }
.dg-option:hover, .dg-option:focus-visible { border-color: #6B8CD5; background: #F5F7FD; }
.dg-option.is-on { border-color: #4A6BC9; background: #EEF1FA; }
.dg-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #B9C4E6; flex-shrink: 0; }
.dg-option.is-on .dg-dot { border: 6px solid #4A6BC9; }
.dg-nav { display: flex; justify-content: space-between; gap: 12px; min-height: 22px; }
.dg-back { all: unset; cursor: pointer; font: 600 14px 'Sora', sans-serif; color: #3D5DB8; }
.dg-back:hover { color: #1C2233; }
.dg-result { display: flex; flex-direction: column; gap: 28px; scroll-margin-top: 140px; }
.dg-summary { background: #fff; border-radius: 32px; padding: 36px 40px; display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 36px; align-items: center; }
.dg-wheel { width: 100%; height: auto; display: block; overflow: visible; }
.dg-wheel-total { font: 800 52px 'Sora', sans-serif; fill: #fff; }
.dg-wheel-sub { font: 500 14px 'DM Sans', sans-serif; fill: #C9D2EC; }
.dg-wheel-num { font: 800 20px 'Sora', sans-serif; fill: #fff; }
.dg-wheel-step { font: 700 15px 'Sora', sans-serif; fill: #1C2233; }
.dg-summary-text { display: flex; flex-direction: column; gap: 14px; }
.dg-summary-text .cp-kicker { margin-bottom: 0; }
.dg-level { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin: 0; }
.dg-level span { color: #1C2233; font-weight: 600; font-size: .6em; }
.dg-summary-text > p { color: #4A4F63; line-height: 1.55; }
.dg-weak { background: #FBEDEF; border-left: 5px solid #B23A48; border-radius: 14px; padding: 14px 18px; }
.dg-weak strong { font: 700 13px 'Sora', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #B23A48; }
.dg-weak p { margin-top: 4px; line-height: 1.5; }
.dg-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dg-bars li { display: grid; grid-template-columns: 96px 1fr 34px; gap: 12px; align-items: center; font-size: 14px; }
.dg-bar { height: 10px; border-radius: 999px; background: #EEF1FA; overflow: hidden; }
.dg-bar span { display: block; height: 100%; border-radius: 999px; }
.dg-bars b { text-align: right; font: 700 14px 'Sora', sans-serif; }
.dg-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: #4A4F63; }
.dg-legend span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: -8px; }
.dg-h2 { margin: 12px 0 0; }
.dg-recos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.dg-reco { background: #fff; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.dg-reco-step { font: 700 12px 'Sora', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.dg-reco h3 { font-size: 20px; line-height: 1.25; }
.dg-reco p { color: #4A4F63; line-height: 1.55; }
.dg-links { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.dg-link { font: 600 14px 'Sora', sans-serif; color: #3D5DB8; }
.dg-link:hover { color: #1C2233; }
.dg-form { margin-top: 12px; }
.dg-restart { text-align: center; }
@media (max-width: 760px) {
  .dg-card, .dg-summary { padding: 24px 20px; border-radius: 24px; }
  .dg-summary { grid-template-columns: 1fr; }
  .dg-wheel { max-width: 320px; margin: 0 auto; }
}

/* Page /methode : contenu enrichi (main.js · MethodePage) */
.mt .cp-section { padding: 88px 0; }
.mt-head { display: flex; flex-direction: column; gap: 6px; max-width: 820px; margin-bottom: 36px; }
.mt-head h2 { margin: 0; }
.mt-head p { color: #4A4F63; font-size: 18px; line-height: 1.55; }
.mt-steps { display: flex; flex-direction: column; gap: 18px; }
.mt-step { background: #fff; border: 1px solid #E4E7F2; border-radius: 28px; padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; }
.mt-step-head { display: flex; gap: 18px; align-items: flex-start; }
.mt-num { font: 800 36px/1 'Sora', sans-serif; color: #6B8CD5; }
.mt-step h3 { font-size: 24px; line-height: 1.2; margin-bottom: 10px; }
.mt-goal { font-size: 17px; line-height: 1.5; color: #1C2233; font-weight: 500; }
.mt-who { margin-top: 10px; font-size: 14px; color: #4A4F63; line-height: 1.45; }
.mt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.mt-label { display: block; font: 600 12px 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #3D5DB8; margin-bottom: 6px; }
.mt-grid p, .mt-grid li { color: #4A4F63; line-height: 1.5; font-size: 15px; }
.mt-grid ul { margin: 0; padding-left: 18px; }
.mt-trap { background: #FBF1EC; border-radius: 16px; padding: 14px 16px; }
.mt-trap .mt-label { color: #C0533A; }
.mt-tools { font: 600 14px 'Sora', sans-serif; color: #1C2233 !important; margin-bottom: 6px; }
.mt-alt { background: #EEF1FA; }
.mt-table { background: #fff; border-radius: 28px; overflow: hidden; }
.mt-row { display: grid; grid-template-columns: minmax(140px, .7fr) 1fr 1fr; gap: 0; border-top: 1px solid #E4E7F2; }
.mt-row > span { padding: 18px 24px; line-height: 1.5; }
.mt-row-head { border-top: 0; font: 700 14px 'Sora', sans-serif; }
.mt-row-head .mt-us { color: #fff; background: #4A6BC9; }
.mt-crit { font: 600 14px 'Sora', sans-serif; color: #1C2233; }
.mt-them { color: #7D85B8; }
.mt-row .mt-us { color: #1C2233; font-weight: 500; background: #F5F7FD; }
.mt-row-head .mt-us { background: #4A6BC9; }
.mt-entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.mt-entry { background: #fff; border: 1px solid #E4E7F2; border-top: 4px solid #4A6BC9; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.mt-entry h3 { font-size: 21px; }
.mt-entry p { color: #4A4F63; line-height: 1.55; }
.mt-rollout-title { font-size: 22px; margin: 48px 0 18px; }
.mt-rollout { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; counter-reset: none; }
.mt-rollout li { border-left: 3px solid #C5D2F2; padding: 4px 0 4px 18px; display: flex; flex-direction: column; gap: 6px; }
.mt-rollout .mt-num { font-size: 20px; }
.mt-rollout strong { font: 700 18px 'Sora', sans-serif; }
.mt-rollout p { color: #4A4F63; line-height: 1.5; font-size: 15px; }
.mt-note { margin-top: 22px; color: #4A4F63; font-size: 15px; }
.mt .mt-diag { padding: 0 0 8px; }
.mt-banner { background: #1C2233; color: #fff; border-radius: 32px; padding: 36px 40px; display: flex; gap: 24px 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mt-banner > div { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.mt-banner .cp-kicker { color: #FFDCCF; margin: 0; }
.mt-banner h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); }
.mt-banner p { color: #C9D2EC; line-height: 1.55; }
.mt-banner-btn { background: #fff; color: #1C2233 !important; font: 600 16px 'Sora', sans-serif; padding: 16px 26px; border-radius: 999px; }
.mt-banner-btn:hover { background: #FFDCCF; }
.mt-faq { display: flex; flex-direction: column; }
.mt-faq-item { border-top: 1px solid #E4E7F2; padding: 20px 0; }
.mt-faq-item h3 { font-size: 19px; margin-bottom: 8px; }
.mt-faq-item p { color: #4A4F63; line-height: 1.6; }
@media (max-width: 860px) {
  .mt-step { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; }
  .mt-grid { grid-template-columns: 1fr; }
  .mt-row { grid-template-columns: 1fr; }
  .mt-row-head { display: none; }
  .mt-row > span { padding: 10px 20px; }
  .mt-crit { padding-top: 18px !important; }
  .mt-them::before { content: 'Approche classique · '; font-weight: 600; }
  .mt-row .mt-us::before { content: 'Cycle Smice · '; font-weight: 600; color: #3D5DB8; }
  .mt-banner { padding: 28px 24px; }
}

/* Interlocuteur Smice incrusté dans une page (patches.json · svcPerson) */
.hello-card { position: relative; max-width: 860px; margin: 0 0 0 auto; background: #fff; border: 1px solid #E4E7F2; border-radius: 28px; box-shadow: 0 24px 60px rgba(28, 34, 51, .12); display: flex; gap: 28px; padding: 18px 32px 18px 18px; align-items: center; }
.hello-photo { width: 190px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 20px; flex-shrink: 0; display: block; }
.hello-body { display: flex; flex-direction: column; gap: 12px; }
.hello-kicker { font: 600 12px 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #3D5DB8; }
.hello-quote { position: relative; background: #EEF1FA; border-radius: 20px 20px 20px 6px; padding: 18px 22px; font: 600 clamp(17px, 1.6vw, 21px)/1.4 'Sora', sans-serif; color: #1C2233; }
.hello-sign { font-size: 15px; color: #4A4F63; }
.hello-sign strong { color: #1C2233; }
.hello-actions { display: flex; gap: 10px 20px; align-items: center; flex-wrap: wrap; }
.hello-btn { background: #4A6BC9; color: #fff !important; font: 600 15px 'Sora', sans-serif; padding: 13px 22px; border-radius: 999px; }
.hello-btn:hover { background: #3D5DB8; }
.hello-link { font: 600 15px 'Sora', sans-serif; color: #3D5DB8; padding: 0; }
.hello-link:hover { color: #1C2233; }
@media (min-width: 900px) { .hello { margin-top: -36px !important; position: relative; z-index: 2; } }
@media (max-width: 640px) {
  .hello-card { flex-direction: column; align-items: stretch; padding: 16px; gap: 16px; }
  .hello-photo { width: 100%; aspect-ratio: 4 / 3; object-position: 50% 25%; }
}
/* Variante dans la colonne de texte de l'en-tête (pages service) */
.hello-inline { max-width: 600px; margin: 6px 0 0; padding: 14px 22px 14px 14px; gap: 20px; border-radius: 24px; box-shadow: 0 16px 40px rgba(28, 34, 51, .10); align-items: stretch; }
.hello-inline .hello-photo { width: 168px; aspect-ratio: 1; min-height: 0; align-self: center; border-radius: 16px; }
.hello-inline .hello-body { gap: 10px; justify-content: center; }
.hello-inline .hello-quote { font-size: 16px; padding: 14px 16px; border-radius: 16px 16px 16px 4px; }
.hello-inline .hello-sign { font-size: 14px; }
.hello-inline .hello-btn { font-size: 14px; padding: 11px 18px; }
.hello-inline .hello-link { font-size: 14px; }
@media (max-width: 640px) {
  .hello-inline { flex-direction: column; padding: 12px; gap: 14px; }
  .hello-inline .hello-photo { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
  .hello-inline .hello-body { padding: 0 6px 6px; }
  .hello-inline .hello-quote { font-size: 15px; padding: 12px 14px; }
}
.cp-hero .hello-inline { margin-top: 24px; color: #1C2233; box-shadow: 0 20px 50px rgba(20, 30, 70, .28); border: 0; }
.hello-side { margin: 0; justify-self: end; }
/* Variante large (accueil) */
.hello-wide { max-width: 1000px; margin: 0 auto; padding: 20px 36px 20px 20px; gap: 36px; }
.hello-wide .hello-photo { width: 240px; aspect-ratio: 1; }
.hello-wide .hello-quote { font-size: clamp(18px, 1.7vw, 22px); }
@media (max-width: 640px) {
  .hello-wide { padding: 14px; gap: 16px; }
  .hello-wide .hello-photo { width: 100%; aspect-ratio: 1; }
}

/* Cartes interlocuteur : grille alignée (photo et bulle en haut, nom et actions sur une même ligne) */
.hello-card { display: grid; grid-template-columns: var(--hello-photo, 168px) minmax(0, 1fr); grid-template-areas: "photo kicker" "photo quote" "sign actions"; column-gap: 22px; row-gap: 10px; align-items: start; padding: 18px 22px 18px 18px; }
.hello-wide { --hello-photo: 220px; column-gap: 32px; padding: 22px 30px 22px 22px; }
.hello-card .hello-body { display: contents; }
.hello-card .hello-photo, .hello-inline .hello-photo, .hello-wide .hello-photo { grid-area: photo; width: 100%; aspect-ratio: 1; min-height: 0; align-self: start; }
.hello-kicker { grid-area: kicker; align-self: end; }
.hello-quote { grid-area: quote; margin: 0; }
.hello-sign { grid-area: sign; align-self: center; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.hello-sign span { font-size: 13px; color: #4A4F63; }
.hello-actions { grid-area: actions; align-self: center; flex-wrap: nowrap; gap: 16px; }
.hello-btn { white-space: nowrap; }
.hello-link { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 641px) { .hello-actions { flex-wrap: wrap; } }
@media (max-width: 640px) {
  .hello-card, .hello-wide, .hello-inline { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "kicker" "quote" "sign" "actions"; padding: 12px; row-gap: 12px; }
  .hello-card .hello-photo, .hello-inline .hello-photo { aspect-ratio: 16 / 10; }
  .hello-wide .hello-photo { aspect-ratio: 1; }
  .hello-actions { flex-wrap: wrap; }
}

/* Audit interne : les deux écrans Horizon partagent les mêmes rangées (en-tête, indicateur, tuiles, intitulé, liste) */
.hz-pair { grid-template-rows: repeat(5, auto); align-items: stretch; }
.hz-panel { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; }
.hz-body { display: contents; }
.hz-body > * { margin: 0 22px; }
.hz-body > :last-child { margin-bottom: 22px; }
.hz-label { align-self: end; margin-top: 4px !important; }
@media (max-width: 1060px) { .hz-pair { grid-template-rows: none; } .hz-panel { grid-row: auto; grid-template-rows: none; } }

/* Page /plateforme/pulse : fonction par fonction (main.js · PulseDetail) */
.pu .cp-section { padding-top: 24px; }
.pu-blocks { display: flex; flex-direction: column; gap: 28px; }
.pu-block { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 48px; align-items: center; background: #fff; border: 1px solid #E4E7F2; border-radius: 32px; padding: 44px 48px; }
.pu-block.is-rev { background: #EEF1FA; border-color: #EEF1FA; }
.pu-block.is-rev .pu-text { order: 2; }
.pu-text { display: flex; flex-direction: column; gap: 14px; }
.pu-num { font: 800 34px/1 'Sora', sans-serif; color: #6B8CD5; display: flex; align-items: baseline; gap: 12px; }
.pu-num small { font: 600 12px 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #3D5DB8; }
.pu-text h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.pu-lead { font-size: 17px; line-height: 1.55; color: #4A4F63; }
.pu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pu-list li { position: relative; padding-left: 26px; line-height: 1.5; color: #1C2233; }
.pu-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #fff; background: #6B8CD5; width: 17px; height: 17px; border-radius: 50%; font: 700 10px/17px 'Sora', sans-serif; text-align: center; margin-top: 3px; }
.pu-who { font-size: 14px; color: #4A4F63; }
.pu-who b { color: #1C2233; font-family: 'Sora', sans-serif; }
.pu-hz { font: 600 14px/1.45 'Sora', sans-serif; color: #3D5DB8; background: rgba(107, 140, 213, .12); border-radius: 12px; padding: 10px 14px; align-self: flex-start; }
.pu-visual { display: flex; justify-content: center; }
/* Téléphone */
.pu-phone { width: 310px; background: #4A6BC9; border-radius: 44px; padding: 11px; box-shadow: 0 28px 60px rgba(26, 31, 69, .28); }
.pu-screen { background: #EEF1FA; color: #1C2233; border-radius: 34px; overflow: hidden; display: flex; flex-direction: column; height: 650px; }
.pu-top { background: #fff; padding: 18px 16px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #E4E7F2; }
.pu-top b { font: 800 17px 'Sora', sans-serif; letter-spacing: -.02em; }
.pu-top i { font: 700 9px 'Sora', sans-serif; font-style: normal; letter-spacing: .14em; color: #6B8CD5; margin-left: 6px; }
.pu-avatar { width: 30px; height: 30px; border-radius: 50%; background: #6B8CD5; color: #fff; font: 700 11px/30px 'Sora', sans-serif; text-align: center; }
.pu-body { flex: 1; overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pu-title { display: flex; flex-direction: column; gap: 2px; }
.pu-title strong { font: 700 18px 'Sora', sans-serif; }
.pu-title span { font-size: 11.5px; color: #4A4F63; }
.pu-card { background: #fff; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.pu-card > b { font: 700 14px/1.3 'Sora', sans-serif; }
.pu-mini { gap: 4px; color: #4A4F63; }
.pu-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pu-row small { font-size: 11px; color: #4A4F63; }
.pu-tag { font: 700 9.5px 'Sora', sans-serif; letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.pu-tag-warn { color: #9A5B12; background: #FBEBD3; }
.pu-tag-ko { color: #B23A48; background: #F8DDE0; }
.pu-tag-ok { color: #1F7A4D; background: #DDF1E6; }
.pu-tag-info { color: #3D5DB8; background: #EEF1FA; }
.pu-tag-vm { color: #fff; background: #6B8CD5; }
.pu-tag-op { color: #fff; background: #4A6BC9; }
.pu-chips { display: flex; gap: 6px; }
.pu-chips-wrap { flex-wrap: wrap; }
.pu-chips span { font: 600 11px 'Sora', sans-serif; background: #fff; border: 1.5px solid #E4E7F2; padding: 6px 10px; border-radius: 999px; color: #4A4F63; }
.pu-card .pu-chips span { background: #fff; }
.pu-chips span.is-on { background: #1C2233; border-color: #1C2233; color: #fff; }
.pu-progress { height: 6px; background: #E4E7F2; border-radius: 999px; overflow: hidden; }
.pu-progress span { display: block; height: 100%; background: #6B8CD5; border-radius: 999px; }
.pu-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pu-check li { display: flex; align-items: center; gap: 8px; color: #1C2233; }
.pu-check li::before { content: ''; width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid #B9C4E6; flex-shrink: 0; }
.pu-check li.is-done { color: #7D85B8; text-decoration: line-through; }
.pu-check li.is-done::before { background: #2F8F6A; border-color: #2F8F6A; content: '✓'; color: #fff; font: 700 10px/13px 'Sora', sans-serif; text-align: center; }
.pu-cam { margin-left: auto; font-size: 13px; }
.pu-step { font: 700 9.5px 'Sora', sans-serif; letter-spacing: .08em; color: #3D5DB8; }
.pu-answers { display: flex; gap: 6px; flex-wrap: wrap; }
.pu-answers span { font: 600 11px 'Sora', sans-serif; padding: 7px 10px; border-radius: 999px; border: 1.5px solid #E4E7F2; color: #4A4F63; }
.pu-answers .is-warn { background: #FBEBD3; border-color: #D08A2E; color: #9A5B12; }
.pu-answers .is-ko { background: #F8DDE0; border-color: #B23A48; color: #B23A48; }
.pu-note { border: 1px solid #E4E7F2; border-radius: 10px; padding: 8px 10px; color: #4A4F63; font-style: italic; }
.pu-sent { background: #DDF1E6; color: #1F7A4D; border-radius: 12px; padding: 9px 12px; font: 600 11.5px 'Sora', sans-serif; }
.pu-btn { margin-top: auto; text-align: center; background: #4A6BC9; color: #fff; font: 600 12.5px 'Sora', sans-serif; padding: 10px; border-radius: 999px; }
.pu-card .pu-btn { margin-top: 2px; }
.pu-field { display: flex; flex-direction: column; gap: 2px; }
.pu-field small { font: 700 9.5px 'Sora', sans-serif; letter-spacing: .08em; color: #7D85B8; }
.pu-proof { display: flex; gap: 10px; align-items: center; border: 1.5px dashed #C5D2F2; border-radius: 10px; padding: 8px; font-size: 12px; }
.pu-proof small { color: #7D85B8; }
.pu-thumb { width: 40px; height: 40px; border-radius: 8px; background: #EEF1FA; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.pu-alert { font: 600 11.5px 'Sora', sans-serif; color: #B23A48; }
.pu-score { background: #fff; border-radius: 14px; padding: 10px 12px; }
.pu-score span { display: flex; flex-direction: column; }
.pu-score small { font: 700 9px 'Sora', sans-serif; letter-spacing: .08em; color: #7D85B8; }
.pu-score b { font: 700 13px 'Sora', sans-serif; }
.pu-live { align-items: flex-end; }
.pu-live b { font: 800 20px 'Sora', sans-serif; color: #2F8F6A; }
.pu-offline { margin-top: auto; font: 600 10.5px 'Sora', sans-serif; color: #7D85B8; text-align: center; }
.pu-tabs { background: #fff; border-top: 1px solid #E4E7F2; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 4px 12px; }
.pu-tabs span { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 10px 'Sora', sans-serif; color: #7D85B8; }
.pu-tabs em { width: 26px; height: 4px; border-radius: 2px; background: transparent; }
.pu-tabs .is-on { color: #3D5DB8; }
.pu-tabs .is-on em { background: #6B8CD5; }
@media (max-width: 900px) {
  .pu-block { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; }
  .pu-block.is-rev .pu-text { order: 0; }
}
@media (max-width: 440px) { .pu-block { padding: 24px 14px; } .pu-phone { width: 100%; max-width: 310px; } .pu-visual { min-width: 0; } }

/* La plateforme : colonnes Horizon et Pulse alignées rangée par rangée (bandeau, puis une carte par étape) */
@media (min-width: 861px) {
  .pf-cycle { grid-template-rows: repeat(4, auto); align-items: stretch; row-gap: 14px; }
  .pf-side { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; gap: 14px; }
  .pf-side .pf-cards { display: contents; }
  .pf-side .pf-card { height: 100%; box-sizing: border-box; }
  .pf-ring-wrap { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .pf-cycle { grid-template-rows: auto repeat(4, auto); }
  .pf-side { grid-row: 2 / span 4; }
  .pf-ring-wrap { grid-column: 1 / -1; grid-row: 1; }
}