/* DATWOOD — feuille de style */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --encre: #131711;
  --surface: #1D241B;
  --surface-2: #1A2118;
  --vert: #223B1F;
  --bord: #2E392B;
  --bord-2: #3A4836;
  --bord-3: #4A5A45;
  --texte: #F2EEE3;
  --texte-doux: #D8D3C2;
  --texte-sourd: #B3AD98;
  --texte-pale: #9E9A86;
  --kraft: #CFC09A;
  --rayon: 24px;
  --titre: "Bricolage Grotesque", system-ui, sans-serif;
  --corps: "DM Sans", system-ui, sans-serif;
  --largeur: 1280px;
  --marge: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--kraft); text-decoration: none; }
a:hover { color: var(--texte); }
h1, h2, h3 { font-family: var(--titre); margin: 0; line-height: 1.05; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--kraft); outline-offset: 3px; border-radius: 6px; }

.lien-evitement {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--kraft); color: var(--encre); padding: 10px 16px; border-radius: 999px;
}
.lien-evitement:focus { left: 8px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; }
.section { padding: 0 var(--marge) 104px; }
.titre-section { font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.entete-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 32px; }
.surtitre { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--kraft); }
.note { color: var(--texte-sourd); font-size: 0.95rem; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; border: 1px solid transparent;
  cursor: pointer; font-family: inherit; transition: background .2s, color .2s, border-color .2s;
}
.bouton--plein { background: var(--kraft); color: var(--encre); }
.bouton--plein:hover { background: var(--texte); color: var(--encre); }
.bouton--contour { border-color: var(--bord-3); color: var(--texte); background: transparent; font-weight: 500; }
.bouton--contour:hover { border-color: var(--kraft); color: var(--kraft); }
.bouton--sombre { background: var(--encre); color: var(--texte); }
.bouton--sombre:hover { background: var(--surface); color: var(--kraft); }
.bouton--petit { min-height: 44px; padding: 0 18px; font-size: 0.9rem; }
.pastille { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--surface); color: var(--kraft); font-weight: 600; font-size: 0.85rem; }

/* En-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--marge);
  background: rgba(19, 23, 17, 0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.entete.defile { border-bottom-color: var(--bord); }
.marque { display: inline-flex; align-items: center; gap: 12px; color: var(--texte); }
.marque img { width: 44px; height: 44px; }
.marque span { font-family: var(--titre); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.04em; }
.menu { display: flex; flex-wrap: wrap; gap: 2px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--texte); font-weight: 500; font-size: 0.93rem; }
.menu a:hover { background: var(--surface); color: var(--kraft); }
.menu a.menu__pro { display: none; }
@media (max-width: 520px) { .menu a.menu__pro { display: inline-flex; color: var(--kraft); } }
.actions { display: flex; align-items: center; gap: 10px; }
.langue {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--bord-2); background: transparent; color: var(--texte-sourd);
  font: 600 0.85rem var(--corps); cursor: pointer;
}
.langue b { color: var(--texte); font-weight: 700; }
.langue:hover { border-color: var(--kraft); }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bord-2); background: transparent; color: var(--texte); cursor: pointer; align-items: center; justify-content: center; }

@media (max-width: 1180px) {
  .burger { display: inline-flex; }
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; padding: 12px var(--marge) 24px; gap: 0;
    background: var(--encre); border-bottom: 1px solid var(--bord);
  }
  .menu.ouvert { display: flex; }
  .menu a { font-size: 1.15rem; min-height: 52px; }
}
@media (max-width: 520px) {
  .actions .bouton--plein { display: none; }
  .marque span { font-size: 1.25rem; }
}

/* Accueil */
.accueil {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 56px); align-items: center;
  max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--marge) clamp(56px, 8vw, 104px);
}
.accueil__texte { display: flex; flex-direction: column; gap: 24px; }
.accueil__genres { display: flex; flex-wrap: wrap; gap: 8px; }
.accueil h1 { font-weight: 800; font-size: clamp(3.4rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.02em; }
.accueil__accroche { max-width: 32rem; font-size: 1.2rem; color: var(--texte-doux); }
.accueil__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.accueil__photo img { width: 100%; height: auto; border-radius: 28px; }

/* Le groupe */
.groupe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 56px); align-items: center; }
.groupe__texte { display: flex; flex-direction: column; gap: 22px; }
.groupe__texte > p { color: var(--texte-doux); }
.groupe__photo img { width: 100%; height: auto; border-radius: 28px; }
.bloc-liste { display: flex; flex-direction: column; gap: 10px; }
.lineup { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lineup a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--surface); color: var(--texte); font-size: 0.95rem; }
.lineup a:hover { color: var(--kraft); }
.influences { color: var(--texte-sourd); font-size: 0.95rem; }

/* Presse */
.citation {
  background: var(--surface-2); border-radius: 32px; padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 104px);
  display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; margin: 0;
}
.citation blockquote { margin: 0; max-width: 54rem; font-family: var(--titre); font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.85rem); line-height: 1.38; }
.citation figcaption { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--kraft); }
.citation small { display: block; text-transform: none; letter-spacing: 0; color: var(--texte-pale); margin-top: 6px; font-size: 0.8rem; }

/* Biographies */
.bios { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bio { flex: 0 1 calc((100% - 32px) / 3); min-width: min(100%, 300px); background: var(--surface); border-radius: var(--rayon); padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 16px; }
.bio img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.bio__texte { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.bio h3 { font-weight: 700; font-size: 1.5rem; }
.bio .surtitre { font-size: 0.78rem; letter-spacing: 0.1em; }
.bio p { color: var(--texte-doux); font-size: 0.98rem; }
@media (max-width: 1000px) { .bio { flex-basis: calc((100% - 16px) / 2); } }

/* Musique */
.album {
  background: var(--vert); border-radius: 32px; padding: clamp(20px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 48px); align-items: center;
}
.album__pochette img { width: 100%; height: auto; border-radius: 22px; }
.album__texte { display: flex; flex-direction: column; gap: 20px; }
.album h2 { font-weight: 700; font-size: clamp(2.8rem, 5.5vw, 4.4rem); line-height: 0.95; }
.album__texte > p { color: var(--texte-doux); }
.lecteur { border-radius: 16px; overflow: hidden; background: var(--encre); min-height: 152px; }
.lecteur iframe { display: block; width: 100%; height: 152px; border: 0; }
.lecteur__bouton { width: 100%; min-height: 152px; display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--encre); border: 0; color: var(--texte); cursor: pointer; font: inherit; text-align: left; }
.rond-lecture { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--kraft); color: var(--encre); display: inline-flex; align-items: center; justify-content: center; }
.liens { display: flex; flex-wrap: wrap; gap: 10px; }

/* Shop */
.produits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.produit { background: var(--surface); border-radius: var(--rayon); padding: 14px 14px 22px; display: flex; flex-direction: column; gap: 10px; }
.produit__image { position: relative; }
.produit__image img { width: 100%; height: auto; border-radius: 16px; }
.produit__image .pastille { position: absolute; top: 14px; left: 14px; background: var(--encre); }
.produit__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 8px 0; }
.produit h3 { font-weight: 700; font-size: 1.3rem; }
.prix { font-family: var(--titre); font-weight: 700; font-size: 1.45rem; color: var(--kraft); white-space: nowrap; }
.produit p { padding: 0 8px; color: var(--texte-sourd); font-size: 0.95rem; }
.produit .bouton { margin: 8px 8px 0; }

/* Concerts */
.concerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.concert { background: var(--surface); border-radius: var(--rayon); padding: 26px; display: flex; flex-direction: column; gap: 4px; }
.concert:first-child { background: var(--kraft); color: var(--encre); }
.concert__date { font-family: var(--titre); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--kraft); }
.concert__annee { font-size: 0.95rem; font-weight: 600; color: var(--texte-sourd); margin-bottom: 8px; }
.concert:first-child .concert__date, .concert:first-child .concert__annee { color: var(--encre); }
.concert strong { font-size: 1.1rem; }
.concert__ville { color: var(--texte-sourd); }
.concert:first-child .concert__ville { color: #3A3A2E; }
.concert .bouton { align-self: flex-start; margin-top: 14px; }
.concert:first-child .bouton { background: var(--encre); color: var(--texte); border-color: var(--encre); }
.vide { background: var(--surface); border-radius: var(--rayon); padding: 32px; color: var(--texte-sourd); }
.passes { margin-top: 40px; }
.passes h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; color: var(--texte-doux); }
.passes ul { list-style: none; margin: 0; padding: 0; }
.passes li { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--bord); color: var(--texte-sourd); }
.passes li:last-child { border-bottom: 1px solid var(--bord); }
.passes li span:first-child { min-width: 8rem; color: var(--kraft); font-weight: 600; }

/* Vidéos */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 640px) { .videos { grid-template-columns: 1fr; } }
.video { display: flex; flex-direction: column; gap: 12px; }
.video__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--surface); }
.video__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__bouton { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video__bouton img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.video__bouton:hover img { transform: scale(1.03); }
.video__bouton .rond-lecture { position: absolute; left: 16px; bottom: 16px; }
.video h3 { font-weight: 700; font-size: 1.3rem; padding: 0 4px; }

/* Photos */
.galerie { display: flex; gap: 14px; align-items: flex-start; }
.galerie__colonne { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.galerie button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 22px; overflow: hidden; display: block; width: 100%; }
.galerie img { width: 100%; height: auto; transition: transform .4s; }
.galerie button:hover img { transform: scale(1.02); }
@media (max-width: 640px) { .galerie, .galerie__colonne { gap: 10px; } .galerie button { border-radius: 14px; } }

.visionneuse { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visionneuse::backdrop { background: rgba(10, 12, 9, 0.94); }
.visionneuse__corps { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 72px; }
.visionneuse img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 12px; }
.visionneuse button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--bord-3); background: var(--encre); color: var(--texte); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.visionneuse button:hover { border-color: var(--kraft); color: var(--kraft); }
.v-fermer { top: 16px; right: 16px; }
.v-prec { left: 12px; top: 50%; transform: translateY(-50%); }
.v-suiv { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .visionneuse__corps { padding: 72px 12px; } .v-prec, .v-suiv { top: auto; bottom: 16px; transform: none; } }

/* Espace pro */
.pro { background: var(--kraft); color: var(--encre); border-radius: 32px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px 40px; align-items: center; }
.pro__texte { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pro h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); }
.pro p { max-width: 26rem; }
.pro__fichiers { display: grid; gap: 12px; }
.pro__fichiers a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 0 20px; background: var(--encre); color: var(--texte); border-radius: 16px; font-weight: 500; }
.pro__fichiers a span { color: var(--kraft); font-weight: 600; white-space: nowrap; }
.pro__fichiers a:hover { background: var(--surface); }

/* Pied de page */
.pied { padding: 56px var(--marge) 40px; border-top: 1px solid var(--bord); }
.pied__haut { max-width: var(--largeur); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.pied__contact { display: flex; flex-direction: column; gap: 8px; }
.pied__contact img { width: 72px; height: 72px; margin-bottom: 8px; }
.pied__nom { font-family: var(--titre); font-weight: 800; font-size: 2.4rem; line-height: 1; letter-spacing: 0.04em; }
.pied__contact p { color: var(--texte-sourd); }
.pied__mail { font-size: 1.1rem; }
.reseaux { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.reseaux a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--bord-2); color: var(--texte); }
.reseaux a:hover { border-color: var(--kraft); color: var(--kraft); }
.pied__bas { max-width: var(--largeur); margin: 40px auto 0; font-size: 0.85rem; color: var(--texte-pale); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ===== Dessins de la pochette (fleurs et petits traits) ===== */
.dessin { display: block; pointer-events: none; color: var(--texte); overflow: visible; }

/* 1. Accueil : petits traits qui vibrent près de DATWOOD */
.accueil h1 { position: relative; display: inline-block; align-self: flex-start; }
.dessin--vibre { position: absolute; top: -0.2em; right: -0.5em; width: 0.46em; color: var(--kraft); }
.dessin--vibre path { transform-box: fill-box; transform-origin: center; animation: dessin-pulse 2.4s ease-in-out infinite; }
.dessin--vibre path:nth-child(2) { animation-delay: .1s; }
.dessin--vibre path:nth-child(3) { animation-delay: .2s; }
@keyframes dessin-pulse {
  0%, 50%, 100% { opacity: .45; transform: scale(.8); }
  12%, 37% { opacity: 1; transform: scale(1.08); }
  25% { opacity: .6; transform: scale(.9); }
}

/* 2. Bouton « Écouter l'album » : traits au survol */
.accueil__boutons .bouton--plein { position: relative; }
.accueil__boutons .bouton--plein::before {
  content: ""; position: absolute; left: -22px; top: -18px; width: 26px; height: 26px;
  background: var(--kraft); -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 408 424%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%2248%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M71,121 C72,120 76,118 79,116 C83,114 87,111 91,109 C95,106 100,104 104,101 C108,98 112,96 115,93 C119,90 122,87 124,84 C127,81 129,78 129,76%22/%3E%3Cpath d=%22M193,219 C192,220 189,222 186,224 C184,226 181,228 178,230 C175,233 172,236 169,238 C166,241 163,244 160,246 C157,249 155,251 152,253 C150,255 147,257 146,258 C145,259 145,259 145,259%22/%3E%3Cpath d=%22M328,347 C328,346 328,343 328,339 C328,336 328,333 328,329 C328,325 327,321 327,317 C327,313 326,309 326,305 C326,301 326,298 325,294 C325,291 326,288 326,286 C326,285 326,286 326,286%22/%3E%3C/svg%3E') center / contain no-repeat; mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 408 424%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%2248%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M71,121 C72,120 76,118 79,116 C83,114 87,111 91,109 C95,106 100,104 104,101 C108,98 112,96 115,93 C119,90 122,87 124,84 C127,81 129,78 129,76%22/%3E%3Cpath d=%22M193,219 C192,220 189,222 186,224 C184,226 181,228 178,230 C175,233 172,236 169,238 C166,241 163,244 160,246 C157,249 155,251 152,253 C150,255 147,257 146,258 C145,259 145,259 145,259%22/%3E%3Cpath d=%22M328,347 C328,346 328,343 328,339 C328,336 328,333 328,329 C328,325 327,321 327,317 C327,313 326,309 326,305 C326,301 326,298 325,294 C325,291 326,288 326,286 C326,285 326,286 326,286%22/%3E%3C/svg%3E') center / contain no-repeat;
  opacity: 0; transform: scale(.6) rotate(-10deg); transition: opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.accueil__boutons .bouton--plein:hover::before, .accueil__boutons .bouton--plein:focus-visible::before { opacity: 1; transform: none; }

/* 3. Presse : quelques dessins autour de la citation */
.citation { position: relative; overflow: hidden; }
.citation > * { position: relative; }
.citation .semis { position: absolute; inset: 0; pointer-events: none; }
.semis .dessin { position: absolute; opacity: 0; transform: translateY(12px) rotate(-14deg); transition: opacity .7s, transform .9s cubic-bezier(.3,1.4,.5,1); color: var(--texte-doux); }
.semis.vu .dessin { opacity: .75; transform: none; }
.semis .s1 { left: 5%; top: 14%; width: clamp(34px, 4vw, 52px); }
.semis .s2 { right: 6%; top: 12%; width: clamp(24px, 2.6vw, 34px); color: var(--kraft); transition-delay: .15s; }
.semis .s3 { left: 9%; bottom: 14%; width: clamp(20px, 2.2vw, 28px); color: var(--kraft); transition-delay: .3s; }
.semis .s4 { right: 5%; bottom: 12%; width: clamp(36px, 4.2vw, 56px); transition-delay: .45s; }
@media (max-width: 700px) { .semis .s1, .semis .s3 { display: none; } }

/* 4. Musique : la fleur se dessine près du titre de l'album */
.album { position: relative; }
.dessin--trace { position: absolute; top: clamp(18px, 3vw, 36px); right: clamp(18px, 3vw, 40px); width: clamp(46px, 5vw, 70px); }
.dessin--trace path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dessin--trace.vu path { animation: dessin-trace 1.4s cubic-bezier(.6,.1,.3,1) forwards; }
.dessin--trace.vu path:nth-child(2) { animation-delay: 1.1s; animation-duration: .6s; }
.dessin--trace.vu { animation: dessin-balance 7s ease-in-out 2.2s infinite; }
@keyframes dessin-trace { to { stroke-dashoffset: 0; } }
@keyframes dessin-balance { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }

/* 5. Biographies : une fleur au coin de la photo au survol */
.bio { position: relative; }
.bio::after {
  content: ""; position: absolute; top: -14px; right: -10px; width: 44px; height: 44px;
  background: var(--texte); -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 680 784%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%2253%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M395,82 C385,82 378,88 369,88 C360,88 352,84 343,84 C334,84 326,86 317,88 C308,90 298,91 291,95 C284,99 276,104 272,111 C269,118 272,128 270,137 C268,146 266,155 261,163 C256,171 245,179 237,184 C229,189 220,193 211,194 C202,195 194,193 185,192 C176,190 168,184 159,184 C150,184 142,188 133,191 C124,193 115,197 107,201 C99,206 89,211 85,218 C81,225 83,235 84,244 C84,253 88,261 90,270 C92,279 93,287 97,296 C101,305 108,313 112,322 C117,331 121,339 124,348 C126,357 127,365 125,374 C124,383 121,391 117,400 C112,409 103,417 98,426 C92,435 87,443 84,452 C82,461 83,469 83,478 C83,487 83,495 84,504 C86,513 89,521 93,530 C96,539 99,547 104,556 C109,565 115,573 121,582 C128,591 135,601 142,608 C149,614 157,617 165,621 C173,626 182,633 191,634 C200,636 208,632 217,630 C226,628 234,623 243,622 C252,620 260,620 269,620 C278,620 286,619 295,621 C304,622 314,625 321,631 C328,637 333,648 338,656 C342,664 343,672 349,678 C355,683 366,684 375,688 C384,692 392,698 401,700 C410,703 418,702 427,703 C436,704 444,708 453,707 C462,707 470,703 479,700 C488,698 496,696 505,693 C514,690 522,687 531,682 C540,677 549,670 557,663 C565,656 573,646 578,637 C583,628 585,620 588,611 C591,602 594,594 595,585 C597,576 595,568 595,559 C594,550 595,542 593,533 C592,524 589,516 586,507 C583,498 578,490 574,481 C571,472 569,464 566,455 C562,446 558,438 555,429 C553,420 549,412 550,403 C552,394 559,386 564,377 C569,368 576,360 580,351 C584,342 585,334 586,325 C587,316 584,308 584,299 C584,290 586,282 585,273 C584,264 583,256 579,247 C575,238 569,228 562,221 C555,214 545,208 536,205 C527,201 518,204 510,201 C502,197 491,189 485,182 C479,175 475,165 472,156 C468,147 469,138 465,130 C462,122 458,114 452,107 C446,101 437,97 428,93 C418,88 405,83 395,82 Z%22/%3E%3Cpath d=%22M307,317 C305,317 304,317 302,317 C300,317 299,318 297,319 C295,320 294,321 292,322 C291,324 290,325 289,327 C288,329 287,330 286,332 C285,334 285,335 284,337 C283,339 282,340 281,342 C281,344 280,345 279,347 C278,349 277,350 276,352 C275,354 274,355 273,357 C273,359 272,360 272,362 C272,364 272,365 272,367 C272,369 273,370 273,372 C273,374 274,375 274,377 C274,379 275,380 275,382 C275,384 275,385 275,387 C275,389 275,390 276,392 C276,394 276,395 277,397 C277,399 278,400 278,402 C278,404 278,405 279,407 C279,409 279,410 279,412 C279,414 279,415 279,417 C279,419 280,420 280,422 C281,423 281,425 282,427 C283,428 285,430 286,431 C287,433 289,434 290,436 C292,438 293,439 294,441 C295,443 296,444 297,446 C298,448 298,449 299,451 C300,453 301,454 301,456 C302,457 303,459 304,460 C306,461 307,462 308,463 C310,463 311,464 313,464 C315,465 316,465 318,465 C320,465 321,465 323,464 C325,464 326,464 328,463 C330,463 331,463 333,463 C335,462 336,462 338,462 C340,462 341,462 343,461 C344,461 346,460 347,459 C348,458 350,456 351,455 C352,453 353,452 354,450 C355,448 356,447 357,445 C358,443 359,442 360,440 C361,438 362,437 363,435 C364,433 365,432 366,430 C367,428 368,427 369,425 C369,423 370,422 371,420 C372,418 372,417 373,415 C373,413 374,412 374,410 C374,408 375,407 376,405 C376,403 377,402 377,400 C378,398 379,397 379,395 C380,393 380,392 380,390 C381,388 381,387 381,385 C381,383 381,382 381,380 C381,378 381,377 381,375 C382,373 382,372 382,370 C382,368 383,367 383,365 C383,363 383,362 383,360 C383,358 383,357 383,355 C382,353 382,352 382,350 C382,348 381,347 381,345 C381,343 381,342 381,340 C381,339 381,337 380,336 C380,335 379,334 378,333 C377,333 375,333 374,333 C372,334 371,335 369,335 C367,336 366,337 364,338 C362,339 361,339 359,340 C357,341 356,341 354,341 C352,342 351,342 349,342 C347,342 346,342 344,342 C342,342 341,342 339,342 C337,341 336,341 334,340 C332,340 331,339 329,338 C327,337 326,336 324,334 C323,333 321,331 320,330 C319,328 318,327 316,325 C315,323 314,322 312,321 C311,319 309,318 307,317 Z%22/%3E%3C/svg%3E') center / contain no-repeat; mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 680 784%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%2253%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M395,82 C385,82 378,88 369,88 C360,88 352,84 343,84 C334,84 326,86 317,88 C308,90 298,91 291,95 C284,99 276,104 272,111 C269,118 272,128 270,137 C268,146 266,155 261,163 C256,171 245,179 237,184 C229,189 220,193 211,194 C202,195 194,193 185,192 C176,190 168,184 159,184 C150,184 142,188 133,191 C124,193 115,197 107,201 C99,206 89,211 85,218 C81,225 83,235 84,244 C84,253 88,261 90,270 C92,279 93,287 97,296 C101,305 108,313 112,322 C117,331 121,339 124,348 C126,357 127,365 125,374 C124,383 121,391 117,400 C112,409 103,417 98,426 C92,435 87,443 84,452 C82,461 83,469 83,478 C83,487 83,495 84,504 C86,513 89,521 93,530 C96,539 99,547 104,556 C109,565 115,573 121,582 C128,591 135,601 142,608 C149,614 157,617 165,621 C173,626 182,633 191,634 C200,636 208,632 217,630 C226,628 234,623 243,622 C252,620 260,620 269,620 C278,620 286,619 295,621 C304,622 314,625 321,631 C328,637 333,648 338,656 C342,664 343,672 349,678 C355,683 366,684 375,688 C384,692 392,698 401,700 C410,703 418,702 427,703 C436,704 444,708 453,707 C462,707 470,703 479,700 C488,698 496,696 505,693 C514,690 522,687 531,682 C540,677 549,670 557,663 C565,656 573,646 578,637 C583,628 585,620 588,611 C591,602 594,594 595,585 C597,576 595,568 595,559 C594,550 595,542 593,533 C592,524 589,516 586,507 C583,498 578,490 574,481 C571,472 569,464 566,455 C562,446 558,438 555,429 C553,420 549,412 550,403 C552,394 559,386 564,377 C569,368 576,360 580,351 C584,342 585,334 586,325 C587,316 584,308 584,299 C584,290 586,282 585,273 C584,264 583,256 579,247 C575,238 569,228 562,221 C555,214 545,208 536,205 C527,201 518,204 510,201 C502,197 491,189 485,182 C479,175 475,165 472,156 C468,147 469,138 465,130 C462,122 458,114 452,107 C446,101 437,97 428,93 C418,88 405,83 395,82 Z%22/%3E%3Cpath d=%22M307,317 C305,317 304,317 302,317 C300,317 299,318 297,319 C295,320 294,321 292,322 C291,324 290,325 289,327 C288,329 287,330 286,332 C285,334 285,335 284,337 C283,339 282,340 281,342 C281,344 280,345 279,347 C278,349 277,350 276,352 C275,354 274,355 273,357 C273,359 272,360 272,362 C272,364 272,365 272,367 C272,369 273,370 273,372 C273,374 274,375 274,377 C274,379 275,380 275,382 C275,384 275,385 275,387 C275,389 275,390 276,392 C276,394 276,395 277,397 C277,399 278,400 278,402 C278,404 278,405 279,407 C279,409 279,410 279,412 C279,414 279,415 279,417 C279,419 280,420 280,422 C281,423 281,425 282,427 C283,428 285,430 286,431 C287,433 289,434 290,436 C292,438 293,439 294,441 C295,443 296,444 297,446 C298,448 298,449 299,451 C300,453 301,454 301,456 C302,457 303,459 304,460 C306,461 307,462 308,463 C310,463 311,464 313,464 C315,465 316,465 318,465 C320,465 321,465 323,464 C325,464 326,464 328,463 C330,463 331,463 333,463 C335,462 336,462 338,462 C340,462 341,462 343,461 C344,461 346,460 347,459 C348,458 350,456 351,455 C352,453 353,452 354,450 C355,448 356,447 357,445 C358,443 359,442 360,440 C361,438 362,437 363,435 C364,433 365,432 366,430 C367,428 368,427 369,425 C369,423 370,422 371,420 C372,418 372,417 373,415 C373,413 374,412 374,410 C374,408 375,407 376,405 C376,403 377,402 377,400 C378,398 379,397 379,395 C380,393 380,392 380,390 C381,388 381,387 381,385 C381,383 381,382 381,380 C381,378 381,377 381,375 C382,373 382,372 382,370 C382,368 383,367 383,365 C383,363 383,362 383,360 C383,358 383,357 383,355 C382,353 382,352 382,350 C382,348 381,347 381,345 C381,343 381,342 381,340 C381,339 381,337 380,336 C380,335 379,334 378,333 C377,333 375,333 374,333 C372,334 371,335 369,335 C367,336 366,337 364,338 C362,339 361,339 359,340 C357,341 356,341 354,341 C352,342 351,342 349,342 C347,342 346,342 344,342 C342,342 341,342 339,342 C337,341 336,341 334,340 C332,340 331,339 329,338 C327,337 326,336 324,334 C323,333 321,331 320,330 C319,328 318,327 316,325 C315,323 314,322 312,321 C311,319 309,318 307,317 Z%22/%3E%3C/svg%3E') center / contain no-repeat;
  opacity: 0; transform: scale(.4) rotate(-40deg); transition: opacity .25s, transform .45s cubic-bezier(.3,1.6,.5,1); pointer-events: none;
}
.bio:nth-child(even)::after { -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 672 736%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%2252%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M299,77 C292,79 281,84 274,89 C267,94 263,99 258,106 C253,113 247,123 245,131 C243,139 246,148 247,156 C247,164 248,173 249,181 C250,189 254,198 253,206 C252,214 248,224 242,231 C236,238 226,245 218,248 C210,250 201,249 193,246 C185,243 178,232 170,230 C163,227 154,232 146,234 C138,236 129,239 121,242 C113,245 104,247 99,253 C94,259 95,269 93,277 C90,285 85,294 84,302 C83,310 86,319 87,327 C88,335 88,344 89,352 C89,360 89,369 91,377 C93,385 96,394 100,402 C105,410 113,419 120,427 C126,435 133,442 140,449 C147,456 155,463 159,471 C164,479 166,488 167,496 C169,504 167,513 165,521 C164,529 160,538 158,546 C157,554 157,563 157,571 C158,579 158,588 160,596 C162,604 163,613 168,621 C172,629 179,637 186,642 C193,647 203,648 211,651 C219,653 228,654 236,656 C244,657 253,660 261,661 C269,662 278,664 286,662 C294,660 303,652 311,648 C319,643 328,640 336,635 C344,630 353,621 361,617 C369,614 378,612 386,614 C394,615 403,623 411,628 C419,633 427,640 435,642 C443,643 452,640 460,638 C468,636 477,634 485,630 C493,626 502,621 510,614 C518,607 527,598 534,590 C540,582 545,573 549,565 C553,557 554,548 557,540 C560,532 566,523 568,515 C570,507 570,498 570,490 C570,482 570,473 570,465 C569,457 568,448 565,440 C562,432 556,423 553,415 C550,407 549,398 549,390 C549,382 549,373 552,365 C555,357 562,348 567,340 C572,332 579,323 583,315 C586,307 587,298 589,290 C591,282 591,273 592,265 C593,257 597,248 596,240 C594,232 588,223 581,215 C575,207 567,198 559,193 C551,188 543,185 535,183 C527,182 518,186 510,186 C502,185 493,182 485,181 C477,179 468,180 460,179 C452,178 443,181 435,177 C427,173 417,164 410,156 C403,148 400,138 395,131 C390,124 385,121 379,114 C373,108 366,98 359,92 C353,86 347,83 339,80 C331,78 321,78 314,77 C307,76 306,75 299,77 Z%22/%3E%3Cpath d=%22M345,323 C343,324 342,325 340,326 C338,327 337,328 335,329 C333,330 332,331 330,332 C328,333 327,333 325,333 C323,334 322,334 320,334 C318,334 317,335 315,335 C313,336 312,337 310,338 C308,339 307,341 305,342 C303,344 302,345 300,347 C298,349 297,350 295,352 C294,354 292,355 292,357 C291,359 290,360 290,362 C289,364 289,365 289,367 C288,369 288,370 288,372 C287,374 287,375 286,377 C286,379 285,380 285,382 C284,384 284,385 284,387 C284,389 284,390 285,392 C285,394 286,395 286,397 C287,399 287,400 287,402 C288,404 288,405 288,407 C289,409 289,410 289,412 C290,414 290,415 291,417 C292,418 293,420 294,421 C296,422 297,423 299,425 C301,426 302,427 304,429 C306,430 307,432 309,433 C310,435 312,436 313,438 C315,440 316,441 317,443 C318,444 319,445 321,446 C322,447 324,448 325,448 C327,448 328,448 330,448 C332,448 333,448 335,448 C337,448 338,448 340,448 C342,448 343,448 345,448 C347,448 348,448 350,448 C352,449 353,449 355,449 C357,450 358,450 360,450 C362,450 363,450 365,449 C367,449 368,448 370,448 C372,447 373,447 375,446 C377,446 378,445 380,445 C382,444 383,444 385,443 C387,443 388,442 390,441 C392,441 393,440 395,439 C397,438 398,437 400,436 C402,435 403,434 405,432 C406,431 408,429 409,428 C410,426 411,425 411,423 C412,421 412,420 412,418 C413,416 413,415 413,413 C413,411 412,410 412,408 C412,406 411,405 411,403 C410,401 410,400 409,398 C408,396 408,395 407,393 C407,391 407,390 406,388 C406,386 406,385 405,383 C405,381 405,380 405,378 C405,376 405,375 404,373 C404,371 404,370 404,368 C404,366 404,365 404,363 C403,361 403,360 402,358 C402,356 401,355 400,353 C400,351 399,350 398,348 C397,346 397,345 396,343 C395,342 395,341 394,340 C392,339 391,338 390,337 C388,336 387,336 385,335 C383,335 382,334 380,333 C378,332 377,332 375,331 C373,330 372,330 370,329 C368,328 367,328 365,328 C363,327 362,327 360,326 C358,326 357,325 355,324 C353,324 352,323 350,323 C348,323 347,323 345,323 Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 672 736%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%2252%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M299,77 C292,79 281,84 274,89 C267,94 263,99 258,106 C253,113 247,123 245,131 C243,139 246,148 247,156 C247,164 248,173 249,181 C250,189 254,198 253,206 C252,214 248,224 242,231 C236,238 226,245 218,248 C210,250 201,249 193,246 C185,243 178,232 170,230 C163,227 154,232 146,234 C138,236 129,239 121,242 C113,245 104,247 99,253 C94,259 95,269 93,277 C90,285 85,294 84,302 C83,310 86,319 87,327 C88,335 88,344 89,352 C89,360 89,369 91,377 C93,385 96,394 100,402 C105,410 113,419 120,427 C126,435 133,442 140,449 C147,456 155,463 159,471 C164,479 166,488 167,496 C169,504 167,513 165,521 C164,529 160,538 158,546 C157,554 157,563 157,571 C158,579 158,588 160,596 C162,604 163,613 168,621 C172,629 179,637 186,642 C193,647 203,648 211,651 C219,653 228,654 236,656 C244,657 253,660 261,661 C269,662 278,664 286,662 C294,660 303,652 311,648 C319,643 328,640 336,635 C344,630 353,621 361,617 C369,614 378,612 386,614 C394,615 403,623 411,628 C419,633 427,640 435,642 C443,643 452,640 460,638 C468,636 477,634 485,630 C493,626 502,621 510,614 C518,607 527,598 534,590 C540,582 545,573 549,565 C553,557 554,548 557,540 C560,532 566,523 568,515 C570,507 570,498 570,490 C570,482 570,473 570,465 C569,457 568,448 565,440 C562,432 556,423 553,415 C550,407 549,398 549,390 C549,382 549,373 552,365 C555,357 562,348 567,340 C572,332 579,323 583,315 C586,307 587,298 589,290 C591,282 591,273 592,265 C593,257 597,248 596,240 C594,232 588,223 581,215 C575,207 567,198 559,193 C551,188 543,185 535,183 C527,182 518,186 510,186 C502,185 493,182 485,181 C477,179 468,180 460,179 C452,178 443,181 435,177 C427,173 417,164 410,156 C403,148 400,138 395,131 C390,124 385,121 379,114 C373,108 366,98 359,92 C353,86 347,83 339,80 C331,78 321,78 314,77 C307,76 306,75 299,77 Z%22/%3E%3Cpath d=%22M345,323 C343,324 342,325 340,326 C338,327 337,328 335,329 C333,330 332,331 330,332 C328,333 327,333 325,333 C323,334 322,334 320,334 C318,334 317,335 315,335 C313,336 312,337 310,338 C308,339 307,341 305,342 C303,344 302,345 300,347 C298,349 297,350 295,352 C294,354 292,355 292,357 C291,359 290,360 290,362 C289,364 289,365 289,367 C288,369 288,370 288,372 C287,374 287,375 286,377 C286,379 285,380 285,382 C284,384 284,385 284,387 C284,389 284,390 285,392 C285,394 286,395 286,397 C287,399 287,400 287,402 C288,404 288,405 288,407 C289,409 289,410 289,412 C290,414 290,415 291,417 C292,418 293,420 294,421 C296,422 297,423 299,425 C301,426 302,427 304,429 C306,430 307,432 309,433 C310,435 312,436 313,438 C315,440 316,441 317,443 C318,444 319,445 321,446 C322,447 324,448 325,448 C327,448 328,448 330,448 C332,448 333,448 335,448 C337,448 338,448 340,448 C342,448 343,448 345,448 C347,448 348,448 350,448 C352,449 353,449 355,449 C357,450 358,450 360,450 C362,450 363,450 365,449 C367,449 368,448 370,448 C372,447 373,447 375,446 C377,446 378,445 380,445 C382,444 383,444 385,443 C387,443 388,442 390,441 C392,441 393,440 395,439 C397,438 398,437 400,436 C402,435 403,434 405,432 C406,431 408,429 409,428 C410,426 411,425 411,423 C412,421 412,420 412,418 C413,416 413,415 413,413 C413,411 412,410 412,408 C412,406 411,405 411,403 C410,401 410,400 409,398 C408,396 408,395 407,393 C407,391 407,390 406,388 C406,386 406,385 405,383 C405,381 405,380 405,378 C405,376 405,375 404,373 C404,371 404,370 404,368 C404,366 404,365 404,363 C403,361 403,360 402,358 C402,356 401,355 400,353 C400,351 399,350 398,348 C397,346 397,345 396,343 C395,342 395,341 394,340 C392,339 391,338 390,337 C388,336 387,336 385,335 C383,335 382,334 380,333 C378,332 377,332 375,331 C373,330 372,330 370,329 C368,328 367,328 365,328 C363,327 362,327 360,326 C358,326 357,325 355,324 C353,324 352,323 350,323 C348,323 347,323 345,323 Z%22/%3E%3C/svg%3E'); }
.bio:hover::after { opacity: 1; transform: none; }

/* 6. Séparateur avant l'Espace pro */
.separateur { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 520px; margin: clamp(8px, 2vw, 24px) auto 0; padding: 0 var(--marge); }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bord-3)); }
.separateur::after { background: linear-gradient(270deg, transparent, var(--bord-3)); }
.separateur .dessin { width: 22px; color: var(--texte-sourd); }
.separateur .dessin.fleur { width: 34px; color: var(--texte-doux); }

@media (prefers-reduced-motion: reduce) {
  .dessin, .dessin path, .semis .dessin { animation: none !important; transition: none !important; }
  .dessin--trace path { stroke-dashoffset: 0; }
  .semis .dessin { opacity: .75; transform: none; }
}

@media (max-width: 700px) { .dessin--trace { display: none; } }

/* ===== Logo en fragments (rassemblement + respiration) ===== */
.logo-frag { position: relative; display: inline-block; flex: none; }
.pied__contact .logo-frag { margin-bottom: 8px; }
.logo-frag img { position: absolute; display: block; transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
.logo-frag--arrive img { animation: logo-arrive 1.1s cubic-bezier(.2,1.25,.35,1) both; animation-delay: var(--d); }
@keyframes logo-arrive {
  from { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(.85); }
  25% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.marque:hover .logo-frag img, .pied__contact:hover .logo-frag img, .logo-frag--respire img {
  transform: translate(var(--ox), var(--oy)) rotate(var(--or));
}
.pied__contact .logo-frag { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .logo-frag img { transition: none; animation: none; } }