/* Modèle de page Joli 8, partagé par toutes les pages : pictogrammes du bas (r-socle) et FAQ en accordéons par thème. */


/* 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; }
 .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; }


/* 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; }
 .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; }

.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; position: sticky; top: 6rem; }
@media (max-width: 59.99rem) { .tm-faq__media { position: static; max-width: 22rem; margin: 0 auto; } }
.tm-faq__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.tm-faq__texte { min-width: 0; }

/* Barre du haut : étoiles dorées, note et nombre d'avis en violet (avis synchronisés). */
.r-topbar__avis .r-topbar__stars { color: var(--arc-4); letter-spacing: .08em; }
.r-topbar__avis .r-topbar__note { color: var(--encre-1); font-weight: 600; }

/* Les panneaux décoratifs (.r-offset__media::before) débordent de 16 px : on coupe sans rogner le décor, la page ne défile plus de côté. */
main { overflow-x: clip; }