/*******************
  PAGE « SHOOLDY, C'EST POUR QUI ? » (P5, tâche pour-qui, 19/10/2026)
  Maquette SHOOLDY_PAGE_PERSONAE_proposition_V2.png : PNG de 1990 px, desktop seul, sans PSD.
  Cotes mesurées sur le PNG, ramenées à 1920 px puis à 90 % (décision 4) : cote CSS ≈ PNG × 0,87.
  Gabarit page-pour-qui.php ; 30 nuits = composant de l'accueil (home.css, home.js) ;
  réassurance = bande du footer.
  Mobile dérivé des planches de l'accueil et de la fiche (décision 17) ; seuils par bloc,
  proposés à Antoine :
  - En-tête : cartes sur 3 colonnes, 2 sous 1100 px, 1 sous 640 px ; tampon réduit sous 760 px.
  - Profils : photo au-dessus du texte sous 900 px (toujours la photo d'abord) ;
    encarts « vous vivez / Shooldy vous apporte » empilés quand la colonne de texte fait
    moins de 540 px (container query : de 900 à ~1180 px de fenêtre, et sous 600 px).
*******************/

.cpq {
  color: var(--c-ink);
  text-align: left;
}
.cpq p {
  margin: 0;
}
/* Ancres (cartes « Voir le profil », repli de « Plus d'infos ») : défilement doux, sous le
   header fixe, comme les ancres de la fiche produit (product.css). */
html:has(.cpq) {
  scroll-padding-top: calc(var(--hdr-top) + var(--hdr-bar-h) + var(--hdr-bottom) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.cpq) {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------------------------- En-tête
   Fil d'Ariane (celui des landings, .pe-crumbs), puis carte beige bord à bord : texte à gauche
   (1060 px au PNG), tampon de 212 px en haut à droite, cartes des profils sur 3 colonnes. */
.cpq-head {
  padding: clamp(16px, 2.1vw, 40px) var(--page-edge) 0;
}
.cpq-crumbs {
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto clamp(14px, 1.5vw, 28px);
  padding: 0 clamp(8px, 3.2vw, 76px);
  font-size: calc(var(--fs-small) * 1.1);
  line-height: 1.7;
}
.cpq-crumbs [aria-current] {
  font-weight: 600;
}
.cpq-crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.cpq-crumbs a:hover {
  color: var(--c-accent);
}
.cpq-head-card {
  position: relative;
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto;
  padding: clamp(20px, 2.4vw, 46px) clamp(16px, 3.8vw, 76px) clamp(20px, 2.8vw, 54px);
  border-radius: var(--r-bloc);
  background: var(--c-beige);
}
.cpq-head-text {
  max-width: 920px;
  padding-left: clamp(4px, 0.6vw, 12px);
}
/* Texte sur un peu plus de la moitié de la carte (PNG : 1060 / 1990) ; pleine largeur en mobile. */
@media (min-width: 901px) {
  .cpq-head-text {
    max-width: min(920px, 56vw);
  }
}
.cpq-head-lead {
  margin-top: clamp(14px, 1.8vw, 34px) !important;
  font-size: var(--fs-lead);
  line-height: 1.45;
}
/* Tampon à deux faces « nuits » / « jours » de l'accueil (.home-nu-flip, home.css), retourné par
   alterne.js (retours du 28/10 : il ne faisait que tourner sur « nuits »). */
.cpq-badge {
  position: absolute;
  top: clamp(16px, 2.4vw, 44px);
  right: clamp(16px, 3.7vw, 71px);
  width: clamp(76px, 9.6vw, 184px);
}
.cpq-cards-title {
  margin: clamp(22px, 2.3vw, 44px) 0 clamp(16px, 2vw, 36px);
  padding-left: clamp(4px, 0.6vw, 12px);
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.cpq-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.05vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpq-card {
  position: relative;
  display: flex;
  gap: clamp(12px, 1.05vw, 20px);
  padding: clamp(10px, 0.8vw, 15px);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.cpq .cpq-card-img {
  flex: 0 0 40%;
  width: 40%;
  height: auto;
  aspect-ratio: 1.25;
  border-radius: 12px;
  object-fit: cover;
}
.cpq-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding-top: 2px;
}
.cpq-card-num {
  color: var(--c-accent);
  font-family: var(--f-italic);
  font-size: clamp(22px, 19px + 0.47vw, 28px);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}
.cpq-card-q {
  margin: 0.45em 0 0.9em !important;
  font-size: clamp(14.5px, 13.4px + 0.2vw, 17.4px);
  font-weight: 500;
  line-height: 1.3;
}
.cpq-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.55em;
  border-top: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: var(--fs-small);
  opacity: 0.85;
  text-decoration: none;
}
/* Flèche ↓ turquoise ; la carte entière est cliquable (lien étiré). */
.cpq-card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.cpq-card-link::after {
  content: '';
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.2em;
  background-color: var(--c-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v11M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v11M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s ease;
}
.cpq-card:hover .cpq-card-link,
.cpq-card-link:focus-visible {
  color: var(--c-accent);
  opacity: 1;
}
.cpq-card:hover .cpq-card-link::after {
  transform: translateY(3px);
}
@media (max-width: 1100px) {
  .cpq-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  /* Tampon réduit en haut à droite : le titre lui laisse la place. */
  .cpq-head-text .title {
    padding-right: calc(clamp(76px, 9.6vw, 184px) + 4px);
  }
}
@media (max-width: 640px) {
  .cpq-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .cpq .cpq-card-img {
    flex-basis: 34%;
    width: 34%;
  }
}

/* ---------------------------------------------------------------- Intro (titre centré) */
.cpq-intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--side) 0;
  text-align: center;
}
.cpq-intro-lead {
  margin-top: clamp(10px, 1vw, 18px) !important;
  font-size: var(--fs-lead);
  line-height: 1.35;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- Profils
   Deux colonnes égales (796 px au PNG, 89 d'écart) dans le couloir de 1660 px des pages
   personae ; photo à gauche, à droite un profil sur deux (.is-alt, carte beige bord à bord).
   Vignette (35 % de la photo, liseré blanc) sur le coin bas de la photo côté texte. */
.cpq-profil {
  padding: var(--sp-xl) 0;
}
.cpq-profil.is-alt {
  margin: var(--sp-s) var(--page-edge);
  border-radius: var(--r-bloc);
  background: var(--c-beige);
}
.cpq-profil + .cpq-profil:not(.is-alt) {
  padding-top: calc(var(--sp-xl) - var(--sp-s));
}
.cpq-profil-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(24px, 4vw, 77px);
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 var(--side);
}
.cpq-profil.is-alt .cpq-profil-in {
  /* Même couloir que les profils sans fond malgré la marge de la carte. */
  padding: 0 calc(var(--side) - var(--page-edge));
}
.cpq-profil.is-alt .cpq-profil-media {
  order: 2;
}
.cpq-profil-media {
  position: relative;
  padding-bottom: 3.2%;
}
.cpq-profil-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.225;
  border-radius: var(--r-bloc);
}
.cpq .cpq-profil-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cpq-pill {
  position: absolute;
  top: clamp(10px, 1.15vw, 22px);
  left: clamp(10px, 1.15vw, 22px);
  max-width: calc(100% - 20px);
  padding: 0.5em 1.1em;
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
}
.cpq-pill strong {
  color: var(--c-accent);
  font-weight: 800;
}
.cpq-vig {
  position: absolute;
  right: -2.8%;
  bottom: 0;
  width: 35%;
  padding: clamp(4px, 0.4vw, 7px);
  border-radius: calc(12px + clamp(4px, 0.4vw, 7px));
  background: var(--c-white);
}
.cpq-profil.is-alt .cpq-vig {
  right: auto;
  left: -3.8%;
}
.cpq .cpq-vig-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.45;
  border-radius: 12px;
  object-fit: cover;
}
.cpq-vig-pre {
  position: absolute;
  left: 50%;
  bottom: 10%;
  padding: 0.3em 0.8em;
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: var(--fs-tiny);
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}
.cpq-profil-text {
  container-type: inline-size;
  min-width: 0;
}
.cpq-kicker {
  margin-bottom: clamp(12px, 1.6vw, 30px) !important;
  color: var(--c-accent);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cpq-profil-lead {
  margin-top: clamp(12px, 1.6vw, 30px) !important;
  font-size: var(--fs-text);
  line-height: 1.6;
}
/* Avertissement (case `alerte` du profil, 29/10) : paragraphe entier en rouge, demande du client. */
.cpq-profil-lead.is-alerte {
  color: var(--c-alerte);
  font-weight: 600;
}
.cpq-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.05vw, 18px);
  margin-top: clamp(16px, 1.8vw, 32px);
}
.cpq-box {
  padding: clamp(14px, 1.2vw, 22px) clamp(14px, 1.2vw, 22px) clamp(16px, 1.5vw, 28px);
  border: 1px solid #ece6de;
  border-radius: var(--r-card);
  background: var(--c-white);
}
.cpq-profil.is-alt .cpq-box {
  border-color: transparent;
}
.cpq-box-t {
  margin: 0 0 0.7em;
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: clamp(15px, 14px + 0.2vw, 16.6px);
  font-weight: 600;
  line-height: 1.3;
}
.cpq-box ul {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(14px, 13.2px + 0.17vw, 15.7px);
  line-height: 1.45;
}
.cpq-box li {
  position: relative;
  padding-left: 1.4em;
}
.cpq-box li::before {
  content: '';
  position: absolute;
  top: 0.5em;
  left: 0.1em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #e8a48b; /* puces rosées : ce que vous vivez */
}
.cpq-box-apporte li::before {
  background: var(--c-accent);
}
.cpq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-s) clamp(20px, 2.3vw, 44px);
  margin-top: clamp(20px, 2.1vw, 40px);
}
.cpq-more {
  color: var(--c-ink);
  font-size: var(--fs-btn);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.cpq-more:hover {
  color: var(--c-accent);
}
/* Dans le texte du profil (06/11) : taille du paragraphe, graisse normale même sous l'avertissement. */
.cpq-profil-lead .cpq-more {
  font-size: inherit;
  font-weight: 400;
  white-space: nowrap;
}
@container (max-width: 540px) {
  .cpq-boxes {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .cpq-profil-in {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-l);
  }
  .cpq-profil.is-alt .cpq-profil-media {
    order: 0;
  }
  .cpq-profil.is-alt .cpq-profil-in {
    padding: 0 clamp(14px, 3vw, 28px);
  }
  .cpq-profil-media {
    padding-bottom: 5%;
  }
  .cpq-vig,
  .cpq-profil.is-alt .cpq-vig {
    right: -4px;
    left: auto;
    width: 38%;
  }
}


/* ---------------------------------------------------------------- Construction des profils
   pour-qui.js pose data-anim (sans JS ni en prefers-reduced-motion : rien de caché), puis .is-in
   à l'entrée à l'écran ; chaque élément arrive à son rang (--i, posé par le gabarit). */
.cpq-profil[data-anim] .cpq-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: calc(var(--i, 0) * 0.14s);
}
.cpq-profil[data-anim] .cpq-profil-frame.cpq-anim {
  transform: scale(0.96);
}
.cpq-profil[data-anim] .cpq-vig.cpq-anim {
  transform: translateY(24px) scale(0.9);
}
.cpq-profil[data-anim] .cpq-pill.cpq-anim {
  transform: translateX(-12px);
}
.cpq-profil[data-anim].is-in .cpq-anim {
  opacity: 1;
  transform: none;
}