/* ============================================================
   Accueil www, FR et EN (audit du 28/09, etape 15 : F-163, F-164)
   index.html et en/index.html seulement. Charge APRES style.css.
   Jetons de style.css uniquement (couleurs, tailles, rayons) : le Theme
   Editor et le mode sombre s'appliquent sans copie.
   Regle P001 : peu d'elements, une seule action principale (« Demander un
   devis » / « Request a quote », a l'encre), une seule couleur d'accent
   (turquoise : liens, selection, focus).
   Etape 14 conservee : heros en classes (memes classes FR et EN), carte
   fixe de Bernis (build/build-hero-map.py), rien ne s'efface au-dessus de
   la ligne de flottaison (aucun .fade-in dans le heros).
   Texte en --text et non --dark : /api/theme ecrit --dark sur :root apres
   style.css, donc en sombre --dark peut rester #383838 (sombre sur sombre).
   ============================================================ */

/* ----- Heros : texte a gauche, carte a droite, ligne de preuve dessous -----
   Carte a 360 px sur ordinateur : la ligne de preuve reste au-dessus de la
   ligne de flottaison a 1440 x 900 (la carte A3 est en portrait). */
.hero { position: relative; padding: 120px 0 64px; }
.hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 64px; align-items: center;
}
.hero-kicker {
    font-size: var(--size-small); font-weight: var(--fw-semibold); line-height: 1.5;
    color: var(--turquoise-text); margin-bottom: 16px;
}
.hero-title {
    font-size: var(--size-hero-title); font-weight: var(--fw-bold);
    line-height: 1.12; letter-spacing: -0.02em; color: var(--text);
    max-width: 640px; margin-bottom: 20px; text-wrap: balance;
}
.hero-lede {
    font-size: var(--size-hero-subtitle); line-height: 1.6;
    color: var(--text); max-width: 560px; margin-bottom: 28px;
}
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* Lien secondaire : texte souligne, jamais un second bouton (P001).
   inline-block + padding (cible de 44 px) et non flex : si le texte passe a
   la ligne, la fleche le suit au lieu de partir au bord droit. */
.hero-link {
    display: inline-block; padding: 10px 0; line-height: 1.5;
    color: var(--turquoise-text); font-weight: var(--fw-semibold); font-size: var(--size-body);
    text-decoration: underline; text-underline-offset: 3px;
}
.hero-link:hover { color: var(--link-hover); }
.hero-map { margin: 0; }
.hero-map-img {
    width: 100%; height: auto; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero-map figcaption { margin-top: 10px; font-size: var(--size-small); line-height: 1.5; color: var(--text-secondary); }
.hero-map figcaption a { color: var(--turquoise-text); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }

/* Ligne de preuve : quatre faits verifiables, chacun lie a sa source.
   Pas de carte pleine ni d'etat de survol de carte (etape 14, E14-V2) :
   le seul bloc plein de la page reste le bouton d'action. */
.proof-line {
    list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
}
.proof-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proof-label { font-size: var(--size-tag); line-height: 1.4; color: var(--text-secondary); }
.proof-value {
    align-self: flex-start;
    font-size: var(--size-small); font-weight: var(--fw-semibold); line-height: 1.45; color: var(--text);
    text-decoration: underline; text-decoration-color: var(--turquoise); text-underline-offset: 3px;
}
.proof-value:hover { color: var(--turquoise-text); }
/* Fleche oblique (svg) = la source est sur un autre site ; fleche « → » =
   page de ce site, comme les autres liens internes de la page. */
.proof-value svg { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; color: var(--turquoise-text); }
.proof-arrow { color: var(--turquoise-text); }

/* ----- Sections ----- */
.home-section { padding: var(--spacing-section) 0; }
.home-alt { background: var(--bg-alt); }
.home-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 12px 48px; align-items: end; margin-bottom: 32px;
}
.home-head .section-title { margin-bottom: 0; }
.home-head p { color: var(--text-secondary); line-height: 1.6; max-width: 600px; }
.home-more {
    display: inline-block; padding: 12px 0; margin-top: 4px; line-height: 1.5;
    color: var(--turquoise-text); font-weight: var(--fw-semibold); font-size: var(--size-small);
    text-decoration: underline; text-underline-offset: 3px;
}
.home-more:hover { color: var(--link-hover); }

/* « Vous etes... » : une porte par acheteur, la carte entiere est la cible. */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-card-gap); }
.doors--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    padding: var(--spacing-card-padding); background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.door:hover { border-color: var(--turquoise); box-shadow: var(--shadow); }
.door:focus-within { border-color: var(--turquoise); }
.door-kicker { font-size: var(--size-tag); line-height: 1.45; color: var(--text-secondary); }
.door-title {
    font-size: var(--size-card-title); font-weight: var(--fw-bold); line-height: 1.35; color: var(--text);
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.door-list { list-style: none; display: grid; gap: 8px; }
.door-list li { position: relative; padding-left: 24px; font-size: var(--size-card-body); line-height: 1.5; color: var(--text); }
.door-list li::before {
    content: ''; position: absolute; left: 3px; top: 0.4em; width: 10px; height: 5px;
    border-left: 2px solid var(--turquoise-text); border-bottom: 2px solid var(--turquoise-text);
    transform: rotate(-45deg);
}
.door-link {
    margin-top: auto; padding-top: 8px;
    color: var(--turquoise-text); font-weight: var(--fw-semibold); font-size: var(--size-small);
    text-decoration: underline; text-underline-offset: 3px;
}
.door-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.door:hover .door-link { color: var(--link-hover); }

/* Accueil EN : ce que je fais pour les ONG (texte seul, sans decor). */
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.home-tile { padding-top: 16px; border-top: 1px solid var(--border); }
.home-tile h3 { font-size: var(--size-card-title); font-weight: var(--fw-bold); line-height: 1.35; color: var(--text); margin-bottom: 8px; }
.home-tile p { font-size: var(--size-card-body); line-height: 1.6; color: var(--text-secondary); }

/* Deux colonnes : acheteurs publics / qui intervient (FR), projets / modalites (EN). */
.home-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.home-split .section-title { font-size: calc(var(--size-section-title) * 0.8); margin-bottom: 12px; }
.home-text { color: var(--text-secondary); line-height: 1.65; margin-bottom: 20px; max-width: 560px; }
.home-facts { margin: 0 0 12px; border-bottom: 1px solid var(--border); }
.home-facts > div {
    display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 20px;
    padding: 12px 0; border-top: 1px solid var(--border);
}
.home-facts dt { font-size: var(--size-small); line-height: 1.55; color: var(--text-secondary); }
.home-facts dd { margin: 0; font-size: var(--size-small); line-height: 1.55; color: var(--text); }
.home-cases { list-style: none; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.home-cases li { padding: 14px 0; border-top: 1px solid var(--border); }
.home-cases h3 { font-size: var(--size-body); font-weight: var(--fw-bold); line-height: 1.4; color: var(--text); margin-bottom: 4px; }
.home-cases p { font-size: var(--size-small); line-height: 1.55; color: var(--text-secondary); }
.home-cases .case-meta { display: block; margin-bottom: 2px; font-size: var(--size-tag); color: var(--text-secondary); }

/* ----- Ecrans moyens et petits ----- */
@media (max-width: 1099px) {
    .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero-map { max-width: 420px; }
    .proof-line { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
    .home-section { padding: 72px 0; }
    .home-head { grid-template-columns: minmax(0, 1fr); }
    .doors { grid-template-columns: minmax(0, 1fr); }
    .home-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .hero { padding: 112px 0 48px; }
    .hero-buttons .btn { width: 100%; }
    .doors--two, .home-tiles { grid-template-columns: minmax(0, 1fr); }
    .home-facts > div { grid-template-columns: minmax(0, 1fr); }
}