/* Keep the approved desktop design and adapt the same content to small screens.
   Rule for this file: tablet and phone keep the desktop structure — the whole
   navigation visible, the two-column hero, the three metrics side by side, and
   the full four-column comparison table with nothing cut off and nothing to
   swipe. Only what physically cannot fit on a phone is stacked. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; }
/* Keep navigation visible on both the homepage and article, in its normal layout. */
.wf-header-bar { position: sticky; top: 0; z-index: 10; background: #f9f9fb; }
#wave-home-design .wf-site { min-width: 0; }
#wave-home-design .wf-brand img { width: 44px; height: 22px; object-fit: contain; flex: 0 0 auto; }
/* Center the visible lowercase letters with the centered engraved infinity. */
#wave-home-design .wf-brand > span {
  display: block;
  text-box-trim: trim-both;
  text-box-edge: ex alphabetic;
}
#wave-home-design :focus-visible { outline: 2px solid #3150bc; outline-offset: 5px; }
#wave-home-design .wf-ending :focus-visible { outline-color: #ffffff; }

/* ---------------------------------------------------------------------------
   Navigation — the four links stay on screen at every width. No hamburger, so
   a phone shows the same destinations as a desktop. The toggle is left in the
   markup for browsers without CSS, but it is never displayed.
   --------------------------------------------------------------------------- */
#wave-home-design .wf-menu-toggle,
#wave-home-design .wf-menu-toggle:not([hidden]) { display: none !important; }
#wave-home-design .wf-mobile-contact { display: none !important; }

@media (max-width: 800px) {
  html { scroll-padding-top: 116px; }
  #wave-home-design .wf-header {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 14px;
    min-height: 0;
    padding: 14px 30px 4px;
  }
  #wave-home-design .wf-header-cta { margin-left: auto; }
  #wave-home-design .wf-navigation,
  #wave-home-design .wf-navigation.is-open,
  html:not(.js) #wave-home-design .wf-navigation {
    display: flex;
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    gap: 0 22px;
  }
  #wave-home-design .wf-navigation a { min-height: 40px; padding: 0; font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   Hero — the desktop two-column composition is kept down to 701px. Below that
   the copy column would be narrower than one word of the headline, so the
   painting moves under the text.
   --------------------------------------------------------------------------- */
@media (min-width: 701px) and (max-width: 900px) {
  #wave-home-design .wf-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 0;
    padding-top: 26px;
  }
  #wave-home-design .wf-hero-athens { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); }
  #wave-home-design .wf-hero h1 { font-size: clamp(30px, 4.7vw, 44px); }
  #wave-home-design .wf-promise { max-width: 100%; font-size: 16px; }
  #wave-home-design .wf-hero-copy { min-width: 0; }
  #wave-home-design .wf-ribbon { width: 100%; max-width: none; justify-self: stretch; }
  #wave-home-design .wf-ribbon > img { width: 100%; max-width: 100%; height: auto; margin: 0; }
}

@media (max-width: 700px) {
  #wave-home-design .wf-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 28px; }
  #wave-home-design .wf-hero-copy { min-width: 0; }
  #wave-home-design .wf-promise { max-width: 36rem; }
  #wave-home-design .wf-ribbon { width: 100%; max-width: 600px; justify-self: center; }
  #wave-home-design .wf-ribbon > img { width: 100%; max-width: 100%; height: auto; margin: 0; }
}

/* ---------------------------------------------------------------------------
   Streaming performance — columns on desktop and tablet, spacious rows on phones.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Desktop fills these sections; below 900px the reserved height would leave
     a band of empty page under the three measures. */
  #wave-home-design .wf-performance,
  #wave-home-design .wf-models { min-height: 0; }
  #wave-home-design .wf-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; }
  #wave-home-design .wf-metrics article,
  #wave-home-design .wf-metrics article:first-child { padding: 0 16px; border-top: 0; border-left: 1px solid var(--wf-line); }
  #wave-home-design .wf-metrics article:first-child { padding-left: 0; border-left: 0; }
  #wave-home-design .wf-metrics h3 { font-size: clamp(15px, 2.3vw, 21px); }
  #wave-home-design .wf-value { margin: 10px 0 16px !important; font-size: clamp(30px, 7vw, 62px); }
}
@media (max-width: 600px) {
  #wave-home-design .wf-metrics { grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
  #wave-home-design .wf-metrics article,
  #wave-home-design .wf-metrics article:first-child {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .6fr);
    grid-template-areas: "label value" "link value"; align-items: center;
    column-gap: 16px; padding: 22px 0; border-left: 0; border-top: 1px solid var(--wf-line);
  }
  #wave-home-design .wf-metrics article:last-child { border-bottom: 1px solid var(--wf-line); }
  #wave-home-design .wf-metrics h3 { grid-area: label; font-size: 21px; line-height: 1.2; }
  #wave-home-design .wf-metrics .wf-value { grid-area: value; margin: 0 !important; font-size: clamp(42px, 10vw, 56px); letter-spacing: -.04em; text-align: right; }
  #wave-home-design .wf-value .wf-value-unit { display: block; font-size: 14px; letter-spacing: 0; margin-top: 2px; }
  #wave-home-design .wf-metrics a.wf-link { grid-area: link; justify-self: start; min-height: 44px; margin-top: 6px; font-size: 14px; gap: 8px; }
}

/* Above the stacked phone layout the three measures read as one row, so the
   three headline figures have to share a baseline. "Conversations stay on
   time" wraps to two lines at many tablet widths while the two other titles
   stay on one, which dropped its figure and its link by up to 26px — 257 of
   the 400 widths between 601 and 1000px, iPad portrait at 820px among them.
   Subgrid hands the three cards the same three rows, so titles, figures and
   links line up whatever the wrapping, and no empty space is reserved at the
   widths where every title already fits on one line. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 601px) {
    #wave-home-design .wf-metrics { grid-template-rows: auto auto auto; }
    #wave-home-design .wf-metrics article,
    #wave-home-design .wf-metrics article:first-child { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
}

/* ---------------------------------------------------------------------------
   Comparison table — a real four-column table at every width. The reader sees
   .wave next to conventional serving without scrolling sideways, which is the
   whole point of the table. Type and padding shrink instead of the columns
   being pushed off screen.
   --------------------------------------------------------------------------- */
#wave-home-design .wf-table-hint { display: none !important; }
#wave-home-design .wf-scroll-rail { display: none; }

@media (max-width: 900px) {
  #wave-home-design .wf-reference-frame { max-width: 100%; margin-top: 34px; overflow: hidden; }
  #wave-home-design .wf-reference-table {
    display: table;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
  }
  #wave-home-design .wf-reference-table colgroup { display: table-column-group; }
  #wave-home-design .wf-reference-property { width: 15%; }
  #wave-home-design .wf-reference-table thead {
    display: table-header-group;
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
  }
  #wave-home-design .wf-reference-table tbody { display: table-row-group; }
  #wave-home-design .wf-reference-table thead tr,
  #wave-home-design .wf-reference-table tbody tr { display: table-row; }
  #wave-home-design .wf-reference-table th,
  #wave-home-design .wf-reference-table td,
  #wave-home-design .wf-reference-table tbody td {
    display: table-cell;
    padding: 16px 11px;
    font-size: 14.5px;
    line-height: 1.5;
    vertical-align: top;
    /* Pas de césure : elle coupait « tim-ing » et « to-kens » au milieu, ce qui
       se lit comme une faute. overflow-wrap ne coupe que si un mot ne rentre
       vraiment pas, et sans tiret. */
    overflow-wrap: break-word;
  }
  #wave-home-design .wf-reference-table thead th { padding-block: 16px; font-size: 15px; line-height: 1.35; }
  #wave-home-design .wf-reference-table tbody th { padding-inline: 0 10px; font-size: 13px; }
  #wave-home-design .wf-reference-table td strong { font-size: 14.5px; line-height: 1.5; }
  #wave-home-design .wf-reference-table tbody td::before { content: none; display: none; }
  #wave-home-design .wf-reference-table tbody tr:last-child > * { border-bottom: 0; }
}
/* En dessous de 640px le cadre devient plus étroit que les 600px du tableau,
   donc il glisse vraiment. Au-dessus, les quatre colonnes tiennent sans geste
   et le repère « Swipe » n'aurait aucun sens. */
@media (max-width: 640px) {
  /* Le tableau reprend sa taille normale et glisse latéralement. Trois choses
     rendent ce glissement évident, faute de quoi le visiteur ne verrait que la
     colonne du concurrent et repartirait sans lire la nôtre : le repère
     « Swipe to compare », une barre de défilement toujours visible, et une
     largeur calculée pour que la colonne suivante dépasse dans le cadre.
     La colonne des intitulés reste figée à gauche pendant le glissement. */
  #wave-home-design .wf-table-hint {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 28px; color: #5f5f70; font: 400 14px/1.5 var(--wf-sans);
  }
  #wave-home-design .wf-table-hint span { color: #3150bc; font-size: 22px; }

  #wave-home-design .wf-reference-frame {
    margin-top: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* La barre native n'est pas utilisable ici : iOS ne l'affiche jamais au
     repos, macOS la masque tant qu'on ne fait pas glisser, et styler
     ::-webkit-scrollbar cesse d'agir dès qu'une propriété standard comme
     scrollbar-width est posée. On dessine donc la nôtre, montée par home.js
     sous le tableau, qui suit la position du glissement. */
  #wave-home-design .wf-reference-frame { scrollbar-width: none; }
  #wave-home-design .wf-reference-frame::-webkit-scrollbar { display: none; }
  #wave-home-design .wf-scroll-rail {
    position: relative; display: block; height: 6px; margin-top: 10px;
    border-radius: 3px; background: #edf0f8; overflow: hidden;
  }
  #wave-home-design .wf-scroll-rail > span {
    position: absolute; top: 0; bottom: 0; left: 0;
    border-radius: 3px; background: #3150bc;
  }

  #wave-home-design .wf-reference-table { min-width: 600px; table-layout: fixed; }
  #wave-home-design .wf-reference-property { width: 96px; }
  #wave-home-design .wf-reference-table th,
  #wave-home-design .wf-reference-table td,
  #wave-home-design .wf-reference-table tbody td { padding: 17px 14px; font-size: 16px; line-height: 1.55; }
  #wave-home-design .wf-reference-table thead th { padding-block: 18px; font-size: 16px; }
  #wave-home-design .wf-reference-table tbody th { font-size: 14px; padding-inline: 12px; }
  #wave-home-design .wf-reference-table td strong { font-size: 16px; }

  /* Les intitulés de ligne restent lisibles pendant le glissement. */
  #wave-home-design .wf-reference-table tbody th,
  #wave-home-design .wf-reference-table thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: #ffffff; box-shadow: 1px 0 0 #dcdce5;
  }
}

/* ---------------------------------------------------------------------------
   Picture cards — three across on tablet, as on the desktop. A phone keeps one
   card per row: at 390px three cards would be 115px wide and their titles
   unreadable.
   --------------------------------------------------------------------------- */
@media (min-width: 701px) and (max-width: 1024px) {
  #wave-home-design .wf-picture-grid { gap: 16px; }
  #wave-home-design .wf-picture-card { padding: 22px 16px; gap: 80px; min-height: 420px; }
  #wave-home-design .wf-site .wf-picture-card h3,
  #wave-home-design .wf-site .wf-picture-articles h3 { font-size: 23px; line-height: 1.22; letter-spacing: -.035em; }
  #wave-home-design .wf-site .wf-picture-copy p { font-size: 16px; }
}

@media (max-width: 700px) {
  #wave-home-design .wf-header { padding: 14px 22px 4px; }
  #wave-home-design .wf-brand { min-height: 44px; gap: 9px; font-size: 27px; }
  #wave-home-design .wf-header-cta { display: inline-flex; max-width: none; padding-inline: 15px; font-size: 13px; }
  #wave-home-design .wf-section { padding: 48px 22px; }
  #wave-home-design .wf-hero { padding-top: 28px; gap: 28px; }
  #wave-home-design .wf-hero h1 { font-size: clamp(34px, 8.6vw, 48px); line-height: 1.12; }
  #wave-home-design .wf-site h2 { font-size: clamp(32px, 8.1vw, 42px); line-height: 1.13; }
  #wave-home-design .wf-yc { margin-bottom: 26px; }
  #wave-home-design .wf-promise,
  #wave-home-design .wf-definition { font-size: 17px; line-height: 1.65; }
  #wave-home-design .wf-actions { align-items: flex-start; gap: 10px 20px; margin-top: 24px; }
  #wave-home-design .wf-button { min-height: 48px; font-size: 15px; }
  #wave-home-design .wf-ribbon { max-width: 520px; }
  #wave-home-design .wf-ribbon figcaption { font-size: 13px; }
  #wave-home-design .wf-performance,
  #wave-home-design .wf-models { min-height: 0; }
  #wave-home-design .wf-comparison-intro p { font-size: 17px; }
  #wave-home-design .wf-picture-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #wave-home-design .wf-picture-models { margin-top: 32px; }
  #wave-home-design .wf-research > h2 { margin-bottom: 32px; }
  #wave-home-design .wf-picture-card,
  #wave-home-design .wf-picture-articles .wf-picture-card { width: 100%; min-height: 420px; aspect-ratio: 4 / 5; padding: 24px; gap: 64px; }
  #wave-home-design .wf-site .wf-picture-card h3,
  #wave-home-design .wf-site .wf-picture-articles h3 { font-size: clamp(25px, 6.7vw, 30px); line-height: 1.2; letter-spacing: -.035em; }
  #wave-home-design .wf-site .wf-picture-copy p { font-size: 17px; line-height: 1.5; }
  #wave-home-design .wf-picture-tag { font-size: 12px; }
  #wave-home-design .wf-picture-action { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Closing panel — the navigation stays laid over the armillary sphere as on the
   desktop down to 601px, and only stacks under it on a phone.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  #wave-home-design .wf-ending { padding-top: 48px; }
  #wave-home-design .wf-ending-heading { padding-inline: 22px; }
  #wave-home-design .wf-site .wf-ending h2 { font-size: clamp(31px, 7.8vw, 44px); }
  #wave-home-design .wf-ending-stage { display: flex; flex-direction: column; margin-top: 30px; }
  #wave-home-design .wf-ending-art { width: 100%; max-width: 100%; height: auto; margin: 0; }
  #wave-home-design .wf-ending-nav { position: static; order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 20px 22px 8px; }
  #wave-home-design .wf-ending-nav a { min-height: 48px; font-size: 16px; }
  #wave-home-design .wf-ending-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 22px 32px; }
}

/* ---------------------------------------------------------------------------
   Article — its comparison table fits the screen too, like the one on the
   homepage. The three columns shrink; none of them is pushed out of sight.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .article-table-scroll { overflow-x: visible; }
  .article-body table { min-width: 0; table-layout: fixed; font-size: .8125rem; }
  .article-body th,
  .article-body td { padding: .7rem .5rem; overflow-wrap: break-word; }
  .article-body tbody th { width: 26%; }
}
@media (max-width: 520px) {
  .article-body table { font-size: .6875rem; line-height: 1.45; }
  .article-body th,
  .article-body td { padding: .55rem .35rem; }
  .article-body tbody th { width: 24%; }
}

@media print {
  .wf-header-bar { position: static; }
}

@media (max-width: 400px) {
  #wave-home-design .wf-header-cta { padding-inline: 12px; font-size: 12px; gap: 10px; }
  #wave-home-design .wf-navigation { gap: 0 16px; }
  #wave-home-design .wf-navigation a { font-size: 13px; }
}

@media (max-width: 360px) {
  #wave-home-design .wf-section,
  #wave-home-design .wf-header,
  #wave-home-design .wf-ending-heading,
  #wave-home-design .wf-ending-nav,
  #wave-home-design .wf-ending-bottom { padding-inline: 18px; }
  #wave-home-design .wf-picture-card { padding: 22px; }
}