/* Jardeo — feuille de style unique, mobile-first.
   Sobre et rapide : pas de framework, pas de webfont (le rendu ne dépend d'aucun
   téléchargement tiers, donc pas de FOUT ni de requête bloquante). */

:root {
  --vert-clair: #8cc63f;
  --vert: #4e9a2f;
  --vert-fonce: #2f6b2a;
  --terre: #c1440e;          /* accent : graine, alertes gel */
  --encre: #16202a;
  --gris: #5b6b78;
  --trait: #e2e8e0;
  --fond: #ffffff;
  --fond-doux: #f6f9f4;
  --rayon: 10px;
  --largeur: 62rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 1.1rem; }

a { color: var(--vert-fonce); }
a:hover { color: var(--terre); }

/* Accessibilité : la cible du focus doit toujours être visible au clavier. */
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; border-radius: 4px; }

/* Lien d'évitement : premier tabulable, révélé seulement au focus. */
.skip {
  position: absolute; left: -9999px;
  background: var(--encre); color: #fff; padding: .7rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── En-tête ── */
.site-header { border-bottom: 1px solid var(--trait); background: var(--fond); }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; height: 64px; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--encre); }
.brand img { width: 30px; height: 30px; display: block; }
.brand b { font-size: 1.3rem; letter-spacing: -.02em; font-weight: 800; }
.brand b i { color: var(--vert); font-style: normal; }

/* ── Bandeau de chantier (staging) ── */
.staging {
  background: var(--terre); color: #fff; text-align: center;
  padding: .4rem 1rem; font-size: .85rem;
}

/* ── Hero ── */
.hero { background: var(--fond-doux); border-bottom: 1px solid var(--trait); padding: 3rem 0; }
.hero h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .8rem; letter-spacing: -.02em; }
.hero p { font-size: 1.1rem; color: var(--gris); margin: 0 0 1.6rem; max-width: 34rem; }

/* ── Cartes ── */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 2rem 0; }
.card {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.2rem; background: var(--fond);
}
.card h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.card p { margin: 0; color: var(--gris); font-size: .95rem; }

/* ── Pied de page ── */
.site-footer {
  border-top: 1px solid var(--trait); margin-top: 3rem;
  padding: 2rem 0; font-size: .85rem; color: var(--gris); background: var(--fond-doux);
}
.site-footer p { margin: .3rem 0; }

/* ── Avertissement permanent (obligation éditoriale) ── */
.disclaimer {
  border-left: 3px solid var(--vert-clair); background: var(--fond-doux);
  padding: .8rem 1rem; font-size: .9rem; color: var(--gris); margin: 1.5rem 0;
}

@media (min-width: 40rem) {
  .hero { padding: 4.5rem 0; }
  .hero h1 { font-size: 2.6rem; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Respecte le réglage système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ═══ Composants ajoutés à l'étape 4 (pages) ═══════════════════════════ */

.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }

h2 { font-size:1.35rem; margin:2.2rem 0 .8rem; letter-spacing:-.01em }
h3 { font-size:1.05rem; margin:1.4rem 0 .6rem }
section { margin: 0 0 1.5rem }
.note { font-size:.9rem; color:var(--gris); margin:.3rem 0 1rem }
.vide { color:var(--gris); font-style:italic }
.compte { font-size:.8rem; color:var(--gris); font-weight:400 }
.lien-plus { font-weight:500 }

/* Fil d'Ariane */
.ariane { font-size:.85rem; color:var(--gris); padding:.9rem 0 0 }
.ariane a { color:var(--gris) }

/* Recherche */
.recherche { display:flex; gap:.5rem; flex-wrap:wrap; max-width:34rem; margin:1.2rem 0 .6rem }
.recherche input {
  flex:1 1 15rem; padding:.8rem .9rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--trait); border-radius:var(--rayon); background:#fff;
}
.recherche button {
  padding:.8rem 1.2rem; font-size:1rem; font-family:inherit; font-weight:500; cursor:pointer;
  border:0; border-radius:var(--rayon); background:var(--vert-fonce); color:#fff;
}
.recherche button:hover { background:var(--terre) }
.exemples, .preuve-intro { font-size:.9rem; color:var(--gris) }

/* Accueil */
.hero-accueil h1 em { font-style:normal; color:var(--vert) }
.accroche { font-size:1.15rem }

/* Bloc de preuve */
.preuve { background:var(--encre); color:#fff; padding:2.5rem 0 }
.preuve .preuve-intro { color:#b9c6cf }
.preuve-grille { display:grid; grid-template-columns:1fr; gap:.8rem; margin:1.2rem 0 }
.preuve-carte { border:1px solid #2d3d4a; border-radius:var(--rayon); padding:1rem 1.2rem }
.preuve-ville { display:block; font-size:.85rem; color:#b9c6cf; text-transform:uppercase; letter-spacing:.06em }
.preuve-date { display:block; font-size:1.6rem; font-weight:800; color:var(--vert-clair); letter-spacing:-.02em }
.preuve-detail { display:block; font-size:.85rem; color:#8fa2af }
.preuve-note { margin:0; color:#b9c6cf }
.preuve-note strong { color:#fff }

/* Chiffres clés d'une commune */
.hero-chiffres { display:flex; flex-wrap:wrap; gap:1.6rem; margin:0 }
.hero-chiffres span { display:flex; flex-direction:column }
.hero-chiffres strong { font-size:1.5rem; letter-spacing:-.02em; color:var(--vert-fonce) }
.hero-chiffres em { font-style:normal; font-size:.8rem; color:var(--gris) }

/* Confiance */
.confiance { font-size:.9rem; padding:.8rem 1rem; border-radius:var(--rayon); margin:1.2rem 0 }
.confiance-moyenne { background:#fff8e6; border:1px solid #f0d795; color:#6b5310 }
.confiance-faible  { background:#fdeee7; border:1px solid #f0bfa5; color:#7c3a17 }
.confiance-aucune  { background:var(--fond-doux); border:1px solid var(--trait); color:var(--gris) }

/* Cartes de gel */
.cartes-gel { display:grid; grid-template-columns:1fr; gap:.8rem }
.carte-gel { border:1px solid var(--trait); border-radius:var(--rayon); padding:1rem 1.2rem; background:#fff }
.carte-gel strong { display:block; font-size:1.35rem; letter-spacing:-.02em; color:var(--encre) }
.carte-gel span { font-size:.85rem; color:var(--gris) }
.carte-gel em { font-style:normal; color:#93a2ad }
.carte-gel-fort { border-color:var(--vert-clair); background:var(--fond-doux) }
.carte-gel-fort strong { color:var(--vert-fonce) }

/* Vignettes de plantes */
.vignettes { display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.6rem }
.vignettes-large { grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)) }
.vignette {
  display:flex; flex-direction:column; gap:.15rem; text-decoration:none; color:var(--encre);
  border:1px solid var(--trait); border-radius:var(--rayon); padding:.7rem .8rem; background:#fff;
}
.vignette:hover { border-color:var(--vert); color:var(--vert-fonce) }
.vignette-nom { font-weight:500 }
.vignette-type { font-size:.75rem; color:var(--gris) }
.tag { display:inline-block; font-size:.65rem; padding:.05rem .35rem; border-radius:3px; align-self:flex-start }
.tag-gel { background:#fdeee7; color:var(--terre) }
.tag-ajuste { background:var(--fond-doux); color:var(--vert-fonce); font-size:.7rem; margin-left:.4rem }

/* Pastilles */
.pastille { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.35rem }
.pastille-gel { background:#cfe0f0; border:1px solid #a8c4de }
.action-titre { display:flex; align-items:center }

/* ── La frise : le cœur visuel. Positionnement en % du quantième. ──────── */
.frise { margin:1.2rem 0 }
.frise-mois { position:relative; height:1.1rem; margin-left:8.5rem; font-size:.7rem; color:var(--gris) }
.frise-mois span { position:absolute; transform:translateX(-50%) }
.frise-corps { position:relative; border-top:1px solid var(--trait) }
.frise-gel { position:absolute; top:0; bottom:0; background:#eaf1f8; z-index:0 }
.frise-ligne { position:relative; display:flex; align-items:center; gap:.5rem; padding:.3rem 0; z-index:1 }
.frise-label { flex:0 0 8rem; font-size:.8rem; color:var(--gris); text-align:right }
.frise-piste { position:relative; flex:1; height:1.1rem; background:#f2f5f1; border-radius:3px }
.frise-barre { position:absolute; top:0; bottom:0; border-radius:3px; min-width:2px }
.frise-impossible { font-size:.75rem; color:var(--gris); font-style:italic; padding-left:.4rem; line-height:1.1rem }
.frise-legende { font-size:.8rem; color:var(--gris); margin:.6rem 0 0 8.5rem }

/* Tableau des fenêtres */
.tableau-fenetres { width:100%; border-collapse:collapse; font-size:.92rem; margin:1rem 0 }
.tableau-fenetres th, .tableau-fenetres td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--trait); vertical-align:top }
.tableau-fenetres thead th { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); font-weight:500 }
.tableau-fenetres tbody th { font-weight:400 }
.national { color:var(--gris); font-size:.85rem; white-space:nowrap }
.note-fenetre { display:block; font-size:.8rem; color:var(--gris) }
.ligne-marginale { color:var(--gris) }

/* Fiche plante */
.fiche p { max-width:42rem }
.caracteristiques { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.5rem }
.caracteristiques li { font-size:.9rem; border:1px solid var(--trait); border-radius:var(--rayon); padding:.5rem .7rem }
.caracteristiques strong { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); font-weight:500 }

/* Divers */
.liens-communes { display:flex; flex-wrap:wrap; gap:.4rem }
.liens-communes a { font-size:.9rem; border:1px solid var(--trait); border-radius:100px; padding:.35rem .8rem; text-decoration:none; background:#fff }
.liens-communes a:hover { border-color:var(--vert) }
.bloc-recherche { background:var(--fond-doux); border:1px solid var(--trait); border-radius:12px; padding:1.2rem 1.4rem; margin:2rem 0 }
.bloc-recherche h2 { margin-top:0 }
.bloc-alerte { border-color:var(--vert-clair) }
.explication p { max-width:44rem }
.souligne { border-left:3px solid var(--vert-clair); padding-left:.9rem }

@media (min-width:40rem) {
  .preuve-grille, .cartes-gel { grid-template-columns:repeat(3,1fr) }
  .cartes-gel { grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)) }
}
@media (max-width:40rem) {
  .frise-mois, .frise-legende { margin-left:0 }
  .frise-ligne { flex-direction:column; align-items:stretch; gap:.15rem }
  .frise-label { flex:none; text-align:left }
}

/* ═══ Compte et « Mon potager » ═════════════════════════════════════════ */

.site-header .wrap { gap:.8rem }
.nav-principale { display:none; gap:1rem; margin-left:1rem }
.nav-principale a, .lien-tete { font-size:.9rem; text-decoration:none; color:var(--gris) }
.nav-principale a:hover, .lien-tete:hover { color:var(--vert-fonce) }
.nav-compte { margin-left:auto; display:flex; align-items:center; gap:.8rem }
.btn-tete {
  font-size:.85rem; font-weight:500; text-decoration:none; padding:.45rem .8rem;
  border-radius:100px; background:var(--vert-fonce); color:#fff; white-space:nowrap;
}
.btn-tete:hover { background:var(--terre); color:#fff }

/* Formulaires d'authentification */
.bloc-auth { max-width:26rem; margin:2.5rem auto 3rem }
.bloc-auth h1 { font-size:1.7rem; margin:0 0 .3rem }
.form-auth { display:flex; flex-direction:column; gap:.2rem; margin:1.4rem 0 }
.form-auth label { font-size:.85rem; font-weight:500; margin-top:.7rem }
.form-auth input, .form-auth select {
  padding:.7rem .8rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--trait); border-radius:var(--rayon); background:#fff;
}
.facultatif { font-weight:400; color:var(--gris) }
.aide { font-size:.8rem; color:var(--gris); margin-top:.2rem }
.btn-principal {
  margin-top:1.2rem; padding:.8rem 1rem; font-size:1rem; font-family:inherit; font-weight:500;
  border:0; border-radius:var(--rayon); background:var(--vert-fonce); color:#fff; cursor:pointer;
}
.btn-principal:hover { background:var(--terre) }
.liens-auth { font-size:.9rem; color:var(--gris); text-align:center }
.mentions { font-size:.78rem; color:var(--gris); border-top:1px solid var(--trait); padding-top:.9rem; margin-top:1.5rem }
.msg { padding:.8rem 1rem; border-radius:var(--rayon); font-size:.92rem; margin:1rem 0 }
.msg-erreur { background:#fdeee7; border:1px solid #f0bfa5; color:#7c3a17 }
.msg-succes { background:var(--fond-doux); border:1px solid var(--vert-clair); color:var(--vert-fonce) }

/* Tableau de bord */
.app { padding-top:1.5rem }
.app-tete { display:flex; flex-wrap:wrap; align-items:flex-start; gap:1rem; justify-content:space-between }
.app-tete h1 { font-size:1.8rem; margin:0 }
.app-lieu { color:var(--gris); font-size:.9rem; margin:.2rem 0 0 }
.app-jardins { display:flex; gap:.4rem; flex-wrap:wrap }
.app-jardins a { font-size:.85rem; padding:.35rem .7rem; border-radius:100px; border:1px solid var(--trait); text-decoration:none; background:#fff }
.app-jardins a.actif { background:var(--vert-fonce); color:#fff; border-color:var(--vert-fonce) }
.app-colonnes { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:1.5rem }

/* Tâches : le bloc qui doit sauter aux yeux */
.bloc-taches { background:var(--fond-doux); border:1px solid var(--vert-clair); border-radius:12px; padding:1.2rem 1.4rem; margin-top:1.5rem }
.bloc-taches h2 { margin-top:0 }
.taches { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem }
.tache { display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--trait); border-radius:var(--rayon); padding:.7rem .9rem }
.tache-bientot { border-color:var(--terre); border-left-width:3px }
.tache-pastille { flex:0 0 .6rem; height:.6rem; border-radius:50% }
.tache-corps { flex:1; display:flex; flex-direction:column }
.tache-quand { font-size:.82rem; color:var(--gris) }
.tache-bientot .tache-quand { color:var(--terre); font-weight:500 }
.tache-action button, .btn-fin {
  font-size:.82rem; font-family:inherit; padding:.4rem .7rem; cursor:pointer;
  border:1px solid var(--vert-fonce); border-radius:100px; background:#fff; color:var(--vert-fonce); white-space:nowrap;
}
.tache-action button:hover, .btn-fin:hover { background:var(--vert-fonce); color:#fff }
.btn-discret { font-size:.8rem; font-family:inherit; padding:.35rem .6rem; cursor:pointer; border:1px solid var(--trait); border-radius:100px; background:#fff; color:var(--gris) }
.btn-discret:hover { border-color:var(--terre); color:var(--terre) }

/* Cultures */
.cultures { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.7rem }
.culture { border:1px solid var(--trait); border-radius:var(--rayon); padding:.8rem .9rem; background:#fff }
.culture-recolte, .culture-abandonne { opacity:.6 }
.culture-tete { display:flex; justify-content:space-between; align-items:center; gap:.5rem }
.culture-tete a { font-weight:500; text-decoration:none; color:var(--encre) }
.culture-tete a:hover { color:var(--vert-fonce) }
.badge { font-size:.68rem; padding:.12rem .4rem; border-radius:3px; background:var(--fond-doux); color:var(--gris); white-space:nowrap }
.badge-seme { background:#eaf3e3; color:var(--vert-fonce) }
.badge-repique { background:var(--vert-fonce); color:#fff }
.badge-recolte { background:#fdeee7; color:var(--terre) }
.culture-meta { display:flex; flex-wrap:wrap; gap:.4rem; font-size:.78rem; color:var(--gris); margin:.4rem 0 }
.culture-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem }

/* Ajout */
.bloc-ajout { border-top:1px solid var(--trait); padding-top:1rem }
.suggestions { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem }
.puce-ajout { font-size:.85rem; font-family:inherit; padding:.4rem .8rem; cursor:pointer; border:1px dashed var(--vert); border-radius:100px; background:#fff; color:var(--vert-fonce) }
.puce-ajout:hover { background:var(--vert-fonce); color:#fff; border-style:solid }
.ajout-libre { display:flex; gap:.5rem; flex-wrap:wrap }
.ajout-libre select { flex:1 1 12rem; padding:.6rem; font-family:inherit; font-size:.95rem; border:1px solid var(--trait); border-radius:var(--rayon) }
.ajout-libre button { padding:.6rem 1rem; font-family:inherit; border:0; border-radius:var(--rayon); background:var(--vert-fonce); color:#fff; cursor:pointer }

/* Colonne latérale */
.app-aside { display:flex; flex-direction:column; gap:1rem }
.carte-aside { border:1px solid var(--trait); border-radius:12px; padding:1rem 1.2rem; background:#fff; margin:0 }
.carte-aside h2 { font-size:1rem; margin:0 0 .5rem }
.carte-alerte { border-color:var(--vert-clair) }
.etat-actif { color:var(--vert-fonce); font-weight:500; margin:0 0 .3rem }
.ligne-form { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin:.6rem 0 .4rem }
.ligne-form label { font-size:.82rem; color:var(--gris) }
.ligne-form select { flex:1 1 8rem; padding:.4rem; font-family:inherit; font-size:.82rem; border:1px solid var(--trait); border-radius:6px }
.carte-lune .lune-phase { font-size:1.05rem; font-weight:500; margin:0 }
.carte-lune .lune-type { margin:.4rem 0 }
.stats { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; color:var(--gris) }
.stats strong { color:var(--encre); font-size:1.1rem; margin-right:.3rem }

/* Calendrier lunaire */
.nav-mois { display:flex; gap:1.5rem; font-size:.9rem; margin-top:.8rem }
.legende-lune { display:flex; flex-wrap:wrap; gap:.9rem; font-size:.8rem; color:var(--gris); margin:1rem 0 }
.legende-lune i { display:inline-block; width:.6rem; height:.6rem; border-radius:2px; margin-right:.25rem }
.grille-lune { display:grid; grid-template-columns:repeat(auto-fill,minmax(5rem,1fr)); gap:.4rem }
.jour-lune { border:1px solid var(--trait); border-top:3px solid var(--c); border-radius:6px; padding:.45rem .5rem; display:flex; flex-direction:column; background:#fff }
.jour-auj { box-shadow:0 0 0 2px var(--vert) }
.jl-num { font-size:1.15rem; font-weight:500; line-height:1.1 }
.jl-jour { font-size:.7rem; color:var(--gris); text-transform:uppercase }
.jl-type { font-size:.75rem; color:var(--c); font-weight:500; margin-top:.2rem }
.jl-lune { font-size:.7rem; color:var(--gris) }

@media (min-width:48rem) {
  .nav-principale { display:flex }
  .app-colonnes { grid-template-columns:1fr 19rem }
}
.culture-diag { font-size:.8rem; color:var(--gris); font-style:italic; margin:.35rem 0 0; padding-left:.5rem; border-left:2px solid var(--trait) }