/* Digitalmuz — socle commun aux pages (maquette).
   Aucune ressource externe : police Poppins hébergée dans assets/fonts, couleurs tirées du logo. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/poppins-800.woff2") format("woff2"); }

:root {
  /* Couleurs du logo */
  --ciel: #69c3ee;        /* bleu du mot « DIGITAL » */
  --ambre: #f5b301;       /* jaune du trombone et du curseur */
  --noir: #000;           /* noir du mot « MUZ » */
  /* Déclinaisons */
  --azur: #14709e;        /* bleu assez foncé pour porter du texte blanc */
  --azur-fonce: #0f5a80;
  --nuit: #0a2233;        /* fond des bandeaux sombres */
  --nuit-2: #0f3049;
  --encre: #0b1b26;       /* texte courant */
  --gris: #556773;        /* texte secondaire */
  --trait: #d3e2ec;       /* bordures */
  --brume: #ebf6fc;       /* fond bleu très clair */
  --ciel-clair: #cfeafa;
  --ambre-clair: #fdf1cc;
  --blanc: #fff;

  --rayon: 16px;
  --rayon-grand: 28px;
  --rayon-petit: 10px;
  --largeur: 1200px;
  --marge: 24px;
  --ombre: 0 24px 60px -18px rgba(10, 52, 80, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--azur); text-underline-offset: 3px; }
a:hover { color: var(--azur-fonce); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; border-radius: 6px; }
sup { font-size: .55em; line-height: 0; }

h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }

.enveloppe { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.cache-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lien-evitement { position: absolute; left: 8px; top: -60px; background: var(--blanc); padding: 10px 14px; border-radius: var(--rayon-petit); z-index: 100; }
.lien-evitement:focus { top: 8px; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 26px;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-plein { background: var(--azur); color: var(--blanc); }
.btn-plein:hover { background: var(--azur-fonce); color: var(--blanc); }
.btn-ambre { background: var(--ambre); color: var(--encre); box-shadow: 0 10px 24px -10px rgba(190, 130, 0, .7); }
.btn-ambre:hover { background: #ffc524; color: var(--encre); transform: translateY(-1px); }
.btn-noir { background: var(--encre); color: var(--blanc); }
.btn-noir:hover { background: #000; color: var(--blanc); transform: translateY(-1px); }
.btn-blanc { background: var(--blanc); color: var(--encre); }
.btn-blanc:hover { background: #f3fafe; color: var(--encre); transform: translateY(-1px); }
.btn-contour { background: var(--blanc); color: var(--azur); border-color: var(--trait); }
.btn-contour:hover { border-color: var(--azur); color: var(--azur-fonce); }
.btn-clair { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.45); }
.btn-clair:hover { border-color: var(--blanc); color: var(--blanc); }
.btn-petit { min-height: 40px; padding: 7px 18px; font-size: .875rem; white-space: nowrap; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(211, 226, 236, .8); }
.entete-ligne { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.entete-logo { flex: none; display: block; }
.entete-logo img { width: 172px; }
.entete-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.entete-nav a {
  display: block; padding: 8px 14px; border-radius: 999px;
  color: var(--encre); text-decoration: none; font-size: .9375rem; font-weight: 500; white-space: nowrap;
}
.entete-nav a:hover { background: var(--brume); color: var(--azur-fonce); }
.entete-nav a[aria-current="page"] { background: var(--brume); color: var(--azur-fonce); font-weight: 600; }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.entete-lien { color: var(--encre); font-weight: 500; font-size: .9375rem; text-decoration: none; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.entete-lien:hover { background: var(--brume); }
.entete-menu { display: none; width: 44px; height: 44px; border: 1px solid var(--trait); border-radius: 50%; background: var(--blanc); align-items: center; justify-content: center; }
.entete-menu span, .entete-menu span::before, .entete-menu span::after { display: block; width: 18px; height: 2px; background: var(--encre); border-radius: 2px; content: ""; position: relative; }
.entete-menu span::before { position: absolute; top: -6px; }
.entete-menu span::after { position: absolute; top: 6px; }

@media (max-width: 960px) {
  .entete-ligne { flex-wrap: wrap; gap: 12px; min-height: 62px; padding-block: 8px; }
  .entete-logo { margin-right: auto; }
  .entete-logo img { width: 140px; }
  .entete-menu { display: inline-flex; order: 3; }
  .entete-actions { order: 2; }
  .entete-nav { display: none; order: 5; width: 100%; flex-direction: column; align-items: stretch; margin: 0; padding-bottom: 8px; }
  .entete-nav.ouvert { display: flex; }
  .entete-nav a { padding: 12px 14px; }
}

/* L'en-tête des membres porte plus de liens et le bouton permanent : il passe au menu replié dès 1320 px. */
@media (max-width: 1320px) {
  .entete-membre .entete-ligne { flex-wrap: wrap; gap: 12px; min-height: 62px; padding-block: 8px; }
  .entete-membre .entete-logo { margin-right: auto; }
  .entete-membre .entete-menu { display: inline-flex; order: 3; }
  .entete-membre .entete-actions { order: 2; }
  .entete-membre .entete-nav { display: none; order: 5; width: 100%; flex-direction: column; align-items: stretch; margin: 0; padding-bottom: 8px; }
  .entete-membre .entete-nav.ouvert { display: flex; }
  .entete-membre .entete-nav a { padding: 12px 14px; }
}

/* Pied de page */
.pied { background: var(--nuit); color: #c2d6e2; font-size: .9375rem; }
.pied a { color: #e7f2f8; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-block: 64px 44px; }
.pied-logo { width: 180px; margin-bottom: 18px; }
.pied-marque p { max-width: 34ch; }
.pied h2 { font-size: 1rem; font-weight: 600; color: var(--blanc); letter-spacing: 0; margin-bottom: 14px; }
.pied li + li { margin-top: 8px; }
.pied-bas { border-top: 1px solid rgba(255,255,255,.12); padding-block: 20px; font-size: .8125rem; color: #93adbd; }
@media (max-width: 800px) {
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-block: 44px 28px; }
  .pied-marque { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --marge: 18px; }
}
@media (max-width: 420px) {
  .entete-ligne { gap: 10px; }
  .entete-logo img { width: 116px; }
  .entete-actions .btn-petit { padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}