/* DESIGN 3 (8 nov. 2026) : le design 1 (style.css) avec ce que Lori a aimé du design 2. Ce fichier n'ajoute que les
   différences ; il est toujours chargé (designs 3 et 4). Les règles html[data-design="4"] ne servent qu'à la version
   d'essai (js/design.js). */

/* Accueil : tout est là tout de suite (le design 1 construisait l'écran en 2 à 3 s, le bouton Start en dernier) */
.apparait, .monte { animation-duration: 0.55s; animation-delay: calc(var(--d, 0) * 30ms); }
.rouleau .piste { animation-duration: 0.9s; animation-delay: 0.3s; }
.choix-design button[data-choix-design="4"] { font-size: 15px; letter-spacing: 0.06em; }
html[data-design="3"] .seulement-4, html[data-design="4"] .seulement-3 { display: none; }
.entete-droite { display: inline-flex; align-items: center; gap: 12px; }
/* design 4 : bouton haut-parleur de l'accueil (son.js) */
.bouton-son { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 51, 153, 0.07); color: var(--bleu); }
.bouton-son svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bouton-son .son-non, .bouton-son[aria-pressed="false"] .son-oui { display: none; }
.bouton-son[aria-pressed="false"] .son-non { display: block; }
.bouton-son[aria-pressed="false"] { color: var(--gris-600); }

/* Bouton Share, en haut à droite (recto et verso) */
#bouton-partager svg { width: 17px; height: 17px; stroke-width: 1.7; stroke-linejoin: round; }

/* Verso, frise des cinq sites : ton site (point bleu sous le code) ; toucher un site le choisit */
.frise li[data-code] { cursor: pointer; }
.frise li[data-code]::before { content: ""; position: absolute; inset: -8px -7px; }
.frise .mien .code { color: var(--bleu); }
.frise .mien .code::after { content: ""; display: block; width: 4px; height: 4px; margin: 4px auto 0; border-radius: 50%; background: var(--bleu); }

/* Design 4 : bandeau du bas en une ligne (« Near you · Boudry · Switzerland ») : le compte à rebours et le rang sont
   déjà sur l'étiquette bleue de la carte. Toucher le bandeau passe au site suivant. */
html[data-design="4"] .arrivees {
  display: flex; align-items: center; gap: 12px; width: auto; max-width: 100%;
  height: 46px; padding: 0 18px 0 16px; border-radius: 23px; cursor: pointer;
}
html[data-design="4"] .arr-haut { flex: none; }
html[data-design="4"] .arr-rang, html[data-design="4"] .arr-compte, html[data-design="4"] .frise { display: none; }
html[data-design="4"] .arr-lieu { margin: 0; gap: 8px; min-width: 0; }
html[data-design="4"] .arr-ville { font-size: 23px; line-height: 1; padding-top: 2px; }
html[data-design="4"] #arr-titre { display: inline-flex; align-items: center; gap: 8px; color: var(--bleu); }
html[data-design="4"] #arr-titre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.14); }

/* Design 4 : légende des lumières du monde, au-dessus du bandeau (une lumière = une personne qui a scanné la carte).
   Le point reprend l'or des lumières : c'est la clé de lecture de la carte. */
.legende-lumieres { gap: 9px; height: 32px; padding: 0 15px 0 13px; border-radius: 16px; font: 600 9.5px/1 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bleu); }
.legende-lumieres i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 0 2px rgba(255, 196, 90, 0.22), 0 0 9px 2px rgba(255, 196, 90, 0.8); }

/* Photo et vidéo Share : aperçu sur la caméra, carte en verre blanc */
.photo3 {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: calc(var(--haut) + 10px) 14px calc(var(--bas) + 10px);
  background: rgba(1, 29, 88, 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.35s var(--doux);
}
.photo3.ouvert { opacity: 1; }
.photo3-cadre { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 420px); padding: 14px; border-radius: 24px; }
.photo3-cadre .micro { margin: 2px 0 0; }
.photo3-cadre img, .photo3-cadre video {
  display: block; max-width: 100%; max-height: 58vh; border-radius: 14px; box-shadow: 0 14px 34px -14px rgba(1, 29, 88, 0.55);
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto;
}
.photo3-aide { margin: 0; font: 400 11px/1.3 var(--texte); color: var(--gris-600); }
.photo3-actions { display: flex; align-items: center; gap: 8px; width: 100%; }
.photo3-actions .bouton-principal { flex: 1; max-width: none; }
.photo3-actions .bouton-secondaire { text-decoration: none; }
.photo3-actions .puce { flex: none; height: 56px; width: 48px; border-radius: 16px; }

/* Design 4 : choix « Photo / Video » sous le bouton Share, et enregistrement en cours */
.choix-partage {
  position: fixed; z-index: 25; top: calc(var(--haut) + 50px); right: 12px; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.25s var(--doux), transform 0.35s var(--doux); pointer-events: auto;
}
.choix-partage.ouvert { opacity: 1; transform: none; }
.choix-partage .puce { justify-content: flex-start; gap: 10px; height: 44px; padding: 0 16px 0 12px; font: 700 10px/1 var(--texte); letter-spacing: 0.2em; text-transform: uppercase; }
.choix-partage svg { width: 16px; height: 16px; fill: none; stroke: var(--bleu); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.enregistrement {
  position: fixed; z-index: 25; top: calc(var(--haut) + 50px); right: 12px; display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px 0 12px; font: 700 10px/1 var(--texte); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bleu);
}
.enregistrement i { width: 9px; height: 9px; border-radius: 50%; background: #e0242f; animation: clignote 1s ease-in-out infinite; }