/* site/site.css — la charte commune à toutes les pages du site public.
 *
 * Au gabarit de horlogeduvent.com (classes Tailwind et composants shadcn
 * relevés dans le paquet Lovable le 11 septembre 2026). Les couleurs, la
 * police et le rayon viennent des jetons de `src/habillage-site.css` : ce
 * sont les valeurs mêmes de l'original (marine = ocean-deep, sourd =
 * muted-foreground, papier = background). Cette feuille se charge APRÈS
 * `src/cadran.css`, dont elle corrige le `body` d'atelier (Montserrat,
 * 13 px, marge). */
*, *::before, *::after { box-sizing: border-box; }
/* La durée et la courbe des transitions de l'original (Tailwind
   `transition-*` : 150 ms, cubic-bezier(.4, 0, .2, 1)). */
:root { --transition-rapide: .15s cubic-bezier(.4, 0, .2, 1); }
body { margin: 0; padding: 0; font: 16px/1.5 var(--police); color: var(--encre); background: var(--papier); }
/* Les titres de l'original : la police du texte, en gras, interligne serré. */
h1, h2 { font-family: var(--police-titre); font-weight: 700; line-height: 1.25; color: var(--encre); text-wrap: balance; }
h3 { font-family: var(--police); font-weight: 600; line-height: 1.4; color: var(--encre); }
a { color: var(--marine); }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 1000; background: var(--carte); padding: 8px 12px; }

/* Le bandeau de campagne : 40 px, texte de 14 px, moyen, un peu espacé. */
.bandeau { position: relative; z-index: 60; margin: 0; padding: 10px 16px; background: var(--marine); color: var(--papier);
  text-align: center; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .025em;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); }
.bandeau a { color: var(--papier); text-decoration: none; }
.bandeau a:hover { text-decoration: underline; }
/* Ses deux messages alternent (site/commun.js pose `.defile`) : un seul à la
   fois, en fondu de 0,5 s. Sans `.defile`, ils restent côte à côte. */
.bandeau.defile .bandeau-sep, .bandeau.defile .bandeau-message:not(.actif) { display: none; }
.bandeau.defile a { display: inline-block; transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
.bandeau.defile a.efface { opacity: 0; }

/* L'en-tête de l'original : 80 px, translucide et flouté, qui reste en haut
   au défilement, son contenu dans le conteneur de 1 400 px à 16 px de marge
   (à 1 440 px de large, le logo commence à 36 px). */
.entete { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 80px; padding: 0 max(16px, calc((100% - 1400px) / 2 + 16px));
  background: color-mix(in srgb, var(--papier) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sonde); }
.marque { display: flex; align-items: center; gap: 12px; color: var(--encre); text-decoration: none; }
.marque-pastille { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--marine); color: var(--papier); }
.marque-pastille svg { width: 20px; height: 20px; }
.marque-nom { font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap; }
.marque-nom small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--sourd); }
@media (max-width: 639px) { .marque-nom small { display: none; } }
.entete nav { display: flex; gap: 32px; }
.entete nav a { color: var(--encre); text-decoration: none; font-weight: 500; transition: color var(--transition-rapide); }
.entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--marine); }
/* Quatre liens et le bouton de précommande : entre 960 et 1 179 px, le
   bouton de l'en-tête ne garde que le logo (comme sur téléphone) ; sous
   960 px, le menu laisse sa place — ses liens sont aussi dans le pied de
   page (spec, section 5). */
@media (min-width: 960px) and (max-width: 1179px) {
  .entete nav { gap: 24px; }
  .entete .btn-ulule:has(> img) { gap: 0; padding: 8px 12px; font-size: 0; }
}
@media (max-width: 959px) { .entete nav { display: none; } }

/* Les boutons de l'original (shadcn) : 40 px, texte de 14 px moyen, coins
   de 10 px, léger grossissement au survol. Le bouton de précommande est le
   geste principal du site (spec, section 2). */
.btn-ulule, .btn-lien { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 8px 16px; border-radius: var(--rayon); font-size: 14px; line-height: 20px; font-weight: 500;
  white-space: nowrap; text-decoration: none;
  transition: background-color var(--transition-rapide), border-color var(--transition-rapide), color var(--transition-rapide),
    box-shadow var(--transition-rapide), transform var(--transition-rapide); }
.btn-ulule { background: var(--marine); color: var(--papier); }
.btn-ulule:hover { background: color-mix(in srgb, var(--marine) 90%, transparent); transform: scale(1.05); }
.btn-lien { border: 2px solid var(--sonde); background: var(--papier); color: var(--encre); }
.btn-lien:hover { border-color: var(--marine); color: var(--marine); transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .btn-ulule:hover, .btn-lien:hover { transform: none; } }
/* Le fondu d'alternance des deux messages du bandeau (posé par commun.js via
   `.defile`) est la seule transition du site à ne pas déjà échapper à une
   demande de réduction des animations. */
@media (prefers-reduced-motion: reduce) { .bandeau.defile a { transition: none; } }
/* Le bouton se lit « Précommander sur [logo Ulule] ». Le logo est la version
   officielle pour fond sombre (kit « hori-dark » de fr.ulule.com/about/logos/),
   posée directement sur le marine. Le guide d'Ulule demande des couleurs
   intactes, un fond qui le laisse lisible et au moins 97 px de large à
   l'écran. Il ne prend jamais plus que sa place, même absent ou lent à
   venir : sans `flex: none` ni plafond, une image sans dimension s'étirait
   (et site/commun.js le remplace par le mot « Ulule » s'il ne se charge pas). */
.btn-ulule img { flex: none; width: 97px; height: auto; max-width: 97px; }
.btn-ulule:has(> img) { gap: 8px; padding-top: 8px; padding-bottom: 8px; }

/* Sur téléphone, le logo de la marque, son nom et le bouton tiennent sur une
   ligne : le bouton de l'en-tête n'y garde que le logo Ulule (97 px, le
   minimum du guide) ; son nom accessible reste « Précommander sur Ulule »
   (texte masqué par `font-size: 0`, logo à l'alt « Ulule »). Sans logo, il
   reprend son texte, sur deux lignes. */
@media (max-width: 560px) {
  .entete { gap: 10px; }
  .marque { gap: 10px; }
  .marque-pastille { width: 36px; height: 36px; }
  .marque-nom { font-size: 17px; }
  .bandeau { padding: 8px 16px; font-size: 13px; line-height: 18px; letter-spacing: 0; }
  .entete .btn-ulule { max-width: 128px; padding: 6px 12px; font-size: 13px; line-height: 16px; white-space: normal; text-align: center; }
  .entete .btn-ulule:has(> img) { max-width: none; gap: 0; padding: 8px 12px; font-size: 0; }
}
/* Sous 360 px, le nom de la marque (même réduit) et le bouton Ulule (qui ne
   peut pas descendre sous les 97 px du guide Ulule, voir plus haut) ne
   tiennent plus ensemble sur la ligne de l'en-tête : la page défilait
   horizontalement (mesuré à 320 px : 338 px de contenu pour 320 de fenêtre).
   On ne garde que la pastille ; le lien `.marque` porte un `aria-label` qui
   lui laisse un nom accessible même sans le texte visible. Rien ne change
   au-dessus de ce palier. */
@media (max-width: 359px) {
  .marque-nom { display: none; }
}

/* Les couleurs, comme dans le configurateur de l'original : un disque de
   64 px cerclé du filet des bordures, un anneau marine autour du choix. */
.pastilles i, .chip i { display: block; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--sonde);
  transition: transform var(--transition-rapide), box-shadow var(--transition-rapide); }
.pastilles button:hover i, .chip:hover i { transform: scale(1.1); }
.pastilles [aria-pressed="true"] i, .chip.on i { box-shadow: 0 0 0 2px var(--carte), 0 0 0 4px var(--marine); }
@media (prefers-reduced-motion: reduce) { .pastilles button:hover i, .chip:hover i { transform: none; } }

/* Le pied de page de l'original : marine, quatre colonnes dans 1 280 px,
   liens de 14 px à 70 % du blanc (60 % chez l'original : 70 % tient le
   contraste AA). */
.pied { margin-top: 64px; padding: 64px max(16px, calc((100% - 1280px) / 2)); background: var(--marine); color: var(--papier); }
#principal ~ .pied { margin-top: 0; }
.pied a { color: inherit; text-decoration: none; overflow-wrap: anywhere; transition: color var(--transition-rapide); }
.pied a:hover { color: var(--papier); }
.pied-grille { display: grid; gap: 48px; margin-bottom: 48px; }
@media (min-width: 768px) { .pied-grille { grid-template-columns: repeat(4, 1fr); } }
.pied-marque > * { margin: 0; }
.pied-marque > * + * { margin-top: 16px; }
.pied-nom { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 28px; font-weight: 700; }
.pied .marque-pastille { background: color-mix(in srgb, var(--papier) 10%, transparent); color: var(--papier); }
.pied-marque p:not(.pied-nom) { font-size: 14px; line-height: 1.625; color: color-mix(in srgb, var(--papier) 70%, transparent); }
.pied h2 { margin: 0 0 16px; font-family: var(--police); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--papier); }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; line-height: 20px; color: color-mix(in srgb, var(--papier) 70%, transparent); }
.pied .pied-contact { gap: 12px; }
.pied-contact li { display: flex; align-items: center; gap: 8px; }
.pied-contact svg { flex: none; width: 16px; height: 16px; }
.pied-bas { margin: 0; padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--papier) 10%, transparent);
  font-size: 14px; line-height: 20px; text-align: center; color: color-mix(in srgb, var(--papier) 70%, transparent); }
@media (min-width: 768px) { .pied-bas { text-align: left; } }