/* Brin de Stef, maquette Didone chorégraphiée, page contact.
   Complément de index-didone-v1.css, qui doit être chargé avant.
   Registre intermédiaire : plus de présence que les pages juridiques
   (une photo en cadre, une grande adresse en Didone, le script), mais
   aucun étage épinglé, aucun scrub. Le geste de la page est d'écrire.
   Aucun token redéfini, aucune couleur en dur hors variables. */

/* ------------------------------------------------------- LIEN D'ÉVITEMENT */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; z-index: 20;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------- FIL D'ARIANE */
.crumb {
  display: flex; gap: 10px; align-items: baseline;
  padding-block: 10px 0;
}
.crumb a { border-bottom: 1px solid transparent; }
.crumb a:hover { border-bottom-color: var(--accent); }
.crumb span[aria-current] { color: var(--ink-faint); }

/* ------------------------------------------- TÊTE : l'adresse en grand */
.ct-head { padding-block: clamp(36px, 6vw, 88px) clamp(24px, 3vw, 44px); }
.ct-script {
  font-family: var(--script); color: var(--accent);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  display: inline-block; transform: rotate(-1.5deg);
  margin: 0 0 .15em;
}
.ct-title {
  font-size: clamp(2.4rem, 8vw, 6.2rem);
  line-height: .92; letter-spacing: -.05em; font-weight: 600;
  max-width: 13ch; margin: 0;
}
.ct-title em { font-style: italic; color: var(--accent); }
.ct-lede {
  max-width: 48ch; color: var(--ink-muted); font-size: 1.05rem;
  margin: clamp(18px, 3vw, 32px) 0 0;
}

/* l'adresse elle-même, posée en grand : c'est la vraie action de la page */
.ct-mail {
  display: inline-block; margin-top: clamp(20px, 3vw, 32px);
  font-size: clamp(1.15rem, 3.4vw, 2rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.2;
  border-bottom: 1px solid var(--accent); padding-bottom: 4px;
  transition: color .25s var(--ease);
}
.ct-mail:hover { color: var(--accent-strong); }

/* trois repères filetés, cohérents avec l'accueil et la boutique */
.ct-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin-top: clamp(28px, 4vw, 52px);
}
.ct-facts > * { padding: 16px 0; }
.ct-facts > * + * { border-left: 1px solid var(--hairline); padding-left: clamp(14px, 2.5vw, 32px); }
.ct-facts .n {
  display: block; font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1;
  letter-spacing: -.03em; font-weight: 600; font-variant-numeric: tabular-nums;
  text-transform: none; margin-bottom: 8px;
}

/* ------------------------------------- CORPS : formulaire + colonne info */
.ct-body {
  padding-block: clamp(40px, 6vw, 96px) clamp(56px, 8vw, 120px);
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* -------------------------------------------------------- FORMULAIRE */
/* pas de carte : ni fond, ni bordure de boîte, ni ombre, ni coin arrondi.
   Chaque champ est une ligne filetée, comme tout le reste du système. */
.ct-form { max-width: 46rem; }
.ct-form > .furniture {
  margin: 0 0 clamp(18px, 2.4vw, 26px); padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 36px); }
.f { margin-bottom: clamp(20px, 3vw, 32px); }
.f label {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-muted);
}
.f label .req { color: var(--accent); }
.f input,
.f textarea {
  width: 100%; display: block;
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.6;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline);
  border-radius: 0; padding: 8px 0 10px;
  transition: border-color .25s var(--ease);
}
.f textarea { resize: vertical; min-height: 9em; }
.f input::placeholder,
.f textarea::placeholder { color: var(--ink-faint); font-style: italic; }
.f input:hover,
.f textarea:hover { border-bottom-color: var(--bark-500); }
.f input:focus,
.f textarea:focus {
  outline: none; border-bottom-color: var(--accent); border-bottom-width: 1px;
  box-shadow: 0 1px 0 0 var(--accent);
}
.f input:focus-visible,
.f textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.f-help { margin: 8px 0 0; font-size: .9rem; color: var(--ink-faint); font-style: italic; }

.f-send {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline); padding-top: clamp(20px, 3vw, 30px);
}
.f-send p { margin: 0; max-width: 34ch; font-size: .92rem; color: var(--ink-faint); }

/* ------------------------------------------- COLONNE INFO, collante */
.ct-aside { position: sticky; top: clamp(18px, 4vh, 48px); }
.ct-frame { aspect-ratio: 4/5; overflow: hidden; background: var(--sand-200); }
.ct-frame img {
  width: 100%; height: 100%; object-fit: cover;
  /* palliatif photo, voir DESIGN.md : à cuire dans le fichier image
     dès que les vraies prises de vue arrivent */
  filter: sepia(.22) saturate(.8) brightness(1.1) contrast(.94);
}
.ct-cap { margin: 12px 0 0; color: var(--ink-faint); font-size: .92rem; font-style: italic; }

.ct-block {
  border-top: 1px solid var(--hairline);
  margin-top: clamp(22px, 3vw, 32px); padding-top: clamp(14px, 2vw, 18px);
}
.ct-block h2,
.ct-block h3 {
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 .35em;
}
.ct-block p { margin: 0 0 .5em; font-size: .95rem; line-height: 1.6; color: var(--ink-muted); }
.ct-block p:last-child { margin-bottom: 0; }
.ct-block a { border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.ct-block a:hover { border-bottom-color: var(--accent); color: var(--ink); }

/* détail signature : le brin, petit trait garance devant chaque ligne */
.brin-list { list-style: none; margin: 0; padding: 0; }
.brin-list li {
  position: relative; padding-left: 20px; margin-bottom: 6px;
  font-size: .95rem; line-height: 1.55; color: var(--ink-muted);
}
.brin-list li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 11px; height: 1px; background: var(--accent);
}

/* --------------------------------------- CE QU'IL SE PASSE ENSUITE */
.ct-after { background: var(--surface-raised); padding-block: clamp(56px, 8vw, 110px); }
.ct-after h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.05; letter-spacing: -.03em;
  max-width: 18ch; margin-bottom: clamp(26px, 4vw, 44px);
}
.ct-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--hairline); padding-top: clamp(22px, 3vw, 34px);
}
.ct-steps h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; margin: 8px 0 6px; }
.ct-steps p { font-size: .95rem; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.ct-steps .step-n {
  font-size: .8rem; letter-spacing: .16em; color: var(--accent);
  font-variant-numeric: tabular-nums; margin: 0;
}

/* ---------------------------------------------------------- RESPONSIF */
@media (max-width: 900px) {
  .ct-body { grid-template-columns: 1fr; }
  .ct-aside { position: static; }
  .ct-frame { aspect-ratio: 16/10; }
  .ct-steps { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ct-facts { grid-template-columns: 1fr; }
  .ct-facts > * + * { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; }
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .ct-mail { font-size: clamp(1.05rem, 5.4vw, 1.5rem); word-break: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-aside { position: static; }
  .f input, .f textarea { transition: none; }
}