/* ═══════════════════════════════════════════════════════════════════
   MDG — L'ACCUEIL
   ───────────────────────────────────────────────────────────────────
   Sept sections, une grammaire. Chaque bloc ci-dessous ne fait que
   placer sur la grille ce que systeme.css a déjà défini.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. LE HÉROS ═════════════════════════════════════════════════
   Comme avant, centré : la signature en capitales, la dalle crème
   arrondie en dessous, les deux portes, la ligne de confiance. */
.heros {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  row-gap: var(--e-5);
  padding-top: calc(var(--e-3) + 34px + var(--e-5));
  padding-bottom: var(--e-5);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.heros-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(50% 40% at 50% 60%, rgba(var(--accent-rgb), .09), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.heros-haut {
  display: flex;
  justify-content: center;
  gap: var(--e-3);
  color: var(--gris);
}
.heros-haut .t-5 span { color: var(--creme); }
.heros-titre {
  justify-self: center;
  max-width: 100%;
  font-size: clamp(3.2rem, 14vw, 10.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.heros-titre em { font-style: normal; }

.heros-dalle {
  position: relative;
  width: 82%;
  aspect-ratio: 4 / 5;
  justify-self: center;
  margin-bottom: 1.4rem;
}
.heros-dalle .moi-vue { position: absolute; inset: 0; border-radius: var(--rayon-g); }
.heros-dalle .moi-im { position: absolute; inset: 0; }
.heros-dalle .etiquette { position: absolute; left: var(--e-3); top: var(--e-3); z-index: 3; }

/* Le badge tournant, posé sur le coin de la dalle. */
.badge {
  position: absolute;
  right: -.6rem;
  bottom: -1.2rem;
  z-index: 3;
  width: clamp(92px, 9.5vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--noir);
  border: clamp(6px, .7vw, 9px) solid var(--creme);
  display: grid;
  place-items: center;
  transition: transform var(--d-court) var(--ease);
}
.badge:hover { transform: scale(1.05); }
.badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--creme);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 7px;
  letter-spacing: .1em;
  animation: tourne 22s linear infinite;
}
.badge i { font-style: normal; color: var(--accent); font-size: 1.3rem; line-height: 1; }
@keyframes tourne { to { transform: rotate(360deg); } }

.heros-bas {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
}
.heros-lede { max-width: 30em; color: var(--creme); }
.heros-actions { display: grid; gap: var(--e-3); width: 100%; }
.heros-actions .bouton { width: 100%; }
.confiance-ligne {
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  color: var(--gris);
  font-size: .95rem;
  max-width: 32em;
  margin-top: var(--e-3);
}
.confiance-ligne b { color: var(--creme); font-weight: 500; }
.avatars { display: flex; padding-left: 4px; }
.avatars img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--noir);
  background: var(--noir-2);
  transition: transform var(--d-court) var(--ease), margin var(--d-court) var(--ease);
}
.avatars img + img { margin-left: -14px; }
.avatars:hover img + img { margin-left: -4px; }
.avatars img:hover { transform: translateY(-3px); }

@media (min-width: 900px) {
  .heros { row-gap: var(--e-3); padding-bottom: var(--e-4); }
  .heros-haut { justify-content: space-between; }
  .heros-titre { font-size: clamp(3.4rem, min(9.6vw, 15svh), 10.5rem); }
  .heros-dalle {
    aspect-ratio: 2 / 1;
    width: clamp(44%, calc((100svh - 36rem) * 2), 100%);
  }
  .heros-dalle .moi-im { object-position: 62% 12%; }
  .badge { right: -1.6rem; bottom: -1.6rem; }
  .heros-dalle { margin-bottom: 1.8rem; }
  .heros-bas { grid-template-columns: 1fr auto; grid-template-areas: 'lede lede' 'actions confiance'; justify-items: start; align-items: center; column-gap: var(--e-6); }
  .heros-lede { grid-area: lede; justify-self: center; text-align: center; }
  .heros-actions { grid-area: actions; display: flex; width: auto; }
  .heros-actions .bouton { width: auto; }
  .confiance-ligne { grid-area: confiance; grid-template-columns: auto auto; align-items: center; column-gap: var(--e-3); max-width: none; margin-top: 0; }
  .confiance-ligne p { text-align: left; }
}

/* ═══ LA BANDE ════════════════════════════════════════════════════ */
.bande {
  overflow: hidden;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  padding: var(--e-3) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bande-piste { display: flex; width: max-content; animation: defile 40s linear infinite; }
.bande-piste span {
  display: inline-flex;
  align-items: center;
  gap: 1.4em;
  padding-right: 1.4em;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--gris);
}
.bande-piste i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
@keyframes defile { to { transform: translateX(-50%); } }
.bande:hover .bande-piste { animation-play-state: paused; }

/* ═══ 2. LE TRAVAIL — chapitres en pistes ═════════════════════════
   Trois rangées qu'on fait glisser : tout est visible, rien n'est
   caché derrière un clic, et la page ne s'allonge pas. */
.chapitre + .chapitre { margin-top: var(--e-6); }
.chapitre-tete {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--trait);
}
.chapitre-tete .gris { font-size: .92rem; }
.piste-nav { margin-left: auto; display: none; gap: var(--e-2); }
.piste-nav button {
  width: 44px; height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  color: var(--creme);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  transition: background var(--d-court), transform var(--d-court) var(--ease);
}
.piste-nav button:hover { background: var(--accent); color: var(--encre); box-shadow: none; }
.piste-nav button:disabled { opacity: .3; pointer-events: none; }

.piste {
  --h: clamp(220px, 28vw, 380px);
  display: flex;
  gap: var(--gout);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  margin-inline: calc(-1 * var(--marge));
  padding-inline: var(--marge);
  scroll-padding-inline: var(--marge);
  padding-bottom: var(--e-2);
  scrollbar-width: none;
  cursor: grab;
}
.piste::-webkit-scrollbar { display: none; }
.piste.est-saisie { cursor: grabbing; scroll-snap-type: none; }
.piste.est-saisie * { pointer-events: none; }

.carte {
  flex: none;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--e-3);
  width: max-content;
  color: inherit;
}
.carte-media {
  position: relative;
  display: block;
  height: var(--h);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.carte-media img {
  height: 100%;
  width: auto;
  display: block;
  transition: transform 1.2s var(--ease);
}
.carte:hover .carte-media img { transform: scale(1.04); }
.carte-cartel { display: grid; gap: .15em; width: 0; min-width: 100%; }
.carte-cartel b { font-family: var(--f-display); font-weight: 500; font-size: .98rem; letter-spacing: -.01em; transition: color var(--d-court); }
.carte:hover .carte-cartel b { color: var(--accent); }
.carte-cartel small { color: var(--gris); font-size: .86rem; }
.carte--video .carte-media::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(6, 6, 6, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23E4FA5A'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  transition: transform var(--d-court) var(--ease), background var(--d-court);
}
.carte:hover.carte--video .carte-media::after { transform: translate(-50%, -50%) scale(1.08); background-color: rgba(6, 6, 6, .9); }
.chapitre--motion .piste { --h: clamp(260px, 32vw, 440px); }

@media (min-width: 900px) {
  .piste-nav { display: flex; }
}

/* ═══ 3. LES SITES — trois cartes ═════════════════════════════════ */
.piste--sites { --h: auto; }
.carte--site { width: 74vw; max-width: 520px; grid-template-rows: auto 1fr; }
.carte--site .carte-media { height: auto; aspect-ratio: 16 / 10; }
.carte--site .carte-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.carte--site .carte-cartel { gap: .5em; padding: 0 var(--e-2); }
.carte--site .carte-cartel b { font-size: var(--t-2); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.carte--site .carte-cartel small { font-size: .95rem; line-height: 1.5; }
.carte--site .lien { margin-top: var(--e-2); justify-self: start; }
@media (min-width: 900px) {
  .piste--sites { scroll-snap-type: none; }
  .carte--site { width: calc((100% - 2 * var(--gout)) / 3); max-width: none; }
}

/* ═══ 4. LE STUDIO ════════════════════════════════════════════════ */
.studio-portrait { --l: 12; }
.studio-cadre {
  position: relative;
  display: block;
  border-radius: var(--rayon-g);
  overflow: hidden;
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.studio-cadre img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.studio-cadre .etiquette { position: absolute; left: var(--e-3); bottom: var(--e-3); }
.studio-portrait figcaption { margin-top: var(--e-3); color: var(--gris); }
.studio-txt { --l: 12; display: grid; gap: var(--e-5); align-content: start; }
.studio-txt .t-1 .serif { color: var(--accent); }
.studio-bio { display: grid; gap: var(--e-3); }
.studio-bio b { color: var(--creme); font-weight: 500; }

.parcours { display: grid; border-top: 1px solid var(--trait); }
.parcours div {
  display: grid;
  grid-template-columns: 4.2em 1fr;
  gap: var(--e-3);
  padding: .8em 0;
  border-bottom: 1px solid var(--trait);
}
.parcours dt { font-family: var(--f-display); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent); }
.parcours dd { color: var(--gris); }
.parcours dd b { color: var(--creme); font-weight: 500; }
@media (min-width: 900px) {
  .studio-portrait { --l: 5; position: sticky; top: calc(34px + var(--e-3) * 3); align-self: start; }
  .studio-txt { --c: 7; --l: 6; }
}

/* ═══ 8. LE CONTACT ═══════════════════════════════════════════════ */
.contact-txt { --l: 12; display: grid; gap: var(--e-5); align-content: start; }
.contact-txt .t-1 .serif { color: var(--accent); }
/* WhatsApp en grand : c'est par la que les artistes ecrivent. */
.whatsapp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--encre);
  transition: transform var(--d-court) var(--ease), background var(--d-court);
}
.whatsapp:hover { transform: translateY(-2px); background: #edff7a; }
.whatsapp-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--encre); color: var(--accent); }
.whatsapp-icone svg { width: 22px; height: 22px; }
.whatsapp-txt b { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-3); letter-spacing: -.01em; }
.whatsapp-txt small { display: block; font-size: .86rem; opacity: .75; }
.whatsapp i { font-style: normal; font-size: 1.3rem; transition: transform var(--d-court) var(--ease); }
.whatsapp:hover i { transform: translateX(.25em); }

/* Les reseaux : quatre tuiles, l'icone d'abord. */
.reseaux { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gout); }
.reseaux a {
  display: grid;
  gap: .3em;
  padding: var(--e-3);
  border-radius: var(--rayon);
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
  transition: box-shadow var(--d-court), transform var(--d-court) var(--ease);
  min-width: 0;
}
.reseaux a:hover { box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); }
.reseau-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--noir); box-shadow: inset 0 0 0 1px var(--trait-fort); color: var(--creme); margin-bottom: var(--e-2); }
.reseau-icone svg { width: 18px; height: 18px; }
.reseaux a:hover .reseau-icone { color: var(--accent); }
.reseaux b { font-family: var(--f-display); font-weight: 500; }
.reseaux small { color: var(--gris); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.contact-meta { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); color: var(--gris); font-size: .92rem; }
.contact-meta b { color: var(--creme); font-weight: 500; }

.formulaire { --l: 12; display: grid; gap: var(--e-4); align-content: start; }
.formulaire-tete { display: grid; gap: var(--e-2); }
.formulaire-tete p { color: var(--gris); }
.puces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.puces label { position: relative; }
.puces input { position: absolute; opacity: 0; inset: 0; }
.puces span {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: .5em 1.1em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .92rem;
  cursor: pointer;
  transition: background var(--d-court), color var(--d-court), box-shadow var(--d-court);
}
.puces input:checked + span { background: var(--accent); color: var(--encre); box-shadow: inset 0 0 0 1px var(--accent); }
.puces input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.champ { display: grid; gap: .5em; }
.champ label { color: var(--gris); font-size: var(--t-5); font-family: var(--f-display); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.champ input, .champ textarea, .champ select {
  width: 100%;
  padding: .9em 0;
  border: 0;
  border-bottom: 1px solid var(--trait-fort);
  background: transparent;
  border-radius: 0;
  transition: border-color var(--d-court);
}
.champ select { appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%239b968f' stroke-width='1.6'/%3E%3C/svg%3E") right center / 20px no-repeat; }
.champ select option { background: var(--noir-2); color: var(--creme); }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: 0; border-color: var(--accent); }
.champ textarea { min-height: 7em; resize: vertical; }
.champ-rang { display: grid; gap: var(--e-4); }
.formulaire-pied { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); align-items: center; }
.formulaire-pied small, .formulaire-pied .cqf-note { color: var(--gris); font-size: .86rem; }
.formulaire-etat { color: var(--gris); min-height: 1.5em; }
.formulaire-etat.est-ok { color: var(--accent); }
.formulaire-etat.est-erreur { color: #ff8a7a; }
.formulaire.est-envoye .champ, .formulaire.est-envoye .puces, .formulaire.est-envoye .formulaire-pied { display: none; }
.piege { position: absolute; left: -9999px; }

@media (min-width: 900px) {
  .contact-txt { --l: 5; }
  .formulaire { --c: 7; --l: 6; }
  .champ-rang { grid-template-columns: 1fr 1fr; }
}