/* SGA — feuille commune du site (v7, 27/09/2026) : monde « film ». Pierre chaude tirée de la vidéo SGA (#DAD7D2), encre bleu nuit,
   IBM Plex Sans en contrastes extrêmes (200 / 700), bleu Signal #2F5BD3 pour l'action et le focus, pied de page bleu nuit sur toutes les pages.
   Source des couleurs de marque : ../branding/sga-tokens.json. Polices hébergées ici (/assets/polices), jamais de CDN. */
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/polices/ibm-plex-sans-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/polices/ibm-plex-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/polices/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/polices/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/polices/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/polices/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/polices/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/polices/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* marque */
  --sga-nuit: #14213d; --sga-nuit-2: #243a66; --sga-nuit-3: #0d1629; --sga-bg: #f5f5f2; --sga-surface: #ffffff; --sga-text: #0b0b0b; --sga-muted: #474c56;
  --sga-border: #cfccc6; --sga-border-field: #8c8c86; --sga-signal: #2f5bd3; --sga-signal-on-dark: #7aa2ff; --sga-grey-on-dark: #b9bdc6; --sga-tint: #dfe6f7;
  /* monde film : pierre tirée de la vidéo */
  --pierre: #dad7d2; --pierre-claire: #e8e6e1; --pierre-voile: rgba(218, 215, 210, .86);
  --sga-font-human: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sga-font-system: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sga-radius-sm: 6px; --sga-radius-md: 12px; --sga-radius-lg: 20px;
  --sga-ease: cubic-bezier(.16, 1, .3, 1); --sga-ease-vif: cubic-bezier(.3, .9, .4, 1); --sga-motion-fast: 150ms; --sga-motion-normal: 420ms;
  /* anciens noms (pages générées par build.js) → mêmes valeurs */
  --fond: var(--sga-bg); --blanc: var(--sga-surface); --ink: var(--sga-text); --muted: var(--sga-muted); --nuit: var(--sga-nuit); --nuit-2: var(--sga-nuit-2);
  --lueur: var(--sga-signal-on-dark); --trait: var(--sga-border); --pale: #fafaf8;
  --ombre: none; --ombre-douce: none; --r-l: var(--sga-radius-lg); --r-m: var(--sga-radius-md);
  --display: var(--sga-font-human); --texte: var(--sga-font-human);
  --max: 1320px; --gout: clamp(20px, 4vw, 56px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--sga-nuit-2) var(--pierre-claire); }
body { margin: 0; background: var(--sga-bg); color: var(--sga-text); font: 400 17px/1.6 var(--sga-font-human); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: var(--sga-nuit); text-underline-offset: .22em; text-decoration-thickness: 1px; }
@media (hover: hover) { a:not(.btn):hover { color: var(--sga-signal); } }
::selection { background: var(--sga-nuit); color: #fff; }
:focus-visible { outline: 2px solid var(--sga-signal); outline-offset: 3px; border-radius: 3px; }
.sombre :focus-visible, .pied :focus-visible { outline-color: var(--sga-signal-on-dark); }
.sombre a, .sombre a:hover { color: var(--sga-signal-on-dark); }
.sombre .boutique a, .sombre .boutique a:hover { color: var(--sga-nuit); }
.saut { position: absolute; left: 12px; top: -60px; background: var(--sga-nuit); color: #fff; padding: 10px 16px; border-radius: var(--sga-radius-sm); z-index: 100; }
.saut:focus { top: 12px; color: #fff; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lbl { font: 500 12px/1.3 var(--sga-font-system); letter-spacing: .08em; text-transform: uppercase; color: var(--sga-muted); }
.lbl b { color: var(--sga-nuit); font-weight: 500; }

/* ---- En-tête : symbole seul à gauche, verre de pierre après le premier écran ---- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(245, 245, 242, .8); border-bottom: 1px solid transparent;
  transition: background var(--sga-motion-normal) var(--sga-ease), border-color var(--sga-motion-normal) var(--sga-ease); }
@supports (backdrop-filter: blur(1px)) { .entete { backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); } }
.entete.reduit { border-bottom-color: rgba(20, 33, 61, .12); }
.entete .rang { max-width: var(--max); margin: 0 auto; padding: 12px var(--gout); display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--sga-nuit); text-decoration: none; }
.logo svg { width: 38px; height: 38px; transition: transform var(--sga-motion-fast) var(--sga-ease-vif); }
.logo:hover { color: var(--sga-nuit); } .logo:hover svg { transform: rotate(-8deg); }
.nav { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav a { color: var(--sga-text); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 0; position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--sga-motion-fast) var(--sga-ease-vif); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a:not(.btn):hover { color: var(--sga-nuit); }
.nav a.btn { padding: 12px 20px; color: #fff; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--sga-nuit); border-radius: 999px; font: 500 15px/1 var(--sga-font-human); color: var(--sga-nuit); padding: 12px 18px; min-height: 44px; cursor: pointer; }
@media (max-width: 880px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--pierre-claire); padding: 8px var(--gout) 22px; border-bottom: 1px solid var(--sga-border); }
  .nav.ouvert { display: flex; }
  .nav a { padding: 16px 0; font-size: 19px; border-bottom: 1px solid var(--sga-border); }
  .nav a:not(.btn)::after { content: none; }
  .nav a.btn { margin-top: 16px; justify-content: center; border-bottom: 0; }
}

/* ---- Boutons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font: 500 16px/1 var(--sga-font-human); text-decoration: none; border-radius: 999px; padding: 17px 26px; min-height: 52px;
  transition: background var(--sga-motion-fast) var(--sga-ease-vif), color var(--sga-motion-fast) var(--sga-ease-vif), border-color var(--sga-motion-fast) var(--sga-ease-vif), transform var(--sga-motion-fast) var(--sga-ease-vif); border: 1px solid transparent; cursor: pointer; }
.btn::after { content: ""; width: 14px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform var(--sga-motion-fast) var(--sga-ease-vif); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn-plein { background: var(--sga-nuit); color: #fff; }
@media (hover: hover) { .btn-plein:hover { background: var(--sga-signal); color: #fff; } }
.btn-clair { background: transparent; color: var(--sga-nuit); border-color: var(--sga-nuit); }
@media (hover: hover) { .btn-clair:hover { background: var(--sga-nuit); color: #fff; } }
.btn-blanc { background: #fff; color: var(--sga-nuit); }
.btn-blanc:hover { background: var(--sga-tint); color: var(--sga-nuit); }
.btn-contour { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-contour:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.btn-petit { padding: 12px 18px; min-height: 44px; font-size: 14px; }
.btn-petit::after { content: none; }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--sga-nuit); text-decoration: none; padding: 8px 0; min-height: 44px; }
.lien-fleche::after { content: ""; width: 14px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform var(--sga-motion-fast) var(--sga-ease-vif); }
.lien-fleche:hover { color: var(--sga-signal); } .lien-fleche:hover::after { transform: translateX(4px); }

/* ---- Typographie : contrastes extrêmes ---- */
.titre-xl { font: 200 clamp(46px, 7.2vw, 118px)/.94 var(--sga-font-human); letter-spacing: -.045em; margin: 0; color: var(--sga-text); text-wrap: balance; }
.titre-xl strong { display: block; font-weight: 700; color: var(--sga-nuit); letter-spacing: -.04em; }
.titre-l { font: 200 clamp(36px, 4.8vw, 76px)/1 var(--sga-font-human); letter-spacing: -.04em; margin: 0 0 22px; text-wrap: balance; }
.titre-l strong { font-weight: 700; color: var(--sga-nuit); }
.titre-m { font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--sga-font-human); letter-spacing: -.015em; margin: 0 0 10px; color: var(--sga-nuit); }
.chapeau { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--sga-muted); max-width: 58ch; }
.petit { font-size: 14px; color: var(--sga-muted); }
p { max-width: 68ch; }

/* ---- Mise en page ---- */
.cadre { max-width: var(--max); margin: 0 auto; padding: 0 var(--gout); }
section { scroll-margin-top: 90px; }
.bloc { padding: clamp(80px, 11vw, 160px) 0; }
.carte { background: var(--sga-surface); border: 1px solid var(--sga-border); border-radius: var(--sga-radius-lg); position: relative; }
.carte-int { padding: clamp(26px, 4vw, 52px); }

/* ---- Pied : bleu nuit sur toutes les pages ---- */
.pied { background: var(--sga-nuit-3); color: #d7dbe4; font-size: 15px; padding: clamp(56px, 7vw, 96px) 0 40px; }
.pied a { color: #fff; text-decoration: none; }
@media (hover: hover) { .pied a:hover { color: var(--sga-signal-on-dark); text-decoration: underline; } }
.pied .pied-haut { display: flex; align-items: center; gap: 18px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pied .logo { color: #fff; }
.pied .signature { font: 200 clamp(28px, 3.4vw, 44px)/1.05 var(--sga-font-human); letter-spacing: -.03em; color: #fff; margin: 0; }
.pied .pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 40px; padding: 36px 0; }
.pied .pied-grille p { margin: 0 0 12px; color: var(--sga-grey-on-dark); font: 500 12px/1.3 var(--sga-font-system); letter-spacing: .08em; text-transform: uppercase; }
.pied nav, .pied .contact-pied { display: flex; flex-direction: column; gap: 4px; }
.pied nav a, .pied .contact-pied a { padding: 6px 0; display: inline-block; }
.pied .pied-bas { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: var(--sga-grey-on-dark); }
.pied .pied-bas p { margin: 0; }
.pied .pied-bas nav { flex-direction: row; flex-wrap: wrap; gap: 4px 22px; }
.pied .pied-bas nav a { color: var(--sga-grey-on-dark); padding: 4px 0; }
.pied .pied-bas nav a:hover { color: #fff; }
.pied .bouton-lien, .bouton-lien { font: inherit; color: var(--sga-grey-on-dark); background: none; border: 0; padding: 4px 0; text-decoration: underline; cursor: pointer; min-height: 24px; }
.pied .bouton-lien:hover { color: #fff; }

/* ---- Apparition au chargement (pages secondaires) : un seul moment ---- */
.entree > * { opacity: 0; transform: translateY(18px); filter: blur(6px); animation: monter .9s var(--sga-ease) forwards; }
.entree > *:nth-child(1) { animation-delay: .08s; } .entree > *:nth-child(2) { animation-delay: .2s; }
.entree > *:nth-child(3) { animation-delay: .32s; } .entree > *:nth-child(4) { animation-delay: .44s; } .entree > *:nth-child(5) { animation-delay: .56s; }
@keyframes monter { to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entree > * { opacity: 1; transform: none; filter: none; }
}
/* WCAG 1.4.10 : un mot très long dans un grand titre ne doit pas élargir la page à 320 px */
.tete > * { min-width: 0; }
.titre-xl, .titre-l { overflow-wrap: break-word; hyphens: manual; }