.hero{
  padding:44px 0 24px 0;
}

.city-card,
.city-card:hover,
.city-card:focus,
.city-card:visited,
.city-card:hover * {
  text-decoration:none !important;
}
.hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
}
.hero__content h1{font-size:2.05rem;letter-spacing:-0.02em;}
.hero__lead{font-size:1.05rem;color:var(--color-muted);}
.hero__highlights{margin-top:14px;}
.hero__highlights li{margin:6px 0;color:var(--color-text);}

.hero__cta{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

#inscription,
#comment-ca-marche,
#lexique,
#faq-home{
  scroll-margin-top:92px;
}

#inscription:target,
#comment-ca-marche:target,
#lexique:target,
#faq-home:target{
  animation:targetGlow .6s ease both;
}

.auth-card.attention{
  animation:cardAttention 1.05s ease both;
}

@keyframes cardAttention{
  0%{transform:translateY(10px);}
  40%{transform:translateY(0);}
  70%{transform:translateY(0);}
  100%{transform:translateY(0);}
}

@keyframes targetGlow{
  from{box-shadow:0 0 0 rgba(var(--color-accent-rgb), 0.0);}
  to{box-shadow:0 0 0 6px rgba(var(--color-accent-rgb), 0.16);}
}

/* Gender Cards */
.gender-selection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gender-card {
  cursor: pointer;
  position: relative;
}
.gender-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gender-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  background: linear-gradient(150deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.gender-card__inner::after {
  content: '';
  position: absolute;
  inset: -40% auto auto -25%;
  width: 90px;
  height: 90px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.24), rgba(var(--color-accent-rgb), 0));
  pointer-events: none;
}
.gender-icon {
  font-size: 26px;
  color: var(--color-muted);
  line-height: 1;
}
.gender-label {
  font-weight: 700;
  color: var(--color-text);
}
.gender-card:hover .gender-card__inner {
  transform: translateY(-1px);
  background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border-color: rgba(var(--color-accent-rgb), 0.45);
  box-shadow: 0 12px 26px rgba(0,0,0,0.22);
}
.gender-card input:checked + .gender-card__inner {
  background: linear-gradient(150deg, rgba(var(--color-accent-rgb), 0.28), rgba(var(--color-accent-rgb), 0.12));
  border-color: var(--color-accent);
  box-shadow: 0 12px 28px rgba(var(--color-accent-rgb), 0.28);
}
.gender-card input:checked + .gender-card__inner .gender-icon,
.gender-card input:checked + .gender-card__inner .gender-label {
  color: var(--color-accent);
}

[data-theme="clear-mode"] .gender-card__inner {
  background: linear-gradient(150deg, rgba(15,23,42,0.04), rgba(15,23,42,0.01));
  border-color: rgba(15,23,42,0.14);
}

[data-theme="clear-mode"] .gender-card:hover .gender-card__inner {
  border-color: rgba(var(--color-accent-rgb), 0.45);
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
}

/* Auth Card Modal Behavior */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.auth-card.is-modal::-webkit-scrollbar {
  width: 8px;
}

.auth-card.is-modal::-webkit-scrollbar-thumb {
  background: rgba(var(--color-accent-rgb), 0.45);
  border-radius: 999px;
}

.auth-card .form-row input,
.auth-card .form-row select,
.auth-card .form-row textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.auth-card .form-row input:focus,
.auth-card .form-row select:focus,
.auth-card .form-row textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
}

.auth-card .toggle-switch {
  border: 1px solid rgba(var(--color-accent-rgb), 0.35);
  background: rgba(var(--color-accent-rgb), 0.12);
}

[data-theme="clear-mode"] .auth-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="clear-mode"] .auth-card .form-row input,
[data-theme="clear-mode"] .auth-card .form-row select,
[data-theme="clear-mode"] .auth-card .form-row textarea {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.16);
}

[data-theme="clear-mode"] .auth-card .toggle-switch {
  border-color: rgba(15, 23, 42, 0.28);
  background: rgba(15, 23, 42, 0.08);
}

[data-theme="clear-mode"] .auth-card .toggle-container input:checked ~ .toggle-switch {
  border-color: transparent;
  background: var(--color-accent);
}
.auth-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.auth-card {
  position: relative;
  padding: 20px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  z-index: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.auth-card.is-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-accent-rgb), 0.45) transparent;
  z-index: 2000 !important;
  isolation: isolate;
  background: var(--color-surface);
  backdrop-filter: none;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
  .auth-card.is-modal {
    width: calc(100% - 32px);
  }
}

/* Très petits écrans : ancrer en haut pour que le bouton reste visible */
@media (max-height: 620px) {
  .auth-card.is-modal {
    top: 12px;
    transform: translate(-50%, 0);
    max-height: calc(100dvh - 24px);
  }
}

.auth-card__hint{color:var(--color-muted);}

.auth-stepper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}

.auth-stepper__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.03);
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.auth-stepper__index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(255,255,255,0.14);
  color: inherit;
}

.auth-stepper__item.is-active {
  border-color: rgba(var(--color-accent-rgb), 0.6);
  background: rgba(var(--color-accent-rgb), 0.16);
  color: var(--color-text);
}

.auth-stepper__item.is-active .auth-stepper__index {
  background: var(--color-accent);
  color: #fff;
}

.hero a:visited,
.section a:visited,
.tip-card__text a:visited,
.mini-text a:visited {
  color: color-mix(in srgb, var(--color-accent) 62%, var(--color-accent-2) 38%);
}

@media (max-width: 480px) {
  .gender-selection {
    grid-template-columns: 1fr;
  }
  .auth-stepper__label {
    font-size: 0.72rem;
  }
}

.auth-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.auth-actions{margin-top:8px;}
.auth-actions > span{flex:1;}

/* ── Erreurs inline sous champ (step validation) ── */
.step-error-msg {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #f87171;
  line-height: 1.35;
  padding: 0 2px;
  animation: stepErrIn 0.18s ease both;
}

@keyframes stepErrIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-inline-link{
  display:inline;
  background:none;
  border:none;
  color:var(--color-accent);
  font-weight:700;
  font-size:inherit;
  cursor:pointer;
  text-decoration:underline;
  padding:0;
  margin:0;
}
.btn-inline-link:hover{
  color:var(--color-accent-2);
}

/* ── Input + bouton œil ── */
.input-with-button {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
}

.input-with-button input {
  flex: 1;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  border-right: none !important;
  min-width: 0;
}

.input-with-button .toggle-password {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 0.9rem;
  transition: color 0.15s, background 0.15s;
  padding: 0;
}

.input-with-button .toggle-password:hover {
  color: var(--color-text);
  background: rgba(255,255,255,0.07);
}

[data-theme="clear-mode"] .input-with-button .toggle-password {
  background: #f8fafc;
  border-color: rgba(15,23,42,0.16);
}

.input-with-button input:focus {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  z-index: 1;
}

/* ── Zone erreurs globale formulaire ── */
section.errors {
  min-height: 0;
  overflow: hidden;
  transition: all 0.22s ease;
}

section.errors.visible {
  margin-bottom: 4px;
}

section.errors .msg_invalid,
section.errors .msg_valid {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: msgSlideIn 0.22s ease both;
}

@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

section.errors .msg_invalid {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

section.errors .msg_valid {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #86efac;
}

section.errors .msg_invalid ul {
  margin: 6px 0 0 0;
  padding-left: 18px;
}

section.errors .msg_invalid li {
  margin: 3px 0;
}

[data-theme="clear-mode"] section.errors .msg_invalid {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.28);
  color: #dc2626;
}

[data-theme="clear-mode"] section.errors .msg_valid {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.28);
  color: #16a34a;
}

/* ── Bloc succès inscription + boutons webmail ── */
.register-success {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.webmail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.webmail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}

.webmail-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.webmail-btn:visited { color: #fff !important; }

.webmail-btn--gmail   { background: #ea4335; color: #fff; }
.webmail-btn--gmail:visited { color: #fff !important; }
.webmail-btn--outlook { background: #0078d4; color: #fff; }
.webmail-btn--outlook:visited { color: #fff !important; }
.webmail-btn--yahoo   { background: #6001d2; color: #fff; }
.webmail-btn--yahoo:visited { color: #fff !important; }
.webmail-btn--icloud  { background: #3a9bdc; color: #fff; }
.webmail-btn--icloud:visited { color: #fff !important; }
.webmail-btn--proton  { background: #6d4aff; color: #fff; }
.webmail-btn--proton:visited { color: #fff !important; }
.webmail-btn--login   { background: rgba(99,102,241,0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.35); }
.webmail-btn--login:visited { color: #a5b4fc !important; }
.webmail-btn--login:hover { background: rgba(99,102,241,0.25); }

[data-theme="clear-mode"] .webmail-btn--gmail   { background: #ea4335; color: #fff; }
[data-theme="clear-mode"] .webmail-btn--outlook { background: #0078d4; color: #fff; }
[data-theme="clear-mode"] .webmail-btn--yahoo   { background: #6001d2; color: #fff; }
[data-theme="clear-mode"] .webmail-btn--icloud  { background: #3a9bdc; color: #fff; }
[data-theme="clear-mode"] .webmail-btn--proton  { background: #6d4aff; color: #fff; }
[data-theme="clear-mode"] .webmail-btn--login   { background: rgba(99,102,241,0.1); color: #6366f1; border-color: rgba(99,102,241,0.3); }

.gallery{
  padding:12px 0 10px 0;
}
.gallery__link{
  display:block;
  text-decoration:none;
}
.gallery__link:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:6px;
  border-radius:14px;
}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.gallery__item{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
}
.gallery__item img{filter:none;transform:none;}

.location-intro{
  margin-top:12px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}

.location-intro .gallery{
  padding:0;
  flex:0 0 260px;
  width:260px;
}

.location-intro .gallery__grid{
  grid-template-columns:repeat(2, 1fr);
}

.location-intro__text{
  flex:1 1 420px;
  min-width:min(420px, 100%);
}

@media (max-width: 720px){
  .location-intro .gallery{
    flex:1 1 100%;
    width:100%;
  }
  .location-intro .gallery__grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* (old location-card + filmstrip CSS removed — replaced by city-grid cards below) */

.section{
  padding:34px 0;
}
.section__title{font-size:1.6rem;}
.section__lead{color:var(--color-muted);max-width:72ch;}

.guide-spotlight__grid{
  display:grid;
  gap:16px;
}

.quiz-spotlight__card{
  position:relative;
  background:linear-gradient(145deg, rgba(14,18,26,0.9), rgba(var(--color-accent-rgb), 0.10));
  border:1px solid rgba(var(--color-accent-rgb), 0.28);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}

[data-theme="clear-mode"] .quiz-spotlight__card{
  background:linear-gradient(145deg, rgba(var(--color-accent-rgb), 0.12), rgba(var(--color-accent-2-rgb), 0.10)), var(--color-surface);
  border-color: rgba(var(--color-accent-rgb), 0.18);
  box-shadow: 0 14px 34px rgba(var(--color-accent-rgb), 0.08);
}
.quiz-spotlight__card .section__title{
  margin:0;
  position:relative;
  z-index:1;
  font-size:1.25rem;
}
.quiz-spotlight__card .section__lead{
  margin:0;
  position:relative;
  z-index:1;
  font-size:0.88rem;
}
.quiz-spotlight__card::before{
  content:"";
  position:absolute;
  inset:-40% 20% auto auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb), 0.25), transparent 65%);
  opacity:0.8;
  pointer-events:none;
}
.quiz-spotlight__label{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.75rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--color-accent-2);
}
.quiz-spotlight__chips{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.quiz-spotlight__chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  font-size:0.78rem;
  font-weight:800;
  color:var(--color-text);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

[data-theme="clear-mode"] .quiz-spotlight__chip{
  border-color: rgba(18, 20, 27, 0.12);
  background: rgba(255, 255, 255, 0.65);
}
.quiz-spotlight__chip svg,
.quiz-spotlight__chip i{
  width:14px;
  height:14px;
}
.quiz-spotlight__list{
  position:relative;
  z-index:1;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  margin-top:6px;
  min-width:0;
}
.quiz-spotlight__list li{
  position:relative;
  padding-left:18px;
  line-height:1.35;
  font-size:0.85rem;
  color:var(--color-muted);
}
.quiz-spotlight__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.5em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--color-accent);
}

.quiz-spotlight__bottom{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.quiz-spotlight__bottom .guide-spotlight__actions{
  margin:0;
  display:flex;
}

.quiz-spotlight__bottom .btn{
  white-space:nowrap;
}

.glossary{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.glossary__item{
  padding:16px;
}

.glossary__item dt{
  font-weight:900;
  margin:0 0 8px 0;
}

 .glossary__icon{
  width:18px;
  height:18px;
  margin-right:8px;
  vertical-align:-3px;
  color:var(--color-accent);
 }

.glossary__item dd{
  margin:0;
  color:var(--color-muted);
}

.trust-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.trust-card{
  padding:16px;
}

.trust-card h3{margin:0 0 8px 0;font-size:1.15rem;}
.trust-card p{margin:0;color:var(--color-muted);}

/* ── City Cards (theme-aligned local SEO block) ── */
.city-grid{
  margin-top:20px;
  gap:14px;
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:2px 2px 10px 2px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:grab;
}

.city-grid::-webkit-scrollbar{
  display:none;
}

.city-grid > .city-card{
  scroll-snap-align:start;
}

.city-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  flex:0 0 360px;
  max-width:360px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(120% 100% at 5% -20%, rgba(var(--color-accent-rgb), 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
  box-shadow:0 10px 28px rgba(0,0,0,0.20);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.city-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.035) 42%, transparent 68%);
  opacity:.6;
}

.city-card:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--color-accent-rgb), 0.35);
  box-shadow:0 14px 34px rgba(0,0,0,0.28);
}

.city-card:visited{
  color:inherit;
  text-decoration:none;
}

.city-card:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

.city-card__head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.city-card__title-wrap{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.city-card__pin{
  width:16px;
  height:16px;
  color:var(--color-accent);
  margin-top:2px;
  flex:0 0 auto;
}

.city-card__name{
  margin:0;
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:.01em;
}

.city-card__region{
  display:block;
  margin-top:2px;
  font-size:.76rem;
  color:var(--color-muted);
}

.city-card__count{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  color:var(--color-text);
  background:rgba(var(--color-accent-rgb), 0.12);
  border:1px solid rgba(var(--color-accent-rgb), 0.28);
}

.city-card__short{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--color-text);
  opacity:.92;
  font-size:.87rem;
  line-height:1.45;
}

.city-card__meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:34px;
}

.city-card__avatars{
  display:flex;
  align-items:center;
}

.city-card__avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(7, 10, 16, 0.95);
  margin-left:-9px;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}

.city-card__avatar:first-child{
  margin-left:0;
}

.city-card__meta-info{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.city-card__online{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.74rem;
  color:#22c55e;
  font-weight:700;
}

.city-card__online--muted{
  color:var(--color-muted);
  font-weight:600;
}

.city-card__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#22c55e;
  display:inline-block;
}

.city-card__cta{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.79rem;
  font-weight:800;
  color:var(--color-accent);
  white-space:nowrap;
  transition:gap .15s ease;
}

.city-card:hover .city-card__cta{
  gap:8px;
}

.city-card__seo{
  position:relative;
  z-index:1;
  margin:0;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:.78rem;
  color:var(--color-muted);
  line-height:1.5;
}

.city-card__seo strong{
  color:var(--color-text);
  font-weight:800;
}

/* Subtle per-city accents */
.city-card--paris{ border-top:1px solid rgba(126, 150, 255, 0.45); }
.city-card--lyon{ border-top:1px solid rgba(212, 118, 255, 0.45); }
.city-card--marseille{ border-top:1px solid rgba(86, 206, 255, 0.45); }
.city-card--toulouse{ border-top:1px solid rgba(255, 146, 182, 0.45); }

/* Clear mode */
[data-theme="clear-mode"] .city-card{
  background:
    radial-gradient(120% 100% at 5% -20%, rgba(var(--color-accent-rgb), 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.54));
  border-color:rgba(var(--color-accent-rgb), 0.18);
  box-shadow:0 8px 24px rgba(18,16,12,0.08);
}

[data-theme="clear-mode"] .city-card:hover{
  border-color:rgba(var(--color-accent-rgb), 0.30);
  box-shadow:0 10px 26px rgba(18,16,12,0.12);
}

[data-theme="clear-mode"] .city-card__avatar{
  border-color:#fff;
}

@media (max-width: 820px){
  .city-card{
    flex-basis:320px;
    max-width:320px;
  }
}

@media (max-width: 520px){
  .city-grid{
    padding-bottom:12px;
  }
  .city-card{
    padding:14px;
    border-radius:16px;
    flex-basis:86%;
    max-width:86%;
  }
  .city-card__meta{
    flex-wrap:wrap;
  }
  .city-card__cta{
    margin-left:0;
  }
}

.tip-card{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
}

.tip-card__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--color-accent-rgb), 0.10);
  border:1px solid rgba(var(--color-accent-rgb), 0.18);
  flex:0 0 auto;
}

.tip-card__icon svg{
  width:18px;
  height:18px;
  color:var(--color-accent);
}

.tip-card__title{
  font-weight:900;
  margin-bottom:6px;
}

.tip-card__text{
  color:var(--color-muted);
}

.tip-card__text a{
  color:var(--color-accent-2);
  font-weight:800;
  text-decoration:underline;
}

[data-theme="clear-mode"] .tip-card{
  border-color: rgba(var(--color-accent-rgb), 0.16);
  background:linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.46));
}

.steps-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.step-card{
  padding:16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.step-card__num{
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(var(--color-accent-rgb), 0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  flex:0 0 auto;
}
.step-card__content h3{margin:0 0 6px 0;font-size:1.15rem;}
.step-card__content p{margin:0;color:var(--color-muted);}
.step-card__content p + p{margin-top:10px;}

.faq{
  margin-top:18px;
}

#faq-home{
  position:relative;
  overflow:hidden;
}

#faq-home::before{
  content:"";
  position:absolute;
  inset:-120px -80px -140px -80px;
  pointer-events:none;
  background:
    radial-gradient(600px 260px at 12% 10%, rgba(var(--color-accent-rgb), 0.14), transparent 60%),
    radial-gradient(520px 260px at 88% 30%, rgba(var(--color-accent-2-rgb), 0.10), transparent 62%),
    radial-gradient(520px 260px at 34% 92%, rgba(80,210,255,0.08), transparent 60%);
  opacity:0.95;
  filter:blur(0px);
}

#faq-home .container{
  position:relative;
  z-index:1;
}
.faq__tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  margin-bottom:12px;
}
.faq__tab{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:var(--color-text);
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.faq__tab:hover{filter:brightness(1.08);}
.faq__tab.is-active,
.faq__tab[aria-selected="true"]{
  background:rgba(var(--color-accent-rgb), 0.16);
  border-color:rgba(var(--color-accent-rgb), 0.34);
}

.faq__panel{
  margin-top:6px;
}

.faq__qa{
  border:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));
  border-radius:16px;
  overflow:hidden;
  margin-bottom:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.20);
}

.faq__qa:nth-child(even){
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03));
}
.faq__q{
  width:100%;
  text-align:left;
  padding:14px 14px;
  border:0;
  background:transparent;
  color:var(--color-text);
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.faq__q::after{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.16);
  flex:0 0 auto;
}
.faq__q[aria-expanded="true"]::after{content:"–";}
.faq__a{
  padding:0 14px 14px 14px;
  color:var(--color-muted);
}
.faq__a p{margin:0;}

.feature-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.feature{
  padding:16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.feature__icon{
  width:64px;
  height:64px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(var(--color-accent-rgb), 0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.feature__content h3{margin:0 0 6px 0;font-size:1.15rem;}
.feature__content p{margin:0;color:var(--color-muted);}

/* Statistiques plateforme */
.stats-platform{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}
.stat-platform{
  padding:20px;
  background:linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.12), rgba(var(--color-accent-rgb), 0.06));
  border-radius:16px;
  border:1px solid rgba(var(--color-accent-rgb), 0.20);
  text-align:center;
}
.stat-platform__value{
  font-size:2.4rem;
  font-weight:900;
  color:var(--color-text);
  line-height:1;
  margin-bottom:8px;
}
.stat-platform__label{
  font-size:0.95rem;
  color:var(--color-muted);
  font-weight:600;
}

/* Témoignages */
.testimonials-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.testimonial-card{
  padding:18px;
  position:relative;
}
.testimonial-rating{
  font-size:1.1rem;
  margin-bottom:10px;
}
.testimonial-text{
  font-size:1.05rem;
  line-height:1.6;
  color:var(--color-text);
  margin:0 0 14px 0;
  font-style:italic;
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:0.95rem;
}
.testimonial-author strong{
  color:var(--color-text);
}
.testimonial-verified{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(76,175,80,0.20);
  color:#4CAF50;
  font-weight:900;
  font-size:0.85rem;
}
.testimonial-role{
  color:var(--color-muted);
  font-size:0.9rem;
}

@media (min-width: 980px){
  .hero__inner{grid-template-columns:1.15fr 0.85fr;gap:24px;}
  .gallery__grid{grid-template-columns:repeat(6, 1fr);}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .steps-grid{grid-template-columns:1fr 1fr;}
  .glossary{grid-template-columns:1fr 1fr;}
  .trust-grid{grid-template-columns:1fr 1fr;}
  .testimonials-grid{grid-template-columns:repeat(2, 1fr);}
  .guide-spotlight__grid{grid-template-columns:1.1fr 0.9fr;align-items:stretch;}
  .location-hubs{grid-template-columns:repeat(2, 1fr);}
}

@media (min-width: 1280px){
  .testimonials-grid{grid-template-columns:repeat(3, 1fr);}
}