/* Requested visual breathing room and compact phone layouts. */
.home-about-framed > div:first-child {
  max-width: 260px;
  padding: 2px;
  border-radius: 25px;
  box-shadow: 0 8px 24px #0a294912;
}
.home-about-framed > div:first-child img { border-radius: 23px; }

html:root body.about-draft main #territoire-titre {
  color: #ffd232 !important;
  -webkit-text-fill-color: #ffd232 !important;
  background: none !important;
}
.about-draft .territoire-carte--night .territoire-map-logo {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Complete final letters, including the S, stay inside the title column. */
.brand-hero-layout > div { min-width: 0; }
.brand-page-hero .brand-title {
  max-width: 100%;
  font-size: clamp(2.6rem, 4.4vw, 4.9rem);
  line-height: 1.14;
  overflow: visible;
}
.uptimistes-brand-rainbow {
  padding-right: .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.warm-uptimistes-title .uptimise-warm-sun { flex-shrink: 0; }

/* The physical devices sit directly on the navy service banner. */
.service-art-panel,
.service-banner-picture.service-art-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.service-art-panel img { border-radius: 0; }

@media (max-width: 760px) {
  .section { padding-top: 34px; padding-bottom: 34px; }
  .section-heading { gap: 14px; margin-bottom: 20px; }
  .section-heading p { margin-bottom: 0; }
  .uptimise-home .accueil-hero-copy { padding-top: 25px; }
  .uptimise-home .accueil-hero h1 { margin-bottom: 14px; }
  .uptimise-home .accueil-hero-copy > p { line-height: 1.5; margin-bottom: 16px; }
  .uptimise-home .accueil-hero-mobile-art { aspect-ratio: 2.4 / 1; }
  .uptimise-home .accueil-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .uptimise-home .accueil-service,
  .uptimise-home .accueil-service:nth-child(5) { grid-column: auto; }
  .uptimise-home .accueil-service-body { padding: 6px 9px 12px; }
  .uptimise-home .accueil-service h2 { font-size: .95rem; min-height: 2.3em; margin-bottom: 6px; }
  .uptimise-home .accueil-service p { font-size: .71rem; line-height: 1.4; min-height: 0; padding-right: 25px; }
  .uptimise-home .accueil-service-arrow { width: 26px; height: 26px; right: 7px; bottom: 13px; }
  .uptimise-home .accueil-approche h2 { font-size: 1.65rem; margin-bottom: 14px; }
  .uptimise-home .formation-home { padding-top: 32px; padding-bottom: 32px; }
  .uptimise-home .formation-home-path { padding: 22px 18px; }
  .uptimise-home .uptimistes-preview { padding-top: 30px; padding-bottom: 28px; }
  .uptimise-home .uptimistes-mosaic { margin-top: 18px; margin-bottom: 18px; gap: 9px; }
  .uptimise-home .uptimistes-mosaic a { min-width: 0; }
  .uptimise-home .uptimistes-mosaic img { width: 100px; height: 70px; }
  .uptimise-home .uptimistes-mosaic strong { padding: 8px 10px; font-size: .77rem; }
  .uptimise-home .review-section { padding: 32px 0; }
  .uptimise-home .home-about { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; }
  .uptimise-home .home-about-framed > div:first-child { width: 100%; max-width: 160px; }
  .uptimise-home .home-about .eyebrow { font-size: .61rem; letter-spacing: .1em; }
  .uptimise-home .home-about h2 { font-size: 1.45rem; margin-bottom: 12px; }
  .uptimise-home .home-about p { font-size: .84rem; line-height: 1.5; margin-bottom: 15px; }
  .uptimise-home .home-about .btn { padding: 10px 13px; font-size: .76rem; }
  .brand-hero-layout { padding-top: 32px; padding-bottom: 30px; gap: 20px; }
  .brand-page-hero .brand-title { font-size: clamp(2.05rem, 7.7vw, 3.1rem); margin-bottom: 16px; }
  .brand-page-hero .brand-title .uptimise-warm-sun { width: 27px; height: 27px; }
  .filter-toolbar { gap: 7px; margin-bottom: 15px; }
  .filter-chip { padding: 8px 11px; font-size: .73rem; }

  /* Logo and preview at left, project information at right. */
  #portfolio-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #portfolio-grid .portfolio-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-content: start;
    align-items: start;
    border-radius: 17px;
  }
  #portfolio-grid .portfolio-brand {
    grid-column: 1;
    grid-row: 1;
    height: 76px;
    min-height: 76px;
    padding: 10px 9px;
  }
  #portfolio-grid .portfolio-brand .portfolio-client-logo,
  #portfolio-grid .portfolio-card[aria-labelledby] .portfolio-client-logo {
    width: 100%;
    height: 54px;
    max-width: 100%;
    max-height: 54px;
  }
  #portfolio-grid .portfolio-visual {
    grid-column: 1;
    grid-row: 2;
    min-height: 96px;
    padding: 12px 7px;
    gap: 8px;
  }
  #portfolio-grid .portfolio-device-stage { padding: 3px 0 7px; }
  #portfolio-grid .portfolio-laptop-screen { padding: 4px 2px; border-radius: 5px 5px 1px 1px; }
  #portfolio-grid .portfolio-laptop-base { height: 5px; }
  #portfolio-grid .portfolio-laptop-base::before { height: 2px; }
  #portfolio-grid .portfolio-phone { padding: 2px; border-width: 1px; border-radius: 7px; }
  #portfolio-grid .portfolio-original-site-mockup img,
  #portfolio-grid .portfolio-print-sheet img { height: auto; max-height: 112px; }
  #portfolio-grid .portfolio-print-stage { gap: 7px; }
  #portfolio-grid .portfolio-campaign-preview { display: block; padding: 5px; }
  #portfolio-grid .portfolio-campaign-preview img { width: 100%; max-width: 100%; }
  #portfolio-grid .portfolio-campaign-preview figcaption,
  #portfolio-grid .portfolio-mockup figcaption { font-size: .58rem; line-height: 1.3; }
  #portfolio-grid .portfolio-card-body { grid-column: 2; grid-row: 1 / span 2; padding: 14px 12px; }
  #portfolio-grid .portfolio-sector { font-size: .59rem; margin-bottom: 6px; }
  #portfolio-grid .portfolio-card h3 { font-size: 1.08rem; margin-bottom: 8px; line-height: 1.2; }
  #portfolio-grid .portfolio-card p { font-size: .78rem; line-height: 1.45; margin-bottom: 9px; }
  #portfolio-grid .portfolio-services { font-size: .72rem; line-height: 1.4; padding-left: 14px; margin-bottom: 10px; }
  #portfolio-grid .portfolio-services li + li { margin-top: 3px; }
  #portfolio-grid .portfolio-tags { gap: 4px; padding-top: 0; }
  #portfolio-grid .portfolio-tags span { font-size: .58rem; padding: 3px 6px; }
  #portfolio-grid .portfolio-card-actions { gap: 5px 10px; margin-top: 12px; }
  #portfolio-grid .portfolio-view,
  #portfolio-grid .portfolio-link { font-size: .7rem; min-height: 40px; }
  #portfolio-grid .portfolio-view,
  #portfolio-grid .portfolio-link--primary { padding: 8px 10px; }

  .about-draft .sarah-hero-grid { padding-top: 30px; padding-bottom: 30px; row-gap: 22px; }
  .about-draft .sarah-hero-photo { max-width: 240px; }
  .about-draft .sarah-hero-photo .sarah-photo-frame { padding: 2px; }
  .about-draft .cv-direct-inner { padding: 22px 19px; }
  .about-draft .cv-direct-row { padding: 16px 0; }
  .about-draft .collectif-heading { gap: 15px; margin-bottom: 22px; }
  .about-draft .collectif-grid { gap: 12px; }
  .about-draft .collectif-card { padding: 18px 15px; }
  .about-draft .collectif-portrait { width: 62px; height: 62px; margin-bottom: 13px; }
  .about-draft .collectif-card h3 { font-size: 1rem; margin-bottom: 8px; }
  .about-draft .collectif-card p { font-size: .8rem; line-height: 1.5; }
  .about-draft .collectif-note { margin-top: 10px; }
  .about-draft .collectif-contact { padding-top: 22px; margin-top: 22px; gap: 18px; }

  /* A compact introduction stays beside the ten swipeable answers. */
  .about-draft .interview-section > .container {
    display: grid;
    grid-template-columns: minmax(122px, .74fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
  .about-draft .interview-heading { display: block; margin: 0; min-width: 0; }
  .about-draft .interview-founder-label-row { margin-bottom: 12px; }
  .about-draft .interview-founder-label-row .section-kicker { font-size: .57rem; letter-spacing: .06em; line-height: 1.5; }
  .about-draft .interview-founder-label-row .u-icon { display: none; }
  .about-draft .interview-founder-title-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .about-draft .interview-heading #interview-titre { font-size: 1.24rem; line-height: 1.2; margin: 0; }
  .about-draft .interview-founder-title-row .interview-founder-mini { width: 86px; height: 86px; flex-basis: 86px; padding: 2px; border-radius: 20px; }
  .about-draft .interview-founder-title-row .interview-founder-mini img { border-radius: 18px; }
  .about-draft .interview-heading > div > p { font-size: .76rem; line-height: 1.5; margin: 13px 0 10px; }
  .about-draft .interview-heading .swipe-hint { font-size: .66rem; line-height: 1.5; }
  .about-draft .interview-track { gap: 12px; align-items: flex-start; min-width: 0; }
  .about-draft .interview-card { flex: 0 0 100%; display: flex; min-height: 0; padding: 15px 12px; border-radius: 17px; overflow: visible; }
  .about-draft .interview-top { margin-bottom: 12px; }
  .about-draft .interview-top > .u-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
  .about-draft .interview-top > .u-icon svg { width: 23px; height: 23px; }
  .about-draft .interview-top > span:last-child { font-size: .72rem; }
  .about-draft .interview-kicker { font-size: .58rem; margin-bottom: 8px; }
  .about-draft .interview-card h3 { font-size: 1rem; line-height: 1.3; margin-bottom: 14px; }
  .about-draft .interview-answer { font-size: .84rem; line-height: 1.5; margin-bottom: 10px; }
  .about-draft .interview-body { font-size: .75rem; line-height: 1.6; }
  .about-draft .interview-card .quote-attribution { font-size: .7rem !important; line-height: 1.4 !important; }
  .about-draft .interview-card .adn-tags { gap: 5px; margin-bottom: 12px; }
  .about-draft .interview-card .adn-tags span { font-size: .65rem; padding: 5px 7px; }
  .about-draft .interview-controls { grid-column: 2; display: flex; align-items: flex-end; gap: 10px; margin-top: 0; }
  .about-draft .interview-pagination { flex-wrap: wrap; gap: 5px; }
  .about-draft .interview-dot { width: 6px; height: 6px; }
  .about-draft .interview-dot.active { width: 16px; }
  .about-draft .interview-arrows { gap: 7px; align-self: flex-end; }
  .about-draft .interview-arrows > button { width: 36px; height: 36px; }
  .about-draft #interview-count { font-size: .67rem; min-width: 38px; }
}

@media (max-width: 359px) {
  .uptimise-home .home-about { grid-template-columns: 90px minmax(0, 1fr); gap: 13px; }
  .uptimise-home .home-about h2 { font-size: 1.2rem; }
  #portfolio-grid .portfolio-card { grid-template-columns: 94px minmax(0, 1fr); }
  #portfolio-grid .portfolio-card-body { padding: 12px 10px; }
  .about-draft .interview-section > .container { grid-template-columns: 116px minmax(0, 1fr); gap: 9px; }
  .about-draft .interview-heading #interview-titre { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-draft .interview-track { scroll-behavior: auto; }
}

/* Phone spacing and three compact business categories; desktop rules stay intact. */
@media (max-width: 760px) {
  .extension-section { padding-top: 30px; padding-bottom: 30px; }
  .extension-hero { padding-top: 32px; padding-bottom: 32px; }
  .extension-section-heading, .extension-heading { margin-bottom: 20px; }
  .extension-actions { gap: 10px; margin-top: 18px; }
  .extension-cta { gap: 18px; padding: 22px; margin-top: 22px; }
  .cta-section { margin-top: 12px; margin-bottom: 28px; padding: 26px 22px; gap: 18px; }
  .uptimise-home .formation-home-topics { margin-top: 16px; margin-bottom: 20px; }
  .uptimise-home .formation-home-path ol { gap: 13px; }
  .uptimise-home .formation-home-path h3 { margin-bottom: 17px; }
  .signage26-launch-bridge { padding-top: 30px; padding-bottom: 30px; }
  .footer { padding-top: 30px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .footer-top > div { min-width: 0; }
  .footer-top .footer-brand { grid-column: 1 / -1; }
  .footer-top h4 { margin-bottom: 12px; }
  .footer-top a, .footer-top span { font-size: .8rem; margin-bottom: 9px; overflow-wrap: anywhere; }
  .footer-bottom { margin-top: 22px; padding-top: 17px; }

  .extension-related-offers .extension-container { width: calc(100% - 32px); }
  .extension-related-offers .extension-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    margin-top: 18px;
    margin-bottom: 0;
  }
  .extension-related-offers .extension-offer-link {
    min-width: 0;
    padding: 13px 9px 12px;
    border-radius: 14px;
    overflow-wrap: anywhere;
  }
  .extension-related-offers .extension-offer-link .extension-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  .extension-related-offers .extension-offer-link .extension-icon :is(svg, img) { width: 27px; height: 27px; }
  .extension-related-offers .extension-offer-link h3 {
    font-size: clamp(.73rem, 3.1vw, .91rem);
    line-height: 1.22;
    letter-spacing: -.025em;
    margin-bottom: 8px;
    hyphens: auto;
  }
  .extension-related-offers .extension-offer-link > p {
    font-size: .73rem;
    line-height: 1.45;
    margin-bottom: 11px;
  }
  .extension-related-offers .extension-offer-link .extension-text-link {
    display: block;
    margin-top: auto;
    padding-top: 4px;
    font-size: .72rem;
    line-height: 1.4;
    text-underline-offset: 3px;
  }
  .extension-related-offers .extension-text-link .uptimise-click { display: none; }
}

@media (max-width: 359px) {
  .extension-related-offers .extension-grid-3 { gap: 6px; }
  .extension-related-offers .extension-offer-link { padding: 11px 7px; }
  .extension-related-offers .extension-offer-link > p { font-size: .7rem; }
}