/* =====================================================
   IMPORTS — toutes les polices ici
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Gwendolyn:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ADLaM+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

@font-face {
  font-family: 'FT88';
  src: url('FT88-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'FT88';
  src: url('FT88-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* =====================================================
   TAILLES & POLICES — tout modifier ici
===================================================== */
:root {
  /* ── HERO TITRE ── */
  --size-title-p:           350px;
  --size-title-rest:         70px;
  --size-title-rest-year:    95px;

  /* ── HERO BRANDING ── */
  --size-brand-name:         56px;
  --size-brand-tagline:      38px;
  --font-brand-name:         'Playfair Display', serif;
  --font-brand-tagline:      'Playfair Display', serif;

  /* ── HERO LIENS ── */
  --size-nav-links:          37px;

  /* ── À PROPOS — TITRE ── */
  --ap-size-heading-top:     62px;
  --ap-size-heading-bottom:  130px;
  --ap-font-heading-top:     'ADLaM Display', sans-serif;
  --ap-font-heading-bottom:  'FT88', monospace;

  /* ── À PROPOS — NOM ── */
  --ap-size-name:            80px;
  --ap-font-name:            'FT88', monospace;
  --ap-color-name:           #570041;

  /* ── À PROPOS — BIO ── */
  --ap-size-bio:             20px;
  --ap-font-bio:             'Pixelify Sans', monospace;

  /* ── À PROPOS — SOUS-TITRES ── */
  --ap-size-section-title:   54px;
  --ap-font-section-title:   'FT88', monospace;
  --ap-color-competences:    #1C1688;
  --ap-color-accompliss:     #007D0F;

  /* ── À PROPOS — ICÔNES SKILLS ── */
  --ap-size-skill-icon:      74px;

  /* ── À PROPOS — STATS ── */
  --ap-size-stat-num:        55px;
  --ap-size-stat-lbl:        22px;
  --ap-font-stat:            'FT88', monospace;

  /* ── À PROPOS — LIENS SOCIAUX ── */
  --ap-size-social-url:      13px;
  --ap-font-social-url:      'Pixelify Sans', monospace;

  /* ── CONTACT ── */
  --ct-size-title:          90px;
  --ct-size-btn-label:      28px;
  --ct-size-btn-icon:       38px;
  --ct-size-footer:         12px;
  --ct-btn-height:          68px;
  --ct-form-height:         280px;

  /* ── COULEURS GLOBALES ── */
  --white:   #ffffff;
  --black:   #111111;
  --gray:    #ffffff;
  --bg:      #f0f0f0;
  --blue:    #7aa8d2;

  /* ── POLICES GLOBALES ── */
  --font-gwendolyn:  'Gwendolyn', cursive;
  --font-playfair:   'Playfair Display', serif;
  --font-ft88:       'FT88', monospace;
  --font-mono:       'Share Tech Mono', monospace;
}

/* =====================================================
   RESET & BASE
===================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x: hidden; }
body { background: var(--white); color: var(--black); overflow-x: hidden; }

/* =====================================================
   NAVBAR
===================================================== */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 52px;
  background: var(--bg);
  border-bottom: 2px solid #888;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
#navbar.visible { transform: translateY(0); opacity: 1; pointer-events: all; }

.nav-left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.nav-tab {
  border: 1.5px solid #888;
  background: var(--bg);
  padding: 0 14px;
  height: 31px;
  font-family: var(--font-ft88);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  color: var(--black);
  display: inline-flex;
  align-items: center;
  transition: background 0.1s;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.6), inset -1px -1px 0 rgba(0,0,0,0.12);
}
.nav-tab:hover  { background: #e0e0e0; }
.nav-tab.active { background: var(--white); }

.nav-plus {
  border: 1.5px solid #888;
  background: var(--bg);
  padding: 0 10px;
  height: 31px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.6), inset -1px -1px 0 rgba(0,0,0,0.12);
}

.nav-clock {
  margin-left: auto;
  font-family: var(--font-ft88);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1.5px solid #888;
  background: var(--bg);
  padding: 0 14px;
  height: 31px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.6), inset -1px -1px 0 rgba(0,0,0,0.12);
  white-space: nowrap;
}

/* =====================================================
   HERO — 100vh
===================================================== */
#hero {
  width: 100%;
  height: 100vh;
  background: var(--white);
  display: grid;
  grid-template-columns: 73% 27%;
  overflow: hidden;
}

.hero-left {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 4vh;
  padding-left: 2.5%;
  padding-right: 2.5%;
  overflow: hidden;
}

.hero-video-box {
  position: relative;
  width: 100%;
  height: 62vh;
  background: var(--gray);
  overflow: hidden;
  flex-shrink: 0;
}
.hero-video-box video {
  position: absolute;
  top: -55px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 110px);
  border: none;
  pointer-events: none;
  clip-path: inset(55px 2px 55px 2px);
}

.hero-title-row {
  display: flex;
  align-items: flex-end;
  line-height: 1;
  margin-top: -5vh;
  position: relative;
  z-index: 3;
}

.title-p {
  font-family: var(--font-gwendolyn);
  font-weight: 400;
  font-size: var(--size-title-p);
  color: var(--black);
  line-height: 0.82;
  margin-left: -0.3%;
  display: block;
}

.title-rest {
  font-family: var(--font-ft88);
  font-size: var(--size-title-rest);
  color: var(--black);
  line-height: 1;
  padding-bottom: 0.1em;
  display: inline-block;
  transform: skewX(-15deg) scaleY(2.08);
  transform-origin: bottom left;
  font-weight: 700;
}

.title-year {
  font-family: var(--font-ft88);
  font-size: var(--size-title-rest-year);
  letter-spacing: 3px;
}

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 5vh 6% 9vh 0;
}

.brand-block { text-align: right; }

.brand-name {
  font-family: var(--font-brand-name);
  font-weight: 900;
  font-style: normal;
  font-size: var(--size-brand-name);
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-end;
  letter-spacing: 0.5px;
}

.brand-square {
  width: 20px; height: 20px;
  background: var(--blue);
  display: inline-block;
  flex-shrink: 0;
}

.brand-tagline {
  font-family: var(--font-brand-tagline);
  font-style: normal;
  font-weight: 400;
  font-size: var(--size-brand-tagline);
  color: #222;
  text-align: right;
  line-height: 1.55;
  margin-top: 8px;
}

.hero-nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.hero-nav-link {
  font-family: var(--font-ft88);
  font-size: var(--size-nav-links);
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  line-height: 1.2;
  cursor: pointer;
  display: inline-block;
  transform: skewX(-6deg);
  transform-origin: bottom right;
  transition: opacity 0.15s;
}
.hero-nav-link:hover { opacity: 0.5; }

/* =====================================================
   CONTENU GÉNÉRAL
===================================================== */
#main-content { background: var(--white); }
.content-section { min-height: 100vh; }


/* =====================================================
   SECTION À PROPOS
===================================================== */
#apropos {
  background: var(--white);
  height: 100vh;
  padding: 00px 50px 50px 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.ap-grid {
  padding-top: 40px;
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: 0;
  width: 100%;
  flex: 1;
  align-items: start;
  position: relative;
}

/* ── GAUCHE ── */
.ap-left {
  display: flex;
  flex-direction: column;
  padding-right: 40px;
}

.ap-heading {
  font-weight: 400;
  color: var(--black);
  margin-bottom: 16px;
  line-height: 1.0;
}
.ap-heading-top    { display: block; font-size: var(--ap-size-heading-top); font-family: var(--ap-font-heading-top); }
.ap-heading-bottom { display: block; font-size: var(--ap-size-heading-bottom); line-height: 0.9; font-family: var(--ap-font-heading-bottom); }

.ap-heading-bottom {
  display: block;
  font-size: var(--ap-size-heading-bottom);
  font-family: var(--ap-font-heading-bottom);
  line-height: 0.88;
}

.ap-name {
  font-family: var(--ap-font-name);
  font-weight: 400;
  font-style: italic;
  font-size: var(--ap-size-name);
  color: var(--ap-color-name);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  display: block;
  margin-bottom: 12px;
}

.ap-bio {
  font-family: var(--ap-font-bio);
  font-size: var(--ap-size-bio);
  line-height: 1;
  color: #222;
  max-width: 880px;
  margin-bottom: 26px;
}

.ap-section-title {
  font-family: var(--ap-font-section-title);
  font-style: italic;
  font-size: var(--ap-size-section-title);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  display: block;
  margin-bottom: 14px;
}
.ap-section-title:nth-of-type(1) { color: var(--ap-color-competences); }
.ap-section-title:nth-of-type(2) { color: var(--ap-color-accompliss); }

.ap-skills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.ap-skill {
  width: var(--ap-size-skill-icon);
  height: var(--ap-size-skill-icon);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  color: white;
  font-family: var(--font-ft88);
  overflow: hidden;
}
.ap-skill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sk-pr  { background: #2f0ca8; }
.sk-ae  { background: #00005b; color: #9999ff; }
.sk-ps  { background: #001e36; color: #31a8ff; }
.sk-ai  { background: #300000; color: #330000; }
.sk-fig { background: #1a1a1a; }
.sk-bl  { background: #363636; color: #e87d0d; }
.sk-vs  { background: #D9D9D9; color: #0098ff; font-size: 11px; }

.ap-stats { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── FENÊTRE WINDOWS générique ── */
.ap-winbox { border: 2px solid #888; background: var(--gray); }

.ap-winbar {
  background: linear-gradient(to right, #00007b, #0c649e);
  height: 20px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5px;
  font-family: var(--font-ft88);
  font-size: 10px;
  color: white;
}
.ap-winbtns { display: flex; gap: 2px; }
.ap-winbtns span {
  width: 14px; height: 14px;
  border: 1px solid #666;
  background: var(--gray);
  color: #333;
  font-size: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.ap-winbody {
  padding: 12px 16px 14px;
  display: flex; flex-direction: column;
  min-width: 130px;
}
.ap-stat-num {
  font-family: var(--ap-font-stat);
  font-size: var(--ap-size-stat-num);
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: block;
}
.ap-stat-lbl {
  font-family: var(--ap-font-stat);
  font-size: var(--ap-size-stat-lbl);
  text-decoration: underline;
  margin-top: 4px;
  display: block;
}

/* ── DROITE — fenêtres qui se chevauchent ── */
.ap-right {
  position: relative;
  height: 100%;
  min-height: calc(100vh - 140px);
}

.ap-croix {
  position: absolute;
  top: 100px;
  left: -120px;
  width: 52px; height: 52px;
  object-fit: contain;
  z-index: 2;
}

.ap-photo-box {
  position: absolute;
  top: 120px;
  left: -50px;
  width: 88%;
  z-index: 1;
}
.ap-photo-inner {
  height: 42vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray);
  overflow: hidden;
}
.ap-photo-inner img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.ap-social-box {
  position: absolute;
  top: 500px;
  left: 12%;
  width: 80%;
  z-index: 2;
}
.ap-social-inner { padding: 8px 14px; background: var(--gray); }

.ap-social-link {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #bbb;
  text-decoration: none; color: #222;
  transition: opacity 0.15s;
}
.ap-social-link:last-child { border-bottom: none; }
.ap-social-link:hover { opacity: 0.6; }

.ap-social-link span {
  font-family: var(--ap-font-social-url);
  font-size: var(--ap-size-social-url);
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-sicon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #111; color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px;
  flex-shrink: 0;
}
.ap-si-be { background: #000000; font-family: serif; }
.ap-si-ig { background: radial-gradient(circle at 30% 110%, #f09433 0%, #dc2743 50%, #bc1888 100%); }
.ap-si-li { background: #0077b5; font-family: var(--font-ft88); font-size: 12px; }

.ap-star {
  position: absolute;
  bottom: 20px;
  right: 10px;
  width: 64px; height: 64px;
  object-fit: contain;
}

/* =====================================================
   SECTION MES CRÉATIONS
===================================================== */
.cr-section {
  background: var(--white);
  padding: 46px 50px 30px 50px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.cr-header { flex-shrink: 0; margin-bottom: 24px; }
.cr-title {
  font-family: var(--font-ft88);
  font-weight: 700;
  font-size: 72px;
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
  letter-spacing: 2px;
}

.cr-layout {
  display: grid;
  grid-template-columns: 88px 2px 1fr;
  flex: 1;
  min-height: 0;
}

.cr-line {
  width: 2px;
  background: var(--black);
  transition: opacity 0.2s;
}
.cr-line.cr-line-hidden { background: transparent; }

.cr-labels {
  display: flex;
  flex-direction: column;
}
.cr-label {
  font-family: var(--font-ft88);
  font-size: 10px;
  color: #555;
  line-height: 1.3;
  text-align: right;
  padding-right: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  padding-top: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.cr-rows {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  overflow: visible;
}
.cr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  flex-wrap: wrap;
  overflow: visible;
}
.cr-row:last-child { border-bottom: none; }

/* ─────────────────────────────────────────
   Tailles exactes ratio YouTube
───────────────────────────────────────── */
.cr-card.format-paysage  { width: 320px; height: 180px; }
.cr-card.format-paysage2 { width: 420px; height: 236px; }
.cr-card.format-portrait { width: 101px; height: 180px; }

.cr-card {
  flex-shrink: 0;
  background: var(--gray);
  border: 1.5px solid #bbb;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
}
.cr-card:hover { border-color: #444; transform: translateY(-2px); }

.cr-card-thumb,
.cr-card-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.cr-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.85);
  width: 38px; height: 38px;
  background: rgba(0,0,0,0.52);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.cr-card-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%,-50%);
  border-style: solid;
  border-width: 7px 0 7px 13px;
  border-color: transparent transparent transparent white;
}
.cr-card:not(.has-projet):hover .cr-card-play {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

.cr-card-overlay {
  position: absolute;
  bottom: 7px; right: 7px;
  background: var(--gray);
  border: 1px solid #888;
  padding: 3px 8px;
  font-family: var(--font-ft88);
  font-size: 10px;
  color: var(--black);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  display: none;
}
.cr-card.has-projet .cr-card-overlay       { display: block; }
.cr-card.has-projet:hover .cr-card-overlay { opacity: 1; }

.cr-card-title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-family: var(--font-ft88);
  font-size: 9px;
  padding: 4px 6px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-card:hover .cr-card-title { opacity: 1; }


/* ═══════════════════════════════════════
   MODALE UNIVERSELLE
═══════════════════════════════════════ */
.crm-wrap {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}
.crm-wrap.crm-open {
  visibility: visible;
  opacity: 1;
}

.crm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  cursor: pointer;
}

.crm-box {
  position: relative;
  z-index: 1;
  background: #000;
  border: 2px solid #444;
  width: min(880px, 92vw);
}

.crm-close {
  position: absolute;
  top: -36px; right: 0;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--font-ft88);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 10px;
  opacity: 0.75;
  transition: opacity 0.1s;
  line-height: 1;
}
.crm-close:hover { opacity: 1; }

.crm-yt {
  display: none;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.crm-yt.crm-active { display: block; }
.crm-yt.crm-portrait {
  width: min(380px, 60vw);
  margin: 0 auto;
  padding-bottom: 0;
  height: min(675px, 90vh);
}
.crm-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

.crm-mp4 { display: none; }
.crm-mp4.crm-active { display: block; }
.crm-mp4 video {
  display: block;
  width: 100%;
  max-height: 85vh;
  background: #000;
}

/* =====================================================
   SECTION CONTACT
===================================================== */
.ct-section {
  height: 100vh;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 80px 0;
  gap: 44px;
  overflow: hidden;
}

.ct-title {
  font-family: var(--font-ft88);
  font-weight: 700;
  font-size: var(--ct-size-title);
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
  text-align: center;
  letter-spacing: 4px;
}

.ct-grid {
  display: grid;
  grid-template-columns: 380px 380px;
  gap: 60px;
  align-items: center;
  justify-content: center;
}

.ct-form-box {
  background: var(--gray);
  border: 1.5px solid #aaa;
  width: 100%;
  height: var(--ct-form-height);
}

.ct-form-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  height: 100%;
}

.ct-input,
.ct-textarea {
  background: var(--white);
  border: 1px solid #aaa;
  padding: 8px 10px;
  font-family: var(--font-ft88);
  font-size: 13px;
  outline: none;
  resize: none;
  width: 100%;
}
.ct-textarea { flex: 1; }

.ct-submit {
  background: #333;
  color: white;
  border: none;
  padding: 8px 20px;
  font-family: var(--font-ft88);
  font-size: 13px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}
.ct-submit:hover { background: var(--black); }

.ct-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ct-btn {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  height: var(--ct-btn-height);
  border: 2px solid #ccc;
  background: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ct-btn:hover { opacity: 0.8; }

.ct-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ct-size-btn-icon);
  height: var(--ct-size-btn-icon);
}
.ct-btn-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ct-btn-label {
  font-family: var(--font-ft88);
  font-weight: 700;
  font-size: var(--ct-size-btn-label);
  letter-spacing: 3px;
}

.ct-discord { background: #5865f2; border-color: #5865f2; }
.ct-discord .ct-btn-label { color: white; font-style: italic; }

.ct-mail { background: var(--white); border-color: #ccc; }
.ct-mail .ct-btn-label { color: var(--black); }

.ct-insta { background: var(--white); border-color: #ccc; }
.ct-insta .ct-btn-label { color: #e1306c; font-style: italic; }

.ct-footer {
  position: sticky;
  bottom: 0;
  background: var(--white);
  border-top: 1.5px solid #ccc;
  width: 100%;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ct-footer-brand {
  font-family: var(--font-ft88);
  font-weight: 700;
  font-size: var(--ct-size-footer);
  color: var(--black);
  letter-spacing: 2px;
}

.ct-footer-sep {
  font-family: var(--font-ft88);
  font-size: var(--ct-size-footer);
  color: #aaa;
}

.ct-footer-copy,
.ct-footer-tagline {
  font-family: var(--font-ft88);
  font-size: var(--ct-size-footer);
  color: #888;
}

.ct-footer-link {
  font-family: var(--font-ft88);
  font-size: var(--ct-size-footer);
  color: var(--black);
  text-decoration: underline;
  transition: opacity 0.15s;
}
.ct-footer-link:hover { opacity: 0.6; }


/* =====================================================
   ██████████  RESPONSIVE  ██████████
===================================================== */

/* ── Tablette large (≤ 1200px) ── */
@media (max-width: 1200px) {
  :root {
    --size-title-p:          240px;
    --size-title-rest:        52px;
    --size-title-rest-year:   68px;
    --size-brand-name:        42px;
    --size-brand-tagline:     26px;
    --size-nav-links:         26px;
    --ap-size-heading-top:    46px;
    --ap-size-heading-bottom: 96px;
    --ap-size-name:           58px;
    --ap-size-bio:            17px;
    --ap-size-section-title:  38px;
    --ap-size-skill-icon:     56px;
    --ap-size-stat-num:       40px;
    --ap-size-stat-lbl:       16px;
    --ct-size-title:          64px;
    --ct-size-btn-label:      20px;
    --ct-btn-height:          54px;
    --ct-form-height:         260px;
  }

  .ap-photo-box  { top: 80px; left: -20px; width: 92%; }
  .ap-social-box { top: 380px; }
  .ap-star      { display: none; }
}

/* ── Tablette (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root {
    --size-title-p:          190px;
    --size-title-rest:        44px;
    --size-title-rest-year:   56px;
    --size-brand-name:        36px;
    --size-brand-tagline:     22px;
    --size-nav-links:         22px;
    --ap-size-heading-top:    38px;
    --ap-size-heading-bottom: 80px;
    --ap-size-name:           46px;
    --ap-size-section-title:  30px;
    --ap-size-skill-icon:     48px;
    --ap-size-stat-num:       34px;
    --ap-size-stat-lbl:       14px;
    --ct-size-title:          52px;
    --ct-size-btn-label:      17px;
    --ct-btn-height:          48px;
  }

  #hero {
    grid-template-columns: 65% 35%;
  }

  .cr-card.format-paysage2 { width: 320px; height: 180px; }

  .ct-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

/* ── Mobile paysage / petite tablette (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --size-title-p:          130px;
    --size-title-rest:        30px;
    --size-title-rest-year:   38px;
    --size-brand-name:        28px;
    --size-brand-tagline:     17px;
    --size-nav-links:         18px;
    --ap-size-heading-top:    30px;
    --ap-size-heading-bottom: 58px;
    --ap-size-name:           36px;
    --ap-size-bio:            14px;
    --ap-size-section-title:  26px;
    --ap-size-skill-icon:     42px;
    --ap-size-stat-num:       28px;
    --ap-size-stat-lbl:       12px;
    --ap-size-social-url:     11px;
    --ct-size-title:          42px;
    --ct-size-btn-label:      15px;
    --ct-size-btn-icon:       28px;
    --ct-btn-height:          44px;
    --ct-form-height:         240px;
  }

  /* ── NAVBAR ── */
  .nav-clock { display: none; }
  .nav-plus  { display: none; }

  /* ── HERO — passe en colonne ── */
  #hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 100vh;
  }

  .hero-left {
    padding-top: 10px;
    padding-left: 16px;
    padding-right: 16px;
    order: 1;
  }

  .hero-video-box {
    height: 40vw;
    min-height: 180px;
  }

  .hero-title-row {
    margin-top: -3vh;
  }

  .hero-right {
    order: 2;
    align-items: flex-start;
    padding: 16px 16px 24px 16px;
    gap: 16px;
  }

  .brand-block { text-align: left; }
  .brand-name  { justify-content: flex-start; }
  .brand-tagline { text-align: left; }

  .hero-nav-links {
    align-items: flex-start;
  }
  .hero-nav-link {
    transform: skewX(-4deg);
  }

  /* ── À PROPOS — passe en colonne ── */
  #apropos {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    padding: 50px 20px 30px 20px;
  }

  .ap-grid {
    grid-template-columns: 1fr;
    padding-top: 20px;
  }

  .ap-left {
    padding-right: 0;
  }

  .ap-right {
    position: relative;
    min-height: auto;
    margin-top: 40px;
    height: auto;
  }

  .ap-photo-box {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    margin-bottom: 16px;
  }
  .ap-photo-inner { height: 55vw; min-height: 200px; }

  .ap-social-box {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    margin-bottom: 20px;
  }

  .ap-croix { display: none; }
  .ap-star  { position: relative; bottom: auto; right: auto; margin-top: 12px; }

  /* ── CRÉATIONS ── */
  .cr-section {
    height: auto;
    min-height: 100vh;
    padding: 46px 16px 30px 16px;
    overflow-y: auto;
  }

  .cr-title { font-size: 40px; }

  .cr-layout {
    grid-template-columns: 60px 2px 1fr;
  }

  .cr-rows { padding-left: 12px; }

  .cr-card.format-paysage  { width: 240px; height: 135px; }
  .cr-card.format-paysage2 { width: 240px; height: 135px; }
  .cr-card.format-portrait { width: 76px;  height: 135px; }

  /* ── CONTACT ── */
  .ct-section {
    height: auto;
    min-height: 100vh;
    padding: 50px 20px 0;
    gap: 28px;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 60px;
  }

  .ct-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    max-width: 420px;
  }

  .ct-form-box { width: 100%; }

  .ct-footer {
    gap: 8px;
    padding: 12px 16px;
    text-align: center;
  }
  .ct-footer-sep { display: none; }
}

/* ── Mobile portrait (≤ 480px) ── */
@media (max-width: 480px) {
  :root {
    --size-title-p:          100px;
    --size-title-rest:        24px;
    --size-title-rest-year:   30px;
    --size-brand-name:        24px;
    --size-brand-tagline:     14px;
    --size-nav-links:         16px;
    --ap-size-heading-top:    24px;
    --ap-size-heading-bottom: 46px;
    --ap-size-name:           28px;
    --ap-size-bio:            13px;
    --ap-size-section-title:  22px;
    --ap-size-skill-icon:     38px;
    --ap-size-stat-num:       26px;
    --ap-size-stat-lbl:       11px;
    --ct-size-title:          34px;
    --ct-size-btn-label:      13px;
    --ct-size-btn-icon:       24px;
    --ct-btn-height:          42px;
    --ct-form-height:         220px;
  }

  #apropos { padding: 50px 14px 24px 14px; }

  .ap-winbody { min-width: 100px; padding: 8px 12px 10px; }

  .cr-card.format-paysage  { width: 180px; height: 101px; }
  .cr-card.format-paysage2 { width: 180px; height: 101px; }
  .cr-card.format-portrait { width: 57px;  height: 101px; }

  .cr-layout {
    grid-template-columns: 50px 2px 1fr;
  }

  .cr-label { font-size: 9px; padding-right: 8px; }

  .ct-grid { max-width: 100%; }

  .ct-btn { gap: 12px; padding: 0 16px; }
}

/* ── Très petit mobile (≤ 360px) ── */
@media (max-width: 360px) {
  :root {
    --size-title-p:          80px;
    --size-title-rest:        20px;
    --size-title-rest-year:   25px;
    --ap-size-heading-bottom: 38px;
    --ap-size-name:           24px;
    --ap-size-skill-icon:     34px;
  }

  .cr-card.format-paysage  { width: 150px; height: 84px; }
  .cr-card.format-paysage2 { width: 150px; height: 84px; }
  .cr-card.format-portrait { width: 47px;  height: 84px; }
}

/* ── Touch devices — désactive hover preview ── */
@media (hover: none) {
  .cr-card:hover { transform: none; }
  .cr-card-play  { display: none; }
}