/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600&display=swap');

/* ---------- Base ---------- */
:root {
  /* Fond marin — dégradé profond, inspiré du lagon/récif mauricien */
  --color-bg-1: #052229;
  --color-bg-2: #0A3540;
  --color-bg-3: #0C3E45;
  --color-bg: #0A3540; /* usage solide (blocs, footer sticky…) */
  --color-bg-gradient: linear-gradient(165deg, var(--color-bg-1) 0%, var(--color-bg-2) 55%, var(--color-bg-3) 100%);

  --color-text: #F5FAF9;
  --color-muted: #A9CBCB;
  --color-muted-2: #9FC1C0;

  --color-border: rgba(140, 210, 216, 0.16);
  --color-border-soon: #8FB6B7;

  --color-accent: #1FB6C9;      /* turquoise lagon */
  --color-accent-2: #4FD8D9;
  --color-accent-contrast: #052229;

  --color-coral: #FF8A6F;       /* corail saumon */
  --color-coral-2: #FFB27A;     /* corail orangé */

  --color-surface: rgba(255, 255, 255, 0.045);
  --color-surface-strong: rgba(255, 255, 255, 0.075);

  --color-warn-bg: rgba(255, 178, 122, 0.12);
  --color-warn-border: var(--color-coral-2);

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --max-width: 780px;
}

* { box-sizing: border-box; }

/* Fond porté par html (pas body) : le corail (.reef-motif, z-index:-1 plus
   bas) doit rester au-dessus du fond de page pour être visible. Tant que html
   n'a PAS son propre fond, le navigateur "promeut" celui de body au rang de
   fond de page (sous les éléments z-index négatif) — mais dès que html a AUSSI
   un fond, cette promotion s'arrête et le fond de body repasse au-dessus du
   corail, qui disparaît en dessous (bug constaté le 2026-08-11 : "le corail
   est derrière la page"). Une seule déclaration, sur html, évite l'ambiguïté. */
html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--color-bg-1);
  background-image: var(--color-bg-gradient);
  background-attachment: fixed;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.6;
}

/* background-attachment:fixed est mal géré par beaucoup de navigateurs
   mobiles (zone non peinte en bas de page, notamment visible derrière le
   footer) — repli sur un dégradé qui défile normalement avec la page sur un
   vrai écran tactile.
   hover:none seul (pas de max-width) : ce bug touche les navigateurs
   mobiles eux-mêmes, pas une question de largeur — un desktop zoomé (Cmd+)
   n'a pas ce bug et ne doit pas basculer pour autant. */
@media (hover: none) {
  html { background-attachment: scroll; }
}

main {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

h1, h2, h3 { line-height: 1.25; font-family: var(--font-serif); font-weight: 600; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; margin-top: 2.25rem; }
h3 { font-size: 1.1rem; }

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-2); }

p.lede { color: var(--color-muted); }

/* ---------- Signature motif : coraux génératifs (plein écran, pas confinés) ----------
   Chaque canvas couvre tout l'écran (taille fixée en JS sur window.innerWidth/Height,
   voir assets/js/reef-coral.js) — seul le POINT DE DÉPART du corail reste ancré à un
   coin bas (gauche/droite), le canvas lui-même n'a plus de boîte qui limite sa portée. */
.reef-motif {
  position: fixed;
  inset: 0;
  opacity: 0.85;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .reef-motif { transition: none; }
}

/* Sur mobile, le texte occupe presque toute la largeur (plus de marges
   latérales pour accueillir le corail décoratif sans chevaucher le contenu) :
   masqué plutôt que redimensionné, en attendant un travail graphique dédié
   (logo/icônes en cours avec une directrice artistique).
   Uniquement (hover: none) — PAS de max-width ici : une largeur en CSS px
   dépend du niveau de zoom (Cmd+ sur desktop réduit la largeur "effective"
   sans être un vrai petit écran), alors que hover:none détecte la présence
   d'un écran tactile indépendamment du zoom. Un vrai téléphone matche
   toujours hover:none, donc rien n'est perdu pour le cas qu'on voulait
   couvrir au départ. */
@media (hover: none) {
  .reef-motif { display: none; }
}

/* ---------- Hero (page d'accueil) ---------- */
.hero-title, .hero > p.lede { position: relative; z-index: 1; }
.hero-title {
  font-style: italic;
  font-weight: 500;
}

/* ---------- Site header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header nav {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 1rem 1.25rem;
  align-items: baseline;
}

.site-header .brand {
  font-family: var(--font-serif);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  margin-right: auto;
}

.site-header a { text-decoration: none; color: var(--color-muted); font-size: 0.95rem; }
.site-header a:hover { color: var(--color-accent-2); }

.breadcrumb {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--color-muted); }

/* ---------- Domain cards (home page) ---------- */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.domain-card {
  border: 1px solid var(--color-border);
  border-radius: 24px 8px 24px 8px;
  padding: 1.2rem 1.25rem;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  backdrop-filter: blur(3px);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.domain-card:hover {
  border-color: var(--color-accent-2);
  background: var(--color-surface-strong);
  transform: translateY(-2px);
}
.domain-card h3 { margin: 0 0 0.35rem; color: var(--color-text); }
.domain-card p { margin: 0; color: var(--color-muted); font-size: 0.92rem; }

.domain-card .card-icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 0.7rem;
  color: var(--color-accent-2);
}
.domain-card .card-icon svg { width: 100%; height: 100%; display: block; }

/* Rubriques "à venir" : estompées */
.domain-card.is-soon {
  opacity: 0.5;
  border-color: var(--color-border-soon);
}
.domain-card.is-soon:hover {
  opacity: 0.75;
  transform: none;
}

/* ---------- Reference / citation boxes ---------- */
.source-box {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}
.source-box h3 { margin-top: 0; }
.source-box ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.source-box li { margin-bottom: 0.4rem; }

.privacy-note {
  border: 1px solid var(--color-warn-border);
  background: var(--color-warn-bg);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  margin: 1.25rem 0;
}

/* ---------- Code / install blocks ---------- */
pre {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
p code, li code {
  background: var(--color-surface-strong);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ---------- Project preview image ---------- */
.project-shot {
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 1.25rem 0;
}

/* ---------- Photo pair (ex. Écologie) ---------- */
.photo-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.25rem 0;
}
.photo-duo figure {
  flex: 1 1 260px;
  margin: 0;
}
.photo-duo .project-shot {
  width: 100%;
  height: 260px;
  object-fit: cover;
  margin: 0;
}
.photo-duo figcaption {
  margin-top: 0.4rem;
  font-size: 0.9em;
  color: var(--color-muted, #666);
  text-align: center;
}

/* ---------- Questionnaire ---------- */
.qst-intro { margin-bottom: 1.5rem; }

.qst-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--color-surface);
}
.qst-item.incomplete { border-color: var(--color-coral); }

.qst-item-label {
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.qst-item-num { color: var(--color-muted); font-weight: 400; margin-right: 0.35rem; }

.step1-choices {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}

.step2-choices {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-border);
}
.step2-choices.visible { display: flex; }

.qst-item label.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  cursor: pointer;
}

.qst-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-bg-2);
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  background: transparent;
}

button.primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}
button.secondary {
  background: transparent;
  color: var(--color-accent-2);
}

.progress {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

/* ---------- Results ---------- */
#results {
  display: none;
  margin-top: 2rem;
  border-top: 2px solid var(--color-accent);
  padding-top: 1.25rem;
}
#results.visible { display: block; }

.score-total {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-serif);
}
.score-interpretation {
  font-weight: 600;
  color: var(--color-accent-2);
}

.subscale-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}
.subscale-table th, .subscale-table td {
  text-align: left;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

footer.site-footer {
  max-width: var(--max-width);
  margin: 2rem auto 0;
  padding: 1.5rem 1.25rem 3rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--color-border);
}
footer.site-footer a { color: var(--color-muted); }

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-muted);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Print ---------- */
@media print {
  .site-header, .qst-actions, .no-print, .reef-motif { display: none !important; }
  main { max-width: 100%; padding: 0; }
  html { background: #fff; }
  .qst-item { break-inside: avoid; border-color: #999; background: none; }
  #results { display: block !important; border-top-color: #000; }
  body { color: #000; }
  a { color: #000; text-decoration: none; }
}