/*******************
  ACCUEIL DE LA REFONTE (P2, 14/10/2026)
  Maquettes home-desktop.jpg (1920 px) et home-mobile.jpg (390 px). Cotes à 90 % via les
  jetons de tokens.css. Chaque section porte son propre seuil de bascule (décision 1 du plan).
*******************/

/* ---------------------------------------------------------------- Couloir de 2000 px
   Au-delà de --tunnel, les sections se centrent ; Presse garde son fond beige bord à bord
   (ombre portée rognée), Essai devient une carte arrondie comme le hero. */
.home-hero,
.home-reass,
.home-pq,
.home-avis,
.home-pr,
.home-av,
.home-fq,
.home-ps {
  max-width: var(--tunnel);
  margin-inline: auto;
}
.home-ps {
  box-shadow: 0 0 0 100vmax var(--c-beige);
  clip-path: inset(0 -100vmax);
}
/* Titres de Questions et Presse au même retrait que celui du comparatif (« Pourquoi
   Shooldy », comparatif.css : couloir de 1660 px, marge --side) ; 100cqw = largeur de la
   section, qui tient déjà compte du couloir de 2000 px. */
.home-fq,
.home-ps {
  container-type: inline-size;
}
.home-fq-head,
.home-ps-head {
  --title-x: calc(max(0px, (100cqw - 1660px) / 2) + var(--side));
}
@media (min-width: 2001px) {
  .home-nu {
    max-width: calc(var(--tunnel) - 2 * var(--page-edge));
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--r-bloc);
    clip-path: inset(0 round var(--r-bloc)); /* voir .home-nu-media en mobile */
  }
}

/* ---------------------------------------------------------------- Hero (groupe BANDEAU)
   Carte arrondie en retrait, photo plein cadre, titre et boutons à gauche, tampon en bas à
   droite. Le header flotte dessus (body.header-light, inc/shooldy-chrome.php).
   Mobile (≤ 760 px) : photo en haut, texte et boutons empilés sur fond sombre en dessous. */
.home-hero {
  padding: calc(var(--topbar-h) + 9px) var(--page-edge) 0;
}
.home-hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 46.9vw, 900px);
  padding: calc(var(--hdr-top) + var(--hdr-bar-h) + var(--sp-l)) clamp(24px, 6.8vw, 130px) var(--sp-xl);
  border-radius: var(--r-bloc);
  clip-path: inset(0 round var(--r-bloc)); /* le tampon se retourne en 3D : voir .home-nu-media en mobile */
  background-color: var(--c-bandeau);
  color: var(--c-white);
  text-align: left;
}
.home-hero-media {
  position: absolute;
  inset: 0;
}
.home-hero-media::after {
  /* « Fond en dégradé 10 » : voile sombre côté texte. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(35, 34, 35, 0.74) 0%, rgba(35, 34, 35, 0.46) 45%, rgba(35, 34, 35, 0.2) 80%);
}
/* Le <picture> de la source mobile ne fait pas boîte : l'image garde le cadre du média. */
.home-hero-media > picture {
  display: contents;
}
.home-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
}
.home-hero-content {
  position: relative;
  max-width: 40em;
}
/* Titre : taille --fs-h1 (maquette à 90 %) ; la largeur reproduit la coupure du PSD
   (« Soulagez vos / tensions d'épaule. / Retrouvez votre confort, / de nuit comme de jour. »). */
.home-hero .title.display > * {
  max-width: 9.8em;
}
.home-hero .title.display > * > i {
  font-size: 0.88em; /* italique 80,4 px pour un gras à 91,7 px au PSD */
}
.home-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-m);
  margin-top: calc(var(--sp-l) * 1.2);
}
.home-hero-badge {
  position: absolute;
  right: clamp(12px, 2vw, 38px);
  bottom: clamp(12px, 1.15vw, 22px);
  z-index: 1;
  width: clamp(96px, 11.2vw, 215px);
}

@media (max-width: 760px) {
  .home-hero-card {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
  }
  .home-hero-media {
    position: relative;
    aspect-ratio: 1 / 1.08;
  }
  .home-hero-media::after {
    background: linear-gradient(180deg, rgba(35, 34, 35, 0) 62%, var(--c-bandeau) 100%);
  }
  .home-hero-img {
    object-position: 72% 50%;
  }
  .home-hero .title.display > * {
    max-width: none;
  }
  .home-hero-content {
    max-width: none;
    margin-top: calc(var(--sp-s) * -1);
    padding: 0 20px 30px;
  }
  .home-hero-btns {
    flex-direction: column;
    gap: 10px;
    margin-top: var(--sp-l);
  }
  .home-hero-btns .btn {
    width: 100%;
  }
  .home-hero-badge {
    right: 26px;
    bottom: 8px;
    width: 89px;
  }
}
@media (min-width: 600px) and (max-width: 760px) {
  .home-hero-media {
    aspect-ratio: 1.5 / 1;
  }
}

/* ---------------------------------------------------------------- Bande de réassurance
   Une ligne sous le hero. Quand elle ne tient pas (mobile, langues longues), home.js pose
   .is-scrolling et la bande défile en continu (la seconde liste, aria-hidden, fait la boucle). */
.home-reass {
  display: flex;
  overflow: hidden;
  padding: var(--sp-s) 0;
  color: var(--c-ink-soft);
  font-size: max(14px, calc(var(--fs-text) * 0.9));
  font-weight: 500;
  white-space: nowrap;
}
.home-reass-track {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-l);
  margin: 0;
  padding: 0 var(--side);
  list-style: none;
}
.home-reass-track + .home-reass-track {
  display: none;
}
.home-reass-track li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
}
.home-reass-track img {
  width: 1.55em;
  height: 1.55em;
  object-fit: contain;
}
.home-reass-stars {
  width: 5.5em;
  height: 1.1em;
  /* --fill : part remplie, à proportion de la note Avis Vérifiés (inc/shooldy-avis.php). */
  background: linear-gradient(90deg, var(--c-accent) var(--fill, 100%), rgba(48, 49, 67, 0.18) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L1.3 7.5l6.1-.7z'/%3E%3C/svg%3E") left center / 1.1em 1.1em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L1.3 7.5l6.1-.7z'/%3E%3C/svg%3E") left center / 1.1em 1.1em repeat-x;
}
.home-reass.is-scrolling .home-reass-track {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 0 var(--sp-l) 0 0;
  animation: home-reass-defile 32s linear infinite;
}
.home-reass.is-scrolling .home-reass-track:first-child {
  padding-left: var(--side);
}
.home-reass.is-scrolling .home-reass-track + .home-reass-track {
  display: flex;
}
@keyframes home-reass-defile {
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .home-reass.is-scrolling {
    overflow-x: auto;
  }
  .home-reass.is-scrolling .home-reass-track {
    animation: none;
  }
  .home-reass.is-scrolling .home-reass-track + .home-reass-track {
    display: none;
  }
}

/* ---------------------------------------------------------------- Pour qui (groupe POUR QUI)
   Titre et chapeau centrés, puis rail de cartes (assets/css/inc/rail.css) : photo en haut,
   question et lien « Découvrir » sur fond beige. Cinq cartes tiennent de front à partir de
   1440 px environ ; en dessous le rail défile (flèches, puis tirets ≤ 760 px). La carte
   entière est cliquable (lien étiré). */
.home-pq {
  padding: var(--sp-xl) 0;
}
.home-pq-head {
  padding: 0 var(--page-edge) 8px;
  text-align: center;
}
.home-pq-lead {
  margin: var(--sp-m) auto 0;
  color: var(--c-ink);
  font-size: clamp(14.5px, 12.6px + 0.47vw, 21.6px); /* tient sur 2 lignes à 390 px (maquette) */
  line-height: 1.3;
  text-wrap: balance;
}
.home-pq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 max(240px, (100% - 4 * var(--rail-gap)) / 5);
  max-width: 300px; /* demande d'Antoine (14/10) */
  overflow: hidden;
  border-radius: clamp(18px, 15.7px + 0.59vw, 27px);
  background: var(--c-beige);
  text-align: left;
}
/* Rangée plus étroite que la page : centrée. Marges auto et non justify-content, qui
   rognerait le début du rail quand il déborde. */
.home-pq-card:first-child {
  margin-left: auto;
}
.home-pq-card:last-child {
  margin-right: auto;
}
.home-pq-media {
  position: relative; /* tampon « En cours de création » */
  overflow: hidden;
  aspect-ratio: 349 / 312;
}
.home-pq-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Survol : léger zoom de la photo, rogné par son cadre (cf. tediber). */
@media (hover: hover) {
  .home-pq-img,
  .home-fq-img {
    transition: transform 0.5s ease;
  }
  .home-pq-card:hover .home-pq-img,
  .home-fq-card:hover .home-fq-img {
    transform: scale(1.03);
  }
}
.home-pq-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(16px, 10.4px + 1.438vw, 38px);
}
.home-pq-q {
  margin: 0 0 var(--sp-l);
  color: var(--c-ink);
  font-size: clamp(16px, 14.5px + 0.392vw, 22px);
  font-weight: 700; /* PlusJakartaSans-Bold au PSD */
  line-height: 1.22;
}
.home-pq-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--c-ink);
  font-size: clamp(15px, 13.3px + 0.431vw, 21.6px);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.home-pq-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.home-pq-card:hover .home-pq-link,
.home-pq-link:focus-visible {
  color: var(--c-accent);
}
/* Mobile : --sp-xl surestime l'écart sous la bande de réassurance. Écarts relevés sur
   home-mobile.jpg, d'encre à encre : bande → titre 32 px, chapeau → cartes 21 px. */
@media (max-width: 760px) {
  .home-pq {
    padding-top: 18px;
  }
  .home-pq-head {
    padding-bottom: 20px;
  }
}

/* ---------------------------------------------------------------- Avis Vérifiés
   Carrousel des avis marque de Skeepers (inc/shooldy-avis.php), chargé à l'approche : la
   hauteur de la maquette est réservée pour ne pas décaler la page à son arrivée. */
.home-avis {
  padding: 0 var(--page-edge) var(--sp-xl);
}
.avis-widget--carousel {
  min-height: clamp(220px, 12vw, 230px);
}

/* ---------------------------------------------------------------- Produit (groupe PRODUIT)
   Bloc beige aux bords de page ; à gauche la carte quiz et la carte brevet empilées, puis une
   carte par coussin (photo, nom, prix WooCommerce, bouton vers la fiche). Le titre de section
   n'existe qu'en mobile (la carte quiz porte le sien au-dessus).
   Annotation de la photo (« Deux coussins » et flèche) : placée en % de la case photo, d'après
   le PSD (cases de 544 × 418 à 1920) ; la flèche est posée par son coin haut gauche et tournée.
   Cotes : home-desktop.jpg à 90 % (décision 4), home-mobile.jpg (780 = 2 × 390). */
.home-pr {
  padding: 0 var(--page-edge) var(--sp-xl);
}
.home-pr-box {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); /* 625 / 544 / 542 au PSD */
  grid-template-rows: auto auto;
  gap: clamp(14px, 1.75vw, 34px);
  padding: clamp(14px, 2.2vw, 42px);
  border-radius: var(--r-bloc);
  background: var(--c-beige);
  color: var(--c-ink);
}
.home-pr-head {
  display: none;
}
.home-pr-side,
.home-pr-card {
  border-radius: var(--r-bloc);
  background: var(--c-white);
}
.home-pr-side {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 38px);
  padding: clamp(24px, 3vw, 58px) clamp(18px, 3.4vw, 66px);
  text-align: center;
}
.home-pr-quiz {
  grid-row: 1;
}
.home-pr-brevet {
  grid-row: 2;
}
.home-pr-quiz .title {
  margin-bottom: calc(-0.4 * clamp(18px, 2vw, 38px)); /* titre plus près du texte que du bouton */
}
.home-pr-quiz .title h3 {
  line-height: 1.1;
}
.home-pr-text {
  margin: 0;
  font-size: clamp(14px, 11.5px + 0.46vw, 20.25px); /* 22,5 px au PSD à 90 % */
  line-height: 1.25;
  text-wrap: balance;
}
.home-pr-brevet .home-pr-text {
  max-width: 22em; /* 3 lignes de la maquette à 1920 */
  text-wrap: wrap;
}
.home-pr-text strong {
  font-weight: 700;
}
.home-pr-text u,
.home-pr-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.home-pr-logos {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 0.45vw, 9px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-pr-logos img {
  display: block;
  width: clamp(46px, 4.3vw, 82px);
  height: auto;
}
.home-pr-card {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.home-pr-card.is-1 { grid-column: 2; }
.home-pr-card.is-2 { grid-column: 3; }
.home-pr-media {
  --note-x: 63.1%;
  --note-y: 17.5%;
  --arrow-x: 71.2%;
  --arrow-y: 39.4%;
  --arrow-w: 12.4%;
  --arrow-r: -80deg;
  position: relative;
  aspect-ratio: 544 / 418;
  container-type: inline-size;
  overflow: hidden;
}
.home-pr-card.is-2 .home-pr-media {
  /* Photo unique `shooldy-relax-allongee` (03/11, 1285 × 1224 en cover) : la note se pose sur le haut du coussin, la flèche vise le coussin sous les mains. */
  --note-x: 22%;
  --note-y: 10.5%;
  --arrow-x: 24.5%;
  --arrow-y: 26%;
  --arrow-w: 13%;
  --arrow-r: -35.7deg;
}
/* Photo et titre cliquables vers la fiche (22/10) : le lien remplit le média, l'annotation et le badge restent au-dessus. */
.home-pr-link {
  position: absolute;
  inset: 0;
  display: block;
}
.home-pr-title-link {
  color: inherit;
  text-decoration: none;
}
.home-pr-title-link:hover,
.home-pr-title-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.home-pr-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
}
.home-pr-note {
  position: absolute;
  top: var(--note-y);
  left: var(--note-x);
  margin: 0;
  color: var(--c-white);
  font-size: max(11px, 2.98cqw); /* 18 px au PSD dans une case de 544 */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-0.2em); /* le PSD donne le haut des capitales */
}
.home-pr-arrow {
  position: absolute;
  top: var(--arrow-y);
  left: var(--arrow-x);
  width: var(--arrow-w);
  height: auto;
  transform: rotate(var(--arrow-r));
  transform-origin: 0 0;
}
/* Animation (home.js, classe is-anim posée seulement si elle jouera) : la légende entre en
   fondu, puis la flèche se découvre de droite à gauche dans son repère, soit de sa queue vers
   sa pointe une fois tournée. Transitions portées par l'état ouvert seulement. */
.home-pr-media.is-anim .home-pr-note {
  opacity: 0;
  transform: translateY(calc(-0.2em + 8px));
}
.home-pr-media.is-anim .home-pr-arrow {
  clip-path: inset(0 0 0 100%);
}
.home-pr-media.is-on .home-pr-note {
  opacity: 1;
  transform: translateY(-0.2em);
  transition: opacity 0.45s ease-out 0.1s, transform 0.45s ease-out 0.1s;
}
.home-pr-media.is-on .home-pr-arrow {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.45s;
}
/* Survol (souris seulement, cf. tediber) : le produit seul vient en fondu par-dessus la photo,
   les deux grossissent un peu, l'annotation s'efface. Rien sur écran tactile. */
.home-pr-img.is-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.home-pr-annot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@media (hover: hover) {
  /* Seul le produit bouge : deux images zoomées l'une sur l'autre saccadaient (15/10). */
  .home-pr-img.is-hover {
    transition: opacity 0.4s ease, transform 0.4s linear; /* réglé par Antoine (15/10) */
  }
  .home-pr-annot {
    transition: opacity 0.3s ease;
  }
  .home-pr-card:hover .home-pr-img.is-hover {
    opacity: 1;
    transform: scale(1.03);
  }
  .home-pr-card:hover .home-pr-media:has(.is-hover) .home-pr-annot {
    opacity: 0;
  }
}
.home-pr-pre {
  position: absolute;
  top: clamp(10px, 1.2vw, 22px);
  left: clamp(10px, 1.2vw, 22px);
  padding: 0.35em 0.9em;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 600;
}
.home-pr-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(18px, 1.8vw, 35px) clamp(16px, 1.5vw, 29px) clamp(18px, 2.3vw, 44px) clamp(16px, 2vw, 39px);
}
.home-pr-title {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
}
.home-pr-sub {
  margin: 0.45em 0 0;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}
.home-pr-desc {
  margin: clamp(10px, 1.2vw, 22px) 0 0;
  max-width: 24em;
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.45;
}
.home-pr-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: clamp(12px, 1.1vw, 20px);
}
.home-pr-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 16px);
  padding-top: clamp(4px, 0.6vw, 12px);
}
.home-pr-avis {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}
.home-pr-avis .home-reass-stars {
  flex: none;
  font-size: 1.15em;
}
.home-pr-price {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 800;
  line-height: 1;
}
.home-pr-foot .btn {
  flex: none;
}
/* 761-1199 : quiz et brevet côte à côte, puis les deux coussins. */
@media (max-width: 1199px) {
  .home-pr-box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .home-pr-side,
  .home-pr-card {
    grid-row: auto;
    grid-column: auto;
  }
  .home-pr-card.is-1,
  .home-pr-card.is-2 {
    grid-column: auto;
  }
  .home-pr-foot {
    flex-wrap: wrap;
  }
}
/* ≤ 760 : composition mobile (titre de section, coussins d'abord, quiz sans titre). */
@media (max-width: 760px) {
  .home-pr-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 24px 12px 12px;
    border-radius: 18px;
  }
  .home-pr-head {
    display: block;
    order: -2;
    margin-bottom: 4px;
    text-align: center;
  }
  .home-pr-card {
    order: -1;
  }
  .home-pr-side,
  .home-pr-card {
    border-radius: 14px;
  }
  .home-pr-side {
    gap: 16px;
    padding: 26px 18px 30px;
  }
  .home-pr-quiz .title {
    display: none;
  }
  .home-pr-text {
    font-size: 14px;
    line-height: 1.35;
  }
  .home-pr-logos img {
    width: 38px;
  }
  .home-pr-media {
    aspect-ratio: 350 / 230;
    --note-x: 62.9%;
    --note-y: 11%;
    --arrow-x: 71.5%;
    --arrow-y: 32%;
    --arrow-w: 11%;
  }
  .home-pr-card.is-2 .home-pr-media {
    --note-x: 22%;
    --note-y: 4%;
    --arrow-x: 24.5%;
    --arrow-y: 22%;
    --arrow-w: 12%;
  }
  .home-pr-note {
    font-size: 11px;
  }
  .home-pr-body {
    padding: 18px 16px 18px;
  }
  .home-pr-title {
    font-size: 19px;
  }
  .home-pr-sub {
    font-size: 11px;
  }
  .home-pr-desc {
    margin-top: 10px;
    font-size: 13.5px;
  }
  .home-pr-foot {
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  .home-pr-avis {
    font-size: 11px;
  }
  .home-pr-price {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------- Avantages (groupe AVANTAGES)
   Deux cartes photo côte à côte (1164 et 679 de large au PSD). La première est une photo
   annotée : la « scène » .home-av-stage a les proportions de la photo (1536 × 1024) et
   reprend son cadrage de la maquette ; étiquettes et pointillés y sont placés en % de la
   photo, donc restent sur l'épaule et le coude à toutes les largeurs. Les étiquettes
   grandissent avec la scène (cqw), avec un plancher de lisibilité.
   Cotes : home-desktop.jpg (photo à 0,866) et home-mobile.jpg (0,932), relevées dans
   home-*-calques.txt. Une autre photo devra garder ce cadrage (épaule 506,576 ; coude 742,666). */
.home-av {
  display: flex;
  gap: var(--page-edge);
  padding: 0 var(--page-edge) var(--sp-xl);
}
.home-av-main,
.home-av-side {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-bloc);
  background: var(--c-beige);
}
.home-av-main {
  flex: 1164 1 0;
  aspect-ratio: 1164 / 811;
}
.home-av-side {
  flex: 679 1 0;
}
.home-av-stage {
  position: absolute;
  top: -4.686%;
  left: -6.014%;
  width: 114.26%;
  aspect-ratio: 3 / 2;
  container-type: inline-size;
}
.home-av-img,
.home-av-img2 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-av-img2 {
  position: absolute;
  inset: 0;
  object-position: 69% 50%;
}
.home-av-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--c-white);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0 8;
}
.home-av-lines-mob {
  display: none;
}
.home-av-labels {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-av-label {
  --x: 32.33%;
  --y: 25.6%;
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  text-align: left;
  align-items: center;
  gap: 0.9em;
  padding: 0.95em 2em 0.95em 1.25em;
  border-radius: 0.6em;
  background: var(--c-beige);
  color: var(--c-ink);
  font-size: max(11px, 1.504cqw); /* 20 px à 1920 (PlusJakartaSans 14,7 pt × 1,36) */
  line-height: 1.15;
  white-space: nowrap;
}
.home-av-label:nth-child(2) {
  --x: 59.7%;
  --y: 23.23%;
}
.home-av-label:nth-child(3) {
  --x: 63.68%;
  --y: 67.67%;
}
.home-av-label:nth-child(4) {
  --x: 10%; /* tissu : en bas à gauche, sur les draps (Philippe, 22/10) */
  --y: 78%;
}
.home-av-label p {
  margin: 0;
}
.home-av-label strong {
  font-weight: 700;
}
.home-av-ico {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4.25em;
  height: 4.25em;
  border-radius: 50%;
  background: var(--c-accent);
}
.home-av-ico img {
  width: 2.4em;
  height: 2.4em;
}
.home-av-ico.is-billes {
  background: none;
}
.home-av-ico.is-billes img {
  width: 100%;
  height: 100%;
}
/* Animation (home.js, classe is-anim posée seulement si elle jouera) : chaque étiquette
   attend son pointillé, apparaît réduite à sa pastille, puis se déplie vers la droite.
   Transitions portées par l'état ouvert seulement (rien ne s'anime au chargement), et texte
   en visibility: hidden tant que l'étiquette est repliée : avec l'opacité seule, Chrome
   laissait des fantômes du texte de la 1re étiquette à côté de la pastille. */
.home-av-stage.is-anim .home-av-label {
  opacity: 0;
  clip-path: inset(0 calc(100% - 6.75em) 0 0 round 0.6em); /* pastille de 4,25 em à 1,25 em du bord : 1,25 em de chaque côté */
  transform: scale(0.8);
  transform-origin: 3.375em 50%; /* centre de la pastille */
}
.home-av-stage.is-anim .home-av-label.is-on {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 0.6em);
  transform: none;
  transition: opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), clip-path 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) 0.57s; /* 0,35 s de plus sur la pastille (Antoine, 14/10) */
}
.home-av-stage.is-anim .home-av-label p {
  visibility: hidden;
  opacity: 0;
}
.home-av-stage.is-anim .home-av-label.is-on p {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0.62s, opacity 0.3s ease-out 0.62s;
}
/* Sous 1000 px, côte à côte, le plancher de 11 px ferait déborder les étiquettes de la
   carte : les deux photos s'empilent, la première garde la composition desktop. */
@media (max-width: 999px) {
  .home-av {
    flex-direction: column;
  }
  .home-av-main,
  .home-av-side {
    flex: none;
  }
  .home-av-side {
    aspect-ratio: 748 / 460;
  }
  .home-av-img2 {
    object-position: 50% 50%;
  }
}
/* Vidéo de la seconde carte (au-dessus de 760 px) : boucle muette posée sur la photo, qui
   sert d'attente ; home.js la charge et la lance quand elle entre à l'écran. Bouton pause
   discret en bas à droite (pause : deux barres ; en pause : triangle). */
.home-av-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%; /* centrée dans la case (demande d'Antoine, 14/10) */
}
.home-av-pause {
  position: absolute;
  right: clamp(10px, 1.2vw, 22px);
  bottom: clamp(10px, 1.2vw, 22px);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--c-ink);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, background-color 0.2s;
}
.home-av-pause:hover,
.home-av-pause:focus-visible {
  background: var(--c-white);
  opacity: 1;
}
.home-av-pause::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 12px;
  background: linear-gradient(90deg, currentColor 0 3.5px, transparent 3.5px 6.5px, currentColor 6.5px);
}
.home-av-pause[aria-pressed="true"]::before {
  left: 2px;
  width: 11px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.home-av-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Vidéo cachée tant qu'elle n'a pas démarré (la photo d'attente est sa dernière image). En mobile,
   elle attend le bouton de lecture, centré sur la photo (home.js, 03/11). */
.home-av-side:not(.is-started) .home-av-video {
  visibility: hidden;
}
@media (max-width: 760px) {
  .home-av-side:not(.is-started) .home-av-pause {
    width: 52px;
    height: 52px;
    right: 50%;
    bottom: 50%;
    background: rgba(255, 255, 255, 0.8);
    opacity: 1;
    transform: translate(50%, 50%);
  }
  .home-av-side:not(.is-started) .home-av-pause::before {
    left: 4px;
    width: 15px;
    height: 18px;
  }
}
/* Mobile : photo annotée en portrait (747 × 864), étiquettes et pointillés verticaux de
   home-mobile.jpg. Étiquette 2 calée sur son bord droit et étiquette 3 sur son bord bas,
   pour rester dans la carte quand le plancher de 11 px les agrandit. */
@media (max-width: 760px) {
  .home-av-main {
    aspect-ratio: 747 / 864;
  }
  .home-av-stage {
    top: 0;
    left: -26.64%;
    width: 191.57%;
  }
  .home-av-lines-desk {
    display: none;
  }
  .home-av-lines-mob {
    display: inline;
  }
  .home-av-label {
    --x: 18.87%; /* photo du 21/10 : os décalés de +14 px (épaule) et +18 px (coude) sur 1536 */
    --y: 3.77%;
    font-size: clamp(11px, 1.398cqw, 20px);
  }
  .home-av-label:nth-child(2) {
    --y: 22.56%;
    left: auto;
    right: 34.1%; /* 33.56 % débordait de 2 à 5 px à droite de la carte depuis la photo du 21/10 */
  }
  .home-av-label:nth-child(3) {
    --x: 15.58%;
    top: auto;
    bottom: 11.64%;
  }
  .home-av-label:nth-child(4) {
    top: auto;
    left: auto;
    right: 34.1%;
    bottom: 11.64%; /* sur la ligne de la 3e, calée à droite comme la 2e */
  }
}

/* ---------------------------------------------------------------- 30 nuits (groupe 30 NUITS)
   Photo pleine largeur aux proportions du PSD (1920 × 802) ; titre et barre des coussins
   en haut à droite, tampon en bas à droite, placés en vw comme sur la photo. Tout est
   empilé dans la même case de grille : la section grandit si le contenu dépasse la photo.
   Mobile (≤ 760 px) : carte arrondie en retrait, titre sur la photo, barre en encart blanc
   qui chevauche le bas de la carte.
   Une version par coussin (data-nu, home.js) : photos empilées en fondu, logo et tampon en
   faces retournées, un titre par coussin. */
.home-nu {
  display: grid;
  grid-template: 1fr / 1fr;
  aspect-ratio: 1920 / 802;
  margin-bottom: var(--sp-xl);
}
.home-nu-media,
.home-nu-content,
.home-nu-logo,
.home-nu-badge {
  grid-area: 1 / 1;
}
.home-nu-media {
  display: grid;
  overflow: hidden;
}
.home-nu-pic {
  display: block;
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.home-nu-pic.is-on {
  opacity: 1;
}
.home-nu-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
}
.home-nu-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: start;
  padding: 4.3vw 5.5vw var(--sp-l) var(--side);
}
.home-nu-title {
  padding-right: 0.7vw;
  text-align: right;
}
/* PSD : 59,5 px (gras et italique de même taille), soit 53,5 px à 90 %. Ombre légère : le
   titre blanc est posé sur un mur clair. */
.home-nu-title.display > * {
  font-size: clamp(30.6px, 24.8px + 1.497vw, 53.5px);
  text-shadow: 0 1px 18px rgba(35, 34, 35, 0.22);
}
/* Message du coussin choisi (29/10), sous le titre : taille d'accroche à toutes les largeurs. */
.home-nu-title.display > .home-nu-msg {
  margin-top: var(--sp-xs);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-text);
}
.home-nu-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--sp-m);
  padding: 6px 9px;
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--sh-bar);
}
/* Les coussins côte à côte : boutons radio habillés en pastilles. Le coussin choisi est
   encadré de turquoise sur fond blanc, avec une coche ; l'autre est posé sur un gris clair,
   texte atténué, et s'allume au survol pour inviter à cliquer. */
.home-nu-pick {
  display: flex;
  flex: none;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.home-nu-choice {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5em;
  min-height: var(--btn-h);
  padding: 0 1.1em 0 1em;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  background: rgba(48, 49, 67, 0.06);
  color: rgba(48, 49, 67, 0.72);
  font-size: var(--fs-field);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.home-nu-choice strong {
  font-weight: 700;
}
/* Coche : un angle tourné, qui ne prend sa place que sur le coussin choisi. */
.home-nu-choice::before {
  content: '';
  flex: none;
  width: 0;
  height: 0.55em;
  margin-right: -0.5em;
  border: solid var(--c-accent);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translateY(-0.1em) rotate(45deg);
  transition: width 0.25s ease, margin-right 0.25s ease, opacity 0.25s ease;
}
.home-nu-choice.is-on {
  border-color: var(--c-accent);
  background: var(--c-white);
  color: var(--c-ink);
  cursor: default;
}
.home-nu-choice.is-on::before {
  width: 0.32em;
  margin-right: 0;
  opacity: 1;
}
.home-nu-choice:not(.is-on):hover {
  border-color: rgba(8, 184, 182, 0.55);
  background: var(--c-white);
  color: var(--c-ink);
}
.home-nu-choice:has(.home-nu-radio:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
/* Le radio natif reste cliquable et focalisable sous la pastille, sans être peint. */
.home-nu-radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.home-nu-btn.btn {
  flex: none;
  width: clamp(236px, 16vw, 247px);
}
.home-nu-btn[hidden] {
  display: none;
}
.home-nu-badge {
  position: relative;
  align-self: end;
  justify-self: end;
  width: clamp(96px, 9.8vw, 189px);
  margin: 0 4.6vw 1.9vw 0;
}
/* Logo du coussin, en bas à gauche (PSD : 194 px à 64 px du bord). */
.home-nu-logo {
  position: relative;
  align-self: end;
  justify-self: start;
  width: clamp(110px, 9.1vw, 175px);
  margin: 0 0 1.9vw 3.3vw;
}
/* Faces retournées (logo, tampon) : la face allumée est à plat ; les autres attendent
   retournées d'un côté (-180°) et la face quittée part de l'autre (180°), si bien que les
   deux tournent dans le même sens. home.js remet ensuite la face quittée à -180° sans
   transition (elle est de dos dans les deux cas, donc invisible). */
.home-nu-flip {
  display: grid;
  perspective: 900px;
}
.home-nu-face {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.home-nu-face.is-on {
  transform: rotateY(0);
}
.home-nu-face.is-out {
  transform: rotateY(180deg);
}
.home-nu-t.is-in {
  animation: home-nu-in 0.6s ease both;
}
@keyframes home-nu-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-nu-pic,
  .home-nu-face {
    transition: none;
  }
  .home-nu-t.is-in {
    animation: none;
  }
}

/* 761-999 : photo plus haute (le tampon reste sous la barre), barre sur deux lignes. */
@media (min-width: 761px) and (max-width: 999px) {
  .home-nu {
    aspect-ratio: 1920 / 1000;
  }
}
/* Sous 1250 px : les deux coussins sur la première ligne, bouton pleine largeur sur la seconde. */
@media (min-width: 761px) and (max-width: 1249px) {
  .home-nu-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .home-nu-pick {
    justify-content: center;
  }
  .home-nu-btn.btn {
    width: auto;
  }
}

@media (max-width: 760px) {
  .home-nu {
    grid-template: auto auto / 1fr;
    aspect-ratio: auto;
    margin: 0 var(--page-edge); /* Questions suit avec son propre retrait (graphiste, 15/10) */
  }
  .home-nu-content {
    display: contents;
  }
  /* Arrondi tenu par clip-path : sous Chrome, overflow + border-radius cesse de rogner pendant
     le fondu des photos (calques composités) et l'angle redevenait droit, parfois pour de bon. */
  .home-nu-media {
    position: relative;
    aspect-ratio: 1.25 / 1;
    border-radius: var(--r-bloc);
    clip-path: inset(0 round var(--r-bloc));
  }
  /* Voile sombre en haut de la photo, sous le titre blanc. */
  .home-nu-media::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 45%;
    background: linear-gradient(180deg, rgba(35, 34, 35, 0.5) 0%, rgba(35, 34, 35, 0.22) 50%, rgba(35, 34, 35, 0) 100%);
    pointer-events: none;
  }
  /* Photo desktop en 1.25/1, sans zoom et recentrée : le coussin passe sous le titre et
     déborde moins sous le tampon (Antoine, 21/10 ; le zoom du 15/10 le remontait trop). */
  .home-nu-img {
    object-position: 76% 55%; /* Confort : glissé vers la gauche, dégagé du tampon */
  }
  /* Relax : source mobile dédiée (`image_mobile` de la ligne, 1.25/1, dézoomée, décalée à
     gauche et remontée, bande de tapis en bas sous la barre blanche) : rien à recadrer ici. */
  .home-nu-pic[data-nu="1"] .home-nu-img {
    object-position: 50% 50%;
  }
  .home-nu-title {
    position: relative;
    grid-area: 1 / 1;
    align-self: start;
    padding: 20px 16px 0;
    text-align: left;
  }
  .home-nu-title.display > * {
    font-size: clamp(27px, 7.2vw, 36px); /* PSD mobile : deux lignes, « 30 nuits pour l'essayer, » tenue sur la première */
  }
  .home-nu-title.display > * > i {
    display: block;
  }
  .home-nu-badge {
    margin: 0 12px 45px 0;
    width: 88px; /* 98 px à l'origine, -10 % (Antoine, 21/10) */
  }
  .home-nu-logo {
    display: none; /* absent de la planche mobile */
  }
  .home-nu-bar {
    position: relative;
    grid-area: 2 / 1;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: -36px 14px 0;
    padding: 16px 14px 14px;
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
  }
  .home-nu-pick,
  .home-nu-btn.btn {
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .home-nu-choice {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 0.6em;
    font-size: var(--fs-small);
    text-align: center;
    white-space: normal;
  }
  .home-nu-choice-p {
    display: none; /* sans le prix : le nom tient sur une ligne (Antoine, 21/10) */
  }
}

/* ---------------------------------------------------------------- Questions (groupe SCIENCE)
   Titre à gauche, « Voir nos FAQ » à droite, puis rail de cartes (rail.css) : photo,
   pastille de thème à cheval sur son bas, question, lien en pied de carte (toute la carte
   est cliquable). Cinq cartes de front à 1920 ; en dessous le rail défile.
   Mobile (≤ 760 px) : bouton en contour sous le rail, par la grille de la section. */
.home-fq {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--sp-xl) 0;
  text-align: left;
}
/* PSD : titre 72 px plus à droite que la première carte, bouton 22 px en retrait du bord. */
.home-fq-head {
  padding-left: var(--title-x);
}
.home-fq-btn {
  min-width: clamp(180px, 140px + 6.5vw, 265px);
  margin-right: calc(var(--page-edge) + 1.15vw);
}
.home-fq-rail {
  grid-column: 1 / -1;
  margin-top: var(--sp-xs);
}
.home-fq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 max(240px, (100% - 4 * var(--rail-gap)) / 5);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: clamp(18px, 15.7px + 0.59vw, 27px);
  background: var(--c-white);
}
.home-fq-media {
  position: relative;
  aspect-ratio: 345 / 325;
  background: var(--c-beige);
}
/* Zoom au survol rogné en haut et sur les côtés ; le bas reste ouvert pour la pastille, et
   l'image grossit depuis son bord bas pour ne pas déborder sur le texte. */
.home-fq-media {
  clip-path: inset(0 0 -100px 0);
}
.home-fq-img {
  transform-origin: 50% 100%;
}
.home-fq-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pastille : 18 px gras à 1920 (14,7 × 1,36 × 90 %), centrée sur le bas de la photo. */
.home-fq-tag {
  position: absolute;
  bottom: 0;
  left: 7.5%;
  padding: 0 2.1em;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: clamp(11px, 9.4px + 0.45vw, 18px);
  font-weight: 700;
  line-height: 2.55em;
  white-space: nowrap;
  transform: translateY(50%);
}
.home-fq-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(34px, 26px + 1.5vw, 54px) clamp(16px, 12.6px + 0.9vw, 31px) clamp(22px, 14px + 1.6vw, 45px);
}
.home-fq-q {
  margin: 0 0 var(--sp-l);
  color: var(--c-ink);
  font-size: clamp(16px, 14.5px + 0.392vw, 21.5px);
  font-weight: 500; /* Poppins Medium au PSD, Plus Jakarta Sans ici comme le reste du site */
  line-height: 1.28;
}
.home-fq-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--c-ink);
  font-size: clamp(15px, 13.3px + 0.431vw, 19.8px);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.home-fq-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.home-fq-card:hover .home-fq-link,
.home-fq-link:focus-visible {
  color: var(--c-accent);
}
@media (max-width: 760px) {
  .home-fq {
    grid-template-columns: 1fr;
  }
  .home-fq-head {
    padding: 0 var(--page-edge) var(--sp-m) var(--title-x);
  }
  .btn.home-fq-btn {
    grid-row: 3;
    margin: var(--sp-l) var(--page-edge) 0;
  }
  .home-fq-rail {
    grid-column: 1;
    margin-top: 0;
  }
  /* Planche mobile : pastille plus serrée (≈ 55 × 22 px pour « QUI ? »). */
  .home-fq-tag {
    padding: 0 1.35em;
    line-height: 2.1em;
  }
}

/* ---------------------------------------------------------------- Blog (06/11)
   Rail de la section Questions (classes home-fq-*) : 3 articles de front, photo paysage,
   date, titre, extrait de 15 mots, lien en pied de carte. */
.home-bl .home-fq-card {
  flex-basis: max(260px, (100% - 2 * var(--rail-gap)) / 3);
}
.home-bl .home-fq-media {
  aspect-ratio: 16 / 10;
}
.home-bl .home-fq-tag {
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-bl-date {
  margin-bottom: var(--sp-xs);
  color: var(--c-ink);
  opacity: 0.7;
  font-size: var(--fs-small);
}
.home-bl .home-fq-q {
  margin-bottom: var(--sp-s);
}
.home-bl-excerpt {
  margin: 0 0 var(--sp-l);
  font-size: var(--fs-text);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- FAQ (06/11)
   Carte beige, titre centré, questions (H2) en cartes blanches : la FAQ des landings (personae.css). */
.home-faq {
  max-width: var(--tunnel);
  margin-inline: auto;
  padding: 0 var(--page-edge) var(--sp-xl);
}
.home-faq-box {
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto;
  padding: clamp(32px, 3.2vw, 61px) var(--side) clamp(40px, 6vw, 115px);
  border-radius: var(--r-bloc);
  background: var(--c-beige);
  text-align: center;
}
.home-faq-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.4vw, 7px);
  max-width: 1176px;
  margin: clamp(24px, 3.3vw, 64px) auto 0;
  text-align: left;
}
.home-faq-item {
  border-radius: clamp(12px, 1vw, 18px);
  background: var(--c-white);
}
.home-faq-item summary {
  position: relative;
  display: block;
  padding: clamp(16px, 1.45vw, 28px) clamp(48px, 4.5vw, 86px) clamp(16px, 1.45vw, 28px) clamp(18px, 3.1vw, 60px);
  color: var(--c-ink);
  font-size: clamp(15px, 13.6px + 0.36vw, 21.6px);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.home-faq-item summary::-webkit-details-marker {
  display: none;
}
.home-faq-item summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: clamp(18px, 1.9vw, 36px);
  color: var(--c-accent);
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.2s;
}
.home-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.home-faq-item summary:hover {
  color: var(--c-accent);
}
.home-faq-item summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: inherit;
}
.home-faq-body {
  padding: 0 clamp(18px, 4.5vw, 86px) clamp(18px, 1.6vw, 30px) clamp(18px, 3.1vw, 60px);
  font-size: var(--fs-text);
  line-height: 1.5;
}
.home-faq-body > :first-child {
  margin-top: 0;
}
.home-faq-body > :last-child {
  margin-bottom: 0;
}
.home-faq-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.btn.home-faq-btn {
  margin-top: var(--sp-l);
}
@media (max-width: 760px) {
  .home-faq-box {
    padding-inline: 12px;
  }
}

/* ---------------------------------------------------------------- Presse (« Ils parlent de Shooldy »)
   ≥ 1200 px : titre à gauche, trois cartes à droite (65,2 % de la largeur au PSD, marge comprise) ;
   761-1199 : titre au-dessus, trois cartes sur toute la largeur ; ≤ 760 : cartes en rail
   avec tirets (rail.css). Pas de flèches : la maquette desktop n'en a pas.
   Sous les cartes, bandeau de logos qui défile en boucle (série doublée, -50 %). */
.home-ps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 65.2%; /* cartes + marge droite : 1252 px sur 1920 */
  align-items: start;
  padding: var(--sp-xl) 0 clamp(28px, 22px + 1.5vw, 61px);
  background: var(--c-beige);
  text-align: left;
}
.home-ps-head {
  padding-left: var(--title-x);
}
.home-ps-rail {
  --rail-pad: 0px;
  padding-right: calc(var(--page-edge) + 1.35vw); /* PSD : 51 px à droite */
}
.home-ps-rail .rail-track {
  container-type: inline-size;
  overflow: visible;
}
/* Format du PSD (386 × 382) en hauteur minimale et non en aspect-ratio : une carte étroite
   (1200-1300 px) s'allonge au lieu de laisser la citation passer sous le lien. */
.home-ps-card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: calc((100cqi - 2 * var(--rail-gap)) / 3 * 382 / 386); /* 100cqi = largeur du rail sans sa marge */
  padding: clamp(16px, 12px + 0.7vw, 26px) clamp(20px, 15px + 1.5vw, 43px) clamp(22px, 15px + 1.7vw, 50px);
  border-radius: clamp(18px, 15.7px + 0.59vw, 27px);
  background: var(--c-white);
}
/* Logos préparés dans une boîte de 81 px de haut (cote PSD) : la hauteur fixe la taille. */
.home-ps-logo {
  display: block;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  height: clamp(48px, 41.6px + 1.634vw, 73px);
  object-fit: contain;
  object-position: left center;
}
.home-ps-quote {
  margin: clamp(16px, 10px + 1.6vw, 39px) 0 var(--sp-l);
  color: var(--c-ink);
  font-size: var(--fs-text);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
}
.home-ps-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--c-ink);
  font-size: clamp(15px, 13.3px + 0.431vw, 19.8px);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.home-ps-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.home-ps-card:hover .home-ps-link,
.home-ps-link:focus-visible {
  color: var(--c-accent);
}

.home-ps-band {
  grid-column: 1 / -1;
  margin: var(--sp-l) var(--page-edge) 0;
  overflow: hidden;
}
.home-ps-band-track {
  display: flex;
  width: max-content;
  animation: home-ps-defile calc(var(--ps-n, 12) * 3s) linear infinite;
}
.home-ps-band:hover .home-ps-band-track {
  animation-play-state: paused;
}
.home-ps-band-list {
  --ps-gap: clamp(20px, 11.3px + 2.222vw, 54px);
  display: flex;
  flex: none;
  gap: var(--ps-gap);
  margin: 0;
  padding: 0 var(--ps-gap) 0 0;
  list-style: none;
}
.home-ps-band-list img {
  display: block;
  width: auto;
  height: clamp(38px, 23px + 3.856vw, 97px);
}
@media (max-width: 999px) {
  .home-ps-band-list img {
    height: calc(1.15 * clamp(38px, 23px + 3.856vw, 97px)); /* logos trop petits (graphiste, 15/10) */
  }
}
@keyframes home-ps-defile {
  to {
    transform: translateX(-50%);
  }
}
/* Sans mouvement : une seule série, centrée, sur plusieurs lignes au besoin. */
@media (prefers-reduced-motion: reduce) {
  .home-ps-band-track {
    width: auto;
    animation: none;
  }
  .home-ps-band-list {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
  }
  .home-ps-band-list[aria-hidden],
  .home-ps-band-list .is-dup {
    display: none;
  }
}
@media (max-width: 1199px) {
  .home-ps {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-ps-head {
    padding-bottom: var(--sp-l);
  }
  .home-ps-rail {
    --rail-pad: var(--page-edge);
    padding-right: 0;
  }
  /* Cartes larges : la hauteur suit le contenu, pas le format carré du PSD. */
  .home-ps-card {
    min-height: 0;
  }
  .home-ps-quote {
    margin-bottom: var(--sp-xl);
  }
}
@media (max-width: 760px) {
  .home-ps-head {
    padding: 0 var(--page-edge) var(--sp-m) var(--title-x);
  }
  .home-ps-rail .rail-track {
    overflow-x: auto;
  }
  /* Planche mobile : carte à 64 % de la largeur, la suivante dépasse à droite ; hauteur selon le contenu. */
  .home-ps-card {
    flex: 0 0 max(240px, 64%);
  }
}
/* Quatre articles ou plus (presse réelle du 28/10) : dès 1200 px le titre passe au-dessus et les cartes
   prennent toute la largeur ; de 761 à 1199 px, deux cartes par ligne. Le rail (≤ 760 px) ne change pas. */
@media (min-width: 1200px) {
  .home-ps:has(.home-ps-card:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-ps:has(.home-ps-card:nth-child(4)) .home-ps-head {
    padding-bottom: var(--sp-l);
  }
  .home-ps:has(.home-ps-card:nth-child(4)) .home-ps-rail {
    --rail-pad: var(--page-edge);
    padding-right: 0;
  }
  .home-ps:has(.home-ps-card:nth-child(4)) .home-ps-card {
    min-height: 0;
  }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .home-ps-rail .rail-track:has(> .home-ps-card:nth-child(4)) {
    flex-wrap: wrap;
  }
  .home-ps-rail .rail-track:has(> .home-ps-card:nth-child(4)) > .home-ps-card {
    flex: 1 1 calc(50% - var(--rail-gap));
  }
}

/* ---------------------------------------------------------------- Vidéo « Comment ça fonctionne ? » */
/* La fenêtre épouse la vidéo (attributs width/height du gabarit) : paysage bornée en largeur, portrait en hauteur. */
.home-video {
  width: fit-content;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: #000;
  overflow: visible;
}
.home-video::backdrop {
  background: rgba(0, 0, 0, 0.82);
}
.home-video video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1200px);
  max-height: 85vh;
  border-radius: var(--r-card);
}
.home-video-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.home-video-close::before,
.home-video-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 2px;
  background: var(--c-white);
  transform: rotate(45deg);
}
.home-video-close::after {
  transform: rotate(-45deg);
}