/* ===================================================================
   ALIGN AGENCY — feuille de style du thème
   -------------------------------------------------------------------
   Tout le design se règle dans le bloc :root. Pas de compilation :
   éditer ce fichier, puis le déployer, suffit.
   Grille de 8 px. Courbe signature : cubic-bezier(.22,1,.36,1).
   =================================================================== */

:root {
  /* --- couleurs de base ------------------------------------------------
     Les sept premières se règlent aussi sans code, dans l'administration :
     Apparence → Personnaliser → « Colours & fonts ». Ce qui est réglé là
     remplace la valeur écrite ici, sur tout le site.                    */
  --nuit:       #300a57;  /* fond */
  --creme:      #FFF2C2;  /* titres, chiffres, mises en avant */
  --texte:      #efe6f5;  /* texte courant */
  --sourdine:   #b4a1ca;  /* texte secondaire */
  --rose:       #dd88db;  /* accent : étiquettes, liens, étoile */
  --orchid:     #982c96;  /* fond des boutons */
  --sur-bouton: #ffffff;  /* texte des boutons */
  --alerte:     #ff9b8f;  /* erreurs de formulaire */
  --prune:      #64187b;  /* kit de marque, en réserve */

  /* --- nuances calculées à partir des couleurs de base -------------------
     Ne pas les remplacer par des valeurs fixes : elles suivent toutes seules
     un changement de couleur. Transparences : color-mix(…, transparent).  */
  --nuit-2:     color-mix(in srgb, var(--nuit) 72%, #000);      /* cartes */
  --nuit-3:     color-mix(in srgb, var(--nuit) 48%, #000);      /* voiles sur les photos */
  --nuit-haut:  color-mix(in hsl, var(--nuit) 94%, #fff);       /* surfaces éclairées */
  --ombre:      color-mix(in srgb, var(--nuit) 20%, #000);      /* ombres portées */
  --trait:      color-mix(in srgb, var(--creme) 13%, transparent); /* filets et bordures */

  /* --- typographie : deux familles, pas une de plus ----------------------
     Réglables aussi dans « Colours & fonts » (liste dans inc/brand.php).  */
  --display:  "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --corps:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tracking: -.035em;

  /* --- mise en page (multiples de 8) --- */
  --large:    1440px;
  --marge:    clamp(20px, 4.5vw, 64px);
  --section:  clamp(96px, 14vw, 224px);
  --courbe:   cubic-bezier(.22, 1, .36, 1);

  /* --- logo : grand en haut de page pour qu'« Align Agency » se lise (Tahnee, 13/10),
     réduit dès qu'on défile. La hauteur de l'en-tête en découle. --- */
  --logo:       104px;  /* environ 4 fois l'ancien logo */
  --logo-colle: 46px;
}
@media (max-width: 900px) {
  :root { --logo: 84px; --logo-colle: 40px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nuit); color: var(--texte);
  font-family: var(--corps); font-weight: 300; font-size: 18px; line-height: 1.55;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); letter-spacing: var(--tracking); margin: 0; font-weight: 800; }
.wrap { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); }

/* petites étiquettes : une seule recette pour tout le site */
.lab { font-family: var(--corps); font-weight: 500; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }

/* ---------- grain ---------- */
.grain { position: fixed; inset: -200%; z-index: 9998; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite; }
@keyframes grain {
  0%,100% { transform: translate(0,0); } 16% { transform: translate(-2%,-3%); }
  33% { transform: translate(-4%,2%); }  50% { transform: translate(2%,-4%); }
  66% { transform: translate(-3%,3%); }  83% { transform: translate(3%,2%); }
}

/* ---------- jauge de défilement ---------- */
.jauge { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 9997;
  background: var(--rose); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- en-tête ---------- */
/* Fixe plutôt que collant : quand le logo rétrécit, la page ne saute pas.
   Le corps de page réserve la place de l'en-tête au grand format. */
body { padding-top: calc(var(--logo) + 49px); } /* 2 × 24 px de marge + le filet */
.top { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 50; padding: 24px 0;
  transition: background .4s, padding .4s, border-color .4s; border-bottom: 1px solid transparent; }
.top.colle { background: color-mix(in srgb, var(--nuit) 82%, transparent); backdrop-filter: blur(16px); padding: 14px 0; border-bottom-color: var(--trait); }
.top-in { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.top img { height: var(--logo); width: auto; transition: height .45s var(--courbe); }
.top.colle img { height: var(--logo-colle); }
nav { display: flex; gap: 32px; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
nav a { text-decoration: none; color: var(--sourdine); transition: color .25s; position: relative; }
nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--rose); transition: width .3s var(--courbe); }
nav a:hover { color: var(--creme); }
nav a:hover::after { width: 100%; }
.burger { display: none; background: transparent; border: 0; cursor: pointer; width: 34px; height: 30px;
  padding: 6px 2px; flex-direction: column; justify-content: center; gap: 7px; }
.burger span { display: block; height: 1.5px; background: var(--creme); transition: transform .3s var(--courbe); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

/* ---------- découpe en mots ---------- */
/* Chaque mot est masqué le temps de monter. La boîte déborde de chaque côté (marges négatives : la mise en
   page ne bouge pas) pour ne pas rogner les jambages (p, y, g) ni la dernière lettre, resserrée par le tracking.
   Une fois le titre apparu, plus aucun masque (.revele) : rien ne peut être coupé au repos, quelle que soit la police. */
.mot { display: inline-block; overflow: hidden; vertical-align: top;
  padding: .12em .14em .3em; margin: -.12em -.14em -.3em; }
.revele .mot { overflow: visible; }
.mot-in { display: inline-block; will-change: transform; }

/* ---------- accroche ---------- */
.hero { position: relative; padding: clamp(40px, 7vw, 96px) 0 0; }
.hero-g { position: relative; display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 0 clamp(16px, 2vw, 32px); align-items: end; }
.hero-t { grid-column: 1 / 12; grid-row: 1; }
.hero h1 { font-size: clamp(46px, 10.4vw, 168px); line-height: .88; color: var(--creme);
  margin: 0 0 clamp(24px, 2.6vw, 36px); text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--rose); }
.marque { grid-column: 12 / 13; grid-row: 1; align-self: start; justify-self: end;
  width: clamp(56px, 6.4vw, 104px); height: auto; opacity: .85; overflow: visible; }
.marque .rayons { transform-origin: 50% 50%; transform-box: fill-box; animation: respire 7s ease-in-out infinite; }
@keyframes respire { 0%,100% { transform: scale(1) rotate(0deg); opacity: .9; } 50% { transform: scale(1.08) rotate(8deg); opacity: 1; } }
.hero-bas { grid-column: 1 / 13; grid-row: 2; padding-bottom: clamp(16px, 2.4vw, 32px); }
.hero .sous { margin: 0; max-width: 27em; color: var(--sourdine); font-size: clamp(16.5px, 1.3vw, 20px); }

/* bouton : remplissage crème qui monte, puis aimant */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px;
  background: var(--orchid); color: var(--sur-bouton); text-decoration: none;
  font-family: var(--corps); font-weight: 500; font-size: 16px;
  padding: 18px 34px; border-radius: 999px; overflow: hidden; isolation: isolate;
  transition: color .3s var(--courbe); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--creme);
  transform: translateY(101%); transition: transform .45s var(--courbe); }
.btn:hover { color: var(--nuit); }
.btn:hover::before { transform: translateY(0); }
.btn .fl { transition: transform .35s var(--courbe); }
.btn:hover .fl { transform: translateX(5px); }

/* ---------- ruban de texte ---------- */
.ruban { padding: clamp(40px, 6vw, 80px) 0; overflow: hidden; border-block: 1px solid var(--trait); margin-top: clamp(32px, 5vw, 64px); }
.ruban .rail { display: flex; width: max-content; align-items: center; }
.ruban b { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 7vw, 108px);
  line-height: 1; letter-spacing: var(--tracking); color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--creme) 42%, transparent); padding-right: clamp(24px, 3vw, 48px); white-space: nowrap; }
.ruban b:nth-of-type(even) { color: var(--creme); -webkit-text-stroke: 0; }
.ruban svg { width: clamp(30px, 4vw, 60px); height: auto; flex: 0 0 auto; margin-right: clamp(24px, 3vw, 48px); }

/* ---------- bande vidéo : lecture continue, sans clic ---------- */
.film { margin: clamp(56px, 8vw, 112px) 0 0; }
.film-c { position: relative; overflow: hidden; aspect-ratio: 1200 / 500; background: var(--nuit-2);
  clip-path: inset(0 12% round 10px); will-change: clip-path; }
.film-c video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-c::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--nuit-3) 35%, transparent), transparent 40%); }

/* ---------- titres de section ---------- */
.titre { font-size: clamp(32px, 5.6vw, 84px); line-height: .95; color: var(--creme); margin: 0 0 clamp(32px, 4vw, 56px); }

/* ---------- artistes ---------- */
.artistes { padding: var(--section) 0 0; }
.piste { overflow: hidden; margin: 0 0 clamp(20px, 3vw, 40px); }
.rail { display: flex; width: max-content; will-change: transform; }
.carte { position: relative; flex: 0 0 auto; height: clamp(220px, 25vw, 340px); aspect-ratio: 1; /* carré, même taille dans les deux pistes */
  margin: 0 clamp(12px, 1.4vw, 20px) 0 0; overflow: hidden; background: var(--nuit-2);
  display: block; text-decoration: none; color: inherit; transition: opacity .5s var(--courbe); }
.carte .cadre { position: relative; display: block; height: 100%; overflow: hidden; }
.carte img { width: 100%; height: 112%; max-width: none; object-fit: cover; margin-top: -6%;
  transition: transform .8s var(--courbe), filter .5s var(--courbe); will-change: transform; }
/* survol (Tahnee, 13/10) : la photo s'éclaircit et ressort, les autres s'effacent */
.carte:hover img, .carte:focus-visible img { filter: brightness(1.16) saturate(1.06); }
.piste:hover .carte { opacity: .34; }
.piste .carte:hover { opacity: 1; }
.carte .nom-carte { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 2vw, 28px);
  background: linear-gradient(to top, color-mix(in srgb, var(--nuit-3) 94%, transparent) 10%, color-mix(in srgb, var(--nuit-3) 50%, transparent) 58%, transparent);
  font-family: var(--display); font-weight: 700; color: var(--creme);
  font-size: clamp(16px, 1.7vw, 25px); line-height: 1; letter-spacing: var(--tracking); }
.carte:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.carte.vide { display: grid; place-items: center; align-content: center; gap: 22px;
  border: 1px solid var(--trait); background: radial-gradient(circle at 50% 40%, var(--nuit-haut), var(--nuit-2) 70%); }
.carte.vide .etoile-vide { width: 38%; height: auto; opacity: .9; }
.carte.vide .nom-carte { position: static; background: none; padding: 0 18px; text-align: center; }
.sous-piste { margin: 0 0 clamp(20px, 2.4vw, 28px); }

/* Les autres images ne changent pas au survol (Tahnee, 13/10 : le filtre violet est abandonné). */
.bl-img, .bande-photos .ph { position: relative; }

/* ---------- ce qu'on fait : trois panneaux qui défilent à l'horizontale ---------- */
.faire { padding: var(--section) 0 0; }
/* figée sous l'en-tête réduit : la marge du haut part de sa hauteur (logo + 2 × 14 px + filet) */
.faire-pin { padding: calc(var(--logo-colle) + 29px + clamp(12px, 3vh, 40px)) 0 clamp(24px, 4vh, 48px); }
.faire-tete { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px;
  margin-bottom: clamp(24px, 3.4vh, 40px); }
.faire-tete h2 { font-size: clamp(32px, 5.6vw, 84px); line-height: .95; color: var(--creme); }
/* les trois services, nommés et cliquables, avec flèches : on voit qu'il y en a trois et on passe de l'un à l'autre */
.faire-nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 14px; }
.faire-onglet, .faire-fl { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--sourdine);
  background: transparent; border: 1px solid var(--trait); border-radius: 999px; padding: 10px 18px;
  transition: color .3s, background .3s, border-color .3s; }
.faire-fl { width: 44px; height: 44px; padding: 0; font-size: 18px; line-height: 1; display: inline-grid; place-items: center; }
.faire-onglet:hover, .faire-fl:hover { color: var(--creme); border-color: var(--rose); }
.faire-onglet[aria-current="true"] { background: var(--creme); color: var(--nuit); border-color: var(--creme); }
.faire-onglet:focus-visible, .faire-fl:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.faire-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--trait); }
.faire-prog i { position: absolute; inset: 0; background: var(--rose); transform: scaleX(0); transform-origin: 0 50%; }
.faire-vp { overflow: hidden; }
.faire-piste { display: flex; width: max-content; gap: clamp(20px, 2.4vw, 40px); padding: 0 var(--marge); }
.panneau { position: relative; overflow: hidden; flex: 0 0 auto;
  width: min(82vw, 1180px); height: clamp(440px, calc(100vh - 320px), 640px);
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: clamp(28px, 4vw, 64px); border-radius: 18px;
  background: linear-gradient(140deg, var(--nuit-haut) 0%, var(--nuit-2) 62%); border: 1px solid var(--trait); }
.panneau.inverse { grid-template-columns: 1fr 1.15fr; }
.panneau.inverse .pan-visuel { order: 2; }
.pan-visuel { position: relative; height: 100%; min-height: 0; }
.pan-texte .lab { display: block; margin-bottom: clamp(16px, 2vw, 24px); }
.pan-texte h3 { font-weight: 700; color: var(--creme); font-size: clamp(26px, 3vw, 48px); line-height: 1.05; max-width: 13em; }
.pan-texte h3 em { font-style: normal; color: var(--rose); }
.vers { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(20px, 2.4vw, 32px);
  text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--creme);
  border-bottom: 1px solid var(--trait); padding-bottom: 6px; transition: gap .35s var(--courbe), border-color .3s; }
.vers:hover { gap: 16px; border-color: var(--rose); }
/* bouton d'appel à l'action dans les panneaux : plein, rose, qui se remplit de crème au survol */
.vers.cta { position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: 999px;
  padding: 15px 26px; background: var(--rose); color: var(--nuit); font-weight: 600; font-size: 15px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--rose) 22%, transparent); transition: color .3s, gap .35s var(--courbe), box-shadow .35s; }
.vers.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--creme);
  transform: translateY(101%); transition: transform .45s var(--courbe); }
.vers.cta:hover { gap: 16px; box-shadow: 0 14px 40px color-mix(in srgb, var(--creme) 25%, transparent); }
.vers.cta:hover::before { transform: translateY(0); }

/* visuel 1 — les planches du deck, en éventail */
.deck { position: absolute; inset: 0; display: grid; place-items: center; }
.feuille { position: absolute; width: 78%; border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ombre) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--creme) 12%, transparent); will-change: transform; }
.feuille img { width: 100%; height: auto; }

/* visuel 2 — un téléphone dont le fil défile en continu */
.scene-tel { position: absolute; inset: 0; display: grid; place-items: center; }
.tel { position: relative; height: 91%; aspect-ratio: 9 / 18; /* plus grand et un peu plus large (Tahnee, 13/10), sans toucher les bords */ border-radius: 38px; overflow: hidden;
  border: 9px solid color-mix(in srgb, var(--nuit) 36%, #000); background: #000; /* écran de téléphone : noir quel que soit le thème */
  box-shadow: 0 30px 80px color-mix(in srgb, var(--ombre) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--creme) 16%, transparent); transform: rotate(-4deg); }
.tel::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 34%; height: 18px; border-radius: 12px; background: color-mix(in srgb, var(--nuit) 36%, #000); }
.tel .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; animation: fil 26s linear infinite; }
.tel .grille img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@keyframes fil { to { transform: translateY(-50%); } }
.coeur { position: absolute; width: 22px; height: 22px; color: var(--rose); opacity: 0;
  animation: monte 5.5s var(--courbe) infinite; }
@keyframes monte {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx, 10px), -220px) scale(1.15); opacity: 0; }
}

/* visuel 3 — une arche, et le « 1:1 » en contour */
.scene-arche { position: absolute; inset: 0; display: grid; place-items: center; }
.arche { position: relative; height: 94%; aspect-ratio: 4 / 5; border-radius: 999px 999px 16px 16px; overflow: hidden;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ombre) 50%, transparent); }
.arche img { width: 100%; height: 112%; object-fit: cover; margin-top: -6%; }
.un-un { position: absolute; left: -2%; bottom: 2%; font-family: var(--display); font-weight: 800;
  font-size: clamp(80px, 11vw, 190px); line-height: .8; letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 1.5px var(--creme); pointer-events: none; }
.scene-arche .mini { position: absolute; right: 4%; top: 6%; width: clamp(40px, 4.4vw, 64px); animation: tourne 18s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- témoignages : petits portraits en onglets, deux publics ---------- */
.dits { padding: var(--section) 0 0; overflow-x: clip; } /* le filigrane ne doit jamais élargir la page */
.dits-g { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 32px); align-items: start; }
.dits-titre { grid-column: 1 / -1; font-size: clamp(28px, 3.4vw, 50px); margin-bottom: 0; }
.dits-gauche { grid-column: 1 / 7; --av: clamp(54px, 4.8vw, 72px); }
.groupes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(16px, 2vw, 32px); }
.groupe .lab { margin: 0 0 12px; }
.qui { list-style: none; margin: 0; padding: 0; }
.qui button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; position: relative;
  display: grid; grid-template-columns: var(--av) 1fr; gap: 16px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--trait); }
.qui li:last-child button { border-bottom: 1px solid var(--trait); }
.qui img { width: var(--av); height: var(--av); border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px transparent; /* en couleur dès le départ */
  transition: filter .5s, opacity .5s, box-shadow .5s var(--courbe), transform .5s var(--courbe); }
.qui .nom { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -.015em;
  line-height: 1.15; color: var(--sourdine); transition: color .4s; }
.qui .role { display: block; margin-top: 4px; font-size: clamp(12.5px, .95vw, 14px); line-height: 1.35; color: var(--sourdine); }
.qui button[aria-selected="true"] img { filter: brightness(1.12) saturate(1.05); transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--nuit), 0 0 0 4px var(--rose); }
.qui button[aria-selected="true"] .nom { color: var(--creme); }
.qui button:hover img { filter: brightness(1.08); }
.qui button:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.qui .temps { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--rose);
  transform: scaleX(0); transform-origin: 0 50%; }
.qui button[aria-selected="true"] .temps { animation: avance 7s linear forwards; }
.dits.pause .qui .temps { animation-play-state: paused; }
@keyframes avance { to { transform: scaleX(1); } }

.dits-droite { grid-column: 7 / 13; position: relative; padding-left: clamp(0px, 2.4vw, 40px); padding-top: 30px; /* sous la ligne des étiquettes Artists / Managers */ }
/* l'étoile d'Align en filigrane, qui tourne lentement derrière la citation */
.filigrane { position: absolute; right: -4%; top: -14%; width: clamp(160px, 22vw, 320px); height: auto;
  opacity: .07; pointer-events: none; animation: tourne 60s linear infinite; }
.scene { position: relative; }
.dit { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.dit.actif { opacity: 1; visibility: visible; }
.dit blockquote { margin: 0; font-family: var(--display); font-weight: 500; color: var(--creme);
  font-size: clamp(24px, 2.9vw, 44px); line-height: 1.1; letter-spacing: var(--tracking); }
.dit p { margin: clamp(18px, 2.2vw, 28px) 0 0; color: var(--sourdine); font-size: clamp(17px, 1.3vw, 19px); max-width: 34em; }
.dit cite { display: block; margin-top: clamp(16px, 2vw, 22px); font-style: normal; font-size: clamp(15px, 1.15vw, 17px); color: var(--creme); font-weight: 500; }
.dit cite span { color: var(--sourdine); font-weight: 300; }

/* ---------- logos : deux rangées denses, en sens contraires ---------- */
.logos { padding: var(--section) 0 0; }
.bande { overflow: hidden; margin-bottom: clamp(12px, 1.4vw, 20px); }
.bande .rail { align-items: stretch; }
.tuile { flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(200px, 21vw, 320px); height: clamp(112px, 11vw, 168px);
  margin-right: clamp(12px, 1.4vw, 20px); border: 1px solid var(--trait); border-radius: 14px;
  background: color-mix(in srgb, var(--creme) 2.5%, transparent); transition: background .4s, border-color .4s; }
.tuile:hover { background: color-mix(in srgb, var(--rose) 10%, transparent); border-color: color-mix(in srgb, var(--rose) 40%, transparent); }
.tuile img { height: calc(clamp(34px, 3.6vw, 56px) * var(--k, 1)); width: auto; max-width: 72%; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .78; transition: opacity .3s, transform .5s var(--courbe); }
.tuile:hover img { opacity: 1; transform: scale(1.06); }

/* ---------- Tahnee : photo encadrée ---------- */
.fond { padding: var(--section) 0 0; }
.fond-g { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 32px); align-items: center; }
.portrait { grid-column: 2 / 6; position: relative; }
.portrait .cadre-fin { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--creme) 38%, transparent); border-radius: 14px;
  transform: translate(18px, 18px); pointer-events: none; }
.portrait .photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--nuit-2); clip-path: inset(0 0 0 0 round 14px); }
.portrait .photo img { width: 100%; height: 116%; object-fit: cover; object-position: 50% 20%; margin-top: -8%; }
/* Pas de voile sur la photo de Tahnee : il la faisait paraître grise (Tahnee, 13/10). */
/* badge circulaire qui tourne en permanence */
.badge { position: absolute; right: -9%; top: -7%; z-index: 3; width: clamp(96px, 10vw, 148px); aspect-ratio: 1; }
.badge .texte-tour { position: absolute; inset: 0; animation: tourne 20s linear infinite; }
.badge .texte-tour text { font-family: var(--corps); font-weight: 500; font-size: 11px; letter-spacing: .12em; fill: var(--creme); text-transform: uppercase; }
.badge .coeur-badge { position: absolute; left: 31%; top: 31%; width: 38%; height: 38%; }
.fond-t { grid-column: 7 / 12; }
.fond-t .lab { display: block; margin-bottom: clamp(20px, 2.4vw, 28px); }
.fond-t .gros { font-family: var(--display); font-weight: 500; color: var(--creme);
  font-size: clamp(24px, 2.7vw, 40px); line-height: 1.18; letter-spacing: -.025em; margin: 0; }
.fond-t .petit { color: var(--sourdine); font-size: clamp(16px, 1.25vw, 18.5px); margin: clamp(20px, 2.4vw, 28px) 0 0; max-width: 32em; }

/* ---------- clôture : un mur d'images qui coule derrière le texte ---------- */
.fin { position: relative; overflow: hidden; margin-top: var(--section); padding: clamp(120px, 16vw, 240px) 0; isolation: isolate; }
.fin-fond { position: absolute; inset: -20% -10%; z-index: -2; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.2vw, 18px); transform: rotate(-8deg); opacity: .5; }
.col { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); animation: colonne 46s linear infinite; }
.col.bas { animation-direction: reverse; animation-duration: 54s; }
.col img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
@keyframes colonne { to { transform: translateY(-50%); } }
.fin::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--nuit) 92%, transparent) 30%, color-mix(in srgb, var(--nuit) 72%, transparent) 70%, color-mix(in srgb, var(--nuit) 55%, transparent)); }
.fin h2 { font-size: clamp(38px, 8vw, 128px); line-height: .9; color: var(--creme);
  margin: 0 0 clamp(32px, 4vw, 52px); text-wrap: balance; }
footer.pied { border-top: 1px solid var(--trait); background: var(--nuit-3); padding: 32px 0 48px;
  color: var(--sourdine); font-size: 13.5px; }
footer.pied .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer.pied a { text-decoration: none; }
footer.pied a:hover { color: var(--creme); }

/* ---------- état initial avant animation ---------- */
.js .anim { opacity: 0; }

@media (max-width: 900px) {
  .burger { display: flex; }
  .top { background: color-mix(in srgb, var(--nuit) 90%, transparent); backdrop-filter: blur(16px); }
  nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; align-items: stretch;
    background: var(--nuit-2); border-top: 1px solid var(--trait); max-height: 0; overflow: hidden;
    transition: max-height .4s var(--courbe); }
  nav.ouvert { max-height: 60vh; }
  nav a { padding: 18px var(--marge); border-bottom: 1px solid var(--trait); font-size: 13px; }
  nav a::after { display: none; }
  .hero-t { grid-column: 1 / 12; }
  .marque { grid-column: 12 / 13; width: 40px; }
  .hero-bas { grid-column: 1 / 13; padding-bottom: 0; }
  .film-c { aspect-ratio: 16 / 10; clip-path: inset(0 0 round 6px); }

  /* les panneaux s'empilent : pas de défilement horizontal au doigt */
  .faire-pin { padding-top: 0; }
  .faire-nav { gap: 6px; }
  .faire-onglet { font-size: 13px; padding: 9px 14px; }
  .faire-fl, .faire-prog { display: none; } /* empilés : les onglets suffisent, chacun mène à son panneau */
  .faire-piste { flex-direction: column; width: auto; gap: 20px; }
  .panneau, .panneau.inverse { width: 100%; height: auto; grid-template-columns: 1fr; gap: 28px; padding: 24px 22px 32px; }
  .panneau.inverse .pan-visuel { order: 0; }
  .pan-visuel { height: 340px; }
  .un-un { font-size: 96px; }

  /* mobile : titre, puis citation, puis les portraits */
  .dits-titre, .dits-gauche, .dits-droite { grid-column: 1 / 13; }
  .dits-titre { order: 1; }
  .dits-droite { order: 2; padding-left: 0; padding-top: 0; }
  .dits-gauche { order: 3; --av: 44px; }
  .filigrane { right: 0; width: 150px; }
  .groupes { gap: 0 14px; }
  .qui .nom { font-size: 14.5px; }
  .qui .role { display: none; }
  .qui button { gap: 12px; padding: 12px 0; }

  .tuile { width: 168px; height: 96px; }

  .portrait { grid-column: 2 / 12; max-width: 420px; }
  .badge { right: -6%; top: -6%; }
  .fond-t { grid-column: 1 / 13; }

  .fin-fond { grid-template-columns: repeat(3, 1fr); opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .marque .rayons, .tel .grille, .coeur, .col, .filigrane, .texte-tour, .mini { animation: none !important; }
  .coeur { display: none; }
  .rail { transform: none !important; }
  .piste { overflow-x: auto; }
  /* logos immobiles : tous visibles d'un coup, sur plusieurs lignes, sans zone à faire défiler (ni leurs copies) */
  .bande { overflow: visible; }
  .bande .rail { flex-wrap: wrap; width: auto; row-gap: clamp(12px, 1.4vw, 20px); }
  .bande .rail > [aria-hidden="true"] { display: none; }
  .js .anim { opacity: 1; }
  .film-c { clip-path: inset(0 0 round 8px) !important; }
  .qui .temps { display: none; }
  * { transition-duration: .01ms !important; }
}

/* ================================================================
   Ajouts propres au thème
   ================================================================ */

/* lien d'évitement : visible seulement au clavier */
.aller-contenu { position: absolute; left: 16px; top: -60px; z-index: 10000; background: var(--creme); color: var(--nuit);
  padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: top .2s; }
.aller-contenu:focus { top: 16px; }

.hero-cta { margin: clamp(24px, 3vw, 36px) 0 0; }

/* section fondatrice sans photo : le texte prend la largeur */
.fond-g.sans-photo .fond-t { grid-column: 2 / 11; }

/* ---------- pages intérieures (gabarit simple, en attendant leurs maquettes) ---------- */
.page-simple { padding: clamp(56px, 9vw, 120px) 0 var(--section); }
.page-simple h1 { font-size: clamp(40px, 7vw, 104px); line-height: .92; color: var(--creme); margin: 0 0 clamp(32px, 4vw, 56px); }
.contenu { max-width: 68ch; font-size: clamp(17px, 1.25vw, 19px); }
.contenu h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.05; color: var(--creme); margin: 1.8em 0 .5em; }
.contenu h3 { font-size: clamp(21px, 2vw, 28px); color: var(--creme); margin: 1.6em 0 .4em; font-weight: 700; }
.contenu p, .contenu ul, .contenu ol { margin: 0 0 1.1em; }
.contenu a { color: var(--rose); }
.contenu img { border-radius: 10px; margin: 1.5em 0; }

/* ================================================================
   Pages de services (gabarit « Service »)
   Mesure des textes : 58 à 68 caractères par ligne. Grands intervalles
   entre sections, une idée par écran, les chiffres sortis du texte.
   ================================================================ */
.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; }

.srv-hero { position: relative; padding: clamp(56px, 9vw, 128px) 0 clamp(48px, 6vw, 88px); overflow-x: clip; }
.srv-hero h1 { font-size: clamp(46px, 9vw, 148px); line-height: .9; color: var(--creme); margin: 14px 0 clamp(28px, 3.4vw, 48px);
  max-width: calc(100% - clamp(72px, 10vw, 168px)); text-wrap: balance; } /* place réservée à l'étoile */
.srv-intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(16px, 2vw, 32px); }
.srv-lead, .srv-suite { grid-column: 1 / 9; }
.srv-lead p { margin: 0; max-width: 58ch; font-family: var(--display); font-weight: 500; color: var(--creme);
  font-size: clamp(21px, 2vw, 30px); line-height: 1.24; letter-spacing: -.02em; }
.srv-suite p { margin: clamp(18px, 2vw, 24px) 0 0; max-width: 65ch; color: var(--sourdine); font-size: clamp(17px, 1.3vw, 19px); }
.srv-cta { display: flex; gap: 20px 32px; align-items: center; flex-wrap: wrap; margin: clamp(32px, 4vw, 48px) 0 0; }
.srv-marque { position: absolute; right: var(--marge); top: clamp(56px, 9vw, 128px); width: clamp(64px, 8vw, 128px); height: auto;
  opacity: .85; animation: tourne 48s linear infinite; }

/* chiffres clés */
.faits-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr);
  border-block: 1px solid var(--trait); }
.faits-1 { --n: 1; } .faits-2 { --n: 2; } .faits-3 { --n: 3; } .faits-4 { --n: 4; }
.faits-l li { padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 32px); border-left: 1px solid var(--trait); }
.faits-l li:first-child { border-left: 0; padding-left: 0; }
.fait-v { display: block; font-family: var(--display); font-weight: 800; color: var(--creme);
  font-size: clamp(34px, 4.4vw, 72px); line-height: 1; letter-spacing: var(--tracking); font-variant-numeric: tabular-nums; }
.fait-l { display: block; margin-top: 12px; color: var(--sourdine); font-size: 15px; line-height: 1.4; max-width: 24ch; }

/* sections : titre fixé à gauche pendant le défilement, cartes à droite */
.srv-section { padding: clamp(80px, 10vw, 160px) 0 0; }
.srv-g { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px clamp(16px, 2vw, 32px); align-items: start; }
.srv-tete { grid-column: 1 / 5; align-self: stretch; } /* toute la hauteur de la section : sinon le titre fixé n'a pas de place pour rester */
.srv-tete .colle-moi { position: sticky; top: 120px; }
.srv-tete h2 { font-size: clamp(30px, 3.6vw, 54px); line-height: .98; color: var(--creme); }
.srv-sec-intro p { margin: 20px 0 0; max-width: 38ch; color: var(--sourdine); font-size: 17px; }
.srv-cartes { grid-column: 5 / 13; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.srv-cartes.larges { grid-template-columns: 1fr; }
.srv-carte { padding: clamp(24px, 2.6vw, 36px); border-radius: 16px; border: 1px solid var(--trait);
  background: linear-gradient(150deg, color-mix(in srgb, var(--creme) 4%, transparent), transparent 55%), var(--nuit-2);
  transition: border-color .4s, translate .5s var(--courbe); }
/* « translate » et non « transform » : l'animation d'apparition occupe déjà transform */
.srv-carte:hover { border-color: color-mix(in srgb, var(--rose) 45%, transparent); translate: 0 -4px; }
.srv-carte h3 { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; font-weight: 700; color: var(--creme);
  font-size: clamp(19px, 1.6vw, 24px); line-height: 1.15; letter-spacing: -.015em; }
.srv-carte .puce { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .12em; }
.srv-carte-texte p { margin: 0; max-width: 68ch; color: var(--sourdine); font-size: 16.5px; line-height: 1.6; }
.srv-carte-texte p + p, .srv-carte-texte ul, .srv-carte-texte ol { margin-top: .8em; }
.srv-carte-texte a, .srv-sec-intro a, .srv-suite a { color: var(--rose); }

/* bande de photos d'artistes, sous les chiffres clés : mouvement permanent */
.bande-photos { overflow: hidden; margin-top: clamp(40px, 5vw, 72px); }
.bande-photos .rail { align-items: stretch; }
.bande-photos .ph { flex: 0 0 auto; display: block; height: clamp(150px, 17vw, 250px); margin-right: clamp(10px, 1.2vw, 16px);
  border-radius: 12px; overflow: hidden; background: var(--nuit-2); }
.bande-photos .ph img { height: 100%; width: auto; max-width: none; object-fit: cover; }

/* le cadre photo qui change au fil des cartes (grand écran) */
.srv-visuel { position: relative; margin-top: clamp(28px, 3vw, 40px); height: min(48vh, 440px); border-radius: 16px;
  overflow: hidden; background: var(--nuit-2); box-shadow: 0 24px 60px color-mix(in srgb, var(--ombre) 45%, transparent); }
.srv-vis { position: absolute; inset: 0; opacity: 0; transform: scale(1.07);
  transition: opacity .7s var(--courbe), transform 1.3s var(--courbe); }
.srv-vis.actif { opacity: 1; transform: none; }
.srv-vis img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } /* les visages sont en haut */
.srv-visuel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--nuit-3) 85%, transparent) 0%, color-mix(in srgb, var(--nuit-3) 15%, transparent) 45%, transparent 70%); }
.srv-vis-legende { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
  font-family: var(--display); font-weight: 700; color: var(--creme); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.15; letter-spacing: -.01em; }
.srv-vis-legende::before { content: ""; display: block; width: 28px; height: 2px; background: var(--rose); margin-bottom: 10px; }
/* la carte lue n'est mise en avant qu'avec le cadre fixe, donc sur grand écran */
@media (min-width: 901px) {
  .srv-carte.actif { border-color: color-mix(in srgb, var(--rose) 55%, transparent);
    background: linear-gradient(150deg, color-mix(in srgb, var(--rose) 10%, transparent), transparent 60%), var(--nuit-2); }
}
.carte-img { display: none; }

/* les autres services */
.autres { padding: var(--section) 0 0; }
.autres-l { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); margin-top: 20px; }
.autre { position: relative; display: block; padding: clamp(28px, 3vw, 44px) clamp(72px, 7vw, 96px) clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px);
  border-radius: 18px; border: 1px solid var(--trait); background: var(--nuit-2); text-decoration: none;
  transition: border-color .4s, background .4s; }
.autre:hover { border-color: color-mix(in srgb, var(--rose) 50%, transparent); background: color-mix(in srgb, var(--nuit) 80%, var(--nuit-2)); }
.autre .lab { display: block; margin-bottom: 14px; }
.autre-t { display: block; font-family: var(--display); font-weight: 700; color: var(--creme);
  font-size: clamp(20px, 2vw, 30px); line-height: 1.12; letter-spacing: -.02em; }
.autre-t em { font-style: normal; color: var(--rose); }
.autre-fl { position: absolute; right: clamp(24px, 2.6vw, 36px); top: 50%; transform: translateY(-50%);
  font-size: 28px; color: var(--rose); transition: transform .4s var(--courbe); }
.autre:hover .autre-fl { transform: translate(6px, -50%); }

@media (max-width: 900px) {
  .srv-lead, .srv-suite { grid-column: 1 / 13; }
  .srv-marque { width: 48px; top: 40px; }
  .faits-l, .faits-3, .faits-4 { grid-template-columns: 1fr 1fr; }
  .faits-l li, .faits-l li:first-child { padding: 22px 16px 22px 0; border-left: 0; }
  .faits-l li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--trait); }
  .faits-l li:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .faits-3 li:last-child { grid-column: 1 / -1; }
  .srv-tete, .srv-cartes { grid-column: 1 / 13; }
  .srv-tete .colle-moi { position: static; }
  .srv-visuel { display: none; }
  .carte-img { display: block; margin: 0 0 18px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--nuit-3); }
  .carte-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
  .srv-cartes { grid-template-columns: 1fr; }
  .autres-l { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .srv-marque { animation: none; }
  .srv-vis { transition: none; transform: none; }
  .bande-photos { overflow-x: auto; }
}

/* ================================================================
   Fiche artiste
   ================================================================ */
.art-hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 0; overflow-x: clip; }
.art-g { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); align-items: end; }
.art-t { grid-column: 1 / 8; padding-bottom: clamp(8px, 2vw, 24px); }
.art-g.sans-photo .art-t { grid-column: 1 / 11; }
.art-retour { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--rose);
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: gap .35s var(--courbe); }
.art-retour:hover { gap: 16px; }
.art-hero h1 { font-size: clamp(48px, 9.4vw, 160px); line-height: .88; color: var(--creme); margin: 18px 0 clamp(24px, 3vw, 40px); text-wrap: balance; }
.art-lead p { margin: 0; max-width: 46ch; font-family: var(--display); font-weight: 500; color: var(--creme);
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.26; letter-spacing: -.02em; }
.art-lead.long p, .srv-lead.long p { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.4; max-width: 60ch; }
.art-photo { grid-column: 8 / 13; position: relative; }
.art-photo .cadre-fin { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--creme) 38%, transparent); border-radius: 14px;
  transform: translate(18px, 18px); pointer-events: none; }
.art-photo .photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--nuit-2); }
.art-photo .photo img { width: 100%; height: 116%; object-fit: cover; object-position: 50% 20%; margin-top: -8%; }
.art-marque { position: absolute; right: var(--marge); top: clamp(24px, 4vw, 56px); width: clamp(48px, 5vw, 80px); height: auto;
  opacity: .8; animation: tourne 48s linear infinite; z-index: 2; }
.art-bio { padding: clamp(64px, 8vw, 128px) 0 0; }
.art-texte { margin-left: calc(100% / 12); }
.art-texte p { color: var(--texte); opacity: .92; }
.art-autres { padding: var(--section) 0 0; }

/* ================================================================
   Page contact et formulaire
   ================================================================ */
.ct-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 11vw, 168px) 0 clamp(64px, 9vw, 128px); }
.ct-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 75% 70% at 35% 50%, color-mix(in srgb, var(--nuit) 94%, transparent) 30%, color-mix(in srgb, var(--nuit) 76%, transparent) 70%, color-mix(in srgb, var(--nuit) 60%, transparent)); }
.ct-hero h1 { font-size: clamp(40px, 7.6vw, 120px); line-height: .9; color: var(--creme); margin: 14px 0 0; max-width: 13em; text-wrap: balance; }
.ct-intro { margin-top: clamp(24px, 3vw, 36px); max-width: 60ch; color: var(--sourdine); font-size: clamp(17px, 1.3vw, 19px); }
.ct-corps { padding: clamp(56px, 7vw, 104px) 0 var(--section); scroll-margin-top: calc(var(--logo-colle) + 41px); }
.ct-g { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 32px); align-items: start; }
.ct-infos { grid-column: 1 / 5; position: sticky; top: 120px; }
.ct-infos dl { margin: 0; }
.ct-infos dl > div { padding: 18px 0; border-top: 1px solid var(--trait); }
.ct-infos dl > div:last-child { border-bottom: 1px solid var(--trait); }
.ct-infos dt { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); margin-bottom: 6px; }
.ct-infos dd { margin: 0; font-family: var(--display); font-weight: 600; color: var(--creme); font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ct-infos a { color: var(--creme); text-decoration: none; border-bottom: 1px solid var(--trait); transition: border-color .3s; }
.ct-infos a:hover { border-color: var(--rose); }
.ct-fondatrice { display: flex; gap: 16px; align-items: center; margin-top: clamp(28px, 3vw, 40px); }
.ct-fondatrice img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--nuit), 0 0 0 4px var(--rose); }
.ct-fondatrice p { margin: 0; line-height: 1.35; }
.ct-fondatrice b { display: block; font-family: var(--display); color: var(--creme); font-size: 18px; }
.ct-fondatrice span { color: var(--sourdine); font-size: 14.5px; }
.ct-zone { grid-column: 6 / 13; }

.ct-form { display: grid; gap: clamp(22px, 2.4vw, 30px); }
.ct-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.ct-champ { margin: 0; border: 0; padding: 0; min-width: 0; }
.ct-champ label, .ct-champ legend { display: block; margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 500; color: var(--creme); }
.ct-option { color: var(--sourdine); font-weight: 400; }
.ct-form input[type="text"], .ct-form input[type="email"], .ct-form textarea {
  width: 100%; font: inherit; font-size: 17px; font-weight: 400; color: var(--creme); background: color-mix(in srgb, var(--creme) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--creme) 22%, transparent); border-radius: 12px; padding: 15px 16px; transition: border-color .25s, background .25s, box-shadow .25s; }
.ct-form textarea { resize: vertical; min-height: 160px; line-height: 1.55; }
.ct-form input::placeholder, .ct-form textarea::placeholder { color: color-mix(in srgb, var(--sourdine) 75%, transparent); }
.ct-form input:focus, .ct-form textarea:focus { outline: none; border-color: var(--rose); background: color-mix(in srgb, var(--creme) 7%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent); }
.ct-form [aria-invalid="true"] { border-color: var(--alerte); }
.ct-err { margin: 8px 0 0; color: color-mix(in srgb, var(--alerte) 75%, #fff); font-size: 14px; }
.ct-alerte { padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--alerte) 12%, transparent); border: 1px solid color-mix(in srgb, var(--alerte) 40%, transparent);
  color: color-mix(in srgb, var(--alerte) 45%, #fff); font-size: 15.5px; }
.ct-puces { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-puce { position: relative; cursor: pointer; margin: 0 !important; }
.ct-puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-puce span { display: inline-block; padding: 11px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--creme) 22%, transparent);
  color: var(--texte); font-size: 15px; transition: all .25s; }
.ct-puce:hover span { border-color: var(--rose); }
.ct-puce input:checked + span { background: var(--creme); border-color: var(--creme); color: var(--nuit); font-weight: 500; }
.ct-puce input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 45%, transparent); }
.ct-envoi { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.ct-envoi .btn { border: 0; cursor: pointer; }
.ct-vie-privee { margin: 0; color: var(--sourdine); font-size: 14px; }
/* champ piège : hors de l'écran, jamais vu par un humain */
.ct-pot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-merci { padding: clamp(32px, 4vw, 56px); border-radius: 18px; border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--rose) 12%, transparent), transparent 60%), var(--nuit-2); }
.ct-merci-etoile { width: 56px; height: auto; margin-bottom: 18px; }
.ct-merci-t { margin: 0 0 8px; font-family: var(--display); font-weight: 700; color: var(--creme); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; }
.ct-merci p:last-child { margin: 0; color: var(--sourdine); }

footer.pied .pied-liens { display: flex; gap: 24px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .art-t, .art-g.sans-photo .art-t { grid-column: 1 / 13; padding-bottom: 0; }
  .art-photo { grid-column: 1 / 13; max-width: 440px; }
  .art-texte { margin-left: 0; }
  .art-marque { width: 40px; }
  .ct-infos { grid-column: 1 / 13; position: static; order: 2; }
  .ct-zone { grid-column: 1 / 13; order: 1; }
  .ct-ligne { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .art-marque { animation: none; }
}

/* ================================================================
   Blog : liste des articles, article, recherche
   Une carte = un seul lien (le titre), étendu à toute la carte.
   ================================================================ */
.bl-hero { position: relative; padding: clamp(56px, 9vw, 128px) 0 clamp(40px, 5vw, 72px); overflow-x: clip; }
.bl-hero h1 { font-size: clamp(46px, 9vw, 148px); line-height: .9; color: var(--creme); margin: 14px 0 0;
  max-width: calc(100% - clamp(72px, 10vw, 168px)); text-wrap: balance; overflow-wrap: anywhere; }
.bl-intro { max-width: 58ch; margin-top: clamp(24px, 3vw, 40px); color: var(--sourdine); font-size: clamp(17px, 1.3vw, 20px); }
.bl-intro p { margin: 0; }
.bl-liste { padding-bottom: clamp(24px, 4vw, 48px); }
/* trois colonnes au plus ; s'il ne reste que deux articles, ils se partagent la largeur */
.bl-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, 30%)), 1fr)); gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); }
.bl-carte { position: relative; display: flex; flex-direction: column; gap: 20px; }
.bl-grille:has(> .bl-carte:only-child) { grid-template-columns: minmax(0, 640px); } /* une carte seule ne s'étale pas sur toute la page */
.bl-img { overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; background: var(--nuit-2);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ombre) 45%, transparent); }
.bl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--courbe), filter .6s; }
.bl-carte:hover .bl-img img { transform: scale(1.05); }
.bl-meta { margin: 0 0 10px; color: var(--sourdine); font-size: 13.5px; letter-spacing: .02em; }
.bl-titre { font-size: clamp(22px, 2vw, 30px); line-height: 1.08; color: var(--creme); font-weight: 700; text-wrap: balance; }
.bl-titre a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--courbe); }
.bl-titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toute la carte est cliquable */
.bl-carte:hover .bl-titre a { background-size: 100% 1px; }
.bl-titre a:focus-visible { outline: none; }
.bl-carte:has(.bl-titre a:focus-visible) { outline: 2px solid var(--rose); outline-offset: 8px; border-radius: 16px; }
.bl-extrait { margin: 12px 0 0; color: var(--texte); font-size: 16.5px; line-height: 1.55; }
.bl-lire { display: inline-flex; gap: 10px; margin-top: 16px; color: var(--rose); font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; transition: gap .35s var(--courbe); }
.bl-carte:hover .bl-lire { gap: 16px; }

/* le premier article de la liste, à la une : image large, texte à côté */
.bl-carte.une { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(16px, 2vw, 32px); align-items: center;
  padding-bottom: clamp(32px, 4vw, 56px); margin-bottom: clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--trait); }
.bl-carte.une:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.bl-carte.une .bl-img { grid-column: 1 / 8; aspect-ratio: 16 / 9.5; }
.bl-carte.une .bl-texte { grid-column: 8 / 13; }
.bl-carte.une .bl-titre { font-size: clamp(28px, 3.4vw, 52px); line-height: 1; }
.bl-carte.une .bl-extrait { font-size: clamp(16.5px, 1.25vw, 19px); }

.bl-pages { margin-top: clamp(48px, 6vw, 88px); }
.bl-pages .nav-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bl-pages .page-numbers { display: inline-flex; min-width: 48px; height: 48px; padding: 0 16px; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--trait); color: var(--texte); text-decoration: none; font-size: 15px; transition: border-color .3s, background .3s; }
.bl-pages a.page-numbers:hover { border-color: var(--rose); }
.bl-pages .page-numbers.current { background: var(--orchid); border-color: var(--orchid); color: var(--sur-bouton); }
.bl-pages .dots { border: 0; min-width: 0; }
.bl-vide { font-size: clamp(18px, 1.6vw, 22px); color: var(--sourdine); }
.bl-vide a { color: var(--rose); }

/* l'article */
.bl-hero-article { padding-bottom: clamp(32px, 4vw, 56px); }
.bl-hero-article h1 { font-size: clamp(38px, 6.4vw, 104px); line-height: .95; max-width: 18ch; margin: 18px 0 clamp(20px, 2.4vw, 32px); }
.bl-hero-article .bl-meta { margin: 0; font-size: 14px; }
.bl-couverture { margin: 0 0 clamp(48px, 6vw, 96px); }
.bl-couverture .photo { overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 8.5; background: var(--nuit-2);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--ombre) 55%, transparent); }
.bl-couverture img { width: 100%; height: 100%; object-fit: cover; }
.bl-contenu { margin-left: calc(100% / 12); } /* même retrait que la biographie d'une artiste */
.bl-contenu > p:first-child { font-family: var(--display); font-weight: 500; color: var(--creme);
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.3; letter-spacing: -.015em; }
.bl-contenu strong { color: var(--creme); font-weight: 600; }
.contenu img { height: auto; }
.contenu .alignleft { float: left; margin: .4em 1.6em 1em 0; max-width: 46%; }
.contenu .alignright { float: right; margin: .4em 0 1em 1.6em; max-width: 46%; }
.contenu .aligncenter { display: block; margin: 1.5em auto; }
.contenu::after { content: ""; display: table; clear: both; }
.bl-autres { padding-top: clamp(64px, 8vw, 120px); margin-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--trait); }
.bl-autres .lab { display: block; margin-bottom: clamp(24px, 3vw, 40px); }

/* ================================================================
   Page introuvable (404)
   ================================================================ */
.p404 { position: relative; overflow: hidden; isolation: isolate; min-height: min(86vh, 900px);
  display: flex; align-items: center; padding: clamp(64px, 8vw, 120px) 0; }
.p404::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 75% 70% at 30% 50%, color-mix(in srgb, var(--nuit) 95%, transparent) 30%, color-mix(in srgb, var(--nuit) 80%, transparent) 70%, color-mix(in srgb, var(--nuit) 62%, transparent)); }
.p404 .wrap { position: relative; width: 100%; }
/* le « 404 » en contour, à droite du texte sur grand écran, au-dessus sur mobile */
.p404-code { position: absolute; right: var(--marge); top: 50%; translate: 0 -50%; z-index: -1; margin: 0;
  font-family: var(--display); font-weight: 800; letter-spacing: var(--tracking);
  font-size: clamp(120px, 30vw, 440px); line-height: .8; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--creme) 55%, transparent); }
.p404 h1 { font-size: clamp(38px, 6.4vw, 104px); line-height: .92; color: var(--creme); max-width: 14ch; margin: 0 0 clamp(20px, 2.4vw, 32px); text-wrap: balance; }
.p404-texte { max-width: 46ch; margin: 0 0 clamp(32px, 4vw, 48px); color: var(--texte); font-size: clamp(17px, 1.4vw, 20px); }
.p404-actions { margin: 0 0 clamp(32px, 4vw, 48px); }
.p404-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.p404-liens a { display: inline-block; padding: 11px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--creme) 22%, transparent);
  color: var(--texte); text-decoration: none; font-size: 15px; transition: border-color .3s, color .3s; }
.p404-liens a:hover { border-color: var(--rose); color: var(--creme); }

@media (max-width: 900px) {
  .bl-contenu { margin-left: 0; }
  .p404-code { position: static; translate: none; margin: 0 0 16px; font-size: clamp(96px, 30vw, 200px); }
  .bl-carte.une .bl-img, .bl-carte.une .bl-texte { grid-column: 1 / -1; }
  .bl-carte.une .bl-img { margin-bottom: 24px; }
}
@media (max-width: 640px) {
  .bl-couverture .photo { aspect-ratio: 4 / 3; }
  .contenu .alignleft, .contenu .alignright { float: none; margin: 1.5em 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-img img, .bl-carte:hover .bl-img img { transition: none; transform: none; }
}