/* Styles propres à la page « com » (repris de la maquette). */
/* ---- Communication & réseaux sociaux : « Publier, ce n'est pas communiquer » ---------------- */
[data-world="com"] :is(.t1, .t2, .giant) { font-variation-settings: "wdth" 94, "opsz" 96; }
.c-hero { --len: 3.2; }
.c-hero .pin-stage { background: #fff; color: var(--encre); }
/* Le plateau : téléphone, puis calendrier, puis publication */
.c-board { position: absolute; z-index: 2; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); top: calc(var(--bar-h) + 14px); bottom: var(--says-h, 230px); }
@media (min-width: 900px) { .c-board { left: 50%; right: 64px; top: calc(50% + var(--bar-h) / 2); bottom: auto; height: min(calc(100svh - var(--bar-h) - 96px), 640px); translate: 0 -50%; } }
.c-phone { position: absolute; left: 50%; top: 0; bottom: 0; aspect-ratio: 10 / 17; max-width: 100%; translate: -50% 0; border: 2.5px solid var(--encre); border-radius: 26px; background: #F6F8F9; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
@media (max-width: 899px) and (max-height: 700px) { .c-phone { aspect-ratio: 3 / 4; } }
.c-phone__bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font: 600 .75rem/1 var(--f-text); color: var(--encre); border-bottom: 1px solid var(--filet); background: #fff; }
.c-phone__bar i { width: 18px; height: 18px; border-radius: 50%; background: #D6DCE0; flex: none; }
.c-feed { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 8px; min-height: 0; }
.c-slot { min-height: 0; }
.c-noise { position: absolute; inset: 0; pointer-events: none; }
.c-noise i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 3px #fff; }
.c-cards { position: absolute; inset: 0; pointer-events: none; }
.c-card { position: absolute; left: 0; top: 0; width: 0; height: 0; background: #fff; border: 1px solid #DDE3E7; overflow: hidden; display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 4px 7px; padding: 7px 8px; }
.c-card .av { width: 18px; height: 18px; border-radius: 50%; background: #C9D2D8; }
.c-card .cap { font: 500 .6875rem/1.2 var(--f-text); color: #5E6872; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.c-card .img { grid-column: 1 / -1; background: #E4E8EA; min-height: 0; }
.c-card .fill { position: absolute; inset: 0; background: var(--c); opacity: 0; }
.c-cal { position: absolute; inset: 0; background: #fff; border: 1.5px solid var(--encre); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; visibility: hidden; }
.c-cal__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; }
.c-cal__head b { font: 700 .9375rem/1.1 var(--f-text); }
.c-cal__head small { margin-left: auto; font: 500 .6875rem/1 var(--f-mono); color: var(--encre-2); }
.c-cal__pin { width: 20px; height: 20px; flex: none; }
.c-cal__days, .c-cal__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0 12px; }
.c-cal__days span { font: 500 .6875rem/1 var(--f-mono); color: var(--encre-2); padding-bottom: 6px; }
.c-cal__grid { grid-template-rows: repeat(4, minmax(0, 1fr)); min-height: 0; padding-bottom: 8px; }
.c-cal__grid > span { border-top: 1px solid var(--filet); position: relative; min-height: 0; }
.c-cal__grid > span[data-c] > i { position: absolute; left: 0; right: 4px; top: 6px; height: min(40%, 22px); }
.c-cal__legend { list-style: none; margin: 0; padding: 8px 12px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; border-top: 1px solid var(--filet); }
.c-cal__legend li { display: flex; align-items: center; gap: 7px; font: 500 .75rem/1.2 var(--f-text); color: var(--encre); }
.c-cal__legend li i { width: 10px; height: 10px; background: var(--c); flex: none; }
.c-post { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 14px; visibility: hidden; }
.c-post__card { width: min(100%, var(--pw, 300px)); background: #fff; border: 1.5px solid var(--encre); padding: 12px; display: grid; gap: 8px; box-shadow: 0 24px 48px -28px rgba(18,26,33,.45); }
.c-post__meta { font: 500 .6875rem/1.2 var(--f-mono); color: var(--encre-2); }
.c-post__img { aspect-ratio: 16 / 7; background: linear-gradient(135deg, #DFF3F2, #BFE7E5); position: relative; }
.c-post__img::after { content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; background: #1F9A98; }
.c-post__card i { display: block; height: 7px; background: #E4E8EA; }
.c-post__card i + i { width: 70%; }
.c-steps { list-style: none; margin: 0; padding: 0; width: min(100%, var(--pw, 300px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.c-steps li { border-top: 3px solid #D6DCE0; padding-top: 7px; display: grid; gap: 3px; font: 600 .8125rem/1.15 var(--f-text); color: #8A949C; position: relative; }
.c-steps li small { font: 500 .6875rem/1.25 var(--f-text); color: #8A949C; }
.c-steps li.on { border-top-color: #1F9A98; color: var(--encre); }
.c-steps li.on small { color: #136B69; }
.c-steps .ok { position: absolute; right: 0; top: 6px; font: 700 .8125rem/1 var(--f-text); color: #136B69; opacity: 0; }
.c-steps li.on .ok { opacity: 1; }
.c-steps .pin { position: absolute; right: 0; top: 4px; width: 18px; height: 18px; }
/* Le point du i */
@media (min-width: 900px) { .c-post { --pw: 420px; } .c-steps li { font-size: .9375rem; } .c-steps li small { font-size: .75rem; } }
.c-dot { position: absolute; z-index: 5; left: 0; top: 0; width: 22px; height: 22px; background: #3CC2BF; visibility: hidden; pointer-events: none; }
.c-dot::after { content: ""; position: absolute; inset: -6px; border: 2px solid #1F9A98; opacity: 0; transform: scale(.6); }
.c-dot.ping::after { animation: cping .9s var(--ease) 1; }
@keyframes cping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
/* Ce que dit chaque temps */
/* sur téléphone, le bas de la scène laisse la place au bouton « Passer » du moteur */
.c-says { position: absolute; z-index: 3; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); bottom: 74px; display: grid; }
@media (min-width: 900px) { .c-says { left: 64px; right: auto; width: 40vw; bottom: auto; top: 50%; translate: 0 -50%; } }
.c-say { grid-area: 1 / 1; display: grid; gap: 12px; align-content: end; }
@media (min-width: 900px) { .c-say { align-content: center; } }
.c-say h1 { display: grid; gap: 14px; }
.c-say .giant { font-size: clamp(2.7rem, 12vw, 8.4rem); color: var(--encre); max-width: 9em; }
@media (min-width: 900px) { .c-say .giant { font-size: clamp(3.4rem, 6.4vw, 7.6rem); } }
.c-say .giant .no { color: #136B69; }
.c-say .t2 { color: var(--encre); }
.c-say p:not(.t2) { font-size: 1.0625rem; line-height: 1.45; color: var(--encre-2); max-width: 30em; }
.c-say .hint { font: 500 .8125rem/1.3 var(--f-mono); color: var(--encre-2); }
.c-s2, .c-s3 { visibility: hidden; }
@media (max-width: 899px) and (max-height: 700px) { .c-say .giant { font-size: clamp(2.4rem, 10.6vw, 3.2rem); } .c-say p:not(.t2) { font-size: 1rem; } }

/* ---- Seconde moitié ------------------------------------------------------- */
.c-intro { display: grid; gap: 28px; }
@media (min-width: 1000px) { .c-intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: end; } }
.c-intro .t1 { max-width: 8em; }
.c-intro .t1 em { font-style: normal; color: #136B69; }
/* Ce qu'on prend en main */
.c-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .c-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .c-services > li:first-child { grid-column: 1 / -1; } }
.c-svc { position: relative; background: #fff; border: 1.5px solid var(--line); padding: 24px 22px 22px; display: grid; gap: 10px; align-content: start; }
.c-svc .badge { position: absolute; right: 18px; top: 18px; width: 16px; height: 16px; background: #3CC2BF; }
.c-svc .n { font: 500 .8125rem/1 var(--f-mono); color: #136B69; }
.c-svc h3 { font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.05 var(--f-display); letter-spacing: -.025em; padding-right: 28px; }
.c-svc p { color: var(--fg-2); max-width: 40em; }
.c-svc .livrables { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 0; list-style: none; }
.c-svc .livrables li { font-size: .875rem; padding: 5px 10px; border: 1px solid var(--line); }
.c-after { margin-top: clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
/* Le circuit de validation */
.c-track[data-track] { position: relative; list-style: none; margin: 0; padding: 0 0 0 40px; display: grid; gap: 14px; max-width: 46rem; }
.c-track::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.c-track .bar { position: absolute; left: 11px; top: 14px; width: 2px; height: calc(100% - 28px); background: #1F9A98; transform-origin: 50% 0; }
.c-track.is-live .bar { transform: scaleY(0); }
.c-track:not(.is-live) .run { display: none; }
.c-track .run { position: absolute; left: 3px; top: 6px; width: 18px; height: 18px; background: #3CC2BF; box-shadow: 0 0 0 4px #fff; z-index: 1; }
.c-track > li.st { position: relative; padding: 16px 18px; border: 1.5px solid var(--line); background: #fff; display: grid; gap: 6px; transition: border-color .4s var(--ease), background .4s var(--ease); }
.c-track > li.st::before { content: ""; position: absolute; left: -34px; top: 22px; width: 10px; height: 10px; border: 2px solid #9AA5AD; background: #fff; transition: border-color .4s var(--ease), background .4s var(--ease); }
.c-track > li.st.on { border-color: #1F9A98; }
.c-track > li.st.on::before { border-color: #1F9A98; background: #1F9A98; }
.c-track .who { font: 500 .75rem/1 var(--f-mono); color: var(--encre-2); }
.c-track .who.vous { color: #136B69; }
.c-track h3 { font: 600 1.1875rem/1.25 var(--f-text); }
.c-track p { color: var(--fg-2); font-size: 1rem; }
.c-track .vous-mark { justify-self: start; font: 600 .8125rem/1 var(--f-text); padding: 6px 9px; background: #DFF3F2; color: #0F5553; }
/* Un événement, avant, pendant, après */
.c-event { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.c-event::before { content: ""; position: absolute; left: 72px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.c-event .bar { position: absolute; left: 72px; top: 8px; width: 2px; height: calc(100% - 16px); background: var(--encre); transform-origin: 50% 0; }
.c-event.is-live .bar { transform: scaleY(0); }
.c-event > li.st { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 26px; padding: 18px 0; transition: opacity .45s var(--ease); }
.c-event.is-live > li.st { opacity: .38; }
.c-event.is-live > li.st.on { opacity: 1; }
.c-event .j { font: 600 .9375rem/1.4 var(--f-mono); color: var(--encre); text-align: right; white-space: nowrap; }
.c-event > li.st::after { content: ""; position: absolute; left: 67px; top: 24px; width: 12px; height: 12px; background: #fff; border: 2px solid var(--encre); }
.c-event > li.st.on::after { background: #3CC2BF; border-color: #1F9A98; }
.c-event > li.st.day .j { color: #136B69; }
.c-event h3 { font: 700 1.375rem/1.15 var(--f-display); letter-spacing: -.02em; }
.c-event p { color: var(--fg-2); }
@media (min-width: 900px) {
  .c-event { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-top: 36px; }
  .c-event::before, .c-event .bar { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; }
  .c-event .bar { transform-origin: 0 50%; width: 100%; }
  .c-event.is-live .bar { transform: scaleX(0); }
  .c-event > li.st { grid-template-columns: none; gap: 10px; padding: 0; align-content: start; }
  .c-event > li.st::after { left: 0; top: -36px; }
  .c-event .j { text-align: left; }
}
.c-event-note { margin-top: 26px; }
/* L'exemple */
.c-case { display: grid; gap: 28px; border-top: 3px solid var(--encre); padding-top: 28px; }
@media (min-width: 1000px) { .c-case { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } }
.c-case .tag { justify-self: start; font: 500 .75rem/1.3 var(--f-mono); padding: 6px 9px; background: #FFF6D6; color: var(--encre); }
.c-case h3 { font: 750 clamp(2rem, 4.6vw, 3.4rem)/.95 var(--f-display); letter-spacing: -.035em; }
.c-case .rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-case .rules li { padding-left: 26px; position: relative; color: var(--fg-2); }
.c-case .rules li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 2px; background: var(--encre); }
.c-case .phase { display: grid; gap: 12px; }
.c-case .phase + .phase { margin-top: 26px; }
.c-case .phase b { font: 600 1.0625rem/1.3 var(--f-text); }
.c-case .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.c-case .chips li { font-size: .9375rem; padding: 8px 12px; background: #F2F8F8; border-left: 3px solid #3CC2BF; }
/* « Parlons de votre communication. » : le mot est long, le titre du formulaire tient dans sa colonne */
.demande--com #h-demande { font-size: clamp(2.4rem, 7.6vw, 4.4rem); }
@media (min-width: 1000px) { .demande--com #h-demande { font-size: clamp(2.6rem, 3.9vw, 4.4rem); } }
.is-static .c-hero .pin-stage { padding: calc(var(--bar-h) + 40px) 20px 60px; display: grid; gap: 32px; }
.is-static .c-board { position: relative; inset: auto; height: 420px; }
.is-static .c-says, .is-static .c-say { position: relative; inset: auto; translate: none; visibility: visible; grid-area: auto; width: auto; }
.is-static .c-says { gap: 32px; }
.is-static .c-cards, .is-static .c-noise, .is-static .c-dot, .is-static .c-cal, .is-static .c-post { display: none; }
.is-static .c-track > li.st, .is-static .c-event > li.st { opacity: 1; }
.is-static .c-track .bar, .is-static .c-event .bar { transform: none; }