/* Portfolio Jeanne Digaire : styles globaux.
   La mise en page reste en styles en ligne dans le HTML (fidèle à l'export Claude Design) ;
   ici : polices auto-hébergées, survols, animations, adaptations mobile, visionneuse. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/dm-sans.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/archivo.woff2) format('woff2');
}

html { scroll-behavior: smooth; }
body { margin: 0; overflow-wrap: break-word; text-wrap: pretty; background: #F5F1EC; color: #131211; font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #131211; text-decoration: none; }
a:hover { color: #2E31D6; }
::selection { background: #2E31D6; color: #F5F1EC; }
img { max-width: 100%; }
h1 { margin: 0; font-weight: inherit; font-size: inherit; }
section, header { scroll-margin-top: 48px; }
[data-track]::-webkit-scrollbar { height: 0; }
:focus-visible { outline: 2px solid #2E31D6; outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Survols (remplacent les style-hover de l'export) */
.h-link:hover { color: #2E31D6 !important; }
.h-btn { transition: background 220ms, color 220ms, border-color 220ms; }
.h-btn:hover { background: #2E31D6 !important; color: #F5F1EC !important; border-color: #2E31D6 !important; }
.h-pill { transition: background 220ms, color 220ms; }
.h-pill:hover { background: #2E31D6 !important; color: #FFFFFF !important; }
.h-btn-dark { transition: background 220ms, color 220ms; }
.h-btn-dark:hover { background: #F5F1EC !important; color: #131211 !important; }
img[data-zoom] { cursor: zoom-in; }

/* Vidéos : vignette cliquable, le lecteur YouTube n'est chargé qu'au clic */
.yt-facade { position: absolute; inset: 0; display: block; cursor: pointer; }
.yt-play { transition: transform 220ms, background 220ms; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { transform: translate(-50%,-50%) scale(1.08) !important; background: #F7CEDE !important; }
.yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Intro : écran bleu 1,5 s, purement CSS */
@keyframes introDot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes introOut { 0%, 72% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.intro { position: fixed; inset: 0; z-index: 300; background: #2E31D6; display: flex; align-items: center; justify-content: center; gap: 9px; animation: introOut 1500ms ease forwards; pointer-events: none; }
.intro span { width: 7px; height: 7px; border-radius: 50%; background: #F5F1EC; animation: introDot 1100ms ease-in-out infinite; }
.intro span:nth-child(2) { animation-delay: 160ms; }
.intro span:nth-child(3) { animation-delay: 320ms; }

/* Apparition au défilement (activée par le JS uniquement) */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 850ms cubic-bezier(.22,.61,.36,1), transform 850ms cubic-bezier(.22,.61,.36,1); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* Menu mobile */
.menu { position: fixed; inset: 0; z-index: 180; background: rgba(19,18,17,0.5); }
.menu[hidden] { display: none; }

/* Visionneuse */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(19,18,17,0.94); display: flex; align-items: center; justify-content: center; padding: clamp(24px,5vw,72px); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox-wrap { width: 100%; height: 100%; overflow: hidden; cursor: zoom-in; }
.lightbox-img { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)); }
.lightbox.is-big .lightbox-wrap { overflow: auto; cursor: zoom-out; }
/* width auto : la largeur suit le ratio de l'image (aspect-ratio posé par le JS), sinon rien ne grandit */
.lightbox.is-big .lightbox-img { width: auto; height: 170%; min-width: 100%; margin: 0 auto; background-position: top center; filter: none; }
.lightbox-ui { position: absolute; font: 500 9px/1 'DM Sans', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #F5F1EC; background: none; border: 0; padding: 0; cursor: pointer; }
.lightbox-nav { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; }
.lightbox-nav[hidden] { display: none; }

@media (max-width: 680px) {
  [data-m="nw"] { white-space: normal !important; }
  [data-m="rail"] { display: none !important; }
  nav { left: 0 !important; padding: 0 14px !important; gap: 14px !important; }
  [data-m="sec"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-m="info"], [data-m="cols"] { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  [data-m="cols"] > * { grid-column: auto !important; }
  [data-m="lp"] { gap: 28px !important; }
  [data-m="bar"] { flex-wrap: wrap !important; gap: 10px !important; }
  [data-m="head"] { gap: 12px !important; align-items: baseline !important; }
  [data-m="idx"], [data-m="navcontact"] { display: none !important; }
  [data-m="burger"] { display: inline-flex !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-sheet] { transition: none !important; }
}

@media print {
  .intro, nav, [data-m="rail"], .menu, .lightbox { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Pages secondaires (mentions légales, 404) : maquette pages/mentions-legales.dc.html */
.page-head, .page, .page-foot { max-width: 1220px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.page-head { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.page-home { font: 500 10px/1 'DM Sans', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #131211; }
.page-back { font: 500 9px/1 'DM Sans', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #2E31D6; }
.page-back:hover { color: #131211; }
.page { padding-top: clamp(56px, 9vw, 120px); padding-bottom: 80px; }
.page h1 { margin: 0 0 clamp(40px, 6vw, 72px); font: 700 clamp(48px, 7.4vw, 112px)/0.92 'Archivo', sans-serif; letter-spacing: -0.04em; }
.page-body { display: grid; max-width: 820px; }
.page-body section { display: grid; gap: 12px; padding: 26px 0; border-top: 1px solid #DCD6CC; }
.page-body section:first-child { border-top-color: #131211; }
.page-body section:last-of-type { border-bottom: 1px solid #DCD6CC; }
.page h2, .page-date { margin: 0; font: 500 9px/1.7 'DM Sans', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #6E6A62; }
.page p { margin: 0; font: 400 15px/1.65 'DM Sans', sans-serif; color: #3A372F; }
.page p a { color: #2E31D6; border-bottom: 1px solid currentColor; }
.page p a:hover { color: #131211; }
.page .page-date { margin-top: 26px; }
.page-foot { padding-top: 36px; padding-bottom: 44px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; border-top: 1px solid #DCD6CC; font: 500 9px/1.6 'DM Sans', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #6E6A62; }
@media (max-width: 680px) {
  .page-head, .page, .page-foot { padding-left: 20px; padding-right: 20px; }
}