/* Espace Floriane : charte Anatole (jaune #fcca3d, turquoise #0cd9e5, rose #f96182, Josefin Sans, verre depoli, degrades) */
@font-face { font-family: 'Josefin Sans'; src: url('/fonts/josefin-sans.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }
:root {
  --encre: #232c63; --encre-douce: #4a5288; --jaune: #fcca3d; --turquoise: #0cd9e5; --rose: #f96182;
  --jaune-pale: #fff4d6; --turquoise-pale: #dcfafc; --rose-pale: #ffe3ea; --vert: #19b37d;
  --verre: rgba(255, 255, 255, .74); --bord-verre: rgba(255, 255, 255, .9);
  --ombre: 0 10px 30px -12px rgba(35, 44, 99, .28); --rayon: 22px;
  --nav: 68px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--encre); font: 17px/1.45 'Josefin Sans', system-ui, sans-serif;
  background: #fff9ee;
  background-image:
    radial-gradient(60vmax 50vmax at 110% -10%, rgba(12, 217, 229, .32), transparent 60%),
    radial-gradient(55vmax 45vmax at -15% 25%, rgba(252, 202, 61, .38), transparent 60%),
    radial-gradient(60vmax 50vmax at 80% 110%, rgba(249, 97, 130, .26), transparent 60%);
  background-attachment: fixed;
  padding-bottom: calc(var(--nav) + 96px + env(safe-area-inset-bottom));
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 .7em; }
.cadre { max-width: 720px; margin: 0 auto; padding: 14px 16px 0; }
.discret { color: var(--encre-douce); font-size: 15px; }
.petit { font-size: 14px; }

/* en-tete */
.entete.large { max-width: 1400px; }
.entete { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; max-width: 720px; margin: 0 auto; }
.entete img { height: 26px; width: auto; display: block; }
.entete .plus { text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--verre); border: 1px solid var(--bord-verre); }

/* cartes en verre depoli */
.carte {
  background: var(--verre); border: 1px solid var(--bord-verre); border-radius: var(--rayon); box-shadow: var(--ombre);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  padding: 16px; margin: 0 0 14px;
}
.carte.jaune { background: linear-gradient(135deg, rgba(252, 202, 61, .9), rgba(255, 232, 160, .85)); }
.carte.turquoise { background: linear-gradient(135deg, rgba(12, 217, 229, .85), rgba(160, 240, 245, .8)); }
.carte.rose { background: linear-gradient(135deg, rgba(249, 97, 130, .9), rgba(255, 170, 190, .85)); color: #fff; }
.section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 22px 4px 10px; }
.section-titre h2 { margin: 0; }
.compteur { font-weight: 700; color: var(--encre-douce); font-size: 15px; }

/* boutons */
.bouton, button {
  font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--encre); color: #fff; transition: transform .12s ease, box-shadow .12s ease;
}
.bouton:active, button:active { transform: scale(.97); }
.bouton.jaune, button.jaune { background: var(--jaune); color: var(--encre); }
.bouton.turquoise, button.turquoise { background: var(--turquoise); color: var(--encre); }
.bouton.rose, button.rose { background: var(--rose); color: #fff; }
.bouton.clair, button.clair { background: rgba(255, 255, 255, .85); color: var(--encre); box-shadow: inset 0 0 0 1.5px rgba(35, 44, 99, .15); }
.bouton.large, button.large { width: 100%; }
.bouton.mini, button.mini { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.envoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.envoi .bouton, .envoi button { min-width: 0; padding-inline: 10px; font-size: 16px; }
.envoi .large-2 { grid-column: 1 / -1; }
.envoi > form { display: block; }
.collant { position: sticky; bottom: calc(var(--nav) + 10px + env(safe-area-inset-bottom)); margin-top: 18px; z-index: 5; }
.collant button { box-shadow: 0 10px 24px -8px rgba(233, 169, 15, .8); }
.bouton, button { white-space: nowrap; }
.bouton svg, button svg { width: 20px; height: 20px; flex: none; }
.rangee { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rangee > form { display: contents; }
.grille-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grille-actions .bouton { flex-direction: column; gap: 2px; min-height: 66px; padding: 8px 4px; border-radius: 18px; font-size: 14px; }
.grille-actions .bouton svg { width: 22px; height: 22px; }
.inactif { opacity: .38; pointer-events: none; }

/* formulaires */
label { display: block; font-weight: 700; font-size: 15px; margin: 12px 0 6px; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--encre); padding: 12px 14px; min-height: 50px;
  border-radius: 14px; border: 1.5px solid rgba(35, 44, 99, .16); background: rgba(255, 255, 255, .92); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(12, 217, 229, .22); }
textarea { min-height: 110px; resize: vertical; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puces label { margin: 0; font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 0 1.5px rgba(35, 44, 99, .14); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.puces input:checked + label { background: var(--encre); color: #fff; box-shadow: none; }
.puces input:focus-visible + label { outline: 3px solid var(--turquoise); outline-offset: 2px; }
.puces.chaleur input[value=CHAUDE]:checked + label { background: var(--rose); }
.puces.chaleur input[value=TIEDE]:checked + label { background: var(--jaune); color: var(--encre); }
.puces.chaleur input[value=FROIDE]:checked + label { background: var(--turquoise); color: var(--encre); }

/* messages */
.bandeau { border-radius: 16px; padding: 12px 16px; margin: 0 0 14px; font-weight: 700; }
.bandeau.ok { background: var(--turquoise-pale); }
.bandeau.info { background: var(--jaune-pale); }
.bandeau.erreur { background: var(--rose-pale); }

/* pastilles */
.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(35, 44, 99, .08); white-space: nowrap; }
.e-A_CONTACTER { background: rgba(35, 44, 99, .08); }
.e-MESSAGE_ENVOYE { background: #e3efff; }
.e-RDV_CALE { background: #dfe3ff; }
.e-DEMO_FAITE { background: #f0e1ff; }
.e-INSTALLE { background: var(--turquoise-pale); }
.e-ACTIF { background: #d9f7e8; color: #0b6b4a; }
.e-PAYANT { background: var(--jaune); }
.e-PAS_POUR_LINSTANT { background: rgba(35, 44, 99, .05); color: var(--encre-douce); }
.point { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.r-CHAUDE { background: var(--rose); } .r-TIEDE { background: var(--jaune); } .r-FROIDE { background: var(--turquoise); }

/* objectif d'equipe */
.objectif .barre { height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .7); overflow: hidden; margin: 10px 0 6px; box-shadow: inset 0 1px 3px rgba(35, 44, 99, .12); }
.objectif .barre span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--turquoise), var(--jaune), var(--rose)); min-width: 18px; }
.objectif .chiffre { font-size: 34px; font-weight: 700; line-height: 1; }

/* elements de liste */
.liste { list-style: none; margin: 0; padding: 0; }
.element { display: flex; gap: 12px; align-items: center; padding: 13px 4px; border-bottom: 1px solid rgba(35, 44, 99, .08); text-decoration: none; }
.element:last-child { border-bottom: 0; }
.element .corps { flex: 1; min-width: 0; }
.element .nom { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.element .nom span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action { display: grid; gap: 10px; }
.action .heure { font-size: 26px; font-weight: 700; }
.action-tete { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.vide { text-align: center; padding: 10px 6px 4px; }
.vide img { width: 120px; height: auto; display: block; margin: 0 auto 8px; }

/* fiche */
.fiche-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.modeles > input { position: absolute; opacity: 0; }
.onglets { display: flex; gap: 6px; background: rgba(35, 44, 99, .06); padding: 5px; border-radius: 999px; margin-bottom: 12px; }
.onglets label { flex: 1; margin: 0; text-align: center; padding: 10px 6px; border-radius: 999px; cursor: pointer; font-size: 15px; }
.panneau { display: none; }
#m-CHAUD:checked ~ .onglets label[for=m-CHAUD], #m-TIEDE:checked ~ .onglets label[for=m-TIEDE], #m-CURIOSITE:checked ~ .onglets label[for=m-CURIOSITE] { background: #fff; box-shadow: 0 2px 8px rgba(35, 44, 99, .15); }
#m-CHAUD:checked ~ .p-CHAUD, #m-TIEDE:checked ~ .p-TIEDE, #m-CURIOSITE:checked ~ .p-CURIOSITE { display: block; }
.bulle { background: #fff; border-radius: 18px 18px 18px 6px; padding: 12px 14px; margin: 0 0 12px; box-shadow: 0 2px 10px rgba(35, 44, 99, .08); }
.envoye-ok { outline: 3px solid var(--turquoise); outline-offset: 3px; animation: pouls 1.4s ease-in-out 3; }
@keyframes pouls { 50% { transform: scale(1.03); } }
.etapes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.etapes button { min-height: 46px; font-size: 15px; background: rgba(255, 255, 255, .85); color: var(--encre); box-shadow: inset 0 0 0 1.5px rgba(35, 44, 99, .14); }
.etapes button.courante { background: var(--encre); color: #fff; box-shadow: none; }
.coches { list-style: none; padding: 0; margin: 0; }
.coches li label { display: flex; gap: 12px; align-items: center; font-weight: 400; font-size: 17px; margin: 0; padding: 11px 2px; border-bottom: 1px solid rgba(35, 44, 99, .07); }
.coches input { width: 26px; height: 26px; accent-color: var(--vert); flex: none; }
.historique { list-style: none; padding: 0; margin: 0; }
.historique li { padding: 10px 0 10px 18px; border-left: 2px solid rgba(12, 217, 229, .6); position: relative; }
.historique li::before { content: ''; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--turquoise); }
details > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; font-size: 24px; }
details[open] > summary::after { content: '–'; }

/* pipeline */
.pipeline { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 16px; margin: 0 -16px; }
.colonne { flex: 0 0 82%; max-width: 320px; scroll-snap-align: start; background: rgba(255, 255, 255, .45); border-radius: var(--rayon); padding: 12px; border: 1px solid var(--bord-verre); min-height: 200px; }
.colonne.survol { background: rgba(12, 217, 229, .18); }
.colonne h3 { display: flex; justify-content: space-between; font-size: 16px; }
.mini-carte { background: #fff; border-radius: 16px; padding: 10px 12px; margin: 0 0 8px; box-shadow: 0 3px 10px rgba(35, 44, 99, .08); }
.mini-carte[draggable=true] { cursor: grab; }
.mini-carte a.mini-nom { display: flex; align-items: baseline; gap: 7px; text-decoration: none; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.mini-carte a.mini-nom .point { flex: none; position: relative; top: -1px; }
.mini-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; min-height: 38px; }
.mini-bas .discret { line-height: 1.25; }
.mini-bas form { flex: none; }
.mini-carte button { min-height: 38px; padding: 4px 12px; font-size: 14px; background: var(--turquoise-pale); color: var(--encre); }
@media (min-width: 900px) {
  .cadre.large { max-width: 1400px; }
  .pipeline { margin: 0; padding: 4px 0 16px; }
  .pipeline { gap: 10px; }
  .colonne { flex: 1 1 0; min-width: 140px; padding: 10px; }
  .colonne h3 { min-height: 2.4em; }
}

/* carte de la tournee */
#carte { height: 52vh; min-height: 300px; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); margin-bottom: 14px; z-index: 0; }
.repere { background: var(--encre); color: #fff; border: 3px solid #fff; border-radius: 50%; width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 4px 10px rgba(35, 44, 99, .35); }

/* ville et roue */
.scene { position: relative; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); background: linear-gradient(180deg, #c9f6f9, #fff3d1 70%, #ffe0e8); touch-action: none; }
.scene canvas { display: block; width: 100%; height: 100%; }
.scene.ville { height: 62vh; min-height: 360px; }
.scene .aide { position: absolute; left: 12px; bottom: 10px; font-size: 13px; background: rgba(255, 255, 255, .8); padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.gain-points { display: flex; flex-direction: column; gap: 2px; text-decoration: none; margin: 0 0 14px; padding: 12px 16px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(25, 179, 125, .16), rgba(12, 217, 229, .22)); border: 1px solid rgba(25, 179, 125, .3); animation: pouls 1.2s ease-in-out 1; }
.gain-points b { font-size: 18px; color: #0b6b4a; }
.gain-points b.palier { color: var(--encre); font-size: 16px; }
.gain-points span { font-size: 14px; color: var(--encre-douce); }
.etapes .etape-lien { min-height: 46px; font-size: 15px; background: rgba(255, 255, 255, .85); color: var(--encre); box-shadow: inset 0 0 0 1.5px rgba(35, 44, 99, .14); width: 100%; }
.mini-carte a.fleche { flex: none; min-height: 38px; padding: 4px 12px; font-size: 14px; border-radius: 999px; background: var(--jaune-pale); display: inline-flex; align-items: center; }
.medaille-mini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; background: #e7e9f3; color: var(--encre-douce); }
.medaille-mini.ok { background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--jaune) 45%, #e9a90f); color: var(--encre); }
.segments { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; margin: 12px 0 8px; }
.segments .seg { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .75); overflow: hidden; box-shadow: inset 0 1px 3px rgba(35, 44, 99, .12); position: relative; }
.segments .seg i { display: block; height: 100%; background: linear-gradient(90deg, var(--turquoise), var(--jaune)); border-radius: 999px; }
.segments .seg.ok i { background: linear-gradient(90deg, var(--jaune), var(--rose)); }
.segments .seg.vise { outline: 2px solid var(--rose); outline-offset: 1px; }
.frise { overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 0 6px; }
.frise ol { list-style: none; margin: 0; padding: 0 12px; display: flex; }
.frise li { flex: 0 0 104px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; scroll-snap-align: center; padding-top: 2px; }
.frise .trait { position: absolute; top: 17px; left: -50%; width: 100%; height: 6px; background: #e7e9f3; border-radius: 999px; overflow: hidden; z-index: 0; }
.frise li:first-child .trait { left: 0; width: 50%; }
.frise .trait i { display: block; height: 100%; background: linear-gradient(90deg, var(--turquoise), var(--jaune)); }
.frise .noeud { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #e7e9f3; color: var(--encre-douce); border: 3px solid #fff; }
.frise li.ok .noeud { background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--jaune) 45%, #e9a90f); color: var(--encre); }
.frise li.courant .noeud { background: var(--turquoise); color: var(--encre); box-shadow: 0 0 0 4px rgba(12, 217, 229, .25); }
.frise li.vise .noeud { background: var(--rose); color: #fff; box-shadow: 0 0 0 4px rgba(249, 97, 130, .25); }
.frise li.cap b { color: #b07800; }
.frise b { font-size: 14px; margin-top: 6px; }
.frise small { font-size: 12px; line-height: 1.25; color: var(--encre-douce); padding: 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bulle-ville { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
  background: #fff; color: var(--encre); padding: 8px 14px; border-radius: 16px; box-shadow: 0 8px 22px -8px rgba(35, 44, 99, .45); text-align: center; max-width: 220px; }
.bulle-ville b { font-size: 16px; line-height: 1.2; }
.bulle-ville span { font-size: 13px; color: var(--encre-douce); }
.bulle-ville a { pointer-events: auto; margin-top: 6px; }
.scene.ville canvas { cursor: grab; }
.ville2d { display: block; width: 100%; height: auto; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge { text-align: center; padding: 14px 10px; border-radius: 18px; background: rgba(255, 255, 255, .6); border: 1px solid var(--bord-verre); }
.badge .medaille { width: 58px; height: 58px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 28px;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--jaune) 40%, #e9a90f); box-shadow: 0 6px 14px rgba(233, 169, 15, .45), inset 0 -4px 0 rgba(0, 0, 0, .08); }
.badge.a-venir { opacity: .7; }
.badge.a-venir .medaille { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #e7e9f3 45%, #cfd3e6); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .06); filter: grayscale(1); }
.badge .titre { font-weight: 700; font-size: 15px; line-height: 1.2; }
.badge .progres { font-size: 13px; color: var(--encre-douce); margin-top: 4px; }
.scene.roue { height: 420px; }
.gain { text-align: center; }
.gain .lot { font-size: 30px; font-weight: 700; margin: 6px 0; }
.fete { display: flex; gap: 14px; align-items: center; }
.fete img { width: 84px; height: auto; flex: none; }

/* navigation du bas */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: center;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid rgba(35, 44, 99, .08); }
.nav .in { display: flex; width: 100%; max-width: 560px; }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; font-size: 12px; font-weight: 700;
  padding: 6px 2px; border-radius: 14px; color: var(--encre-douce); min-height: 52px; justify-content: center; }
.nav a svg { width: 24px; height: 24px; }
.nav a.actif { color: var(--encre); background: rgba(252, 202, 61, .35); }
.ajout { position: fixed; right: 18px; bottom: calc(var(--nav) + 18px + env(safe-area-inset-bottom)); z-index: 51; width: 62px; height: 62px; border-radius: 50%;
  background: var(--jaune); color: var(--encre); display: grid; place-items: center; box-shadow: 0 10px 24px -6px rgba(233, 169, 15, .7); text-decoration: none; }
.ajout svg { width: 30px; height: 30px; }

.connexion { max-width: 420px; margin: 0 auto; padding: 8vh 16px 16px; }
.connexion .logo { width: 170px; height: auto; display: block; margin: 0 auto 14px; }
.qr { background: #fff; padding: 14px; border-radius: 18px; width: 220px; margin: 10px auto; }
.qr svg, .qr img { width: 100%; height: auto; display: block; }
code.cle { display: block; font-size: 15px; letter-spacing: .08em; word-break: break-all; background: rgba(35, 44, 99, .06); padding: 10px; border-radius: 12px; text-align: center; }
input.code { font-size: 28px; letter-spacing: .4em; text-align: center; }

/* visible seulement pour les lecteurs d'ecran (la ville 2D quand la 3D est affichee) */
.lecteur-ecran { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.guide h2 { margin-top: 20px; } .guide ol { padding-left: 20px; } .guide li { margin-bottom: 6px; }