/* ══════════════════════════════════════════════════════════════════
   PROXIREST — Feuille de style commune (palette OCS Groupe)
   Utilisée par : proxirest-parcours.html, proxirest-recherche-convive.html,
   RechercheConvive-SNACK.php, RechercheConvive-CANTINE.php,
   RechercheConvive-CANTINE_JOUR.php, RechercheConvive-CANTINE_JOURpJOUR.php
   ══════════════════════════════════════════════════════════════════ */


:root{
  /* Palette OCS Groupe — ambre du logo #FFAD02, gris #60605E */
  --pr:#DB2C1C;        /* ambre de marque : fonds, bordures, accents */
  --pr-hover:#B8241A;  /* ambre plus soutenu : dégradés et survols */
  --pr-text:#A8231A;   /* texte ambre lisible sur fond clair (contraste 6:1) */
  --pr-ink:#FFFFFF;    /* texte posé SUR l'ambre (contraste 8,9:1 ; le blanc serait illisible) */
  --pr-light:#FEF1EF; --pr-mid:#FDE3DF; --pr-border:#F9C4BC;
  --pr-glow:rgba(255,173,2,.25);
  --brand-gray:#60605E;

  --bg-page:#F8F9FC; --bg-white:#FFFFFF; --bg-deep:#1A1D2E;
  --t-ink:#0F1117; --t-strong:#1A1D2E; --t-body:#374151; --t-muted:#6B7280; --t-ghost:#9CA3AF; --t-white:#FFFFFF;

  --b-light:rgba(0,0,0,.07); --b-medium:rgba(0,0,0,.12);

  --s-sm:0 1px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --s-md:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --s-lg:0 12px 40px rgba(0,0,0,.10),0 3px 10px rgba(0,0,0,.06);
  --s-xl:0 24px 60px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.07);
  --s-pr:0 8px 32px rgba(255,173,2,.22),0 2px 8px rgba(255,173,2,.12);

  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  --f-head:'Outfit',sans-serif; --f-body:'Inter',sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--f-body);background:var(--bg-page);color:var(--t-ink);overflow-x:hidden;min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

.bg-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 8% 12%, rgba(255,173,2,.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 92% 85%, rgba(255,173,2,.05) 0%, transparent 65%);
}
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,173,2,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,173,2,.025) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 20%,transparent 80%);
}

#aura{position:fixed;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,173,2,.09) 0%,transparent 65%);pointer-events:none;z-index:1;transform:translate(-50%,-50%)}
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}


.navbar{
  position:sticky;top:0;z-index:900;height:68px;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--b-light);box-shadow:0 1px 0 rgba(0,0,0,.04),var(--s-sm);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-img{height:38px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}
.brand-text{display:none;font-family:var(--f-head);font-size:21px;font-weight:800;color:var(--pr);letter-spacing:-.03em}
.brand-text span{color:var(--t-strong)}
.brand-divider{width:1px;height:30px;background:var(--b-light)}
.brand-label{display:flex;flex-direction:column;gap:1px}
.brand-label-top{font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--t-strong);letter-spacing:-.02em;line-height:1}
.brand-label-bot{font-size:9.5px;font-weight:500;color:var(--t-muted);letter-spacing:.07em;text-transform:uppercase;line-height:1}

.nav-actions{display:flex;align-items:center;gap:10px}
.badge-live{display:flex;align-items:center;gap:6px;padding:6px 15px;border-radius:var(--r-pill);background:var(--pr-light);border:1px solid var(--pr-border);font-family:var(--f-head);font-size:11.5px;font-weight:600;color:var(--pr-text)}
.live-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 2px rgba(34,197,94,.25);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.steps-bar{
  position:sticky;top:68px;z-index:850;
  background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--b-light);
  padding:14px 24px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.step-pill{
  display:flex;align-items:center;gap:8px;
  padding:7px 16px 7px 9px;border-radius:var(--r-pill);
  background:#F0F0F3;color:var(--t-ghost);
  font-family:var(--f-head);font-size:12.5px;font-weight:600;
  transition:all .35s var(--ease-out);
  cursor:default;
}
.step-pill.active{background:var(--pr);color:var(--pr-ink);box-shadow:var(--s-pr)}
.step-pill.done{background:var(--pr-light);color:var(--pr-text);cursor:pointer}
.step-num{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  background:rgba(255,255,255,.25);
}
.step-pill:not(.active) .step-num{background:rgba(0,0,0,.06)}
.step-pill.active .step-num{background:rgba(255,255,255,.3)}
.step-connector{width:18px;height:1.5px;background:var(--b-medium);border-radius:2px}

.screen{
  position:relative;z-index:2;
  max-width:900px;margin:0 auto;
  padding:0 24px 90px;
  display:none;
}
.screen.active{display:block}

.screen-head{text-align:center;padding:48px 12px 34px;opacity:0}
.screen-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 18px;border-radius:var(--r-pill);
  background:var(--pr-light);border:1px solid var(--pr-border);
  font-family:var(--f-head);font-size:11.5px;font-weight:600;color:var(--pr-text);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px;
}
.screen-title{
  font-family:var(--f-head);font-size:clamp(28px,4.2vw,46px);font-weight:800;
  letter-spacing:-.035em;color:var(--t-strong);margin-bottom:12px;line-height:1.12;
}
.screen-sub{font-size:15px;color:var(--t-muted);line-height:1.6;max-width:480px;margin:0 auto}
.screen-sub strong{color:var(--t-strong);font-weight:700}

.btn-back{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px 9px 14px;border-radius:var(--r-pill);
  background:var(--bg-white);border:1px solid var(--b-medium);
  font-family:var(--f-head);font-size:13px;font-weight:600;color:var(--t-body);
  cursor:pointer;margin-bottom:28px;transition:all .25s;
}
.btn-back:hover{border-color:var(--pr);color:var(--pr-text);background:var(--pr-light);transform:translateX(-2px)}

.context-bar{
  display:flex;align-items:center;gap:16px;
  background:var(--bg-white);border:1px solid var(--b-light);border-radius:var(--r-lg);
  padding:18px 22px;margin-bottom:32px;box-shadow:var(--s-md);
  opacity:0;
}
.context-logo{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:800;font-size:16px;color:#fff;
  background:var(--ctx-bg,linear-gradient(135deg,var(--pr-hover),var(--pr)));
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.context-text{flex:1;min-width:0}
.context-school{font-family:var(--f-head);font-size:16px;font-weight:800;color:var(--t-strong);letter-spacing:-.01em;margin-bottom:2px}
.context-meta{font-size:12px;color:var(--t-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.context-tag{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--pr-light);color:var(--pr-text);font-weight:700;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.03em;
}
.context-edit{
  padding:8px 14px;border-radius:var(--r-pill);
  background:#F4F4F5;border:1px solid var(--b-light);
  font-size:12px;font-weight:600;color:var(--t-body);cursor:pointer;
  transition:all .2s;flex-shrink:0;
}
.context-edit:hover{background:var(--pr-light);color:var(--pr-text);border-color:var(--pr-border)}

.trust-bar{
  position:relative;z-index:2;background:var(--bg-white);border-top:1px solid var(--b-light);border-bottom:1px solid var(--b-light);
  padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;
}
.trust-item{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--t-muted)}
.trust-item strong{color:var(--t-strong);font-weight:600}

#trscreen{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(248,249,252,.95);backdrop-filter:blur(20px);opacity:0;pointer-events:none;
}
#trscreen.show{pointer-events:all}
.tr-box{
  background:var(--bg-white);border:1px solid var(--b-light);border-radius:var(--r-xl);
  padding:40px 50px;display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:var(--s-xl);animation:tr-pop .45s var(--ease-back) both;
}
@keyframes tr-pop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
.tr-icon-box{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:var(--s-pr)}
.tr-name{font-family:var(--f-head);font-size:17px;font-weight:800;color:var(--t-strong)}
.tr-sub{font-size:12.5px;color:var(--t-muted)}
.tr-prog-wrap{width:200px;height:3px;background:#F0F0F0;border-radius:3px;overflow:hidden}
.tr-prog{height:100%;width:0%;background:linear-gradient(90deg,var(--pr-hover),var(--pr));border-radius:3px;transition:width .9s var(--ease-out)}

footer{
  position:relative;z-index:2;background:var(--bg-white);
  padding:24px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.footer-logo{height:26px;opacity:.45}
.footer-secure{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t-ghost)}

@media(max-width:680px){
  .navbar{padding:0 18px;height:60px}
  .brand-divider,.brand-label{display:none}
  .steps-bar{top:60px;padding:11px 14px;gap:5px}
  .step-pill{padding:6px 12px 6px 7px;font-size:11px}
  .step-pill span:not(.step-num){display:none}
  .step-connector{width:10px}
  .screen{padding:0 16px 70px}
  .screen-head{padding:32px 8px 26px}
  .context-bar{flex-wrap:wrap}
  .groups-grid,.schools-grid{grid-template-columns:1fr}
  .group-logo{width:64px;height:64px;font-size:19px}
}

/* Fil d'ariane sélection */
.breadcrumb-trail{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-bottom:6px;
}
.crumb{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:var(--bg-white);border:1px solid var(--b-light);
  font-size:12px;font-weight:600;color:var(--t-body);box-shadow:var(--s-sm);
}
.crumb-ico{font-size:14px}
.crumb-sep{color:var(--t-ghost);font-size:12px}

/* ═══════════════════════════════════════
   ÉTAPE 1 — GRILLE GROUPES
═══════════════════════════════════════ */
.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;max-width:1100px;margin:0 auto}

.groups-loading,.groups-error{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:60px 20px;color:var(--t-muted);font-size:14px;text-align:center;
}
.groups-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--pr-border);border-top-color:var(--pr);
  animation:groups-spin .8s linear infinite;
}
@keyframes groups-spin{to{transform:rotate(360deg)}}
.groups-error p{color:var(--t-body);font-weight:500}
.groups-error .btn-back{margin-bottom:0}

.gr-generic{--halo:rgba(255,173,2,.07);--btn-bg:rgba(255,173,2,.06);--btn-bg-h:rgba(255,173,2,.12);--btn-border:rgba(255,173,2,.18);--btn-border-h:rgba(255,173,2,.4);--btn-text:var(--pr-text)}

.group-card{
  position:relative;background:var(--bg-white);border-radius:var(--r-lg);border:1px solid var(--b-light);
  box-shadow:var(--s-md);overflow:hidden;cursor:pointer;display:block;
  opacity:0;transform:translateY(30px);
  transition:border-color .3s var(--ease-out);will-change:transform;
}
.group-accent{height:4px;width:100%;transition:height .25s}
.group-card:hover .group-accent{height:5px}
.group-halo{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--halo,rgba(255,173,2,.07)) 0%,transparent 55%);opacity:0;transition:opacity .3s}
.group-card:hover .group-halo{opacity:1}
.group-inner{padding:26px 24px 22px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}

.group-logo{
  width:72px;height:72px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:800;font-size:22px;color:#fff;
  margin-bottom:16px;position:relative;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  transition:transform .4s var(--ease-back);
}
.group-card:hover .group-logo{transform:translateY(-4px) scale(1.06) rotate(-2deg)}

.group-name{font-family:var(--f-head);font-size:17px;font-weight:800;color:var(--t-strong);margin-bottom:6px;letter-spacing:-.02em}
.group-count{font-size:12px;color:var(--t-muted);margin-bottom:18px;display:flex;align-items:center;gap:5px}
.group-count::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--t-ghost)}

.group-cta{
  display:flex;align-items:center;gap:6px;width:100%;justify-content:center;
  padding:10px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--btn-border);background:var(--btn-bg);
  font-size:12.5px;font-weight:700;color:var(--btn-text);
  transition:all .25s;position:relative;overflow:hidden;
}
.group-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .5s}
.group-card:hover .group-cta::before{transform:translateX(120%)}
.group-card:hover .group-cta{background:var(--btn-bg-h);border-color:var(--btn-border-h)}

/* Couleurs groupes */
.gr-descartes{--halo:rgba(37,99,235,.07);--btn-bg:rgba(37,99,235,.06);--btn-bg-h:rgba(37,99,235,.12);--btn-border:rgba(37,99,235,.18);--btn-border-h:rgba(37,99,235,.4);--btn-text:#1E40AF}
.gr-descartes .group-accent{background:linear-gradient(90deg,#1E3A8A,#60A5FA)}
.gr-descartes .group-logo{background:linear-gradient(135deg,#1E40AF,#3B82F6)}

.gr-lyautey{--halo:rgba(124,58,237,.07);--btn-bg:rgba(124,58,237,.06);--btn-bg-h:rgba(124,58,237,.12);--btn-border:rgba(124,58,237,.18);--btn-border-h:rgba(124,58,237,.4);--btn-text:#6D28D9}
.gr-lyautey .group-accent{background:linear-gradient(90deg,#4C1D95,#A78BFA)}
.gr-lyautey .group-logo{background:linear-gradient(135deg,#6D28D9,#8B5CF6)}

.gr-belge{--halo:rgba(245,158,11,.08);--btn-bg:rgba(245,158,11,.06);--btn-bg-h:rgba(245,158,11,.12);--btn-border:rgba(245,158,11,.2);--btn-border-h:rgba(245,158,11,.42);--btn-text:#B45309}
.gr-belge .group-accent{background:linear-gradient(90deg,#000 0%,#000 33%,#FBBF24 33%,#FBBF24 66%,#DC2626 66%)}
.gr-belge .group-logo{background:linear-gradient(135deg,#000000,#444444)}

.gr-hugo{--halo:rgba(5,150,105,.07);--btn-bg:rgba(5,150,105,.06);--btn-bg-h:rgba(5,150,105,.12);--btn-border:rgba(5,150,105,.18);--btn-border-h:rgba(5,150,105,.4);--btn-text:#047857}
.gr-hugo .group-accent{background:linear-gradient(90deg,#064E3B,#34D399)}
.gr-hugo .group-logo{background:linear-gradient(135deg,#047857,#10B981)}

/* ═══════════════════════════════════════
   ÉTAPE 2 — GRILLE ÉCOLES
═══════════════════════════════════════ */
.schools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-width:1100px;margin:0 auto}

.school-card{
  position:relative;background:var(--bg-white);border-radius:var(--r-md);border:1px solid var(--b-light);
  box-shadow:var(--s-sm);overflow:hidden;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px 18px;opacity:0;transform:translateY(24px);
  transition:box-shadow .3s,border-color .3s,transform .25s;
}
.school-card:hover{box-shadow:var(--s-lg);border-color:var(--school-border,var(--pr-border));transform:translateY(-2px)}

.school-logo{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:800;font-size:16px;color:#fff;
  background:var(--school-bg,linear-gradient(135deg,var(--pr-hover),var(--pr)));
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.school-text{flex:1;min-width:0}
.school-name{font-family:var(--f-head);font-size:15px;font-weight:700;color:var(--t-strong);letter-spacing:-.01em;margin-bottom:2px;line-height:1.25}
.school-meta{font-size:11.5px;color:var(--t-muted)}
.school-arrow{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#F4F4F5;color:var(--t-ghost);
  transition:all .25s;
}
.school-card:hover .school-arrow{background:var(--school-bg,var(--pr));color:#fff;transform:translateX(3px)}

/* ═══════════════════════════════════════
   ÉTAPE 3 — TYPE DE RECHARGE
═══════════════════════════════════════ */
.recharge-wrap{max-width:680px;margin:0 auto}

.school-summary{
  display:flex;align-items:center;gap:16px;
  background:var(--bg-white);border:1px solid var(--b-light);border-radius:var(--r-lg);
  padding:20px 24px;margin-bottom:36px;box-shadow:var(--s-md);
  opacity:0;
}
.summary-logo{
  width:58px;height:58px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:800;font-size:18px;color:#fff;
  background:var(--summary-bg,linear-gradient(135deg,var(--pr-hover),var(--pr)));
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.summary-text{flex:1}
.summary-school{font-family:var(--f-head);font-size:17px;font-weight:800;color:var(--t-strong);letter-spacing:-.02em;margin-bottom:3px}
.summary-group{font-size:12.5px;color:var(--t-muted)}
.summary-edit{
  padding:8px 14px;border-radius:var(--r-pill);
  background:#F4F4F5;border:1px solid var(--b-light);
  font-size:12px;font-weight:600;color:var(--t-body);cursor:pointer;
  transition:all .2s;flex-shrink:0;
}
.summary-edit:hover{background:var(--pr-light);color:var(--pr-text);border-color:var(--pr-border)}

.recharge-options{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.recharge-options{grid-template-columns:1fr}}

.recharge-card{
  position:relative;background:var(--bg-white);border:2px solid var(--b-light);border-radius:var(--r-lg);
  padding:32px 24px;text-align:center;cursor:pointer;
  opacity:0;transform:translateY(28px);
  transition:border-color .3s,box-shadow .3s,transform .25s;
}
.recharge-card:hover{transform:translateY(-4px)}

.recharge-icon-wrap{
  width:84px;height:84px;border-radius:24px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;font-size:42px;
  transition:transform .4s var(--ease-back);
}
.recharge-card:hover .recharge-icon-wrap{transform:scale(1.08) rotate(-3deg)}

.recharge-name{font-family:var(--f-head);font-size:19px;font-weight:800;color:var(--t-strong);margin-bottom:8px;letter-spacing:-.02em}
.recharge-desc{font-size:13px;color:var(--t-muted);line-height:1.55;margin-bottom:20px}

.recharge-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;color:#fff;
  transition:all .25s;
}

.rc-snack{border-color:transparent}
.rc-snack:hover{border-color:#F59E0B;box-shadow:0 16px 40px rgba(245,158,11,.18)}
.rc-snack .recharge-icon-wrap{background:linear-gradient(135deg,#FEF3C7,#FFFBEB);box-shadow:0 6px 20px rgba(245,158,11,.18)}
.rc-snack .recharge-btn{background:linear-gradient(135deg,#D97706,#F59E0B)}

.rc-cantine{border-color:transparent}
.rc-cantine:hover{border-color:#10B981;box-shadow:0 16px 40px rgba(16,185,129,.18)}
.rc-cantine .recharge-icon-wrap{background:linear-gradient(135deg,#D1FAE5,#ECFDF5);box-shadow:0 6px 20px rgba(16,185,129,.18)}
.rc-cantine .recharge-btn{background:linear-gradient(135deg,#047857,#10B981)}

.recharge-unavailable{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.recharge-unavailable:hover{transform:none}
.recharge-tag-na{
  display:inline-block;margin-top:14px;padding:4px 12px;border-radius:var(--r-pill);
  background:#F4F4F5;font-size:11px;font-weight:600;color:var(--t-ghost);
}

/* ═══════════ CARTE FORMULAIRE (photo + champs) ═══════════ */
.rc-card{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg-white);border:1px solid var(--b-light);border-radius:var(--r-xl);
  box-shadow:var(--s-lg);overflow:hidden;margin-bottom:28px;opacity:0;
}
.rc-photo{position:relative;min-height:100%}
.rc-photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:420px}
.rc-form{padding:38px 36px;display:flex;flex-direction:column;gap:14px}

.field-label{font-family:var(--f-head);font-size:11.5px;font-weight:700;color:var(--t-muted);letter-spacing:.03em;text-transform:uppercase;margin-bottom:-6px}

.field-select,.field-input{
  width:100%;padding:13px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--b-medium);background:#F7F7F9;
  font-family:var(--f-body);font-size:14px;color:var(--t-ink);
  transition:border-color .2s,box-shadow .2s,background .2s,opacity .2s;
}
.field-select{font-family:var(--f-head);font-weight:700;color:var(--t-strong);cursor:pointer;letter-spacing:.01em}
.field-input::placeholder{color:var(--t-ghost);font-style:italic}
.field-input:focus,.field-select:focus{outline:none;border-color:var(--pr);background:var(--bg-white);box-shadow:0 0 0 4px var(--pr-glow)}
.field-input:disabled,.field-select:disabled{opacity:.7;cursor:not-allowed;background:#EFEFF2}
.field-input.ro,.field-select.ro{background:#EFEFF2;font-weight:700;color:var(--t-strong);cursor:not-allowed}

.field-solde{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--pr-light);border:1.5px solid var(--pr-border);border-radius:var(--r-sm);
  padding:13px 16px;margin-bottom:2px;
}
.field-solde .fs-label{font-family:var(--f-head);font-size:12.5px;font-weight:700;color:var(--pr-text);text-transform:uppercase;letter-spacing:.03em}
.field-solde .fs-value{font-family:var(--f-head);font-size:19px;font-weight:800;color:var(--t-strong)}

.field-error{
  font-size:12.5px;font-weight:600;color:#DC2626;text-align:center;
  display:none;
}
.field-error.show{display:block}

.matricule-status{
  display:none;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;border-radius:var(--r-sm);
  padding:10px 13px;margin-top:-6px;
}
.matricule-status.show{display:flex}
.matricule-status.loading{background:#F4F4F5;color:var(--t-muted)}
.matricule-status.ok{background:#ECFDF5;color:#059669;border:1px solid #A7F3D0}
.matricule-status.err{background:#FEF2F2;color:#DC2626;border:1px solid #FECACA}
.status-spinner{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--b-medium);border-top-color:var(--t-muted);
  animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

.hint-box{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--pr-light);border:1px solid var(--pr-border);border-radius:var(--r-sm);
  padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--t-body);
}
.hint-box .hi{font-size:16px;flex-shrink:0;line-height:1.3}
.hint-box strong{color:var(--pr-text)}

.checkbox-row{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:12.5px;line-height:1.55;color:var(--t-body);padding:2px 0;
}
.checkbox-row input{width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--pr)}
.checkbox-row a{color:var(--pr-text);font-weight:600;text-decoration:underline}

/* Cases à cocher "trimestres" / "jours" avec montant affiché */
.opt-list{display:flex;flex-direction:column;gap:8px}
.opt-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px solid var(--b-medium);border-radius:var(--r-sm);
  padding:11px 14px;cursor:pointer;transition:all .2s;background:#F7F7F9;
}
.opt-row:hover{border-color:var(--pr-border);background:var(--pr-light)}
.opt-row.checked{border-color:var(--pr);background:var(--pr-light);box-shadow:0 0 0 3px var(--pr-glow)}
.opt-row.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.opt-left{display:flex;align-items:center;gap:10px}
.opt-left input{width:17px;height:17px;accent-color:var(--pr);flex-shrink:0}
.opt-name{font-size:13.5px;font-weight:600;color:var(--t-strong)}
.opt-amount{font-family:var(--f-head);font-size:13.5px;font-weight:800;color:var(--pr-text)}

.montant-box{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-deep);border-radius:var(--r-sm);
  padding:14px 18px;margin-top:2px;
}
.montant-box .mb-label{font-family:var(--f-head);font-size:11.5px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em}
.montant-box .mb-value{font-family:var(--f-head);font-size:22px;font-weight:800;color:#fff}
.montant-box .mb-value span{font-size:13px;font-weight:600;color:var(--pr)}

.btn-choix{
  width:100%;padding:13px;border-radius:var(--r-sm);border:1.5px dashed var(--pr-border);
  background:var(--pr-light);color:var(--pr-text);font-family:var(--f-head);font-weight:700;font-size:13.5px;
  cursor:pointer;transition:all .2s;
}
.btn-choix:hover{background:var(--pr-mid);border-style:solid}

.rc-submit{
  width:100%;padding:14px;border-radius:var(--r-pill);border:none;cursor:pointer;
  font-family:var(--f-head);font-size:14px;font-weight:700;color:var(--pr-ink);letter-spacing:.02em;
  background:linear-gradient(135deg,var(--pr-hover),var(--pr));
  box-shadow:var(--s-pr);transition:transform .2s,box-shadow .2s,opacity .2s;
  margin-top:4px;
}
.rc-submit:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(255,173,2,.3)}
.rc-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

@media(max-width:760px){
  .rc-card{grid-template-columns:1fr}
  .rc-photo img{min-height:200px}
}

/* ═══════════ MODALE (choix pack / choix jour) ═══════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;
  background:rgba(26,29,46,.55);backdrop-filter:blur(6px);padding:20px;
}
.modal-overlay.show{display:flex}
.modal-box{
  width:100%;max-width:440px;background:var(--bg-white);border-radius:var(--r-lg);
  box-shadow:var(--s-xl);overflow:hidden;animation:tr-pop .35s var(--ease-back) both;
}
.modal-title{
  background:linear-gradient(135deg,var(--pr-hover),var(--pr));color:var(--pr-ink);
  font-family:var(--f-head);font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:14px 20px;
}
.modal-body{padding:22px 22px 8px;display:flex;flex-direction:column;gap:10px}
.modal-foot{padding:16px 22px 22px}
.radio-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px solid var(--b-medium);border-radius:var(--r-sm);
  padding:12px 15px;cursor:pointer;transition:all .2s;background:#F7F7F9;
}
.radio-row:hover{border-color:var(--pr-border);background:var(--pr-light)}
.radio-row.checked{border-color:var(--pr);background:var(--pr-light);box-shadow:0 0 0 3px var(--pr-glow)}
.radio-row.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.radio-left{display:flex;align-items:center;gap:10px}
.radio-left input{width:17px;height:17px;accent-color:var(--pr)}
.radio-name{font-size:13.5px;font-weight:700;color:var(--t-strong)}
.radio-amount{font-family:var(--f-head);font-size:13px;font-weight:800;color:var(--pr-text)}
.modal-btn{
  width:100%;padding:13px;border-radius:var(--r-pill);border:none;cursor:pointer;
  font-family:var(--f-head);font-size:13.5px;font-weight:700;color:var(--pr-ink);
  background:linear-gradient(135deg,var(--pr-hover),var(--pr));box-shadow:var(--s-pr);
}

/* ═══════════ PAGE DOCUMENT (CGU, mentions légales, confidentialité...) ═══════════ */
.doc-card{
  background:var(--bg-white);border:1px solid var(--b-light);border-radius:var(--r-xl);
  box-shadow:var(--s-lg);overflow:hidden;margin-bottom:28px;opacity:0;
}
.doc-header{
  padding:34px 40px 26px;border-bottom:1px solid var(--b-light);
  background:linear-gradient(180deg,var(--pr-light),transparent);
}
.doc-title{font-family:var(--f-head);font-size:26px;font-weight:800;color:var(--t-strong);letter-spacing:-.02em;margin-bottom:8px}
.doc-meta{font-size:12.5px;color:var(--t-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-meta strong{color:var(--t-body);font-weight:600}

.doc-body{display:grid;grid-template-columns:220px 1fr;gap:0}
.doc-toc{
  padding:30px 22px;border-right:1px solid var(--b-light);background:#FAFAFB;
  position:sticky;top:calc(68px + 1px);align-self:start;max-height:calc(100vh - 90px);overflow-y:auto;
}
.doc-toc-title{font-family:var(--f-head);font-size:10.5px;font-weight:700;color:var(--t-ghost);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.doc-toc a{
  display:block;padding:7px 10px;border-radius:var(--r-xs);
  font-size:12.5px;color:var(--t-body);font-weight:500;margin-bottom:2px;
  transition:all .15s;
}
.doc-toc a:hover{background:var(--pr-light);color:var(--pr-text)}

.doc-content{padding:36px 44px 50px;max-width:720px}
.doc-content h2{
  font-family:var(--f-head);font-size:19px;font-weight:800;color:var(--t-strong);
  letter-spacing:-.01em;margin:34px 0 12px;scroll-margin-top:90px;
}
.doc-content h2:first-child{margin-top:0}
.doc-content h3{font-family:var(--f-head);font-size:15px;font-weight:700;color:var(--t-strong);margin:20px 0 8px}
.doc-content p{font-size:14px;line-height:1.75;color:var(--t-body);margin-bottom:14px}
.doc-content ul,.doc-content ol{margin:0 0 14px 20px;color:var(--t-body);font-size:14px;line-height:1.75}
.doc-content li{margin-bottom:6px}
.doc-content strong{color:var(--t-strong);font-weight:700}
.doc-content a{color:var(--pr-text);font-weight:600;text-decoration:underline}
.doc-content .doc-note{
  display:flex;gap:10px;background:var(--pr-light);border:1px solid var(--pr-border);
  border-radius:var(--r-sm);padding:13px 15px;font-size:13px;line-height:1.6;color:var(--t-body);margin:18px 0;
}
.doc-content .doc-note .hi{font-size:16px;flex-shrink:0;line-height:1.3}

@media(max-width:820px){
  .doc-body{grid-template-columns:1fr}
  .doc-toc{position:static;border-right:none;border-bottom:1px solid var(--b-light);max-height:none}
  .doc-content{padding:28px 22px 40px}
}