fix(ui): enhance region maps contrast in dark/light & desktop single-screen layout
This commit is contained in:
@@ -202,6 +202,14 @@
|
||||
style:--d={cascadeBase === null ? undefined : `${syncopatedDelay(cascadeBase + i)}ms`}
|
||||
use:reveal={cascadeBase !== null}
|
||||
>
|
||||
<rect
|
||||
class="fond-cellule"
|
||||
x={ins.colonne * CELLULE_L + 6}
|
||||
y={ins.rang * CELLULE_H + 6}
|
||||
width={CELLULE_L - 12}
|
||||
height={CELLULE_H - 12}
|
||||
rx="12"
|
||||
/>
|
||||
{#each ins.chemins as d (d)}
|
||||
<path {d} />
|
||||
{/each}
|
||||
@@ -267,39 +275,108 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* — Régions : tokens OKI — */
|
||||
/* — Fonds de cellules des 4 insets régionaux — */
|
||||
.fond-cellule {
|
||||
fill: #1a131c;
|
||||
stroke: #2e2233;
|
||||
stroke-width: 1.5;
|
||||
transition:
|
||||
fill var(--dur-tanbou) var(--ease-ka),
|
||||
stroke var(--dur-tanbou) var(--ease-ka);
|
||||
}
|
||||
|
||||
:global(html.light-theme) .fond-cellule {
|
||||
fill: #f4ead4;
|
||||
stroke: #ded0b8;
|
||||
}
|
||||
|
||||
/* — Régions : Formes territoriales nettes et contrastées — */
|
||||
.region path {
|
||||
fill: var(--card-bg);
|
||||
stroke: var(--line);
|
||||
stroke-width: 1;
|
||||
transition: fill var(--dur-tanbou) var(--ease-ka), stroke var(--dur-tanbou) var(--ease-ka);
|
||||
fill: #22382d;
|
||||
stroke: #00d66c;
|
||||
stroke-width: 1.2;
|
||||
stroke-linejoin: round;
|
||||
transition:
|
||||
fill var(--dur-tanbou) var(--ease-ka),
|
||||
stroke var(--dur-tanbou) var(--ease-ka);
|
||||
}
|
||||
|
||||
:global(html.light-theme) .region path {
|
||||
fill: #d3e8dc;
|
||||
stroke: #006b3d;
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
|
||||
/* Survol */
|
||||
.region.survolee .fond-cellule {
|
||||
fill: #261a2b;
|
||||
stroke: var(--or-oki);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
:global(html.light-theme) .region.survolee .fond-cellule {
|
||||
fill: #ebdcbD;
|
||||
stroke: var(--or-oki);
|
||||
}
|
||||
|
||||
.region.survolee path {
|
||||
fill: var(--card-bg-hover);
|
||||
fill: #2f4d3e;
|
||||
stroke: var(--or-oki);
|
||||
stroke-width: 1.6;
|
||||
}
|
||||
|
||||
:global(html.light-theme) .region.survolee path {
|
||||
fill: #c3dfcd;
|
||||
stroke: var(--or-oki);
|
||||
}
|
||||
|
||||
.region.choisie path {
|
||||
fill: rgba(253, 184, 19, 0.18);
|
||||
/* Sélection */
|
||||
.region.choisie .fond-cellule {
|
||||
fill: rgba(253, 184, 19, 0.12);
|
||||
stroke: var(--or-oki);
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
:global(html.light-theme) .region.choisie .fond-cellule {
|
||||
fill: #fff2d1;
|
||||
stroke: var(--or-oki);
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.region.choisie path {
|
||||
fill: #4b3a13;
|
||||
stroke: var(--or-oki);
|
||||
stroke-width: 1.8;
|
||||
}
|
||||
|
||||
:global(html.light-theme) .region.choisie path {
|
||||
fill: #fde2a2;
|
||||
stroke: var(--or-oki);
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.nom-region {
|
||||
fill: var(--blanc-creme);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
font-family: var(--font-display);
|
||||
text-anchor: middle;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0.03em;
|
||||
transition: fill var(--dur-tanbou) var(--ease-ka);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:global(html.light-theme) .nom-region {
|
||||
fill: #0d0d0d;
|
||||
}
|
||||
|
||||
.nom-region.choisie {
|
||||
fill: var(--or-oki);
|
||||
}
|
||||
|
||||
:global(html.light-theme) .nom-region.choisie {
|
||||
fill: var(--or-oki);
|
||||
}
|
||||
|
||||
/* — Marqueurs du récap (guess = rouge OKI, réel = vert OKI) — */
|
||||
.lien-paire {
|
||||
stroke: var(--muted);
|
||||
@@ -338,7 +415,7 @@
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: var(--oki-radius);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
+249
-177
@@ -41,89 +41,96 @@
|
||||
<Seo title={t().app.sousTitre} description={t().app.sousTitre} path="/" />
|
||||
|
||||
<div class="accueil">
|
||||
<section class="hero" aria-label="Présentation">
|
||||
<div class="flag-chip-hero" aria-hidden="true">
|
||||
<span class="flag-chip"></span>
|
||||
</div>
|
||||
<h1>
|
||||
<span class="masque"><span class="ligne">{t().app.titre}</span></span>
|
||||
</h1>
|
||||
<p class="accroche">
|
||||
<span class="masque"><span class="ligne ligne-retard">{t().micro.kiteSaYe}</span></span>
|
||||
</p>
|
||||
<p class="sous-titre">{t().app.sousTitre}</p>
|
||||
</section>
|
||||
<div class="panneau-gauche">
|
||||
<section class="hero" aria-label="Présentation">
|
||||
<div class="flag-chip-hero" aria-hidden="true">
|
||||
<span class="flag-chip"></span>
|
||||
</div>
|
||||
<div class="titres-hero">
|
||||
<h1>
|
||||
<span class="masque"><span class="ligne">{t().app.titre}</span></span>
|
||||
</h1>
|
||||
<p class="accroche">
|
||||
<span class="masque"><span class="ligne ligne-retard">{t().micro.kiteSaYe}</span></span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="sous-titre">{t().app.sousTitre}</p>
|
||||
</section>
|
||||
|
||||
<section class="sec-regions" aria-labelledby="titre-regions">
|
||||
<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
|
||||
<div class="carte-accueil">
|
||||
<CarteRegions bind:selection={region} cascadeBase={5} />
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondaire toutes"
|
||||
class:choisi={region === 'TOUTES'}
|
||||
aria-pressed={region === 'TOUTES'}
|
||||
onclick={() => (region = 'TOUTES')}
|
||||
>
|
||||
{t().regions.TOUTES}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="sec-modes" aria-labelledby="titre-modes">
|
||||
<h2 id="titre-modes">{t().accueil.choixMode}</h2>
|
||||
<div class="grille modes">
|
||||
{#each modes as m, i (m.id)}
|
||||
<button
|
||||
type="button"
|
||||
class="carte-mode"
|
||||
class:choisi={mode === m.id}
|
||||
aria-pressed={mode === m.id}
|
||||
data-reveal
|
||||
style:--d="{syncopatedDelay(i)}ms"
|
||||
use:reveal
|
||||
onclick={() => (mode = m.id)}
|
||||
>
|
||||
<span class="emoji" aria-hidden="true">{m.emoji}</span>
|
||||
<span class="nom">{t().modes[m.id]}</span>
|
||||
<span class="desc">{t().modes[`${m.id}Desc`]}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<a
|
||||
href="/explorer"
|
||||
class="carte-mode explorer"
|
||||
data-reveal
|
||||
style:--d="{syncopatedDelay(4)}ms"
|
||||
use:reveal
|
||||
>
|
||||
<span class="emoji" aria-hidden="true">🧭</span>
|
||||
<span class="nom">{t().modes.explorer}</span>
|
||||
<span class="desc">{t().modes.explorerDesc}</span>
|
||||
</a>
|
||||
</div>
|
||||
{#if mode === 'defi'}
|
||||
<button type="button" class="btn btn-secondaire lien-defi" onclick={creerLienDefi}>
|
||||
{t().accueil.creerLienDefi}
|
||||
</button>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="sec-modes" aria-labelledby="titre-modes">
|
||||
<h2 id="titre-modes">{t().accueil.choixMode}</h2>
|
||||
<div class="grille modes">
|
||||
{#each modes as m, i (m.id)}
|
||||
<div class="actions-bloc">
|
||||
<section class="options" aria-label={t().accueil.options}>
|
||||
<label class="option-timer">
|
||||
<input type="checkbox" bind:checked={timer} />
|
||||
<span>{t().accueil.timer}</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<div class="zone-pouce">
|
||||
<button type="button" class="btn btn-primaire jouer" onclick={jouer}>
|
||||
{t().accueil.jouer}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panneau-droite">
|
||||
<section class="sec-regions" aria-labelledby="titre-regions">
|
||||
<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
|
||||
<div class="carte-accueil">
|
||||
<CarteRegions bind:selection={region} cascadeBase={5} />
|
||||
<button
|
||||
type="button"
|
||||
class="carte-mode"
|
||||
class:choisi={mode === m.id}
|
||||
aria-pressed={mode === m.id}
|
||||
data-reveal
|
||||
style:--d="{syncopatedDelay(i)}ms"
|
||||
use:reveal
|
||||
onclick={() => (mode = m.id)}
|
||||
class="btn btn-secondaire toutes"
|
||||
class:choisi={region === 'TOUTES'}
|
||||
aria-pressed={region === 'TOUTES'}
|
||||
onclick={() => (region = 'TOUTES')}
|
||||
>
|
||||
<span class="emoji" aria-hidden="true">{m.emoji}</span>
|
||||
<span class="nom">{t().modes[m.id]}</span>
|
||||
<span class="desc">{t().modes[`${m.id}Desc`]}</span>
|
||||
{t().regions.TOUTES}
|
||||
</button>
|
||||
{/each}
|
||||
<a
|
||||
href="/explorer"
|
||||
class="carte-mode explorer"
|
||||
data-reveal
|
||||
style:--d="{syncopatedDelay(4)}ms"
|
||||
use:reveal
|
||||
>
|
||||
<span class="emoji" aria-hidden="true">🧭</span>
|
||||
<span class="nom">{t().modes.explorer}</span>
|
||||
<span class="desc">{t().modes.explorerDesc}</span>
|
||||
</a>
|
||||
</div>
|
||||
{#if mode === 'defi'}
|
||||
<button type="button" class="btn btn-secondaire lien-defi" onclick={creerLienDefi}>
|
||||
{t().accueil.creerLienDefi}
|
||||
</button>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="options" aria-labelledby="titre-options">
|
||||
<h2 id="titre-options">{t().accueil.options}</h2>
|
||||
<label class="option-timer">
|
||||
<input type="checkbox" bind:checked={timer} />
|
||||
<span>{t().accueil.timer}</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<div class="zone-pouce">
|
||||
<button type="button" class="btn btn-primaire jouer" onclick={jouer}>
|
||||
{t().accueil.jouer}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="accueil-footer">
|
||||
<FlagBar hauteur={4} />
|
||||
<FlagBar hauteur={3} />
|
||||
<div class="footer-contenu">
|
||||
<p class="mention-oki">{t().footer.texteFederation}</p>
|
||||
<div class="liens-footer">
|
||||
@@ -145,10 +152,21 @@
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
|
||||
padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.panneau-gauche {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panneau-droite {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.4rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
@@ -159,7 +177,15 @@
|
||||
}
|
||||
|
||||
.flag-chip-hero {
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.titres-hero {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.masque {
|
||||
@@ -195,73 +221,84 @@
|
||||
|
||||
.hero h1 {
|
||||
margin: 0;
|
||||
font-size: 3.2rem;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 900;
|
||||
font-family: var(--font-display);
|
||||
color: var(--blanc-creme);
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.accroche {
|
||||
margin: 0.2rem 0 0;
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--or-oki);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sous-titre {
|
||||
margin: 0.4rem 0 0;
|
||||
margin: 0.3rem 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.9rem;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.05rem;
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--font-display);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--blanc-creme);
|
||||
margin: 0 0 0.6rem;
|
||||
margin: 0 0 0.5rem;
|
||||
border-left: 3px solid var(--or-oki);
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.grille {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.modes {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.carte-accueil {
|
||||
max-width: 560px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.toutes {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
width: 100%;
|
||||
padding: 0.55rem 1rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.toutes.choisi {
|
||||
border-color: var(--or-oki);
|
||||
background: var(--card-bg-hover);
|
||||
color: var(--or-oki);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.lien-defi {
|
||||
display: block;
|
||||
margin: 0.8rem auto 0;
|
||||
margin: 0.5rem auto 0;
|
||||
padding: 0.45rem 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.carte-mode {
|
||||
border: 1px solid var(--line);
|
||||
border-left: 4px solid var(--line);
|
||||
border-left: 3px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--noir-profond);
|
||||
box-shadow: var(--oki-ombre);
|
||||
@@ -272,8 +309,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 1.1rem 0.9rem;
|
||||
justify-content: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.65rem 0.6rem;
|
||||
transition:
|
||||
transform var(--dur-tanbou) var(--ease-ka),
|
||||
border-color var(--dur-tanbou) var(--ease-ka),
|
||||
@@ -281,24 +319,26 @@
|
||||
}
|
||||
|
||||
.carte-mode .emoji {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.carte-mode .nom {
|
||||
font-weight: 750;
|
||||
font-family: var(--font-display);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--blanc-creme);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.carte-mode .desc {
|
||||
font-size: 0.82rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.carte-mode:hover {
|
||||
transform: translateY(-3px);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--or-oki);
|
||||
border-left-color: var(--or-oki);
|
||||
background: var(--card-bg-hover);
|
||||
@@ -314,160 +354,192 @@
|
||||
color: var(--or-oki);
|
||||
}
|
||||
|
||||
.actions-bloc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.option-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-size: 0.95rem;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--blanc-creme);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.option-timer input {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
accent-color: var(--or-oki);
|
||||
}
|
||||
|
||||
.zone-pouce {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.jouer {
|
||||
width: min(420px, 100%);
|
||||
min-height: 48px;
|
||||
padding: 1rem;
|
||||
font-size: 1.15rem;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
min-height: 44px;
|
||||
padding: 0.75rem 1.4rem;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.accueil-footer {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
|
||||
.footer-contenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.mention-oki {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.liens-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
gap: 0.5rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.liens-footer a {
|
||||
color: var(--or-oki);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.liens-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* — Desktop Single-Screen Layout (Sans Scroll) — */
|
||||
@media (min-width: 1024px) {
|
||||
.accueil {
|
||||
max-width: 1120px;
|
||||
max-width: 1180px;
|
||||
height: 100%;
|
||||
max-height: calc(100dvh - 56px);
|
||||
overflow: hidden;
|
||||
padding: 0.6rem 1.4rem 0.4rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
|
||||
column-gap: 2.5rem;
|
||||
row-gap: 1.1rem;
|
||||
align-content: start;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
column-gap: 2.2rem;
|
||||
row-gap: 0.3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panneau-gauche {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.4rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-column: 1;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sec-regions {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 5;
|
||||
align-self: start;
|
||||
.titres-hero {
|
||||
justify-content: flex-start;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.sec-modes,
|
||||
.options,
|
||||
.zone-pouce {
|
||||
grid-column: 1;
|
||||
.hero h1 {
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
.accroche {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.sous-titre {
|
||||
margin-top: 0.15rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.modes {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.panneau-droite {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sec-regions {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.carte-accueil {
|
||||
max-width: 100%;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.carte-accueil :global(.carte-regions) {
|
||||
max-height: 52dvh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carte-accueil :global(svg) {
|
||||
max-height: 48dvh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.accueil-footer {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.zone-pouce {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.carte-accueil {
|
||||
max-width: min(560px, calc(clamp(240px, 42dvh, 560px) * 0.94));
|
||||
grid-row: 2;
|
||||
margin-top: 0;
|
||||
padding-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) and (max-height: 999px) {
|
||||
/* Fallback pour petits écrans desktop / hauteurs réduites */
|
||||
@media (min-width: 1024px) and (max-height: 640px) {
|
||||
.accueil {
|
||||
row-gap: 0.8rem;
|
||||
padding-top: 0.8rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
.accroche {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.carte-mode {
|
||||
padding: 0.7rem 0.8rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.carte-mode .emoji {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.carte-mode .desc {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.jouer {
|
||||
padding: 0.7rem 1rem;
|
||||
font-size: 1.05rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user