/* ==========================================================================
   Material Design — feuille de style
   A charger sur toutes les pages ou vous voulez ce style : 
   <link rel="stylesheet" href="style.css">
   Necessite les polices Roboto + Material Icons (importees ci-dessous).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* --- Design tokens -------------------------------------------------- */
:root{
  --md-primary:#6200EE;
  --md-primary-variant:#3700B3;
  --md-secondary:#00BFA5;
  --md-secondary-variant:#018786;
  --md-motion:#C2185B;
  --md-elevation-accent:#1565C0;
  --md-bg:#F3F1F8;
  --md-surface:#FFFFFF;
  --text-high:rgba(0,0,0,.87);
  --text-med:rgba(0,0,0,.60);
  --text-disabled:rgba(0,0,0,.38);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-decel:cubic-bezier(0,0,.2,1);
  --e1:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  --e2:0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
  --e3:0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);
  --e4:0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
  --e5:0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--md-bg); color:var(--text-high);
  font-family:'Roboto',Arial,sans-serif; -webkit-font-smoothing:antialiased;
}
.container{max-width:920px; margin:0 auto; padding:0 24px;}
p{color:var(--text-med); line-height:1.65; font-size:15px;}
h1,h2,h3{font-weight:500; margin:0;}

/* --- Barre superieure (appbar) --------------------------------------- */
.appbar{
  background:linear-gradient(135deg,#5B6EF5 0%, #8B2FF0 100%);
  box-shadow:var(--e4);
  padding:28px 0 24px;
  position:relative; z-index:5;
}
.appbar-row{display:flex; align-items:center; gap:16px;}
.avatar{
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:#fff; flex-shrink:0;
}
.appbar h1{color:#fff; font-size:24px;}
.appbar p.tagline{color:rgba(255,255,255,.85); font-size:14px; margin-top:2px;}
.appbar-lede{color:rgba(255,255,255,.92); font-size:14px; max-width:640px; margin:18px 0 0;}

/* --- Onglets de navigation (tabs) ------------------------------------- */
.tabs{
  background:var(--md-surface); box-shadow:var(--e1);
  position:sticky; top:0; z-index:4;
  display:flex; overflow-x:auto;
}
.tabs a{
  padding:16px 18px; font-size:13px; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-med); text-decoration:none;
  white-space:nowrap; border-bottom:3px solid transparent;
  transition:color 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}
.tabs a:hover{color:var(--md-primary);}
.tabs a:focus-visible{outline:2px solid var(--md-primary); outline-offset:-2px;}

section{padding:56px 0;}
section + section{border-top:1px solid rgba(0,0,0,.06);}
.eyebrow{font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--md-primary);}
h2{font-size:22px; margin-top:6px;}
section > .container > p{max-width:640px; margin-top:10px; margin-bottom:32px;}

/* --- Cartes generiques (elevation 1dp, monte a 2dp au survol) --------- */
.grid-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px;}
.use-card{
  background:var(--md-surface); border-radius:8px; padding:20px 18px;
  box-shadow:var(--e1); transition:box-shadow 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.use-card:hover{box-shadow:var(--e2); transform:translateY(-3px);}
.use-card .material-icons{color:var(--md-primary); font-size:26px;}
.use-card h3{font-size:15px; margin:10px 0 6px;}
.use-card p{font-size:13px; margin:0; line-height:1.5;}

/* --- Echelle d'elevation (les "feuilles de papier") ------------------- */
.ladder{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px;}
.paper{
  flex:1 1 150px; min-height:96px; background:var(--md-surface); border-radius:8px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:14px;
  transition:box-shadow 260ms var(--ease-standard), transform 260ms var(--ease-standard);
  cursor:default;
}
.paper span.dp{font-size:20px; font-weight:500; color:var(--md-primary);}
.paper span.role{font-size:12px; color:var(--text-med);}
.paper[data-rest="0"]{box-shadow:none;}
.paper[data-rest="1"]{box-shadow:var(--e1);}
.paper[data-rest="2"]{box-shadow:var(--e2);}
.paper[data-rest="3"]{box-shadow:var(--e3);}
.paper[data-rest="4"]{box-shadow:var(--e4);}
.paper:hover{transform:translateY(-6px);}
.paper[data-rest="0"]:hover{box-shadow:var(--e1);}
.paper[data-rest="1"]:hover{box-shadow:var(--e2);}
.paper[data-rest="2"]:hover{box-shadow:var(--e3);}
.paper[data-rest="3"]:hover{box-shadow:var(--e4);}
.paper[data-rest="4"]:hover{box-shadow:var(--e5);}
.caption{font-size:13px; color:var(--text-disabled); font-style:italic;}

/* --- Palette, coins, opacites de texte --------------------------------- */
.swatch-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.swatch{width:130px;}
.swatch .block{height:64px; border-radius:8px; margin-bottom:8px;}
.swatch .name{font-size:13px; font-weight:500;}
.swatch .hex{font-size:12px; color:var(--text-med);}

.radius-row{display:flex; gap:24px; flex-wrap:wrap; align-items:flex-end; margin-bottom:36px;}
.radius-item{text-align:center;}
.radius-box{width:76px; height:76px; background:var(--md-primary); margin-bottom:10px;}
.radius-item .name{font-size:13px; max-width:120px;}

.opacity-demo p{font-size:16px; margin:6px 0; line-height:1.4;}
.opacity-demo .h{color:rgba(0,0,0,.87);}
.opacity-demo .m{color:rgba(0,0,0,.60);}
.opacity-demo .d{color:rgba(0,0,0,.38);}
.opacity-demo .label{font-size:12px; color:var(--md-primary); margin-top:2px; margin-bottom:0;}

/* --- Carte de demo (avis, badges, boutons) ------------------------------ */
.interaction-row{display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start;}
.demo-card{
  background:var(--md-surface); border-radius:8px; overflow:hidden; width:280px;
  box-shadow:var(--e1); transition:box-shadow 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.demo-card:hover{box-shadow:var(--e3); transform:translateY(-4px);}
.demo-card .strip{height:70px; background:linear-gradient(135deg,#5B6EF5 0%, #8B2FF0 100%); display:flex; align-items:center; gap:12px; padding:0 16px;}
.demo-card .strip .avatar{width:34px; height:34px; font-size:15px; background:rgba(255,255,255,.28);}
.demo-card .strip .t{color:#fff; font-size:14px; font-weight:500;}
.demo-card .strip .s{color:rgba(255,255,255,.85); font-size:11px;}
.demo-card .body{padding:18px 16px;}
.rating{font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px;}
.rating .material-icons{color:#F5A623; font-size:17px;}
.quote{font-size:13px; font-style:italic; color:var(--text-med); margin:12px 0;}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.chip{border-radius:999px; padding:6px 14px; font-size:12px; font-weight:500; color:#fff;}
.chip.c1{background:var(--md-elevation-accent);}
.chip.c2{background:var(--md-motion);}
.chip.c3{background:var(--md-secondary-variant);}
.card-actions{display:flex; align-items:center; gap:18px;}

/* --- Boutons + effet ripple (le ripple lui-meme vient du JS) ---------- */
.btn{
  position:relative; overflow:hidden; border:none; font-family:inherit;
  font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; border-radius:4px;
}
.btn-contained{
  background:var(--md-primary); color:#fff; padding:11px 22px;
  box-shadow:var(--e1); transition:box-shadow 200ms var(--ease-standard);
}
.btn-contained:hover{box-shadow:var(--e2);}
.btn-contained:active{box-shadow:var(--e3);}
.btn-text{background:none; color:var(--md-primary); padding:11px 6px;}
.ripple{position:absolute; border-radius:50%; transform:scale(0); pointer-events:none; animation:ripple-anim 600ms var(--ease-standard);}
.ripple.light{background:rgba(255,255,255,.5);}
.ripple.dark{background:rgba(98,0,238,.18);}
@keyframes ripple-anim{to{transform:scale(2.6); opacity:0;}}

/* --- Menu contextuel + FAB --------------------------------------------- */
.side-demos{display:flex; flex-direction:column; gap:28px; align-items:flex-start;}
.menu-wrap{position:relative;}
.icon-btn{
  position:relative; overflow:hidden; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12); background:var(--md-surface); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-med);
}
.menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:170px;
  background:var(--md-surface); border-radius:4px; box-shadow:var(--e3);
  opacity:0; transform:scale(.92); transform-origin:top left; pointer-events:none;
  transition:opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
  z-index:6;
}
.menu.open{opacity:1; transform:scale(1); pointer-events:auto;}
.menu button{display:block; width:100%; text-align:left; padding:12px 16px; background:none; border:none; font:inherit; font-size:13px; color:var(--text-high); cursor:pointer;}
.menu button:hover{background:rgba(0,0,0,.04);}
.menu-caption{font-size:12px; color:var(--text-disabled); margin-top:6px;}

.fab{
  position:relative; overflow:hidden; width:56px; height:56px; border-radius:50%;
  background:var(--md-secondary); color:#fff; border:none; cursor:pointer;
  box-shadow:var(--e3); transition:box-shadow 200ms var(--ease-standard), transform 200ms var(--ease-standard);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.fab:hover{box-shadow:var(--e4); transform:translateY(-2px);}
.fab-caption{font-size:12px; color:var(--text-disabled); margin-top:8px;}

/* --- Bloc "ambiance" ---------------------------------------------------- */
.mood-callout{
  background:linear-gradient(135deg, rgba(91,110,245,.07), rgba(139,47,240,.07));
  border-radius:12px; padding:28px 28px; box-shadow:var(--e1);
}
.mood-callout p{font-size:16px; color:var(--text-high); margin:0; line-height:1.7;}

@media (max-width:600px){
  .appbar{padding:22px 0 18px;}
  section{padding:40px 0;}
  .interaction-row{gap:24px;}
  .demo-card{width:100%;}
}