/* Image des cartes de l'accueil cliquable (lien posé par tools/cover-links.py) */
.wp-block-cover > .cover-link { position: absolute; inset: 0; z-index: 2; }
.wp-block-cover .coming-soon { pointer-events: none; }

/* --- Agrandissement des images des pages projet (public/js/site.js) --- */
.wp-lightbox-container .lightbox-trigger { display: none !important; } /* ancien bouton WordPress, inactif */
figure.zoomable { position: relative; }
figure.zoomable img { cursor: zoom-in; }
.zoom-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27, 24, 21, .62); color: #fff; cursor: zoom-in;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .45);
  transition: transform .15s ease, background .15s ease;
}
.zoom-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
figure.zoomable:hover .zoom-btn, .zoom-btn:focus-visible { background: #FF014F; transform: scale(1.08); }

.zoom-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 64px; background: rgba(12, 10, 9, .92);
}
.zoom-overlay[hidden] { display: none; }
.zoom-overlay figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.zoom-overlay img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px -20px #000; }
.zoom-overlay figcaption { color: #e9e4dc; font-size: 14px; line-height: 1.4; text-align: center; max-width: 900px; }
.zoom-overlay button {
  position: absolute; border: 0; border-radius: 50%; cursor: pointer;
  width: 46px; height: 46px; font-size: 30px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .12);
}
.zoom-overlay button:hover, .zoom-overlay button:focus-visible { background: #FF014F; }
.zoom-close { top: 14px; right: 14px; }
.zoom-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.zoom-next { right: 10px; top: 50%; transform: translateY(-50%); }
.zoom-nav[hidden] { display: none; }
@media (max-width: 600px) {
  .zoom-overlay { padding: 56px 8px; }
  .zoom-prev, .zoom-next { top: auto; bottom: 10px; transform: none; }
}

/* --- « Tools I built for myself » : même écart entre les deux rangées que dans les projets (30 px) --- */
#projects .tools-row-1 { margin-bottom: 0 !important; }
#projects .tools-row-2 { margin-top: 30px !important; }
/* 4 cartes par rangée, même largeur dans les deux rangées (la 2e en a 3) */
@media (min-width: 782px) {
  #projects .tools-row > .wp-block-column { flex: 0 0 calc((100% - 3 * var(--wp--preset--spacing--30)) / 4) !important; box-sizing: border-box; }
}

/* Esperluette décorative (« The Hunt & The Waypoint ») : Playfair Display italique, réduite au seul caractère & */
@font-face { font-family: 'Amp'; src: url('/fonts/amp-playfair-italic.woff2') format('woff2'); unicode-range: U+0026; font-display: swap; }
.amp { font-family: 'Amp', 'Palatino Linotype', Georgia, serif; font-style: normal; font-weight: 400; font-size: 1.3em; line-height: 0; padding: 0 .06em; }

/* Captures l'une sous l'autre (page sans poster, ex. The Hunt & The Waypoint) au lieu du carrousel */
.nawell-carousel.shots-stacked { flex-direction: column !important; overflow: visible; gap: 24px; }
.nawell-carousel.shots-stacked .wp-block-image { flex: none; width: 100%; }

/* The Lantern : mosaïque des 60 cartes (chaque carte s'agrandit au clic, via le zoom de site.js) */
.nawell-carousel.lantern-deck { display: grid !important; grid-template-columns: repeat(10, 1fr); gap: 4px; padding: 8px; background: #0d1636; border-radius: 8px; overflow: visible; }
.nawell-carousel.lantern-deck figure.wp-block-image:not(#individual-image) { flex: none; width: auto !important; margin: 0 !important; }
.nawell-carousel.lantern-deck img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 2 / 3; border-radius: 2px !important; cursor: zoom-in; transition: transform .15s ease; }
.nawell-carousel.lantern-deck img:hover { transform: scale(1.06); }
.lantern-deck .zoom-btn, .lantern-deck figcaption { display: none; }
@media (max-width: 600px) { .nawell-carousel.lantern-deck { grid-template-columns: repeat(6, 1fr); } }
.lantern-note { margin-top: 10px !important; opacity: .75; }
/* Captures de téléphone (The Lantern) : petites, avec un bord de téléphone, agrandissables au clic */
.nawell-carousel.phone-shots { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 14px; overflow: visible; padding-bottom: 0; }
.nawell-carousel.phone-shots figure.wp-block-image:not(#individual-image), .phone-shots .phone-scroll { flex: 0 0 calc((100% - 14px) / 2) !important; width: auto !important; max-width: 230px; margin: 0 !important; }
/* Téléphone qui défile : l'écran défile, la barre vidéo reste en bas (comme dans l'appli) */
.phone-scroll { position: relative; aspect-ratio: 923 / 1809; border: 5px solid #1b1815; border-radius: 22px; overflow: hidden; box-sizing: border-box; background: #0d1636; }
.phone-scroll__screen { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9a227 transparent; }
.phone-scroll__screen img { display: block; width: 100%; height: auto; padding-bottom: var(--bar); box-sizing: content-box; }
.phone-scroll__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; }
.phone-scroll__hint { position: absolute; top: 42%; right: 6px; padding: 2px 8px; border-radius: 10px; background: rgba(13, 22, 54, .85); color: #e8c25a; font-size: 11px; letter-spacing: .5px; pointer-events: none; transition: opacity .3s; }
.phone-scroll.scrolled .phone-scroll__hint { opacity: 0; }
.nawell-carousel.phone-shots img { display: block; width: 100% !important; height: auto !important; border: 5px solid #1b1815; border-radius: 22px !important; box-sizing: border-box; cursor: zoom-in; }
.phone-shots figure.wp-block-image .zoom-btn { display: none; }

/* Flèche rouge « New » sur les cartes de l'accueil (projets de moins de 2 mois, posée par site.js d'après data-new-since) */
.fam-panel[data-new-since] { position: relative; overflow: visible !important; }
/* Toujours au même endroit, en haut à droite de la carte (elle a préféré l'ordre au désordre).
   Style technique (sa demande) : l'étiquette apparaît sans rebond, puis le trait se trace à vitesse constante,
   comme une table traçante (linear), et la pointe pleine s'imprime d'un coup à la fin. */
.new-arrow { position: absolute; top: -10px; right: -22px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; opacity: 0; transition: opacity .3s linear; }
.new-arrow.in { opacity: 1; }
.new-arrow__label { background: var(--wp--preset--color--accent, #f9004d); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 11px; box-shadow: 0 3px 8px rgba(249, 0, 77, .35); }
/* Le trait (10 px) est centré en x = 45 : avec margin-right 15 px, il part à ~24 px du bord droit, donc sous « New » comme sous « Updated » */
.new-arrow svg { width: 54px; height: 46px; margin-right: 15px; margin-top: -1px; color: var(--wp--preset--color--accent, #f9004d); overflow: visible; }
.new-arrow__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.new-arrow__head { opacity: 0; }
.new-arrow.in .new-arrow__line { transition: stroke-dashoffset 1.4s linear .5s; stroke-dashoffset: 0; }
.new-arrow.in .new-arrow__head { transition: opacity .12s linear 1.9s; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .new-arrow__line { stroke-dashoffset: 0 !important; transition: none !important; } .new-arrow__head { opacity: 1 !important; transition: none !important; } }
@media (max-width: 781px) { .new-arrow { right: -6px; } }

/* Téléphone qui défile, en grand (clic ou loupe) : même écran qui défile, barre vidéo en bas, presque toute la hauteur de la fenêtre */
figure.phone-scroll.zoomable { cursor: zoom-in; }
.phone-scroll .zoom-btn { top: 8px; right: 8px; width: 32px; height: 32px; }
.phone-scroll .zoom-btn svg { width: 17px; height: 17px; }
.phone-zoom__stage { display: flex; justify-content: center; }
.phone-scroll.phone-scroll--big { height: min(calc(100vh - 140px), 980px); width: auto; max-width: 92vw; margin: 0; cursor: auto; border-width: 8px; border-radius: 34px; box-shadow: 0 20px 60px -20px #000; }
.phone-scroll--big .phone-scroll__hint { font-size: 14px; padding: 4px 12px; }
.phone-zoom .phone-scroll img { max-width: 100%; max-height: none; width: 100%; height: auto; border-radius: 0; box-shadow: none; object-fit: fill; }

/* Teo et Pixel, mascottes cachées (une par page, posées par site.js) : petites et immobiles (pas d'effet au survol,
   sa demande) ; 5 s après avoir été vues, elles disparaissent en pixels (site.js) */
.mascot { position: absolute; z-index: 4; width: auto; pointer-events: auto; cursor: default; filter: drop-shadow(0 2px 2px rgba(27, 24, 21, .18)); }

/* Version française : pas de Majuscule À Chaque Mot dans les titres (le thème met text-transform: capitalize) */
html[lang^="fr"] h1, html[lang^="fr"] h2, html[lang^="fr"] h3, html[lang^="fr"] h4, html[lang^="fr"] h5 { text-transform: none !important; }