:root{
  --bg: #ffffff;
  --text: #222222;
  --muted: #666666;
  --accent: #3a86ff;
  --accent-2:#12b886;  /* vert XRP */
  --border:#e6e6e6;
  --card:#fafafa;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
  --radius: 14px;
  --maxw: 1200px;
  --leading: 1.65;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115;
    --text:#e8e8e8;
    --muted:#a5a5a5;
    --accent:#7aa7ff;
    --accent-2:#31d0a3;
    --border:#262a34;
    --card:#151923;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}

html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 16px/var(--leading) system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,Noto Sans;
}

/* ===== Utils ===== */
.muted{ color:var(--muted); }

/* ===== Header (non-sticky) ===== */
header.site-header{
  position: static;
  background: color-mix(in oklab, var(--bg) 92%, var(--card));
  border-bottom:1px solid var(--border);
}
.topbar{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; }
.logo{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:inherit; font-weight:700; }
.logo-mark{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--accent-2),color-mix(in oklab,var(--accent) 55%, var(--accent-2))); display:grid; place-items:center; box-shadow:var(--shadow); }
.logo-mark svg{ width:40px; height:auto; }

nav.primary{ margin-left:auto; }
.menu{ list-style:none; margin:0; padding:0; display:flex; gap:.6rem; }
.menu a{ display:inline-block; padding:.55rem .8rem; text-decoration:none; color:inherit; border-radius:10px; border:1px solid transparent; }
.menu a:hover{ border-color:var(--border); background:var(--card); }
/* ===== Menu niveau 2 (dropdown) ===== */

.menu > li {
  position: relative; /* nécessaire pour positionner le sous-menu */
}

/* Sous-menu caché par défaut (desktop) */
.submenu {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
  z-index: 50;
}

/* Affichage au survol / focus clavier */
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Liens du sous-menu */
.submenu a {
  display: block;
  padding: .45rem .9rem;
  text-decoration: none;
  color: inherit;
  font-size: .95rem;
  border-radius: 0;
  border: 0;
}

.submenu a:hover {
  background: var(--card);
}

/* Petit indicateur visuel pour les items avec sous-menu (optionnel) */
.has-submenu > a::after {
  content: "▾";
  font-size: .7rem;
  margin-left: .25rem;
  opacity: .8;
}

.hamburger{ display:none; margin-left:auto; border:1px solid var(--border); background:var(--card); padding:.45rem .6rem; border-radius:10px; }

/* ===== Breadcrumb ===== */
.breadcrumb{ max-width:var(--maxw); margin: .4rem auto 0; padding: 0 1rem 1rem; color:var(--muted); font-size:.95rem; }
.breadcrumb a{ color:inherit; text-decoration:none; border-bottom:1px dashed color-mix(in oklab, var(--muted) 60%, transparent); }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .sep{ opacity:.5; padding:0 .35rem; }

/* ===== Layout principal ===== */
.container{ max-width:var(--maxw); margin: 0 auto; padding: 1rem; display:grid; grid-template-columns: 1fr 320px; gap: 28px; }
/* Empêche qu'un enfant élargisse la colonne grid */
.container > * { min-width: 0; }
#article { min-width: 0; }

@media (max-width: 980px){
  .container{ grid-template-columns: 1fr; }
 
  .menu > li {
    position: static; /* on enlève le positionnement absolu du sous-menu */
  }

  .submenu {
    position: static;
    border: 0;
    box-shadow: none;
    padding: .2rem 0 .4rem 1.2rem;
    margin: 0 0 .3rem;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .submenu a {
    padding: .35rem .85rem;
    font-size: .95rem;
  }
}

/* ===== Article ===== */
main article{
  background:var(--bg);
  padding: clamp(12px, 2.5vw, 24px);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
main article h1{
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  margin: .2rem 0 .2rem;
  line-height:1.2;
}
main article h2{
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 1.2rem 0 .6rem;
  line-height:1.25;
  /*display:inline-flex;*/ align-items:center; gap:.6rem; padding-bottom:.35rem; border-bottom:3px solid var(--accent);
}
main article h3{ font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 1.4rem 0 .4rem; }
main article p{ margin:.85rem 0; }
main article a{ color:var(--accent); text-decoration:none; border-bottom:1px dashed color-mix(in oklab, var(--accent) 65%, transparent); }
main article a:hover{ text-decoration:underline; }
main article img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto 1.5rem; /* espace au-dessus et au-dessous */
  border-radius: var(--radius);
 /* box-shadow: var(--shadow);*/
}
/* ===== Tables – Option A (wrapper scroll) ===== */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  margin: 1rem 0 1.4rem;
}
.table-scroll > table { table-layout: auto; 
  width: 100%;
  min-width: 640px;    /* optionnel */
  border-collapse: collapse;
  margin: 0;
}
.table-scroll thead th{
  text-align:left; font-weight:700; font-size:.95rem;
  padding:.75rem .9rem; border-bottom:1px solid var(--border);
  background:linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02)), var(--card);
}
.table-scroll td{
  padding:.75rem .9rem; border-bottom:1px solid var(--border); vertical-align:top;
}

/* ===== Sidebar XRP – Follow until bottom (JS-driven) ===== */
aside.sidebar{ position:relative; }
.follow-until-bottom{ }
.xrp-card{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; will-change: transform; }
.xrp-card header{ display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; border-bottom:1px solid var(--border); background: color-mix(in oklab, var(--card) 92%, var(--bg)); }
.xrp-badge{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--accent-2),color-mix(in oklab, var(--accent) 60%, var(--accent-2))); display:grid; place-items:center; }
.xrp-badge svg{ width:18px; height:18px; }


.stats{
	padding:.2rem 1rem 1rem;
	
}
.stats dl {
  display: block;        
  margin: 1rem 0;
}

.stats dt {
  font-weight: 500;
  margin-top: 0.5rem;    
}

.stats dd {
  margin: 0;              
  margin-left: 0;        
}

/*
.xrp-stats{ padding:.2rem 1rem 1rem; }
.xrp-stats dl{ display:grid; grid-template-columns: 1fr auto; gap:.45rem .8rem; margin:1rem 0; }
.xrp-stats dt{ color:var(--muted); }
.xrp-stats dd{ margin:0; font-weight:600; }
*/


.xrp-actions{ display:flex; gap:.5rem; padding: .8rem 1rem 1.1rem; border-top:1px solid var(--border); }
.btn{ display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .75rem; border-radius:10px; border:1px solid var(--border); background:var(--bg); text-decoration:none; color:inherit; }
.btn:hover{ background:var(--card); }

.note{ color:var(--muted); font-size:.9rem; padding:0 1rem 1rem; }

/* ===== Footer ===== */
footer.site-footer{ margin-top: 28px; border-top:1px solid var(--border); background: color-mix(in oklab, var(--bg) 92%, var(--card)); }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:1.2rem 1rem; display:grid; grid-template-columns: 1fr auto; gap:1rem; }
.footer-nav{ display:flex; gap:.8rem; flex-wrap:wrap; }
.footer-nav a{ color:inherit; text-decoration:none; padding:.2rem .45rem; border-radius:8px; border:1px solid transparent; }
.footer-nav a:hover{ border-color:var(--border); background:var(--card); }

/* ===== Mobile menu (one source of truth) ===== */
@media (max-width: 980px){
  .container{ grid-template-columns: 1fr; }
  nav.primary{ display:none; }
  .hamburger{ display:inline-flex; }
  nav.primary.open{ 
    display:block; 
    position:fixed; 
    inset:60px 12px auto 12px; 
    background:var(--bg); 
    border:1px solid var(--border); 
    border-radius:14px; 
    box-shadow: var(--shadow); 
    padding:.6rem; 
    z-index:60;
  }
  .primary ul { flex-direction:column; }
  .primary a { display:block; padding:.7rem .85rem; }
}


/* === Table containment hardening === */
.table-scroll {
  display: block;
  max-width: 100%;
  inline-size: 100%;
}

.table-scroll > table { table-layout: auto; 
  max-width: none;          /* allow natural width inside scroll area */
}

.table-scroll th,
.table-scroll td {
  word-break: break-word;   /* prevent extra-long strings from blowing layout */
  overflow-wrap: anywhere;  /* modern alias */
}

/* Optional: minimum cell width for readability */
@supports (min-width: 0) {
  .table-scroll th,
  .table-scroll td { min-width: 110px; }
}


/* === Sidebar follow: ensure wrapper is relative and card is transform-friendly === */
aside.sidebar { position: relative; }

.sidebar .xrp-card header img{ width:40px; height:auto; display:block; }

thead{ display: table-header-group; }

/* Fix pour la page d’accueil – container en pleine largeur */
.home-main .container , #contact .container, #cgu .container, #confidentialite .container{
  display: block;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem;
}

/* ===== FAQ SECTION ===== */
details {
  background: #f9f9fb;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 20px 0;
  padding: 15px 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol */
details:hover {
  background: #f3f3f7;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

/* Sommaire (titre de la question) */
details summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  list-style: none;
  font-weight: 600;
  font-size: 1.05rem;
  color: #222;
}

/* Supprimer le triangle par défaut */
details summary::-webkit-details-marker {
  display: none;
}

/* Chevron personnalisé */
details summary::before {
  content: "▸";
  font-size: 1.2rem;
  color: #3ccd0d;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

/* Rotation du chevron quand ouvert */
details[open] summary::before {
  transform: rotate(90deg);
}

/* Titre de la question */
details summary h4 {
  display: inline;
  margin: 0;
  font-size: 1.05rem;
}

/* Paragraphe de réponse */
details p {
  margin: 12px 0 5px 0;
  line-height: 1.6;
  color: #333;
  font-size: 0.98rem;
}

/* Par défaut, le paragraphe est visible (comme demandé) */
details[open] p,
details p {
  display: block;
}


/* home */

/***** utilitaires *****/
.section-hero{padding: clamp(2rem,6vw,4rem) 0; background: var(--card);}
.section-head{margin-bottom: 1rem}
.center{text-align:center}
.small{font-size:.9rem}

/***** hero *****/
.hero-wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1rem,4vw,2rem); align-items:center}
.hero-text .lead{margin:.6rem 0 1rem}
.hero-ctas{display:flex; gap:.6rem; flex-wrap:wrap}
.kpis{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem; list-style:none; padding:0; margin:0}
.kpis li{background:var(--bg); border:1px solid var(--border); border-radius: var(--radius); padding: .9rem; box-shadow: var(--shadow); display:flex; flex-direction:column; align-items:flex-start}
.kpis strong{font-size:1.4rem}
.kpis span{color:var(--muted); font-size:.9rem}

/***** cartes génériques *****/
.cards{display:grid; gap: clamp(.8rem,2vw,1rem)}
.cards-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.card{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem}
.card-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.4rem}
.bullets{margin:.6rem 0 .8rem; padding-left:1.2rem}
.chips{display:flex; gap:.4rem; flex-wrap:wrap}
.chip{border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; font-size:.9rem; background:var(--card)}
.chip-xrp{border-color: var(--accent-2)}
.card-actions{display:flex; gap:.6rem; margin-top:.8rem}

/***** rating *****/
.rating{display:flex; align-items:center; gap:.3rem}
.rating .stars{--max:5; --size:18px; position:relative; display:inline-block; width: calc(var(--size)*var(--max)); height: var(--size); background: linear-gradient(90deg, currentColor calc(var(--value)/var(--max)*100%), #ddd 0); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 20\"><defs><path id=\"s\" d=\"M10 15l5.88 3.09-1.12-6.54L20 6.91l-6.56-.95L10 0 6.56 5.96 0 6.91l5.24 4.64-1.12 6.54z\"/></defs><use href=\"#s\" x=\"0\"/><use href=\"#s\" x=\"20\"/><use href=\"#s\" x=\"40\"/><use href=\"#s\" x=\"60\"/><use href=\"#s\" x=\"80\"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 20\"><defs><path id=\"s\" d=\"M10 15l5.88 3.09-1.12-6.54L20 6.91l-6.56-.95L10 0 6.56 5.96 0 6.91l5.24 4.64-1.12 6.54z\"/></defs><use href=\"#s\" x=\"0\"/><use href=\"#s\" x=\"20\"/><use href=\"#s\" x=\"40\"/><use href=\"#s\" x=\"60\"/><use href=\"#s\" x=\"80\"/></svg>') center/contain no-repeat}

/***** responsif *****/
@media (max-width: 980px){
  .hero-wrap{grid-template-columns: 1fr}
  .cards-3{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .cards-3{grid-template-columns: 1fr}
}