:root{
  --navy:#073a78;
  --navy-deep:#062d62;
  --blue:#1588df;
  --sky:#eaf6ff;
  --gold:#ffbd18;
  --gold-soft:#fff3c9;
  --mint:#dff8ef;
  --cyan:#dff5fb;
  --coral:#ffe2df;
  --violet:#efe2ff;
  --green:#0aae75;
  --paper:#ffffff;
  --background:#edf6fd;
  --muted:#6f819b;
  --border:#e2ebf5;
  --shadow:0 10px 34px rgba(5,49,99,.07);
}

*{
  box-sizing:border-box;
}

html{
  background:#dfeef9;
}

body{
  margin:0;
  color:var(--navy-deep);
  background:#dfeef9;
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size:16px;
}

button{
  font:inherit;
}

.phone{
  width:100%;
  max-width:480px;
  min-height:100vh;
  margin:0 auto;
  background:
    linear-gradient(
      180deg,
      #f8fbff 0,
      #edf6fd 100%
    );
  box-shadow:
    0 0 60px rgba(0,41,82,.08);
}

.appbar{
  height:72px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #edf2f7;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(12px);
}

.brand-small{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-ball{
  width:44px;
  height:44px;
  border-radius:50%;
  background:
    linear-gradient(
      145deg,
      #092e68,
      #166db4
    );
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:.8;
  border:3px solid white;
  box-shadow:
    0 0 0 3px var(--gold);
}

.brand-number{
  font-size:18px;
  font-weight:950;
}

.brand-unis{
  margin-top:4px;
  font-size:6px;
  font-weight:900;
  letter-spacing:.14em;
}

.brand-copy{
  display:flex;
  flex-direction:column;
}

.brand-copy strong{
  font-size:16px;
  letter-spacing:.03em;
}

.brand-copy span{
  margin-top:2px;
  color:#8091a5;
  font-size:10px;
}

.demo-pill{
  padding:7px 11px;
  border-radius:999px;
  background:var(--gold-soft);
  color:#9b6800;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.community-cover{
  position:relative;
  height:150px;
  padding:20px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 72% 15%,
      rgba(255,255,255,.92),
      transparent 23%
    ),
    linear-gradient(
      145deg,
      #cdeaff,
      #f5fbff
    );
}

.community-cover::before{
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  bottom:-28px;
  height:95px;
  border-radius:50%;
  background:
    linear-gradient(
      180deg,
      rgba(120,184,220,.13),
      rgba(56,143,193,.16)
    );
}

.cover-logo{
  position:relative;
  z-index:2;
  width:64px;
  height:64px;
  border-radius:22px;
  background:
    linear-gradient(
      145deg,
      var(--navy-deep),
      #1268ab
    );
  border:4px solid white;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 8px 22px rgba(5,49,99,.14);
}

.cover-number{
  font-size:30px;
  font-weight:950;
  line-height:.75;
}

.cover-unis{
  font-size:9px;
  margin-top:8px;
  font-weight:900;
}

.cover-slogan{
  z-index:2;
  display:flex;
  flex-direction:column;
  font-size:12px;
  line-height:1.25;
  margin-top:7px;
}

.community-note{
  position:absolute;
  right:18px;
  top:22px;
  text-align:right;
  transform:rotate(-4deg);
  color:var(--navy);
  font-size:13px;
  font-weight:750;
  font-style:italic;
}

.community-note span,
.hand-note span{
  color:var(--gold);
  font-style:normal;
}

.scene{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:72px;
  opacity:.22;
}

.person{
  position:absolute;
  bottom:4px;
  width:7px;
  height:35px;
  background:#176ba5;
  border-radius:8px;
}

.person::before{
  content:"";
  position:absolute;
  left:-2px;
  top:-8px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#176ba5;
}

.p1{left:32%}
.p2{left:47%;height:41px}
.p3{left:67%;height:33px}
.p4{left:81%;height:38px}

.page{
  padding:0 14px 100px;
}

.hero-card{
  min-height:250px;
  position:relative;
  margin-top:-10px;
  padding:25px 21px;
  overflow:hidden;
  border-radius:28px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      #f6fbff
    );
  border:1px solid white;
  box-shadow:var(--shadow);
}

.hero-copy{
  max-width:70%;
  position:relative;
  z-index:2;
}

.hero-kicker{
  color:#2375b2;
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
}

.hero-card h1{
  margin:12px 0 0;
  font-size:32px;
  line-height:1.02;
  color:var(--navy-deep);
}

.gold-line{
  width:88px;
  height:4px;
  margin:14px 0 20px;
  border-radius:5px;
  background:
    linear-gradient(
      90deg,
      var(--gold),
      #ffd764
    );
}

.hero-card h2{
  margin:0 0 7px;
  font-size:20px;
}

.hero-card p{
  margin:0;
  max-width:250px;
  color:#47617f;
  font-size:16px;
  line-height:1.55;
}

.petanque-art{
  position:absolute;
  width:165px;
  height:125px;
  right:-12px;
  bottom:-4px;
}

.boule{
  position:absolute;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 32% 25%,
      #d9e1e8,
      #77889a 40%,
      #34485e 85%
    );
  box-shadow:
    inset -8px -9px 16px rgba(0,0,0,.18),
    0 8px 19px rgba(0,28,62,.15);
}

.boule::before,
.boule::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  height:2px;
  background:
    rgba(255,255,255,.5);
  border-radius:50%;
  transform:rotate(-18deg);
}

.boule::before{top:43%}
.boule::after{top:57%}

.boule-one{
  width:90px;
  height:90px;
  left:2px;
  bottom:7px;
}

.boule-two{
  width:79px;
  height:79px;
  right:4px;
  bottom:0;
}

.cochonnet{
  position:absolute;
  width:26px;
  height:26px;
  border-radius:50%;
  left:57px;
  bottom:1px;
  background:
    radial-gradient(
      circle at 30% 25%,
      #ffe475,
      #e5a600 65%,
      #bb7e00
    );
  box-shadow:
    0 4px 10px rgba(135,91,0,.23);
}

.info-list{
  display:grid;
  gap:11px;
  margin-top:17px;
}

.info-card,
.status-card{
  width:100%;
  min-height:82px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  color:inherit;
  border:1px solid var(--border);
  border-radius:20px;
  background:white;
  box-shadow:
    0 5px 16px rgba(5,49,99,.035);
}

.info-card{
  cursor:pointer;
}

.round-icon{
  width:49px;
  height:49px;
  flex:0 0 49px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:900;
}

.icon-blue{background:#deefff}
.icon-gold{background:#fff0c4}
.icon-cyan{background:#dff6fb}
.icon-coral{background:#ffe3e0;color:#e34543}
.icon-green{background:#daf5e9;color:#049d67}

.info-copy{
  min-width:0;
  flex:1;
}

.info-copy strong,
.status-card strong{
  display:block;
  font-size:16px;
  line-height:1.35;
}

.info-copy span,
.status-card span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.chevron{
  color:var(--navy);
  font-size:28px;
  line-height:1;
}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:28px 3px 14px;
}

.section-heading.compact{
  margin-top:35px;
}

.section-eyebrow{
  display:block;
  margin-bottom:3px;
  color:#7290ad;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
}

.section-heading h3{
  margin:0;
  font-size:27px;
  color:var(--navy-deep);
}

.hand-note{
  max-width:170px;
  text-align:right;
  color:var(--navy);
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  font-style:italic;
  transform:rotate(-3deg);
}

.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.action-card{
  min-width:0;
  min-height:116px;
  padding:14px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  text-align:left;
  color:inherit;
  border:1px solid var(--border);
  border-radius:19px;
  background:white;
  box-shadow:
    0 5px 15px rgba(5,49,99,.035);
  cursor:pointer;
}

.action-card.wide{
  grid-column:1 / -1;
  min-height:86px;
}

.action-icon,
.metric-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-size:19px;
  font-weight:900;
}

.blue{background:#dcefff;color:#1583d8}
.gold{background:#fff0c4;color:#dc9e00}
.mint{background:#dff7ef;color:#0aa97b}
.cyan{background:#ddf7fa;color:#06a4b3}
.coral{background:#ffe1de;color:#e74441}
.red{background:#ffe0dd;color:#df3e38}
.violet{background:#efe3ff;color:#8b46df}
.green{background:#ddf7e8;color:#00a568}

.action-card strong{
  display:block;
  color:var(--navy-deep);
  font-size:16px;
  line-height:1.35;
}

.action-card span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.action-card b{
  font-size:24px;
  color:var(--navy);
}

.disabled{
  cursor:default;
}

.action-card.disabled{
  opacity:.82;
}

.activities-panel{
  scroll-margin-top:85px;
}

.activities{
  display:grid;
  gap:10px;
}

.activity-card,
.activity-placeholder{
  padding:17px;
  border:1px solid var(--border);
  border-radius:20px;
  background:white;
  box-shadow:
    0 5px 15px rgba(5,49,99,.035);
}

.activity-card strong{
  display:block;
  font-size:18px;
  line-height:1.35;
}

.activity-meta{
  margin-top:7px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.activity-status{
  display:inline-flex;
  margin-top:10px;
  padding:6px 9px;
  border-radius:999px;
  background:#e5f2ff;
  color:#246da7;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
}

.dashboard-cards{
  display:grid;
  gap:11px;
  margin-top:17px;
}

.status-card.success strong{
  color:#049d67;
}

.overview-card{
  margin-top:12px;
  padding:15px;
  background:white;
  border:1px solid var(--border);
  border-radius:20px;
}

.overview-title{
  display:flex;
  align-items:center;
  gap:10px;
}

.metrics{
  margin-top:13px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.metric{
  min-width:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#f9fcff;
}

.metric span{
  display:block;
  margin-top:8px;
  color:#607690;
  font-size:13px;
}

.metric strong{
  display:block;
  margin-top:2px;
  font-size:25px;
}

.demo-warning{
  margin:12px 2px 1px;
  color:#8392a5;
  font-size:12px;
  line-height:1.45;
}

.bottom-nav{
  position:sticky;
  bottom:0;
  z-index:20;
  min-height:73px;
  padding:
    6px
    max(8px,env(safe-area-inset-right))
    calc(6px + env(safe-area-inset-bottom))
    max(8px,env(safe-area-inset-left));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:
    rgba(255,255,255,.96);
  border-top:1px solid var(--border);
  backdrop-filter:blur(14px);
}

.nav-item{
  padding:6px 2px;
  border:0;
  background:none;
  color:#7b8ca1;
  cursor:pointer;
}

.nav-item.active{
  color:#0d83d9;
  font-weight:900;
}

.nav-icon{
  display:block;
  margin-bottom:2px;
  font-size:22px;
}

.nav-item span:last-child{
  font-size:14px;
  line-height:1.25;
}

@media (max-width:390px){

  .hero-card h1{
    font-size:28px;
  }

  .hero-copy{
    max-width:72%;
  }

  .hand-note{
    display:none;
    font-size:12px;
    line-height:1.4;
}

  .action-grid{
    grid-template-columns:1fr;
  }

  .action-card{
    min-height:88px;
  }

  .action-card.wide{
    grid-column:auto;
  }

}

[hidden]{
  display:none!important;
}


/* =========================================================
   UX-L2 P6-P2-P1 — MES RAPPELS
   ========================================================= */

.reminder-back{
  margin:10px 2px 10px;
  padding:10px 15px;
  border:1px solid var(--border);
  border-radius:999px;
  background:white;
  color:var(--navy);
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  box-shadow:
    0 4px 12px rgba(5,49,99,.04);
  min-height:44px;
}

.reminders-hero{
  margin-top:0;
}

.reminder-overview{
  margin-top:16px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--border);
  border-radius:20px;
  background:white;
  box-shadow:
    0 5px 16px rgba(5,49,99,.035);
}

.reminder-overview > div:last-child{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.reminder-overview span{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.reminder-overview strong{
  margin-top:2px;
  color:var(--navy-deep);
  font-size:32px;
  line-height:1;
}

.reminders-list{
  display:grid;
  gap:10px;
}

.reminder-card,
.reminder-placeholder{
  width:100%;
  padding:16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:white;
  box-shadow:
    0 5px 15px rgba(5,49,99,.035);
}

.reminder-card{
  display:block;
  text-align:left;
  color:inherit;
  cursor:pointer;
}

.reminder-card.action-new{
  border-left:4px solid #df3e38;
}

.reminder-card.action-seen{
  border-left:4px solid #e4a400;
}

.reminder-card.information-new{
  border-left:4px solid #1588df;
}

.reminder-card.information-seen{
  border-left:4px solid #a7b4c4;
}

.reminder-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.reminder-state{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:7px 11px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}

.reminder-state.action-new{
  background:#ffe5e2;
  color:#bd332f;
}

.reminder-state.action-seen{
  background:#fff1c6;
  color:#946900;
}

.reminder-state.information-new{
  background:#e5f2ff;
  color:#246da7;
}

.reminder-state.information-seen{
  background:#edf1f5;
  color:#65788e;
}

.reminder-chevron{
  color:var(--navy);
  font-size:25px;
  line-height:1;
}

.reminder-title{
  display:block;
  margin-top:12px;
  color:var(--navy-deep);
  font-size:18px;
  line-height:1.35;
}

.reminder-meta{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.reminder-placeholder{
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.reminder-empty{
  color:#547087;
}

.reminder-detail-card{
  margin-top:8px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:white;
  box-shadow:var(--shadow);
}

.reminder-detail-card h2{
  margin:10px 0 0;
  color:var(--navy-deep);
  font-size:28px;
  line-height:1.2;
}

.reminder-detail-kind{
  margin:4px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.45;
}

.reminder-detail-fields{
  margin-top:14px;
  display:grid;
  gap:8px;
}

.reminder-detail-row{
  padding:12px 13px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-radius:14px;
  background:#f7fbff;
}

.reminder-detail-row span{
  color:var(--muted);
  font-size:14px;
}

.reminder-detail-row strong{
  max-width:58%;
  text-align:right;
  color:var(--navy-deep);
  font-size:16px;
  line-height:1.45;
}

.reminder-change{
  margin-top:12px;
  padding:13px;
  display:grid;
  gap:5px;
  border-radius:15px;
  background:var(--gold-soft);
}

.reminder-change strong{
  font-size:16px;
}

.reminder-change span{
  color:#715a20;
  font-size:15px;
  line-height:1.5;
}

.reminder-detail-message{
  margin:12px 1px 0;
  color:#48647e;
  font-size:16px;
  line-height:1.65;
  white-space:pre-wrap;
}

.reminder-readonly{
  margin-top:12px;
  padding:13px 14px;
  display:grid;
  gap:5px;
  border:1px solid #dce9f5;
  border-radius:15px;
  background:#f4f9fd;
}

.reminder-readonly strong{
  font-size:16px;
  line-height:1.35;
}

.reminder-readonly span{
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}



/* =========================================================
   UX-L2 P6-P3 — LISIBILITE IMMEDIATE
   ========================================================= */

.reminder-detail-label{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.reminder-detail-icon{
  flex:0 0 auto;
  font-size:21px;
  line-height:1;
}

.reminder-detail-label-text{
  color:#415f7a;
  font-size:15px;
  font-weight:650;
  line-height:1.4;
}

.reminder-action-panel{
  margin-top:14px;
  padding:15px;
  display:grid;
  gap:6px;
  border-radius:17px;
}

.reminder-action-panel.action{
  border-left:5px solid #d92e2a;
  background:#fff1f0;
}

.reminder-action-panel.information{
  border-left:5px solid #1588df;
  background:#eef7ff;
}

.reminder-action-panel strong{
  color:var(--navy-deep);
  font-size:17px;
  line-height:1.35;
}

.reminder-action-panel.action strong{
  color:#b8201c;
}

.reminder-action-panel span{
  color:#203f60;
  font-size:16px;
  line-height:1.55;
}

@media (max-width:480px){
  .reminder-detail-row{
    flex-wrap:wrap;
    padding:12px 13px;
    gap:12px;
}

  .reminder-detail-row strong{
    max-width:100%;
    width:100%;
    padding-left:31px;
    text-align:left;
  }
}



/* =========================================================
   UX-L2 P6-P3-P4 — NAV SAFE AREA
   Le contenu important peut toujours défiler
   entièrement au-dessus de la navigation basse.
   ========================================================= */

#member-page,
#reminders-page,
#reminder-detail-page,
#dashboard-page{
  padding-bottom:
    calc(
      108px
      + env(safe-area-inset-bottom)
    );
}



/* =========================================================
   UX-L2 P7 — MES ACTIVITES
   Carte entière cliquable + fiche lisible d'un coup d'œil
   ========================================================= */

.activity-card-button{
  width:100%;
  appearance:none;
  display:block;
  text-align:left;
  color:inherit;
  font:inherit;
  cursor:pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.activity-card-button:hover{
  border-color:#bdd8ef;
  box-shadow:
    0 8px 22px rgba(5,49,99,.08);
}

.activity-card-button:active{
  transform:translateY(1px);
}

.activity-card-button:focus-visible{
  outline:3px solid rgba(27,139,226,.24);
  outline-offset:2px;
}

.activity-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.activity-type-badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef7ff;
  color:#145f9d;
  font-size:14px;
  font-weight:850;
  line-height:1.3;
}

.activity-card-chevron{
  flex:0 0 auto;
  color:var(--navy);
  font-size:25px;
  font-weight:800;
  line-height:1;
}

.activity-card-title{
  margin-top:10px;
}

.activity-member-states{
  margin-top:11px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.activity-status.available,
.activity-status.confirmed{
  background:#e9f8ef;
  color:#176b3c;
}

.activity-status.maybe{
  background:#fff4d7;
  color:#8a6111;
}

.activity-status.unavailable,
.activity-status.cancelled{
  background:#fff0ef;
  color:#a92b27;
}

.activity-status.neutral{
  background:#eef3f7;
  color:#526a80;
}

.activity-back{
  margin:10px 2px 10px;
  min-height:44px;
  padding:10px 15px;
  border:1px solid var(--border);
  border-radius:999px;
  background:white;
  color:var(--navy);
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  box-shadow:
    0 4px 12px rgba(5,49,99,.04);
}

.activity-detail-card{
  margin-top:8px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:white;
  box-shadow:var(--shadow);
}

.activity-detail-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:9px;
}

.activity-lifecycle{
  color:#48647e;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
}

.activity-detail-card h2{
  margin:12px 0 0;
  color:var(--navy-deep);
  font-size:28px;
  line-height:1.2;
}

.activity-detail-fields{
  margin-top:16px;
  display:grid;
  gap:8px;
}

.activity-member-panel{
  margin-top:14px;
  padding:15px;
  display:grid;
  gap:10px;
  border-left:5px solid #1689dc;
  border-radius:17px;
  background:#eef7ff;
}

.activity-member-panel-title{
  color:var(--navy-deep);
  font-size:17px;
  line-height:1.35;
}

.activity-member-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.activity-member-row > span{
  color:#49667f;
  font-size:15px;
  line-height:1.45;
}

.activity-member-value{
  max-width:62%;
  text-align:right;
  color:var(--navy-deep);
  font-size:16px;
  line-height:1.45;
}

.activity-member-value.available,
.activity-member-value.confirmed{
  color:#176b3c;
}

.activity-member-value.maybe{
  color:#8a6111;
}

.activity-member-value.unavailable,
.activity-member-value.cancelled{
  color:#a92b27;
}

.activity-member-value.neutral{
  color:#526a80;
}

.activity-topic-link{
  margin-top:14px;
  min-height:48px;
  padding:12px 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #c8dff1;
  border-radius:15px;
  background:#f5faff;
  color:#075ca2;
  font-size:16px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
}

#activity-detail-page{
  padding-bottom:
    calc(
      108px
      + env(safe-area-inset-bottom)
    );
}

@media (max-width:480px){
  .activity-member-row{
    display:grid;
    gap:4px;
  }

  .activity-member-value{
    max-width:100%;
    text-align:left;
  }
}



/* =========================================================
   UX-L2 P7-P5 — CONFIRMATION J-1
   ========================================================= */

.activity-member-value.attention{
  color:#956100;
}


/* =========================================================
   UX-L2 P8-P4 — CALENDRIER 13 UNIS
   Lecture immédiate, gros contrôles, aucun geste d'écriture.
   ========================================================= */

#calendar-page{
  padding-bottom:
    calc(
      108px
      + env(safe-area-inset-bottom)
    );
}

.calendar-back{
  margin:10px 2px 10px;
  min-height:44px;
  padding:10px 15px;
  border:1px solid var(--border);
  border-radius:999px;
  background:white;
  color:var(--navy);
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  box-shadow:
    0 4px 12px rgba(5,49,99,.04);
}

.calendar-header-card{
  padding:19px;
  border:1px solid var(--border);
  border-radius:23px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      #f4faff
    );
  box-shadow:var(--shadow);
}

.calendar-header-card h1{
  margin:6px 0 0;
  color:var(--navy-deep);
  font-size:28px;
  line-height:1.2;
}

.calendar-header-card p{
  margin:9px 0 0;
  color:#48647e;
  font-size:16px;
  line-height:1.55;
}

.calendar-month-nav{
  margin-top:17px;
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);
  align-items:center;
  gap:8px;
}

.calendar-month-button{
  min-height:48px;
  padding:10px 12px;
  border:1px solid #c8dff1;
  border-radius:14px;
  background:white;
  color:#075ca2;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  cursor:pointer;
}

.calendar-month-button:last-child{
  text-align:right;
}

.calendar-month-button:first-child{
  text-align:left;
}

.calendar-month-button:disabled{
  opacity:.42;
  cursor:default;
}

.calendar-month-label{
  min-width:112px;
  color:var(--navy-deep);
  font-size:18px;
  font-weight:900;
  line-height:1.3;
  text-align:center;
}

.calendar-filters{
  margin-top:14px;
  padding:2px 0 5px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.calendar-filter{
  flex:0 0 auto;
  min-height:44px;
  padding:9px 14px;
  border:1px solid #cbddeb;
  border-radius:999px;
  background:white;
  color:#365a79;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  cursor:pointer;
}

.calendar-filter.active{
  border-color:#1689dc;
  background:#e8f5ff;
  color:#075ca2;
  box-shadow:
    inset 0 0 0 1px
    rgba(22,137,220,.08);
}

.calendar-list{
  margin-top:16px;
  display:grid;
  gap:19px;
}

.calendar-placeholder{
  padding:18px;
  border:1px solid var(--border);
  border-radius:20px;
  background:white;
  color:#48647e;
  font-size:16px;
  line-height:1.55;
  box-shadow:
    0 5px 15px rgba(5,49,99,.035);
}

.calendar-empty{
  text-align:center;
}

.calendar-day-group{
  display:grid;
  gap:9px;
}

.calendar-day-title{
  margin:0;
  padding:0 2px;
  color:var(--navy-deep);
  font-size:20px;
  font-weight:900;
  line-height:1.35;
}

.calendar-day-items{
  display:grid;
  gap:10px;
}

.calendar-activity-card{
  padding:16px;
  border:1px solid var(--border);
  border-left-width:5px;
  border-radius:20px;
  background:white;
  box-shadow:
    0 5px 15px rgba(5,49,99,.04);
}

.calendar-activity-card.tournament{
  border-left-color:#d99b00;
}

.calendar-activity-card.event{
  border-left-color:#e96d58;
}

.calendar-activity-card.surprise{
  border-left-color:#914fe0;
}

.calendar-activity-card.championship{
  border-left-color:#1689dc;
}

.calendar-activity-card.generic{
  border-left-color:#7b8ca1;
}

.calendar-activity-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:9px;
}

.calendar-activity-time{
  color:var(--navy-deep);
  font-size:18px;
  font-weight:900;
  line-height:1.25;
}

.calendar-type-badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef7ff;
  color:#145f9d;
  font-size:14px;
  font-weight:850;
  line-height:1.3;
}

.calendar-activity-title{
  margin:10px 0 0;
  color:var(--navy-deep);
  font-size:18px;
  font-weight:900;
  line-height:1.35;
}

.calendar-activity-location{
  margin-top:8px;
  color:#405f79;
  font-size:16px;
  line-height:1.5;
}

.calendar-activity-states{
  margin-top:11px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.calendar-state{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 10px;
  border-radius:999px;
  font-size:14px;
  font-weight:850;
  line-height:1.3;
}

.calendar-state.active{
  background:#e9f8ef;
  color:#176b3c;
}

.calendar-state.finalized{
  background:#e7f2ff;
  color:#175f98;
}

.calendar-state.locked{
  background:#fff4d7;
  color:#805b13;
}

.calendar-topic-link{
  margin-top:13px;
  min-height:48px;
  padding:11px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #c8dff1;
  border-radius:15px;
  background:#f5faff;
  color:#075ca2;
  font-size:16px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
}

.calendar-back:focus-visible,
.calendar-month-button:focus-visible,
.calendar-filter:focus-visible,
.calendar-topic-link:focus-visible{
  outline:3px solid rgba(27,139,226,.24);
  outline-offset:2px;
}

@media (max-width:480px){

  .calendar-month-nav{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);
  }

  .calendar-month-label{
    grid-column:1 / -1;
    grid-row:1;
    min-width:0;
    padding:2px 0 4px;
  }

  #calendar-prev{
    grid-column:1;
    grid-row:2;
  }

  #calendar-next{
    grid-column:2;
    grid-row:2;
  }

  .calendar-month-button{
    text-align:center!important;
  }
}


/* ==========================================================
   P9-P4 — SOUVENIRS PAR MOIS
   ========================================================== */

.souvenirs-back,
.souvenirs-category-back,
.souvenirs-month-back{
  min-height:44px;
  margin:0 0 12px;
  padding:8px 2px;
  border:0;
  background:transparent;
  color:#245f8f;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  cursor:pointer;
}

.souvenirs-header-card{
  padding:19px;
  border:1px solid var(--border);
  border-radius:23px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      #f7f4ff
    );
  box-shadow:var(--shadow);
}

.souvenirs-header-card h1{
  margin:5px 0 0;
  font-size:27px;
  line-height:1.15;
}

.souvenirs-view{
  margin-top:14px;
}

.souvenirs-categories{
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:10px;
}

.souvenirs-category-card{
  min-width:0;
  min-height:96px;
  padding:13px;
  display:grid;
  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;
  align-items:center;
  gap:9px;
  text-align:left;
  color:inherit;
  border:1px solid var(--border);
  border-left-width:4px;
  border-radius:18px;
  background:white;
  box-shadow:
    0 5px 15px rgba(5,49,99,.035);
  cursor:pointer;
}

.souvenirs-category-card.tournament{
  border-left-color:#d89a24;
}

.souvenirs-category-card.event{
  border-left-color:#df6c61;
}

.souvenirs-category-card.championship{
  border-left-color:#4c83bd;
}

.souvenirs-category-card.surprise{
  border-left-color:#8c68c6;
}

.souvenirs-category-card.generic{
  border-left-color:#7b91a6;
}

.souvenirs-category-icon{
  font-size:25px;
  line-height:1;
}

.souvenirs-category-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.souvenirs-category-copy strong{
  font-size:16px;
  line-height:1.25;
}

.souvenirs-category-count{
  color:#62798d;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}

.souvenirs-category-chevron{
  color:#7890a4;
  font-size:26px;
  font-weight:700;
  line-height:1;
}

.souvenirs-category-view,
.souvenirs-month-view{
  margin-top:14px;
}

.souvenirs-category-heading,
.souvenirs-month-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}

.souvenirs-category-heading h2,
.souvenirs-month-heading h2{
  margin:0;
  font-size:22px;
  line-height:1.2;
}

.souvenirs-category-total{
  flex:0 0 auto;
  color:#62798d;
  font-size:14px;
  font-weight:800;
  line-height:1.3;
}

.souvenirs-months{
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:10px;
}

.souvenirs-month-card{
  min-width:0;
  min-height:82px;
  padding:13px;
  display:grid;
  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;
  align-items:center;
  gap:9px;
  border:1px solid var(--border);
  border-radius:18px;
  background:white;
  color:inherit;
  text-align:left;
  box-shadow:
    0 5px 15px rgba(5,49,99,.035);
  cursor:pointer;
}

.souvenirs-month-icon{
  font-size:22px;
  line-height:1;
}

.souvenirs-month-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.souvenirs-month-copy strong{
  font-size:16px;
  line-height:1.25;
}

.souvenirs-month-card-count{
  color:#62798d;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}

.souvenirs-month-chevron{
  color:#7890a4;
  font-size:26px;
  font-weight:700;
  line-height:1;
}

.souvenirs-month-heading-copy{
  min-width:0;
}

.souvenirs-month-category{
  display:block;
  margin-bottom:3px;
  color:#61788c;
  font-size:14px;
  font-weight:800;
  line-height:1.3;
}

.souvenirs-list{
  display:grid;
  gap:10px;
}

.souvenir-card{
  padding:16px;
  border:1px solid var(--border);
  border-radius:19px;
  background:white;
  box-shadow:
    0 5px 15px rgba(5,49,99,.035);
}

.souvenir-title{
  margin:0;
  color:#183d5d;
  font-size:18px;
  line-height:1.3;
}

.souvenir-date{
  margin-top:8px;
  color:#536e84;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
}

.souvenir-topic-link{
  min-height:44px;
  margin-top:13px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #bfd6e8;
  border-radius:14px;
  background:#f3f9fd;
  color:#185d91;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
}

.souvenirs-placeholder{
  grid-column:1 / -1;
  padding:18px;
  border:1px dashed #c9d9e6;
  border-radius:17px;
  background:#fbfdff;
  color:#61788c;
  font-size:16px;
  line-height:1.45;
  text-align:center;
}

.souvenirs-empty{
  color:#536e84;
}

.souvenirs-pagination{
  margin-top:14px;
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);
  align-items:center;
  gap:8px;
}

.souvenirs-page-button{
  min-height:44px;
  padding:9px 12px;
  border:1px solid #c5d8e7;
  border-radius:14px;
  background:white;
  color:#245f8f;
  font-size:14px;
  font-weight:800;
  line-height:1.3;
  cursor:pointer;
}

.souvenirs-page-button:disabled{
  opacity:.42;
  cursor:default;
}

.souvenirs-page-label{
  color:#536e84;
  font-size:14px;
  line-height:1.3;
  text-align:center;
}

@media (max-width:350px){
  .souvenirs-categories,
  .souvenirs-months{
    grid-template-columns:1fr;
  }

  .souvenirs-pagination{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);
  }

  .souvenirs-page-label{
    grid-column:1 / -1;
    grid-row:1;
  }
}


/* ==========================================================
   P10 — MES ACCÈS 13 UNIS
   ========================================================== */

.info-card[data-action="access"],
.action-card[data-action="access"] {
  cursor:pointer;
}

.info-card[data-action="access"]:focus-visible,
.action-card[data-action="access"]:focus-visible,
.access-back:focus-visible {
  outline:3px solid rgba(22,137,220,.22);
  outline-offset:3px;
}


.access-back {
  min-height:44px;
  margin:0 0 12px;
  padding:8px 2px;
  border:0;
  background:transparent;
  color:#245f8f;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  cursor:pointer;
}


.access-header-card {
  padding:19px;
  border:1px solid var(--border);
  border-radius:23px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      #f4faff
    );
  box-shadow:var(--shadow);
}


.access-header-card h1 {
  margin:5px 0 0;
  color:var(--navy-deep);
  font-size:27px;
  line-height:1.18;
}


.access-header-card p {
  margin:9px 0 0;
  color:#48647e;
  font-size:16px;
  line-height:1.55;
}


.access-list {
  margin-top:14px;
  padding-bottom:
    calc(
      108px
      + env(safe-area-inset-bottom)
    );
  display:grid;
  gap:10px;
}


.access-space-card {
  min-width:0;
  min-height:92px;
  padding:15px;
  display:grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  align-items:center;
  gap:13px;
  border:1px solid var(--border);
  border-left-width:5px;
  border-radius:19px;
  background:white;
  box-shadow:
    0 5px 15px rgba(5,49,99,.04);
}


.access-space-card.allowed {
  border-left-color:#2d9860;
}


.access-space-card.denied {
  border-left-color:#8c9bab;
}


.access-space-icon {
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#eef7ff;
  font-size:24px;
  line-height:1;
}


.access-space-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}


.access-space-label {
  color:var(--navy-deep);
  font-size:18px;
  font-weight:900;
  line-height:1.3;
}


.access-space-status {
  font-size:15px;
  font-weight:800;
  line-height:1.45;
}


.access-space-status.allowed {
  color:#176b3c;
}


.access-space-status.denied {
  color:#5c6d7d;
}


.access-placeholder {
  min-height:82px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed #c9d9e6;
  border-radius:18px;
  background:#fbfdff;
  color:#536e84;
  font-size:16px;
  line-height:1.5;
  text-align:center;
}


.access-error {
  color:#6d4b4b;
}



/* =========================================================
   UX-L2 P11-P5 — SIGNALER UN IMPREVU

   Parcours :
   activité -> vérification -> confirmation explicite.

   Aucune mutation sur le premier tap.
   Lisibilité immédiate et cibles tactiles >= 44 px.
   ========================================================= */

#unforeseen-page{
  padding-bottom:
    calc(
      108px
      + env(safe-area-inset-bottom)
    );
}


.unforeseen-back,
.unforeseen-choose-another{
  min-height:44px;
  padding:10px 15px;
  border:1px solid var(--border);
  border-radius:999px;
  background:white;
  color:var(--navy);
  font-size:14px;
  font-weight:850;
  line-height:1.35;
  cursor:pointer;
  box-shadow:
    0 4px 12px rgba(5,49,99,.04);
}


.unforeseen-back{
  margin:10px 2px;
}


.unforeseen-choose-another{
  width:max-content;
  max-width:100%;
  margin:0 0 2px;
}


.unforeseen-back:focus-visible,
.unforeseen-choose-another:focus-visible,
.unforeseen-card:focus-visible,
.unforeseen-confirm-button:focus-visible{
  outline:
    3px solid
    rgba(27,139,226,.24);

  outline-offset:2px;
}


.unforeseen-header-card{
  padding:19px;
  border:1px solid var(--border);
  border-radius:23px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      #fff7f5
    );
  box-shadow:var(--shadow);
}


.unforeseen-header-card h1{
  margin:6px 0 0;
  color:var(--navy-deep);
  font-size:28px;
  line-height:1.2;
}


.unforeseen-header-card p{
  margin:10px 0 0;
  color:#48647e;
  font-size:16px;
  line-height:1.55;
}


.unforeseen-feedback{
  margin-top:14px;
  padding:15px 16px;
  border-radius:16px;
  font-size:16px;
  font-weight:750;
  line-height:1.5;
}


.unforeseen-feedback.success{
  border:1px solid #b9dec9;
  border-left:5px solid #278a55;
  background:#eefaf3;
  color:#17643c;
}


.unforeseen-feedback.error{
  border:1px solid #efc5c2;
  border-left:5px solid #d92e2a;
  background:#fff3f2;
  color:#9f2824;
}


.unforeseen-list{
  margin-top:16px;
  display:grid;
  gap:12px;
  min-width:0;
}


.unforeseen-placeholder{
  padding:18px;
  border:1px dashed #c6d9e9;
  border-radius:17px;
  background:#f8fbfe;
  color:#4c687f;
  font-size:16px;
  line-height:1.55;
  text-align:center;
}


.unforeseen-empty{
  border-style:solid;
  border-color:#c7e3d2;
  background:#f2fbf6;
  color:#276846;
}


.unforeseen-error{
  border-style:solid;
  border-color:#efcfcc;
  background:#fff7f6;
  color:#8e3935;
}


.unforeseen-card{
  width:100%;
  max-width:100%;
  min-height:48px;
  padding:16px;
  appearance:none;
  display:grid;
  gap:10px;
  border:1px solid #d8e5ef;
  border-left:5px solid #8ba6bb;
  border-radius:18px;
  background:white;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:
    0 6px 18px rgba(5,49,99,.055);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}


.unforeseen-card:hover{
  border-color:#bdd8ef;
  box-shadow:
    0 9px 23px rgba(5,49,99,.09);
}


.unforeseen-card:active{
  transform:translateY(1px);
}


.unforeseen-card.tournament{
  border-left-color:#d7a51a;
}


.unforeseen-card.event{
  border-left-color:#1788df;
}


.unforeseen-card.surprise{
  border-left-color:#8b63d2;
}


.unforeseen-card.championship{
  border-left-color:#2f8b62;
}


.unforeseen-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}


.unforeseen-type-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  background:#eef5fb;
  color:#315d82;
  font-size:14px;
  font-weight:800;
  line-height:1.3;
}


.unforeseen-chevron{
  flex:0 0 auto;
  color:#7790a6;
  font-size:24px;
  font-weight:800;
  line-height:1;
}


.unforeseen-title{
  color:var(--navy-deep);
  font-size:18px;
  line-height:1.35;
}


.unforeseen-card-meta,
.unforeseen-confirm-details{
  display:grid;
  gap:8px;
  min-width:0;
}


.unforeseen-detail-row{
  min-width:0;
  padding:10px 11px;
  display:grid;
  grid-template-columns:
    minmax(90px,.7fr)
    minmax(0,1.3fr);
  align-items:start;
  gap:10px;
  border-radius:12px;
  background:#f6f9fc;
}


.unforeseen-detail-label{
  color:#526e85;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}


.unforeseen-detail-value{
  min-width:0;
  color:#183d60;
  font-size:16px;
  line-height:1.45;
  overflow-wrap:anywhere;
}


.unforeseen-card-action{
  min-height:44px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:#fff0ef;
  color:#ad2d28;
  font-size:15px;
  font-weight:850;
  line-height:1.35;
  text-align:center;
}


.unforeseen-confirm-card{
  padding:18px;
  display:grid;
  gap:14px;
  border:1px solid #e5d5d2;
  border-radius:21px;
  background:white;
  box-shadow:var(--shadow);
}


.unforeseen-confirm-kicker{
  color:#a0463f;
  font-size:14px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:.035em;
}


.unforeseen-confirm-card h2{
  margin:0;
  color:#9e2925;
  font-size:23px;
  line-height:1.25;
}


.unforeseen-confirm-type{
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  background:#eef5fb;
  color:#315d82;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
}


.unforeseen-confirm-title{
  color:var(--navy-deep);
  font-size:19px;
  line-height:1.4;
}


.unforeseen-warning{
  padding:16px;
  display:grid;
  gap:6px;
  border-left:5px solid #d92e2a;
  border-radius:15px;
  background:#fff2f1;
}


.unforeseen-warning strong{
  color:#a42824;
  font-size:17px;
  line-height:1.4;
}


.unforeseen-warning span{
  color:#3e5265;
  font-size:16px;
  line-height:1.55;
}


.unforeseen-confirm-error{
  padding:13px 14px;
  border:1px solid #efc9c6;
  border-radius:14px;
  background:#fff5f4;
  color:#9e2e29;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
}


.unforeseen-confirm-actions{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1.25fr);
  gap:10px;
}


.unforeseen-confirm-button{
  min-height:48px;
  padding:11px 13px;
  border-radius:14px;
  font-size:16px;
  font-weight:850;
  line-height:1.35;
  cursor:pointer;
}


.unforeseen-confirm-button.secondary{
  border:1px solid #c9d9e6;
  background:white;
  color:#315c7f;
}


.unforeseen-confirm-button.primary{
  border:1px solid #be312c;
  background:#c93731;
  color:white;
}


.unforeseen-confirm-button:disabled{
  opacity:.58;
  cursor:default;
}


@media (max-width:480px){

  .unforeseen-detail-row{
    grid-template-columns:1fr;
    gap:4px;
  }


  .unforeseen-confirm-actions{
    grid-template-columns:1fr;
  }


  .unforeseen-confirm-button{
    width:100%;
  }
}

/* P12 ORGANIZER ACTIVITIES START */

.organizer-activities-back {
  min-height: 44px;
  margin: 14px 0 12px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  color: var(--navy);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.organizer-activities-back:focus-visible,
.action-card[data-action="organizer-activities"]:focus-visible {
  outline: 3px solid rgba(22,137,220,.22);
  outline-offset: 3px;
}

.organizer-activities-heading {
  margin-bottom: 14px;
}

.organizer-activities-heading h2 {
  margin: 5px 0 7px;
  color: var(--navy-deep);
  font-size: 27px;
  line-height: 1.2;
}

.organizer-activities-intro {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.organizer-activities-summary {
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  box-shadow: 0 5px 16px rgba(5,49,99,.035);
}

.organizer-activities-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 13px;
}

.organizer-activities-total {
  color: var(--navy-deep);
  font-size: 18px;
  line-height: 1.35;
}

.organizer-activities-finalized {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.organizer-count-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}

.organizer-count-chip {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: center;
  border-radius: 15px;
  background: #f5f9fd;
}

.organizer-count-icon {
  grid-row: 1 / span 2;
  font-size: 20px;
}

.organizer-count-value {
  color: var(--navy-deep);
  font-size: 17px;
  line-height: 1.2;
}

.organizer-count-label {
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.organizer-activities-feedback {
  margin-bottom: 12px;
}

.organizer-activities-list {
  display: grid;
  gap: 12px;
}

.organizer-activity-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  box-shadow: 0 5px 16px rgba(5,49,99,.04);
}

.organizer-activity-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 9px;
}

.organizer-activity-type,
.organizer-activity-state {
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.organizer-activity-type {
  color: var(--navy);
  background: #edf6fd;
}

.organizer-activity-state.active {
  color: #06734e;
  background: #eaf8f2;
}

.organizer-activity-state.draft {
  color: #7a5400;
  background: #fff5d9;
}

.organizer-activity-state.secret {
  color: #69459a;
  background: #f4edff;
}

.organizer-activity-state.revealed {
  color: #06734e;
  background: #eaf8f2;
}

.organizer-activity-title {
  margin: 12px 0;
  color: var(--navy-deep);
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.organizer-activity-details {
  display: grid;
  gap: 9px;
}

.organizer-activity-detail {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  gap: 8px;
  align-items: start;
}

.organizer-activity-detail-icon {
  padding-top: 1px;
  font-size: 18px;
  line-height: 1.35;
}

.organizer-activity-detail-text {
  min-width: 0;
}

.organizer-activity-detail-label {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.organizer-activity-detail-value {
  display: block;
  margin-top: 1px;
  color: var(--navy-deep);
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.organizer-activities-loading,
.organizer-activities-empty,
.organizer-activities-error {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: white;
  font-size: 16px;
  line-height: 1.55;
}

.organizer-activities-empty {
  color: var(--muted);
}

.organizer-activities-error {
  color: #8b2b2b;
  background: #fff7f7;
}

/* P12 ORGANIZER ACTIVITIES END */

/* P12 ORGANIZER ACTIVITIES UX R1 START */

/*
 * Les fonctions non encore ouvertes doivent être
 * immédiatement reconnaissables comme futures,
 * tout en restant parfaitement lisibles.
 */
.action-card.disabled {
  opacity: 1;
  cursor: default;
  background: rgba(255,255,255,.66);
  box-shadow: none;
  border-color: rgba(93,124,151,.16);
}

.action-card.disabled strong {
  color: #71849a;
}

.action-card.disabled span {
  color: #8c9cac;
}

.action-card.disabled > :last-child {
  display: none;
}

.action-card.disabled::after {
  content: "Bientôt";
  align-self: center;
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  background: #edf2f6;
  color: #71849a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.action-card[data-action="organizer-activities"] {
  border-color: rgba(22,137,220,.28);
  box-shadow: 0 7px 18px rgba(5,49,99,.07);
}


/*
 * La sous-page Activités doit montrer davantage
 * de contenu métier avant le premier scroll.
 */
.organizer-activities-back {
  margin-top: 8px;
  margin-bottom: 8px;
}

.organizer-activities-heading {
  margin-bottom: 10px;
}

.organizer-activities-heading .eyebrow {
  margin-top: 0;
  margin-bottom: 2px;
}

.organizer-activities-heading h2 {
  margin-top: 2px;
  margin-bottom: 4px;
  font-size: 25px;
}

.organizer-activities-intro {
  line-height: 1.4;
}

.organizer-activities-summary {
  margin-bottom: 10px;
  padding: 12px;
}

.organizer-activities-overview {
  margin-bottom: 9px;
}

.organizer-count-grid {
  gap: 6px;
}

.organizer-count-chip {
  padding: 8px 9px;
}

.organizer-activities-list {
  gap: 10px;
}

/* P12 ORGANIZER ACTIVITIES UX R1 END */