/* ========== Variables ========== */
:root{
  --cream: #fdf1de;
  --text: #2C3E50;
  --muted: #50606b;
  --blue: #5DADE2;
  --blue-strong: #3498DB;
  --card-bg: rgba(255,255,255,0.88);
  --radius-lg: 26px;
  --max-width: 1250px;
  --gap: 2.8rem;
}

/* ========== Reset ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--cream);
  font-family: Inter, "SF Pro", system-ui, sans-serif;
  color:var(--text);
  line-height:1.5;
}

/* ========== NAVBAR ========== */
/* === Navbar === */
.navbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 4rem;
  background: rgba(253, 241, 222, 0.85);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.4s ease;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: #2C3E50;
}

.logo img {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  border: 2px solid #5DADE2;
  object-fit: cover;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* === Navigation === */
.navbar nav a {
  text-decoration: none;
  color: inherit;
  margin: 0 1rem;
  font-weight: 500;
  position: relative;
  transition: color 0.3s;
}

.navbar nav a::after {
  content: '';
  display: block;
  height: 2px;
  background: #5DADE2;
  transition: width 0.3s;
  width: 0;
  position: absolute;
  bottom: -4px;
  left: 0;
}

.navbar nav a:hover::after,
.navbar nav a.active::after {
  width: 100%;
}

.nav-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-login {
  background: #5DADE2;
  border: none;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  font-weight: 500;
}

.btn-login:hover {
  background: #3498DB;
  transform: scale(1.05);
}

.btn-darkmode {
  background: transparent;
  border: 2px solid #5DADE2;
  color: #5DADE2;
  font-size: 1.1rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-darkmode:hover {
  background: #5DADE2;
  color: white;
}
/* ========== Layout ========== */
.container{
  max-width:var(--max-width);
  margin:140px auto 80px;
  padding:0 1.5rem;
}

a {
  text-decoration: none;
  color: inherit;
}
/* ========== CARD — rectangle beaucoup plus grand ========== */
.card{
  display:grid;
  grid-template-columns: 440px 1fr;
  gap:var(--gap);
  align-items:start;

  background:var(--card-bg);
  border-radius:var(--radius-lg);
  padding:3.3rem 3rem;

  min-height:640px;        /* <<< PLUS GRAND ET HAUT */
  
  box-shadow:
    0 28px 60px rgba(20,30,40,0.08),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

/* ========== Photo ========== */
.photo{
  border-radius:20px;
  overflow:hidden;
  height:100%;
  max-height:540px;        /* améliore la verticalité */
  border:3px solid rgba(93,173,226,0.35);
  box-shadow:0 14px 35px rgba(93,173,226,0.15);
  background:linear-gradient(180deg, #fff, #f3faff);
}
.photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.9,.2,1);
}
.photo:hover img{transform:scale(1.06)}

/* ========== Content ========== */
.title{
  margin-top:-.2rem;
  margin-bottom:.5rem;
  font-size:2.55rem;
  letter-spacing:-.6px;
  font-weight:800;
}
.title .accent{color:var(--blue-strong)}
.role{
  color:var(--blue);
  font-size:1.05rem;
  margin-bottom:1.2rem;
  font-weight:600;
}
.lead{
  color:var(--muted);
  font-size:1.12rem;
  max-width:540px;
  margin-bottom:1.8rem;
}

/* ========== CHIPS (3 bulles bleues améliorées) ========== */
.chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin:0 0 2rem;
  padding:0;
}

.chips li{
  padding:.55rem 1.1rem;
  font-size:.93rem;
  font-weight:600;

  background:rgba(93,173,226,0.22);   /* bleu plus visible */
  color:var(--blue-strong);

  border-radius:999px;
  border:1px solid rgba(93,173,226,0.32);  /* plus pro */

  box-shadow:0 4px 12px rgba(93,173,226,0.18);

  backdrop-filter: blur(4px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.chips li:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(74,144,226,0.32);
}

/* ========== Responsive ========== */
@media(max-width:980px){
  .card{
    grid-template-columns:1fr;
    padding:2.3rem;
    min-height:unset;
  }
  .photo{
    height:340px;
    max-height:none;
  }
  .title{font-size:2.15rem}
}

@media(max-width:520px){
  .photo{height:260px}
  .title{font-size:1.75rem}
  .lead{font-size:1.02rem}
}