/* Site eazia.net, version 3 « le vaisseau et les trois univers » (28/09/2026).
   Base commune : polices locales, couleurs de la charte EAZIA, en-tête, boutons, pied de page. */
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url('fonts/poppins-800.woff2') format('woff2'); }
@font-face { font-family: Figtree; font-weight: 300 900; font-display: swap; src: url('fonts/figtree.woff2') format('woff2'); }

:root {
  --vert: #13BE76; --vert-texte: #0B7D4F; --turquoise: #0BB6BE; --bleu: #1668E3;
  --degrade: linear-gradient(100deg, #10C46E 0%, #0BB6C2 48%, #1E72E6 100%);
  --encre: #0F1B33; --encre-2: #475569; --nuit: #0B1124; --blanc: #fff;
  --titre: Poppins, 'Montserrat', system-ui, sans-serif;
  --texte: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --entete: 72px;
  --aise: cubic-bezier(.22, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } /* rien ne dépasse sur le côté au téléphone (grain, léger zoom du film) */
body { margin: 0; font-family: var(--texte); font-size: 17px; line-height: 1.6; color: var(--encre); background: #fff; -webkit-font-smoothing: antialiased; }
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--titre); line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saut-lien { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.saut-lien:focus { top: 12px; }

/* En-tête fixe */
.entete { position: fixed; inset: 0 0 auto 0; height: var(--entete); z-index: 40; display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(16px, 3vw, 44px); color: var(--encre); background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(15, 27, 51, .08); transition: background .4s, color .4s, border-color .4s, transform .5s var(--aise), opacity .4s; }
.marque { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--titre); letter-spacing: .01em; text-decoration: none; }
.marque svg { width: 30px; height: 36px; }
/* Menu : trois boutons encadrés d'un liseré au dégradé EAZIA, avec ce qu'il y a derrière chaque verbe (variante A choisie par Julien, 30/09) */
.menu { display: flex; gap: 12px; margin-left: auto; font-weight: 700; font-size: 15px; }
.menu a { display: grid; justify-items: center; text-decoration: none; padding: 7px 16px; line-height: 1.15; color: var(--encre); border-radius: 14px; border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--degrade) border-box; transition: transform .2s var(--aise), box-shadow .2s; }
.menu a small { font-size: 12px; font-weight: 500; color: var(--encre-2); margin-top: 2px; white-space: nowrap; }
.menu a:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(22, 104, 227, .16); }
/* Onglet de la page en cours : inversé, bleu nuit de la charte et texte blanc (09/10, demande de Julien) */
.menu a[aria-current='page'] { color: #fff; background: linear-gradient(#0B1124, #0B1124) padding-box, var(--degrade) border-box;
  box-shadow: 0 6px 16px rgba(11, 17, 36, .28); cursor: default; }
.menu a[aria-current='page'] small { color: rgba(255, 255, 255, .78); }
.menu a[aria-current='page']:hover { transform: none; }
.rdv { display: grid; justify-items: center; text-decoration: none; line-height: 1.1; }
.rdv b { display: inline-block; font: 700 15px/1 var(--texte); padding: 12px 18px; border-radius: 999px; background: linear-gradient(180deg, #1D74EE, #1459C9); color: #fff;
  box-shadow: 0 6px 16px rgba(22, 104, 227, .28); transition: transform .25s var(--aise), box-shadow .25s; } /* bleu EAZIA, plus apaisant que le noir (Julien, 30/09) ; les pages de service le recolorent à leur univers */
.rdv:hover b { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 104, 227, .34); }
.rdv small { font-size: 12px; margin-top: 4px; opacity: .8; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--texte); padding: 17px 26px; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none; background: var(--encre); color: #fff; transition: transform .25s var(--aise), box-shadow .25s; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 27, 51, .25); }
.lien { font-weight: 600; text-underline-offset: 4px; }

/* Mention IA */
.mention-ia { font-size: 12.5px; line-height: 1.3; letter-spacing: .01em; }

/* Bandes noires de cinéma et blanc de passage */
.bandes::before, .bandes::after { content: ''; position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 60; transition: height .7s var(--aise); pointer-events: none; }
.bandes::before { top: 0; } .bandes::after { bottom: 0; }
.bandes.actif::before, .bandes.actif::after { height: max(0px, calc((100vh - 100vw / 2.39) / 2)); min-height: 9vh; }

/* Grain de film, très léger, pour unifier des plans générés séparément */
.grain { position: fixed; inset: -60px; z-index: 35; pointer-events: none; opacity: .055; background: url('img/grain.png'); animation: grain 1.2s steps(6) infinite; mix-blend-mode: multiply; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-24px, 14px); } 40% { transform: translate(18px, -22px); } 60% { transform: translate(-12px, -30px); } 80% { transform: translate(30px, 20px); } 100% { transform: translate(0, 0); } }

/* Pied de page */
.pied { position: relative; z-index: 2; padding: 44px clamp(16px, 4vw, 64px) 56px; font-size: 14.5px; line-height: 1.55; color: #AEB9CF; background: var(--nuit); }
.pied p { max-width: 78ch; margin: 0 0 10px; }
.pied a { color: #fff; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; } /* liens des pages légales (26/10) */

@media (max-width: 1080px) {
  .menu { gap: 8px; }
  .menu a { padding: 8px 12px; }
  .menu a small { display: none; }
}
@media (max-width: 860px) {
  :root { --entete: 60px; }
  .menu { display: none; }
  .rdv { margin-left: auto; }
  .rdv b { font-size: 14px; padding: 11px 14px; }
  .rdv small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Adresse e-mail en texte + bouton qui la copie (08/10, plus de lien qui ouvre une messagerie) ; bouton visible seulement avec JavaScript */
.mail { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mail__adresse { font-weight: 600; user-select: all; }
.mail__copier { display: none; }
.js .mail__copier { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s; }
.mail__copier:hover, .mail__copier:focus-visible { opacity: 1; background: rgba(127, 127, 127, .14); }
.mail__copier svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mail.copie .mail__copier { opacity: 1; color: #13BE76; }
.mail__ok { font-size: .88em; color: inherit; opacity: .85; }
.mail__ok:empty { display: none; }
.marque span { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; } /* EAZIA au dégradé de la charte dans l'en-tête (Julien, 08/10) */