/* ==========================================================================
   PinMatches — site public
   Feuille de style UNIQUE du site. Aucun build, aucune dépendance externe.
   Palette et police reprises de l'application (Resources/Styles/Colors.xaml,
   Resources/Fonts/OpenSans-*.ttf).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices — auto-hébergées (jamais de CDN : un CDN de polices transmet
   l'IP du visiteur à un tiers, ce qu'il faudrait alors déclarer sur la page
   de confidentialité). Ce sont les polices de l'application, converties en
   WOFF2 : 213 Ko de .ttf ramenés à 89 Ko, soit près d'un tiers du poids de la
   page d'accueil économisé.

   UN SEUL FORMAT, sans repli TrueType, à dessein : les rares agents qui ne
   lisent pas le WOFF2 (IE11, Android 4.x) tombent sur la pile système déclarée
   par --font-body et affichent le site dans une autre sans-serif — la page
   reste entièrement lisible. Embarquer un second jeu de fichiers pour eux
   doublerait le poids du dossier sans rien changer pour personne d'autre.

   `font-display: swap` : le texte s'affiche immédiatement dans la police
   système, puis bascule. Sur un site dont la raison d'être est de rendre des
   textes légaux lisibles, aucune police ne justifie un écran blanc.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Couleurs — miroir de Colors.xaml */
    --color-bg: #18392b;           /* vert foncé : fond de l'app */
    --color-surface: #1f4835;      /* aplat légèrement plus clair (cartes) */
    --color-text: #fffff0;         /* Ivory */
    --color-text-muted: #c9cdbe;   /* texte secondaire, ≥ 7:1 sur --color-bg */
    --color-accent: #eee8aa;       /* ButtonGold */
    --color-accent-strong: #f0e68c;/* Khaki */
    --color-danger: #fa8072;       /* Salmon */
    --color-border: rgba(255, 255, 240, 0.18);

    /* ⚠️ Sur --color-accent / --color-accent-strong, le texte est TOUJOURS
       --color-bg (vert foncé). Jamais de blanc : contraste insuffisant. */
    --color-on-accent: #18392b;

    /* Typographie */
    --font-body: "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.25rem, 0.9rem + 1.2vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.1rem + 1.8vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.2rem + 3vw, 2.75rem);
    --leading-body: 1.65;

    /* Espacement */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Formes */
    --radius: 12px;
    --radius-sm: 8px;
    --container: 72rem;
    --measure: 40rem; /* longueur de ligne confortable pour les pages légales */
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1,
h2,
h3 {
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); margin-top: var(--space-12); }
h3 { font-size: var(--text-xl); margin-top: var(--space-8); }

p,
ul,
ol,
dl,
table {
    margin: 0 0 var(--space-4);
}

ul,
ol {
    padding-left: var(--space-6);
}

li + li {
    margin-top: var(--space-2);
}

a {
    color: var(--color-accent);
    text-underline-offset: 0.2em;
}

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

img {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
}

code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
}

/* Accessibilité : anneau de focus visible et uniforme sur tout le site. */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   4. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -4rem;
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: var(--space-2);
    color: var(--color-on-accent);
}

/* Listes de mise en page (grille, captures, liens du pied de page) : leur
   espacement vient de `gap`. On y annule `li + li { margin-top }` de la base,
   qui ne vise que les listes de texte et decalerait vers le bas tous les
   elements sauf le premier. */
.grid > li + li,
.shots > li + li,
.site-footer__links > li + li {
    margin-top: 0;
}

/* Grille responsive sans media query : les colonnes se replient d'elles-mêmes. */
.grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    padding: 0;
    list-style: none;
}

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-6);
}

.card > :last-child {
    margin-bottom: 0;
}

/* Pictogramme de carte — repris de `App/Resources/Icons/`, recoloré à l'accent
   (la version de l'app est en vert foncé, invisible sur ce fond). Purement
   décoratif : il redit le titre qui le suit, d'où `alt=""` et `aria-hidden`,
   qui l'écartent des lecteurs d'écran. */
.card__icon {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: var(--space-2);
}

.card__icon + h3 {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px; /* cible tactile */
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--color-accent);
}

.btn--primary {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
}

.btn--primary:hover {
    background-color: var(--color-accent-strong);
    color: var(--color-on-accent);
}

/* Bouton neutralisé — porté par un <span>, pas un <a> : l'attribut `disabled`
   n'existe que sur les contrôles de formulaire, et un <a> privé de href reste
   dans le flux de lecture sans annoncer qu'il ne mène nulle part. Volontairement
   SANS `btn--primary` plutôt qu'en le corrigeant : `.btn--primary:hover` est plus
   spécifique qu'une classe seule, et rendrait l'or au survol. */
.btn--disabled {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   6. En-tête / navigation
   -------------------------------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

.site-header__brand {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    margin-right: auto;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.site-nav a {
    color: var(--color-text);
    text-decoration: none;
    padding-block: var(--space-1);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Sélecteur de langue : un simple lien, jamais de redirection automatique
   sur Accept-Language (elle casse le crawl et piège un relecteur). */
.lang-switch {
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Contenu principal
   -------------------------------------------------------------------------- */
main {
    flex: 1 0 auto;
    padding-block: var(--space-12) var(--space-16);
}

/* Colonne de lecture des pages légales (mesure de ligne bornée). */
.prose {
    max-width: var(--measure);
}

.prose h2:first-of-type {
    margin-top: var(--space-8);
}

.lead {
    font-size: var(--text-lg);
    color: var(--color-text);
}

/* Tableaux des pages légales (données collectées, durées de conservation).
   Ils sont plus larges que la colonne de lecture : on les sort de `.prose` et
   on les laisse défiler horizontalement plutôt que déborder la page. */
.table-wrap {
    overflow-x: auto;
    margin-bottom: var(--space-6);
}

.table-wrap table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin: 0;
}

.table-wrap th,
.table-wrap td {
    text-align: left;
    vertical-align: top;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.table-wrap th {
    font-weight: 600;
    color: var(--color-accent);
}

/* Bandeau « Version 1.0 — en vigueur depuis le JJ/MM/AAAA » des pages légales. */
.legal-meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-4);
    margin-bottom: var(--space-8);
}

/* Marqueur d'information manquante, à remplacer AVANT toute mise en ligne.
   Volontairement criard : une page légale publiée avec un `[[…]]` visible est
   pire qu'une page absente. Recenser chaque occurrence dans
   docs/inprogress/play-store/operations-manuelles.md du dépôt applicatif. */
.todo {
    background-color: var(--color-danger);
    color: var(--color-on-accent);
    font-weight: 600;
    padding: 0 var(--space-1);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   8. Page d'accueil
   -------------------------------------------------------------------------- */
/* Accroche et visuel côte à côte sur large écran, empilés en dessous — sans
   media query : c'est `flex-wrap` qui décide, à partir des largeurs de base
   déclarées sur les deux enfants. */
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.hero__text {
    flex: 1 1 26rem;
    min-width: 0;
}

.hero__media {
    flex: 0 1 18rem;
    margin: 0;
}

/* `width`/`height` sont portés par la balise (ils réservent la place avant le
   chargement et évitent le décalage de mise en page) ; ici on ne fait que les
   laisser se réduire à la largeur disponible. */
.hero__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* Le texte d'accroche garde une longueur de ligne lisible même sur grand écran,
   sans borner la section entière (la grille des fonctionnalités, elle, occupe
   toute la largeur). */
.hero__lead,
.hero__meta {
    max-width: var(--measure);
}

.hero__actions {
    margin-block: var(--space-8) var(--space-4);
}

.hero__meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Badge officiel Google Play (posé en W7). La politique de marque impose une
   zone de dégagement d'au moins 1/4 de la hauteur du badge sur les quatre
   côtés : elle est portée ici par le padding, pour qu'aucune page n'ait à s'en
   souvenir. Hauteur fixée (56px) ⇒ dégagement de 14px. Le badge ne doit être ni
   redessiné, ni recoloré, ni déformé. */
.store-badge {
    display: inline-block;
    padding: 14px;
    border: 0;
    text-decoration: none;
}

.store-badge img {
    display: block;
    height: 56px;
    width: auto;
}

/* Captures d'écran : format portrait de téléphone, colonnes repliables sans
   media query (même principe que `.grid`). */
.shots {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
}

.shot {
    margin: 0;
}

.shot figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Les captures sont des portraits 9:16 : la hauteur est reservee par les attributs
   `width`/`height` du `<img>`, la feuille ne fait que les laisser se reduire. */
.shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   9. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-8);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.site-footer a {
    color: var(--color-text);
}

.site-footer a:hover {
    color: var(--color-accent);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
}

.site-footer__legal > * {
    margin: 0 0 var(--space-2);
}

/* --------------------------------------------------------------------------
   10. Impression — les pages légales doivent rester lisibles imprimées.
   -------------------------------------------------------------------------- */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    .site-header,
    .site-footer,
    .skip-link {
        display: none;
    }

    a {
        color: #000;
    }

    .prose {
        max-width: none;
    }
}