/*******************
  COMPARATIF (refonte, P2 puis P3)
  Sorti de home.css le 15/10/2026 : partagé par l'accueil et la fiche produit
  (parts/comparatif.php). L'animation des pastilles reste dans home.js : sur la fiche,
  sans la classe is-anim, le tableau s'affiche d'emblée.
*******************/

/* ---------------------------------------------------------------- Comparatif (groupe COUSSIN NORMAL)
   Intro (titre, deux arguments, boutons) à gauche, tableau noté sur 5 à droite. Le tableau
   est une grille : une piste par colonne, les lignes en display: contents ; les colonnes
   en carte (.home-cp-col) sont des fonds qui couvrent toutes les lignes, sous les cellules,
   pour que les filets traversent les cartes comme sur la maquette.
   Cotes : home-desktop.jpg à 90 % (décision 4), home-mobile.jpg (780 = 2 × 390). */
.home-cp {
  --cp-dot: clamp(10px, 6.8px + 0.86vw, 23.4px);
  --cp-row: clamp(52px, 46.4px + 1.12vw, 68px);
  --cp-line: rgba(48, 49, 67, 0.3);
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.85fr); /* titre de la maquette sur 2 lignes à 1920 */
  column-gap: var(--sp-l);
  align-items: start;
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 var(--side) var(--sp-xl);
  color: var(--c-ink);
  text-align: left;
}
.home-cp-intro {
  padding-top: clamp(24px, 4vw, 75px);
}
.home-cp-points {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: clamp(24px, 2.6vw, 50px) 0 0;
  padding: 0;
  list-style: none;
}
.home-cp-points li {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.15vw, 22px);
}
.home-cp-point-img {
  flex: 0 0 auto;
  width: clamp(56px, 3.96vw, 76px);
  height: auto;
}
.home-cp-points p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.22;
}
.home-cp-points strong {
  font-weight: 600;
}
.home-cp-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 390px;
  margin-top: clamp(28px, 2.6vw, 45px);
}
.home-cp-btn-mob {
  display: none;
}

/* Tableau */
.home-cp-table {
  display: grid;
  grid-template-columns: minmax(0, 1.37fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.19fr);
  grid-template-rows: repeat(var(--cp-n), auto);
}
.home-cp-row {
  display: contents;
}
.home-cp-col {
  grid-row: 1 / -1;
  margin: 0 6px;
  border: 1px solid #e0e1e5;
  border-radius: var(--r-card-lg);
}
.home-cp-col.is-1 { grid-column: 2; margin-top: clamp(18px, 2.4vw, 46px); }
.home-cp-col.is-2 { grid-column: 3; margin-top: clamp(18px, 2.4vw, 46px); }
.home-cp-col.is-3 {
  grid-column: 4;
  border: 0;
  background: #e1efef;
}
/* Place explicite : les fonds de colonne occupent déjà les cases, le placement automatique
   pousserait les cellules ailleurs. --r est posé sur chaque ligne. */
.home-cp-cell {
  grid-row: var(--r);
  position: relative; /* au-dessus des fonds de colonne */
  display: flex;
  align-items: center;
  min-height: var(--cp-row);
  border-top: 1px solid var(--cp-line);
}
.home-cp-cell.is-0 { grid-column: 1; }
.home-cp-cell.is-1 { grid-column: 2; }
.home-cp-cell.is-2 { grid-column: 3; }
.home-cp-cell.is-3 { grid-column: 4; }
/* Filet arrêté au bord de la carte Shooldy (6 px avant la case) par un fond et non par une
   marge : la case garde toute sa largeur, les points restent centrés sur la carte. */
.home-cp-row:not(.is-head) .home-cp-cell.is-3 {
  border-top: 0;
  background: linear-gradient(var(--cp-line), var(--cp-line)) left top / calc(100% - 6px) 1px no-repeat;
}
.home-cp-cell.is-1,
.home-cp-cell.is-2,
.home-cp-cell.is-3 {
  justify-content: center;
}
.home-cp-row:last-child .home-cp-cell {
  min-height: calc(var(--cp-row) + clamp(10px, 1.1vw, 22px));
  padding-bottom: clamp(10px, 1.1vw, 22px);
}
.home-cp-cell.is-crit {
  gap: clamp(12px, 1.6vw, 30px);
  padding: 8px 12px 8px clamp(12px, 1.6vw, 30px);
}
/* Dernière ligne : la marge basse s'ajoute à toutes les cellules ; sans haut de 8 px ici, le
   critère reste centré sur ses ronds (« Respirant » tombait de 4 px). */
.home-cp-row:last-child .home-cp-cell.is-crit {
  padding-top: 0;
}
.home-cp-cell.is-crit {
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.22;
}
.home-cp-ico {
  flex: 0 0 auto;
  width: clamp(24px, 1.67vw, 32px);
  height: auto;
}
/* En-tête : libellé puis oreiller ; colonne Shooldy plus haute (logo puis coussin). */
.is-head .home-cp-cell {
  flex-direction: column;
  justify-content: flex-start;
  border-top: 0;
  padding: clamp(36px, 4.17vw, 80px) 8px clamp(10px, 1vw, 18px);
  text-align: center;
}
.is-head .home-cp-cell.is-3 {
  padding-top: clamp(18px, 2vw, 40px);
}
.home-cp-label {
  font-size: var(--fs-text);
  line-height: 1.22;
}
/* Visuel centré dans la place laissée sous le libellé : les oreillers, cadrés différemment
   (blanc sous le moelleux, ferme au ras), s'alignent sur leur milieu (Antoine, 15/10). */
.home-cp-visual {
  display: grid;
  flex: 1;
  place-items: center;
  width: 100%;
  margin-top: clamp(8px, 1.2vw, 22px);
}
.home-cp-pillow {
  grid-area: 1 / 1;
  width: min(100%, clamp(90px, 9.6vw, 184px));
  height: auto;
  mix-blend-mode: multiply; /* fond blanc du moelleux fondu dans la carte */
}
/* Colonne Shooldy : Confort et Relax en fondu toutes les 3 s (alterne.js). Sans JS ou sans
   mouvement : le premier visuel seul. */
.home-cp-visual.is-fade .home-cp-pillow {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.home-cp-visual.is-fade .home-cp-pillow.is-on {
  opacity: 1;
}
.home-cp-logo {
  width: min(100%, clamp(90px, 10.3vw, 198px));
  height: auto;
}
.home-cp-dots {
  display: flex;
  gap: 2px;
}
.home-cp-dots i {
  width: var(--cp-dot);
  height: var(--cp-dot);
  border: 1px solid #9ea1aa;
  border-radius: 50%;
  background: var(--c-white);
}
.home-cp-dots i.on {
  border-color: var(--c-accent);
  background: var(--c-accent);
}
/* Animation (home.js, classe is-anim posée seulement si elle jouera) : à l'apparition du
   tableau, les notes s'allument en vert ligne après ligne, rond après rond (--r : rang de la
   ligne, 2 pour la première note). Transitions portées par l'état allumé seulement. */
.home-cp-table.is-anim .home-cp-dots i.on {
  border-color: #9ea1aa;
  background: var(--c-white);
}
.home-cp-dots i:nth-child(2) { --k: 1; }
.home-cp-dots i:nth-child(3) { --k: 2; }
.home-cp-dots i:nth-child(4) { --k: 3; }
.home-cp-dots i:nth-child(5) { --k: 4; }
.home-cp-table.is-on .home-cp-dots i.on {
  border-color: var(--c-accent);
  background: var(--c-accent);
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
  transition-delay: calc((var(--r, 2) - 2) * 0.12s + var(--k, 0) * 0.08s);
  animation: home-cp-pop 0.4s ease-out both;
  animation-delay: calc((var(--r, 2) - 2) * 0.12s + var(--k, 0) * 0.08s);
}
@keyframes home-cp-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.3); }
}
.home-cp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sous 1200 px : intro au-dessus (arguments et boutons en ligne), tableau pleine largeur. */
@media (max-width: 1199px) {
  .home-cp {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-l);
  }
  .home-cp-points {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--sp-l);
  }
  .home-cp-btns {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
  }
}
/* Mobile (home-mobile.jpg) : sans icônes, un seul bouton sous le tableau, oreiller au-dessus
   du libellé ; colonne Shooldy plus étroite. */
@media (max-width: 760px) {
  .home-cp {
    --cp-dot: 9px; /* 18 px sur la planche mobile */
    --cp-row: 42px;
    --cp-line: rgba(48, 49, 67, 0.15);
    row-gap: 24px;
    padding-inline: 16px;
  }
  .home-cp-intro {
    padding-top: 0;
  }
  .home-cp-points {
    flex-wrap: nowrap;
    column-gap: 12px;
    margin-top: 20px;
  }
  .home-cp-points li {
    flex: 1 1 0;
    gap: 10px;
  }
  .home-cp-point-img {
    width: 38px;
  }
  .home-cp-points p {
    font-size: 12px;
  }
}
/* Sous 600 px : un argument par ligne, picto à gauche du texte (Antoine, 03/11). */
@media (max-width: 599px) {
  .home-cp-points {
    flex-direction: column;
    gap: 12px;
  }
  .home-cp-points li {
    flex: 0 0 auto;
    gap: 12px;
  }
  .home-cp-points p {
    font-size: 13px;
  }
  .home-cp-btns,
  .home-cp-ico {
    display: none;
  }
  .home-cp-btn-mob {
    display: flex;
    width: 100%;
  }
  .home-cp-table {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); /* critères réduits de 10 % (Antoine, 14/10) */
  }
  .home-cp-dots {
    gap: 1px;
  }
  .home-cp-col {
    margin: 0;
    border-radius: 12px;
  }
  .home-cp-col.is-1,
  .home-cp-col.is-2 {
    border: 0;
  }
  .home-cp-col.is-3 {
    margin-left: 6px;
  }
  /* La carte touche le bord droit : filet sur toute la case, points centrés sur la carte. */
  .home-cp-cell.is-3 {
    padding-left: 6px;
  }
  .home-cp-row:not(.is-head) .home-cp-cell.is-3 {
    background-size: 100% 1px;
  }
  .home-cp-cell.is-crit {
    padding: 6px 6px 6px 0;
    font-size: 12.6px;
    font-weight: 500;
  }
  /* Libellés en haut comme en desktop (graphiste, 15/10), dans une boîte de deux lignes pour
     tous, logo compris : les visuels, centrés dans la place qui reste, s'alignent entre eux. */
  .is-head .home-cp-cell {
    gap: 6px;
    padding: 12px 2px 8px;
  }
  .is-head .home-cp-cell.is-3 {
    padding: 12px 6px 8px 12px;
  }
  .is-head .home-cp-cell.is-3 > * {
    max-width: 100%;
  }
  .home-cp-label,
  .home-cp-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px; /* deux lignes de 12 px */
  }
  .home-cp-label {
    font-size: 12px;
  }
  .home-cp-logo {
    width: 64px;
    height: 30px;
    object-fit: contain;
  }
  .home-cp-visual {
    margin-top: 0;
  }
  .home-cp-row:last-child .home-cp-cell {
    min-height: calc(var(--cp-row) + 8px);
    padding-bottom: 8px;
  }
}