:root{
  --bleu:#323C52;
  --bleu-700:#28304180;
  --orange:#FF611C;
  --orange-hover:#E04E0C;
  --orange-voile:#FFF0EB;
  --gris:#F4F6F8;
  --blanc:#FFFFFF;
  --texte:#2A3140;
  --texte-doux:#6B7280;
  --bordure:#E6E9EE;
  --ombre:0 1px 3px rgba(50,60,82,.08), 0 6px 20px rgba(50,60,82,.06);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--gris);
  color:var(--texte);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

#app{display:flex;flex-direction:column;height:100dvh;max-width:560px;margin:0 auto;background:var(--gris);position:relative;}

/* ===== EN-TÊTE ===== */
.app-header{
  background:var(--bleu);
  color:#fff;
  padding:calc(var(--safe-top) + 14px) 18px 14px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;}
.brand-logo{height:26px;width:auto;display:block;}
.header-action{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(255,255,255,.12);
}
.header-action:active{background:rgba(255,255,255,.22);}

/* ===== VUES ===== */
#views{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px;}
.view{display:none;animation:fade .25s ease;}
.view.is-active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.view-head{padding:24px 20px 4px;}
.view-title{font-size:26px;font-weight:600;color:var(--bleu);}
.view-sub{color:var(--texte-doux);font-size:15px;margin-top:2px;}

/* ===== HERO (accueil) ===== */
.hero{
  background:linear-gradient(160deg,var(--bleu) 0%,#3d4a66 100%);
  color:#fff;padding:30px 22px 28px;
}
.hero-eyebrow{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#cfd6e4;}
.hero-title{font-size:28px;font-weight:600;margin:6px 0 8px;}
.hero-sub{font-size:15px;color:#dfe4ee;margin-bottom:20px;max-width:34ch;}

/* ===== SECTIONS ===== */
.section{padding:20px;}
.section-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--texte-doux);margin-bottom:12px;}

/* ===== GRILLE D'ACCÈS RAPIDE ===== */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tile{
  background:#fff;border-radius:16px;padding:20px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:var(--ombre);transition:transform .12s ease;
}
.tile:active{transform:scale(.96);}
.tile-ico{
  width:48px;height:48px;border-radius:14px;background:var(--gris);
  display:flex;align-items:center;justify-content:center;color:var(--bleu);
}
.tile-ico svg{width:24px;height:24px;}
.tile-label{font-size:14px;font-weight:600;color:var(--bleu);}

/* ===== CARTES ===== */
.card{background:#fff;border-radius:16px;padding:18px;box-shadow:var(--ombre);margin-bottom:14px;}
.card-accent{border-left:3px solid var(--orange);}
.card-title{font-size:17px;font-weight:600;color:var(--bleu);margin-bottom:6px;}
.card-text{font-size:14px;color:var(--texte-doux);margin-bottom:14px;}

/* ===== BOUTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 20px;border-radius:12px;font-size:15px;font-weight:600;
  transition:transform .12s ease,background .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-block{display:flex;width:100%;}
.btn-accent{background:var(--orange);color:#fff;}
.btn-accent:active{background:var(--orange-hover);}
.btn-outline{background:var(--orange-voile);color:var(--orange-hover);}
.btn-ghost{background:var(--gris);color:var(--bleu);border:1px solid var(--bordure);}

/* ===== LISTE SERVICES ===== */
.list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.list-item{
  background:#fff;border-radius:14px;padding:16px 18px;box-shadow:var(--ombre);
  display:flex;align-items:center;gap:14px;
}
.list-item .li-ico{
  width:42px;height:42px;border-radius:12px;background:var(--gris);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--bleu);
}
.list-item .li-ico svg{width:21px;height:21px;}
.list-item .li-body{flex:1;}
.list-item .li-title{font-weight:600;color:var(--bleu);font-size:15px;}
.list-item .li-desc{font-size:13px;color:var(--texte-doux);}
.list-item .li-chev{color:#C2C8D2;display:flex;}
.list-item .li-chev svg{width:18px;height:18px;}

/* ===== LIGNES CONTACT ===== */
.row-link{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:#fff;border-radius:14px;padding:16px 18px;box-shadow:var(--ombre);margin-bottom:10px;
}
.row-link:active{background:#fafbfc;}
.row-ico{
  width:42px;height:42px;border-radius:12px;background:var(--gris);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--bleu);
}
.row-ico svg{width:21px;height:21px;}
.row-body{flex:1;display:flex;flex-direction:column;}
.row-title{font-weight:600;color:var(--bleu);font-size:15px;}
.row-meta{font-size:13px;color:var(--texte-doux);}
.row-chev{color:#C2C8D2;display:flex;align-items:center;}
.row-chev svg{width:18px;height:18px;}

.fineprint{font-size:12px;color:var(--texte-doux);text-align:center;padding:8px 28px 0;}

/* ===== BARRE D'ONGLETS ===== */
.tabbar{
  background:#fff;border-top:1px solid var(--bordure);
  display:flex;justify-content:space-around;
  padding:8px 4px calc(var(--safe-bottom) + 8px);
  position:sticky;bottom:0;z-index:20;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--texte-doux);font-size:10.5px;font-weight:600;padding:4px 2px;
}
.tab-ico{width:22px;height:22px;}
.tab.is-active{color:var(--orange);}