/*******************
  PAGE « LA MARQUE » (P5, 29/10/2026)
  Maquette « BAT SHOOLDY marque.psd » (1920 px, desktop seul), calques relevés dans
  chantiers/2026-10-14-refonte-graphique/marque-desktop-calques.txt. Textes à 90 % par les
  jetons (décision 4), largeurs reprises du PSD. Mobile dérivé des planches de l'accueil et de
  la fiche (décision 17), seuil choisi section par section :
  - Chiffres : cartes l'une sous l'autre sous 1000 px, points sous le chiffre sous 480 px.
  - Manifeste : cartes empilées sous 800 px.
  - Histoire : photo sous la citation sous 900 px ; formule sur deux lignes sous 900 px.
  - « Il paraît simple » : photo au-dessus du texte sous 760 px.
  - Valeurs : cartes empilées sous 1000 px.
  - Fabriqué en France : colonne de droite sous le bloc principal sous 1100 px, tout empilé sous 760 px.
  - Équipe : cercles au-dessus du texte sous 1000 px.
*******************/

.mq {
  /* Pixel du PSD à l'échelle de la fenêtre (1 px à 1920 px et au-delà) : les largeurs suivent la
     maquette, les textes suivent les jetons. */
  --u: min(1px, calc(100vw / 1920));
  --mq-w: calc(1593 * var(--u));              /* contenu des sections (163 → 1756 au PSD) */
  --mq-box-edge: max(8px, calc(68 * var(--u))); /* bord des grands fonds beiges (68 px au PSD) */
  --mq-gap: clamp(12px, 1vw, 19px);           /* écart entre cartes */
  --mq-fs: calc(var(--fs-text) * 0.885);      /* textes des cartes : 17,7 px au PSD, à 90 % */
  color: var(--c-ink);
  text-align: left;
}
.mq p {
  margin: 0;
}
.mq ul,
.mq ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mq .title {
  text-align: center;
}
.mq .title > * {
  margin: 0;
}
.mq-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mq-lead {
  max-width: 41em;
  margin: clamp(14px, 1.5vw, 28px) auto 0 !important;
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.mq-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Rond blanc à picto (manifeste, formule, valeurs) */
.mq-round {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--round, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-white);
}
.mq-round-icon {
  width: 52%;
  height: auto;
}

/* ---------------------------------------------------------------- Hero
   Photo en carte arrondie au bord de page, comme le hero de l'accueil (demande d'Antoine du 29/10 ;
   le PSD la mettait bord à bord) ; le header flotte dessus (body.header-light). Carte beige centrée
   posée sur le bas de la photo (1474 × 307 px, à 52 px du bas). */
.mq-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  min-height: clamp(520px, 56.3vw, 1240px);
  margin: calc(var(--topbar-h) + 9px) var(--page-edge) 0; /* écart du hero de l'accueil */
  padding: calc(var(--hdr-top) + var(--hdr-bar-h) + var(--sp-l)) var(--side) clamp(20px, 2.7vw, 52px);
  border-radius: var(--r-bloc);
  clip-path: inset(0 round var(--r-bloc));
  background: var(--c-beige);
}
@media (min-width: 2001px) {
  .mq-hero {
    margin-inline: auto;
  }
}
.mq-hero-media {
  position: absolute;
  inset: 0;
}
.mq-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.mq-hero-card {
  position: relative;
  width: min(100%, calc(1474 * var(--u)));
  padding: clamp(22px, 2.9vw, 55px) clamp(18px, 4vw, 80px);
  border-radius: var(--r-card-lg);
  background: var(--c-beige);
}
.mq-hero .title > * {
  font-size: calc(var(--fs-h2) * 1.03);
}
.mq-hero .title > * > i {
  font-size: 0.96em;
}
@media (max-width: 759px) {
  .mq-hero-card {
    width: 100%;
  }
  .mq-hero .title > * {
    font-size: calc(var(--fs-h2) * 0.86);
  }
}

/* Fil d'Ariane (celui des pages personae, .pe-crumbs) */
.mq-crumbs {
  max-width: calc(1622 * var(--u) + 2 * var(--side)); /* « Accueil » à 149 px au PSD */
  margin: clamp(14px, 2.4vw, 47px) auto 0;
  padding: 0 var(--side);
  font-size: calc(var(--fs-small) * 1.1);
  line-height: 1.7;
}
.mq-crumbs [aria-current] {
  font-weight: 600;
}
.mq-crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.mq-crumbs a:hover {
  color: var(--c-accent);
}

/* ---------------------------------------------------------------- Chiffres clés (groupe 06)
   Deux cartes beiges de 787 × 439 px ; 26 % en points (10 × 10, pas de 32 px), 4 000 000 en yeux. */
.mq-ch,
.mq-mf,
.mq-fr {
  max-width: calc(var(--mq-w) + 2 * var(--side));
  margin: 0 auto;
  padding: 0 var(--side);
}
.mq-ch {
  padding-top: clamp(20px, 2vw, 40px);
}
.mq-ch-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mq-gap);
  margin-top: clamp(24px, 3.1vw, 60px);
}
.mq-ch-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(260px, 22.9vw, 439px);
  padding: clamp(22px, 3.2vw, 61px) clamp(20px, 3.4vw, 65px) clamp(22px, 3.5vw, 68px);
  border-radius: var(--r-card-lg);
  background: var(--c-beige);
}
.mq-ch-pct {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
}
.mq-ch-text {
  align-self: flex-end;
}
.mq-ch-num {
  display: flex;
  align-items: flex-end;
  font-size: clamp(64px, 8vw, 153px);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.02em;
}
.mq-ch-num small {
  font-size: 0.42em;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
}
.mq-ch-legend {
  max-width: 27em;
  margin-top: clamp(14px, 1.4vw, 26px) !important;
  font-size: var(--mq-fs);
  font-weight: 500;
  line-height: 1.35;
}
.mq-ch-source {
  margin-top: clamp(10px, 0.8vw, 16px) !important;
  font-size: var(--fs-small);
  line-height: 1.4;
}
.mq-ch-label {
  margin-bottom: auto !important;
  color: var(--c-accent);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mq-ch-eyes {
  display: flex;
  align-items: center;
  gap: 0.03em;
}
.mq-ch-digit {
  margin-right: 0.12em;
}
.mq-eye {
  width: 0.53em;
  height: auto;
}
.mq-ch-gap {
  width: 0.22em; /* entre les groupes de « 4 000 000 » */
}
.mq-ch-big .mq-ch-num {
  margin-top: clamp(24px, 3vw, 60px) !important;
}

.mq-dots {
  display: grid;
  gap: var(--dot-gap);
  flex: none;
}
.mq-dots i {
  box-sizing: border-box;
  width: var(--dot);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-sable-clair);
}
.mq-dots i.on {
  background: var(--c-accent);
}
.mq-dots-100 {
  --dot: clamp(12px, 1.2vw, 23px);
  --dot-gap: clamp(4px, 0.45vw, 9px);
  grid-template-columns: repeat(10, var(--dot));
}

@media (max-width: 999px) {
  .mq-ch-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .mq-ch-card {
    min-height: 0;
  }
}
@media (max-width: 479px) {
  .mq-ch-pct {
    gap: 12px;
  }
  .mq-dots-100 {
    --dot: 11px;
    --dot-gap: 4px;
  }
}

/* ---------------------------------------------------------------- Manifeste (groupe 05)
   Trois cartes de 514 × 239 px : beige, menthe, turquoise ; rond blanc de 84 px. */
.mq-mf {
  padding-top: clamp(32px, 2.2vw, 41px);
}
.mq-mf-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mq-gap);
  margin-top: clamp(24px, 3.1vw, 59px) !important;
}
.mq-mf-card {
  --round: clamp(56px, 4.4vw, 84px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.1vw, 22px);
  min-height: clamp(150px, 12.4vw, 239px);
  padding: clamp(18px, 1.8vw, 34px) clamp(18px, 2.2vw, 42px);
  border-radius: var(--r-card-lg);
  background: var(--c-beige);
}
.mq-mf-card:nth-child(3n + 2) {
  background: var(--c-menthe);
}
.mq-mf-card:nth-child(3n) {
  background: var(--c-accent);
}
.mq-mf-card p {
  font-size: calc(var(--fs-text) * 1.07);
  font-weight: 700;
  line-height: 1.3;
}
@media (max-width: 799px) {
  .mq-mf-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .mq-mf-card {
    flex-direction: row;
    align-items: center;
    min-height: 0;
  }
}
/* Grand mobile et petite tablette (550-799 px) : deux cartes l'une sous l'autre à gauche (65 %), la
   dernière sur leur hauteur à droite (35 %), picto au-dessus du texte (retour d'Antoine du 29/10). */
@media (min-width: 550px) and (max-width: 799px) {
  .mq-mf-cards {
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  }
  .mq-mf-card:nth-child(3) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ---------------------------------------------------------------- Grand fond beige : histoire, formule,
   « Il paraît simple », valeurs (1784 × 2991 px au PSD) */
.mq-box,
.mq-eq-box {
  max-width: calc(var(--tunnel) - 2 * var(--mq-box-edge));
  margin: clamp(40px, 4.6vw, 88px) var(--mq-box-edge) 0;
  padding: clamp(32px, 2.9vw, 55px) clamp(8px, 2.1vw, 40px) clamp(40px, 3.3vw, 64px);
  border-radius: var(--r-bloc);
  background: var(--c-beige);
}
@media (min-width: 2001px) {
  .mq-box,
  .mq-eq-box {
    margin-inline: auto;
  }
}
.mq-hi,
.mq-sf,
.mq-es,
.mq-va {
  max-width: calc(1704 * var(--u));           /* citation + photo : 109 → 1813 au PSD */
  margin: 0 auto;
}

/* Histoire (groupe 08) */
.mq-hi-logo {
  display: block;
  width: clamp(110px, 9.8vw, 189px);
  height: auto;
  margin: 0 auto clamp(28px, 3.3vw, 63px);
}
/* Yeux ouverts (ronds noirs de la largeur des traits) qui se ferment d'un seul mouvement quand le logo passe
   à 60 % de la hauteur de l'écran (marque.js) : la paupière turquoise `mq-hi-up` descend, puis le croissant
   restant laisse place au trait du logo. Sans script ou en mouvement réduit, fermés comme le logo. */
.mq-hi-logo .mq-hi-eye {
  opacity: 0;
}
.mq-js .mq-hi-logo .mq-hi-eye {
  opacity: 1;
}
.mq-js .mq-hi-logo .mq-hi-lid {
  opacity: 0;
}
.mq-js .mq-hi-logo .mq-hi-up {
  transform: translateY(-140px); /* unités du viewBox : paupière au-dessus des ronds */
}
.mq-js .mq-hi-logo.is-in .mq-hi-up {
  animation: mq-shut 0.8s ease-in-out both;
}
.mq-js .mq-hi-logo.is-in .mq-hi-eye {
  animation: mq-fade-out 1.1s ease both;
}
.mq-js .mq-hi-logo.is-in .mq-hi-lid {
  animation: mq-fade-in 1.1s ease both;
}
@keyframes mq-shut {
  to { transform: none; }
}
@keyframes mq-fade-out {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes mq-fade-in {
  0%, 70% { opacity: 0; }
  100% { opacity: 1; }
}
.mq-hi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 32px);
  margin-top: clamp(28px, 3.9vw, 75px);
}
.mq-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(28px, 4.1vw, 79px) clamp(18px, 4.3vw, 82px);
  border-radius: var(--r-card-lg);
  background: var(--c-accent);
  color: var(--c-white);
  text-align: center;
}
.mq-quote-label {
  font-size: calc(var(--fs-text) * 1.1);
  font-weight: 700;
  text-transform: uppercase;
}
.mq-quote blockquote {
  margin: clamp(10px, 1.2vw, 22px) 0 0;
  padding: 0;
}
.mq-quote blockquote::before {
  content: '\201C';
  display: block;
  font-family: var(--f-italic);
  font-size: clamp(52px, 5vw, 96px);
  line-height: 0.6;
}
.mq-quote-q {
  margin-top: clamp(8px, 1vw, 18px) !important;
  font-size: calc(var(--fs-h2) * 0.74);
  font-weight: 600;
  line-height: 1.2;
}
.mq-quote-q i {
  font-family: var(--f-italic);
  font-size: 1.1em;
  font-weight: 300;
}
.mq-quote figcaption {
  max-width: 25em;
  margin-top: clamp(16px, 1.8vw, 34px);
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.3;
}
.mq-quote figcaption strong {
  font-weight: 700;
}
.mq-quote-people {
  width: clamp(200px, 22.5vw, 432px);
  height: auto;
  margin-top: clamp(16px, 1.6vw, 30px);
}
.mq-hi-media {
  overflow: hidden;
  min-height: 300px;
  border-radius: var(--r-card-lg);
}
@media (max-width: 899px) {
  .mq-hi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mq-hi-media {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
}

/* Formule (« Trois savoir-faire… ») : ronds blancs de 177 px, signes entre les ronds. */
.mq-sf {
  padding-top: clamp(48px, 4.6vw, 88px);
}
.mq-sf-items {
  --round: clamp(72px, 9.2vw, 177px);
  --sf-gap: clamp(28px, 3.7vw, 71px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-l) var(--sf-gap);
  margin-top: clamp(32px, 3.6vw, 69px) !important;
}
.mq-sf-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--round);
  text-align: center;
}
.mq-sf-item + .mq-sf-item::before {
  content: '+';
  position: absolute;
  top: calc(var(--round) / 2);
  left: calc(var(--sf-gap) / -2);
  transform: translate(-50%, -50%);
  font-size: calc(var(--fs-h4) * 1.1);
  font-weight: 700;
  line-height: 1;
}
.mq-sf-item:last-child::before {
  content: '=';
}
.mq-sf-item:last-child .mq-round-icon {
  width: 61%; /* yeux de la marque : 108 px dans le rond de 177 */
}
.mq-sf-item p {
  width: max-content;
  max-width: 11em;
  margin-top: clamp(14px, 1.6vw, 31px) !important;
  font-size: var(--mq-fs);
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 899px) {
  .mq-sf-items {
    max-width: calc(3 * var(--round) + 2 * var(--sf-gap) + 40px);
    margin-inline: auto !important;
  }
}

/* « Il paraît simple » : panneau blanc de 1615 × 297 px, photo à gauche (495 px). */
.mq-es {
  display: grid;
  grid-template-columns: minmax(0, 495fr) minmax(0, 1120fr);
  overflow: hidden;
  max-width: calc(1615 * var(--u));
  margin-top: clamp(40px, 4.9vw, 95px);
  border-radius: var(--r-card-lg);
  background: var(--c-white);
}
.mq-es-media {
  min-height: clamp(200px, 15.5vw, 297px);
}
.mq-es-text {
  align-self: center;
  padding: clamp(22px, 2.6vw, 50px) clamp(20px, 4.2vw, 82px);
}
/* Lien « coussin ergonomique d'épaule » vers l'accueil (Symbolist, 06/11). */
.mq-es-text p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.mq-es .title {
  text-align: left;
}
.mq-es .title > * {
  font-size: calc(var(--fs-h2) * 0.6);
  font-weight: 700;
  line-height: 1.15;
}
.mq-es .title > * > i {
  font-size: 1.1em;
}
.mq-es-text > p {
  max-width: 48em;
  margin-top: clamp(10px, 0.9vw, 16px) !important;
  font-size: var(--mq-fs);
  font-weight: 500;
  line-height: 1.45;
}
@media (max-width: 759px) {
  .mq-es {
    grid-template-columns: minmax(0, 1fr);
  }
  .mq-es-media {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
}

/* Valeurs (groupe 09) : cartes de 451 × 630 px, blanc / menthe / turquoise. */
.mq-va {
  padding-top: clamp(48px, 5.6vw, 107px);
}
.mq-va .title > * {
  font-size: calc(var(--fs-h2) * 0.8);
}
.mq-va .title > * > i {
  font-size: 1.1em;
}
.mq-va-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, calc(451 * var(--u))));
  justify-content: center;
  gap: clamp(12px, 1vw, 20px);
  margin-top: clamp(28px, 3.4vw, 66px) !important;
}
.mq-va-card {
  --round: clamp(60px, 4.2vw, 80px);
  position: relative;
  padding: clamp(22px, 2vw, 40px) clamp(20px, 1.8vw, 35px) clamp(28px, 2.4vw, 46px);
  border-radius: var(--r-card-lg);
  background: var(--c-white);
  font-size: var(--mq-fs);
  font-weight: 500;
  line-height: 1.45;
}
.mq-va-card:nth-child(3n + 1) .mq-round {
  background: var(--c-menthe);
}
.mq-va-card:nth-child(3n + 2) {
  background: var(--c-menthe);
}
.mq-va-card:nth-child(3n) {
  background: var(--c-accent);
}
.mq-va-num {
  position: absolute;
  top: clamp(22px, 2.4vw, 46px);
  right: clamp(20px, 1.9vw, 36px);
  font-size: var(--fs-tiny);
  font-weight: 700;
}
.mq-va-title {
  margin: clamp(28px, 3.2vw, 62px) 0 0;
  font-family: var(--f-italic);
  font-size: calc(var(--fs-h2) * 1.03);
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
}
.mq-va-hook {
  margin-top: clamp(18px, 1.9vw, 36px) !important;
  font-weight: 700;
}
.mq-va-card .mq-va-hook + p,
.mq-va-card p + p {
  margin-top: 1.45em !important;
}
@media (max-width: 999px) {
  .mq-va-cards {
    grid-template-columns: minmax(0, 560px);
  }
}

/* ---------------------------------------------------------------- Fabriqué en France (groupe 10)
   Bloc principal (924 px : chiffre clé sur deux colonnes, puis 2 cartes) et colonne de droite (507 px). */
.mq-fr {
  max-width: calc(1449 * var(--u) + 2 * var(--side));
  padding-top: clamp(40px, 2.5vw, 47px);
}
.mq-fr-badge {
  display: block;
  width: clamp(80px, 6.5vw, 125px);
  height: auto;
  margin: 0 auto clamp(20px, 3vw, 59px);
}
.mq-fr-grid {
  display: grid;
  grid-template-columns: minmax(0, 924fr) minmax(0, 507fr);
  gap: var(--mq-gap);
  margin-top: clamp(28px, 3.6vw, 70px);
}
.mq-fr-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mq-gap);
}
.mq-fr-side {
  display: flex;
  flex-direction: column;
  gap: var(--mq-gap);
}
.mq-fr-side > :first-child {
  flex: 1;
}
.mq-fr-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.1vw, 40px) clamp(20px, 2vw, 38px) clamp(24px, 2.4vw, 46px);
  border-radius: var(--r-card-lg);
  background: var(--c-beige);
  font-size: var(--mq-fs);
  font-weight: 500;
  line-height: 1.45;
}
/* Cartes 1 (gamme) et 4 (territoire) en menthe, 2 et 3 en beige, comme le PSD. */
.mq-fr-main > .mq-fr-card:nth-child(2),
.mq-fr-side > .mq-fr-card:nth-child(2) {
  background: var(--c-menthe);
}
.mq-fr-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mq-fr-icon {
  width: clamp(28px, 2.1vw, 42px);
  height: auto;
}
.mq-fr-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 50px);
  margin-top: clamp(16px, 1.8vw, 34px);
}
.mq-fr-title {
  margin: 0;
  font-size: calc(var(--fs-h2) * 0.83);
  font-weight: 600;
  line-height: 1.12;
}
.mq-fr-sub {
  margin-top: 0.4em !important;
  font-weight: 700;
}
.mq-fr-logo {
  width: clamp(64px, 4.7vw, 90px);
  height: auto;
}
.mq-fr-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(18px, 2.4vw, 46px);
}
.mq-fr-text {
  margin-top: clamp(16px, 1.8vw, 34px);
}
.mq-fr-card:has(.mq-fr-img) .mq-fr-text {
  margin-top: auto;
  padding-top: clamp(16px, 2.2vw, 42px);
}
.mq-fr-hook {
  font-weight: 700;
}
.mq-fr-side > :last-child .mq-fr-title {
  font-size: calc(var(--fs-h2) * 0.93);
}

.mq-fr-stat {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-m);
  padding: clamp(22px, 2.9vw, 56px) clamp(20px, 3.4vw, 65px) clamp(24px, 3vw, 58px);
  background: var(--c-accent);
}
.mq-pill {
  display: inline-block;
  padding: 0.55em 1.2em;
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mq-fr-num {
  display: flex;
  align-items: flex-end;
  margin-top: clamp(14px, 1.6vw, 30px) !important;
  font-size: clamp(72px, 8.6vw, 165px);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.02em;
}
.mq-fr-num small {
  font-size: 0.42em;
  line-height: 1.1;
  letter-spacing: 0;
}
.mq-fr-stat-text {
  max-width: 28em;
  margin-top: clamp(14px, 1.4vw, 26px) !important;
}
.mq-fr-dots p {
  margin-top: 1.1em !important;
  font-size: var(--fs-tiny);
  font-weight: 700;
}
.mq-dots-10 {
  --dot: clamp(24px, 2vw, 38px);
  --dot-gap: clamp(7px, 0.6vw, 11px);
  grid-template-columns: repeat(5, var(--dot));
}
.mq-dots-10 i,
.mq-dots-10 i.on {
  background: var(--c-white);
}
.mq-dots-10 i:not(.on) {
  border: 2px solid var(--c-ink);
  background: transparent;
}

@media (max-width: 1099px) {
  .mq-fr-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mq-fr-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 759px) {
  .mq-fr-main,
  .mq-fr-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .mq-fr-stat {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------- Équipe (groupe 13)
   Trois cercles de 385 px qui se recoupent (bloc de 620 × 608), encart blanc et conclusion. */
.mq-eq-box {
  margin-top: clamp(40px, 4.5vw, 86px);
}
.mq-eq-box > .mq-lead {
  max-width: 36em;
}
.mq-eq-grid {
  display: grid;
  grid-template-columns: minmax(0, 620fr) minmax(0, 753fr);
  align-items: start;
  gap: clamp(24px, 6.4vw, 123px);
  max-width: calc(1496 * var(--u));           /* cercles à 176 px, encart jusqu'à 1672 px */
  margin: clamp(28px, 3.2vw, 62px) auto 0;
}
.mq-venn {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 620 / 608;
  width: 100%;
  max-width: 620px;
}
.mq-venn > li {
  position: absolute;
  width: 62.1%;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.mq-venn > li span {
  position: absolute;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 90%;
  font-size: max(13px, 3.2cqw);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.mq-venn-1 {
  top: 0;
  left: 0;
  background: var(--c-accent);
}
.mq-venn-1 span {
  top: 41%;
  left: 34.5%;
}
.mq-venn-2 {
  top: 0;
  left: 37.9%;
  background: var(--c-menthe-fort);
}
.mq-venn-2 span {
  top: 41%;
  left: 64%;
}
.mq-venn-3 {
  top: 36.8%;
  left: 18.9%;
  background: var(--c-sable);
}
.mq-venn-3 span {
  top: 64%;
  left: 50%;
}
.mq .mq-venn-logo {
  top: 49%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37.4%;
  aspect-ratio: auto;
  height: auto;
  padding: 3.4cqw 0;
  border-radius: var(--r-pill);
  background: var(--c-white);
  mix-blend-mode: normal;
  transform: translate(-50%, -50%);
}
.mq-venn-logo img {
  width: 62.5%;
  height: auto;
}
.mq-eq-card {
  padding: clamp(22px, 2.3vw, 44px) clamp(20px, 3.7vw, 71px);
  border-radius: var(--r-card-lg);
  background: var(--c-white);
  font-size: var(--mq-fs);
  font-weight: 500;
  line-height: 1.45;
}
.mq-eq-card h3 {
  margin: 0 0 1.45em;
  font-size: var(--fs-text);
  font-weight: 700;
  text-transform: uppercase;
}
.mq-eq-outro {
  margin-top: clamp(20px, 1.8vw, 35px);
  padding-inline: clamp(0px, 1.4vw, 27px);
  font-size: var(--mq-fs);
  font-weight: 500;
  line-height: 1.45;
}
.mq-eq-outro p + p,
.mq-eq-card p + p {
  margin-top: 1.45em !important;
}
.mq-eq-outro strong {
  font-weight: 700;
}
@media (max-width: 999px) {
  .mq-eq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mq-venn {
    width: min(100%, 460px);
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------- Partenaires : galerie des options,
   une ligne au PSD (11 logos, 57 → 1885 px), sur plusieurs lignes centrées en dessous. */
.mq-lg {
  max-width: calc(var(--tunnel) - 2 * var(--mq-box-edge));
  margin: clamp(28px, 2.6vw, 50px) auto clamp(28px, 2.6vw, 50px);
  padding: 0 var(--mq-box-edge);
}
.mq-lg-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.6vw, 30px) clamp(18px, 1.6vw, 30px);
}
.mq-lg-img {
  display: block;
  width: auto;
  height: clamp(54px, 5.4vw, 104px);
  max-width: clamp(110px, 10.6vw, 204px);
  object-fit: contain;
}
@media (max-width: 1199px) {
  .mq-lg-list {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------- Avis des ronds (citation)
   Les neuf ronds de « PERSONNES RONDES.svg », un par avis marque réel (champ mq_hi_avis) : info-bulle au
   survol (souris), au focus clavier et au toucher (marque.js). 56 px au PSD, pas de 47 px. */
.mq-people {
  --p: max(30px, calc(56 * var(--u)));
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: clamp(16px, 1.6vw, 30px) !important;
}
.mq-person {
  position: relative;
}
.mq-person + .mq-person {
  margin-left: calc(var(--p) * -0.16);
}
.mq-person-btn {
  display: block;
  width: var(--p);
  height: var(--p);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.mq-person-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mq-person-btn circle {
  fill: var(--c-accent);
  stroke: var(--c-white);
  stroke-width: 4;
}
.mq-person:nth-child(3n + 2) circle {
  fill: #ede0d0; /* « st1 » du SVG */
}
.mq-person:nth-child(3n) circle {
  fill: #cfe8e6; /* « st2 » du SVG */
}
.mq-person-btn path {
  fill: #1e1e1c;
}
.mq-person-btn:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 2px;
}
.mq-person:hover,
.mq-person.is-open,
.mq-person:focus-within {
  z-index: 2;
}
.mq-person.is-open .mq-person-btn,
.mq-person-btn:focus-visible {
  transform: translateY(-4px) scale(1.12);
}
.mq-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(290px, calc(100vw - 48px));
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card), 0 2px 8px rgba(48, 49, 67, 0.12);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: -50% 6px;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}
.mq-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--tip-x, 50%);
  width: 14px;
  height: 14px;
  background: var(--c-white);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Bords de la rangée : la bulle s'aligne sur le rond au lieu de déborder. */
.mq-person:nth-child(-n + 2) .mq-tip {
  --tip-x: calc(var(--p) / 2);
  --tip-dx: 0;
  left: 0;
}
.mq-person:nth-last-child(-n + 2) .mq-tip {
  --tip-x: calc(100% - var(--p) / 2);
  --tip-dx: 0;
  right: 0;
  left: auto;
}
.mq-person:is(:nth-child(-n + 2), :nth-last-child(-n + 2)) .mq-tip {
  translate: 0 6px;
}
.mq-person.is-open .mq-tip,
.mq-person-btn:focus-visible + .mq-tip {
  opacity: 1;
  visibility: visible;
  translate: var(--tip-dx, -50%) 0;
  transition-delay: 0s;
}
@media (hover: hover) {
  .mq-person:hover .mq-person-btn {
    transform: translateY(-4px) scale(1.12);
  }
  .mq-person:hover .mq-tip {
    opacity: 1;
    visibility: visible;
    translate: var(--tip-dx, -50%) 0;
    transition-delay: 0s;
  }
}
.mq-tip-meta {
  font-size: var(--fs-tiny);
}
.mq-tip-meta strong {
  font-weight: 700;
}
.mq-tip-badge {
  color: var(--c-accent);
  font-size: var(--fs-tiny);
  font-weight: 700;
}
.mq-tip-badge::before {
  content: '\2713\00a0';
}
/* Petits écrans : la bulle se centre sur la rangée (ronds de 30 px), sans flèche. */
@media (max-width: 599px) {
  .mq-people .mq-person {
    position: static;
  }
  .mq-people .mq-person .mq-tip {
    --tip-dx: -50%;
    right: auto;
    left: 50%;
    translate: -50% 6px;
  }
  .mq-people .mq-person.is-open .mq-tip,
  .mq-people .mq-person-btn:focus-visible + .mq-tip {
    translate: -50% 0;
  }
  .mq-tip::after {
    display: none;
  }
}

/* ---------------------------------------------------------------- Animations (demande d'Antoine du 29/10)
   États de départ sous `.mq-js` (posée en ligne par le gabarit, jamais en mouvement réduit), départ à
   l'apparition par `.is-in` (marque.js). Sans JS ou en mouvement réduit : état final, rien ne bouge. */
@keyframes mq-pop {
  0% { transform: scale(0); }
  65% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes mq-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}
@keyframes mq-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes mq-dot-fill {
  0% { background-color: var(--c-sable-clair); transform: scale(1); }
  55% { background-color: var(--c-accent); transform: scale(1.35); }
  100% { background-color: var(--c-accent); transform: scale(1); }
}
@keyframes mq-dot-white {
  0% { background-color: transparent; box-shadow: inset 0 0 0 2px var(--c-ink); transform: scale(1); }
  55% { background-color: var(--c-white); box-shadow: inset 0 0 0 0 var(--c-white); transform: scale(1.3); }
  100% { background-color: var(--c-white); box-shadow: none; transform: scale(1); }
}
@keyframes mq-zz {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  45% { opacity: 0; transform: translate(3px, -6px) scale(1.3); }
  55% { opacity: 0; transform: translate(-2px, 3px) scale(0.5); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* 4 000 000 : chaque œil de la marque éclate et devient un « 0 », l'un après l'autre (retour d'Antoine du
   29/10). État final, sans JS et en mouvement réduit : le nombre en chiffres. */
@keyframes mq-burst {
  0% { opacity: 1; transform: scale(1); }
  35% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes mq-zero-in {
  0% { opacity: 0; transform: scale(0); }
  65% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
.mq-zero {
  display: inline-grid;
  place-items: center;
}
.mq-zero > * {
  grid-area: 1 / 1;
}
.mq-eye {
  opacity: 0;
  transform: scale(0);
}
.mq-js .mq-eye {
  opacity: 1;
  transform: none;
}
.mq-js .mq-zero-txt {
  opacity: 0;
  transform: scale(0);
}
.mq-js .mq-ch-eyes.is-in .mq-eye {
  animation: mq-burst 0.35s ease-in both;
  animation-delay: calc(500ms + var(--i) * 200ms);
}
.mq-js .mq-ch-eyes.is-in .mq-zero-txt {
  animation: mq-zero-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(700ms + var(--i) * 200ms);
}

/* Points : les points pleins se colorent l'un après l'autre (26 sur 100, puis 8 sur 10 en blanc). */
.mq-js .mq-dots-100 i.on {
  background-color: var(--c-sable-clair);
}
.mq-js .mq-dots-100.is-in i.on {
  animation: mq-dot-fill 0.4s ease both;
  animation-delay: calc(150ms + var(--i) * 45ms);
}
.mq-js .mq-dots-10 i.on {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--c-ink);
}
.mq-js .mq-dots-10.is-in i.on {
  animation: mq-dot-white 0.45s ease both;
  animation-delay: calc(150ms + var(--i) * 130ms);
}

/* Formule : les étapes (et leurs signes) arrivent l'une après l'autre. */
.mq-js .mq-sf-item {
  opacity: 0;
}
.mq-js .mq-sf-items.is-in .mq-sf-item {
  animation: mq-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i) * 170ms);
}

/* Valeurs : les cartes prennent leur couleur l'une après l'autre, le rond du picto surgit. */
.mq-va-card {
  transition: background-color 0.6s ease calc(var(--i, 0) * 320ms);
}
.mq-js .mq-va-cards:not(.is-in) .mq-va-card {
  background-color: var(--c-white);
}
.mq-js .mq-va-cards:not(.is-in) .mq-round {
  transform: scale(0);
}
.mq-js .mq-va-cards.is-in .mq-round {
  animation: mq-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(200ms + var(--i) * 320ms);
}

/* Pictos du manifeste : sommeil agité (lit : le Z s'efface, le tilde ondule, la tête bouge par à-coups, la
   couverture tressaute), les « Z » de la batterie s'envolent, le chrono se remplit ; au survol de la carte,
   une fois à l'apparition sur les écrans sans souris. Repères `mq-zfade` / `mq-tilde` / `mq-head` /
   `mq-quilt` / `mq-z` / `mq-fill` posés dans les SVG. */
.mq-round-icon .mq-zfade {
  transition: opacity 0.6s ease;
}
@keyframes mq-zout {
  0%, 100% { opacity: 1; }
  8%, 92% { opacity: 0; }
}
.mq-round-icon .mq-z,
.mq-round-icon .mq-tilde,
.mq-round-icon .mq-head,
.mq-round-icon .mq-quilt {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes mq-wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: translateX(0.8px) scaleY(-1); }
}
@keyframes mq-toss {
  0%, 24%, 55%, 72%, 100% { transform: translate(0, 0); }
  6% { transform: translate(-1.4px, -0.4px); }
  12% { transform: translate(1.2px, 0); }
  18% { transform: translate(-0.6px, -0.2px); }
  60% { transform: translate(1.4px, -0.5px); }
  66% { transform: translate(-1px, 0); }
}
@keyframes mq-jolt {
  0%, 14%, 55%, 70%, 100% { transform: translateY(0); }
  8% { transform: translateY(-0.8px); }
  62% { transform: translateY(-0.6px); }
}
.mq-round-icon .mq-fill {
  transition: stroke-dashoffset 0.5s ease;
}
@keyframes mq-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mq-mf-card:hover .mq-blink {
    animation: mq-blink 0.9s steps(1, end) infinite;
  }
  .mq-mf-card:hover .mq-z {
    animation: mq-zz 1.5s ease-in-out infinite;
  }
  .mq-mf-card:hover .mq-z2 {
    animation-delay: 0.35s;
  }
  .mq-mf-card:hover .mq-zfade {
    opacity: 0;
  }
  .mq-mf-card:hover .mq-tilde {
    animation: mq-wave 1.6s ease-in-out infinite;
  }
  .mq-mf-card:hover .mq-head {
    animation: mq-toss 3.6s ease-in-out infinite;
  }
  .mq-mf-card:hover .mq-quilt {
    animation: mq-jolt 3.6s ease-in-out 0.1s infinite;
  }
  .mq-mf-card:hover .mq-fill {
    stroke-dashoffset: 0;
    transition-duration: 1.4s;
  }
}
@media (hover: none) {
  .mq-js .mq-mf-card.is-in .mq-z {
    animation: mq-zz 1.5s ease-in-out 2;
  }
  .mq-js .mq-mf-card.is-in .mq-z2 {
    animation-delay: 0.35s;
  }
  .mq-js .mq-mf-card.is-in .mq-zfade {
    animation: mq-zout 7.3s ease both;
  }
  .mq-js .mq-mf-card.is-in .mq-tilde {
    animation: mq-wave 1.6s ease-in-out 5;
  }
  .mq-js .mq-mf-card.is-in .mq-head {
    animation: mq-toss 3.6s ease-in-out 2;
  }
  .mq-js .mq-mf-card.is-in .mq-quilt {
    animation: mq-jolt 3.6s ease-in-out 0.1s 2;
  }
  .mq-js .mq-mf-card.is-in .mq-blink {
    animation: mq-blink 0.9s steps(1, end) 4;
  }
  .mq-js .mq-mf-card.is-in .mq-fill {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.4s ease 0.3s;
  }
}

/* Sous 1000 px, les blocs bridés à l'échelle du PSD reprennent toute la largeur (en fin de feuille : la
   règle doit l'emporter sur les largeurs posées section par section, dont celle de #rse). */
@media (max-width: 999px) {
  .mq-ch,
  .mq-mf,
  .mq-fr,
  .mq-hi,
  .mq-sf,
  .mq-es,
  .mq-va,
  .mq-eq-grid {
    max-width: none;
  }
}