/* ============================================================
ACOLYTE — DESIGN
------------------------------------------------------------
Direction : sombre, calme, aéré. Surfaces charbon, filets d'un pixel,
grands rayons, ombres douces et diffuses. Le jaune de la marque ne sert
plus de fond partout : il devient un ACCENT — logo, action principale,
étape en cours. C'est ce qui donne l'impression de calme.
⚠️ Ce qui a remplacé quoi (ne le refais pas à l'envers sans raison) :
· bordures noires de 3-4 px → filet de 1 px, translucide (--stroke)
· ombres dures décalées → --shadow / --shadow-lg, douces
· rayons de 4 px → 12 à 20 px
Le fond n'est plus à pois : la texture vient des surfaces empilées.
⚠️ EXCEPTION, à ne pas « harmoniser » : tout ce qui se pose SUR la carte
(.am-*) garde une encre foncée fixe et des contours nets. Les tuiles
OpenStreetMap sont claires dans les deux thèmes ; un filet translucide y
serait invisible.
============================================================ */
/* ---- Thème sombre : la référence, c'est lui ---- */
:root {
--bg: #121212; /* page */
--bg-2: #171717; /* colonne de gauche */
--secondary: #1C1C1C; /* carte */
--surface-2: #232323; /* champ, pastille */
--primary: #FFE600; /* le jaune de la marque, en accent */
--primary-ink: #141414; /* encre posée SUR le jaune */
/* Encre posée sur les accents colorés (vert, orange, cyan). En thème sombre
ces aplats sont CLAIRS, donc l'encre y est foncée ; en thème clair ils
sont foncés, donc elle est blanche. Le jaune, lui, ne change pas de
thème : il garde --primary-ink des deux côtés. */
--on-accent: #141414;
--accent-cyan: #5BD6E8;
--accent-violet: #B49BF0;
--accent-orange: #F2954B;
--ok: #5BC98B;
--danger: #E9695F;
--txt: #F2F1EC;
--txt-2: #A5A49D; /* 6,8:1 sur --bg — ne pas redescendre, voir plus bas */
--stroke: rgba(255,255,255,.11); /* le filet d'un pixel */
--stroke-2: rgba(255,255,255,.20); /* filet appuyé : survol, champ actif */
--field-focus: #262626;
--card-hover: #212121;
--locked: #1A1A1A;
--tab-on: #262626;
--shadow: 0 6px 18px rgba(0,0,0,.35);
--shadow-lg: 0 18px 44px rgba(0,0,0,.48);
--glow: 0 0 0 1px rgba(255,230,0,.35), 0 8px 28px rgba(255,230,0,.14);
--r-lg: 20px;
--r-md: 14px;
--r-sm: 10px;
color-scheme: dark;
}
/* ---- Thème clair : le même dessin, retourné. Pas un autre design. ---- */
:root[data-theme="light"] {
--bg: #F5F4F0;
--bg-2: #EFEEE9;
--secondary: #FFFFFF;
--surface-2: #F7F6F2;
--primary: #FFE600;
--primary-ink: #141414;
--on-accent: #FFFFFF;
--accent-cyan: #1B8FA6;
--accent-violet: #6D4FC4;
/* assombri de #C25A11 : les liens en portent la couleur, et sur le blanc ils
plafonnaient à 4,41:1 — juste sous la norme. À #B85410 : 4,87:1, et le
texte blanc POSÉ dessus (bandeau réseau, étiquette « warn ») y gagne
exactement autant. */
--accent-orange: #B85410;
/* assombri de #1E8C57 pour la même raison que l'orange : le texte blanc de
l'étiquette « OK » n'y atteignait que 4,25:1. À #1A7F4E : 5,01:1. */
--ok: #1A7F4E;
--danger: #C4372C;
--txt: #16160F;
--txt-2: #63625B;
--stroke: rgba(0,0,0,.12);
--stroke-2: rgba(0,0,0,.24);
--field-focus: #FFFDEB;
--card-hover: #FAF9F5;
--locked: #EAE9E3;
--tab-on: #FFFFFF;
--shadow: 0 4px 14px rgba(20,20,15,.10);
--shadow-lg: 0 16px 40px rgba(20,20,15,.16);
--glow: 0 0 0 1px rgba(190,168,0,.55), 0 8px 24px rgba(255,230,0,.22);
color-scheme: light;
}
/* ⚠️ L'encre posée sur les aplats jaunes (et les autres aplats vifs) est
regroupée EN FIN DE FICHIER — chercher « ENCRE SUR LES APLATS VIFS ».
Elle était ici, mais six de ses sélecteurs étaient annulés par des règles
plus bas de spécificité égale. En fin de fichier, elle gagne la cascade :
un seul endroit à lire, et le défaut ne peut plus revenir. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Inter',system-ui,sans-serif;
background-color:var(--bg);
color:var(--txt);
min-height:100vh;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
/* ===== Écran de démarrage ===== */
#boot{
position:fixed;inset:0;z-index:200;
/* FILET ULTIME : même si le JavaScript ne se charge pas (fichier manquant,
erreur, réseau coupé), le splash s'efface tout seul au bout de 6 s.
Impossible de rester bloqué dessus. */
animation: bootFail 0s 6s forwards;
background:var(--bg);
display:grid;place-items:center;
transition:opacity .45s ease, visibility .45s;
}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;width:min(90vw,340px)}
.boot-mark{
width:96px;height:96px;flex-shrink:0;
display:grid;place-items:center;
animation:bootPop .5s cubic-bezier(.2,1.4,.4,1) both;
}
.boot-mark .mascot{width:92px;height:92px}
.boot-mark span{
font-family:'Sora',sans-serif;font-weight:900;font-size:3rem;line-height:1;
color:#101010;letter-spacing:-.04em;
}
.boot-word{
font-family:'Sora',sans-serif;font-weight:900;font-size:2.6rem;letter-spacing:-.04em;
text-transform:uppercase;color:var(--txt);line-height:1;
animation:bootUp .45s .1s ease both;
}
.boot-sub{
font-family:'Sora',sans-serif;font-weight:800;font-size:.66rem;letter-spacing:.22em;
color:var(--txt-2);text-transform:uppercase;
animation:bootUp .45s .18s ease both;
}
.boot-bar{
width:100%;height:16px;margin-top:8px;
background:var(--secondary);
border:1px solid var(--stroke);
box-shadow:var(--shadow);
overflow:hidden;
animation:bootUp .45s .26s ease both;
}
.boot-bar i{
display:block;height:100%;width:0%;
background:var(--primary);
border-right:1px solid var(--stroke);
transition:width .35s ease;
}
.boot-step{
font-family:'Sora',sans-serif;font-weight:800;font-size:.62rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--txt-2);
animation:bootUp .45s .34s ease both;
}
@keyframes bootFail{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes bootPop{from{transform:scale(.5) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes bootUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
:root[data-theme="dark"] #boot{}
@media (prefers-reduced-motion:reduce){ .boot-mark,.boot-word,.boot-sub,.boot-bar,.boot-step{animation:none} }
/* ===== Layout ===== */
.wrap{max-width:1060px;margin:0 auto;padding:18px 18px 120px}
/* L'en-tête n'est plus un bandeau jaune : le jaune est devenu un accent, il
ne sert plus de fond sur toute la largeur. L'en-tête ne porte donc que le
logo (téléphone) et la navigation. */
header{
display:flex;align-items:center;justify-content:space-between;
padding:14px 0 6px;gap:10px;flex-wrap:wrap;
background:transparent;border:0;box-shadow:none;
margin-bottom:18px;
}
.logo{
font-family:'Sora',sans-serif;font-weight:900;font-size:2.15rem;
letter-spacing:-.03em;display:flex;align-items:center;gap:10px;text-transform:uppercase;
}
/* La mascotte remplace l'ancien carré orange. Elle garde le regard et
le clignement — sa signature — mais pas le balancement : un logo qui
tangue en permanence fatigue l'œil. */
.logo span{color:var(--txt)}
/* Logo intégré : le globe coiffe le « i » d'ACOLYTE, comme un point animé.
On réserve de la place au-dessus du mot pour que le globe ne soit pas rogné. */
.logo{padding-top:20px}
/* Chaque lettre est un élément à part (nécessaire à l'easter egg bowling). */
.logo-word{display:inline-flex;align-items:flex-end;position:relative}
.logo-word i{display:inline-block;font-style:normal;will-change:transform;position:relative}
/* la lettre « i » porte le globe au-dessus d'elle, en guise de point */
/* Le globe REMPLACE le « o » d'ACOLYTE : une lettre ronde par une planète
ronde. Il n'est donc plus posé au-dessus d'une lettre, il EST la lettre —
d'où la mise en place en flux plutôt qu'en absolu.
La largeur suit la taille du texte (em) : le logo reste juste à toutes les
tailles, du bandeau de démarrage à la colonne de gauche. */
/* ⚠️ LE « O » EST UNE VRAIE LETTRE, et le globe est POSÉ PAR-DESSUS.
Avant, le « o » n'existait pas dans le HTML : le mot se lisait « ACLYTE »
dès que le SVG tardait ou échouait, et le texte réellement présent dans la
page était « Aclyte » (seul l'aria-label disait « Acolyte »).
Maintenant la lettre est là, rendue transparente : le mot se lit toujours,
et surtout c'est ELLE qui donne au globe sa largeur ET sa hauteur. Plus
aucun calage à la main — le globe suit la lettre à toutes les tailles.
⚠️ Pourquoi « align-self:baseline » (l'ancienne méthode) ne pouvait pas
marcher : dans un conteneur FLEX, l'alignement par ligne de base ne se fait
qu'ENTRE les éléments qui la demandent. Toutes les lettres étant en
« flex-end », le globe était seul en « baseline » — le navigateur le
repliait donc en début de ligne. Mesuré : son centre tombait 5,6 px trop
haut. C'était ça, l'effet « un peu haut ». */
.o-mark{
position:relative;
display:inline-block;
/* la lettre occupe la place, mais on ne la voit pas : c'est le globe qu'on voit */
color:transparent;
/* le globe déborde de la lettre (débord naturel d'une forme ronde) : il ne
doit pas être rogné */
overflow:visible;
}
/* Le globe, centré sur la boîte de la lettre. .o-mark n'a qu'une seule ligne
de texte : son centre vertical EST celui du « O », débord compris. */
.o-mark .logo-mark{
position:absolute;
left:50%;
/* « 50 % » centre sur la BOÎTE DE LIGNE, qui n'est pas symétrique autour du
« O » : elle descend plus bas (le jambage) qu'elle ne monte. Mesuré sur la
fonte réelle, avec un jalon de hauteur nulle posé dans le mot pour trouver
la ligne de base : l'encre du O va de -0,772em à +0,037em autour d'elle,
son centre est donc 0,037em AU-DESSUS du centre de la boîte. */
top:calc(50% - .037em);
transform:translate(-50%,-50%);
/* 0.82em, soit un peu plus que la hauteur des capitales (~0.735em) : c'est
le débord naturel d'une forme ronde, qui la fait paraître de la même
taille que les lettres droites. ⚠️ La référence est la hauteur de
CAPITALE, pas la largeur de la lettre — un globe calé sur la largeur
serait bien trop gros. */
width:.82em;height:.82em;
}
.logo-mark{
display:block;
pointer-events:auto;cursor:pointer;
}
.logo-mark .mascot{width:100%;height:100%;display:block;animation:none}
.icon-btn{
background:var(--secondary);border:1px solid var(--stroke);color:var(--txt);
width:42px;height:42px;font-weight:800;border-radius:var(--r-md);cursor:pointer;
font-size:1.2rem;display:grid;place-items:center;transition:all .1s ease;
box-shadow:var(--shadow);
}
.icon-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow);background:var(--accent-cyan)}
.icon-btn:active{transform:translateY(1px);box-shadow:var(--shadow)}
/* ===== Steps nav ===== */
.steps{display:flex;gap:10px;margin-bottom:24px;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{
flex:1;min-width:125px;padding:12px 14px;border-radius:var(--r-md);cursor:pointer;
background:var(--secondary);border:1px solid var(--stroke);
font-size:.85rem;font-weight:800;color:var(--txt);text-transform:uppercase;white-space:nowrap;
display:flex;align-items:center;gap:8px;transition:all .1s ease;
box-shadow:var(--shadow);
}
.step .n{
width:22px;height:22px;border-radius:0;display:grid;place-items:center;
font-size:.75rem;background:var(--bg);border:1px solid var(--stroke);font-weight:900;flex-shrink:0;
}
.step.active{background:var(--primary);transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.step.active .n{background:var(--accent-cyan)} /* encre : voir fin de fichier */
.step.locked{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;background:var(--locked)}
.step:not(.locked):not(.active):hover{background:var(--bg);transform:translate(-1px,-1px);box-shadow:var(--shadow)}
/* ===== Brutalist card ===== */
.card{
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-lg);
padding:24px;margin-bottom:24px;box-shadow:var(--shadow);
}
h1,h2,h3{font-family:'Sora',sans-serif;letter-spacing:-.02em;text-transform:uppercase;font-weight:900}
/* le h1 de la page porte le même style que les h2 : la hiérarchie change pour
Google et les lecteurs d'écran, pas l'apparence */
h1,h2{font-size:1.4rem;margin-bottom:8px;display:inline-block;border-bottom:1px solid var(--stroke);padding-bottom:4px}
h3{font-size:1.1rem;margin-top:6px}
.sub{color:var(--txt-2);font-size:.9rem;line-height:1.55;margin-bottom:20px;font-weight:500}
/* ===== Form ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.grid.tight{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.field label{
display:block;font-size:.8rem;font-weight:800;color:var(--txt);
text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;
}
input,select,textarea{
width:100%;background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-sm);
color:var(--txt);padding:12px;font-size:.95rem;font-weight:600;font-family:inherit;outline:none;
transition:all .1s ease;box-shadow:var(--shadow);
}
input:focus,select:focus,textarea:focus{background:var(--field-focus);transform:translate(-1px,-1px);box-shadow:var(--shadow)}
textarea{resize:vertical;min-height:80px}
select option{background:var(--secondary);color:var(--txt)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* Questions à choix pair : grille 2 colonnes bien symétrique */
.chips.even{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips.even .chip{text-align:center;justify-content:center;display:flex;align-items:center}
.chip{
padding:8px 16px;border-radius:var(--r-sm);font-size:.85rem;font-weight:700;cursor:pointer;
background:var(--secondary);border:1px solid var(--stroke);color:var(--txt);
transition:all .1s ease;user-select:none;box-shadow:var(--shadow);
}
.chip:hover{background:var(--bg);transform:translate(-1px,-1px);box-shadow:var(--shadow)}
/* ⚠️ encre FONCÉE sur le jaune : en thème sombre, var(--txt) est presque
blanc et devenait illisible. C'est le défaut le plus visible qu'on ait eu. */
.chip.on{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow)}
.chip.on.warn{background:var(--accent-orange);color:var(--on-accent)}
/* ===== Accessibilité : focus clavier net & visible partout ===== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.chip:focus-visible{
outline:3px solid var(--accent-cyan);outline-offset:3px;border-radius:var(--r-sm);
}
.chip[role="button"]{cursor:pointer}
/* ===== Buttons ===== */
.btn{
border:1px solid var(--stroke);cursor:pointer;font-family:'Sora',sans-serif;font-weight:900;
font-size:1rem;text-transform:uppercase;padding:14px 28px;border-radius:var(--r-md);
transition:all .1s ease;display:inline-flex;align-items:center;gap:10px;
color:var(--primary-ink);background:var(--primary);box-shadow:var(--shadow);text-decoration:none;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow)}
.btn:disabled{opacity:.5;cursor:wait;transform:none;box-shadow:var(--shadow)}
.btn.ghost{background:var(--secondary);color:var(--txt);box-shadow:var(--shadow)}
.btn.sm{padding:10px 18px;font-size:.85rem;border-radius:var(--r-md);border-width:1px;box-shadow:var(--shadow)}
.btn.sm:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow)}
/* Le violet est CLAIR en thème sombre (#B49BF0) et FONCÉ en thème clair
(#6D4FC4) : le blanc fixe n'y tenait que d'un côté (2,36:1 en sombre).
--on-accent retourne avec le thème → 7,80:1 et 5,89:1.
Le « :not(.ghost) » est là pour la spécificité, voir .today-card .btn. */
.btn.violet:not(.ghost){background:var(--accent-violet);color:var(--on-accent)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* Actions de la vue 1 : empilées et pleine largeur sur téléphone
(le bureau les remet en ligne, voir le bloc ≥900 px). */
.go-acts{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.go-acts > .btn{width:100%;justify-content:center}
/* ===== Badges IA ===== */
.ai-badge{
display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:900;
padding:4px 10px;border-radius:0;border:1px solid var(--stroke);
text-transform:uppercase;vertical-align:middle;box-shadow:var(--shadow);
}
.ai-badge.gemini{background:var(--accent-violet);color:var(--on-accent)}
.ai-badge.groq{background:var(--accent-orange);color:var(--on-accent)}
/* ===== Loader ===== */
.loader{display:flex;align-items:center;gap:14px;padding:26px 8px;color:var(--txt);font-size:1rem;font-weight:700}
/* la mascotte seule du chargement standard */
.mascot.loader-solo{width:52px;height:52px;flex-shrink:0}
/* ===== Mascotte Acolyte : la Terre aux grands yeux ===== */
.mascot{width:46px;height:46px;flex-shrink:0;overflow:visible;animation:mBob 2.6s ease-in-out infinite}
.m-ocean{fill:#3E93C9}
.m-land{fill:#6FBE5C}
.m-rim{fill:none;stroke:#1C5A78;stroke-width:4}
.m-white{fill:#fff;stroke:#1C5A78;stroke-width:2.5}
.m-pupil{fill:#0C0C0C}
.m-shine{fill:#fff}
/* les pupilles balaient l'horizon : c'est la signature du personnage */
.m-pupils{animation:mLook 3.4s ease-in-out infinite}
/* …sauf sur appareil à souris : elles suivent le curseur (piloté en JS),
on coupe donc le balayage auto pour ne pas écraser le transform inline */
:root.eye-follow .m-pupils{animation:none;transition:transform .12s ease-out}
/* clignement : on écrase les yeux une fraction de seconde */
.m-eyes{animation:mBlink 4.8s ease-in-out infinite;transform-origin:50px 46px}
@keyframes mBob{
0%,100%{transform:translateY(0) rotate(-4deg)}
50%{transform:translateY(-5px) rotate(4deg)}
}
@keyframes mLook{
0%,100%{transform:translate(0,0)}
18%{transform:translate(-4.5px,1px)}
42%{transform:translate(4.5px,-1.5px)}
68%{transform:translate(2px,2.5px)}
}
@keyframes mBlink{
0%,92%,100%{transform:scaleY(1)}
95%{transform:scaleY(.12)}
}
/* on peut jouer avec elle */
.mascot{cursor:pointer}
/* saut au clic : remplace le balancement le temps de l'animation */
.mascot.m-hop{animation:mHop .62s cubic-bezier(.3,1.7,.5,1)}
@keyframes mHop{
0%{transform:translateY(0) rotate(0)}
25%{transform:translateY(-20px) rotate(-9deg) scale(1.08)}
48%{transform:translateY(0) rotate(7deg) scaleY(.86)}
68%{transform:translateY(-7px) rotate(-3deg)}
100%{transform:translateY(0) rotate(0)}
}
/* pirouette : réaction spontanée occasionnelle, pour la rendre imprévisible */
.mascot.m-spin{animation:mSpin .8s cubic-bezier(.4,.1,.3,1)}
@keyframes mSpin{0%{transform:rotate(0) scale(1)}55%{transform:rotate(300deg) scale(1.06)}100%{transform:rotate(360deg) scale(1)}}
/* petit sursaut de surprise */
.mascot.m-wiggle{animation:mWiggle .5s ease-in-out}
@keyframes mWiggle{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-4px) rotate(-10deg)}50%{transform:translateY(-2px) rotate(9deg)}80%{transform:translateY(-3px) rotate(-5deg)}}
.logo{overflow:visible} /* le globe peut coiffer le « i » sans être rogné */
/* mascotte plus grande quand elle occupe une barre de chargement pleine largeur */
.mascot.big{width:64px;height:64px}
/* ===== Scène de chargement : la mascotte survole les monuments du monde ===== */
.travel-scene{
position:relative;flex-shrink:0;
width:112px;height:58px;overflow:hidden;
border:1px solid var(--stroke);border-radius:var(--r-md);
/* ciel doux du jour, du haut clair vers l'horizon chaud */
background:linear-gradient(#dff1fb 0%, #eaf6fb 55%, #fdf3d6 100%);
}
:root[data-theme="dark"] .travel-scene{
background:linear-gradient(#0e1630 0%, #1a2140 55%, #2a2140 100%);
}
/* ciel étoilé qui scintille en mode nuit — une petite constellation */
:root[data-theme="dark"] .travel-scene::after{
content:'';position:absolute;top:7px;left:15px;width:2px;height:2px;border-radius:50%;
background:#fff;pointer-events:none;
box-shadow:18px 5px 0 #fff, 37px -1px 0 rgba(255,255,255,.7), 58px 7px 0 #fff,
78px 2px 0 rgba(255,255,255,.6), 30px 12px 0 rgba(255,255,255,.55), 92px 9px 0 #fff;
animation:twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.85}50%{opacity:.35}}
:root.no-motion .travel-scene::after{animation:none}
/* nuages qui dérivent lentement */
.cloud{
position:absolute;background:#fff;opacity:.85;border-radius:var(--r-lg);
height:6px;box-shadow:0 0 0 3px #fff;
animation:cloudDrift 14s linear infinite;
}
:root[data-theme="dark"] .cloud{background:#c9d2f0;box-shadow:0 0 0 3px #c9d2f0;opacity:.25}
.cloud.c1{top:9px;width:16px;animation-duration:16s}
.cloud.c2{top:20px;width:11px;animation-duration:11s;animation-delay:-5s;opacity:.6}
@keyframes cloudDrift{ from{transform:translateX(120px)} to{transform:translateX(-30px)} }
/* le sol sous les monuments */
.ground{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--stroke);opacity:.55}
/* la ligne d'horizon défile en boucle (2 copies → défilé sans couture) */
.mon-strip{
position:absolute;left:0;bottom:3px;display:flex;height:32px;
animation:monScroll 11s linear infinite;will-change:transform;
}
.mon-svg{height:32px;width:auto;display:block}
.mon{fill:var(--stroke);opacity:.62}
:root[data-theme="dark"] .mon{fill:#aeb6e0;opacity:.6}
.mon-hole{fill:#fdf3d6;opacity:.9} /* l'horloge de Big Ben : un trou clair */
:root[data-theme="dark"] .mon-hole{fill:#2a2140}
.mon-line{stroke:var(--stroke);stroke-width:1.6;fill:none;opacity:.62} /* bras de la torche */
:root[data-theme="dark"] .mon-line{stroke:#aeb6e0}
@keyframes monScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* la mascotte flotte au-dessus de l'horizon, léger balancement de voyage */
.travel-scene .mascot{
position:absolute;left:50%;top:4px;width:34px;height:34px;
margin-left:-17px;animation:mBob 2.6s ease-in-out infinite;
filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));
}
/* réduction des animations : tout se fige */
:root.no-motion .mon-strip,:root.no-motion .travel-scene .mascot,:root.no-motion .cloud{animation:none}
@media(prefers-reduced-motion:reduce){
.mon-strip,.travel-scene .mascot,.cloud{animation:none}
}
/* respect des préférences : plus d'animation si l'utilisateur n'en veut pas */
:root.no-motion .mascot,:root.no-motion .m-pupils,:root.no-motion .m-eyes{animation:none}
@media(prefers-reduced-motion:reduce){
.mascot,.m-pupils,.m-eyes{animation:none}
}
/* ancien loader carré — conservé pour le HTML statique non encore migré */
.orbit{width:36px;height:36px;position:relative;flex-shrink:0;border:1px solid var(--stroke);background:var(--primary)}
.orbit::before{
content:'';position:absolute;width:10px;height:10px;background:var(--accent-cyan);
border:1px solid var(--stroke);top:-6px;left:-6px;animation:boxWalk 2s infinite linear;
}
@keyframes boxWalk{
0%{top:-6px;left:-6px}
25%{top:-6px;left:calc(100% - 4px)}
50%{top:calc(100% - 4px);left:calc(100% - 4px)}
75%{top:calc(100% - 4px);left:-6px}
100%{top:-6px;left:-6px}
}
/* ===== Skeletons de chargement ===== */
.skel{background:linear-gradient(90deg,var(--secondary) 25%,rgba(0,0,0,.06) 37%,var(--secondary) 63%);background-size:400% 100%;animation:skelShimmer 1.3s ease infinite;border-radius:var(--r-sm);display:block}
:root[data-theme="dark"] .skel,html[data-theme="dark"] .skel{background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.14) 37%,rgba(255,255,255,.06) 63%);background-size:400% 100%}
@keyframes skelShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){ .skel{animation:none} }
:root.no-motion .skel{animation:none}
.skel-card{border:1px solid var(--stroke);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);background:var(--secondary)}
.skel-line{height:14px;margin:9px 0}
.skel-line.lg{height:22px;width:60%;margin-bottom:14px}
.skel-line.sm{width:40%}
.skel-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.skel-pill{height:24px;width:70px;border-radius:var(--r-lg)}
.skel-stat{height:96px;flex:1;border-radius:var(--r-md)}
.loader-msg{transition:opacity .2s ease}
/* Bulle de bande dessinée : la mascotte parle. Une petite queue pointe
vers elle, à gauche. */
.speech{
position:relative;flex:1;min-width:0;
background:var(--secondary);color:var(--txt);
border:1px solid var(--stroke);border-radius:var(--r-md);
padding:11px 15px;font-size:.92rem;font-weight:700;line-height:1.35;
box-shadow:var(--shadow);
animation:speechPop .28s cubic-bezier(.2,1.4,.4,1) both;
}
/* la queue : deux triangles (contour + remplissage) pointant vers la mascotte */
.speech::before,.speech::after{content:'';position:absolute;left:-13px;top:18px;
border-style:solid;border-width:8px 13px 8px 0;border-color:transparent}
.speech::before{border-right-color:var(--stroke)}
.speech::after{left:-9px;border-right-color:var(--secondary)}
@keyframes speechPop{from{opacity:0;transform:translateX(-6px) scale(.94)}to{opacity:1;transform:none}}
:root.no-motion .speech{animation:none}
/* ===== Destination cards ===== */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
/* ===== Comparatif côte à côte ===== */
.cmp-wrap{overflow-x:auto;border:1px solid var(--stroke);box-shadow:var(--shadow);border-radius:var(--r-md);-webkit-overflow-scrolling:touch;background:var(--secondary)}
.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:440px;font-size:.83rem}
.cmp th,.cmp td{padding:11px 13px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--stroke)}
.cmp td+td,.cmp th+th{border-left:1px solid var(--stroke)}
/* en-tête : le drapeau en grand, le nom dessous, bien centré */
.cmp thead th{
background:var(--primary);color:#101010;
font-family:'Sora',sans-serif;font-weight:900;text-transform:uppercase;font-size:.76rem;
cursor:pointer;text-align:center;border-bottom:1px solid var(--stroke);line-height:1.3;
transition:filter .1s ease;
}
.cmp thead th:hover{filter:brightness(.94)}
.cmp thead th:first-child{background:var(--secondary);cursor:default}
.cmp .cmp-flag{font-size:1.7rem;display:inline-block;margin-bottom:2px}
/* colonne des critères : étiquettes claires, collées à gauche au défilement */
.cmp tbody th[scope="row"]{
font-family:'Sora',sans-serif;font-weight:900;font-size:.72rem;
text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
color:var(--txt-2);background:var(--bg);position:sticky;left:0;z-index:1;
border-right:1px solid var(--stroke);
}
.cmp td{font-weight:600;color:var(--txt);line-height:1.4}
/* lignes alternées → l'œil suit la bonne ligne d'une colonne à l'autre */
.cmp tbody tr:nth-child(even) td{background:var(--bg)}
.cmp tbody tr:not(.cmp-actions):hover td{background:var(--card-hover)}
/* ligne « choisir » : détachée, mise en avant */
.cmp-actions td,.cmp-actions th{border-bottom:0;text-align:center;padding:14px 8px;border-top:1px solid var(--stroke)}
.cmp-actions td{background:var(--secondary) !important}
.cmp-choose{width:100%;justify-content:center;white-space:nowrap}
/* ===== Galerie « Mes voyages » ===== */
.gallery{display:flex;flex-direction:column;gap:10px}
.gal{
display:flex;align-items:center;gap:12px;
border:1px solid var(--stroke);background:var(--bg);border-radius:var(--r-md);
padding:10px 12px;box-shadow:var(--shadow);
}
/* Le drapeau. ⚠️ Windows ne dessine PAS les emoji drapeaux : il affiche les
deux lettres du pays (« FR », « IT »). On ne peut pas y échapper, alors on
l'assume : une pastille ronde où DEUX LETTRES tombent juste, et où un vrai
emoji tombe juste aussi. Sans elle, ces lettres flottaient sans forme. */
.gal-flag{
flex:none;width:38px;height:38px;display:grid;place-items:center;
border-radius:50%;background:var(--surface-2);border:1px solid var(--stroke);
font-family:'Sora',sans-serif;font-weight:900;font-size:.82rem;
letter-spacing:.02em;line-height:1;color:var(--txt-2);
overflow:hidden;
}
.gal-info{flex:1;min-width:0;display:flex;flex-direction:column}
.gal-info b{font-family:'Sora',sans-serif;font-weight:900;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-info span{font-size:.76rem;color:var(--txt-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-open{flex-shrink:0}
/* Retirer un voyage : discret par défaut, il ne doit pas concurrencer
« Rouvrir », mais reste une cible confortable au doigt (32 px). */
.gal-del{
flex-shrink:0;width:32px;height:32px;display:grid;place-items:center;padding:0;
background:transparent;color:var(--txt-2);cursor:pointer;
border:1px solid var(--stroke);border-radius:9px;font-size:.9rem;line-height:1;
}
.gal-del:hover{background:var(--danger);color:var(--on-accent);border-color:var(--danger)}
.gal-del:active{transform:translate(1px,1px)}
.gal-toggle{width:100%;justify-content:center;margin-top:4px}
/* Case d'acceptation de la politique + texte légal de la modale */
.privacy-check{display:flex;align-items:flex-start;gap:9px;margin-top:14px;
font-size:.82rem;font-weight:600;color:var(--txt-2);line-height:1.45;cursor:pointer}
.privacy-check input{width:auto;flex-shrink:0;margin-top:2px;box-shadow:none;transform:scale(1.2)}
.privacy-check a{color:var(--accent-orange);font-weight:800;text-decoration:underline;cursor:pointer}
.legal h4{font-family:'Sora',sans-serif;font-size:.9rem;margin:14px 0 4px}
.legal h4:first-child{margin-top:0}
.legal p{font-size:.84rem;line-height:1.55;color:var(--txt-2);margin:0}
/* ===== Case à cocher d'option (questionnaire) =====
Assez visible pour qu'on la remarque : encadrée comme une carte, elle
s'allume en jaune quand elle est cochée. Une option cachée au fond d'une
liste déroulante, personne ne la trouve. */
.field.wide{grid-column:1/-1}
/* ⚠️ Sélecteur `.field label.opt-check` et non `.opt-check` seul : la règle
`.field label` impose display:block ET text-transform:uppercase, et elle est
plus spécifique. Sans ce préfixe, la case tombait sur sa propre ligne et la
phrase d'explication s'affichait TOUT EN MAJUSCULES. */
.field label.opt-check{
display:flex;align-items:flex-start;gap:12px;cursor:pointer;
border:1px solid var(--stroke);border-radius:var(--r-md);
background:var(--secondary);box-shadow:var(--shadow);
padding:14px 16px;margin:0;
text-transform:none;letter-spacing:normal;font-size:1rem;
transition:background .12s ease;
}
.field label.opt-check input{
width:auto;flex:none;margin:2px 0 0;box-shadow:none;transform:scale(1.4);
accent-color:var(--primary);cursor:pointer;
}
.field label.opt-check b{
display:block;font-family:'Sora',sans-serif;font-weight:900;font-size:.92rem;
text-transform:none;letter-spacing:0;color:var(--txt);
}
.field label.opt-check em{
display:block;font-style:normal;font-size:.78rem;font-weight:600;
text-transform:none;letter-spacing:normal;
color:var(--txt-2);line-height:1.45;margin-top:4px;
}
/* cochée : l'aplat jaune de la marque, et l'encre repasse en foncé */
.field label.opt-check:has(input:checked){background:var(--primary)}
.field label.opt-check:has(input:checked) b,
.field label.opt-check:has(input:checked) em{color:#101010}
.field label.opt-check:active{transform:translateY(1px);box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){.field label.opt-check{transition:none}}
/* ===== Choix des pays de l'itinéraire ===== */
.pays-box{margin-top:12px}
.pays-box.hidden{display:none}
.pays-box > label{
display:block;font-size:.78rem;font-weight:800;color:var(--txt);
text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;
}
.pays-add{display:flex;gap:8px;align-items:stretch}
.pays-add input{flex:1;min-width:0}
.pays-add .btn{flex:none;white-space:nowrap}
/* Les pays choisis, sous forme d'étiquettes retirables. Le ✕ est un vrai
bouton : il doit être atteignable au doigt comme au clavier. */
.pays-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pays-tags:empty{display:none}
.pays-tag{
display:inline-flex;align-items:center;gap:7px;
background:var(--primary);color:#101010;
border:1px solid var(--stroke);box-shadow:var(--shadow);
border-radius:var(--r-md);padding:6px 8px 6px 11px;
font-family:'Sora',sans-serif;font-weight:900;font-size:.8rem;
}
.pays-tag .num{
background:#101010;color:var(--primary);
width:18px;height:18px;display:grid;place-items:center;
border-radius:50%;font-size:.66rem;flex:none;
}
.pays-tag button{
all:unset;cursor:pointer;width:20px;height:20px;
display:grid;place-items:center;flex:none;
border:2px solid #101010;border-radius:var(--r-sm);
font-weight:900;font-size:.72rem;line-height:1;color:#101010;
}
.pays-tag button:hover{background:#101010;color:var(--primary)}
/* ===== Affinage libre des propositions ===== */
.refine-bar{display:flex;gap:8px;flex-wrap:wrap}
.refine-inp{flex:1;min-width:180px;padding:11px 14px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--secondary);color:var(--txt);font-family:inherit;font-size:.9rem;font-weight:600}
.refine-inp:focus{outline:none;box-shadow:var(--shadow)}
.refine-bar .btn{flex-shrink:0}
/* ===== Onboarding première visite ===== */
.onboard{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55)}
.onboard[hidden]{display:none}
.onboard-card{position:relative;max-width:380px;width:100%;background:var(--secondary);border:1px solid var(--stroke);box-shadow:var(--shadow);border-radius:var(--r-lg);padding:34px 26px 22px;text-align:center;animation:pop .3s ease both}
.onboard-emoji{font-size:3.4rem;line-height:1;margin-bottom:12px}
.onboard-card h2{font-family:'Sora',sans-serif;font-weight:900;font-size:1.3rem;margin:0 0 8px}
.onboard-card p{color:var(--txt-2);font-size:.95rem;line-height:1.55;margin:0 0 22px}
.onboard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.onboard-dots{display:flex;gap:7px}
.onboard-dots i{width:9px;height:9px;border:1px solid var(--stroke);background:transparent;border-radius:50%;display:block}
.onboard-dots i.on{background:var(--primary)}
.onboard-foot .btn{flex-shrink:0}
.onboard-skip{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--txt-2);font-weight:700;font-size:.8rem;cursor:pointer;text-decoration:underline}
/* ===== Carte postale ===== */
.pc-preview{position:relative;border:1px solid var(--stroke);border-radius:var(--r-md);overflow:hidden;background:var(--bg);min-height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:var(--shadow)}
.pc-preview img{width:100%;display:block}
.pc-preview img:not([src]){display:none}
.pc-loading{position:absolute;font-family:'Sora',sans-serif;font-weight:800;color:var(--txt-2);font-size:.85rem}
.pc-group{margin-bottom:10px}
.pc-label{display:block;font-family:'Sora',sans-serif;font-weight:900;font-size:.72rem;text-transform:uppercase;color:var(--txt-2);margin-bottom:6px}
.pc-chips{display:flex;gap:8px;flex-wrap:wrap}
.pc-chip{
padding:8px 14px;border:1px solid var(--stroke);border-radius:var(--r-lg);
background:var(--secondary);color:var(--txt);font-weight:800;font-size:.82rem;cursor:pointer;
transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
/* Survol franc — plus marqué que celui de .chip : ces vignettes sont le seul
moyen de choisir un modèle, il faut qu'elles appellent le clic. */
.pc-chip:hover:not(.on){
background:var(--card-hover);border-color:var(--stroke-2);
transform:translateY(-2px);box-shadow:var(--shadow-lg);
}
.pc-chip.on{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow)}
/* La vignette déjà choisie répond aussi, sans changer de fond : sans ça elle
a l'air morte à côté des autres. */
.pc-chip.on:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.dest{
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-lg);
padding:20px;cursor:pointer;transition:all .15s ease;position:relative;overflow:hidden;
animation:pop .4s ease both;box-shadow:var(--shadow);
}
.dest:nth-child(2){animation-delay:.06s}.dest:nth-child(3){animation-delay:.12s}.dest:nth-child(4){animation-delay:.18s}
.dest:nth-child(5){animation-delay:.24s}.dest:nth-child(6){animation-delay:.3s}
.dest:hover{border-color:var(--stroke);transform:translate(-3px,-3px);box-shadow:var(--shadow);background:var(--card-hover)}
.dest .flag{font-size:2.2rem;margin-bottom:8px}
.dest h3{font-size:1.25rem;margin-bottom:4px}
.dest .country{font-size:.85rem;font-weight:700;color:var(--txt-2);margin-bottom:10px;text-transform:uppercase}
.dest p{font-size:.9rem;color:var(--txt-2);line-height:1.5;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tag{
font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:0;
background:var(--bg);border:1px solid var(--stroke);color:var(--txt);text-transform:uppercase;
}
.tag.money{background:var(--primary)}
.tag.cyan{background:var(--accent-cyan)}
.tag.ok{background:var(--ok);color:var(--on-accent)}
.tag.warn{background:var(--accent-orange);color:var(--on-accent)}
/* ===== Bandeau réseau (lent / hors-ligne) ===== */
.net-badge{
position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(76px + env(safe-area-inset-bottom, 0px));z-index:60;
max-width:calc(100% - 24px);padding:8px 14px;
font:800 .74rem 'Sora',sans-serif;text-align:center;
background:var(--accent-orange);color:var(--on-accent);
border:1px solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--shadow);
}
/* Hors-ligne : surface neutre. C'était du jaune sur un filet translucide,
donc illisible en thème clair. */
.net-badge.off{background:var(--surface-2);color:var(--txt);border-color:var(--stroke-2)}
.net-badge[hidden]{display:none}
/* ===== Prix réel automatique (tuile « Y aller ») ===== */
.rp-load,.rp-idle{font-size:.7rem;font-weight:700;color:var(--txt-2);font-style:italic}
.rp-ok{font-size:.72rem;font-weight:700;line-height:1.4;display:block;margin-top:2px}
.rp-ok em{font-weight:600;color:var(--txt-2);font-style:normal}
/* ===== Journal des nouveautés ===== */
/* mot d'accueil : la mascotte annonce la mise à jour */
.news-hello{
display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;
background:var(--primary);border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow);
}
.news-hello .mascot{width:44px;height:44px;flex-shrink:0}
.news-hello p{margin:0;font-weight:800;font-size:.88rem;line-height:1.45;color:#101010}
.news-intro{margin:0 0 16px;font-size:.84rem;font-weight:600;color:var(--txt-2);line-height:1.5}
/* frise : un rail vertical relie les versions entre elles */
.news-rail{position:relative;padding-left:22px}
.news-rail::before{
content:'';position:absolute;left:5px;top:8px;bottom:8px;
border-left:1px dashed var(--stroke);opacity:.5;
}
.news-entry{position:relative;margin-bottom:14px}
.news-entry:last-child{margin-bottom:0}
/* la pastille posée sur le rail */
.news-entry::before{
content:'';position:absolute;left:-22px;top:9px;
width:13px;height:13px;background:var(--secondary);
border:1px solid var(--stroke);border-radius:50%;
}
.news-entry.latest::before{background:var(--primary)}
.news-entry .news-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.news-v{
font-family:'Sora',sans-serif;font-weight:900;font-size:.72rem;
background:var(--secondary);color:var(--txt);
padding:2px 9px;border:1px solid var(--stroke);border-radius:var(--r-md);
}
.news-entry.latest .news-v{background:var(--primary);color:#101010}
.news-date{font-size:.72rem;font-weight:700;color:var(--txt-2)}
.news-new{
font-family:'Sora',sans-serif;font-weight:900;font-size:.6rem;text-transform:uppercase;
letter-spacing:.08em;background:var(--ok);color:var(--on-accent);
padding:3px 8px;border:1px solid var(--stroke);border-radius:var(--r-md);
}
.news-entry h4{margin:0 0 8px;font-size:1rem;line-height:1.3}
/* l'emoji sert de puce : pas de puce système en plus */
.news-items{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.news-items li{
display:flex;align-items:flex-start;gap:9px;
font-size:.87rem;line-height:1.5;font-weight:600;color:var(--txt-2);
}
.ni-emo{flex-shrink:0;font-size:.98rem;line-height:1.35;width:1.25em;text-align:center}
/* la dernière version est mise en avant, les précédentes s'effacent */
.news-entry.latest{
padding:13px 14px;background:var(--bg);
border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow);
}
.news-entry.latest::before{left:-22px;top:15px}
.news-entry.latest h4{font-size:1.06rem}
.news-entry.latest .news-items li{color:var(--txt)}
.news-entry:not(.latest){opacity:.86}
/* ===== Badge Product Hunt (bas du profil) ===== */
.ph-card{
position:relative;overflow:hidden;
margin:18px 0;padding:22px;
background:var(--primary);
border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow);
display:flex;flex-direction:column;gap:18px;
}
/* gros cœur en filigrane : occupe le vide à droite sans ajouter de texte */
.ph-card::after{
content:'💛';position:absolute;right:-14px;bottom:-26px;
font-size:8rem;line-height:1;opacity:.14;pointer-events:none;
transform:rotate(-12deg);
}
.ph-txt{position:relative;z-index:1;max-width:46ch}
/* fond jaune dans les deux thèmes : l'encre reste donc foncée */
.ph-eyebrow{
display:inline-block;margin-bottom:8px;padding:3px 10px;
font:900 .62rem 'Sora',sans-serif;text-transform:uppercase;letter-spacing:.1em;
background:#101010;color:var(--primary);border-radius:var(--r-md);
}
.ph-card h3{margin:0 0 8px;font-size:1.5rem;line-height:1.1;color:#101010}
.ph-card p{margin:0;font-size:.9rem;font-weight:600;line-height:1.55;color:#101010;opacity:.8}
/* le badge officiel est un SVG clair : on lui donne une plaque claire
pour qu'il reste lisible en « Vol de nuit » aussi */
.ph-link{
position:relative;z-index:1;
align-self:flex-start;display:inline-flex;padding:8px 10px;
background:var(--tab-on);border:1px solid var(--stroke);border-radius:var(--r-sm);
box-shadow:var(--shadow);transition:all .1s ease;
}
.ph-link:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.ph-link:active{transform:translateY(1px);box-shadow:var(--shadow)}
.ph-card img{display:block;width:250px;max-width:100%;height:auto}
/* ===== Mini-carte du trajet (en tête de la vue 3) ===== */
.trip-route{
margin:0 0 18px;padding:16px;
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow);
}
/* ligne du haut : mode + trajet, bien lisible */
.tr-top{display:flex;align-items:center;gap:12px}
.tr-mode{font-size:1.8rem;line-height:1;flex-shrink:0}
.tr-journey{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.tr-pt{font-family:'Sora',sans-serif;font-weight:900;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-arrow{font-weight:900;color:var(--txt-2);flex-shrink:0}
.tr-check{flex-shrink:0;font-weight:900;color:var(--ok);font-size:1.1rem}
/* les infos deviennent des étiquettes distinctes : même contenu, plus clair */
.tr-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.tr-fact{
font:800 .72rem 'Sora',sans-serif;color:var(--txt);white-space:nowrap;
padding:4px 10px;background:var(--bg);
border:1px solid var(--stroke);border-radius:var(--r-lg);
}
.tr-real{margin-top:10px;min-height:1em}
/* ===== Logements réels ===== */
.stay-list{margin-top:10px}
/* ===== Vue « Ton voyage » : onglets + panneaux ===== */
.plan-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.plan-head h3{margin:0}
/* conseil clé : une bande jaune impossible à rater */
.key-tip{
display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:13px 15px;
background:var(--primary);border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow);
}
.key-tip .kt-emo{font-size:1.4rem;line-height:1;flex-shrink:0}
.key-tip p{margin:0;color:#101010;font-weight:800;font-size:.92rem;line-height:1.45}
/* --- barre d'onglets --- */
/* La carte des détails : posée sous « Ton voyage », elle donne à la barre
d'onglets sa présence propre — c'est « la barre en dessous du voyage ». */
.sections-card{padding-top:8px}
.sections-title{margin:2px 0 14px}
.plan-tabs{
display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;
padding:6px;margin:0 0 18px;background:var(--bg);
border:1px solid var(--stroke);border-radius:var(--r-lg);
box-shadow:var(--shadow);
}
.plan-tabs::-webkit-scrollbar{display:none}
.plan-tab{
position:relative;flex:1;min-width:max-content;white-space:nowrap;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:11px 14px;border:2px solid transparent;border-radius:var(--r-md);background:transparent;
font:900 .8rem 'Sora',sans-serif;color:var(--txt-2);
transition:transform .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
}
.plan-tab span{font-size:1.1rem;line-height:1;transition:transform .15s ease}
.plan-tab:not(.on):hover{color:var(--txt);background:var(--secondary)}
.plan-tab:not(.on):hover span{transform:scale(1.15) translateY(-1px)}
.plan-tab.on{
background:var(--primary);color:#101010;
border-color:var(--stroke);box-shadow:var(--shadow);
transform:translate(-1px,-1px);
}
.plan-tab.on span{transform:scale(1.12)}
/* mobile : icône au-dessus du mot → les onglets tiennent sans défilement */
@media(max-width:460px){
.plan-tabs{gap:3px;padding:4px}
.plan-tab{flex-direction:column;gap:3px;padding:8px 3px;font-size:.62rem;min-width:0}
.plan-tab span{font-size:1.2rem}
}
.plan-panel{animation:pop .25s ease both}
.pan-intro{font-size:.82rem;font-weight:600;color:var(--txt-2);line-height:1.5;margin:0 0 14px}
.pan-sub{font-family:'Sora',sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
color:var(--txt-2);margin:18px 0 8px}
/* --- panneau Logement --- */
.pan-lead{padding:14px;background:var(--secondary);border:1px solid var(--stroke);
border-radius:var(--r-md);box-shadow:var(--shadow)}
.pan-lead h4{margin:0 0 5px;font-size:1.02rem}
.pan-lead p{margin:0;font-size:.9rem;line-height:1.5;color:var(--txt-2)}
.pan-price{margin-top:8px !important;font-weight:800;color:var(--txt) !important}
.etapes{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.etape{display:flex;flex-direction:column;padding:9px 11px;background:var(--bg);
border:1px solid var(--stroke);border-radius:9px}
.etape b{font-family:'Sora',sans-serif;font-size:.88rem}
.etape span{font-size:.76rem;color:var(--txt-2);font-weight:600}
/* --- panneau Programme : lignes de journée compactes --- */
.day-row{display:flex;align-items:flex-start;gap:11px;padding:13px;
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow)}
.day-num{flex-shrink:0;font-family:'Sora',sans-serif;font-weight:900;font-size:.78rem;
background:var(--primary);color:#101010;padding:4px 9px;border:1px solid var(--stroke);border-radius:8px}
.day-txt{flex:1;min-width:0}
.day-txt h4{margin:0;font-size:.98rem;line-height:1.3}
.day-txt p{margin:4px 0 0;font-size:.79rem;color:var(--txt-2);font-weight:600;line-height:1.45}
.day-base{display:inline-block;margin-top:4px;font-size:.66rem;font-weight:800;
background:var(--accent-cyan);color:#101010;padding:1px 7px;border:1.5px solid var(--stroke);border-radius:8px}
/* Actions d'une journée : deux boutons EXPLICITES sous le résumé, plutôt
que des icônes muettes serrées à droite qu'on ne comprenait pas. */
.day-acts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.day-act{
flex:1;min-width:140px;
display:inline-flex;align-items:center;justify-content:center;gap:7px;
font:800 .8rem 'Sora',sans-serif;color:var(--txt);cursor:pointer;
padding:9px 12px;background:var(--bg);
border:1px solid var(--stroke);border-radius:9px;box-shadow:var(--shadow);
transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.day-act:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow);background:var(--card-hover)}
.day-act:active{transform:translate(2px,2px);box-shadow:none}
/* .ico-btn : conservé pour les autres écrans qui l'utilisent encore */
.ico-btn{width:36px;height:36px;display:grid;place-items:center;cursor:pointer;font-size:1rem;
background:var(--bg);border:1px solid var(--stroke);border-radius:9px;box-shadow:var(--shadow)}
.ico-btn:active{transform:translate(2px,2px);box-shadow:none}
.day-block{margin-bottom:18px}
/* --- panneau Budget & infos --- */
.info-card{padding:13px 15px;margin-bottom:11px;background:var(--secondary);
border:1px solid var(--stroke);border-radius:var(--r-md);box-shadow:var(--shadow)}
.ic-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.ic-head span{font-size:1.2rem;line-height:1}
.ic-head h4{margin:0;font-size:.95rem;flex:1}
.ic-head b{font-family:'Sora',sans-serif;font-size:.95rem}
.info-card p{margin:0;font-size:.87rem;line-height:1.5;color:var(--txt-2)}
.ic-note{margin-top:5px !important;font-size:.78rem !important;opacity:.85}
.ic-todo{margin-top:5px !important;font-weight:700;color:var(--txt) !important}
.info-card .divider{display:none}
.info-card + h3{margin-top:16px}
/* ===== Onglet Transport clarifié ===== */
.transport-choice{
display:flex;gap:14px;align-items:flex-start;
padding:16px;margin-bottom:14px;
background:var(--primary);color:#101010;
border:1px solid var(--stroke);border-radius:var(--r-md);box-shadow:var(--shadow);
}
.tc-ico{font-size:2.2rem;line-height:1;flex-shrink:0}
.tc-body{flex:1;min-width:0}
.tc-body h4{margin:0;font-size:1.15rem}
.tc-facts{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}
.tc-fact{font:800 .74rem 'Sora',sans-serif;background:#101010;color:var(--primary);padding:4px 10px;border-radius:var(--r-lg);white-space:nowrap}
.tc-why{margin:6px 0 0;font-size:.9rem;font-weight:600;line-height:1.5}
.carbon-card .carbon-big{margin:0;font-size:1rem}
.carbon-card .carbon-big strong{font-family:'Sora',sans-serif;font-size:1.15rem}
.carbon-card .carbon-big span{font-size:.8rem;color:var(--txt-2);font-weight:600}
/* ===== Cartes restaurant ===== */
.resto-card{
margin-bottom:12px;padding:14px;
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow);
}
.rc-top{display:flex;align-items:flex-start;gap:11px}
.rc-emo{font-size:1.6rem;line-height:1;flex-shrink:0}
.rc-id{flex:1;min-width:0}
.rc-id h4{margin:0;font-size:1rem;line-height:1.25}
.rc-meta{font-size:.76rem;font-weight:600;color:var(--txt-2);margin-top:3px}
.rc-price{
flex-shrink:0;font:900 .76rem 'Sora',sans-serif;
background:var(--primary);color:#101010;padding:5px 10px;
border:1px solid var(--stroke);border-radius:var(--r-md);text-align:center;max-width:130px;line-height:1.25;
}
.rc-dish{margin:10px 0 0;font-size:.87rem;line-height:1.45}
.rc-why{margin:5px 0 0;font-size:.85rem;line-height:1.5;color:var(--txt-2)}
.rc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
/* ===== Cartes de logement ===== */
.hotel-card{
position:relative;margin-bottom:12px;padding:14px;
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow);
}
.hotel-card.best{box-shadow:var(--shadow);border-width:1px}
.hc-badge{
position:absolute;top:-11px;left:12px;
font:900 .62rem 'Sora',sans-serif;text-transform:uppercase;letter-spacing:.04em;
background:var(--ok);color:var(--on-accent);padding:3px 9px;border:1px solid var(--stroke);border-radius:var(--r-md);
}
.hc-top{display:flex;align-items:flex-start;gap:11px}
.hc-ico{font-size:1.7rem;line-height:1;flex-shrink:0}
.hc-id{flex:1;min-width:0}
.hc-id h4{margin:0;font-size:1rem;line-height:1.25}
.hc-meta{font-size:.76rem;font-weight:600;color:var(--txt-2);margin-top:3px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hc-note{white-space:nowrap}
.hc-stars{color:var(--accent-orange);letter-spacing:1px}
.hc-price{flex-shrink:0;font-family:'Sora',sans-serif;font-weight:900;font-size:1rem;
background:var(--primary);color:#101010;padding:5px 10px;border:1px solid var(--stroke);border-radius:var(--r-md);white-space:nowrap}
.hc-price small{font-weight:700;font-size:.62rem;opacity:.75}
.hc-why{margin:10px 0 0;font-size:.86rem;line-height:1.5;color:var(--txt-2)}
.hc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hc-acts .btn{flex:1;min-width:130px;justify-content:center}
/* ===== Onglet Budget amélioré ===== */
.budget-head{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;
padding:16px;background:var(--primary);color:#101010;
border:1px solid var(--stroke);border-radius:var(--r-md);box-shadow:var(--shadow);
margin-bottom:16px;
}
.budget-total{display:flex;flex-direction:column;line-height:1}
.bt-num{font-family:'Sora',sans-serif;font-weight:900;font-size:1.9rem}
.bt-lbl{font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75;margin-top:3px}
.budget-chips{display:flex;flex-wrap:wrap;gap:7px}
.budget-chip{font:800 .74rem 'Sora',sans-serif;background:#101010;color:var(--primary);
padding:5px 11px;border-radius:var(--r-lg);white-space:nowrap}
.budget-breakdown{margin-bottom:4px}
.budget-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 0}
.budget-row .br-ico{font-size:1.1rem}
.br-label{font-weight:700;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-amount{font-family:'Sora',sans-serif;font-weight:900;font-size:.82rem;white-space:nowrap}
.br-bar{grid-column:1 / -1;height:8px;background:var(--bg);border:1px solid var(--stroke);border-radius:var(--r-sm);overflow:hidden}
.br-bar i{display:block;height:100%;background:var(--accent-cyan);border-right:1px solid var(--stroke);min-width:3px;transition:width .4s ease}
/* ===== Tableau partagé : votes + commentaires par jour ===== */
/* les trois réactions ont besoin d'air : collées, on ne distingue plus
où finit un bouton et où commence le suivant */
.day-collab{display:flex;align-items:center;gap:14px;margin:8px 0 14px;padding-left:4px;flex-wrap:wrap}
.cvote{
display:inline-flex;align-items:center;gap:7px;
font:800 .78rem 'Sora',sans-serif;color:var(--txt);
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-lg);
padding:7px 15px;cursor:pointer;box-shadow:var(--shadow);
transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.cvote:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow);background:var(--card-hover)}
.cvote:active{transform:translate(2px,2px);box-shadow:none}
.cvote.on{background:var(--primary);color:#101010}
.collab-hint{font-size:.68rem;font-weight:700;color:var(--txt-2);margin-left:auto;padding-right:4px}
.day-comments{
margin:0 0 12px;padding:12px;border:1px solid var(--stroke);border-radius:var(--r-md);
background:var(--bg);animation:pop .25s ease both;
}
.day-comments[hidden]{display:none}
.com-list p{margin:0 0 7px;font-size:.85rem;line-height:1.45}
.com-list b{font-family:'Sora',sans-serif;font-size:.78rem;background:var(--primary);color:#101010;padding:1px 7px;border:1.5px solid var(--stroke);border-radius:9px;margin-right:5px}
.com-bar{display:flex;gap:8px;margin-top:9px}
.com-inp{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--stroke);border-radius:8px;background:var(--secondary);color:var(--txt);font:600 .85rem inherit}
.com-inp:focus{outline:none;box-shadow:var(--shadow)}
/* ===== Carte du jour (image hors-ligne) ===== */
.daymap{
display:block;width:100%;margin:4px 0 12px;
border:1px solid var(--stroke);border-radius:var(--r-md);box-shadow:var(--shadow);
}
/* ===== Détail horaire d'une journée (déplié sous le jour) ===== */
.day-detail:not(:empty){
margin:4px 0 18px;padding:18px 14px 2px;
border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--bg);
animation:pop .3s ease both;
}
/* ===== Carte « Aujourd'hui » (mode Jour J) ===== */
.today-card{background:var(--primary);box-shadow:var(--shadow)}
.today-card h3,.today-card h4{color:#101010}
.today-card .hint,.today-card .sub{color:rgba(16,16,16,.78)}
/* ⚠️ « :not(.ghost) » n'est pas là pour filtrer : il est là pour la
SPÉCIFICITÉ. Le bouton de cette carte est posé sur une surface SOMBRE au
milieu du jaune, et il doit garder l'encre claire. Sans ce petit poids en
plus, la règle groupée de fin de fichier (« .btn:not(.ghost) », même
spécificité mais plus bas) lui imposait l'encre foncée : 1,08:1, invisible. */
.today-card .btn:not(.ghost){background:var(--secondary);color:var(--txt)}
.timeline{position:relative;padding-left:30px}
.timeline::before{content:'';position:absolute;left:10px;top:6px;bottom:6px;width:4px;background:var(--stroke)}
.tl-item{position:relative;padding:0 0 24px 16px;animation:pop .35s ease both}
.tl-item::before{
content:'';position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:0;
background:var(--accent-cyan);border:1px solid var(--stroke);
}
.tl-item:nth-child(2n)::before{background:var(--accent-violet)}
.tl-time{
font-family:'Sora',sans-serif;font-weight:900;font-size:.9rem;
text-transform:uppercase;background:var(--primary);display:inline-block;
padding:2px 6px;border:1px solid var(--stroke);margin-bottom:4px;
}
.tl-title{font-weight:800;font-size:1.1rem;margin:4px 0 6px}
.tl-desc{font-size:.9rem;color:var(--txt-2);line-height:1.5}
.tl-loc{
display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.8rem;font-weight:800;
color:var(--txt);cursor:pointer;background:var(--secondary);border:1px solid var(--stroke);
padding:6px 12px;border-radius:var(--r-sm);transition:all .1s ease;text-decoration:none;
box-shadow:var(--shadow);
}
.tl-loc:hover{background:var(--accent-orange);color:var(--on-accent);transform:translate(-1px,-1px);box-shadow:var(--shadow)}
/* ===== Journée modifiable : actions et formulaire d'un moment ===== */
.tl-acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.tl-act{
width:34px;height:34px;display:grid;place-items:center;padding:0;
background:var(--secondary);color:var(--txt);cursor:pointer;
border:1px solid var(--stroke);border-radius:8px;
font-size:.82rem;line-height:1;box-shadow:var(--shadow);
}
.tl-act:active{transform:translate(2px,2px);box-shadow:none}
/* désactivé = premier ou dernier moment : on le montre, sans le cacher */
.tl-act[disabled]{opacity:.3;cursor:not-allowed;box-shadow:none}
.tl-act.tl-danger:hover:not([disabled]){background:var(--danger);color:var(--on-accent);border-color:var(--danger)}
.tl-add{margin-left:30px}
.tl-item.tl-editing{padding-bottom:16px}
.tl-form{
border:1px solid var(--stroke);border-radius:var(--r-md);
background:var(--secondary);box-shadow:var(--shadow);padding:12px;
}
.tl-form label{
display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;
letter-spacing:.04em;color:var(--txt-2);margin-bottom:9px;
}
.tl-form input,.tl-form select,.tl-form textarea{
display:block;width:100%;margin-top:4px;
padding:9px 11px;font-family:inherit;font-size:.9rem;font-weight:600;
background:var(--bg);color:var(--txt);
border:1px solid var(--stroke);border-radius:var(--r-sm);
}
.tl-form textarea{resize:vertical;line-height:1.45}
.tl-form input:focus,.tl-form select:focus,.tl-form textarea:focus{
outline:none;background:var(--field-focus);box-shadow:var(--shadow);
}
/* heure et genre côte à côte : ce sont deux champs courts */
.tl-fr{display:flex;gap:10px}
.tl-fr label{flex:1;min-width:0}
.tl-fbtn{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:420px){ .tl-fr{flex-direction:column;gap:0} }
/* ===== Lists ===== */
.item{
display:flex;gap:14px;padding:16px;border-radius:var(--r-md);background:var(--secondary);
border:1px solid var(--stroke);margin-bottom:12px;align-items:flex-start;
animation:pop .35s ease both;box-shadow:var(--shadow);
}
.item .emo{font-size:1.8rem;flex-shrink:0}
.item h4{font-size:1.05rem;font-weight:800;margin-bottom:4px;font-family:'Sora',sans-serif;text-transform:uppercase}
.item p{font-size:.9rem;color:var(--txt-2);line-height:1.5}
.item .side{margin-left:auto;text-align:right;flex-shrink:0}
/* ===== Checklist valise ===== */
.check{
display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);
background:var(--secondary);border:1px solid var(--stroke);margin-bottom:8px;cursor:pointer;
font-size:.9rem;font-weight:700;transition:all .1s ease;user-select:none;
box-shadow:var(--shadow);
}
.check:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow)}
.check .box{
width:22px;height:22px;border-radius:0;border:1px solid var(--stroke);background:var(--secondary);
flex-shrink:0;display:grid;place-items:center;font-size:.85rem;color:var(--txt);
font-weight:900;transition:all .1s ease;
}
.check.done .box{background:var(--primary)}
.check.done{opacity:.6;background:var(--bg)}
.check.done span{text-decoration:line-through}
.progress{
height:14px;border-radius:0;background:var(--secondary);
border:1px solid var(--stroke);overflow:hidden;margin:12px 0 20px;
}
.progress i{
display:block;height:100%;background:var(--primary);transition:width .3s;
box-shadow:inset -3px 0 0 0 var(--stroke); /* fix : pas de trait noir visible à 0% */
}
/* ===== Phrases ===== */
.phrase{
padding:14px;border-radius:var(--r-md);background:var(--secondary);border:1px solid var(--stroke);
margin-bottom:10px;animation:pop .3s ease both;box-shadow:var(--shadow);
}
.phrase .fr{font-size:.85rem;font-weight:700;color:var(--txt-2);margin-bottom:4px}
.phrase .loc{font-family:'Sora',sans-serif;font-weight:900;font-size:1.15rem;color:var(--txt)}
.phrase .pron{font-size:.8rem;color:var(--accent-orange);font-weight:700;font-style:italic;margin-top:4px}
/* ===== Budget ===== */
.bud-bar{display:flex;height:22px;border-radius:0;overflow:hidden;border:1px solid var(--stroke);margin:16px 0 12px}
.bud-bar i{display:block;height:100%;border-right:1px solid var(--stroke)}
.bud-bar i:last-child{border-right:none}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;font-weight:700;color:var(--txt);margin-bottom:16px}
.legend b{font-weight:900}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:0;border:1px solid var(--stroke);margin-right:6px;vertical-align:middle}
.spend-total{font-family:'Sora',sans-serif;font-weight:900;font-size:1.8rem;color:var(--txt);text-transform:uppercase}
.spend-del{margin-left:auto;color:var(--danger);cursor:pointer;font-size:1.1rem;font-weight:bold;opacity:.8;flex-shrink:0}
.spend-del:hover{opacity:1;transform:scale(1.1)}
/* ===== Accordion (semaine) ===== */
.acc{
border:1px solid var(--stroke);border-radius:var(--r-md);margin-bottom:12px;
overflow:hidden;background:var(--secondary);box-shadow:var(--shadow);
}
.acc-head{
padding:16px;cursor:pointer;display:flex;align-items:center;gap:10px;
font-family:'Sora',sans-serif;font-weight:900;font-size:1rem;text-transform:uppercase;
user-select:none;background:var(--primary);border-bottom:1px solid var(--stroke);
}
.acc:not(.open) .acc-head{border-bottom:none} /* fix : double trait quand fermé */
.acc-head .arr{margin-left:auto;transition:.25s;font-weight:900}
.acc.open .acc-head .arr{transform:rotate(90deg)}
.acc-body{display:none;padding:16px}
.acc.open .acc-body{display:block}
/* ===== Map ===== */
.map-box{
border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke);
height:380px;background:#fff;box-shadow:var(--shadow);
}
.map-box iframe{width:100%;height:100%;border:0}
/* ===== Sub-tabs ===== */
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding:4px}
.subtab .cnt{font-size:.68rem;font-weight:900;opacity:.75;margin-left:2px}
.subtab{
padding:10px 18px;border-radius:var(--r-sm);font-size:.85rem;font-weight:800;cursor:pointer;
background:var(--secondary);border:1px solid var(--stroke);color:var(--txt);
text-transform:uppercase;transition:all .1s ease;user-select:none;
box-shadow:var(--shadow);
}
.subtab.on{background:var(--primary);transform:translate(-1px,-1px);box-shadow:var(--shadow)}
/* ===== Modal ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;place-items:center;z-index:50;padding:18px}
.overlay.show{display:grid}
.modal{
width:min(480px,100%);background:var(--secondary);border:1px solid var(--stroke);
border-radius:var(--r-lg);padding:26px;animation:pop .3s ease;
max-height:88vh;overflow-y:auto;box-shadow:var(--shadow);
}
.modal a{color:var(--accent-orange);font-weight:bold}
/* ===== Concierge chat ===== */
.fab{
position:fixed;right:20px;bottom:20px;z-index:40;width:60px;height:60px;border-radius:0;
border:1px solid var(--stroke);cursor:pointer;font-size:1.8rem;color:var(--txt);
background:var(--primary);box-shadow:var(--shadow);transition:all .1s ease;
}
.fab:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.fab:active{transform:translateY(1px);box-shadow:var(--shadow)}
.chatbox{
position:fixed;right:16px;bottom:90px;z-index:45;width:min(380px,calc(100vw - 32px));
height:min(520px,70vh);display:none;flex-direction:column;
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-lg);
box-shadow:var(--shadow);overflow:hidden;animation:pop .25s ease;
}
.chatbox.show{display:flex}
.chat-head{
padding:16px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;gap:10px;
font-family:'Sora',sans-serif;font-weight:900;text-transform:uppercase;font-size:.95rem;
background:var(--primary);
}
.chat-head .x{margin-left:auto;cursor:pointer;color:var(--primary-ink);font-size:1.3rem;font-weight:900}
.chat-log{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.msg{
max-width:85%;padding:12px 14px;border:1px solid var(--stroke);border-radius:var(--r-md);
font-size:.88rem;font-weight:600;line-height:1.5;white-space:pre-wrap;
animation:pop .25s ease;box-shadow:var(--shadow);
}
.msg.me{align-self:flex-end;background:var(--primary)}
.msg.ai{align-self:flex-start;background:var(--secondary)}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--stroke);background:var(--secondary)}
.chat-in input{flex:1;box-shadow:none}
.chat-in button{
width:46px;border-radius:var(--r-sm);border:1px solid var(--stroke);cursor:pointer;
font-size:1.1rem;background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow);
}
/* ===== Toast ===== */
#toast{
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);z-index:60;
background:var(--primary);border:1px solid var(--stroke);padding:14px 24px;border-radius:var(--r-md);
font-size:.9rem;font-weight:800;transition:.3s;box-shadow:var(--shadow);
max-width:90vw;
}
#toast.show{transform:translateX(-50%) translateY(0)}
.hidden{display:none !important}
/* l'animation d'entrée des vues est gérée plus bas (viewSlide) */
.divider{height:4px;background:var(--stroke);margin:24px 0}
.hint{font-size:.8rem;font-weight:600;color:var(--txt-2);margin-top:8px;line-height:1.5}
.err{
color:var(--on-accent);font-weight:700;font-size:.85rem;padding:14px;
border:1px solid var(--stroke);background:var(--danger);border-radius:var(--r-md);
box-shadow:var(--shadow);
}
/* ===== Mini-jeu « Défends la Terre » ===== */
.game-modal{width:min(720px,100%)}
.game-start-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* panneau de personnalisation */
.game-custom{
position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
align-items:center;justify-content:center;padding:22px;text-align:center;
background:rgba(11,16,38,.92);color:#fff;overflow-y:auto;
}
.game-custom[hidden]{display:none}
.game-custom h3{margin:0;font-size:1.15rem;color:#fff}
.gc-hint{margin:0;font-size:.84rem;color:#cfd6ef}
.gc-group{width:100%;max-width:400px}
.gc-label{display:block;font:900 .78rem 'Sora',sans-serif;margin:0 0 6px;text-align:left}
.gc-swatches{display:flex;flex-wrap:wrap;gap:8px}
.gc-swatch{
display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
background:rgba(255,255,255,.08);border:2px solid transparent;border-radius:var(--r-md);
padding:8px 10px;color:#fff;font:700 .64rem 'Sora',sans-serif;
}
.gc-swatch:hover{background:rgba(255,255,255,.16)}
.gc-swatch.on{border-color:var(--primary);background:rgba(255,230,0,.18)}
.gc-swatch svg{display:block}
.game-hud{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
font:900 .9rem 'Sora',sans-serif;margin:0 0 8px}
/* multiplicateur de combo : n'apparaît qu'au-delà de ×1 */
.game-combo{
background:var(--primary);color:#101010;padding:2px 10px;border-radius:var(--r-lg);
border:1px solid var(--stroke);font-size:.82rem;
animation:comboPop .25s cubic-bezier(.2,1.6,.4,1) both;
}
.game-combo[hidden]{display:none}
@keyframes comboPop{from{transform:scale(.6)}to{transform:scale(1)}}
.game-tip{font-size:.8rem;opacity:.85}
.game-best{font:900 .88rem 'Sora',sans-serif;color:var(--primary)}
.game-best[hidden]{display:none}
.game-stage{position:relative;border:1px solid var(--stroke);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);background:#0b1026}
#gameCanvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}
.game-over,.game-start{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;
background:rgba(11,16,38,.86);color:#fff;
}
.game-over[hidden],.game-start[hidden]{display:none}
.game-over h3{margin:0;font-size:1.2rem;color:#fff}
.game-over p,.game-start p{margin:0;font-size:.92rem;line-height:1.5;color:#dfe4f5}
.game-lb{width:100%;max-width:300px;max-height:150px;overflow-y:auto}
.game-lb-title{margin:0 0 6px;font-size:.85rem;color:#fff}
.game-lb-row{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:8px;font-weight:700;font-size:.82rem}
.game-lb-row:nth-child(even){background:rgba(255,255,255,.06)}
.game-lb-row.me{background:var(--primary);color:#101010}
.game-lb-rank{width:20px;font-weight:900;text-align:center}
.game-lb-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-lb-score{font-weight:900}
.err-msg{margin:0 0 10px;line-height:1.4}
.err-acts{display:flex;flex-wrap:wrap;gap:10px}
/* surface sombre, encre claire — « :not(.ghost) » pour la spécificité */
.err .btn:not(.ghost){color:var(--txt);background:var(--secondary);flex-shrink:0}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ===== Transitions entre vues : un glissement doux plutôt qu'un saut ===== */
@keyframes viewSlide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes viewFade{from{opacity:0}to{opacity:1}}
.view:not(.hidden),
#catProfile:not(.hidden),
#catTrip:not(.hidden){animation:viewSlide .3s cubic-bezier(.2,.7,.3,1) both}
/* la carte est un calque fixe plein écran : un simple fondu (pas de glissement,
sinon débordement horizontal) */
#catMap:not(.hidden){animation:viewFade .3s ease both}
:root.no-motion .view,:root.no-motion #catProfile,:root.no-motion #catTrip,:root.no-motion #catMap{animation:none}
@media(prefers-reduced-motion:reduce){
.view,#catProfile,#catTrip,#catMap{animation:none}
}
@media (prefers-reduced-motion: reduce){
*{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
@media(max-width:640px){
.card{padding:18px}
.map-box{height:300px}
.logo{font-size:1.35rem}
}
/* ============================================================
FIXES DÉBORDEMENTS — cases qui dépassent & textes coupés
============================================================ */
/* Les ombres dures et le transform des steps étaient coupés par overflow-x:auto */
.steps{padding:4px 4px 10px;margin:-4px -4px 20px}
/* Textes longs en MAJUSCULES : autoriser la césure partout */
h2{max-width:100%;overflow-wrap:break-word}
h3,h4,p,.tl-title,.tl-desc,.check span{overflow-wrap:break-word;hyphens:none}
.card,.dest{overflow-wrap:break-word;word-break:normal}
/* Tags : les longs libellés (budget, transport conseillé…) passent à la ligne au lieu de déborder */
.tag{white-space:normal;overflow-wrap:anywhere;max-width:100%;line-height:1.35;text-align:left}
/* Items : le bloc prix à droite (flex-shrink:0) poussait hors de la carte sur mobile */
.item{flex-wrap:wrap}
.item > div{min-width:0}
.item .side{flex-shrink:1;max-width:100%;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* Boutons : libellés longs en majuscules → retour à la ligne propre */
.btn{max-width:100%;white-space:normal;line-height:1.3;text-align:left}
.row > *{max-width:100%}
/* Boarding pass : route + méta ne débordent plus */
.pass-in > div{min-width:0;max-width:100%}
/* Formulaires : les champs ne forcent plus la largeur de leur colonne */
input,select,textarea{min-width:0}
.grid > .field{min-width:0}
.chips .chip{max-width:100%;overflow-wrap:anywhere}
.acc-head{flex-wrap:wrap}
/* Toast : messages d'erreur longs lisibles (plus de majuscules forcées) */
#toast{text-transform:none;overflow-wrap:break-word}
.legend span{overflow-wrap:anywhere}
/* iOS Safari : input date/datetime vide = boîte géante → hauteur fixée */
input[type="date"],input[type="datetime-local"]{
-webkit-appearance:none;appearance:none;
min-height:50px;max-height:50px;
display:flex;align-items:center;line-height:1.2;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value{text-align:left;margin:0}
/* Mobile : tailles resserrées pour que rien ne sorte de l'écran */
@media(max-width:640px){
h2{font-size:1.15rem}
h3{font-size:.98rem}
.item{padding:13px;gap:10px}
.item .emo{font-size:1.4rem}
.item h4{font-size:.95rem}
.btn{padding:12px 18px;font-size:.9rem}
.btn.sm{padding:9px 13px;font-size:.78rem}
.wrap{padding:12px 12px 130px}
.card{box-shadow:var(--shadow)}
.tag{font-size:.64rem;padding:3px 8px}
.spend-total{font-size:1.4rem}
.toggle{width:100%}
.toggle button{flex:1;padding:8px 10px;font-size:.78rem}
/* Onglets : grille de 3 colonnes égales → toujours dans l'écran, jamais coupés */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;margin:0 0 18px;padding:4px}
.step{min-width:0;width:100%;justify-content:center;padding:10px 4px;font-size:.66rem;gap:5px;letter-spacing:0}
.step .n{width:18px;height:18px;font-size:.6rem}
/* Concierge : plus petit, dans le coin, ne masque plus le formulaire */
.fab{width:48px;height:48px;font-size:1.25rem;right:10px;bottom:10px}
.chatbox{bottom:66px;right:8px}
}
/* ============================================================
CATÉGORIES (nav basse) · AUTH · PROFIL
============================================================ */
.catnav{
position:fixed;left:0;right:0;bottom:0;z-index:38;
display:grid;grid-template-columns:repeat(4, 1fr); /* 4 boutons EXACTEMENT égaux */
gap:8px;
width:100%;
background:var(--secondary);
border-top:1px solid var(--stroke);
border-radius:var(--r-lg) 22px 0 0; /* coins du haut arrondis */
padding:9px 10px 9px;
box-shadow:0 -6px 0 rgba(0,0,0,.06), 0 -1px 0 var(--stroke);
}
.catnav button{
position:relative;
width:100%;min-width:0; /* aucune colonne ne peut s'élargir */
border:2px solid transparent;border-radius:var(--r-md);
background:transparent;
font-family:'Sora',sans-serif;font-weight:800;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;
padding:7px 4px 6px;cursor:pointer;color:var(--txt-2);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
transition:transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease, border-color .12s ease;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.catnav button .ico{
font-size:1.35rem;line-height:1;
display:flex;align-items:center;justify-content:center;
transition:transform .12s ease;
}
.catnav button:not(.on):hover{color:var(--txt);background:var(--bg)}
.catnav button:active{transform:scale(.93)}
.catnav button.on{
background:var(--primary);
border-color:var(--stroke);
box-shadow:var(--shadow);
}
.catnav button.on .ico{transform:translateY(-1px) scale(1.1)}
/* Plan clé en main : 3 stats compactes */
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plan-stat{border:1px solid var(--stroke);background:var(--secondary);padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:104px;overflow:hidden}
.plan-stat .k{font-family:'Sora',sans-serif;font-weight:800;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-2)}
.plan-stat .v{font-family:'Sora',sans-serif;font-weight:900;font-size:1rem;text-transform:uppercase;margin-top:2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;hyphens:none}
.plan-stat .s{font-size:.74rem;font-weight:600;color:var(--txt-2);margin-top:2px;line-height:1.3;overflow-wrap:break-word}
.plan-stat.wx{flex-direction:row;align-items:center;gap:10px}
.plan-stat.wx canvas{flex:0 0 48px;width:48px;height:48px}
.plan-stat.wx>div{min-width:0}
/* Actions du profil : titre en haut, bouton pleine largeur en dessous */
.item.act{flex-direction:column;align-items:stretch;gap:12px}
.item.act .head{display:flex;align-items:center;gap:12px}
.item.act h4{overflow-wrap:normal;word-break:keep-all;margin:0}
.item.act .emo{margin:0}
.item.act .side{margin:0;width:100%;text-align:left;display:block}
.item.act .side .btn{width:100%;justify-content:center;white-space:normal}
/* Carte plein écran : recouvre tout sauf la barre du bas */
#catMap.hidden{display:none}
/* ===== États vides (carte + profil) ===== */
.cat-empty{
display:flex;align-items:center;justify-content:center;
border:1px solid var(--stroke);border-radius:var(--r-lg);
background:var(--secondary);box-shadow:var(--shadow);
min-height:min(58vh,520px);
}
.cat-empty[hidden]{display:none}
/* état vide : on cache les deux cartes, pas des morceaux */
#catMap.empty .map-head,#catMap.empty .map-card{display:none}
.cat-empty-card{text-align:center;max-width:330px;padding:24px}
.cat-empty-card .ce-emoji{font-size:3rem;line-height:1;margin-bottom:10px}
.cat-empty-card h3{font-family:'Sora',sans-serif;font-weight:900;font-size:1.1rem;margin:0 0 6px;text-transform:uppercase}
.cat-empty-card p{color:var(--txt-2);font-size:.9rem;margin:0 0 16px;line-height:1.5}
.cat-empty-banner{
display:flex;align-items:center;gap:12px;
border:1px solid var(--stroke);background:var(--primary);color:#101010;
box-shadow:var(--shadow);border-radius:var(--r-md);
padding:12px 14px;margin-bottom:14px;
}
.cat-empty-banner[hidden]{display:none}
.cat-empty-banner .ce-emoji{font-size:1.7rem}
.cat-empty-banner h3{font-family:'Sora',sans-serif;font-weight:900;font-size:.9rem;text-transform:uppercase}
.cat-empty-banner .hint{color:rgba(16,16,16,.72)}
.auth-wrap{
position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;
background:var(--bg);
overflow-y:auto;
}
.auth-card{
width:min(440px,100%);background:var(--secondary);border:1px solid var(--stroke);
border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);
}
.auth-logo{
font-family:'Sora',sans-serif;font-weight:900;font-size:2rem;text-transform:uppercase;
letter-spacing:-.03em;margin-bottom:4px;display:flex;align-items:center;gap:10px;
}
.auth-logo .logo-mark{width:42px;height:42px;flex:none}
.auth-logo .logo-mark .mascot{width:42px;height:42px}
.auth-switch{font-size:.85rem;font-weight:700;margin-top:14px}
.auth-switch a{color:var(--accent-orange);cursor:pointer;text-decoration:underline}
.code-inp{font-family:'Sora',sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:.4em;text-align:center}
.profile-big{
min-height:60px;padding:12px 22px;max-width:100%;
border:1px solid var(--stroke);background:var(--primary);
display:grid;place-items:center;font-size:1.3rem;font-weight:900;
font-family:'Sora',sans-serif;text-transform:uppercase;letter-spacing:-.01em;
box-shadow:var(--shadow);flex-shrink:0;overflow-wrap:anywhere;text-align:center;
}
@media(max-width:640px){
.wrap{padding-bottom:160px}
}
/* ===== Chat (onglet 4) ===== */
.chat-wrap{
display:flex;flex-direction:column;
height:calc(100dvh - 260px);min-height:380px;
border:1px solid var(--stroke);background:var(--secondary);
box-shadow:var(--shadow);
}
.chat-head{
display:flex;align-items:center;gap:10px;padding:12px 14px;
border-bottom:1px solid var(--stroke);background:var(--primary);
}
/* (l'encre du bandeau est posée une fois pour toutes en fin de fichier —
inutile de la conditionner au thème : le jaune, lui, ne change pas) */
.chat-ava{
width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;font-size:1.2rem;
background:var(--secondary);border:1px solid var(--stroke);box-shadow:var(--shadow);
}
.chat-status{font-size:.68rem;font-weight:700;opacity:.75;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:86%;padding:11px 13px;border:1px solid var(--stroke);font-size:.9rem;font-weight:600;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg.me{align-self:flex-end;background:var(--primary);color:#101010;box-shadow:var(--shadow)}
.msg.ai{align-self:flex-start;background:var(--bg);box-shadow:var(--shadow)}
.msg.ai.think{opacity:.7;font-style:italic}
.msg .who{display:block;font-family:'Sora',sans-serif;font-weight:900;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:4px}
.chat-sugg{display:flex;gap:8px;padding:0 14px 10px;overflow-x:auto;scrollbar-width:none}
.chat-sugg::-webkit-scrollbar{display:none}
.chat-sugg .chip{white-space:nowrap;flex-shrink:0;font-size:.75rem}
.chat-bar{display:flex;gap:8px;padding:12px;border-top:1px solid var(--stroke);align-items:flex-end}
.chat-bar textarea{
flex:1;resize:none;max-height:110px;font-family:'Inter',sans-serif;font-weight:600;font-size:.9rem;
padding:10px 12px;border:1px solid var(--stroke);background:var(--bg);color:var(--txt);
}
.chat-bar .btn{flex-shrink:0;height:44px;width:52px;justify-content:center;font-size:1.1rem}
.typing{display:inline-flex;gap:4px}
.typing i{width:7px;height:7px;background:var(--txt);display:block;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* ===== Pop-up "Précisons ton voyage" ===== */
.qs-prog{
display:flex;gap:6px;margin-top:14px;
}
.qs-prog i{
flex:1;height:10px;background:var(--secondary);
border:1px solid var(--stroke);box-shadow:var(--shadow);
}
.qs-prog i.on{background:var(--primary)}
/* ===== Fiches destination (étape 2) : tout est déjà trouvé ===== */
.dest-facts{
border-top:1px solid var(--stroke);
margin-top:10px;padding-top:10px;
display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;
}
@media(max-width:400px){ .dest-facts{grid-template-columns:1fr} }
.dest-facts .fact{
display:flex;flex-direction:column;gap:2px; /* libellé AU-DESSUS : plus de colonne étranglée */
font-size:.82rem;
}
.dest-facts .fk{
font-weight:800;flex-shrink:0;
font-family:'Sora',sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;
}
.dest-facts .fv{
font-weight:600;color:var(--txt);
line-height:1.35;
overflow-wrap:break-word;word-break:normal;hyphens:none;
}
/* ============================================================
BOARDING PASS — carte de voyage (refonte)
Un vrai billet : bande jaune + talon détachable + code-barres
============================================================ */
.pass{
border:1px solid var(--stroke);
box-shadow:var(--shadow);
background:var(--primary);
margin-bottom:20px;
overflow:hidden;
}
/* --- Route --- */
.pass-top{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 18px 12px;
}
.pass-route{
display:flex;align-items:center;gap:8px;min-width:0;flex:1;
color:#101010;
}
.pass-route .iata{
font-family:'Sora',sans-serif;font-weight:900;font-size:1.9rem;letter-spacing:-.03em;line-height:1;
}
.pass-route .dash{
flex:1;min-width:14px;height:0;
border-top:3px dashed #101010;opacity:.5;
}
.pass-route .plane{font-size:1.05rem;flex-shrink:0}
.pass-change{
flex-shrink:0;width:38px;height:38px;
background:var(--secondary);color:var(--txt);
border:1px solid var(--stroke);box-shadow:var(--shadow);
font-size:1rem;font-weight:900;cursor:pointer;
transition:transform .1s,box-shadow .1s;
}
.pass-change:active{transform:translate(3px,3px);box-shadow:none}
/* --- Infos, en colonnes lisibles --- */
.pass-info{
display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;
padding:0 18px 16px;color:#101010;
}
.pass-info .pi{display:flex;flex-direction:column;gap:2px;min-width:0}
.pass-info .pk{
font-family:'Sora',sans-serif;font-weight:900;font-size:.58rem;
text-transform:uppercase;letter-spacing:.12em;opacity:.65;
}
.pass-info .pv{
font-weight:700;font-size:.86rem;line-height:1.25;
overflow-wrap:break-word;
}
/* --- Talon détachable --- */
.pass-tear{
position:relative;
background:var(--secondary);
border-top:1px dashed var(--stroke);
padding:14px 18px;
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.pass-tear::before,.pass-tear::after{
content:'';position:absolute;top:-14px;
width:24px;height:24px;border-radius:50%;
background:var(--bg);
border:1px solid var(--stroke);
}
.pass-tear::before{left:-16px}
.pass-tear::after{right:-16px}
/* --- Les 3 actions : pleine largeur, alignées, texte lisible --- */
.pass-acts{display:flex;gap:10px;flex:1;min-width:190px}
.pact{
flex:1;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-width:64px;padding:8px 6px;
background:var(--bg);
color:var(--txt); /* ← le texte n'est plus bleu */
border:1px solid var(--stroke);
box-shadow:var(--shadow);
font-size:1rem;cursor:pointer;
transition:transform .1s,box-shadow .1s;
}
.pact:active{transform:translate(3px,3px);box-shadow:none}
.pact span{
font-family:'Sora',sans-serif;font-weight:900;font-size:.56rem;
text-transform:uppercase;letter-spacing:.06em;color:var(--txt);
}
.pass-note{
background:var(--secondary);
border-top:1px solid var(--stroke);
padding:9px 18px;margin:0;
font-size:.62rem;font-weight:600;line-height:1.4;
color:var(--txt-2);
}
@media(max-width:420px){
.pass-route .iata{font-size:1.5rem}
.pass-info{grid-template-columns:1fr}
.pass-tear{justify-content:center}
.pass-acts{justify-content:center;min-width:0}
}
/* ===== Barre "l'IA cherche" (remplace la nav pendant la réflexion) ===== */
.searchbar{
position:fixed;left:0;right:0;bottom:0;z-index:39;
display:flex;align-items:center;gap:12px;
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
background:var(--primary);
border-top:1px solid var(--stroke);
border-radius:var(--r-lg) 18px 0 0;
animation:sbIn .3s cubic-bezier(.2,1.3,.4,1) both;
}
.searchbar[hidden]{display:none}
.sb-mark{
width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;
}
/* si la scène d'astéroïdes est là, la case s'élargit et ne contraint plus la
mascotte (qui y est positionnée en absolu) */
.sb-mark:has(.travel-scene){width:auto;height:auto}
.sb-mark .mascot:not(.traveler){width:42px;height:42px}
.sb-mark span{font-family:'Sora',sans-serif;font-weight:900;font-size:1.15rem;color:var(--primary-ink);line-height:1}
.sb-body{flex:1;min-width:0}
.sb-text{
font-family:'Sora',sans-serif;font-weight:900;font-size:.72rem;text-transform:uppercase;
letter-spacing:.04em;color:#101010;margin-bottom:5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-track{
height:10px;background:rgba(16,16,16,.14);
border:2px solid #101010;overflow:hidden;
}
.sb-track i{
display:block;height:100%;width:38%;
background:#101010;
animation:sbSlide 1.25s ease-in-out infinite;
}
@keyframes sbSlide{0%{transform:translateX(-105%)}100%{transform:translateX(275%)}}
@keyframes sbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12) rotate(-4deg)}}
@keyframes sbIn{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
.sb-mark,.sb-track i,.searchbar{animation:none}
.sb-track i{width:100%}
}
/* ===== Salle de jeux : le choix des quatre mini-jeux ===== */
.arcade-modal{max-width:640px}
.arcade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:560px){ .arcade-grid{grid-template-columns:1fr} }
.arcade-card{
display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
border:1px solid var(--stroke);background:var(--secondary);color:var(--txt);
box-shadow:var(--shadow);border-radius:var(--r-md);
padding:14px;cursor:pointer;font-family:inherit;transition:transform .1s ease,box-shadow .1s ease;
}
.arcade-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow);background:var(--card-hover)}
.arcade-card:active{transform:translateY(1px);box-shadow:var(--shadow)}
.ac-ico{font-size:1.9rem;line-height:1}
.ac-nom{font-family:'Sora',sans-serif;font-weight:900;font-size:.95rem;text-transform:uppercase}
.ac-desc{font-size:.78rem;color:var(--txt-2);line-height:1.35}
/* ===== Jeu « Où est-ce ? » ===== */
.geo-stage{display:flex;flex-direction:column;gap:10px;position:relative}
.geo-photo{
width:100%;height:200px;object-fit:cover;
border:1px solid var(--stroke);border-radius:var(--r-md);box-shadow:var(--shadow);
background:#0E1726;
}
.geo-map{
height:260px;border:1px solid var(--stroke);border-radius:var(--r-md);
box-shadow:var(--shadow);background:#e9e5dc;overflow:hidden;
}
.geo-hint{margin:0;font-size:.82rem;font-weight:700;color:var(--txt-2);text-align:center}
.geo-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.geo-q{grid-column:1/-1;margin:0;font-family:'Sora',sans-serif;font-weight:900;font-size:.9rem;text-align:center}
.geo-name{
border:1px solid var(--stroke);background:var(--secondary);color:var(--txt);
box-shadow:var(--shadow);border-radius:var(--r-md);
padding:10px;font-family:inherit;font-weight:800;font-size:.82rem;cursor:pointer;
}
.geo-name:hover{background:var(--card-hover)}
.geo-name:active{transform:translate(2px,2px);box-shadow:none}
.geo-result{
border:1px solid var(--stroke);background:var(--primary);color:#101010;
box-shadow:var(--shadow);border-radius:var(--r-md);
padding:10px;font-size:.84rem;font-weight:700;text-align:center;line-height:1.5;
}
.geo-result[hidden],.geo-names[hidden],.geo-hint[hidden]{display:none}
/* Sélecteur de langue de l'écran de compte : discret, mais atteignable
avant l'inscription — c'est le seul endroit où un anglophone peut basculer */
.auth-lang{display:flex;gap:6px;justify-content:center;margin:0 0 12px}
.auth-lang .chip{padding:5px 10px;font-size:.72rem}
/* ===== Moteur de carte (tuiles OSM) =====
⚠️ Les tuiles OSM sont TOUJOURS claires, y compris en thème sombre. Tout ce
qui se pose PAR-DESSUS doit donc utiliser une encre foncée fixe, jamais
var(--stroke) : en sombre celle-ci devient crème et disparaîtrait sur la
carte. C'est l'exception assumée à la règle des couleurs par variables. */
/* ⚠️ user-select:none ET les règles sur .am-tile ci-dessous : sans elles, tirer
sur la carte déclenche la sélection de texte ou le glisser-déposer d'image du
navigateur au lieu de déplacer la carte. C'était LE défaut « on dirait une
image qui ne bouge pas ». */
.acomap{
position:relative;overflow:hidden;touch-action:none;cursor:grab;
user-select:none;-webkit-user-select:none;
}
.acomap.am-grab{cursor:grabbing}
.am-tiles,.am-marks,.am-lines{position:absolute;top:0;left:0;right:0;bottom:0}
/* le conteneur est translaté d'un bloc pendant le déplacement : on prévient
le navigateur pour qu'il le compose sur le GPU */
.am-tiles{will-change:transform}
.am-tile{
position:absolute;top:0;left:0;width:256px;height:256px;
opacity:0;transition:opacity .18s ease;will-change:transform;
/* les tuiles ne reçoivent aucun clic : le geste va directement au conteneur */
pointer-events:none;-webkit-user-drag:none;user-select:none;
}
.am-tile.on{opacity:1}
:root.no-motion .am-tile{transition:none}
@media(prefers-reduced-motion:reduce){ .am-tile{transition:none} }
.am-lines{pointer-events:none;overflow:visible}
.am-line-b{fill:none;stroke:#101010;stroke-width:9;stroke-linejoin:round;stroke-linecap:round}
.am-line-f{fill:none;stroke:#FFE600;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.am-dash{fill:none;stroke:#101010;stroke-width:3.5;stroke-dasharray:8 7;stroke-linecap:round}
.am-marks{pointer-events:none}
.am-mark{
position:absolute;top:0;left:0;margin:-16px 0 0 -16px;
width:32px;height:32px;display:grid;place-items:center;padding:0;
border:3px solid #101010;box-shadow:2px 2px 0 #101010;border-radius:50%;
background:var(--primary);color:#101010;
font-family:'Sora',sans-serif;font-weight:900;font-size:.82rem;line-height:1;
cursor:pointer;pointer-events:auto;
}
.am-mark:active{transform-origin:center;box-shadow:0 0 0 #101010}
.am-hotel{background:#22F5FF}
.am-me{background:#FF5F5F;color:#fff}
.am-start{background:#fff}
.am-end{background:#6FBE5C}
.am-pop{position:absolute;top:0;left:0;width:0;height:0;z-index:8}
.am-pop-in{
position:absolute;bottom:24px;left:0;transform:translateX(-50%);
display:flex;align-items:center;gap:8px;white-space:nowrap;
background:#fff;color:#101010;
border:3px solid #101010;box-shadow:3px 3px 0 #101010;border-radius:var(--r-md);
padding:7px 10px;font-size:.76rem;font-weight:800;
}
.am-pop-in a{color:#101010;font-weight:900;font-size:.7rem;text-decoration:underline;white-space:nowrap}
.am-zoom{position:absolute;top:10px;right:10px;z-index:7;display:flex;flex-direction:column;gap:6px}
.am-zb{
width:34px;height:34px;display:grid;place-items:center;padding:0;
background:#fff;color:#101010;border:3px solid #101010;box-shadow:2px 2px 0 #101010;
border-radius:9px;font-family:'Sora',sans-serif;font-weight:900;font-size:1.05rem;
line-height:1;cursor:pointer;
}
.am-zb:active{transform:translate(2px,2px);box-shadow:0 0 0 #101010}
.am-credit{
position:absolute;right:8px;bottom:6px;z-index:7;
background:rgba(255,255,255,.82);color:#101010;
font-size:.6rem;font-weight:700;text-decoration:none;
padding:2px 6px;border-radius:var(--r-sm);
}
/* ===== Panneau Préférences ===== */
.acc-body input[type="range"]{
width:100%;height:10px;-webkit-appearance:none;appearance:none;
background:var(--secondary);border:1px solid var(--stroke);
box-shadow:var(--shadow);cursor:pointer;margin-top:6px;
}
.acc-body input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;width:22px;height:22px;
background:var(--primary);border:1px solid var(--stroke);cursor:grab;
}
.acc-body input[type="range"]::-moz-range-thumb{
width:22px;height:22px;background:var(--primary);border:1px solid var(--stroke);cursor:grab;
}
/* Animations désactivables depuis les préférences */
:root.no-motion *,
:root.no-motion *::before,
:root.no-motion *::after{
animation:none !important;
transition:none !important;
}
/* ===== Boutons secondaires côte à côte ===== */
.btn-duo{
display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;
}
.btn-duo .btn{width:100%;justify-content:center;text-align:center;padding:12px 8px;font-size:.78rem}
@media(max-width:340px){ .btn-duo{grid-template-columns:1fr} }
/* ===== Fermeture des modales : cible tactile confortable (44×44 min) ===== */
.close-btn{
flex-shrink:0;
width:44px;height:44px;min-width:44px;min-height:44px;
display:grid;place-items:center;
background:var(--secondary);color:var(--txt);
border:1px solid var(--stroke);box-shadow:var(--shadow);
font-size:1.1rem;font-weight:900;cursor:pointer;
transition:transform .1s,box-shadow .1s,background .1s;
}
.close-btn:active{transform:translate(3px,3px);box-shadow:none}
.close-btn:hover{background:var(--accent-orange);color:#101010}
/* Bouton "Fermer" large, collé en bas des longues modales défilantes */
.modal-close{
position:sticky;bottom:0;
width:100%;margin-top:16px;
min-height:52px;
background:var(--secondary);color:var(--txt);
border:1px solid var(--stroke);box-shadow:var(--shadow);
font-family:'Sora',sans-serif;font-weight:900;font-size:.85rem;
text-transform:uppercase;letter-spacing:.06em;
cursor:pointer;
}
.modal-close:active{transform:translate(4px,4px);box-shadow:none}
/* ===== Zone sensible (suppression de compte), isolée en bas du profil ===== */
.danger-zone{
margin-top:28px;padding:18px;
border:1px dashed var(--danger);
background:var(--secondary);
}
.danger-zone h3{
font-family:'Sora',sans-serif;font-weight:900;font-size:.95rem;
color:var(--danger);margin:0 0 6px;
}
.danger-zone p{font-size:.82rem;font-weight:600;color:var(--txt-2);margin:0 0 14px;line-height:1.5}
.btn.danger:not(.ghost){
width:100%;justify-content:center;
background:var(--danger);color:var(--on-accent);
border-color:var(--stroke);
}
.btn.danger:active{transform:translate(4px,4px);box-shadow:none}
/* ===== Safe area : la nav ne chevauche jamais l'indicateur gestuel ===== */
.catnav{padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px))}
.wrap{padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px))}
.stop b{
background:var(--primary);color:#101010;
width:20px;height:20px;display:grid;place-items:center;
border:1px solid var(--stroke);font-size:.68rem;
}
.stop:active{transform:translate(3px,3px);box-shadow:none}
/* ============================================================
ORDINATEUR (≥ 900 px)
Le design mobile est la référence : on ne le redessine pas, on
arrête juste de faire croire à un téléphone étiré. Trois idées —
la nav basse redevient un îlot posé, la vue 3 se met sur deux
colonnes (moins de défilement), les gros boutons pleine largeur
reprennent une taille de bouton.
============================================================ */
@media (min-width:900px){
/* --- L'en-tête accompagne le défilement, il ne flotte plus PAR-DESSUS ---
⚠️ Il était en position:fixed avec un fond transparent : les cartes
passaient donc DERRIÈRE la pastille de navigation, qui semblait posée
n'importe où sur le contenu. En « sticky » il reste accessible en haut
tout en gardant sa place dans la page, donc plus aucun chevauchement.
Le voile en dégradé masque ce qui défile dessous. */
header{
position:sticky;top:0;z-index:40;
margin:0 0 18px;padding:14px 0 10px;
border:0;border-radius:0;box-shadow:none;
justify-content:space-between;flex-wrap:nowrap;
background:linear-gradient(var(--bg) 62%, transparent);
}
.wrap{padding-top:0}
/* ⚠️ La nav de bureau était décrite ICI, du temps où elle se rangeait dans
un îlot horizontal posé sur l'aplat jaune. Elle est maintenant une COLONNE
au bord droit, entièrement redéfinie plus bas dans le fichier (chercher
« Navigation principale sur ordinateur »). Tout ce qui était écrit ici
était donc mort — sauf « opacity:.62 », que le nouveau bloc ne remettait
pas et qui fuyait : les onglets inactifs tombaient à 3,45:1 au lieu de
6,3:1. Rien à remettre ici : c'est le bloc du bas qui décide. */
/* la barre « l'IA cherche » remplace la nav : même gabarit d'îlot */
.searchbar{
left:0;right:0;margin:0 auto;
bottom:20px;width:min(560px,calc(100vw - 40px));
padding:12px 16px;
border:1px solid var(--stroke);border-radius:var(--r-lg);
box-shadow:var(--shadow);
}
/* le bandeau réseau se replace au-dessus de l'îlot de recherche */
.net-badge{bottom:96px}
/* plus rien n'occupe le bas en permanence */
.wrap{padding-bottom:48px}
/* la carte plein écran s'arrête sous la barre du haut */
/* --- les 3 étapes occupent la largeur, bien détachées les unes des autres --- */
.steps{gap:18px}
.step{flex:1;padding:13px 20px}
/* --- vue 1 : grille à colonnes égales plutôt qu'un flux qui s'enroule.
En flux libre, le 4ᵉ bouton se retrouvait seul sur sa ligne et
chaque bouton avait une largeur différente. 2 ou 4 colonnes : jamais
de reste, les 4 boutons tombent toujours juste. --- */
.go-acts{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;max-width:none;
}
.go-acts > .btn,
.go-acts .btn-duo .btn{width:100%;justify-content:center;text-align:center}
.go-acts .btn-duo{display:contents}
.go-acts .btn-duo .btn{padding:14px 18px;font-size:1rem}
/* La vue 3 était sur deux colonnes pour apparier « Réserver » et
« À savoir ». Cette dernière ayant été retirée, il ne reste que des
blocs pleine largeur : la grille n'a plus d'objet, on revient au flux. */
/* --- proposition unique : le voyage se déploie en longueur --- */
.dest-grid > .dest:only-child{
grid-column:1 / -1;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
column-gap:28px;align-items:start;
}
.dest:only-child .dest-main{grid-column:1}
.dest:only-child .dest-facts{grid-column:2;grid-row:1;margin-top:0}
.dest:only-child .hint,
.dest:only-child .tags,
.dest:only-child > .btn{grid-column:1 / -1}
.dest:only-child .flag{font-size:2.8rem}
.dest:only-child h3{font-size:1.5rem}
/* les stats budget passent de 2 à 4 de front : une ligne au lieu de deux */
.plan-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Grand écran : on laisse la colonne respirer un peu, sans plus —
au-delà, les lignes deviennent trop longues à lire. */
/* Écran large : les 4 boutons tiennent sur une seule ligne. On garde un
diviseur de 4 pour ne jamais laisser un bouton seul sur sa ligne. */
@media (min-width:1250px){
.go-acts{grid-template-columns:repeat(4,minmax(0,1fr))}
.go-acts .btn,
.go-acts .btn-duo .btn{font-size:.86rem;padding:14px 12px}
}
@media (min-width:1400px){
.wrap{max-width:1160px}
}
/* ===== Carnet de voyage — document imprimable soigné ===== */
#dossier{display:none}
@page{ margin:14mm 13mm; }
@media print{
body > *:not(#dossier){display:none !important}
#dossier{
display:block !important;color:#111;background:#fff;
font-family:'Inter',Helvetica,Arial,sans-serif;font-size:10.5pt;line-height:1.55;
}
/* ---- couverture ---- */
#dossier .cover{
border:2.5pt solid #111;border-radius:6pt;padding:16pt 18pt;margin-bottom:16pt;
background:#FFE600;break-inside:avoid;
}
#dossier .cover .brand{font-family:'Sora',Arial,sans-serif;font-weight:900;font-size:9pt;letter-spacing:.16em;margin:0 0 6pt}
#dossier h1{font-family:'Sora',Arial,sans-serif;font-weight:900;font-size:27pt;line-height:1.05;margin:0}
#dossier .cover .meta{margin:10pt 0 0;font-size:11pt;font-weight:600}
#dossier .cover .rule{height:3pt;background:#111;width:64pt;margin:9pt 0 0;border-radius:2pt}
/* ---- sections ---- */
#dossier section{break-inside:avoid;margin-bottom:15pt}
#dossier h2{
font-family:'Sora',Arial,sans-serif;font-weight:900;font-size:12pt;
margin:0 0 7pt;padding:4pt 8pt;background:#111;color:#fff;border-radius:3pt;
}
#dossier h3{font-family:'Sora',Arial,sans-serif;font-size:11pt;margin:0 0 2pt}
/* ---- tableaux clé/valeur ---- */
#dossier table{width:100%;border-collapse:collapse;font-size:10pt}
#dossier th{
text-align:left;vertical-align:top;width:96pt;padding:5pt 10pt 5pt 0;
font-family:'Sora',Arial,sans-serif;font-size:8.5pt;text-transform:uppercase;
letter-spacing:.06em;color:#555;font-weight:800;
}
#dossier td{padding:5pt 0;border-bottom:.75pt solid #ddd;vertical-align:top}
#dossier tr:last-child td{border-bottom:0}
/* ---- journées ---- */
#dossier .dj{
break-inside:avoid;margin-bottom:9pt;padding-left:9pt;border-left:2.5pt solid #FFE600;
}
#dossier .dj h3{display:flex;gap:6pt;align-items:baseline}
#dossier .dj h3 small{font-weight:600;color:#666;font-size:9pt}
#dossier .lieux{margin:1pt 0 0;font-size:9.5pt;color:#444}
#dossier .heures{margin:4pt 0 0;padding-left:13pt;font-size:9.5pt}
#dossier .heures li{margin-bottom:2.5pt}
#dossier .heures strong{font-family:'Sora',Arial,sans-serif;font-size:9pt}
#dossier ul{margin:2pt 0 0;padding-left:14pt}
#dossier li{margin-bottom:2pt}
/* ---- références de réservation : bien visibles ---- */
#dossier .refs td{font-size:11pt}
#dossier .refs strong{font-family:'Sora',Arial,sans-serif;font-size:12pt;letter-spacing:.02em}
#dossier .lnk{display:block;font-size:8pt;color:#666;word-break:break-all;margin-top:1pt}
/* ---- carte du jour ---- */
#dossier .djmap{display:block;width:100%;max-width:400pt;margin:5pt 0 3pt;border:1pt solid #bbb;border-radius:3pt}
/* ---- pied de page ---- */
#dossier footer{
margin-top:14pt;padding-top:6pt;border-top:1.5pt solid #111;
font-size:8pt;color:#666;break-inside:avoid;
}
}
/* ============================================================
COQUE — colonne de gauche, navigation en pastilles, bandeau d'accueil
------------------------------------------------------------
La colonne n'existe QU'À PARTIR DE 1080 px. En dessous, elle est retirée
du flux et de l'ordre de lecture : la barre du bas et le fil d'étapes
horizontal suffisent. Le dessin mobile reste la référence.
============================================================ */
.rail{display:none}
@media (min-width:1080px){
.rail{
display:flex;flex-direction:column;gap:26px;
position:fixed;top:0;left:0;bottom:0;width:265px;z-index:40;
padding:16px 20px 20px;overflow:hidden;
background:var(--bg-2);border-right:1px solid var(--stroke);
}
/* la colonne devient un vrai repère : on la rend au lecteur d'écran */
.rail[aria-hidden="true"]{display:flex}
/* ---- Bloc identité : le seul aplat jaune de la page ----
Il porte le VRAI logo : le globe REMPLACE le « o » d'ACOLYTE. */
.rail-logo{
display:block;
background:var(--primary);border-radius:var(--r-lg);
padding:26px 18px 14px;box-shadow:var(--shadow);
}
/* .logo-word ne porte QUE la mise en place des lettres : la fonte, la
graisse et les capitales viennent normalement de .logo, absent ici. */
.rail-logoword{
font-family:'Sora',sans-serif;font-weight:900;font-size:1.7rem;
letter-spacing:-.03em;text-transform:uppercase;color:var(--primary-ink);
}
.rail-tag{
display:block;font-style:normal;font-size:.7rem;font-weight:700;
color:rgba(20,20,20,.62);margin-top:2px;
}
/* Titre de la colonne : il annonce ce qu'elle montre, et change avec la
catégorie (Étapes / Journées du voyage / Mon compte). */
.rail-title{
font-family:'Sora',sans-serif;font-weight:900;font-size:.66rem;
text-transform:uppercase;letter-spacing:.1em;color:var(--txt-2);
/* pas d'opacity : à .75 sur --txt-2, ce titre tombait à 3,19:1 */
margin:0 0 -14px 2px;
}
/* ---- Fil du parcours : le trait relie les étapes ---- */
.rail-steps{list-style:none;margin:0;padding:0;position:relative}
.rail-steps::before{
content:'';position:absolute;left:15px;top:22px;bottom:22px;
width:1px;background:var(--stroke);
}
.rail-steps li{
display:flex;align-items:flex-start;gap:13px;
padding:9px 0;cursor:pointer;position:relative;
}
.rs-n{
width:31px;height:31px;flex:none;display:grid;place-items:center;
border-radius:50%;background:var(--surface-2);border:1px solid var(--stroke);
font-family:'Sora',sans-serif;font-weight:900;font-size:.7rem;color:var(--txt-2);
position:relative;z-index:1;
}
.rs-t b{
display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:.82rem;
text-transform:uppercase;letter-spacing:.05em;color:var(--txt-2);line-height:1.2;
}
.rs-t em{
display:block;font-style:normal;font-size:.7rem;font-weight:600;
/* pas d'opacity ici : à .7 sur --txt-2 le contraste tombait à 3,5:1.
La hiérarchie est déjà portée par --txt-2 et par la taille. */
color:var(--txt-2);margin-top:3px;line-height:1.35;
}
/* étape en cours : c'est le seul endroit où le jaune revient dans la colonne */
.rail-steps li.on .rs-n{background:var(--primary);color:var(--primary-ink);border-color:transparent}
.rail-steps li.on .rs-t b{color:var(--txt)}
/* étape verrouillée : visible mais clairement hors d'atteinte */
.rail-steps li.off{cursor:not-allowed;opacity:.45}
.rail-art{
width:100%;height:auto;margin-top:auto;color:var(--txt-2);opacity:.30;
pointer-events:none;
}
.rail-note{
background:var(--secondary);border:1px solid var(--stroke);
border-radius:var(--r-md);padding:14px 15px;
}
.rn-ico{font-size:1.1rem}
.rail-note p{font-size:.78rem;line-height:1.5;color:var(--txt-2);margin:7px 0 0}
.rail-note .rn-sub{color:var(--txt);font-weight:700;margin-top:9px}
/* Le contenu se décale de la largeur de la colonne. `margin:0 auto` est
neutralisé à droite, sinon le bloc resterait centré dans l'espace
restant et laisserait un grand vide contre le bord droit. */
.wrap{margin-left:265px;margin-right:0;max-width:1240px;padding:14px 30px 120px}
/* le logo en haut à gauche ferait doublon avec la colonne */
header .logo{display:none}
header{justify-content:flex-end}
/* le fil d'étapes horizontal non plus : la colonne le porte déjà */
.steps{display:none}
}
/* ---- Navigation principale sur ordinateur : une colonne, pas une rangée ----
Elle est posée contre le bord droit, à mi-hauteur. Deux raisons de la
dresser à la verticale : elle fait écho à la colonne de gauche, et surtout
elle ne mange plus de hauteur en haut de page — la barre horizontale
poussait le contenu vers le bas et grandissait à chaque onglet ajouté.
Une colonne, elle, s'allonge sans rien déplacer. */
@media (min-width:900px){
.catnav{
/* ⚠️ display:flex EXPLICITE. La barre est une GRILLE ailleurs dans ce
fichier (grid-template-columns:repeat(4,1fr)) : sans ça,
« flex-direction:column » n'a aucun effet et les boutons se rangent
en 4 colonnes qui passent à la ligne. */
display:flex;flex-direction:column;
/* left:auto et bottom:auto sont INDISPENSABLES : la barre du bas de
téléphone est calée en left:0;right:0;bottom:0. Sans les annuler, la
colonne resterait étirée sur toute la largeur de l'écran. */
position:fixed;left:auto;bottom:auto;right:16px;top:50%;
transform:translateY(-50%);z-index:45;
width:auto;gap:6px;padding:8px;border-radius:var(--r-lg);
background:var(--secondary);border:1px solid var(--stroke);box-shadow:var(--shadow-lg);
}
.catnav button{
display:flex;flex-direction:column;align-items:center;gap:5px;
width:74px;border:0;background:transparent;border-radius:var(--r-md);
padding:11px 6px;box-shadow:none;
font-family:'Sora',sans-serif;font-weight:800;font-size:.62rem;
text-transform:uppercase;letter-spacing:.05em;color:var(--txt-2);
}
.catnav button .ico{font-size:1.25rem;margin:0}
.catnav button.on{background:var(--primary);color:var(--primary-ink);box-shadow:none}
.catnav button:not(.on):hover{color:var(--txt);background:var(--surface-2)}
/* La colonne flotte au-dessus du contenu : on lui réserve sa place, sinon
les cartes passeraient dessous. 132 px = 92 (la colonne) + 16 (sa marge
au bord) + 24 de respiration. Mesuré : sans cette réserve, les cartes
arrivaient à 4 px des boutons. */
.wrap{padding-right:132px}
/* ⚠️ On RÉDUIT l'en-tête à néant, on ne le masque PAS : la barre est un de
ses enfants, et un enfant de `display:none` n'est pas rendu — même en
position:fixed. La barre disparaissait entièrement. */
header{padding:0;margin:0;min-height:0;border:0}
}
/* ---- Bandeau d'accueil ---- */
.hero{
position:relative;overflow:hidden;isolation:isolate;
border:1px solid var(--stroke);border-radius:var(--r-lg);
padding:34px 30px 30px;margin-bottom:16px;box-shadow:var(--shadow);
background:var(--secondary);
}
/* Le décor : dégradés superposés qui évoquent une mer vue du ciel. Aucune
photo — donc rien à télécharger, rien à autoriser dans la CSP. */
.hero-deco{
position:absolute;inset:0;z-index:-1;
background:
/* écume et hauts-fonds, en haut à droite */
radial-gradient(38% 46% at 92% 6%, rgba(226,248,250,.55) 0%, transparent 70%),
radial-gradient(46% 52% at 74% 0%, rgba(120,225,232,.42) 0%, transparent 72%),
/* le grand bleu, qui s'assombrit vers le bord */
radial-gradient(78% 96% at 104% 46%, rgba(14,120,142,.78) 0%, transparent 74%),
radial-gradient(60% 80% at 88% 96%, rgba(9,74,92,.62) 0%, transparent 76%),
/* un voile turquoise qui relie le tout */
radial-gradient(90% 70% at 62% 30%, rgba(63,186,203,.22) 0%, transparent 78%),
linear-gradient(102deg, var(--secondary) 0%, var(--secondary) 40%, rgba(17,88,104,.72) 100%);
}
/* Grain très léger : sans lui, les dégradés font « plastique ». Dessiné en
SVG dans l'URL même, donc aucun fichier à charger. */
.hero-deco::after{
content:'';position:absolute;inset:0;opacity:.32;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
.hero-in{position:relative;max-width:34rem}
.hero h1{
font-family:'Sora',sans-serif;font-weight:900;
font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.06;
letter-spacing:-.03em;text-transform:uppercase;margin:0;
}
/* le souligné jaune tracé à la main sous le titre */
.hero h1::after{
content:'';display:block;width:clamp(90px,26%,190px);height:5px;
margin-top:14px;border-radius:4px;background:var(--primary);
}
.hero .sub{margin-top:16px;font-size:.92rem;line-height:1.6;max-width:30rem}
.hero-globe{
position:absolute;top:18px;right:26px;width:clamp(64px,9vw,104px);height:auto;
color:var(--primary);opacity:.9;pointer-events:none;
}
@media (max-width:640px){
.hero{padding:24px 20px 22px}
.hero-globe{width:56px;top:14px;right:14px;opacity:.75}
.hero .sub{font-size:.86rem}
}
/* ---- Interrupteur (option « plusieurs pays ») ----
Une case à cocher système ne se dessine pas ; un interrupteur, oui. Il
reste un derrière, donc clavier et lecteurs
d'écran continuent de fonctionner. */
.field label.opt-check{border-width:1px;box-shadow:var(--shadow);border-radius:var(--r-md)}
.field label.opt-check input{
appearance:none;-webkit-appearance:none;
width:44px;height:25px;flex:none;margin:1px 0 0;transform:none;
background:var(--surface-2);border:1px solid var(--stroke-2);
border-radius:999px;position:relative;cursor:pointer;
transition:background .16s ease,border-color .16s ease;
}
.field label.opt-check input::after{
content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;
border-radius:50%;background:var(--txt-2);
transition:transform .16s ease,background .16s ease;
}
.field label.opt-check input:checked{background:var(--primary);border-color:transparent}
.field label.opt-check input:checked::after{transform:translateX(19px);background:var(--primary-ink)}
.field label.opt-check input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* cochée : plus d'aplat jaune sur toute la ligne — l'interrupteur suffit à
dire l'état, et un grand aplat écrasait le reste du questionnaire */
.field label.opt-check:has(input:checked){background:var(--card-hover);border-color:var(--stroke-2)}
.field label.opt-check:has(input:checked) b,
.field label.opt-check:has(input:checked) em{color:inherit}
.field label.opt-check:has(input:checked) b{color:var(--txt)}
.field label.opt-check:has(input:checked) em{color:var(--txt-2)}
@media (prefers-reduced-motion:reduce){
.field label.opt-check input,.field label.opt-check input::after{transition:none}
}
/* ============================================================
VUE CARTE — deux cartes dans le flux de la page
------------------------------------------------------------
Avant : tout était en position absolue par-dessus l'écran. Les pastilles
de journée, le texte et les deux boutons flottaient sans support, la
bande d'étapes recouvrait le terrain, et rien ne s'alignait sur la
colonne de contenu. D'où l'impression de bricolage.
Maintenant : une carte d'en-tête (titre, actions, journées) puis une
grande carte qui contient le terrain et ses étapes.
============================================================ */
#catMap{display:block}
/* ---- En-tête ---- */
.map-head{
display:grid;grid-template-columns:1fr auto;align-items:start;
gap:14px 18px;margin-bottom:14px;
}
.map-title{min-width:0}
.map-title h2{margin:0}
/* Le résumé de la journée peut être long : il passe à la ligne au lieu
d'être coupé par des points de suspension. */
.map-title .sub{margin:6px 0 0;font-size:.86rem;line-height:1.5}
.map-title .sub:empty{display:none}
.map-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mapnote-warn{
font-size:.7rem;font-weight:800;color:var(--danger);
white-space:nowrap;align-self:center;
}
.mapnote-warn:empty{display:none}
/* ---- Pastilles de journée : même langage que la navigation du site ---- */
.mapbar{
grid-column:1/-1;
display:flex;gap:8px;align-items:center;
overflow-x:auto;scrollbar-width:none;
padding:4px;margin:-4px;
border-top:1px solid var(--stroke);padding-top:14px;
}
.mapbar::-webkit-scrollbar{display:none}
/* Au-delà de 1080 px, la colonne de gauche liste déjà les journées : ces
pastilles étaient la même information une seconde fois, au milieu de la
carte d'en-tête. En dessous, la colonne n'existe pas (.rail{display:none})
et les pastilles redeviennent le SEUL moyen de changer de journée.
⚠️ On masque, on ne supprime pas le bloc du HTML : buildProjectMap()
commence par « if(!bar) return » — sans #mapDays, toute la vue Carte
meurt (carte, note, arrêts, bouton d'ouverture).
⚠️ Et cette règle doit rester APRÈS « .mapbar{display:flex} » ci-dessus :
à spécificité égale, c'est la dernière qui gagne. Placée plus haut dans le
fichier (dans le bloc 1080 px de la colonne), elle n'avait aucun effet. */
@media (min-width:1080px){
.mapbar{display:none}
}
.mapbar .rt{
flex:none;cursor:pointer;
background:var(--surface-2);color:var(--txt-2);
border:1px solid var(--stroke);border-radius:999px;
padding:9px 16px;
font-family:'Sora',sans-serif;font-weight:800;font-size:.74rem;
text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
transition:background .12s ease,color .12s ease;
}
.mapbar .rt:hover:not(.on){color:var(--txt);border-color:var(--stroke-2)}
.mapbar .rt.on{background:var(--primary);color:var(--primary-ink);border-color:transparent}
/* ---- La carte elle-même ---- */
.map-card{padding:0;overflow:hidden}
#catMap #projMap{
/* hauteur généreuse mais bornée : la carte doit dominer sans pousser les
étapes hors de l'écran */
height:clamp(320px,58vh,620px);
background:#e9e5dc; /* teinte des tuiles OSM avant chargement */
}
/* ---- Étapes du jour, SOUS le terrain ---- */
.mapstops{
display:flex;gap:8px;align-items:center;
overflow-x:auto;scrollbar-width:none;
padding:12px 14px;border-top:1px solid var(--stroke);
background:var(--secondary);
}
.mapstops::-webkit-scrollbar{display:none}
.mapstops:empty{display:none}
.stop{
flex:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
background:var(--surface-2);color:var(--txt);text-decoration:none;
border:1px solid var(--stroke);border-radius:999px;
padding:8px 14px 8px 8px;
font-family:inherit;font-weight:700;font-size:.78rem;white-space:nowrap;
}
.stop:hover{border-color:var(--stroke-2)}
.stop b{
flex:none;width:22px;height:22px;display:grid;place-items:center;
border-radius:50%;background:var(--primary);color:var(--primary-ink);
font-family:'Sora',sans-serif;font-size:.68rem;font-weight:900;
}
/* étape que le relevé n'a pas su situer : montrée, mais clairement inactive */
.stop.off{opacity:.5;cursor:not-allowed}
.stop.off b{background:var(--surface-2);color:var(--txt-2);border:1px solid var(--stroke)}
@media (max-width:720px){
.map-head{grid-template-columns:1fr}
.map-acts{justify-content:flex-start}
#catMap #projMap{height:clamp(300px,52vh,460px)}
}
/* ============================================================
BLOG
------------------------------------------------------------
L'onglet était réservé à l'ordinateur ; il est désormais présent sur
téléphone aussi. La barre du bas passe donc de 3 à 4 colonnes — voir
`.catnav` (grid-template-columns), qui doit rester d'accord avec le nombre
réel de boutons, sinon le quatrième déborde ou se replie.
La classe `.cat-pc` et ses règles ont été retirées : plus rien ne les
utilisait, et les laisser aurait masqué l'onglet à la prochaine reprise.
============================================================ */
.blog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.blog-head h2{margin:0}
.blog-head .sub{margin:6px 0 0}
/* ---- La liste : des fiches larges, l'image à gauche ---- */
.blog-list{display:grid;gap:14px}
.blog-card{
display:grid;grid-template-columns:180px 1fr;gap:0;text-align:left;
background:var(--secondary);border:1px solid var(--stroke);border-radius:var(--r-lg);
box-shadow:var(--shadow);overflow:hidden;cursor:pointer;padding:0;
transition:border-color .12s ease,transform .12s ease;
}
.blog-card:hover{border-color:var(--stroke-2);transform:translateY(-2px)}
.bc-img{display:block;background:var(--surface-2);min-height:132px;overflow:hidden}
.bc-img img{width:100%;height:100%;object-fit:cover;display:block}
.bc-noimg{display:grid;place-items:center;font-size:2rem;opacity:.4}
.bc-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px;min-width:0}
.bc-cat{
display:inline-block;align-self:flex-start;
font-family:'Sora',sans-serif;font-weight:800;font-size:.62rem;
text-transform:uppercase;letter-spacing:.09em;color:var(--txt-2);
background:var(--surface-2);border:1px solid var(--stroke);
border-radius:999px;padding:4px 10px;
}
.bc-titre{
font-family:'Sora',sans-serif;font-weight:900;font-size:1.05rem;
line-height:1.25;color:var(--txt);
}
.bc-sous{font-size:.86rem;line-height:1.5;color:var(--txt-2)}
.bc-meta{font-size:.72rem;font-weight:700;color:var(--txt-2);margin-top:auto} /* opacity retirée : contraste */
@media (max-width:700px){
.blog-card{grid-template-columns:1fr}
.bc-img{min-height:150px;max-height:180px}
}
/* ---- L'article ---- */
.art-hero{margin:-2px -2px 18px;border-radius:var(--r-md);overflow:hidden;position:relative}
.art-hero img{width:100%;max-height:380px;object-fit:cover;display:block}
.art-hero figcaption{
font-size:.7rem;font-weight:700;color:var(--txt-2);
padding:8px 2px 0;text-align:right;
}
.art-titre{
font-family:'Sora',sans-serif;font-weight:900;
font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.12;
letter-spacing:-.02em;margin:12px 0 0;
}
.art-sous{font-size:1.05rem;line-height:1.5;color:var(--txt-2);margin:10px 0 0;font-weight:600}
.art-meta{font-size:.74rem;font-weight:700;color:var(--txt-2);margin:10px 0 0} /* opacity retirée : contraste */
.art-resume{
font-size:.98rem;line-height:1.65;margin:18px 0 0;
padding-left:16px;border-left:3px solid var(--primary);
}
/* ---- Les faits chiffrés : une grille, lisible d'un coup d'œil ---- */
.art-faits{
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;
margin:22px 0 4px;
}
.af{
background:var(--surface-2);border:1px solid var(--stroke);
border-radius:var(--r-md);padding:11px 13px;
}
.af-k{
display:block;font-size:.64rem;font-weight:800;text-transform:uppercase;
letter-spacing:.07em;color:var(--txt-2);
}
.af-v{display:block;font-family:'Sora',sans-serif;font-weight:900;font-size:.95rem;margin-top:3px}
.art-sec{margin-top:26px}
.art-sec h2{
font-family:'Sora',sans-serif;font-weight:900;font-size:1.22rem;
line-height:1.3;margin:0 0 10px;
}
/* Le corps du texte : une largeur de lecture confortable, pas la pleine
largeur de l'écran — au-delà de ~70 caractères, l'œil perd sa ligne. */
.art-sec p{font-size:.98rem;line-height:1.75;color:var(--txt);margin:0 0 14px;max-width:68ch}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.art-note{margin-top:20px;border-top:1px solid var(--stroke);padding-top:12px}
/* ---- Le lien discret posé à côté d'un lieu du programme ---- */
.blog-link{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;padding:0;vertical-align:-.28em;
background:var(--surface-2);border:1px solid var(--stroke);border-radius:7px;
font-size:.74rem;line-height:1;cursor:pointer;
}
.blog-link:hover{background:var(--primary);border-color:transparent}
/* ============================================================
ENCRE SUR LES APLATS VIFS — À GARDER EN DERNIER DANS LE FICHIER
------------------------------------------------------------
Le jaune de la marque ne change pas entre les deux thèmes, mais l'encre
du thème sombre est presque blanche (--txt : #F2F1EC). Partout où un
texte hérite de cette encre en se posant sur du jaune, il devient
illisible. Même piège avec le cyan, qui est CLAIR en thème sombre.
⚠️ POURQUOI CE BLOC EST TOUT EN BAS. Il était en haut du fichier, et six
de ses sélecteurs étaient silencieusement annulés par des règles plus bas
de spécificité égale qui reposaient color:var(--txt). Le défaut revenait
donc sans arrêt, et on le rapiéçait au cas par cas — d'où trois
conventions différentes dans le fichier. En dernière position, ce bloc
gagne la cascade : c'est LE seul endroit à lire et à compléter.
⚠️ N'AJOUTE ICI QUE DES SÉLECTEURS DONT LE FOND EST RÉELLEMENT VIF.
Ne remets pas .tag (fond neutre), .spend-total ni #offBar : ils y étaient,
et maintenant que ce bloc est autoritaire ils casseraient. Évite aussi les
« X * » quand X contient une surface sombre imbriquée (.pass-change,
.today-card .btn, .pass-tear) : à spécificité égale, c'est ce bloc qui
gagnerait et la surface sombre passerait en encre foncée.
============================================================ */
/* Surligneur jaune posé sur un mot au milieu d'une phrase (l'heure locale,
le taux de change, le compte à rebours). C'était trois styles en ligne
identiques dans app.js, sans encre — donc blanc sur jaune en sombre. */
.hl{
background:var(--primary);padding:2px 6px;
border:1px solid var(--stroke);color:var(--primary-ink);
}
/* --- Sur le jaune de la marque --- */
.btn:not(.ghost),
.chip.on,
.pc-chip.on,
.subtab.on,
.step.active,
.catnav button.on,
.tl-time,
.tag.money,
.check.done .box,
.acc-head,
#toast,
.profile-big,
.today-card,
.pass-top,
.pass-info,
.pass-info *,
.searchbar,
.chat-head,
.news-hello,
.key-tip,
.field label.opt-check:has(input:checked),
.msg.me,
.fab,
.blog-link:hover{
color: var(--primary-ink);
}
/* --- Sur le cyan --- Il est clair en sombre (#5BD6E8) et assez foncé en
clair (#1B8FA6) ; l'encre foncée passe les deux (4,85:1 au pire), le
blanc n'y arrivait pas (3,80:1). Donc --primary-ink des deux côtés. */
.step.active .n,
.tag.cyan,
.icon-btn:hover{
color: var(--primary-ink);
}
/* ============================================================
PIED DE PAGE
------------------------------------------------------------
Sa vraie raison d'être est le référencement : c'est le seul texte de la page
qui existe SANS JavaScript (voir le commentaire dans index.html). Il doit
donc rester discret à l'écran tout en étant du vrai contenu — pas des liens
entassés en petit.
============================================================ */
.foot{
margin:48px 0 0;padding:28px 0 8px;
border-top:1px solid var(--stroke);
color:var(--txt-2);font-size:.88rem;line-height:1.6;
}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 30px}
.foot-col h2{
font-family:'Sora',sans-serif;font-weight:900;font-size:.72rem;
text-transform:uppercase;letter-spacing:.09em;
color:var(--txt);margin:0 0 8px;
}
.foot-col p{margin:0 0 8px}
.foot-col ul{margin:0;padding-left:18px}
.foot-col li{margin-bottom:4px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.foot-links a{
color:var(--accent-orange);font-weight:700;text-decoration:underline;
text-underline-offset:3px;
}
.foot-links a:hover{color:var(--txt)}
.foot-bas{
margin:26px 0 0;padding-top:16px;border-top:1px solid var(--stroke);
font-size:.8rem;
}
/* ============================================================
VOIR SON MOT DE PASSE
------------------------------------------------------------
L'œil est posé DANS le champ, à droite. Le champ reçoit une réserve à droite
(padding-right) pour que le texte tapé ne passe jamais sous le bouton — sans
elle, un mot de passe long finit caché derrière l'icône.
============================================================ */
.pass-wrap{position:relative;display:block}
.pass-wrap input{width:100%;padding-right:46px}
.pass-eye{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
width:34px;height:34px;display:grid;place-items:center;
background:transparent;border:0;border-radius:var(--r-sm);
font-size:1.05rem;line-height:1;cursor:pointer;
/* la zone de contact reste confortable au doigt, même si l'icône est petite */
-webkit-tap-highlight-color:transparent;
}
.pass-eye:hover{background:var(--surface-2)}
.pass-eye:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* ============================================================
JEUX AU DOIGT
------------------------------------------------------------
⚠️ « touch-action:none » n'est pas cosmétique : sans lui, glisser le doigt
sur la toile fait DÉFILER la page au lieu de bouger la raquette, et le jeu
est injouable sur téléphone. On le pose sur les trois toiles seulement, pas
plus large : ailleurs le défilement doit continuer de marcher.
============================================================ */
#gameCanvas, #pongCanvas, #packCanvas{ touch-action:none }
/* Deux tapes sur le logo ouvrent la salle de jeux. Sans ceci, la seconde tape
déclenche le zoom du navigateur et l'easter egg reste introuvable au doigt. */
.logo-mark{ touch-action:manipulation }
/* ============================================================
COUVERTURE DESSINÉE (article sans photo)
------------------------------------------------------------
Le repli n'est plus un 📰 gris translucide qui donnait l'impression d'une
image cassée : c'est un vrai visuel, à la même taille et au même cadrage
qu'une photo. Voir blogVisuel() dans app.js.
============================================================ */
.bc-dessin{display:block;width:100%;height:100%;min-height:132px}
.art-hero-dessin .bc-dessin{max-height:300px;min-height:200px}
/* la ligne de crédit n'a pas lieu d'être : personne n'est l'auteur d'un dégradé */
.art-hero-dessin figcaption{display:none}
/* ============================================================
NORMES D'ACCESSIBILITÉ — RGAA / EN 301 549 / WCAG 2.2 AA
------------------------------------------------------------
Ce qui suit corrige des manquements CONSTATÉS par un audit de la page, pas
des précautions théoriques. Chaque règle porte le critère qu'elle satisfait.
============================================================ */
/* RGAA 12.7 / WCAG 2.4.1 — LIEN D'ÉVITEMENT.
Invisible tant qu'on ne tabule pas, bien visible dès qu'il reçoit le focus.
⚠️ Surtout PAS « display:none » ni « visibility:hidden » : ça le retirerait
aussi de l'ordre de tabulation, et il ne servirait plus à rien. On le sort
donc de l'écran, ce qui le garde atteignable au clavier. */
.skip{
position:absolute;left:-9999px;top:0;z-index:200;
padding:12px 20px;border-radius:0 0 var(--r-md) 0;
background:var(--primary);color:var(--primary-ink);
font-family:'Sora',sans-serif;font-weight:900;font-size:.85rem;
text-decoration:none;
}
.skip:focus{left:0}
/* la cible du lien ne doit pas être masquée par l'en-tête collant */
#contenu{scroll-margin-top:90px}
/* Pied d'article : partir, ou partager. Deux boutons, pas plus — un pied
encombré ne fait cliquer sur rien. */
.art-pied{
display:flex;flex-wrap:wrap;gap:10px;
margin:26px 0 0;padding-top:20px;border-top:1px solid var(--stroke);
}
.art-pied .btn{flex:1 1 200px;justify-content:center}
/* Champ pré-rempli depuis un lien extérieur (?lieu=…) : sans ce signal, on ne
voit pas ce qui a changé et on croit que le lien n'a rien fait. */
.field-neuf{
animation:champNeuf 2.4s ease both;
}
@keyframes champNeuf{
0%, 70% { box-shadow:0 0 0 3px var(--primary); border-color:var(--primary) }
100% { box-shadow:0 0 0 0 transparent }
}
/* WCAG 2.5.8 (AA en 2.2) — CIBLE DE POINTAGE DE 24 px MINIMUM.
Mesuré : les liens du pied de page tombaient à 23 px de haut (il en manquait
UN), et la case de la politique de confidentialité à 16×16. Sur un écran
tactile, 16 px est en dessous de ce qu'un doigt atteint de façon fiable. */
.foot-links a{display:inline-flex;align-items:center;min-height:24px}
.privacy-check input[type="checkbox"]{
width:24px;height:24px;flex:none;
/* accent-color plutôt qu'un habillage sur mesure : la case garde le
comportement natif, donc le clavier et les lecteurs d'écran aussi */
accent-color:var(--primary);
}
.privacy-check{display:flex;align-items:flex-start;gap:10px}
/* ---- Papiers & formalités : sous-titres du panneau ---- */
.pan-h3{
font-family:'Sora',sans-serif;font-weight:900;font-size:.8rem;
text-transform:uppercase;letter-spacing:.07em;color:var(--txt);
margin:0 0 10px;
}
/* ---- Fenêtre d'installation : les étapes numérotées ----
Sur iPhone c'est le SEUL contenu utile de la fenêtre (Apple interdit le
bouton), donc les étapes doivent se lire d'un coup d'œil, pas se déchiffrer. */
.inst-pas{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.inst-pas li{font-size:.92rem;line-height:1.55;color:var(--txt)}
.inst-pas li::marker{font-family:'Sora',sans-serif;font-weight:900;color:var(--primary)}
.inst-pas strong{color:var(--txt);font-weight:800}
/* ============================================================
ERGONOMIE TACTILE
------------------------------------------------------------
⚠️ Tout est enfermé dans « (pointer:coarse) », c'est-à-dire les écrans qu'on
touche du doigt. Sur ordinateur la souris est précise et la densité actuelle
est un choix : l'élargir partout gonflerait l'interface de bureau sans
raison. Ces règles ne s'appliquent donc QUE là où elles servent.
Mesuré à 414 px avant correction : les puces du questionnaire faisaient
27 px de haut, la case « plusieurs pays » 26 px, les libellés de navigation
11 px. Apple recommande 44 px pour une cible au doigt, et 11 px de texte se
lit mal sur un téléphone tenu à bout de bras.
============================================================ */
@media (pointer:coarse){
/* Les puces sont l'interaction PRINCIPALE du questionnaire : c'est sur elles
qu'on tape le plus, elles doivent être les plus confortables. */
.chip, .pc-chip{ min-height:44px; padding-top:11px; padding-bottom:11px }
/* Cases à cocher : 26 px au doigt, c'est une cible qu'on rate. */
.field label.opt-check input, .privacy-check input[type="checkbox"]{
width:28px; height:28px;
}
/* L'œil du mot de passe : la zone de contact s'élargit, l'icône ne bouge pas. */
.pass-eye{ width:44px; height:44px }
.pass-wrap input{ padding-right:52px }
/* Les liens du pied de page, alignés sur la même règle. */
.foot-links a{ min-height:44px }
/* Navigation du bas : 11 px → 12 px, et l'icône reprend de l'air. Ce sont les
quatre libellés les plus lus de l'app. */
.catnav button{ font-size:.75rem; padding:8px 4px 7px }
.catnav button .ico{ font-size:1.45rem }
/* Le fil des étapes : même traitement, même raison. */
.steps .step{ font-size:.78rem; min-height:44px }
/* Boutons d'action des journées et du programme : ils étaient serrés. */
.tl-act, .plan-tab{ min-height:44px }
/* On respire un peu plus entre les cartes : au doigt, deux cartes collées
donnent l'impression d'un seul bloc. */
.card{ margin-bottom:16px }
}
/* ============================================================
CHAQUE SYSTÈME DANS SON IDIOME — BARRE DU BAS ET BOUTONS
------------------------------------------------------------
Un bouton ne « se sent » pas pareil sur iPhone et sur Android, et ce n'est
pas une question de goût : les deux systèmes ont des conventions de
MOUVEMENT que leurs utilisateurs ont intégrées sans y penser. Apple répond
par un ressort et de la matière translucide ; Android par une onde qui part
du contact et une pastille qui glisse. Reproduire la mauvaise donne une
impression de site étranger au téléphone.
⚠️ PORTÉE STRICTEMENT LIMITÉE, et c'est délibéré : la barre du bas, les
boutons, leurs animations. Rien d'autre. Le reste du design est commun aux
deux plateformes et doit le rester — sinon on entretient deux interfaces.
La classe vient de detecteOS() dans app.js. Sur ordinateur, aucun attribut
n'est posé : ces deux blocs ne s'appliquent donc pas, et la barre de bureau
(la colonne de droite) n'est pas touchée.
Les animations réduites sont déjà couvertes plus haut par la règle globale
« *{transition-duration:.01ms} » — rien à redire ici.
============================================================ */
/* ---------------------------------------------------------------
iOS — VERRE LIQUIDE
Le principe d'Apple : la barre n'est pas une surface posée SUR le contenu,
elle est une lentille À TRAVERS laquelle on le devine. D'où le flou du
fond, la saturation poussée (c'est elle qui donne l'effet « verre » et non
« brouillard »), et le liséré clair sur l'arête haute qui simule la
réfraction sur un bord biseauté.
--------------------------------------------------------------- */
:root[data-os="ios"] .catnav{
/* ⚠️ Le fond DOIT être translucide, sinon backdrop-filter n'a rien à
flouter et l'effet est simplement invisible. */
background:color-mix(in srgb, var(--secondary) 72%, transparent);
-webkit-backdrop-filter:blur(30px) saturate(180%);
backdrop-filter:blur(30px) saturate(180%);
border-top:.5px solid rgba(255,255,255,.18); /* l'arête, très fine */
border-radius:26px 26px 0 0;
box-shadow:0 -1px 24px rgba(0,0,0,.28);
}
/* Le reflet spéculaire : une ligne de lumière d'un pixel juste sous l'arête.
C'est ce détail qui fait lire « matière » plutôt que « transparence ». */
:root[data-os="ios"] .catnav::before{
content:'';position:absolute;inset:0 0 auto 0;height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
border-radius:inherit;pointer-events:none;
}
:root[data-os="ios"] .catnav button{
border:0;
border-radius:999px; /* la capsule, partout chez Apple */
/* Le ressort : le retour dépasse légèrement la cible avant de se poser.
C'est la signature du mouvement iOS, et elle tient dans cette courbe. */
transition:transform .34s cubic-bezier(.34,1.56,.64,1),
background .22s ease, color .22s ease;
}
/* Pression : on s'enfonce vite et net, on remonte en ressort (la transition
ci-dessus s'en charge au relâchement). */
:root[data-os="ios"] .catnav button:active{ transform:scale(.9) }
:root[data-os="ios"] .catnav button.on{
box-shadow:0 2px 10px rgba(0,0,0,.22);
border:0;
}
:root[data-os="ios"] .catnav button .ico{
transition:transform .34s cubic-bezier(.34,1.56,.64,1);
}
/* Les boutons de l'app suivent : capsule et ressort, rien de plus. */
:root[data-os="ios"] .btn{
border-radius:999px;
transition:transform .34s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
:root[data-os="ios"] .btn:active{ transform:scale(.96) }
/* ---------------------------------------------------------------
ANDROID — MATERIAL
Deux signatures, et ce sont elles qu'on reconnaît : la PASTILLE qui se
place derrière l'icône seule (jamais derrière le libellé), et l'ONDE qui
se propage à la pression. Les courbes sont celles de Material 3
(« emphasized decelerate »), plus franches au départ qu'un ease.
--------------------------------------------------------------- */
:root[data-os="android"] .catnav{
background:var(--secondary);
border-radius:0; /* Material va bord à bord, sans coins */
border-top:1px solid var(--stroke);
box-shadow:0 -2px 8px rgba(0,0,0,.22);
}
:root[data-os="android"] .catnav button{
border:0;background:transparent;
border-radius:18px;
overflow:hidden; /* indispensable : l'onde est rognée ici */
transition:color .25s cubic-bezier(.2,0,0,1);
}
/* ⚠️ LA PASTILLE EST SUR L'ICÔNE, PAS SUR LE BOUTON — c'est tout le motif
Material. Conséquence à ne pas rater : le LIBELLÉ se retrouve alors sur le
fond de la barre, plus sur le jaune. La règle groupée de fin de fichier lui
posait « --primary-ink », soit une encre foncée sur une barre sombre :
invisible. On la remet donc à l'encre normale, et on réserve l'encre foncée
à l'icône. */
:root[data-os="android"] .catnav button.on{
background:transparent;
box-shadow:none;
color:var(--txt);
}
:root[data-os="android"] .catnav button.on .ico{
background:var(--primary);
color:var(--primary-ink);
border-radius:999px;
padding:5px 18px;
transform:none; /* pas de sursaut : Material ne fait pas ça */
transition:background .25s cubic-bezier(.2,0,0,1), padding .25s cubic-bezier(.2,0,0,1);
}
/* L'onde. Un vrai ripple part du point de contact et demande du JavaScript ;
sur une cible de cette taille, un cercle centré est indiscernable — et ça
reste du CSS, donc rien à maintenir. */
:root[data-os="android"] .catnav button::after,
:root[data-os="android"] .btn::after{
content:'';position:absolute;left:50%;top:50%;
width:180%;aspect-ratio:1;
transform:translate(-50%,-50%) scale(0);
border-radius:50%;
background:currentColor;opacity:0;
pointer-events:none;
}
:root[data-os="android"] .catnav button:active::after,
:root[data-os="android"] .btn:active::after{
transform:translate(-50%,-50%) scale(1);
opacity:.16;
/* aller rapide, effacement lent : c'est ce déséquilibre qui fait « onde »
et non « clignotement » */
transition:transform .45s cubic-bezier(.2,0,0,1), opacity .12s linear;
}
:root[data-os="android"] .btn{
position:relative;overflow:hidden;
border-radius:20px; /* le rayon des boutons Material 3 */
transition:box-shadow .25s cubic-bezier(.2,0,0,1), transform .25s cubic-bezier(.2,0,0,1);
}
/* Material élève au lieu de déplacer : pas de translation, de l'ombre. */
:root[data-os="android"] .btn:active{
transform:none;
box-shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
}