/* ==========================================================================
   JustiComm · page « Réseaux sociaux » (community manager juridique)
   v2, 22/10/2026 (soir) : haut de page clair, réseaux en liste, vrais profils, planning du mois, vrais exemples (retours de Raoudha).
   v1, 22/10/2026 : charte et composants communs (boutons, titres, FAQ), visuels et animations propres à la page.
   Mise en page aérée (demande de Raoudha), emplacements prévus pour deux animations Remotion et une image :
   en attendant, illustrations dessinées en CSS.
   Animations jouées une fois, à l’arrivée (moins de 5 s) ; état final fixe si « moins d’animations » ou sans JavaScript.
   Préfixe : rs-
   ========================================================================== */

.rs-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .rs-or, .surface-nuit .rs-or { color: var(--or-clair, var(--or)); }
.rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(2rem, 3.5vw, 3rem); }
.rs-actions--centre { justify-content: center; }
.rs-court { width: 58% !important; }

/* Sections aérées */
.rs-s { padding-block: clamp(4.5rem, 2.5rem + 5vw, 7.5rem); }
.rs-s .titre-section { text-wrap: balance; }
.rs-tete { max-width: 54rem; margin-inline: auto; text-align: center; }
.rs-tete .titre-section { max-width: none; margin-inline: auto; }
.rs-chapo { margin-top: var(--e-5); max-width: 46rem; font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--titre); }
.rs-tete .rs-chapo { margin-inline: auto; }
.rs-texte { margin-top: var(--e-4); max-width: 40rem; font-size: var(--t-corps); line-height: 1.65; color: var(--texte); }
.rs-tete .rs-texte { margin-inline: auto; }
.rs-texte--centre { margin-inline: auto; text-align: center; }
.surface-sombre .rs-texte, .surface-nuit .rs-texte { color: var(--creme-doux); }
.surface-sombre .rs-texte strong, .surface-nuit .rs-texte strong { color: var(--creme); font-weight: 500; }
.rs-h3 { font: 500 var(--t-carte) / 1.15 var(--f-titre); color: var(--petrole); }
.rs-h3 + .rs-texte { margin-top: var(--e-4); }
.rs-role .titre-section { max-width: 30ch; }

/* Encadré fort : centré, pleine largeur, 22 → 34 px */
.rs-encadre {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1rem, 4vw, 3rem);
  border-block: 1px solid var(--filet-couleur);
  text-align: center; text-wrap: balance;
  font: 500 clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem) / 1.3 var(--f-titre); color: var(--titre);
}
.rs-encadre__suite { display: block; max-width: 44rem; margin: var(--e-4) auto 0; font: 400 var(--t-legende) / 1.6 var(--f-texte); color: var(--texte-doux); text-wrap: pretty; }
.rs-encadre--sombre { border-color: rgba(224, 189, 142, 0.28); color: var(--or-clair, var(--or)); font-style: italic; }

.rs-renvoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); font-size: var(--t-legende); color: var(--texte-doux); }
.rs-renvoi .lien-suite { margin-top: 0; }
.rs-renvoi--centre { justify-content: center; text-align: center; }

.rs-picto { width: 52px; height: 52px; fill: none; stroke: var(--or-texte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rs-picto__plein { fill: var(--cuivre); stroke: none; }

/* Animations communes (scènes) */
@keyframes rs-apparait { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: none; } }
@keyframes rs-pop { 0% { opacity: 0; scale: 0.4; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes rs-tampon { 0% { opacity: 0; scale: 1.7; rotate: -10deg; } 60% { opacity: 1; scale: 0.94; rotate: -4deg; } 100% { opacity: 1; scale: 1; rotate: -4deg; } }
@keyframes rs-frappe { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } }
@keyframes rs-point { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .rs-a, .js [data-reveal] .rs-num { opacity: 0; }
  .js [data-reveal].est-visible .rs-a { animation: rs-apparait 0.6s var(--ease-sortie) calc(var(--t, 0) * 1s) both; }
  .js [data-reveal].est-visible .rs-num { animation: rs-pop 0.5s var(--ease-sortie) calc(var(--t, 0) * 1s) both; }
}

/* --------------------------------------------------------------------------
   1. Haut de page (v2, 22/10/2026, retour de Raoudha « du vert sur du vert ») :
   fond clair, texte à gauche, vidéo Remotion n° 1 dans un cadre pétrole à filet doré
   -------------------------------------------------------------------------- */
/* La barre du haut a son fond dès le départ (texte crème sur fond clair sinon illisible) */
body:has(.rs-haut) .entete__fond { opacity: 1; }
.rs-haut { position: relative; overflow: hidden; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
/* Vidéo n° 1 sur toute la largeur, sous la barre du haut */
.rs-video--bandeau { background: var(--petrole-profond); }
.rs-video--bandeau .rs-video__media { width: 100%; height: auto; aspect-ratio: 1920 / 900; object-fit: cover; }   /* toute la largeur, sans bandes sur les côtés (Raoudha, 22/10/2026) */
.rs-video--bandeau .rs-video__bouton { top: 1rem; bottom: auto; right: 1rem; }   /* en haut : le bouton WhatsApp flottant occupe le bas à droite */
@media (max-width: 47.99em) { .rs-video--bandeau .rs-video__media { aspect-ratio: 1080 / 1350; object-fit: contain; } }   /* au téléphone : vidéo 4:5 entière, jamais recadrée, place réservée dès le chargement */
.rs-haut__grille { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
@media (min-width: 60em) { .rs-haut__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rs-haut__suite .rs-haut__accroche { margin-top: 0; }
.rs-haut__suite .rs-actions { gap: 12px; }
.rs-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 var(--e-5); font-size: 0.875rem; color: var(--taupe); }
.rs-ariane a { color: inherit; text-underline-offset: 3px; }
.rs-ariane [aria-current] { color: var(--encre); }
.rs-haut__titre { margin-top: var(--e-4); max-width: 16em; font: 500 clamp(2.25rem, 1.5rem + 2.3vw, 3.75rem) / 1.06 var(--f-titre); color: var(--petrole); text-wrap: balance; }
.rs-haut__sous { margin-top: var(--e-4); font: 500 clamp(1rem, 0.95rem + 0.25vw, 1.1875rem) / 1.45 var(--f-texte); letter-spacing: 0.02em; color: #8A4A28; }
.rs-haut__accroche { margin-top: var(--e-5); max-width: 34rem; font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.38 var(--f-titre); color: var(--petrole); }
.rs-haut__intro { margin-top: var(--e-3); max-width: 35rem; font-size: var(--t-legende); line-height: 1.65; color: var(--encre); }
.rs-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; font-size: 0.9375rem; color: var(--encre); }
.rs-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.rs-engagements li::before { content: "✓"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or); }
.rs-professions { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--e-3); border-top: 1px solid var(--lin); font-size: 0.9375rem; }
.rs-professions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--taupe); text-decoration: none; }
.rs-professions a:hover, .rs-professions a:focus-visible { color: var(--petrole); }
@media (max-width: 30em) { .rs-haut .surtitre { font-size: 0.8125rem; letter-spacing: 0.14em; } }

/* Logos officiels des réseaux (kits de marque, non modifiés, 22/10/2026) */
.rs-logo { display: block; flex: none; width: auto; height: 1.375rem; }
.rs-pastille { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(176, 99, 57, 0.12); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8A4A28; }
.surface-sombre .rs-pastille, .surface-nuit .rs-pastille { background: rgba(224, 189, 142, 0.16); color: var(--or-clair); }
.rs-legende-ex { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.9rem; margin-top: clamp(3rem, 6vw, 4.5rem); text-align: center; font-size: var(--t-legende); color: var(--texte-doux); }
.rs-legende-ex--gauche { justify-content: flex-start; text-align: left; margin-top: 0; }

/* Photos de l’exemple fictif (générées par Raoudha avec ChatGPT, 22/10/2026) ; aplat pétrole tant qu’elles chargent */
.rs-ph { background-color: var(--petrole-600); background-size: cover; background-position: center; }
.rs-ph--portrait { background-image: url("../img/photos/avocate-droit-du-travail-portrait-linkedin-justicomm-nice.webp"); background-position: 50% 25%; }
.rs-ph--banniere { background-image: url("../img/photos/banniere-linkedin-cabinet-avocat-justicomm-nice.webp"); }
.rs-ph--equipe { background-image: url("../img/photos/instagram-cabinet-avocat-reunion-equipe-justicomm-nice.webp"); }
.rs-ph--conference { background-image: url("../img/photos/instagram-avocate-conference-chefs-entreprise-justicomm-nice.webp"); }
.rs-ph--bureau { background-image: url("../img/photos/instagram-bureau-avocat-justicomm-nice.webp"); }
.rs-ph--reel { background-image: url("../img/photos/video-courte-avocate-reel-justicomm-nice.webp"); background-position: 50% 30%; }
.rs-story__ecran.rs-ph--equipe { background-position: 22% 50%; }

/* --------------------------------------------------------------------------
   2. Rôle du community manager : texte et photo côte à côte, même hauteur
   -------------------------------------------------------------------------- */
.rs-role__grille { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: stretch; }
@media (min-width: 60em) { .rs-role__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.rs-role .titre-section { max-width: 21ch; }
.rs-role__regard { margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--filet-couleur); }
.rs-role__photo { margin: 0; min-height: 22rem; }
.rs-role__photo img { display: block; width: 100%; height: 100%; max-height: 40rem; object-fit: cover; object-position: 50% 45%; clip-path: polygon(var(--pan) 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%, 0 var(--pan)); box-shadow: 0 24px 48px rgba(6, 42, 43, 0.18); }
.rs-role .rs-encadre { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   3. Réseaux : titre à gauche, liste à filets dorés à droite (plus de cartes)
   -------------------------------------------------------------------------- */
.rs-reseaux__tete { max-width: 60rem; }
.rs-reseaux .titre-section { max-width: none; }
.rs-encadres { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 40em) { .rs-encadres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .rs-encadres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rs-encadres li {
  display: grid; align-content: start; gap: var(--e-3); padding: clamp(1.75rem, 3vw, 2.25rem);
  background: #FFFDF8; border: 1px solid var(--lin); border-top: 3px solid var(--or);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%);
  box-shadow: 0 18px 40px -22px rgba(6, 42, 43, 0.3);
  font-size: var(--t-corps); line-height: 1.6; color: var(--texte);
  transition: translate var(--d) var(--ease-sortie), box-shadow var(--d) var(--ease-sortie);
}
.rs-encadres li:hover { translate: 0 -5px; box-shadow: 0 28px 50px -22px rgba(6, 42, 43, 0.38); }
.rs-liste__logo { width: auto; height: 3rem; max-width: 3.6rem; object-fit: contain; }
.rs-liste__nom { margin-top: var(--e-2); margin-bottom: 0.15rem; font: 500 var(--t-carte) / 1.1 var(--f-titre); color: var(--petrole); }
.rs-encadres strong { font-weight: 500; color: var(--petrole); }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-encadres:not(.est-visible) li { opacity: 0; }
  .js .rs-encadres.est-visible li { animation: rs-apparait 0.6s var(--ease-sortie) calc(var(--i) * 0.1s) both; }
}
@media (prefers-reduced-motion: reduce) { .rs-encadres li { transition: none; } .rs-encadres li:hover { translate: none; } }

/* --------------------------------------------------------------------------
   4. Profils : quatre écrans de téléphone (LinkedIn, Instagram, Facebook, TikTok), exemple fictif
   -------------------------------------------------------------------------- */
.rs-profils__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 60em) { .rs-profils__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.rs-profils .rs-chapo { color: var(--creme); }
.rs-points { display: grid; gap: var(--e-5); }
@media (min-width: 40em) { .rs-points { grid-template-columns: 1fr 1fr; gap: var(--e-5) var(--e-6); } }
.rs-points li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: start; font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
.rs-points strong { font-weight: 500; color: var(--creme); }
.rs-points__num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-top: 0.1rem; border-radius: 50%; background: var(--or); font: 500 1rem / 1 var(--f-texte); color: var(--petrole-profond); }
.rs-profils .rs-legende-ex { color: var(--creme-doux); }

.rs-ecrans { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: var(--e-6); }
@media (min-width: 40em) { .rs-ecrans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .rs-ecrans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rs-ecrans > li { display: grid; justify-items: center; gap: var(--e-4); }
.rs-ecran__note { font: italic 500 1.125rem / 1.3 var(--f-titre); color: var(--or-clair); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-ecrans:not(.est-visible) > li { opacity: 0; }
  .js .rs-ecrans.est-visible > li { animation: rs-apparait 0.8s var(--ease-sortie) calc(var(--i) * 0.15s) both; }
}
.rs-ecran {
  position: relative; margin: 0; width: 100%; max-width: 18rem; aspect-ratio: 9 / 18.5; overflow: hidden;
  border-radius: 2rem; border: 9px solid #0B1A1A; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(224, 189, 142, 0.35), 0 40px 70px -24px rgba(0, 0, 0, 0.6);
  font-family: -apple-system, "Helvetica Neue", var(--f-texte); color: #1D2226; text-align: left;
  transition: transform var(--d-longue) var(--ease-sortie);
}
.rs-ecrans > li:hover .rs-ecran { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .rs-ecran { transition: none; } .rs-ecrans > li:hover .rs-ecran { transform: none; } }
.rs-ecran__app { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid #E8E8E8; font-size: 0.8125rem; font-weight: 600; }
.rs-ecran__app img { width: auto; height: 1.15rem; }
.rs-ecran__corps { position: relative; font-size: 0.75rem; line-height: 1.4; }
.rs-btns { display: flex; gap: 0.4rem; margin: 0.7rem 0.8rem 0; }
.rs-btns--centre { justify-content: center; }
.rs-btn { flex: 1; padding: 0.4rem 0.5rem; border-radius: 999px; border: 1px solid #C8CBCE; text-align: center; font-size: 0.75rem; font-weight: 600; color: #3B4045; }
.rs-btns--centre .rs-btn { flex: 0 1 6.5rem; border-radius: 4px; }
.rs-btn--plein { border-color: #0A66C2; background: #0A66C2; color: #FFFFFF; }
.rs-btn--ig { flex: 1; border-radius: 8px; border-color: #0095F6; background: #0095F6; color: #FFFFFF; }
.rs-ecran--ig .rs-btn { border-radius: 8px; background: #EFEFEF; border-color: #EFEFEF; color: #000; }
.rs-ecran--ig .rs-btn--ig { background: #0095F6; border-color: #0095F6; color: #FFFFFF; }
.rs-btn--fb { flex: 1.6; border-radius: 6px; border-color: #0866FF; background: #0866FF; color: #FFFFFF; }
.rs-ecran--fb .rs-btn:not(.rs-btn--fb) { border-radius: 6px; background: #E4E6EB; border-color: #E4E6EB; color: #050505; }
.rs-btn--tt { border-color: #FE2C55 !important; background: #FE2C55; color: #FFFFFF !important; }
.rs-lien { color: #0A66C2; font-weight: 600; }

/* LinkedIn */
.rs-li__banniere { height: 4.6rem; }
.rs-li__photo { position: absolute; left: 0.8rem; top: 2.4rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 3px solid #FFFFFF; }
.rs-li__nom { margin: 2.6rem 0.8rem 0; font-size: 1rem; font-weight: 700; }
.rs-li__titre { margin: 0.15rem 0.8rem 0; font-size: 0.75rem; }
.rs-li__lieu { margin: 0.3rem 0.8rem 0; font-size: 0.6875rem; color: #666; }
.rs-li__lieu span { color: #0A66C2; font-weight: 600; }
.rs-li__bloc { margin: 0.7rem 0 0; padding: 0.6rem 0.8rem; border-top: 6px solid #F4F2EE; }
.rs-li__bloc b { display: block; margin-bottom: 0.2rem; font-size: 0.8125rem; }
/* Instagram */
.rs-ig__haut { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.8rem 0; }
.rs-ig__anneau { flex: none; padding: 3px; border-radius: 50%; background: conic-gradient(#FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.rs-ig__anneau .rs-ph { display: block; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 3px solid #FFFFFF; }
.rs-ig__nom { font-size: 0.8125rem; font-weight: 700; }
.rs-ig__cat { font-size: 0.6875rem; color: #737373; }
.rs-ig__bio { margin: 0.5rem 0.8rem 0; font-size: 0.6875rem; }
.rs-ig__une { display: flex; gap: 0.9rem; margin: 0.75rem 0.8rem 0; font-size: 0.6875rem; text-align: center; }
.rs-ig__une li { display: grid; justify-items: center; gap: 0.2rem; }
.rs-ig__une span { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid #DBDBDB; background: radial-gradient(circle, var(--or-clair) 0 45%, #FFF 48%); }
.rs-ig__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 0.75rem; }
.rs-ig__grille li { aspect-ratio: 1; }
.rs-couv { display: grid; place-items: end start; padding: 0.35rem; background: radial-gradient(circle at 85% 10%, rgba(224, 189, 142, 0.4), transparent 55%), var(--petrole); }
.rs-couv b { font: 500 0.75rem / 1.1 var(--f-titre); color: var(--creme); }
.rs-couv--or { background: var(--or-clair); }
.rs-couv--or b { color: var(--petrole); }
/* Facebook */
.rs-fb__couverture { height: 5rem; }
.rs-fb__logo { position: absolute; left: 0.8rem; top: 3.1rem; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; border: 3px solid #FFFFFF; background: var(--petrole); font: 500 1.3rem / 1 var(--f-titre); color: var(--or); }
.rs-fb__nom { margin: 2.4rem 0.8rem 0; font-size: 1rem; font-weight: 700; color: #050505; }
.rs-fb__cat { margin: 0.1rem 0.8rem 0; font-size: 0.6875rem; color: #65676B; }
.rs-fb__infos { display: grid; gap: 0.25rem; margin: 0.7rem 0.8rem 0; font-size: 0.6875rem; color: #050505; }
.rs-fb__infos b { color: #31A24C; }
.rs-fb__post { margin-top: 0.7rem; padding: 0.6rem 0.8rem; border-top: 6px solid #F0F2F5; font-size: 0.6875rem; }
.rs-fb__auteur { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; font-weight: 700; font-size: 0.75rem; }
.rs-fb__auteur span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--petrole); font: 500 0.625rem / 1 var(--f-titre); color: var(--or); }
/* TikTok */
.rs-ecran--tt .rs-ecran__corps { text-align: center; }
.rs-tt__photo { display: block; width: 4.2rem; height: 4.2rem; margin: 0.9rem auto 0; border-radius: 50%; }
.rs-tt__id { margin-top: 0.4rem; font-size: 0.8125rem; font-weight: 700; }
.rs-tt__nom { font-size: 0.6875rem; color: #555; }
.rs-tt__bio { margin: 0.5rem 0.8rem 0; font-size: 0.6875rem; }
.rs-tt__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 0.7rem; }
.rs-vign { position: relative; display: grid; place-items: end start; aspect-ratio: 3 / 4; padding: 0.3rem; text-align: left; }
.rs-vign::before { content: ""; position: absolute; left: 50%; top: 42%; translate: -50% -50%; border-left: 10px solid rgba(255, 255, 255, 0.85); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.rs-vign b { position: relative; font-size: 0.6875rem; font-weight: 700; line-height: 1.15; color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.rs-vign--1 { background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.55)), url("../img/photos/video-courte-avocate-reel-justicomm-nice.webp") 50% 25% / cover; }
.rs-vign--2 { background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.55)), url("../img/photos/instagram-avocate-conference-chefs-entreprise-justicomm-nice.webp") 50% 30% / cover; }
.rs-vign--3 { background: linear-gradient(170deg, #B06339, #6B3A20); }

/* --------------------------------------------------------------------------
   5. Calendrier : texte en deux colonnes, puis un vrai planning du mois
   -------------------------------------------------------------------------- */
.rs-cal__tete { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 60em) { .rs-cal__tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.rs-cal__tete .rs-texte { margin-top: 0; }
.rs-cal__devise { margin-top: var(--e-4); font: italic 500 clamp(1.375rem, 1.1rem + 1vw, 1.875rem) / 1.25 var(--f-titre); color: #8A4A28; }
.rs-sujets__titre { margin-top: var(--e-5); font-size: var(--t-legende); color: var(--texte-doux); }
.rs-sujets__liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--e-3); }
.rs-sujets__liste li { padding: 0.4rem 0.95rem; border: 1px solid var(--or-400); border-radius: 999px; font: italic 500 1.0625rem / 1.3 var(--f-titre); color: var(--petrole); }
.rs-planning { margin: clamp(3rem, 6vw, 4rem) 0 0; }
.rs-planning__cadre { margin-top: var(--e-4); overflow: hidden; border: 1px solid var(--lin); border-radius: 0.9rem; background: #FFFDF8; box-shadow: 0 30px 60px -30px rgba(6, 42, 43, 0.35); }
.rs-planning__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 1rem 1.25rem; background: var(--petrole); color: var(--creme-doux); font-size: 0.875rem; }
.rs-planning__barre b { font: 500 1.375rem / 1 var(--f-titre); color: var(--creme); }
.rs-planning__etat { margin-left: auto; padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(44, 108, 71, 0.25); color: #BFE3CC; font-weight: 500; }
.rs-planning__jours, .rs-planning__grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rs-planning__jours span { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--lin); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
.rs-jour { position: relative; min-height: 4.5rem; padding: 0.5rem; border-right: 1px solid var(--lin); border-bottom: 1px solid var(--lin); }
.rs-jour:nth-child(5n) { border-right: 0; }
.rs-jour:nth-last-child(-n+5) { border-bottom: 0; }
.rs-jour__num { display: block; font-size: 0.8125rem; color: var(--taupe); }
.rs-jour--ferie { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(226, 220, 208, 0.5) 8px 9px); }
.rs-jour__ferie { display: inline-block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--taupe); }
.rs-pub { position: relative; margin-top: 0.35rem; padding: 0.65rem 0.7rem 0.7rem; border-left: 3px solid var(--cuivre); border-radius: 0.4rem; background: #F4EFE5; font-size: 0.8125rem; line-height: 1.4; color: var(--encre); }
.rs-pub--video { border-left-color: var(--petrole); }
.rs-pub--post { border-left-color: var(--or-400); }
.rs-pub__format { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 500; color: var(--petrole); }
.rs-pub__format img { width: auto; height: 1rem; }
.rs-pub__sujet { margin-top: 0.35rem; font: 500 1.0625rem / 1.2 var(--f-titre); color: var(--petrole); }
.rs-pub__objectif { margin-top: 0.3rem; font-size: 0.75rem; color: var(--taupe); }
.rs-pub__ok { display: inline-block; margin-top: 0.45rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(44, 108, 71, 0.12); font-size: 0.6875rem; font-weight: 500; color: var(--succes); }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-planning:not(.est-visible) .rs-pub { opacity: 0; }
  .js .rs-planning.est-visible .rs-pub { animation: rs-apparait 0.6s var(--ease-sortie) calc(0.2s + var(--i) * 0.12s) both; }
  .js .rs-planning:not(.est-visible) .rs-pub__statut { opacity: 0; }
  .js .rs-planning.est-visible .rs-pub__statut { animation: rs-pop 0.45s var(--ease-sortie) calc(1s + var(--i) * 0.15s) both; }
}
/* Téléphone et tablette : le planning devient un agenda (jours publiés seulement) */
@media (max-width: 59.99em) {
  .rs-planning__jours { display: none; }
  .rs-planning__grille { grid-template-columns: 1fr; }
  .rs-jour:not(.rs-jour--pub) { display: none; }
  .rs-jour { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; min-height: 0; padding: 0.85rem 1rem; border-right: 0; border-bottom: 1px solid var(--lin) !important; }
  .rs-jour__num { font: 500 1.5rem / 1 var(--f-titre); color: #8A4A28; }
  .rs-jour__num::after { content: " nov."; display: block; font: 400 0.75rem / 1.4 var(--f-texte); color: var(--taupe); }
  .rs-pub { margin-top: 0; }
  .rs-planning__etat { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   6. Formats : quatre vrais exemples (post LinkedIn, carrousel, vidéo courte, story) + vidéo Remotion n° 2
   -------------------------------------------------------------------------- */
.rs-formats__tete { max-width: 46rem; }
.rs-exemples { display: grid; gap: clamp(2rem, 4vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 40em) { .rs-exemples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .rs-exemples { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rs-exemple { display: grid; grid-template-rows: 30rem auto auto; align-content: start; gap: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--texte); }
.rs-exemple > figure { margin: 0; height: 30rem; }
.rs-fmt__titre { margin-top: var(--e-3); font: 500 var(--t-carte) / 1.1 var(--f-titre); color: var(--petrole); }
.rs-fmt__precision { display: block; margin-top: 0.3rem; font: 400 0.9375rem / 1.4 var(--f-texte); color: var(--texte-doux); }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-exemples:not(.est-visible) .rs-exemple { opacity: 0; }
  .js .rs-exemples.est-visible .rs-exemple { animation: rs-apparait 0.7s var(--ease-sortie) calc(var(--i) * 0.14s) both; }
}
/* Post LinkedIn */
.rs-post-li { overflow: hidden; padding: 1rem; border: 1px solid #E0DFDC; border-radius: 0.6rem; background: #FFFFFF; box-shadow: 0 20px 40px -24px rgba(6, 42, 43, 0.35); font-family: -apple-system, "Helvetica Neue", var(--f-texte); color: #1D2226; }
.rs-post-li > div { display: flex; flex-direction: column; height: 100%; }
.rs-post-li__tete { display: flex; gap: 0.6rem; align-items: center; }
.rs-post-li__tete .rs-ph { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; }
.rs-post-li__tete b { display: block; font-size: 0.875rem; }
.rs-post-li__tete small { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; color: #666; }
.rs-post-li__tete small img { width: auto; height: 0.8rem; }
.rs-post-li__texte { flex: 1; margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.5; overflow: hidden; }
.rs-post-li__texte strong { font-weight: 700; }
.rs-post-li__tags { color: #0A66C2; font-weight: 600; }
.rs-post-li__actions { display: flex; justify-content: space-between; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid #E8E8E8; font-size: 0.75rem; font-weight: 600; color: #666; }
/* Carrousel (défilement réel, sans JavaScript) */
.rs-carrousel { display: grid; grid-template-rows: 1fr auto; gap: 0.6rem; }
.rs-carrousel__piste { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 0.6rem; box-shadow: 0 20px 40px -24px rgba(6, 42, 43, 0.45); scrollbar-width: none; }
.rs-carrousel__piste::-webkit-scrollbar { display: none; }
.rs-carrousel__piste:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
.rs-diapo { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; padding: 1.75rem 1.5rem; scroll-snap-align: start; background: radial-gradient(circle at 15% 90%, rgba(10, 57, 58, 0.12), transparent 60%), var(--papier); color: var(--petrole); font-size: 1rem; line-height: 1.45; }
.rs-diapo b { font: 500 1.875rem / 1.08 var(--f-titre); }
.rs-diapo--couv { background: radial-gradient(circle at 85% 10%, rgba(224, 189, 142, 0.4), transparent 55%), var(--petrole); color: var(--creme); }
.rs-diapo--couv b { font-size: 2rem; }
.rs-diapo--or { background: var(--or-clair); }
.rs-diapo__num { position: absolute; top: 0.9rem; right: 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; opacity: 0.75; }
.rs-diapo__signe { position: absolute; left: 1.5rem; bottom: 1.1rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--or-clair); }
.rs-carrousel__aide { display: flex; align-items: center; justify-content: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--texte-doux); }
.rs-carrousel__aide img { width: auto; height: 1rem; }
/* Vidéo courte (Reel) et story */
.rs-reel, .rs-story { display: grid; justify-items: center; }
.rs-reel__ecran, .rs-story__ecran { position: relative; height: 30rem; aspect-ratio: 9 / 16; max-width: 100%; overflow: hidden; border-radius: 1.4rem; border: 7px solid #0B1A1A; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.55); font-family: -apple-system, "Helvetica Neue", var(--f-texte); }
.rs-reel__haut { position: absolute; top: 0.7rem; right: 0.7rem; display: flex; gap: 0.3rem; }
.rs-reel__haut img { width: auto; height: 1.15rem; padding: 0.15rem; border-radius: 0.3rem; background: #FFFFFF; }
.rs-reel__st { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 4.5rem; text-align: center; font-size: 1rem; font-weight: 700; line-height: 1.25; color: #FFFFFF; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.rs-reel__st span { display: inline-block; margin-top: 0.3rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; background: var(--or); color: var(--petrole-profond); text-shadow: none; }
.rs-reel__qui, .rs-story__qui { position: absolute; display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.rs-reel__qui { left: 0.8rem; bottom: 1.6rem; }
.rs-reel__qui .rs-ph, .rs-story__qui .rs-ph { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid #FFFFFF; }
.rs-reel__barre { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.3); }
.rs-reel__barre i { display: block; width: 38%; height: 100%; background: var(--or); }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-exemples.est-visible .rs-reel__barre i { animation: rs-progres 6s linear 0.8s both; }
}
@keyframes rs-progres { from { width: 0; } to { width: 100%; } }
.rs-story__barres { position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem; display: flex; gap: 3px; }
.rs-story__barres i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
.rs-story__barres i.plein { background: #FFFFFF; }
.rs-story__barres i.moitie { background: linear-gradient(90deg, #FFFFFF 50%, rgba(255, 255, 255, 0.4) 50%); }
.rs-story__qui { top: 1.2rem; left: 0.7rem; }
.rs-story__titre { position: absolute; left: 1rem; right: 1rem; bottom: 5.5rem; font: 500 2.1rem / 1.05 var(--f-titre); color: #FFFFFF; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.rs-story__titre em { color: var(--or-clair); }
.rs-story__sticker { position: absolute; left: 50%; bottom: 2rem; translate: -50% 0; rotate: -4deg; padding: 0.45rem 0.8rem; border-radius: 0.5rem; background: #FFFFFF; font-size: 0.8125rem; font-weight: 700; color: var(--petrole); white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
@media (max-width: 39.99em) {
  .rs-exemple { grid-template-rows: auto auto auto; }
  .rs-exemple > figure { height: auto; }
  .rs-post-li { max-height: 34rem; }
  .rs-carrousel__piste { aspect-ratio: 4 / 5; }
}

.rs-flux { margin: clamp(3.5rem, 7vw, 5.5rem) auto 0; max-width: 64rem; }
.rs-flux__legende { margin-top: var(--e-5); text-align: center; text-wrap: balance; font: 500 clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem) / 1.3 var(--f-titre); color: var(--petrole); }
.rs-camera {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); max-width: 46rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--lin); background: #FFFDF8;
  font-size: var(--t-corps); line-height: 1.6; color: var(--texte);
}
.rs-camera strong { display: block; font: 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.25 var(--f-titre); color: var(--petrole); margin-bottom: 0.25rem; }
.rs-camera__picto { flex: none; width: 56px; height: 56px; fill: none; stroke: var(--or-texte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rs-camera__picto .rs-camera__barre { stroke: var(--cuivre); stroke-width: 2; }

/* --------------------------------------------------------------------------
   7. Communauté : texte + fil de commentaires animé
   -------------------------------------------------------------------------- */
.rs-communaute__grille { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 60em) { .rs-communaute__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rs-fil__zone { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); }
.rs-fil__zone > .rs-rejouer { align-self: center; }
.rs-fil { position: relative; width: min(100%, 31rem); margin: 0; padding: clamp(1.5rem, 3.5vw, 2.25rem); padding-top: 3.25rem; background: #FFFDF8; border: 1px solid var(--lin); border-radius: 0.9rem; box-shadow: 0 30px 60px -24px rgba(6, 42, 43, 0.3); }
.rs-fil__etiquette { position: absolute; left: clamp(1.5rem, 3.5vw, 2.25rem); top: 1.1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #8A4A28; }
.rs-fil__msg { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.rs-fil__msg--rep { margin-top: 1.25rem; margin-left: clamp(1rem, 5vw, 2.5rem); min-height: 4rem; }
.rs-fil__avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--lin); font-weight: 500; color: var(--petrole); }
.rs-fil__avatar--cab { background: radial-gradient(circle at 35% 35%, #F6C9A6, #D08A5E 55%, var(--cuivre)); box-shadow: 0 0 0 2px #FFFDF8, 0 0 0 3px var(--or); }
.rs-fil__bulle { padding: 0.85rem 1.05rem; border-radius: 0 0.9rem 0.9rem 0.9rem; background: var(--creme); font-size: 1rem; line-height: 1.55; color: var(--encre); }
.rs-fil__msg--rep .rs-fil__bulle { background: rgba(10, 57, 58, 0.07); border: 1px solid rgba(10, 57, 58, 0.12); }
.rs-fil__qui { margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--petrole); }
.rs-fil__frappe { position: absolute; left: 3.15rem; top: 0.6rem; display: flex; gap: 5px; padding: 0.7rem 0.9rem; border-radius: 0 0.9rem 0.9rem 0.9rem; background: rgba(10, 57, 58, 0.07); opacity: 0; }
.rs-fil__frappe i { width: 7px; height: 7px; border-radius: 50%; background: var(--petrole-600); }
.rs-fil__regles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.rs-fil__regles li { padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(44, 108, 71, 0.1); font-size: 0.875rem; font-weight: 500; color: var(--succes); }
.rs-rejouer { min-height: 44px; padding: 0.4rem 0.9rem; border: 0; background: none; font: 400 var(--t-legende) / 1.4 var(--f-texte); color: var(--petrole); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.rs-rejouer:hover { color: #8A4A28; }
.rs-rejouer:focus-visible { outline: 2px solid var(--petrole); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-scene-fil].est-visible .rs-fil__frappe { animation: rs-frappe 1.1s ease 0.8s both; }
  .js [data-scene-fil].est-visible .rs-fil__frappe i { animation: rs-point 0.6s ease-in-out 0.8s 2; }
  .js [data-scene-fil].est-visible .rs-fil__frappe i:nth-child(2) { animation-delay: 0.95s; }
  .js [data-scene-fil].est-visible .rs-fil__frappe i:nth-child(3) { animation-delay: 1.1s; }
}
@media (prefers-reduced-motion: reduce) { .rs-rejouer { display: none; } }

/* --------------------------------------------------------------------------
   8. Règles de la profession (fond nuit)
   -------------------------------------------------------------------------- */
.rs-regles .rs-chapo { color: var(--creme); }
.rs-usages { display: grid; gap: clamp(1rem, 2vw, 1.5rem); max-width: 60rem; margin: clamp(3rem, 6vw, 4rem) auto 0; }
@media (min-width: 48em) { .rs-usages { grid-template-columns: repeat(3, 1fr); } }
.rs-usages li { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); padding: clamp(1.5rem, 3vw, 2.25rem) var(--e-5); border: 1px solid rgba(224, 189, 142, 0.3); text-align: center; font: 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.25 var(--f-titre); color: var(--creme); }
.rs-usages .rs-picto { stroke: var(--or); }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-usages:not(.est-visible) li { opacity: 0; }
  .js .rs-usages.est-visible li { animation: rs-apparait 0.7s var(--ease-sortie) calc(var(--i) * 0.15s) both; }
}
.rs-regles .rs-encadre { margin-top: clamp(2rem, 4vw, 3rem); }
.rs-vrais { max-width: 50rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--petrole); text-align: center; box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.28), inset 0 0 0 7px var(--petrole), inset 0 0 0 8px rgba(224, 189, 142, 0.4); }
.rs-vrais__titre { font: 500 clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem) / 1.25 var(--f-titre); color: var(--creme); text-wrap: balance; }
.rs-vrais__jamais { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; margin-top: var(--e-5); }
.rs-vrais__jamais li { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.1rem; border: 1px solid rgba(224, 189, 142, 0.35); border-radius: 999px; font-size: var(--t-legende); color: var(--creme-doux); }
.rs-vrais__jamais li::before { content: "✕"; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #D08A5E; font-size: 0.75rem; color: var(--petrole-profond); }
.rs-metiers__titre { margin-top: clamp(3rem, 6vw, 4rem); text-align: center; font-size: var(--t-legende); color: var(--creme-doux); }
.rs-metiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--e-4); }
.rs-metiers a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1.1rem; border: 1px solid rgba(224, 189, 142, 0.45); border-radius: 999px; font-size: 1rem; color: var(--creme); text-decoration: none; transition: background var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie); }
.rs-metiers a:hover, .rs-metiers a:focus-visible { background: var(--or); color: var(--petrole-profond); }
.rs-regles .rs-renvoi { color: var(--creme-doux); }

/* --------------------------------------------------------------------------
   9. Déroulé en quatre étapes + tarif
   -------------------------------------------------------------------------- */
.rs-etapes { position: relative; display: grid; gap: clamp(2rem, 4vw, 2.5rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 64em) {
  .rs-etapes { grid-template-columns: repeat(4, 1fr); gap: var(--gouttiere); }
  .rs-etapes::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 2rem; height: 1px; background: linear-gradient(90deg, var(--or), var(--bronze)); }
  .rs-etape { text-align: center; justify-items: center; }
}
.rs-etape { position: relative; display: grid; gap: var(--e-3); align-content: start; font-size: var(--t-corps); line-height: 1.6; color: var(--texte); }
.rs-etape__rond { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--or); }
.rs-etape__rond svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--petrole); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rs-etape__titre { margin-top: var(--e-2); font: 500 var(--t-carte) / 1.15 var(--f-titre); color: var(--petrole); }
.rs-etape__num { color: #8A4A28; }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-etapes:not(.est-visible) .rs-etape { opacity: 0; }
  .js .rs-etapes.est-visible .rs-etape { animation: rs-apparait 0.7s var(--ease-sortie) calc(var(--i) * 0.2s) both; }
  .js .rs-etapes.est-visible .rs-etape__rond { animation: rs-pop 0.5s var(--ease-sortie) calc(0.15s + var(--i) * 0.2s) both; }
}
.rs-tarif { max-width: 50rem; margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem); text-align: center; clip-path: polygon(var(--pan) 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%, 0 var(--pan)); background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(224, 189, 142, 0.16), transparent 70%), var(--petrole); }
.rs-tarif__titre { font: 500 var(--t-carte) / 1.15 var(--f-titre); color: var(--creme); text-wrap: balance; }
.rs-tarif__texte { margin: var(--e-5) auto 0; max-width: 38rem; font-size: var(--t-corps); line-height: 1.65; color: var(--creme); }
.rs-tarif__texte strong { font-weight: 500; }
.rs-tarif__lieu { margin-top: var(--e-4); font-size: var(--t-legende); color: var(--creme-doux); }

/* Carte du tarif : fond pétrole dans une section claire → boutons de la version « fond foncé » (valeurs de boutons.css, :root) */
.rs-tarif {
  --plaque-fond: #E0BD8E;
  --plaque-fond-survol: #F2D9AC;
  --plaque-fond-appui: #D6B080;
  --plaque-texte: #0A393A;
  --plaque-reflet: rgba(255, 251, 242, .62);
  --plaque-reflet-a: 40%;
  --plaque-reflet-b: 60%;
  --plaque-appui-ombre: rgba(6, 42, 43, .18);
  --plaque-filet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M11.86 4.5H28.14L35.5 11.86V28.14L28.14 35.5H11.86L4.5 28.14V11.86Z' fill='none' stroke='%230A393A' stroke-width='.9'/%3E%3C/svg%3E");
  --cartouche-texte: #E0BD8E;
  --cartouche-texte-survol: #F2D9AC;
  --cartouche-survol: rgba(238, 234, 225, .05);
  --cartouche-appui: rgba(238, 234, 225, .09);
  --cartouche-filets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23E0BD8E'%3E%3Cpath d='M9.98 .7H38.02A10 10 0 0 0 47.3 9.98V38.02A10 10 0 0 0 38.02 47.3H9.98A10 10 0 0 0 .7 38.02V9.98A10 10 0 0 0 9.98 .7Z' stroke-width='1.4'/%3E%3Cpath d='M13.19 4.7H34.81A14 14 0 0 0 43.3 13.19V34.81A14 14 0 0 0 34.81 43.3H13.19A14 14 0 0 0 4.7 34.81V13.19A14 14 0 0 0 13.19 4.7Z' stroke-width='.6' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --focus-plaque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M14.93 2H25.07L38 14.93V25.07L25.07 38H14.93L2 25.07V14.93Z' fill='none' stroke='%23F2D9AC' stroke-width='2'/%3E%3C/svg%3E");
  --focus-cartouche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M12 2H28A10 10 0 0 0 38 12V28A10 10 0 0 0 28 38H12A10 10 0 0 0 2 28V12A10 10 0 0 0 12 2Z' fill='none' stroke='%23F2D9AC' stroke-width='2'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Appel final : réseau de points dorés dessiné
   -------------------------------------------------------------------------- */
/* v2 (22/10/2026) : photo en fond (dirigeant qui consulte le profil d’une avocate), texte à gauche sur la partie sombre */
.rs-final { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(6rem, 12vw, 10rem); background: var(--petrole-profond); }
.rs-final__fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.rs-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 42, 43, 0.94) 0%, rgba(6, 42, 43, 0.82) 38%, rgba(6, 42, 43, 0.2) 70%, rgba(6, 42, 43, 0) 100%); }
.rs-final__contenu { text-align: left; }
.rs-final .titre-section { max-width: 15em; margin-inline: 0; color: var(--creme); }
.rs-final__texte { margin-top: var(--e-4); max-width: 30rem; font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.35 var(--f-titre); color: var(--creme-doux); }
.rs-final .rs-actions--centre { justify-content: flex-start; }
@media (max-width: 67.99em) {
  .rs-final { padding-block: clamp(14rem, 60vw, 18rem) clamp(3rem, 8vw, 4rem); }
  .rs-final__fond { height: 60%; object-position: 80% 50%; }
  .rs-final::before { background: linear-gradient(180deg, rgba(6, 42, 43, 0) 0%, rgba(6, 42, 43, 0.4) 35%, var(--petrole-profond) 58%); }
}

/* Téléphone : boutons pleine largeur */
@media (max-width: 30em) {
  .rs-actions .btn--grand, .rs-actions .btn-cartouche, .rs-renvoi .lien-suite { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .rs-camera { flex-direction: column; text-align: center; }
}

/* --------------------------------------------------------------------------
   Vidéos Remotion (22/10/2026) : haut de page et formats.
   Lecture une fois quand la vidéo arrive à l’écran, sans son ; bouton Pause / Lecture / Revoir (js/reseaux-sociaux.js).
   Sans JavaScript ou avec « moins d’animations » : l’affiche (dernière image) reste visible.
   -------------------------------------------------------------------------- */
.rs-video { position: relative; margin: 0; }
.rs-video__media { display: block; width: 100%; height: auto; background: var(--petrole-profond); }
.rs-video--formats .rs-video__media { aspect-ratio: 16 / 9; clip-path: polygon(var(--pan) 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%, 0 var(--pan)); }
.rs-video__bouton {
  position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1rem 0 0.85rem; border: 1px solid rgba(224, 189, 142, 0.55); border-radius: 999px;
  background: rgba(6, 42, 43, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 0.875rem / 1 var(--f-texte); letter-spacing: 0.04em; color: var(--creme); cursor: pointer;
  transition: background var(--d) var(--ease-sortie);
}
.rs-video__bouton:hover { background: rgba(6, 42, 43, 0.95); }
.rs-video__bouton:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.rs-video__icone { position: relative; width: 12px; height: 12px; }
[data-etat="pause"] .rs-video__icone { border-left: 3.5px solid var(--or); border-right: 3.5px solid var(--or); width: 11px; }
[data-etat="lecture"] .rs-video__icone { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--or); }
[data-etat="revoir"] .rs-video__icone { border: 2px solid var(--or); border-radius: 50%; border-top-color: transparent; }
.rs-flux__legende { margin-top: var(--e-5); text-align: center; text-wrap: balance; font: 500 clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem) / 1.3 var(--f-titre); color: var(--petrole); }

/* Vidéo courte (Reel) : la vidéo remplit l’écran du téléphone ; bouton pause dans l’écran, en haut à gauche */
.rs-video--reel { position: relative; }
.rs-video--reel .rs-reel__ecran { background: var(--petrole-900); }
.rs-video--reel .rs-video__media { width: 100%; height: 100%; object-fit: cover; }
.rs-video--reel .rs-video__bouton { top: 0.65rem; left: calc(50% - 7.7rem); right: auto; justify-content: center; width: 36px; min-height: 36px; padding: 0; }
.rs-video--reel [data-libelle] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   v3 (22/10/2026, retours de Raoudha) : calendrier sur fond vert, vidéo des formats en pleine largeur,
   message privé Instagram, règles mises en avant, déroulé à grands chiffres, boutons alignés
   ========================================================================== */
.rs-visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rs-actions .lien-suite { margin-top: 0; }   /* boutons côte à côte alignés (le lien de suite commun a une marge haute) */

/* Calendrier sur fond vert : le planning clair ressort */
.rs-calendrier .rs-chapo { color: var(--creme); }
.rs-calendrier .rs-cal__devise { color: var(--or-clair); }
.rs-calendrier .rs-sujets__titre, .rs-calendrier .rs-legende-ex { color: var(--creme-doux); }
.rs-calendrier .rs-sujets__liste li { border-color: rgba(224, 189, 142, 0.45); color: var(--creme); }
.rs-calendrier .rs-planning__cadre { border-color: rgba(224, 189, 142, 0.4); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65); }

/* Vidéo des formats en pleine largeur (bords pétrole foncé, identiques à ceux de la vidéo) */
.rs-video--formats { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--petrole-profond); }
.rs-video--formats .rs-video__media { clip-path: none; width: 100%; height: auto; aspect-ratio: 1920 / 900; object-fit: cover; background: var(--petrole-profond); }   /* toute la largeur, sans bandes */
@media (max-width: 47.99em) { .rs-video--formats .rs-video__media { aspect-ratio: 1080 / 1350; object-fit: contain; } }   /* version téléphone 4:5, place réservée dès le chargement */
.rs-video--formats .rs-flux__legende { margin: 0; padding: var(--e-5) var(--marge) var(--e-6); background: var(--creme); }
.rs-video--formats .rs-video__bouton { top: 1rem; right: 1rem; }

/* Commentaires : message privé reçu sur Instagram */
.rs-dm { width: min(100%, 23rem); margin: 0; overflow: hidden; border-radius: 2rem; border: 9px solid #0B1A1A; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(224, 189, 142, 0.35), 0 40px 70px -28px rgba(6, 42, 43, 0.5); font-family: -apple-system, "Helvetica Neue", var(--f-texte); color: #000000; }
.rs-dm__barre { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid #EFEFEF; }
.rs-dm__retour { font-size: 1.75rem; line-height: 1; color: #000; }
.rs-dm__avatar { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: linear-gradient(135deg, #FEDA75, #FA7E1E 40%, #D62976 75%); font-size: 0.9rem; font-weight: 600; color: #FFFFFF; }
.rs-dm__qui b { display: block; font-size: 0.9375rem; font-weight: 600; }
.rs-dm__qui small { font-size: 0.75rem; color: #737373; }
.rs-dm__barre img { width: auto; height: 1.35rem; margin-left: auto; }
.rs-dm__fil { position: relative; display: flex; flex-direction: column; gap: 0.9rem; min-height: 20rem; padding: 1rem 0.9rem; }
.rs-dm__date { align-self: center; font-size: 0.75rem; color: #737373; }
.rs-dm__msg { position: relative; display: flex; align-items: flex-end; gap: 0.5rem; }
.rs-dm__msg p { max-width: 80%; padding: 0.7rem 0.95rem; border-radius: 1.3rem; font-size: 0.9375rem; line-height: 1.4; }
.rs-dm__msg--recu .rs-dm__avatar { width: 1.75rem; height: 1.75rem; font-size: 0.7rem; }
.rs-dm__msg--recu p { background: #EFEFEF; color: #000000; }
.rs-dm__msg--envoye { justify-content: flex-end; min-height: 3rem; }
.rs-dm__msg--envoye p { background: linear-gradient(135deg, #7638FA, #3797F0); color: #FFFFFF; }
.rs-dm .rs-fil__frappe { left: auto; right: 0; top: 0.4rem; border-radius: 1.3rem; background: #EFEFEF; }
.rs-dm .rs-fil__frappe i { background: #8E8E8E; }
.rs-dm__vu { align-self: flex-end; margin-top: -0.5rem; font-size: 0.75rem; color: #737373; }
.rs-dm__saisie { display: flex; align-items: center; gap: 0.6rem; margin: 0 0.8rem 0.9rem; padding: 0.4rem 0.5rem; border-radius: 999px; background: #EFEFEF; }
.rs-dm__photo { width: 2rem; height: 2rem; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 28%, transparent 30%), #3797F0; }
.rs-dm__champ { font-size: 0.875rem; color: #737373; }
.rs-fil__regles { justify-content: center; }

/* Règles de la profession : texte fort à gauche, relecture animée à droite */
.rs-regles__grille { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 60em) { .rs-regles__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.rs-regles .titre-section { max-width: 15ch; }
.rs-regles .rs-chapo { color: var(--creme); }
.rs-regles__fort { margin-top: var(--e-5); font: italic 500 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) / 1.22 var(--f-titre);   /* comme l'exergue du Référencement local */ color: var(--or-clair); }
.rs-regles__texte .rs-texte { font-size: var(--t-corps); }
.rs-relecture { position: relative; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 0.9rem; background: #FFFDF8; color: var(--encre); box-shadow: 0 0 0 1px rgba(224, 189, 142, 0.45), 0 50px 90px -30px rgba(0, 0, 0, 0.7); }
.rs-relecture__doc { padding: 1rem; border: 1px solid var(--lin); border-radius: 0.6rem; background: var(--papier); }
.rs-relecture__tete { display: flex; align-items: center; gap: 0.65rem; }
.rs-relecture__tete .rs-ph { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.rs-relecture__tete b { display: block; font-size: 0.9375rem; font-weight: 500; color: var(--petrole); }
.rs-relecture__tete small { font-size: 0.75rem; color: var(--taupe); }
.rs-relecture__sujet { margin-top: 0.7rem; font: 500 1.375rem / 1.2 var(--f-titre); color: var(--petrole); }
.rs-relecture__lignes { display: grid; gap: 7px; margin-top: 0.7rem; }
.rs-relecture__lignes i { height: 8px; border-radius: 4px; background: var(--lin); }
.rs-relecture__titre { margin-top: 1.4rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #8A4A28; }
.rs-relecture__liste { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.rs-relecture__liste li { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; border-radius: 0.55rem; background: rgba(44, 108, 71, 0.08); font: 500 clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem) / 1.2 var(--f-titre); color: var(--petrole); }
.rs-relecture__liste li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--succes); font: 600 0.95rem / 1 var(--f-texte); color: #FFFFFF; }
.rs-relecture__sceau { position: absolute; right: -1.4rem; top: -1.6rem; display: grid; place-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; text-align: center; rotate: 12deg; background: radial-gradient(circle at 35% 30%, #F6E3BF, #CDA675 60%, #9C7952); box-shadow: 0 0 0 4px #FFFDF8, 0 0 0 6px #CDA675, 0 18px 34px rgba(0, 0, 0, 0.45); color: var(--petrole-profond); }
.rs-relecture__sceau b { font: italic 600 2rem / 1 var(--f-titre); }
.rs-relecture__sceau small { margin-top: 0.2rem; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 47.99em) { .rs-relecture__sceau { right: 0.5rem; top: -2.5rem; width: 6rem; height: 6rem; } }
@keyframes rs-sceau { 0% { opacity: 0; scale: 2.2; rotate: -20deg; } 70% { opacity: 1; scale: 0.92; rotate: 14deg; } 100% { opacity: 1; scale: 1; rotate: 12deg; } }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-relecture:not(.est-visible) .rs-relecture__liste li::before, .js .rs-relecture:not(.est-visible) .rs-relecture__sceau { opacity: 0; }
  .js .rs-relecture.est-visible .rs-relecture__liste li::before { animation: rs-pop 0.45s var(--ease-sortie) calc(0.6s + var(--i) * 0.45s) both; }
  .js .rs-relecture.est-visible .rs-relecture__sceau { animation: rs-sceau 0.7s var(--ease-sortie) 2.2s both; }
}

/* Déroulé : grands chiffres dorés, cartes, fil doré qui se trace */
.rs-deroule .rs-tete { text-align: left; margin-inline: 0; max-width: 40rem; }
.rs-etapes { gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 64em) {
  .rs-etapes::before { left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--or-400), var(--cuivre)); transform-origin: left; }
  .rs-etape { text-align: left; justify-items: start; }
}
.rs-etape { position: relative; z-index: 1; padding: clamp(1.5rem, 2.5vw, 2rem); background: #FFFDF8; border: 1px solid var(--lin); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%); box-shadow: 0 24px 48px -26px rgba(6, 42, 43, 0.35); transition: translate var(--d) var(--ease-sortie); }
.rs-etape:hover { translate: 0 -6px; }
.rs-etape__chiffre { display: block; font: 600 clamp(4.5rem, 3rem + 4vw, 7rem) / 0.85 var(--f-titre); color: transparent; -webkit-text-stroke: 1.5px var(--or-400); transition: color var(--d) var(--ease-sortie); }
.rs-etape:hover .rs-etape__chiffre { color: var(--or); }
.rs-etape__rond { position: absolute; top: clamp(1.5rem, 2.5vw, 2rem); right: clamp(1.5rem, 2.5vw, 2rem); width: 3.25rem; height: 3.25rem; background: var(--petrole); box-shadow: none; }
.rs-etape__rond svg { stroke: var(--or); }
.rs-etape__titre { margin-top: var(--e-4); }
@media (prefers-reduced-motion: no-preference) {
  .js .rs-etapes:not(.est-visible)::before { transform: scaleX(0); }
  .js .rs-etapes.est-visible::before { transition: transform 1.6s var(--ease-douce) 0.2s; transform: scaleX(1); }
  .js .rs-etapes.est-visible .rs-etape__chiffre { animation: rs-remplit 0.9s var(--ease-sortie) calc(0.6s + var(--i) * 0.3s) both; }
}
@keyframes rs-remplit { 0% { color: transparent; } 50% { color: var(--or); } 100% { color: transparent; } }
@media (prefers-reduced-motion: reduce) { .rs-etape { transition: none; } .rs-etape:hover { translate: none; } }

/* Haut de page v4 (22/10/2026, Raoudha) : fil d’Ariane au-dessus de la vidéo ; texte en une seule colonne,
   aligné à gauche sur toute la largeur du contenu, tailles normales (« pas aussi gros ») */
.rs-haut__ariane .rs-ariane { margin: 0; padding-block: 0.9rem; }
.rs-haut__grille--centre { display: block; }
.rs-haut__grille--centre .rs-haut__titre { max-width: none; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.25rem); }   /* comme le H1 du Référencement local */
.rs-haut__grille--centre .rs-haut__sous { margin-top: var(--e-3); }
.rs-haut__grille--centre .rs-haut__suite { margin-top: var(--e-5); }
.rs-haut__grille--centre .rs-haut__accroche { max-width: none; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.rs-haut__grille--centre .rs-haut__intro { max-width: none; margin-top: var(--e-2); }
.rs-haut__grille--centre .rs-actions { margin-top: var(--e-5); }

/* Titres et chapeaux sur toute la largeur disponible, sans coupure forcée (Raoudha, 22/10/2026 : « je déteste quand tu coupes comme ça ») */
.rs-s .titre-section, .rs-final .titre-section, .faq5 .faq5__titre { max-width: none; text-wrap: pretty; }
.rs-chapo, .rs-tete, .rs-reseaux__tete, .rs-formats__tete, .rs-deroule .rs-tete { max-width: none; }
.rs-chapo { text-wrap: pretty; }
.rs-texte { max-width: none; }

/* v5 (22/10/2026, Raoudha) : profils — titre et chapeau pleine largeur, quatre points en rangée sobre ;
   ligne éditoriale en une seule colonne ; agenda du mois étoffé (dix publications, statuts, horaires) */
.rs-profils__tete { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.rs-points--rangee { display: grid; gap: 0; border-top: 1px solid rgba(224, 189, 142, 0.3); }
@media (min-width: 40em) { .rs-points--rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gouttiere); } }
@media (min-width: 64em) { .rs-points--rangee { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; } }
.rs-points--rangee li { display: block; padding: 1.5rem 0; border-bottom: 1px solid rgba(224, 189, 142, 0.18); font-size: var(--t-corps); }
@media (min-width: 64em) {
  .rs-points--rangee li { padding: 1.75rem 1.75rem 0.5rem; border-bottom: 0; border-left: 1px solid rgba(224, 189, 142, 0.3); }
  .rs-points--rangee li:first-child { padding-left: 0; border-left: 0; }
}
.rs-points--rangee .rs-points__num { display: block; width: auto; height: auto; margin: 0 0 0.6rem; border-radius: 0; background: none; font: 600 2.75rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: transparent; -webkit-text-stroke: 1px var(--or); }

.rs-cal__tete--une { display: block; }
.rs-cal__tete--une > div + div { margin-top: var(--e-4); }

.rs-planning__reseaux { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: #FFFDF8; }
.rs-planning__reseaux img { width: auto; height: 1rem; }
.rs-planning__etats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.rs-planning__etats i { padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-style: normal; font-weight: 500; }
.rs-planning__etats .valide { background: rgba(44, 108, 71, 0.35); color: #CDEBD8; }
.rs-planning__etats .avalider { background: rgba(208, 138, 94, 0.3); color: #F6D3BC; }
.rs-planning__etats .prepa { background: rgba(238, 234, 225, 0.14); color: var(--creme-doux); }
.rs-pub--story { border-left-color: var(--bronze); }
.rs-pub--lettre { border-left-color: var(--petrole-600); }
.rs-pub__statut { display: inline-block; margin-top: 0.45rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 500; }
.rs-pub__statut--valide { background: rgba(44, 108, 71, 0.12); color: var(--succes); }
.rs-pub__statut--avalider { background: rgba(176, 99, 57, 0.12); color: #8A4A28; }
.rs-pub__statut--prepa { background: rgba(110, 104, 98, 0.12); color: #5C5752; }
.rs-jour--hors { background: #F2EEE6; }
.rs-jour--hors .rs-jour__num { color: #A39C94; }
@media (max-width: 59.99em) { .rs-planning__etats { margin-left: 0; } }

/* v6 (22/10/2026, Raoudha) : agenda selon le métier — six onglets (boutons radio, sans JavaScript), un mois par métier.
   Sans :has(), seul le mois de l’avocat reste affiché. */
.rs-onglets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--e-4) 0 0; padding: 0; border: 0; }
.rs-onglet__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rs-onglet { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 1.1rem; border: 1px solid rgba(224, 189, 142, 0.5); border-radius: 999px; font-size: 0.9375rem; font-weight: 500; color: var(--creme); cursor: pointer; transition: background var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie); }
.rs-onglet:hover { background: rgba(224, 189, 142, 0.12); }
.rs-onglet__radio:checked + .rs-onglet { background: var(--or); border-color: var(--or); color: var(--petrole-profond); }
.rs-onglet__radio:focus-visible + .rs-onglet { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.rs-mois { display: none; }
.rs-mois--avocat { display: block; }
.rs-planning:has(#rs-m-notaire:checked) .rs-mois--avocat,
.rs-planning:has(#rs-m-cj:checked) .rs-mois--avocat,
.rs-planning:has(#rs-m-comptable:checked) .rs-mois--avocat,
.rs-planning:has(#rs-m-cpi:checked) .rs-mois--avocat,
.rs-planning:has(#rs-m-syndic:checked) .rs-mois--avocat { display: none; }
.rs-planning:has(#rs-m-notaire:checked) .rs-mois--notaire,
.rs-planning:has(#rs-m-cj:checked) .rs-mois--cj,
.rs-planning:has(#rs-m-comptable:checked) .rs-mois--comptable,
.rs-planning:has(#rs-m-cpi:checked) .rs-mois--cpi,
.rs-planning:has(#rs-m-syndic:checked) .rs-mois--syndic { display: block; }

/* v7 (22/10/2026, Raoudha : « une vraie page Instagram ») : écran de messages privés fidèle à l’application
   (barre d’état, en-tête avec appel et vidéo, présentation du profil, bulles, « Vu », barre de saisie) */
.rs-dm { position: relative; width: min(100%, 24rem); border-radius: 2.6rem; border: 10px solid #0B1A1A; }
.rs-dm__etat { display: flex; align-items: center; justify-content: space-between; height: 2.6rem; padding: 0 1.4rem; font-size: 0.875rem; }
.rs-dm__etat b { font-weight: 600; }
.rs-dm__ilot { width: 6.2rem; height: 1.7rem; border-radius: 1rem; background: #000; }
.rs-dm__icones { display: flex; align-items: center; gap: 0.3rem; }
.rs-dm__reseau { width: 1rem; height: 0.7rem; background: linear-gradient(90deg, #000 0 20%, transparent 20% 27%, #000 27% 47%, transparent 47% 54%, #000 54% 74%, transparent 74% 81%, #000 81%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.rs-dm__wifi { width: 0.95rem; height: 0.7rem; background: #000; clip-path: polygon(50% 100%, 0 25%, 15% 8%, 50% 0, 85% 8%, 100% 25%); }
.rs-dm__batterie { position: relative; width: 1.45rem; height: 0.72rem; border: 1.5px solid #000; border-radius: 3px; }
.rs-dm__batterie::after { content: ""; position: absolute; inset: 1.5px; right: 25%; border-radius: 1px; background: #000; }
.rs-dm__barre { gap: 0.55rem; padding: 0.4rem 0.9rem 0.7rem; color: #000; }
.rs-dm__barre > svg:first-child { margin-left: -0.3rem; }
.rs-dm__avatar--vide { background: radial-gradient(circle at 50% 38%, #FFFFFF 0 20%, transparent 21%), radial-gradient(ellipse 52% 40% at 50% 100%, #FFFFFF 0 98%, transparent 100%), #C7C7CC; }
.rs-dm__qui b { font-size: 1rem; }
.rs-dm__qui small { display: block; font-size: 0.75rem; color: #737373; }
.rs-dm__actions { display: flex; gap: 1rem; margin-left: auto; }
.rs-dm__barre img { display: none; }
.rs-dm__fil { min-height: 0; padding: 0.6rem 0.9rem 1rem; gap: 0.75rem; }
.rs-dm__profil { display: grid; justify-items: center; gap: 0.15rem; padding: 0.6rem 0 0.4rem; text-align: center; }
.rs-dm__avatar--grand { width: 5.25rem; height: 5.25rem; margin-bottom: 0.4rem; }
.rs-dm__profil b { font-size: 1.0625rem; font-weight: 600; }
.rs-dm__profil small { font-size: 0.8125rem; color: #737373; }
.rs-dm__voir { margin-top: 0.55rem; padding: 0.35rem 0.9rem; border-radius: 0.55rem; background: #EFEFEF; font-size: 0.8125rem; font-weight: 600; }
.rs-dm__date { font-size: 0.75rem; font-weight: 500; }
.rs-dm__avatar--petit { width: 1.75rem; height: 1.75rem; }
.rs-dm__msg p { border-radius: 1.35rem; font-size: 0.9375rem; }
.rs-dm__msg--envoye p { background: linear-gradient(160deg, #8F2BEF 0%, #5E3FF0 45%, #286EE6 100%); }   /* blanc ≥ 4,7:1 (Pauline) */
.rs-dm__ecrit { position: absolute; left: 2.25rem; bottom: 0; display: flex; gap: 4px; padding: 0.75rem 0.9rem; border-radius: 1.35rem; background: #EFEFEF; opacity: 0; }
.rs-dm__ecrit i { width: 7px; height: 7px; border-radius: 50%; background: #8E8E8E; }
.rs-dm__saisie { margin: 0 0.75rem 1.6rem; padding: 0.35rem 0.6rem 0.35rem 0.35rem; }
.rs-dm__photo { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; background: #3797F0; }
.rs-dm__champ { flex: 1; }
.rs-dm__outils { display: flex; gap: 0.6rem; color: #000; }
.rs-dm__accueil { position: absolute; left: 50%; bottom: 0.45rem; width: 7.5rem; height: 0.3rem; margin-left: -3.75rem; border-radius: 1rem; background: #000; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-scene-fil].est-visible .rs-dm__ecrit { animation: rs-frappe 1s ease 0.2s both; }
  .js [data-scene-fil].est-visible .rs-dm__ecrit i { animation: rs-point 0.6s ease-in-out 0.2s 2; }
  .js [data-scene-fil].est-visible .rs-dm__ecrit i:nth-child(2) { animation-delay: 0.35s; }
  .js [data-scene-fil].est-visible .rs-dm__ecrit i:nth-child(3) { animation-delay: 0.5s; }
}
.rs-dm .rs-fil__frappe { display: none; }

/* Appel final (23/10/2026, Raoudha : « le contenu est un peu sur l’image ») : texte calé à gauche de l’écran, plus petit */
@media (min-width: 68em) {
  .rs-final > .rs-final__contenu { max-width: none; margin-inline: 0; padding-inline: clamp(24px, 4.5vw, 88px); }
  .rs-final .titre-section { max-width: 13em; font-size: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem); }
  .rs-final__texte { max-width: 26rem; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); }
}

/* Corrections du contrôle final (23/10/2026 : Octave, Zoé, Pauline) */
/* Vidéo des formats : hors du conteneur, toute la largeur sans 100vw (pas de rognage avec une barre de défilement), marge rétablie */
.rs-video--formats { width: 100%; max-width: none; margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
@media (max-width: 47.99em) { .rs-video--bandeau .rs-video__bouton { top: auto; bottom: 0.75rem; right: auto; left: 0.75rem; } }
.rs-tt__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-vign { min-width: 0; }
.rs-vign b { font-size: 0.625rem; hyphens: auto; overflow-wrap: anywhere; }
.rs-etape__chiffre { font-variant-numeric: lining-nums; }
@media (max-width: 59.99em) { .rs-relecture__sceau { right: 0.5rem; top: -2.5rem; width: 6rem; height: 6rem; } }
.rs-story__ecran::before { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(6, 42, 43, 0.8)); }
.rs-story__ecran > * { z-index: 1; }
@media (min-width: 68em) {
  .rs-final > .rs-final__contenu { padding-inline: max(var(--marge), min(calc((100vw - var(--conteneur)) / 2), 88px)); }
  .rs-final .titre-section { max-width: 17em; }
  .rs-final__texte { max-width: 32rem; }
}
.rs-professions { border-top: 0; position: relative; }
.rs-professions::before { content: ""; position: absolute; top: 0; left: var(--marge); right: var(--marge); height: 1px; background: var(--lin); }
.rs-actions .btn-cartouche { min-height: 60px; }
@media (min-width: 40em) { .rs-exemple { grid-row: span 3; grid-template-rows: subgrid; } .rs-exemples { grid-auto-rows: auto; } }
@media (max-width: 30em) { .rs-vrais__jamais li { border-radius: 1rem; text-align: left; } }
.rs-ecran { aspect-ratio: 9 / 17; }
.rs-ariane a { display: inline-flex; align-items: center; min-height: 44px; }
.rs-jour--hors .rs-jour__num { color: var(--taupe); }
.rs-video--reel .rs-video__bouton { width: 44px; min-height: 44px; }
.rs-ig__grille li { aspect-ratio: 3 / 4; }   /* grille Instagram en 3:4 depuis 2025 (Zoé) */