/* Blocs éditoriaux de la fiche Tapis magique : texte de l'ancien site,
   mis en page avec les couleurs et la typographie de la refonte. */

.tm-intro h2 {
  font-family: var(--rf-display);
  font-weight: var(--rf-weight);
  font-size: var(--fs-h2);
  line-height: var(--rf-leading);
  letter-spacing: var(--rf-track);
  font-variation-settings: var(--rf-settings);
  color: var(--r-ink);
  margin: 0 0 1.5rem;
}

/* Bloc 1 : photo et liste en pastilles */
.tm-intro__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .tm-intro__grille { grid-template-columns: 1fr 1fr; }
}
.tm-intro__photo { margin: 0; }
.tm-intro__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.tm-intro__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.tm-intro__chips li {
  background: var(--lavis-1);
  color: var(--r-ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: .6rem 1rem;
}
.tm-intro__chips li:nth-child(4n+2) { background: var(--lavis-2); }
.tm-intro__chips li:nth-child(4n+3) { background: var(--lavis-4); }
.tm-intro__chips li:nth-child(4n)   { background: var(--lavis-3); }

/* Bloc 2 : carte pleine largeur, fond pastel */
.tm-savoir { background: var(--lavis-5); }
.tm-savoir__texte {
  max-width: 60ch;
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--r-ink-soft);
}

/* Bloc 3 : quatre cartes colorées */
.tm-cartes {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.tm-cartes li {
  background: var(--lavis-1);
  color: var(--r-ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.65;
  padding: 1.6rem;
}
.tm-cartes li:nth-child(2) { background: var(--lavis-2); }
.tm-cartes li:nth-child(3) { background: var(--lavis-4); }
.tm-cartes li:nth-child(4) { background: var(--lavis-3); }
.tm-cartes strong {
  display: block;
  font-family: var(--rf-display);
  font-weight: var(--rf-weight);
  font-size: var(--fs-h3);
  color: var(--encre-1);
  margin-bottom: .5rem;
}

/* Bloc 2 : texte et photo côte à côte */
.tm-savoir__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .tm-savoir__grille { grid-template-columns: 1.1fr .9fr; }
}
.tm-savoir__photo { margin: 0; }
.tm-savoir__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Vidéos carrées à la place des photos des blocs 1 et 2 (même cadrage). */
.tm-intro__photo video,
.tm-savoir__photo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Paragraphe de conclusion, sans fond vidéo : texte simple, centré. */
.tm-final { margin: clamp(2.5rem, 6vw, 4rem) auto 0; max-width: 60ch; text-align: center; }
.tm-texte-final {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--r-ink-soft);
  margin: 0;
}

/* Une seule vidéo animée dans les sections du bas : le pliage du tapis. */
.r-offset__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Section des tailles : vidéo en fond, voilée de crème pour rester sobre. */
.tm-fond-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tm-fond-section__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.tm-fond-section__fond video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-fond-section__voile {
  position: absolute;
  inset: 0;
  background: rgba(252, 251, 250, .74);
}

.tm-fond-section__contenu {
  position: relative;
  z-index: 1;
}

/* Pastilles de confiance (OFG, Maison des maternelles, CE) : plus grandes sur cette fiche. */
.r-socle__cautions { gap: clamp(2rem, 5vw, 4rem); }
.r-socle__mark--ofg { max-height: clamp(6rem, 13vw, 10rem); }
.r-socle__mark--tv  { max-height: clamp(3.6rem, 8vw, 6.4rem); }
.r-socle__mark--ce  { max-height: clamp(5rem, 11vw, 8.5rem); }
.r-socle__marque { min-height: clamp(6.5rem, 14vw, 11rem); }
.r-socle__legende { font-size: var(--fs-sm); max-width: 24ch; }

/* FAQ : petite vidéo carrée à gauche de la liste. */
.tm-faq { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .tm-faq { grid-template-columns: .85fr 1.15fr; } }
.tm-faq__media { margin: 0; }
.tm-faq__media video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* La vidéo doit passer au-dessus du panneau décoratif de .r-offset__media (comme les images). */
.r-offset__video { position: relative; z-index: 1; }

/* Section unique : tableau de traçabilité à gauche, carte atelier à droite. */
.tm-atelier { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .tm-atelier { grid-template-columns: 1.1fr .9fr; } }
.tm-atelier__carte { background: var(--lavis-1); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: .5rem .5rem 0 var(--arc-2); }
.tm-atelier__media { margin: 0 0 1.2rem; }
.tm-atelier__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tm-atelier__titre { font-family: var(--rf-display); font-size: var(--fs-h3); line-height: 1.2; color: var(--r-ink); margin: .4rem 0 .8rem; }
.tm-atelier__carte .link { display: inline-block; margin-top: .8rem; }

/* Section « Ferme et souple » : petite vidéo carrée à gauche, texte à droite. */
.tm-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .tm-split { grid-template-columns: .85fr 1.15fr; } }
.tm-split__media { margin: 0; }
.tm-split__media video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* Questions regroupées par thème dans la FAQ. */
.faq__groupe { margin: 2.2rem 0 .4rem; color: var(--encre-1); }
.faq__groupe:first-child { margin-top: 0; }

/* FAQ en accordéon par thème : titre de thème fermé, questions dépliées au clic. */
.faq__theme { border-top: 3px solid var(--arc-1); padding: .2rem 0 .4rem; margin-bottom: 1rem; }
.faq__theme-titre { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .9rem 0; font-family: var(--rf-display); font-size: var(--fs-h3); color: var(--r-ink); }
.faq__theme-titre::-webkit-details-marker { display: none; }
.faq__theme-titre::after { content: "+"; font-family: var(--r-body); font-size: 1.3rem; color: var(--encre-1); transition: transform .2s ease; }
.faq__theme[open] > .faq__theme-titre::after { content: "–"; }
.faq__theme-nb { font-family: var(--r-body); font-size: var(--fs-micro); color: var(--r-ink-mute); margin-left: auto; margin-right: .6rem; }
/* La vidéo reste visible à côté de la liste en défilant. */
.tm-faq__media { position: sticky; top: 6rem; }
@media (max-width: 59.99rem) { .tm-faq__media { position: static; max-width: 22rem; margin: 0 auto; } }

/* FAQ en couleurs : chaque thème a sa couleur de la charte (filet, signe, teinte à l'ouverture). */
.faq__theme:nth-of-type(4n+1) { --c: var(--arc-1); --lav: var(--lavis-1); }
.faq__theme:nth-of-type(4n+2) { --c: #1FA87F; --lav: var(--lavis-2); }
.faq__theme:nth-of-type(4n+3) { --c: #E0533A; --lav: var(--lavis-3); }
.faq__theme:nth-of-type(4n+4) { --c: #C39A32; --lav: var(--lavis-4); }
.faq__theme { border-top: 3px solid var(--c, var(--arc-1)); background: transparent; padding: 0 .4rem; transition: background .25s ease; }
.faq__theme[open] { background: var(--lav, var(--lavis-1)); padding-bottom: .8rem; }
.faq__theme-titre { padding-inline: .2rem; }
.faq__theme-titre::after { color: var(--c, var(--encre-1)); font-size: 1.5rem; }
.faq__theme-nb { color: var(--c, var(--r-ink-mute)); font-weight: 500; }
.faq__theme .faq__item { padding-inline: .2rem; }

/* FAQ : titre et questions dans la colonne de droite, image fixe à gauche. */
.tm-faq__texte { min-width: 0; }
.tm-faq__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }