/* Site vitrine coeo.app — palette et typographie alignées sur l'app Geochat
   (voir tailwind.config.ts du projet principal : mêmes valeurs de couleur). */

:root {
  --navy: #050230;
  --navy-card: #16124A;
  --blue: #49C3FF;
  --yellow: #FFDB1C;
  --purple: #6E58FF;
  --orange: #FF9458;
  --green: #3CDE15;
  --grey-dark: #555555;
  --grey-mid: #DDDDDD;
  --grey-light: #F4F4F4;
  --on-dark: #CFCDE6;
  --radius-lg: 28px;
  --radius-md: 20px;
  --wrap-max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grey-light);
  color: var(--navy);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

h1, h2, h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 900px) { .wrap { padding: 0 40px; } }
@media (min-width: 1280px) { .wrap { padding: 0 60px; } }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid var(--grey-mid);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy);
  min-width: 0;
}
.brand-mark { border-radius: 9px; box-shadow: 0 0 0 1px var(--grey-mid); flex-shrink: 0; }
.brand-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.brand-pill {
  font-size: 12px;
  color: var(--grey-dark);
  padding: 3px 9px;
  border: 1px solid var(--grey-mid);
  border-radius: 999px;
  background: #FFFFFF;
  white-space: nowrap;
}

.nav-desktop { display: none; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-desktop a { text-decoration: none; }
.nav-desktop a:hover { color: var(--purple); }
@media (min-width: 900px) { .nav-desktop { display: flex; } }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang-switch {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--grey-mid);
  background: #FFFFFF;
  color: var(--grey-dark);
  cursor: pointer;
}
.lang-switch .lang-active { color: var(--navy); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--grey-mid);
  background: #FFFFFF;
  cursor: pointer;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-mobile {
  display: flex;
  flex-direction: column;
  padding: 8px 20px 24px;
  border-top: 1px solid var(--grey-mid);
}
/* L'attribut hidden (posé par défaut dans le HTML, retiré par app.js à
   l'ouverture) doit rester prioritaire sur le display:flex ci-dessus, sinon
   le panneau reste visible en permanence sous 900px. */
.nav-mobile[hidden] { display: none; }
.nav-mobile a {
  padding: 14px 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  border-bottom: 1px solid var(--grey-mid);
}
.nav-mobile a:last-child { border-bottom: none; }
@media (min-width: 900px) { .nav-mobile { display: none !important; } }

/* ── Sections communes ──────────────────────────────────────────────── */

.section { padding: 72px 0; }
.section-dark { background: var(--navy); color: #FFFFFF; }

.eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.eyebrow-blue { color: var(--blue); }
.eyebrow-purple { color: var(--purple); }
.eyebrow-yellow-on-purple { color: var(--yellow); }

.section h2 {
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* #concept est la seule section où le titre précède directement une grille
   sans passer par .section-head/.section-head-center — sans cette règle, le
   h2 retombe sur sa marge par défaut de navigateur au lieu des 40px utilisés
   partout ailleurs entre un titre de section et son contenu. */
#concept h2 { margin-bottom: 40px; }

.section-head { align-items: end; gap: 32px; margin-bottom: 40px; }
.section-head-center { text-align: center; margin: 0 auto 40px; max-width: 720px; }
.section-lead { font-size: 18px; line-height: 1.6; color: var(--grey-dark); margin-top: 16px; }
@media (min-width: 900px) { .section-lead { margin-top: 0; } }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  gap: 48px;
  padding: 56px 20px 72px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 80px 40px 96px; }
}

.hero-copy { display: flex; flex-direction: column; gap: 28px; }

.badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--grey-mid);
  font-size: 14px;
  font-weight: 500;
}
.badge-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(60, 222, 21, 0.2);
  flex-shrink: 0;
}

.hero h1 {
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.hero-copy mark {
  background: var(--yellow);
  color: inherit;
  padding: 0 10px;
  border-radius: 16px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero-subtitle { font-size: 19px; line-height: 1.55; color: var(--grey-dark); max-width: 540px; }

.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 20px 0 16px;
  border-radius: 14px;
  background: var(--navy);
  color: #FFFFFF;
  text-decoration: none;
}
.store-button-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-button-text span { font-size: 11px; opacity: 0.85; }
.store-button-text strong { font-size: 17px; font-weight: 600; }

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 620 / 680;
  margin: 0 auto;
}
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-tag {
  position: absolute;
  padding: 7px 11px;
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(5, 2, 48, 0.12);
}
/* Largeur bornée à la place réellement disponible de chaque côté du téléphone
   (voir .phone plus bas) : au-delà, le texte passe sur 2 lignes plutôt que de
   déborder derrière le téléphone. */
.hero-tag-1 { left: 0; top: 15%; max-width: 21%; white-space: normal; }
.hero-tag-2 { right: 0; top: 5%; max-width: 22%; white-space: normal; text-align: right; }
.hero-tag-3 { right: 2%; top: 89%; max-width: 24%; white-space: normal; text-align: right; }

.phone {
  position: absolute;
  left: 24%;
  top: 6%;
  width: 52%;
  height: 88%;
  padding: 10px;
  border-radius: 15%;
  background: var(--navy);
  box-shadow: 0 30px 60px rgba(5, 2, 48, 0.35);
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 12%;
  background: #FFFFFF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-header {
  padding: 14% 12px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--grey-mid);
  flex-shrink: 0;
}
.phone-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--yellow);
  display: flex; align-items: center; justify-content: center;
}
.phone-place { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; }
.phone-meta { font-size: 10px; color: var(--grey-dark); }
.phone-body {
  flex-grow: 1;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--grey-light);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
}
.bubble { display: flex; flex-direction: column; gap: 3px; max-width: 82%; }
.bubble-left { align-self: flex-start; }
.bubble-author { font-size: 9px; color: var(--grey-dark); font-weight: 600; }
.bubble-left .bubble-text, .bubble-left { }
.bubble-left .bubble-author + .bubble-text {
  padding: 7px 10px; border-radius: 14px 14px 14px 5px; background: #FFFFFF;
}
.bubble-right {
  align-self: flex-end;
  padding: 7px 10px;
  border-radius: 14px 14px 5px 14px;
  background: var(--navy);
  color: #FFFFFF;
}
.magic-match-pill {
  margin-top: 2px;
  padding: 8px 9px;
  border-radius: 12px;
  background: #E6E2FF;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--navy);
}
.magic-match-pill svg { flex-shrink: 0; width: 14px; height: 14px; }
.phone-input {
  flex-shrink: 0;
  padding: 8px 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--grey-dark);
}
.phone-input span:first-child {
  flex-grow: 1;
  height: 30px;
  border-radius: 999px;
  background: var(--grey-light);
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.phone-send {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
}

/* ── Concept ────────────────────────────────────────────────────────── */

.card-on-dark {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--navy-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step-number { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 48px; line-height: 1; }
.card-on-dark h3 { font-size: 24px; font-weight: 700; }
.card-on-dark p { font-size: 17px; line-height: 1.55; color: var(--on-dark); margin: 0; }

/* ── Groupes ────────────────────────────────────────────────────────── */

.place-card {
  padding: 24px;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid var(--grey-mid);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
}
.place-card-dark { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.place-card-dark p { color: var(--on-dark); }
.place-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.place-card h3 { font-size: 19px; font-weight: 700; }
/* :not() exclut la variante sombre plutôt que de compter sur l'ordre des
   règles : même spécificité que .place-card-dark p ci-dessus, un texte
   gris sur fond marine (2,7:1) était sinon appliqué par erreur (carte
   "Ton endroit à toi"), illisible. */
.place-card:not(.place-card-dark) p { font-size: 15px; line-height: 1.5; color: var(--grey-dark); margin: 0; }
.place-card-dark p { font-size: 15px; line-height: 1.5; margin: 0; }

/* ── Le mur ─────────────────────────────────────────────────────────── */

.wall-panel {
  border-radius: 32px;
  background: var(--purple);
  color: #FFFFFF;
  padding: 40px 24px;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) { .wall-panel { padding: 72px 64px; } }
.wall-panel h2 { margin: 10px 0 16px; }
.wall-panel > div:first-child p { font-size: 18px; line-height: 1.6; }

.wall-notes { display: flex; flex-direction: column; gap: 16px; }
.note {
  padding: 20px;
  border-radius: 18px;
  color: var(--navy);
  box-shadow: 0 12px 26px rgba(5, 2, 48, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
}
.note-yellow { background: var(--yellow); }
.note-white { background: #FFFFFF; }
.note-orange { background: var(--orange); }
.note-meta { font-size: 12px; font-weight: 600; opacity: 0.75; }

@media (min-width: 900px) {
  .wall-notes { position: relative; aspect-ratio: 510 / 460; }
  .note { position: absolute; width: 56%; }
  .note-yellow { left: 0; top: 2%; transform: rotate(-4deg); }
  .note-white { left: 47%; top: 16%; transform: rotate(3deg); }
  .note-orange { left: 16%; top: 56%; transform: rotate(-1deg); }
}

/* ── À toi de jouer ─────────────────────────────────────────────────── */

.feature-card {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  border: 1px solid var(--grey-mid);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-card-dark { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.feature-card-dark p { color: var(--on-dark); }
.feature-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
}
.feature-card h3 { font-size: 22px; font-weight: 700; }
.feature-card:not(.feature-card-dark) p { font-size: 16px; line-height: 1.55; color: var(--grey-dark); margin: 0; }
.feature-card-dark p { font-size: 16px; line-height: 1.55; margin: 0; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer { background: var(--navy); color: #FFFFFF; padding: 64px 0 32px; }

.footer-cta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 48px;
}
@media (min-width: 900px) {
  .footer-cta { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.footer-cta h2 {
  font-size: clamp(2.2rem, 1.2rem + 5vw, 5.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 780px;
}
.footer-cta mark { background: none; color: var(--yellow); }

/* Les deux boutons de téléchargement du hero, redessinés pour le fond marine
   du pied de page (l'ancien bouton unique "Télécharger l'app" pointait
   toujours vers l'App Store, gênant pour qui n'a pas d'iPhone). */
.store-buttons-footer { flex-shrink: 0; }
.store-button-inverse { background: #FFFFFF; color: var(--navy); }
.store-button-inverse:hover { filter: brightness(0.97); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid #2A2660;
  font-size: 14px;
  color: var(--on-dark);
}
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-legal a { color: var(--on-dark); text-decoration: none; }
.footer-legal a:hover { color: #FFFFFF; }

/* ── Pro ────────────────────────────────────────────────────────────── */

.pro-lead { color: var(--on-dark); }

/* Classe dédiée plutôt que .grid-4 (toujours 2 colonnes, y compris mobile —
   correct pour les cartes courtes de la section Groupes, mais le texte plus
   long de ces 4 cartes débordait sur petit écran). */
.pro-features { grid-template-columns: 1fr; }
@media (min-width: 640px) { .pro-features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pro-features { grid-template-columns: repeat(4, 1fr); } }

.pro-usecases { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 900px) { .pro-usecases { grid-template-columns: 1fr 1fr; } }
.pro-usecase {
  padding: 24px;
  border-radius: 18px;
  background: var(--navy-card);
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-dark);
}
.pro-usecase strong { color: #FFFFFF; }

.pro-form-card {
  margin: 48px auto 0;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  color: var(--navy);
  max-width: 560px;
}
.pro-form-card h3 { font-size: 24px; font-weight: 700; }
.pro-form-card > p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--grey-dark); }

.pro-form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 14px; font-weight: 600; }
.form-input {
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--grey-mid);
  background: #FFFFFF;
  color: var(--navy);
}
.form-textarea { resize: vertical; min-height: 110px; }

/* Masqué visuellement + hors du flux clavier/lecteur d'écran, jamais
   display:none (certains robots l'ignorent) — voir submitProContact. */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit {
  align-self: flex-start;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  background: var(--navy);
  color: #FFFFFF;
  cursor: pointer;
}
.form-submit:hover { filter: brightness(1.3); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.form-status { margin: 0; font-size: 14px; min-height: 20px; }
.form-status.is-success { color: #1E9E4A; font-weight: 600; }
.form-status.is-error { color: #D43D3D; font-weight: 600; }