/* RÉSEAUX SOCIAUX — blocs propres à la page (24/10/2026). Histoire : « vous n'y pensez plus, votre marque parle chaque semaine ».
   Pôle Marketing digital (cuivre) ; mercure en tourbillons. Les types de publication ont chacun leur nuance de cuivre. */
.r-calendrier-section{--t-visuel:#F3B98A;--t-linkedin:#C9D4E6;--t-reel:#E0894B;--t-carrousel:#B5653A;--t-regulier:#F7E2CE}

/* ---------- Le calendrier : des publications qui se posent jour après jour ---------- */
.r-calendrier__grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,4vw,72px);align-items:center;margin-bottom:36px}
.r-mois{padding:clamp(20px,2.4vw,32px);border-radius:24px;border:1px solid var(--w-filet-fort);background:#0E1016}
.r-mois__tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.r-mois__tete b{font-size:20px;font-weight:600}
.r-mois__tete span{font-size:14px;color:var(--w-gris)}
.r-mois__tete i{font-style:normal;font-size:28px;font-weight:300;color:var(--w-blanc);font-variant-numeric:tabular-nums;margin-right:4px}
.r-mois__jours,.r-mois__cases{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.r-mois__jours{margin-bottom:8px}
.r-mois__jours span{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--w-gris-doux);text-align:center}
.r-case{position:relative;aspect-ratio:1/1;border-radius:10px;border:1px solid var(--w-filet);background:rgba(220,229,242,.02)}
.r-case em{position:absolute;left:8px;top:6px;font-style:normal;font-size:11px;color:var(--w-gris-doux)}
.r-case i{position:absolute;inset:22% 10% 10%;border-radius:8px;background:var(--c);opacity:0;transform:translateY(-14px) scale(.6) rotate(-6deg);transition:opacity .4s,transform .6s cubic-bezier(.3,1.6,.5,1);box-shadow:0 8px 20px -10px var(--c)}
.r-case i::after{content:attr(data-libelle);position:absolute;left:6px;bottom:5px;font-style:normal;font-size:10px;font-weight:700;color:#1C1209;white-space:nowrap}
.r-case.pose i{opacity:1;transform:none}
.r-case--vide{border-style:dashed;opacity:.4}
.r-types{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.r-types li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--w-filet);font-size:16px;line-height:1.4}
.r-types i{flex:none;width:16px;height:16px;border-radius:5px;background:var(--c)}
.r-types [data-type="visuel"]{--c:var(--t-visuel)}.r-types [data-type="linkedin"]{--c:var(--t-linkedin)}.r-types [data-type="reel"]{--c:var(--t-reel)}.r-types [data-type="carrousel"]{--c:var(--t-carrousel)}.r-types [data-type="regulier"]{--c:var(--t-regulier)}
.r-calendrier__note{margin:16px 0 0;font-size:14px;color:var(--w-gris)}

/* ---------- Profils : des bulles de stories ---------- */
.r-stories{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center}
.r-stories__bulle{display:grid;place-items:center;width:min(100%,210px);aspect-ratio:1/1;margin:0 auto 20px;padding:6px;box-sizing:border-box;border-radius:50%;
  background:conic-gradient(from var(--angle,0deg),#F3B98A,#E0894B,#7A3B1E,#E0894B,#F3B98A);animation:r-anneau 6s linear infinite}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes r-anneau{to{--angle:360deg}}
.r-stories__bulle b{display:grid;place-items:center;width:100%;height:100%;padding:18px;box-sizing:border-box;border-radius:50%;background:#0E1016;border:4px solid #0A0B0E;font-size:18px;font-weight:600;line-height:1.25}
.r-stories li:nth-child(2) .r-stories__bulle{animation-delay:-1.5s}.r-stories li:nth-child(3) .r-stories__bulle{animation-delay:-3s}.r-stories li:nth-child(4) .r-stories__bulle{animation-delay:-4.5s}
.r-stories p{margin:0 auto;max-width:24ch;font-size:15.5px;line-height:1.55;color:var(--w-gris)}
.r-stories li:hover .r-stories__bulle{animation-duration:1.6s}

/* ---------- Accompagnement : six services « programmés » ---------- */
.r-programme{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.r-programme li{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;border-radius:18px;border:1px solid var(--w-filet);background:rgba(10,11,14,.7);font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.r-programme span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--w-gris)}
.r-programme span::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--w-filet-fort);transition:background .4s,border-color .4s}
.r-programme li::after{content:"Programmé";position:absolute;top:20px;right:20px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1C1209;background:var(--pole);opacity:0;transform:scale(.7);transition:opacity .4s,transform .5s cubic-bezier(.3,1.7,.5,1)}
.r-programme li.programme::after{opacity:1;transform:none}
.r-programme li.programme span::before{background:var(--pole);border-color:var(--pole)}

/* ---------- Vidéo : le cadre d'enregistrement et la pellicule ---------- */
.r-video__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,96px);align-items:center;margin-bottom:clamp(48px,5vw,80px)}
.r-rec{position:relative;aspect-ratio:9/12;max-height:560px;border-radius:24px;overflow:hidden;isolation:isolate;background:#0A0B0E}
.r-rec canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;filter:brightness(.8)}
.r-rec__coin{position:absolute;width:34px;height:34px;border:2px solid rgba(255,255,255,.85)}
.r-rec__coin--hg{left:18px;top:18px;border-right:0;border-bottom:0}.r-rec__coin--hd{right:18px;top:18px;border-left:0;border-bottom:0}
.r-rec__coin--bg{left:18px;bottom:18px;border-right:0;border-top:0}.r-rec__coin--bd{right:18px;bottom:18px;border-left:0;border-top:0}
.r-rec__voyant{position:absolute;left:30px;top:30px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.1em;color:#FFF}
.r-rec__voyant::before{content:"";width:10px;height:10px;border-radius:50%;background:#FF4A3D;animation:r-clignote 1.2s steps(1) infinite}
@keyframes r-clignote{50%{opacity:0}}
.r-rec__temps{position:absolute;right:30px;top:30px;font-size:13px;font-weight:600;letter-spacing:.06em;color:#FFF;font-variant-numeric:tabular-nums}
.r-rec__format{position:absolute;left:30px;bottom:30px;font-size:12px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.8)}
.r-pellicule{overflow:hidden;padding:18px 0;background:repeating-linear-gradient(90deg,#1A1C24 0 18px,transparent 18px 30px) top/100% 10px no-repeat,repeating-linear-gradient(90deg,#1A1C24 0 18px,transparent 18px 30px) bottom/100% 10px no-repeat,#0C0D11}
.r-pellicule__piste{list-style:none;margin:0;padding:0;display:flex;gap:12px;width:max-content;animation:r-pellicule 40s linear infinite}
.r-pellicule:hover .r-pellicule__piste{animation-play-state:paused}
@keyframes r-pellicule{to{transform:translateX(-50%)}}
.r-pellicule li{flex:none;width:300px;min-height:170px;padding:24px;box-sizing:border-box;border-radius:6px;background:linear-gradient(160deg,rgba(224,137,75,.22),rgba(14,16,22,.95) 70%);border:1px solid rgba(224,137,75,.25)}
.r-pellicule h3{margin:0 0 10px;font-size:22px;font-weight:500}
.r-pellicule p{margin:0;font-size:14.5px;line-height:1.55;color:var(--w-gris)}

@media (max-width:1100px){
  .r-calendrier__grille,.r-video__grille{grid-template-columns:1fr}
  .r-stories{grid-template-columns:1fr 1fr}
  .r-programme{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.r-stories__bulle,.r-pellicule__piste,.r-rec__voyant::before{animation:none}.r-case i{opacity:1;transform:none}}

/* ---------- 25/10 : les publications du calendrier ne sont plus des aplats — chacune est une vignette de mercure
   (la matière du site) teintée de sa nuance de cuivre ; libellé blanc ---------- */
.r-case i{background:linear-gradient(color-mix(in srgb,var(--c) 70%,transparent),color-mix(in srgb,var(--c) 70%,transparent)),url(../images/mercure-tourbillons.jpg) center/cover;background-blend-mode:color;box-shadow:0 8px 20px -10px var(--c),inset 0 0 0 1px rgba(255,255,255,.14)}
.r-case i::after{color:#FFF;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.r-types i{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.8) 0,rgba(255,255,255,0) 34%),radial-gradient(circle at 40% 36%,var(--c),#05060A 90%);border-radius:50%}