@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --primary:#0077B6;
  --secondary:#90E0EF;
  --text:#0f172a;         /* texte principal foncé */
  --text-soft:#334155;    /* texte secondaire */
  --bg:#f8fbff;           /* fond global clair */
  --surface:#ffffff;      /* cartes / blocs */
  --line:#dbe8f1;
  --ok:#0f766e;
  --radius:14px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:Inter,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

a{
  color:var(--primary);
}

a:hover{
  filter:brightness(0.92);
}

.container{
  width:min(1200px,92%);
  margin-inline:auto;
}

.row{display:flex}
.between{justify-content:space-between}
.center{align-items:center}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.logo{
  display:inline-block;
  padding:14px 0;
  text-decoration:none;
  color:var(--primary);
  font-weight:800;
}

.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
}

.menu a{
  text-decoration:none;
  color:var(--text);
  font-weight:600;
}

.menu a:hover{
  color:var(--primary);
}

.hero{
  padding:56px 0;
  background:linear-gradient(135deg,#e9f7fc,#ffffff);
  color:var(--text); /* force lisibilité */
}

.hero h1{
  margin:0 0 14px;
  font-size:clamp(1.8rem,4vw,2.8rem);
  line-height:1.15;
  color:var(--text);
}

.hero p{
  margin:0;
  color:var(--text-soft);
  max-width:820px;
}

.section{
  padding:34px 0;
}

h1,h2,h3,h4{
  color:var(--text);
}

h2{
  margin:0 0 12px;
  font-size:clamp(1.35rem,3vw,2rem);
}

p{
  color:var(--text);
}

.lead{
  color:var(--text-soft);
  max-width:860px;
}

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

@media(max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  color:var(--text);
}

.card p, .card li{
  color:var(--text);
}

.btn{
  display:inline-block;
  background:var(--primary);
  color:#fff !important;
  text-decoration:none;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  transition:.25s;
}

.btn:hover{
  transform:translateY(-1px);
}

.table-wrap{
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

table{
  width:100%;
  min-width:980px;
  border-collapse:collapse;
  background:#fff;
  color:var(--text);
}

th,td{
  padding:10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  color:var(--text);
}

th{
  background:#f2f9fd;
  color:#0b2940;
  font-size:.92rem;
}

tr:nth-child(even){
  background:#fcfeff;
}

.rank-1{
  font-weight:800;
  color:var(--ok);
}

.list-links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

@media(max-width:1100px){
  .list-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .list-links{grid-template-columns:1fr}
}

.list-links a{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  text-decoration:none;
  color:var(--text);
}

.list-links a:hover{
  border-color:var(--primary);
  color:var(--primary);
}

.faq details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text);
}

.faq details + details{
  margin-top:10px;
}

.faq summary{
  cursor:pointer;
  font-weight:600;
  color:var(--text);
}

.cta{
  background:linear-gradient(135deg,#0077B6,#005f93);
  color:#fff;
  border-radius:16px;
  padding:22px;
}

.cta p, .cta strong, .cta a{
  color:#fff !important;
}

.breadcrumb ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
  padding:0;
}

.breadcrumb li{
  color:var(--text-soft);
}

.breadcrumb li::after{
  content: '>';
  margin-left:8px;
  color:#94a3b8;
}

.breadcrumb li:last-child::after{
  content:'';
}

.breadcrumb a{
  text-decoration:none;
  color:var(--primary);
}

.site-footer{
  margin-top:40px;
  border-top:1px solid var(--line);
  background:#fff;
}

.site-footer p{
  margin:0;
  padding:20px 0;
  color:#64748b;
}

/* Reveal on scroll */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .35s, transform .35s;
}
.reveal-on-scroll.revealed{
  opacity:1;
  transform:translateY(0);
}

/* Custom CSS */
.breadcrumb{
  margin-left: 160px!important;
}