Logo 3D animé pour un site d'association

css/style.css · 4.4 Ko

/* ==========================================================================
 * css/style.css — Mise en page du site « Logo 3D »
 * Approche « mobile d'abord » : les styles de base sont pour un petit écran,
 * puis @media (min-width: …) ajoute des règles pour les écrans plus larges.
 * ========================================================================== */

/* ---- Variables de couleur (modifiez-les pour changer toute la page) ---- */
:root {
  --fond: #f4fbfb;
  --carte: #ffffff;
  --texte: #12323a;       /* contraste élevé sur fond clair */
  --accent: #0b4f6c;
  --accent-clair: #d9f1f0;
  --bordure: #b9dcdc;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  /* Empêche tout défilement horizontal, même à 360 px de large */
  overflow-x: hidden;
}

.noscript {
  margin: 0;
  padding: 12px 16px;
  background: #fff3cd;
  color: #5c4400;
}

/* ---- EN-TÊTE ---- */
.entete {
  display: flex;
  flex-wrap: wrap;          /* sur petit écran, les blocs passent à la ligne */
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e3f6f5, #fff7e0);
  border-bottom: 3px solid var(--bordure);
}

/* La boîte qui donne sa taille au canevas : Zdog la mesure (resize: true). */
.scene-logo {
  position: relative;
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
}

/* Le canevas remplit entièrement sa boîte.
   touch-action: none UNIQUEMENT ici : sur le canevas, le doigt fait tourner
   le logo au lieu de faire défiler la page. Ailleurs la page défile normalement. */
.zdog-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.zdog-canvas:active { cursor: grabbing; }

.entete-texte { flex: 1 1 180px; min-width: 0; }
.nom { margin: 0; font-size: 1.4rem; color: var(--accent); }
.slogan { margin: 2px 0 0; font-size: 0.95rem; }

.menu { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.menu a {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.menu a:hover, .menu a:focus-visible { background: var(--accent); color: #fff; }

/* ---- CONTENU ---- */
main { max-width: 760px; margin: 0 auto; padding: 16px; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.carte h2 { margin-top: 0; font-size: 1.2rem; color: var(--accent); }
.carte h2 img { vertical-align: -4px; }

.controles { display: grid; gap: 12px; }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ligne input[type="range"] { flex: 1 1 140px; min-width: 0; }

.bouton {
  font: inherit;
  padding: 10px 14px;           /* cible tactile confortable */
  min-height: 44px;
  border-radius: 10px;
  border: 2px solid var(--accent);
  background: var(--carte);
  color: var(--accent);
  cursor: pointer;
}
.bouton:hover { background: var(--accent-clair); }
.bouton[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Focus clavier bien visible (accessibilité) */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid #ff9f1c;
  outline-offset: 2px;
}

input[type="checkbox"] { width: 22px; height: 22px; }

code {
  background: var(--accent-clair);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
pre {
  background: #12323a;
  color: #f4fbfb;
  padding: 12px;
  border-radius: 10px;
  overflow-x: auto;             /* le bloc de code défile, pas la page */
  font-size: 0.85rem;
}
pre code { background: none; padding: 0; color: inherit; }

/* ---- PIED DE PAGE : bande de vagues (motif SVG libre de droits) ---- */
.pied {
  padding: 24px 16px;
  text-align: center;
  background: url("../medias/motif-vagues.svg") repeat-x center / auto 40px, #e0f7fa;
  background-position: center bottom;
  padding-bottom: 56px;
}
.pied p { margin: 0; }

/* ---- Écrans plus larges ---- */
@media (min-width: 640px) {
  .entete { flex-wrap: nowrap; padding: 12px 32px; }
  .scene-logo { width: 140px; height: 140px; }
  .nom { font-size: 1.8rem; }
  .menu { width: auto; }
}

/* Respect de « réduire les animations » côté CSS */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}