/* =====================================================================
   CAMPUS ALLEMAGNE — SYSTÈME DE DESIGN
   Rétro-ingénierie du langage Engagement Global appliqué à la marque KAGEDEV.
   Framework-agnostic. Destiné à un ir.asset du bundle web.assets_frontend (Odoo).
   Préfixe de classe : .ca-  |  Tokens : --ca-*
   Règles héritées d'Engagement Global : aplats pleins (aucun dégradé),
   formes carrées par principe (rayon 16px réservé aux actions),
   répartition 60% blanc / 30% couleur / 10% accent or.
   ===================================================================== */

/* ---------- 1. FONTS (substituts libres de Klavika) ---------- */
/* En production Odoo : héberger les .woff2 en local et adapter les src.
   Substituts : Archivo (display, rôle Klavika Black/Bold) + Hanken Grotesk (corps). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Hanken+Grotesk:wght@400;500;600&display=swap');

/* ---------- 2. TOKENS ---------- */
:root {
  /* Couleurs — rôles Engagement Global mappés sur la marque Campus */
  --ca-marine:       #12233F;  /* ancre : header utilitaire, footer, titres, pastilles */
  --ca-marine-90:    #1B3050;  /* survols sur marine */
  --ca-vert:         #056839;  /* primaire structurel : bande chiffres, étiquettes */
  --ca-vert-dark:    #04502C;
  --ca-vert-10:      #E7F0EA;  /* tint doux (rôle Türkis 10%) */
  --ca-vert-20:      #CFE1D5;  /* tint léger (rôle Türkis 20%) */
  --ca-or:           #C9A227;  /* accent / CTA UNIQUEMENT */
  --ca-or-dark:      #A9861C;  /* survol or */
  --ca-sable-clair:  #F7F5EF;  /* fond hero, sections alternées (rôle Hellbeige) */
  --ca-sable:        #EDE9E1;  /* bordures, séparateurs, fonds cartes (rôle Beige) */
  --ca-encre:        #14181A;  /* corps, noir ~100% */
  --ca-encre-60:     #4A5560;  /* texte secondaire, méta */
  --ca-blanc:        #FFFFFF;
  --ca-footergris:   #C7D0DA;
  --ca-erreur:       #B3261E;

  /* Typographie */
  --ca-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --ca-font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Rayons — carré par principe, 16px réservé aux actions */
  --ca-radius:       0;
  --ca-radius-cta:   16px;

  /* Espacements (base 8) */
  --ca-s-1: 8px;  --ca-s-2: 16px; --ca-s-3: 24px; --ca-s-4: 32px;
  --ca-s-6: 48px; --ca-s-8: 64px; --ca-s-12: 96px; --ca-s-16: 128px;

  /* Divers */
  --ca-container: 1200px;
  --ca-shadow-card: 0 1px 2px rgba(20,24,26,.06);
}

/* ---------- 3. BASE ---------- */
.ca-scope { font-family: var(--ca-font-body); color: var(--ca-encre); line-height: 1.6; }
.ca-scope h1, .ca-scope h2, .ca-scope h3, .ca-scope h4 { font-family: var(--ca-font-display); color: var(--ca-marine); margin: 0; letter-spacing: -0.01em; }
.ca-scope a { color: var(--ca-vert); }
.ca-scope img { max-width: 100%; display: block; }

.ca-container { max-width: var(--ca-container); margin-inline: auto; padding-inline: var(--ca-s-3); }
@media (max-width: 640px){ .ca-container { padding-inline: var(--ca-s-2); } }

/* Rythme vertical des sections */
.ca-section       { padding-block: var(--ca-s-12); }
.ca-section--tight { padding-block: var(--ca-s-8); }
@media (max-width: 768px){
  .ca-section       { padding-block: var(--ca-s-8); }
  .ca-section--tight { padding-block: var(--ca-s-6); }
}

/* Fonds de section */
.ca-bg-white  { background: var(--ca-blanc); }
.ca-bg-sable  { background: var(--ca-sable-clair); }
.ca-bg-vert   { background: var(--ca-vert); color: #fff; }
.ca-bg-marine { background: var(--ca-marine); color: #fff; }

/* ---------- 4. TYPOGRAPHIE ---------- */
.ca-h1 { font-family: var(--ca-font-display); font-weight: 800; color: var(--ca-marine); font-size: 56px; line-height: 1.05; }
.ca-h2 { font-family: var(--ca-font-display); font-weight: 800; color: var(--ca-marine); font-size: 34px; line-height: 1.15; }
.ca-h3 { font-family: var(--ca-font-display); font-weight: 700; color: var(--ca-marine); font-size: 21px; line-height: 1.25; }
.ca-lead { font-size: 19px; color: var(--ca-encre-60); line-height: 1.6; }
.ca-body { font-size: 18px; line-height: 1.6; }
.ca-meta { font-size: 14px; color: var(--ca-encre-60); }
.ca-eyebrow { font-family: var(--ca-font-display); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: 13px; color: var(--ca-vert); }
@media (max-width: 768px){
  .ca-h1 { font-size: 34px; }
  .ca-h2 { font-size: 26px; }
  .ca-h3 { font-size: 20px; }
  .ca-body, .ca-lead { font-size: 17px; }
}
/* Filet or sous un titre (rythme EG) */
.ca-rule::after { content:""; display:block; width:56px; height:3px; background: var(--ca-or); margin-top: 14px; }

/* ---------- 5. BOUTONS (rayon 16px = seule forme arrondie) ---------- */
.ca-btn { display:inline-flex; align-items:center; justify-content:center; height:52px; padding-inline:28px;
  border-radius: var(--ca-radius-cta); font-family: var(--ca-font-display); font-weight:600; font-size:16px;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition: background .15s, color .15s; white-space:nowrap; }
.ca-btn--primary   { background: var(--ca-or); color: var(--ca-marine); }
.ca-btn--primary:hover { background: var(--ca-or-dark); }
.ca-btn--secondary { background: transparent; color: var(--ca-marine); border-color: var(--ca-marine); }
.ca-btn--secondary:hover { background: var(--ca-marine); color:#fff; }
.ca-btn--ondark    { background:#fff; color: var(--ca-marine); }
.ca-btn--ondark:hover { background: var(--ca-sable); }
.ca-btn--marine    { background: var(--ca-marine); color:#fff; }
.ca-btn--marine:hover { background: var(--ca-marine-90); }
.ca-link-arrow { font-family: var(--ca-font-display); font-weight:600; color: var(--ca-vert); text-decoration:none; }
.ca-link-arrow:hover { text-decoration: underline; }

/* ---------- 6. BADGES / ÉTIQUETTES (carrés, aplats pleins) ---------- */
.ca-badge { display:inline-block; font-family: var(--ca-font-display); text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; font-size:12px; padding:4px 10px; border-radius: var(--ca-radius); }
.ca-badge--prog   { background: var(--ca-vert);   color:#fff; }   /* programme */
.ca-badge--inst   { background: var(--ca-marine); color:#fff; }   /* institutionnel */
.ca-badge--urgent { background: var(--ca-or);     color: var(--ca-marine); } /* date limite */

/* ---------- 7. CARTES ---------- */
.ca-card { background:#fff; border:1px solid var(--ca-sable); box-shadow: var(--ca-shadow-card);
  border-radius: var(--ca-radius); display:flex; flex-direction:column; transition: border-color .15s; }
.ca-card:hover { border-color: var(--ca-marine); }
.ca-card__media { aspect-ratio:16/9; background: var(--ca-sable); }
.ca-card__body  { padding: var(--ca-s-3); display:flex; flex-direction:column; gap:12px; flex:1; }

/* Tuile parcours / secteur */
.ca-tile { display:block; border:1px solid var(--ca-sable); background:#fff; box-shadow: var(--ca-shadow-card);
  overflow:hidden; text-decoration:none; border-radius: var(--ca-radius); }
.ca-tile__media { aspect-ratio:4/3; background: var(--ca-sable); overflow:hidden; }
.ca-tile__media > * { transition: transform .3s ease; height:100%; width:100%; }
.ca-tile:hover .ca-tile__media > * { transform: scale(1.03); }
.ca-tile__label { background: var(--ca-marine); color:#fff; padding:16px 20px; display:flex; align-items:center;
  justify-content:space-between; font-family: var(--ca-font-display); font-weight:700; font-size:17px; }
.ca-tile__label .arrow { color: var(--ca-or); }

/* Carte-événement (pastille date) */
.ca-event { display:flex; border:1px solid var(--ca-sable); box-shadow: var(--ca-shadow-card); border-radius: var(--ca-radius); }
.ca-event__date { background: var(--ca-marine); color:#fff; width:96px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:24px; }
.ca-event__day  { font-family: var(--ca-font-display); font-weight:800; font-size:28px; line-height:1; }
.ca-event__mon  { font-family: var(--ca-font-display); text-transform:uppercase; letter-spacing:.1em; font-size:13px; font-weight:700; margin-top:4px; }
.ca-event__body { padding:20px; }

/* ---------- 8. ENCARTS D'ACTION (rayon 16px) ---------- */
.ca-panel-or     { background: var(--ca-or); color: var(--ca-marine); border-radius: var(--ca-radius-cta); padding: 40px; }
.ca-panel-marine { background: var(--ca-marine); color:#fff; border-radius: var(--ca-radius-cta); padding: 40px; }
@media (max-width:640px){ .ca-panel-or, .ca-panel-marine { padding: 28px; } }

/* Barre de progression (auto-test) */
.ca-progress { height:10px; background: rgba(18,35,63,.15); width:100%; }
.ca-progress__fill { height:10px; background: var(--ca-marine); width:0; transition: width .3s; }

/* ---------- 9. FORMULAIRES ---------- */
.ca-field { display:flex; flex-direction:column; gap:6px; }
.ca-label { font-family: var(--ca-font-display); font-weight:600; font-size:14px; color: var(--ca-marine); }
.ca-input { height:52px; padding-inline:16px; border:1.5px solid var(--ca-sable); border-radius: var(--ca-radius-cta);
  background:#fff; font-family: var(--ca-font-body); font-size:16px; }
.ca-input:focus { outline:none; border-color: var(--ca-marine); box-shadow: 0 0 0 3px rgba(18,35,63,.08); }
.ca-error { color: var(--ca-erreur); font-size:14px; }

/* ---------- 10. GRILLES UTILITAIRES ---------- */
.ca-grid { display:grid; gap: var(--ca-s-6); }
.ca-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ca-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ca-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:900px){ .ca-grid-3, .ca-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .ca-grid-2, .ca-grid-3, .ca-grid-4 { grid-template-columns: 1fr; } }

/* Bande de chiffres */
.ca-stats { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--ca-s-6); text-align:center; }
.ca-stat__num { font-family: var(--ca-font-display); font-weight:800; font-size:64px; line-height:1; }
.ca-stat__lbl { margin-top:12px; font-size:15px; opacity:.85; }
@media (max-width:900px){ .ca-stats { grid-template-columns: repeat(2,1fr); } .ca-stat__num{ font-size:48px; } }

/* Étapes numérotées (processus réel = numérotation justifiée) */
.ca-steps { counter-reset: step; display:grid; gap: var(--ca-s-3); }
.ca-step { display:grid; grid-template-columns: 56px 1fr; gap: var(--ca-s-3); align-items:start;
  border-bottom:1px solid var(--ca-sable); padding-bottom: var(--ca-s-3); }
.ca-step__n { counter-increment: step; width:56px; height:56px; background: var(--ca-vert-10);
  color: var(--ca-vert); font-family: var(--ca-font-display); font-weight:800; font-size:22px;
  display:flex; align-items:center; justify-content:center; border-radius: var(--ca-radius); }
.ca-step__n::before { content: counter(step, decimal-leading-zero); }

/* ---------- 11. ONGLETS ---------- */
.ca-tabs { display:flex; gap:24px; border-bottom:1px solid var(--ca-sable); margin-bottom: var(--ca-s-4); }
.ca-tab { font-family: var(--ca-font-display); font-weight:600; padding-bottom:12px; margin-bottom:-1px;
  border:none; border-bottom:2px solid transparent; background:none; color: var(--ca-encre-60); cursor:pointer; }
.ca-tab[aria-selected="true"] { color: var(--ca-marine); border-bottom-color: var(--ca-or); }

/* ---------- 12. ACCORDÉON FAQ ---------- */
.ca-acc { border-bottom:1px solid var(--ca-sable); }
.ca-acc__q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:20px 0;
  font-family: var(--ca-font-display); font-weight:700; font-size:18px; color: var(--ca-marine);
  display:flex; justify-content:space-between; align-items:center; gap:16px; }
.ca-acc__a { padding:0 0 20px; color: var(--ca-encre-60); font-size:16px; display:none; }
.ca-acc[open] .ca-acc__a { display:block; }
.ca-acc__q .chev { transition: transform .2s; color: var(--ca-vert); }
.ca-acc[open] .ca-acc__q .chev { transform: rotate(180deg); }

/* ---------- 13. ACCESSIBILITÉ ---------- */
.ca-scope a:focus-visible, .ca-scope button:focus-visible, .ca-btn:focus-visible {
  outline:3px solid var(--ca-or); outline-offset:3px; }
.ca-skip { position:absolute; left:-9999px; }
.ca-skip:focus { left:16px; top:16px; z-index:100; background: var(--ca-marine); color:#fff;
  padding:10px 16px; border-radius: var(--ca-radius-cta); }
@media (prefers-reduced-motion: reduce){
  .ca-tile__media > *, .ca-progress__fill, .ca-acc__q .chev { transition:none; }
}

/* ---------- 14. RÈGLES DE COULEUR (texte sur fond) ---------- */
/* Sur or, vert clair, sable, blanc → texte marine/noir.
   Sur marine, vert foncé → texte blanc. Appliqué via .ca-bg-* ci-dessus. */

/* ===================================================================== 
   15. HARMONISATION EN-TETE ET PIED DE PAGE (theme_bewise, site 20) 
   Restyle CSS des elements partages, aucune modif du QWeb. 
   ===================================================================== */
header.o_header_standard .navbar,
header .navbar.o_header_force_no_radius { background-color: var(--ca-blanc) !important; }
header #top_menu .nav-link, header .top_menu .nav-link {
  font-family: var(--ca-font-display) !important; font-weight: 600 !important;
  color: var(--ca-marine) !important; font-size: 15px !important; letter-spacing: 0 !important; }
header #top_menu .nav-link:hover, header .top_menu .nav-link:hover { color: var(--ca-vert) !important; }
header #top_menu .nav-item.active > .nav-link, header #top_menu .nav-link.active {
  color: var(--ca-marine) !important; box-shadow: inset 0 -2px 0 var(--ca-or); }
header .o_header_social_links a { color: var(--ca-marine) !important; }
header .o_header_social_links a:hover { color: var(--ca-or) !important; }
footer.o_footer, footer.o_footer .o_footer_copyright { background-color: var(--ca-marine) !important; }
footer.o_footer, footer.o_footer p, footer.o_footer li, footer.o_footer span, footer.o_footer div {
  color: var(--ca-footergris) !important; }
footer.o_footer h1, footer.o_footer h2, footer.o_footer h3, footer.o_footer h4, footer.o_footer h5, footer.o_footer h6 {
  color: #ffffff !important; font-family: var(--ca-font-display) !important; }
footer.o_footer a { color: var(--ca-footergris) !important; text-decoration: none !important; }
footer.o_footer a:hover { color: #ffffff !important; }
footer.o_footer .btn-primary { background-color: var(--ca-or) !important; border-color: var(--ca-or) !important; color: var(--ca-marine) !important; }