/* winbe.fr : feuille commune à l'accueil et aux mentions légales. */
/* Inter (sous-ensemble latin, variable 100-900), la police de Sola Launcher. */
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("/assets/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Latin étendu A (polonais, turc…) : téléchargé seulement si la page contient ces lettres.
   Japonais, coréen et hindi passent par les polices du système. */
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("/assets/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-0130, U+0132-017F, U+0218-021B;
}
:root {
    /* Couleurs du logo : bleu #0071b5, cyan #7ac4d0, anthracite #121212.
       Thème sombre unique, quel que soit le réglage de l'appareil (choix de l'utilisateur). */
    color-scheme: dark;
    --bg: #101214;
    --halo-1: rgba(0, 113, 181, 0.32);
    --halo-2: rgba(122, 196, 208, 0.14);
    --bg-card: rgba(255, 255, 255, 0.045);
    --border: rgba(255, 255, 255, 0.1);
    --text: #f4f7f9;
    --muted: rgba(244, 247, 249, 0.7);
    --faint: rgba(244, 247, 249, 0.46);
    --accent: #6cc0dd;
    --btn: #0071b5;
    --btn-text: #fff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    min-height: 100vh; display: flex; flex-direction: column;
    background:
        radial-gradient(60rem 36rem at 0% -10%, var(--halo-2), transparent 70%),
        radial-gradient(50rem 30rem at 100% 0%, var(--halo-1), transparent 70%),
        var(--bg) no-repeat;
    color: var(--text);
    font: 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }
header.wrap { padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* En-tête, calé sur la grille du W de l'icône (mesurée sur le PNG 512 px) :
   le W blanc va de y = 79 à 434 (356 px sur 512), soit 5 modules de 0,139 icône.
   - WINBE a exactement la hauteur de ce W (5 modules) et commence à sa hauteur (79/512) ;
   - « studio » : hauteur d'x d'Inter (0,546 em) = 2 modules, ligne de base au pied de WINBE,
     donc le haut de ses minuscules affleure le dessous de la barre centrale du E ;
   - espaces : 1,5 module entre l'icône et WINBE comme entre WINBE et « studio ». */
.logo {
    --icone: 56px; --m: calc(var(--icone) * 0.13906);
    display: inline-flex; align-items: flex-start; gap: calc(var(--m) * 1.5);
    color: var(--text); text-decoration: none;
}
.logo img { width: var(--icone); height: var(--icone); display: block; }
.nom { display: flex; align-items: baseline; gap: calc(var(--m) * 1.5); margin-top: calc(var(--icone) * 79 / 512); }
/* Le SVG n'a pas de ligne de base : le navigateur prend son bord bas, donc la ligne de base de « studio » tombe au pied de WINBE. */
.wordmark { height: calc(var(--m) * 5); width: auto; display: block; }
.studio {
    display: block; font-size: calc(var(--m) * 2 / 0.5459); font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1;
}
main.wrap { flex: 1; padding-top: 72px; padding-bottom: 72px; }
h1 { font-size: clamp(36px, 7vw, 56px); line-height: 1.1; letter-spacing: -0.022em; }
.lead { margin-top: 18px; font-size: clamp(18px, 2.4vw, 21px); color: var(--muted); max-width: 34em; }
h2 { margin-top: 64px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
/* Carte d'application : une colonne d'icônes de 56 px (l'icône de l'app, puis celles
   des liens, centrées dans la même largeur) et une colonne de texte alignée sur le titre. */
.app {
    --col: 56px; --ecart: 16px;
    margin-top: 16px; padding: 24px; border: 1px solid var(--border); border-radius: 18px;
    background: var(--bg-card);
}
.app-tete { display: flex; align-items: center; gap: var(--ecart); }
.app-tete img { width: var(--col); height: var(--col); flex: none; display: block; }
.app h3 { font-size: 19px; line-height: 1.3; }
.app p { color: var(--muted); font-size: 15px; line-height: 1.45; margin-top: 2px; }
.liens { list-style: none; margin-top: 20px; border-top: 1px solid var(--border); margin-bottom: -14px; }
.liens li + li { border-top: 1px solid var(--border); }
.liens a {
    display: flex; align-items: center; gap: var(--ecart); padding: 14px 0;
    color: var(--text); text-decoration: none;
}
.ico { width: var(--col); height: 26px; flex: none; display: flex; justify-content: center; align-items: center; color: var(--accent); }
.ico img, .ico svg { height: 26px; width: auto; display: block; }
.txt { flex: 1; min-width: 0; }
.txt strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.txt small { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }
.fleche { flex: none; color: var(--faint); transition: transform .2s, color .2s; }
.liens a:hover .fleche, .liens a:focus-visible .fleche { color: var(--accent); transform: translateX(3px); }
.liens a:hover strong { color: var(--accent); }
.contact { margin-top: 16px; color: var(--muted); }
footer.wrap {
    padding-top: 24px; padding-bottom: 32px;
    /* filet limité à la colonne de texte (le padding latéral de .wrap reste hors filet) */
    background: linear-gradient(var(--border), var(--border)) 20px 0 / calc(100% - 40px) 1px no-repeat;
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
    color: var(--faint); font-size: 14px;
}
footer a, .lien-cookies { color: var(--muted); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.lien-cookies { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Sélecteur de langue (en haut à droite, drapeaux comme sur sola-launcher.com), sans JavaScript : <details> ; site.js le referme
   au clic à l'extérieur et avec Échap. */
.langues { position: relative; flex: none; }
.langues summary {
    list-style: none; display: flex; align-items: center; gap: 7px; cursor: pointer;
    height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
    color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
    transition: color .2s, border-color .2s;
}
.langues summary::-webkit-details-marker { display: none; }
.langues summary:hover, .langues[open] summary { color: var(--text); border-color: rgba(255, 255, 255, 0.22); }
.langues img { display: block; width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); flex: none; }
.langues .chevron { display: block; transition: transform .2s; }
.langues[open] .chevron { transform: rotate(180deg); }
.langues ul {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 10;
    list-style: none; min-width: 210px; max-height: min(70vh, 520px); overflow-y: auto;
    padding: 6px; border: 1px solid var(--border); border-radius: 14px;
    background: #171a1e; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.langues a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 15px;
}
.langues a:hover, .langues a:focus-visible { background: rgba(255, 255, 255, 0.07); }
.langues a[aria-current] { color: var(--accent); }
.langues a span { flex: 1; }
.langues a[aria-current]::after { content: "✓"; font-size: 14px; }

/* Bandeau de consentement (seulement si la mesure d'audience est activée) */
.bandeau-cookies {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20;
    width: calc(100% - 32px); max-width: 720px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px;
    background: #171a1e; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p { flex: 1 1 320px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.bandeau-cookies .choix { display: flex; gap: 10px; margin-left: auto; }
.bandeau-cookies button {
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border);
    background: transparent; color: var(--text);
}
.bandeau-cookies button.oui { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }

/* Écritures sans capitales ni lettres espacées */
:lang(ja) h1, :lang(ko) h1, :lang(hi) h1 { letter-spacing: 0; line-height: 1.25; }
:lang(ja) h2, :lang(ko) h2, :lang(hi) h2 { letter-spacing: 0.04em; }
:lang(ko) { word-break: keep-all; }
:lang(ja) { line-break: strict; }

/* Mentions légales */
.legal h1 { font-size: clamp(30px, 5vw, 42px); }
.legal .maj { margin-top: 10px; color: var(--faint); font-size: 15px; }
.legal h2 { margin-top: 40px; font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--text); }
.legal p { margin-top: 10px; color: var(--muted); }
@media (max-width: 520px) {
    /* le logo mesure 6,32 icônes de large : il garde 46 px tant qu'il tient à côté du globe
       (36 px + 12 px d'écart), puis rétrécit avec l'écran (43 px à 360, 36 px à 320) */
    .logo { --icone: clamp(32px, calc((100vw - 88px) / 6.4), 46px); }
    .app { --col: 48px; --ecart: 14px; padding: 18px; }
    /* sélecteur réduit au drapeau (son aria-label reste lu) pour laisser au logo toute sa taille */
    header.wrap { gap: 12px; }
    .langues .code, .langues .chevron { display: none; }
    .langues summary { width: 36px; padding: 0; justify-content: center; }
}

/* Vidéo YouTube en façade légère : affiche locale et bouton, l'iframe youtube-nocookie n'est
   chargée qu'au clic (site.js). Rien n'est demandé à YouTube avant. */
.video-facade {
    position: relative; margin-top: 32px; aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--border); border-radius: 18px; background: #000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.video-facade img, .video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.video-play {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    width: 100%; border: 0; padding: 0; background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45)); color: #fff; font: inherit; cursor: pointer;
}
.video-play-icon {
    display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%;
    background: rgba(16, 18, 20, 0.55); border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, transform .2s;
}
.video-play-icon svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.video-play:hover .video-play-icon, .video-play:focus-visible .video-play-icon { background: var(--btn); transform: scale(1.06); }
.video-play-label {
    display: flex; gap: 8px; align-items: baseline; padding: 6px 14px; border-radius: 999px;
    background: rgba(16, 18, 20, 0.6); font-size: 15px; font-weight: 600;
}
.video-play-time { color: rgba(255, 255, 255, 0.7); font-weight: 400; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .video-facade { margin-top: 24px; border-radius: 14px; } .video-play-icon { width: 60px; height: 60px; } }