Mode clair / sombre et thèmes de saison

page-contact.php

@@ -0,0 +1,90 @@
+<?php
+/* Page Contact : 4 actions utiles (email, téléphone, LinkedIn, CV) en grandes lignes interactives.
+   Liens de réseaux : seuls les vrais profils (LinkedIn, GitHub) sont gardés depuis les options. */
+get_header();
+$email = yb2026_id('email');
+$tel   = yb2026_id('telephone');
+$cv    = home_url('/wp-content/uploads/cv/CV_Yasser_Boulayoune.pdf');
+$cv_v  = @filemtime(ABSPATH . 'wp-content/uploads/cv/CV_Yasser_Boulayoune.pdf');
+
+$linkedin = '';
+if (function_exists('have_rows') && have_rows('reseaux', 'option')) {
+    while (have_rows('reseaux', 'option')) {
+        the_row();
+        $lien = get_sub_field('reseaux_lien');
+        $url  = is_array($lien) ? ($lien['url'] ?? '') : $lien;
+        if (preg_match('#linkedin\.com/in/#i', (string) $url)) $linkedin = $url;
+    }
+}
+$actions = array(
+    /* Email et téléphone : protégés (jamais en clair dans le HTML, voir yb2026_pv) */
+    array('k' => 'EMAIL', 'big' => $email, 'href' => 'mailto:' . $email, 'act' => 'ÉCRIRE ↗', 'copy' => $email, 'cursor' => "M'ÉCRIRE", 'protect' => true),
+    array('k' => 'TÉLÉPHONE', 'big' => $tel, 'href' => yb2026_tel_href($tel), 'act' => 'APPELER ↗', 'copy' => $tel, 'cursor' => 'APPELER', 'protect' => true),
+);
+if ($linkedin) $actions[] = array('k' => 'LINKEDIN', 'big' => 'Yasser Boulayoune', 'href' => $linkedin, 'act' => 'VOIR LE PROFIL ↗', 'blank' => true, 'cursor' => 'LINKEDIN');
+$actions[] = array('k' => 'CV', 'big' => 'Télécharger mon CV', 'href' => $cv . ($cv_v ? '?v=' . $cv_v : ''), 'act' => 'PDF ↓', 'blank' => true, 'cursor' => 'TÉLÉCHARGER', 'preview' => home_url('/wp-content/uploads/cv/cv-apercu.png'));
+?>
+
+<div class="ct">
+    <section class="ct-open page-wrap">
+        <div class="kicker" data-reveal><?php echo esc_html(mb_strtoupper(yb2026_id('accroche'))); ?></div>
+        <a class="cta__title ct-title" <?php echo yb2026_pv_href('mailto:' . $email); ?> data-cursor-label="M'ÉCRIRE" data-reveal>TRAVAILLONS<br><span class="outline-lime">ENSEMBLE →</span></a>
+        <div class="ct-meta" data-reveal>
+            <span><?php echo esc_html(mb_strtoupper(yb2026_location_long())); ?></span>
+            <span><?php echo esc_html(mb_strtoupper(yb2026_id('mobilite'))); ?></span>
+            <span>À LYON, IL EST <b class="lime" data-clock>--:--</b></span>
+        </div>
+    </section>
+
+    <ul class="ct-list">
+        <?php foreach ($actions as $i => $a) : ?>
+            <li class="ct-row" data-reveal<?php echo !empty($a['preview']) ? ' data-preview="' . esc_url($a['preview']) . '" data-cv' : ''; ?>>
+                <span class="ct-row__k"><span class="lime"><?php echo esc_html(str_pad($i + 1, 2, '0', STR_PAD_LEFT)); ?></span> <?php echo esc_html($a['k']); ?></span>
+                <?php $p = !empty($a['protect']); $href = $p ? yb2026_pv_href($a['href']) : 'href="' . esc_url($a['href']) . '"'; ?>
+                <a class="ct-row__big" <?php echo $href; ?><?php echo !empty($a['blank']) ? ' target="_blank" rel="noopener"' : ''; ?><?php echo $a['k'] === 'CV' ? ' data-cv' : ''; ?> data-cursor-label="<?php echo esc_attr($a['cursor']); ?>"><?php echo $p ? yb2026_pv($a['big']) : esc_html($a['big']); ?></a>
+                <span class="ct-row__acts">
+                    <?php if (!empty($a['copy'])) : ?><button type="button" class="ct-copy" data-pv-copy="<?php echo esc_attr(yb2026_obf($a['copy'])); ?>">COPIER</button><?php endif; ?>
+                    <a class="ct-row__act" <?php echo $href; ?><?php echo !empty($a['blank']) ? ' target="_blank" rel="noopener"' : ''; ?><?php echo $a['k'] === 'CV' ? ' data-cv' : ''; ?>><?php echo esc_html($a['act']); ?></a>
+                </span>
+            </li>
+        <?php endforeach; ?>
+    </ul>
+    <div class="ct-preview" aria-hidden="true"><img alt=""></div>
+    <div class="ct-toast" role="status" aria-live="polite"></div>
+</div>
+
+<script>
+/* Heure locale à Lyon + copie au presse-papiers + aperçu du CV qui suit la souris */
+(function () {
+  const clk = document.querySelector('[data-clock]');
+  const tick = () => { if (clk) clk.textContent = new Intl.DateTimeFormat('fr-FR', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Paris' }).format(new Date()); };
+  tick(); setInterval(tick, 15000);
+  const toast = document.querySelector('.ct-toast');
+  document.querySelectorAll('.ct-copy').forEach(b => b.addEventListener('click', async () => {
+    if (!b.dataset.copy && window.YBProtect) YBProtect.reveal();
+    try { await navigator.clipboard.writeText(b.dataset.copy); toast.textContent = 'Copié : ' + b.dataset.copy; }
+    catch (e) { toast.textContent = b.dataset.copy; }
+    toast.classList.add('is-on'); clearTimeout(toast._t); toast._t = setTimeout(() => toast.classList.remove('is-on'), 1800);
+  }));
+  const prev = document.querySelector('.ct-preview');
+  if (!prev || matchMedia('(pointer: coarse)').matches || document.documentElement.classList.contains('yb-static')) return;
+  const img = prev.querySelector('img'), m = { x: 0, y: 0, cx: 0, cy: 0 };
+  let on = false;
+  addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; }, { passive: true });
+  document.querySelectorAll('.ct-row[data-preview]').forEach(li => {
+    li.addEventListener('mouseenter', () => { if (img.getAttribute('src') !== li.dataset.preview) img.src = li.dataset.preview; prev.classList.add('is-on'); on = true; m.cx = m.x; m.cy = m.y; });
+    li.addEventListener('mouseleave', () => { prev.classList.remove('is-on'); on = false; });
+  });
+  (function loop() {
+    if (on) {
+      const w = prev.offsetWidth, side = (m.x + 40 + w + 20 > innerWidth) ? -1 : 1;
+      const tx = m.x + side * (40 + w / 2), ty = Math.min(innerHeight - prev.offsetHeight / 2 - 16, Math.max(prev.offsetHeight / 2 + 16, m.y));
+      m.cx += (tx - m.cx) * 0.15; m.cy += (ty - m.cy) * 0.15;
+      prev.style.left = m.cx + 'px'; prev.style.top = m.cy + 'px';
+    }
+    requestAnimationFrame(loop);
+  })();
+})();
+</script>
+
+<?php get_footer(); ?>