/* Generated route CSS — v1990. Source: tools/css-source/page-specializations/public-specializations.css. */
/* MapMyStaff public specializations — v1786. Loaded only by pages that use these specializations. */
/* ===== Page specialization 04: en/difference.html | fr/difference.html ===== */

@layer components{
.mms-page--difference .mms-hero__copy h1{max-width:15ch;}
.mms-page--difference .mms-section__copy h2{max-width:none;}
.mms-page--difference .mms-difference-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,3vw,2.3rem);}
.mms-page--difference .mms-difference-stack>.mms-section__copy{width:100%;max-width:none;}
.mms-page--difference .mms-difference-stack>.mms-section__visual{grid-column:1 / -1;width:100%;max-width:none;justify-self:stretch;}
.mms-page--difference .mms-difference-workflow ol{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;}
.mms-page--difference .mms-difference-workflow li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;flex:0 1 100%;align-content:start;align-items:start;column-gap:.55rem;row-gap:.4rem;min-width:0;min-height:0;padding:.85rem .9rem;}
.mms-page--difference .mms-difference-workflow li>span{grid-column:1;grid-row:1;align-self:start;line-height:1.3;}
.mms-page--difference .mms-difference-workflow li>b{grid-column:2;grid-row:1;min-width:0;align-self:start;margin:0;line-height:1.3;}
.mms-page--difference .mms-difference-workflow li>small{grid-column:1 / -1;grid-row:2;margin-top:0;}
.mms-page--difference .mms-comparison td[data-value="included"],
.mms-page--difference .mms-comparison td:not([data-value]){text-align:left;}














/* Carte de comparaison — composant autonome et limité à cette page */
.mms-page--difference .mms-diff-map-widget{--mms-diff-map-bg:#f8fafc;--mms-diff-map-panel-bg:#fff;--mms-diff-map-text-main:#0f172a;--mms-diff-map-text-muted:#475569;--mms-diff-map-border:#dbe4ec;--mms-diff-map-color-teal:#0d9488;--mms-diff-map-color-teal-light:#f0fdfa;--mms-diff-map-color-amber:#b45309;--mms-diff-map-color-amber-light:#fffbeb;--mms-diff-map-color-depot:#1e293b;--mms-diff-map-road-outline:#cbd5e1;--mms-diff-map-road-fill:#fff;--mms-diff-map-water:#e0f2fe;--mms-diff-map-park:#dcfce7;--mms-diff-map-block:#eef2f6;--mms-diff-map-shadow:0 10px 24px rgb(15 23 42 / .09);display:grid;grid-template-columns:minmax(0,1fr) 390px;width:100%;overflow:hidden;border:1px solid var(--mms-diff-map-border);border-radius:var(--mms-radius-xl);background:var(--mms-diff-map-bg);box-shadow:var(--mms-diff-map-shadow);color:var(--mms-diff-map-text-main);}
.mms-page--difference .mms-diff-map-layout-map{position:relative;min-width:0;min-height:600px;background:linear-gradient(150deg,#f8fafc,#eef5f6);}
.mms-page--difference .mms-diff-map-layout-panel{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--mms-diff-map-border);background:var(--mms-diff-map-panel-bg);}
.mms-page--difference .mms-diff-map-header{padding:1.3rem 1.35rem .95rem;border-bottom:1px solid var(--mms-diff-map-border);}
.mms-page--difference .mms-diff-map-title{margin:0 0 .55rem;font-size:1.1rem;font-weight:800;}
.mms-page--difference .mms-diff-map-disclaimer{display:flex;align-items:flex-start;gap:.45rem;margin:0;padding:.5rem .58rem;border-radius:.45rem;background:#f1f5f9;color:var(--mms-diff-map-text-muted);font-size:.72rem;line-height:1.35;}
.mms-page--difference .mms-diff-map-disclaimer svg{flex:0 0 auto;margin-top:.08rem;}
.mms-page--difference .mms-diff-map-tabs{display:flex;gap:.5rem;padding:.9rem 1.35rem;border-bottom:1px solid var(--mms-diff-map-border);background:var(--mms-diff-map-bg);}
.mms-page--difference .mms-diff-map-tab{flex:1;padding:.62rem;border:1px solid var(--mms-diff-map-border);border-radius:.5rem;background:#fff;color:var(--mms-diff-map-text-muted);font-size:.85rem;font-weight:750;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;}
.mms-page--difference .mms-diff-map-tab:focus-visible{outline:3px solid color-mix(in srgb,var(--mms-diff-map-color-teal) 38%,transparent);outline-offset:2px;}
.mms-page--difference .mms-diff-map-tab[aria-pressed="true"]{border-color:var(--mms-diff-map-color-teal);background:var(--mms-diff-map-color-teal-light);color:var(--mms-diff-map-color-teal);}
.mms-page--difference .mms-diff-map-tab[data-scenario="saisi"][aria-pressed="true"]{border-color:var(--mms-diff-map-color-amber);background:var(--mms-diff-map-color-amber-light);color:var(--mms-diff-map-color-amber);}
.mms-page--difference .mms-diff-map-metrics{display:flex;justify-content:space-between;gap:var(--mms-space-4);padding:var(--mms-space-4) 1.35rem;border-bottom:1px solid var(--mms-diff-map-border);}
.mms-page--difference .mms-diff-map-metric-item{display:flex;flex-direction:column;gap:.22rem;}
.mms-page--difference .mms-diff-map-metric-label{color:var(--mms-diff-map-text-muted);font-size:.67rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.mms-page--difference .mms-diff-map-metric-value{font-size:1.15rem;font-weight:850;}
.mms-page--difference .mms-diff-map-timeline-container{flex:1;max-height:430px;overflow-y:auto;padding:1.2rem 1.35rem;}
.mms-page--difference .mms-diff-map-timeline-list{position:relative;display:flex;flex-direction:column;gap:.82rem;margin:0;padding:0;list-style:none;}
.mms-page--difference .mms-diff-map-timeline-list::before{content:"";position:absolute;top:.9rem;bottom:.9rem;left:.83rem;width:2px;background:var(--mms-diff-map-border);}
.mms-page--difference .mms-diff-map-timeline-item{position:relative;z-index:1;display:flex;gap:.82rem;}
.mms-page--difference .mms-diff-map-timeline-badge{display:grid;place-items:center;flex:0 0 auto;width:1.72rem;height:1.72rem;border:2px solid var(--mms-diff-map-color-teal);border-radius:50%;background:#fff;color:var(--mms-diff-map-color-teal);font-size:.78rem;font-weight:850;}
.mms-page--difference .mms-diff-map-widget[data-scenario="saisi"] .mms-diff-map-timeline-badge{border-color:var(--mms-diff-map-color-amber);color:var(--mms-diff-map-color-amber);}
.mms-page--difference .mms-diff-map-timeline-content{flex:1;padding:.68rem .75rem;border:1px solid transparent;border-radius:.5rem;background:var(--mms-diff-map-block);}
.mms-page--difference .mms-diff-map-timeline-header{display:flex;justify-content:space-between;gap:.7rem;margin-bottom:.2rem;}
.mms-page--difference .mms-diff-map-timeline-id{font-weight:850;}
.mms-page--difference .mms-diff-map-timeline-time{color:var(--mms-diff-map-text-muted);font-size:.8rem;font-weight:750;}
.mms-page--difference .mms-diff-map-timeline-meta{display:flex;gap:.42rem;color:var(--mms-diff-map-text-muted);font-size:.76rem;}
.mms-page--difference .mms-diff-map-timeline-constraint{display:flex;align-items:center;gap:.35rem;margin-top:.46rem;padding:.35rem .45rem;border:1px solid #fcd34d;border-radius:.35rem;background:var(--mms-diff-map-color-amber-light);color:var(--mms-diff-map-color-amber);font-size:.69rem;font-weight:750;}
.mms-page--difference .mms-diff-map-svg{display:block;width:100%;height:100%;min-height:600px;}
.mms-page--difference .mms-diff-map-road-bg,.mms-page--difference .mms-diff-map-road-fg{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.mms-page--difference .mms-diff-map-road-bg{stroke:var(--mms-diff-map-road-outline);}
.mms-page--difference .mms-diff-map-road-fg{stroke:var(--mms-diff-map-road-fill);}
.mms-page--difference .mms-diff-map-road-bg .mms-diff-map-artery{stroke-width:18;}
.mms-page--difference .mms-diff-map-road-fg .mms-diff-map-artery,
.mms-page--difference .mms-diff-map-road-bg .mms-diff-map-local{stroke-width:11;}
.mms-page--difference .mms-diff-map-road-fg .mms-diff-map-local{stroke-width:6;}
.mms-page--difference .mms-diff-map-route-saisi,.mms-page--difference .mms-diff-map-route-compare{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s ease;}
.mms-page--difference .mms-diff-map-route-saisi{stroke:var(--mms-diff-map-color-amber);stroke-width:4;stroke-dasharray:8 6;opacity:0;}
.mms-page--difference .mms-diff-map-route-compare{stroke:var(--mms-diff-map-color-teal);stroke-width:5;opacity:0;}
.mms-page--difference .mms-diff-map-widget[data-scenario="saisi"] .mms-diff-map-route-saisi{opacity:.82;}
.mms-page--difference .mms-diff-map-widget[data-scenario="compare"] .mms-diff-map-route-compare{opacity:.92;}
.mms-page--difference .mms-diff-map-route-animate{stroke-dasharray:4000;stroke-dashoffset:4000;animation:mms-diff-map-draw-route 2.2s cubic-bezier(.25,1,.5,1) forwards;}
.mms-page--difference .mms-diff-map-marker-circle{fill:var(--mms-diff-map-color-teal);stroke:#fff;stroke-width:3.5;filter:drop-shadow(0 3px 5px rgb(15 23 42 / .28));}
.mms-page--difference .mms-diff-map-widget[data-scenario="saisi"] .mms-diff-map-marker-circle{fill:var(--mms-diff-map-color-amber);}
.mms-page--difference .mms-diff-map-marker-text{fill:#fff;font-size:23px;font-weight:900;text-anchor:middle;dominant-baseline:central;}
.mms-page--difference .mms-diff-map-badge-circle{fill:#fff;stroke-width:2.5;filter:drop-shadow(0 2px 3px rgb(15 23 42 / .16));}
.mms-page--difference .mms-diff-map-widget[data-scenario="saisi"] .mms-diff-map-badge-circle{stroke:var(--mms-diff-map-color-amber);}
.mms-page--difference .mms-diff-map-widget[data-scenario="compare"] .mms-diff-map-badge-circle{stroke:var(--mms-diff-map-color-teal);}
.mms-page--difference .mms-diff-map-badge-text{font-size:13px;font-weight:900;text-anchor:middle;dominant-baseline:central;}
.mms-page--difference .mms-diff-map-widget[data-scenario="saisi"] .mms-diff-map-badge-text{fill:var(--mms-diff-map-color-amber);}
.mms-page--difference .mms-diff-map-widget[data-scenario="compare"] .mms-diff-map-badge-text{fill:var(--mms-diff-map-color-teal);}
.mms-page--difference .mms-diff-map-reading{display:grid;gap:.55rem;padding:.85rem 1.35rem;border-bottom:1px solid var(--mms-diff-map-border);background:#fff;}
.mms-page--difference .mms-diff-map-reading__legend{display:flex;flex-wrap:wrap;gap:.45rem .85rem;color:var(--mms-diff-map-text-muted);font-size:.72rem;font-weight:700;}
.mms-page--difference .mms-diff-map-reading__legend span{display:inline-flex;align-items:center;gap:.34rem;}
.mms-page--difference .mms-diff-map-reading__order{display:grid;gap:.2rem;padding:.62rem .7rem;border:1px solid var(--mms-diff-map-border);border-radius:.5rem;background:var(--mms-diff-map-bg);}
.mms-page--difference .mms-diff-map-reading__order small{color:var(--mms-diff-map-text-muted);font-size:.65rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;}
.mms-page--difference .mms-diff-map-reading__order strong{color:var(--mms-diff-map-text-main);font-size:.82rem;line-height:1.45;}
.mms-page--difference .mms-diff-map-reading__number,.mms-page--difference .mms-diff-map-reading__id{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;font-size:.72rem;font-weight:900;}
.mms-page--difference .mms-diff-map-reading__number{background:var(--mms-diff-map-color-teal);color:#fff;}
.mms-page--difference .mms-diff-map-widget[data-scenario="saisi"] .mms-diff-map-reading__number{background:var(--mms-diff-map-color-amber);}
.mms-page--difference .mms-diff-map-reading__id{border:2px solid var(--mms-diff-map-color-teal);background:#fff;color:var(--mms-diff-map-color-teal);}
.mms-page--difference .mms-diff-map-widget[data-scenario="saisi"] .mms-diff-map-reading__id{border-color:var(--mms-diff-map-color-amber);color:var(--mms-diff-map-color-amber);}
.mms-page--difference .mms-diff-map-map-label{fill:#64748b;font-size:15px;font-weight:800;letter-spacing:.04em;}
.mms-page--difference .mms-diff-map-legend{position:absolute;right:1rem;bottom:1rem;display:flex;flex-wrap:wrap;gap:.65rem;padding:.55rem .7rem;border:1px solid var(--mms-diff-map-border);border-radius:.55rem;background:rgb(255 255 255 / .92);box-shadow:0 4px 12px rgb(15 23 42 / .08);font-size:.7rem;font-weight:750;}
.mms-page--difference .mms-diff-map-legend span{display:inline-flex;align-items:center;gap:.3rem;}
.mms-page--difference .mms-diff-map-legend i{display:inline-block;width:.65rem;height:.65rem;border-radius:50%;background:var(--mms-diff-map-color-teal);}
.mms-page--difference .mms-diff-map-legend .is-depot{border-radius:.15rem;background:var(--mms-diff-map-color-depot);}
.mms-page--difference .mms-diff-map-legend .is-route{width:1rem;height:.18rem;border-radius:var(--mms-radius-pill);background:var(--mms-diff-map-color-amber);}
@keyframes mms-diff-map-draw-route{to{stroke-dashoffset:0}}
@media (max-width:1100px){
.mms-page--difference .mms-diff-map-widget{grid-template-columns:minmax(0,1fr) 350px;}
}
@media (max-width:860px){
.mms-page--difference .mms-diff-map-widget{grid-template-columns:1fr;}
.mms-page--difference .mms-diff-map-layout-map{min-height:430px;}
.mms-page--difference .mms-diff-map-svg{min-height:430px;}
.mms-page--difference .mms-diff-map-layout-panel{border-top:1px solid var(--mms-diff-map-border);border-left:0;}
.mms-page--difference .mms-diff-map-timeline-container{max-height:none;}
}
@media (max-width:760px){

.mms-page--difference .mms-difference-comparison{overflow:visible;border:0;background:transparent;box-shadow:none;}
.mms-page--difference .mms-difference-comparison .mms-comparison{min-width:0;border-collapse:separate;border-spacing:0;}
.mms-page--difference .mms-difference-comparison thead{display:none;}
.mms-page--difference .mms-difference-comparison tbody,.mms-page--difference .mms-difference-comparison tr,.mms-page--difference .mms-difference-comparison th,.mms-page--difference .mms-difference-comparison td{display:block;width:100%;}
.mms-page--difference .mms-difference-comparison tbody tr{overflow:hidden;margin:0 0 .85rem;border:1px solid var(--mms-line);border-radius:var(--mms-radius-lg);background:#fff;box-shadow:var(--mms-shadow-1);}
.mms-page--difference .mms-difference-comparison tbody th{padding:.85rem 1rem;background:var(--mms-teal-950);color:#fff;}
.mms-page--difference .mms-difference-comparison tbody td{display:grid;grid-template-columns:minmax(7.25rem,.85fr) minmax(0,1.15fr);gap:var(--mms-space-3);padding:.8rem 1rem;border-bottom:1px solid var(--mms-line);text-align:left;}
.mms-page--difference .mms-difference-comparison tbody td:last-child{border-bottom:0;}
.mms-page--difference .mms-difference-comparison tbody td::before{content:attr(data-label);color:var(--mms-ink-700);font-size:.7rem;font-weight:850;line-height:1.35;}
}
@media (max-width:560px){

.mms-page--difference .mms-diff-map-layout-map,.mms-page--difference .mms-diff-map-svg{min-height:345px;}
.mms-page--difference .mms-diff-map-legend{position:static;margin:.7rem;}
.mms-page--difference .mms-diff-map-metrics{flex-direction:column;}
}
@media (max-width:480px){
.mms-page--difference .mms-difference-comparison tbody td{grid-template-columns:1fr;gap:.35rem;}
}

}

/* ===== Difference responsive/cascade corrections — v1914 =====
   The shared family bundle is intentionally unlayered and loads after this
   route stylesheet. These narrowly-scoped unlayered rules therefore own the
   three responsive layouts that are specific to Difference without changing
   the generic table/card components used elsewhere. */

/* Pillars: keep the two-column desktop comparison, but give each pillar a full
   row on tablet/narrow layouts so headings and the three metrics are not
   compressed into two small half-width cards. */



/* Difference layout coherence — v1914.
   The page predates the newer editorial rhythm used elsewhere. Keep its bespoke
   diagrams, but remove forced card stretching, center incomplete grid rows and
   let section copy use the full container width. */
@media (min-width:768px){
  #mms-app .mms-page--difference{
    --mms-section-space:clamp(3.75rem,4.4vw,4.75rem);
  }
}
#mms-app .mms-page--difference .mms-difference-stack>.mms-section__copy,
#mms-app .mms-page--difference .mms-difference-stack>.mms-section__copy>h2,
#mms-app .mms-page--difference .mms-difference-stack>.mms-section__copy>p {
  width:100%;
  max-width:none;
}

/* Seven-step visit flow — shared responsive layout.
   The flow owns its row layout instead of inheriting the generic workflow grid.
   Flex wrapping gives 1 -> 2 -> 3 -> 4 equal-width cards, and naturally centers
   the incomplete final row (4 + 3 on wide screens) without nth-child placement. */
@container mms-content-region (min-width:40rem){
  #mms-app .mms-page--difference .mms-difference-workflow ol>li{
    flex-basis:calc((100% - .65rem)/2);
  }
}
@container mms-content-region (min-width:52rem){
  #mms-app .mms-page--difference .mms-difference-workflow ol>li{
    flex-basis:calc((100% - 1.3rem)/3);
  }
}
@container mms-content-region (min-width:68rem){
  #mms-app .mms-page--difference .mms-difference-workflow ol>li{
    flex-basis:calc((100% - 1.95rem)/4);
  }
}

/* Directory: its 2x2 records should size to their own short labels, not stretch
   to the height of the longer explanatory copy in the left column. */




/* Five-step survey/recovery flow: 3 + 2 with the final row centered. */



/* Measurement pillars: each card follows its own content height. The shorter
   Parrainage card no longer inherits the financial card's height or pushes its
   link to the bottom of an empty column. */




/* Survey/recovery sequence: number + short step label + title share the first
   row. The explanatory sentence gets the second row. Long titles may wrap in
   their own flexible track instead of forcing horizontal overflow. */






/* Mobile comparison: convert each semantic table row into one full-width card.
   The previous layered rule lost the width cascade to the generic 30% row
   heading, which is why the dark heading occupied only the left third below
   760 px. The visual container itself stays neutral and never becomes a second
   horizontal scroller. */
@media (max-width:760px){
  #mms-app .mms-page--difference .mms-section__visual:has(> .mms-difference-comparison){
    width:100%;
    min-width:0;
    max-width:none;
    overflow:visible;
  }
  #mms-app .mms-page--difference .mms-difference-comparison{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  #mms-app .mms-page--difference .mms-difference-comparison .mms-comparison{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    border-collapse:separate;
    border-spacing:0;
  }
  #mms-app .mms-page--difference .mms-difference-comparison thead{
    position:absolute;
    display:block;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
  #mms-app .mms-page--difference .mms-difference-comparison tbody{
    display:grid;
    width:100%;
    min-width:0;
    gap:.8rem;
  }
  #mms-app .mms-page--difference .mms-difference-comparison tbody tr{
    display:grid;
    width:100%;
    min-width:0;
    overflow:hidden;
    margin:0;
    border:1px solid var(--mms-line);
    border-radius:var(--mms-radius-lg);
    background:#fff;
    box-shadow:var(--mms-shadow-1);
  }
  #mms-app .mms-page--difference .mms-difference-comparison tbody th{
    display:block;
    width:auto;
    min-width:0;
    padding:.8rem .9rem;
    border-bottom:0;
    background:var(--mms-teal-950);
    color:#fff;
    overflow-wrap:anywhere;
  }
  #mms-app .mms-page--difference .mms-difference-comparison tbody td{
    display:grid;
    grid-template-columns:minmax(7.5rem,.8fr) minmax(0,1.2fr);
    width:auto;
    min-width:0;
    gap:var(--mms-space-3);
    padding:.72rem .9rem;
    border-bottom:1px solid var(--mms-line);
    text-align:left;
    overflow-wrap:anywhere;
  }
  #mms-app .mms-page--difference .mms-difference-comparison tbody td:last-child{
    border-bottom:0;
  }
  #mms-app .mms-page--difference .mms-difference-comparison tbody td::before{
    content:attr(data-label);
    min-width:0;
    color:var(--mms-ink-700);
    font-size:.7rem;
    font-weight:850;
    line-height:1.35;
  }
}
@media (max-width:480px){
  #mms-app .mms-page--difference .mms-difference-comparison tbody td{
    grid-template-columns:minmax(0,1fr);
    gap:.3rem;
  }
}


/* ===== Difference visual hierarchy — v1915 =====
   Difference is an editorial comparison page, not a dashboard. Secondary
   records, values and workflow labels therefore stay deliberately below the
   H2/H3 hierarchy and avoid nested card-on-card emphasis. */
#mms-app .mms-page--difference{
  --mms-difference-inner-radius:var(--mms-radius-md);
  --mms-difference-card-shadow:0 8px 24px rgb(15 53 58 / .055);
}

/* Module labels remain wayfinding, not headings. */


/* Compact the visit flow while preserving a clear number -> title -> detail
   hierarchy. The outer frame is quieter than the large product mockups used on
   module pages. */
#mms-app .mms-page--difference .mms-difference-workflow{
  padding:.9rem;
  border-radius:var(--mms-radius-lg);
  box-shadow:var(--mms-shadow-1);
}
#mms-app .mms-page--difference .mms-difference-workflow li{
  padding:.75rem .8rem;
  border-radius:var(--mms-difference-inner-radius);
}
#mms-app .mms-page--difference .mms-difference-workflow li>span{
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.075em;
}
#mms-app .mms-page--difference .mms-difference-workflow li>b{
  font-size:.84rem;
  font-weight:720;
}
#mms-app .mms-page--difference .mms-difference-workflow li>small{
  color:var(--mms-ink-650,var(--mms-ink-600));
  font-size:.72rem;
  line-height:1.45;
}

/* Directory: reduce the visual scale of the nested records so the section H2
   and the explanatory title remain the dominant reading anchors. */






/* Survey/recovery sequence: these are compact milestones, not mini feature
   cards. Increase descriptive readability while keeping the headings modest. */







/* Measurement pillars: the former 1.95rem H3 + bold metric values made nested
   content compete with the section heading. Use an editorial H3 and compact
   key/value strips instead of three cards inside each card. */












/* The comparison is the final proof block; reduce chrome rather than enlarging
   it. */
#mms-app .mms-page--difference .mms-difference-comparison{
  border-radius:var(--mms-radius-lg);
  box-shadow:var(--mms-shadow-1);
}