/* Maquettes de téléphone et blocs d'écran. */

.preview { display: grid; justify-items: center; gap: 14px; margin: 0; }
.preview__caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  max-width: 360px; font-size: var(--fs-xs); color: var(--mute); text-align: center;
}

.phone {
  position: relative;
  width: min(100%, 360px);
  padding: 8px 9px 10px;
  border-radius: 46px;
  background: var(--navy);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgb(255 255 255 / 8%);
  font-size: 14px; line-height: 1.45;
}
.phone__status {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 22px 2px;
  color: var(--white); font-size: 13px; font-weight: 800;
}
.phone__island { width: 90px; height: 24px; border-radius: 20px; background: #000; }
.phone__battery { position: relative; width: 24px; height: 12px; border: 2px solid var(--white); border-radius: 4px; }
.phone__battery::after { content: ''; position: absolute; inset: 1px 6px 1px 1px; border-radius: 1px; background: var(--mint); }

.phone__appbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px;
  border-radius: 36px 36px 0 0; border-bottom: 1px solid var(--line);
  background: var(--white);
}
.phone__app-name { font-size: 15px; font-weight: 800; line-height: 1.2; }
.phone__app-context { font-size: 12px; color: var(--mute); }

.phone__screens { background: #f9fbfd; }
.screen { padding: 16px 14px 20px; }
.screen:focus-visible { outline-offset: -3px; }
.screen > * + * { margin-top: 12px; }
.js .screen { height: clamp(420px, 62vh, 540px); overflow-y: auto; overscroll-behavior: contain; }
html:not(.js) .screen + .screen { border-top: 2px dashed var(--line-strong); }
.screen__title { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }

.phone__tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 6px 8px 12px;
  border-top: 1px solid var(--line); border-radius: 0 0 36px 36px;
  background: var(--white);
}
.phone__tabs [role='tab'] {
  display: grid; justify-items: center; align-content: center; gap: 3px;
  min-height: 52px; padding: 6px 2px;
  border: 0; border-radius: 14px; background: none; color: var(--mute);
  font-size: 12px; font-weight: 700; line-height: 1.15; cursor: pointer;
}
.phone__tabs [role='tab'] .icon { width: 20px; height: 20px; }
.phone__tabs [role='tab'][aria-selected='true'] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }

/* ------------------------------------------------------------ Blocs communs */

.b-title { margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.b-meta { font-size: 13px; color: var(--mute); }
.b-meta .icon { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.b-list__title { font-weight: 700; color: var(--navy); }
.b-count { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.b-live { font-size: 12.5px; font-weight: 700; color: var(--navy-80); }
.b-live:empty { display: none; }
.phone .badge { padding: 3px 9px 3px 6px; font-size: 11.5px; }

.b-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 10px; background: #eef3f9;
  font-size: 12.5px; color: var(--navy-80);
}
.b-note .icon { width: 16px; height: 16px; margin-top: 1px; }
.b-note--demo { background: var(--white); border: 1px dashed #aab6c7; }

.b-list { display: grid; gap: 8px; }
.b-list__item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white);
}

.b-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--accent); border-radius: 14px;
  background: var(--accent); color: var(--accent-on);
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.b-btn .icon { width: 20px; height: 20px; }
.b-btn:hover { filter: brightness(0.95); }
.b-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.b-btn--small { width: auto; min-height: var(--tap); padding: 0 14px; font-size: 13px; border-radius: 12px; }
.b-btn--small[aria-pressed='true'] { background: var(--white); color: var(--accent-ink); }
.b-btn--small[aria-pressed='true']::before { content: '✓'; }
.b-action { display: grid; gap: 6px; }

/* Cases à cocher et interrupteurs (vraies cases natives, stylées) */
.b-checklist ul { display: grid; gap: 6px; }
.check {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  min-height: var(--tap); padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: 7px; background: var(--white);
}
.check__box .icon { width: 15px; height: 15px; opacity: 0; color: var(--accent-on); stroke-width: 3; }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box .icon { opacity: 1; }
.check input:checked ~ .check__label { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.check input:focus-visible + .check__box { outline: 3px solid var(--navy); outline-offset: 2px; }

.b-checklist--switch .check { align-items: center; }
.b-checklist--switch .check__box { position: relative; display: block; order: 2; width: 44px; height: 26px; margin-left: auto; border-radius: 999px; }
.b-checklist--switch .check__box .icon { position: absolute; left: 5px; top: 50%; width: 13px; height: 13px; transform: translateY(-50%); }
.b-checklist--switch .check__box::after {
  content: ''; position: absolute; left: 2px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--line-strong); transition: transform 0.2s var(--ease);
}
.b-checklist--switch .check input:checked + .check__box::after { background: var(--white); transform: translateX(18px); }
.b-checklist--switch .check input:checked ~ .check__label { color: var(--navy); text-decoration: none; }

/* ------------------------------------------------------------ Photos (rendu « pellicule ») */

.film-photo { position: relative; overflow: hidden; border-radius: 10px; background: #221f1c; aspect-ratio: 4 / 3; }
.film-photo .vignette { width: 100%; height: 100%; filter: sepia(0.22) saturate(1.15) contrast(1.06); }
.film-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.32; mix-blend-mode: multiply;
  box-shadow: inset 0 0 28px rgb(0 0 0 / 35%);
}
.film-photo--clean::after { display: none; }
.film-photo--clean .vignette { filter: none; }
.film-photo__stamp {
  position: absolute; right: 8px; bottom: 6px; z-index: 1;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: #ff9d42; text-shadow: 0 0 4px rgb(255 120 0 / 60%);
}

.b-camera { display: grid; gap: 10px; }
.b-camera__viewfinder { border-radius: 16px; }
.b-camera__filter {
  position: absolute; left: 8px; top: 8px; z-index: 1;
  padding: 3px 9px; border-radius: 999px; background: rgb(0 0 0 / 50%); color: var(--white);
  font-size: 11px; font-weight: 800;
}
.b-camera__flash { position: absolute; inset: 0; z-index: 2; background: var(--white); opacity: 0; pointer-events: none; }
.is-flashing .b-camera__flash { animation: flash 0.45s ease-out; }
@keyframes flash { from { opacity: 0.95; } to { opacity: 0; } }
.b-camera__counter { text-align: center; }
.b-camera__counter strong { font-size: 20px; color: var(--accent-ink); }
.b-btn--shutter { border-radius: 999px; }
.b-camera__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.b-camera__strip:empty { display: none; }
.strip-frame { width: 28px; height: 21px; border: 3px solid #3d3731; border-radius: 4px; background: #221f1c; animation: pop 0.3s var(--ease); }
.b-camera .b-link { justify-self: center; }

.b-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
.b-photo { padding: 5px 5px 8px; border-radius: 8px; background: var(--white); box-shadow: 0 1px 2px rgb(4 26 62 / 12%), 0 4px 10px rgb(4 26 62 / 8%); }
.b-gallery li:nth-child(odd) .b-photo { rotate: -1.4deg; }
.b-gallery li:nth-child(even) .b-photo { rotate: 1.1deg; }
.b-photo .film-photo { border-radius: 4px; }
.b-photo figcaption { padding: 6px 2px 0; font-size: 11.5px; font-weight: 700; color: var(--navy-60); }
.film-photo--covered {
  display: grid; place-items: center; align-content: center; gap: 4px; padding: 6px;
  background: repeating-linear-gradient(45deg, #2a2622 0 10px, #332e29 10px 20px);
  color: #eadfcd; font-size: 11px; font-weight: 700; text-align: center;
}
.film-photo--covered::after { display: none; }
.film-photo--covered .icon { width: 20px; height: 20px; }

/* ------------------------------------------------------------ Listes et informations */

.b-timeline li {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.b-timeline__time, .b-agenda__time { font-size: 13px; font-weight: 800; color: var(--accent-ink); }

.b-info { display: grid; gap: 8px; }
.b-info > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.b-info dt { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.b-info dd { margin-top: 2px; font-weight: 600; }

.b-docs { display: grid; gap: 8px; }
.b-docs li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.b-docs .icon { width: 22px; height: 22px; color: var(--accent-ink); }

.b-agenda section + section { margin-top: 12px; }
.b-agenda__day { margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.b-agenda ul { display: grid; gap: 6px; }
.b-agenda__item {
  display: grid; grid-template-columns: 52px 1fr; gap: 4px 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white);
}
.b-agenda__item .badge { grid-column: 2; justify-self: start; }

.b-news li, .b-team-group { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.b-news li + li, .b-team-group + .b-team-group { margin-top: 8px; }
.b-news__date { font-size: 12px; font-weight: 800; color: var(--accent-ink); }

.b-messages li { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--accent-soft); }
.b-messages li + li { margin-top: 8px; }

.b-team-group__role { margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.b-team-group ul { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.b-team-group li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.b-team-group .avatar { width: 28px; height: 28px; font-size: 11px; }

.b-menu section + section { margin-top: 14px; }
.b-menu__section {
  margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
  font-family: Georgia, 'Times New Roman', serif; font-size: 18px; font-style: italic; font-weight: 700; color: var(--accent-ink);
}
.b-menu li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.b-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.b-tag { padding: 2px 8px; border-radius: 999px; background: #e5f3eb; color: #1d6a40; font-size: 11px; font-weight: 800; }

.b-highlight { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.b-highlight > .film-photo { border-radius: 0; }
.b-highlight > p { padding-inline: 12px; }
.b-highlight > p:last-child { padding-bottom: 12px; }
.b-highlight__label { display: flex; align-items: center; gap: 6px; padding-top: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.b-highlight__label .icon { width: 14px; height: 14px; }
.b-highlight__title { font-size: 16px; font-weight: 800; }

/* ------------------------------------------------------------ Blocs interactifs */

.b-slots { display: grid; gap: 8px; }
.b-slot { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.b-slot > .badge, .b-slot > .b-btn { justify-self: start; }
.b-slot__status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--navy-80); }

progress {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--line);
}
progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.b-slot__status progress { width: 88px; height: 8px; }

.b-progress li + li { margin-top: 12px; }
.b-progress__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-bottom: 6px; }

.b-rsvp { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.b-rsvp legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-weight: 800; }
.b-rsvp__options { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b-rsvp__option { position: relative; }
.b-rsvp__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.b-rsvp__option span {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--tap); padding: 0 6px;
  border: 1.5px solid var(--line-strong); border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; text-align: center;
}
.b-rsvp__option input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.b-rsvp__option input:checked + span::before { content: '✓'; }
.b-rsvp__option input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.b-rsvp .b-live { margin-top: 8px; }

.b-stamps { display: grid; gap: 10px; }
.b-stamps__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stamp {
  display: grid; place-items: center; aspect-ratio: 1;
  border: 2px dashed var(--line-strong); border-radius: 50%; background: var(--white);
  font-size: 13px; font-weight: 800; color: var(--mute);
}
.stamp .icon { width: 18px; height: 18px; stroke-width: 3; }
.stamp.is-filled { border-style: solid; border-color: var(--accent); background: var(--accent); color: var(--accent-on); }
.stamp.is-new { animation: pop 0.35s var(--ease); }
@keyframes pop { from { transform: scale(0.6); } to { transform: scale(1); } }
.b-stamps .b-link { justify-self: center; }

.b-photos ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.b-photo-slot {
  display: grid; justify-items: center; gap: 4px;
  padding: 16px 8px; border: 2px dashed var(--line-strong); border-radius: 12px;
  background: var(--white); color: var(--mute); text-align: center;
}
.b-photo-slot .icon { width: 24px; height: 24px; }
.b-photos .b-note { margin-top: 8px; }

.b-form { display: grid; gap: 10px; }
.b-field { display: grid; gap: 4px; }
.b-field label { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.b-field input { width: 100%; min-height: var(--tap); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f4f7fb; font-size: 16px; }

.b-chart svg { width: 100%; height: auto; overflow: visible; }
.b-chart__axis { stroke: var(--line-strong); stroke-width: 1.5; }
.b-chart__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.b-chart__dots circle { fill: var(--white); stroke: var(--accent); stroke-width: 2; }
.b-chart__value { font-size: 12px; font-weight: 800; fill: var(--accent-ink); }

.b-match { display: grid; gap: 12px; }
.b-match__teams { display: flex; align-items: center; justify-content: space-around; gap: 8px; padding: 14px 8px; border-radius: 14px; background: var(--accent-soft); }
.b-team { display: grid; justify-items: center; gap: 6px; width: 40%; text-align: center; }
.b-team__badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-on); font-weight: 800; }
.b-team--away .b-team__badge { background: var(--white); color: var(--navy); border: 2px solid var(--line-strong); }
.b-match__vs { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }

.b-qr { display: grid; justify-items: center; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-align: center; }
.b-qr__code { width: 168px; height: 168px; color: var(--navy); }