/* Maréchal & Associés — feuille unique du site.
 * Fond clair (marbre), encre, accent oxblood (reliure de code), filets bronze.
 * Un seul geste de survol : « le tampon ». Un seul écran spectaculaire : la pesée.
 */

/* ---- Socle -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

:root {
  /* La couleur du client vit dans l'accent ; le fond appartient au design. */
  --accent-client: #7d1f2e;
  --accent: var(--accent-client);
  --accent-fonce: color-mix(in oklab, var(--accent) 78%, #16130f);
  --accent-voile: color-mix(in srgb, var(--accent) 7%, transparent);
  --sur-accent: #f6f1e8;

  --marbre: #f1eee8;
  --marbre-creux: #e9e4d9;
  --marbre-leve: #f7f5f0;
  --encre: #16130f;
  --encre-douce: color-mix(in srgb, var(--encre) 74%, transparent);
  /* 58 % et pas moins : les petites capitales de 12 px doivent tenir AA. */
  --encre-tenue: color-mix(in srgb, var(--encre) 58%, transparent);
  --bronze: #9c7a45;
  --bronze-trait: color-mix(in srgb, var(--bronze) 55%, transparent);
  --trait: color-mix(in srgb, var(--encre) 14%, transparent);
  /* Un contour de champ est un composant d'interface : 3:1 minimum. */
  --trait-fort: color-mix(in srgb, var(--encre) 42%, transparent);

  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', serif;
  --texte: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --marge: clamp(1.15rem, 4.5vw, 4.5rem);
  --mesure: 64ch;
  --vif: 220ms;
  --pose: 600ms;
  --courbe: cubic-bezier(.22, .8, .3, 1);
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--marbre);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* clip et jamais hidden : hidden ferait du body un conteneur de
     défilement et le hero collé cesserait de coller. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--sur-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.saut-lien {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--encre);
  color: var(--marbre);
}
.saut-lien:focus-visible { left: var(--marge); top: .75rem; }

/* ---- Le geste : « le tampon » ------------------------------------------- */
/* Un trait vertical oxblood s'imprime à gauche, le libellé prend l'accent.
   Jamais de changement de mise en page. Vaut au clavier. */

.tampon {
  position: relative;
  padding-left: .8rem;
  transition: color var(--vif) var(--courbe), background-color var(--vif) var(--courbe);
}
.tampon::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--vif) var(--courbe);
}
.tampon:hover, .tampon:focus-visible { color: var(--accent); }
.tampon:hover::before, .tampon:focus-visible::before { transform: scaleY(1); }
/* Sur ce qui a un fond et du corps : le voile s'ajoute au trait. */
.tampon--plein:hover, .tampon--plein:focus-visible { background-color: var(--accent-voile); }

/* ---- Typographie -------------------------------------------------------- */

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; }

.titre-un {
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 600;
}
.titre-deux {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: .05em;
  max-width: 24ch;
}
.titre-trois {
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}
.eyebrow strong { color: var(--accent); font-weight: 500; }

.prose { max-width: var(--mesure); }
.prose + .prose { margin-top: 1rem; }
.sourdine { color: var(--encre-douce); }

.folio { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.filet-bronze {
  border: 0;
  border-top: 1px solid var(--bronze-trait);
  margin: 0;
}

/* ---- Boutons ------------------------------------------------------------ */

.bouton {
  display: inline-block;
  padding: .9rem 1.9rem;
  font-family: var(--texte);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--encre);
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: color var(--vif) var(--courbe),
              background-color var(--vif) var(--courbe),
              border-color var(--vif) var(--courbe);
}
.bouton:hover, .bouton:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.bouton--plein {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}
.bouton--plein:hover, .bouton--plein:focus-visible {
  background: var(--accent-fonce);
  border-color: var(--accent-fonce);
  color: var(--sur-accent);
}
.bouton:disabled { opacity: .55; cursor: default; }

/* ---- La barre ----------------------------------------------------------- */

.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.9rem, 2vw, 2.5rem);
  padding: 1.1rem var(--marge);
  border-bottom: 1px solid var(--trait);
  background: var(--marbre);
  position: relative;
  z-index: 10;
}

.enseigne {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: none;
}
.enseigne__marque { width: 40px; height: 40px; color: var(--encre); flex: none; }
.enseigne__marque .accent { fill: var(--accent); }
.enseigne__nom {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.enseigne__nom small {
  display: block;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .34em;
  color: var(--encre-tenue);
  margin-top: .18rem;
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 1.05vw, 1.4rem);
}
.menu a {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: .2rem;
  padding-bottom: .2rem;
}

/* Entre 900 et 1280 px, la barre garde tout sur UNE ligne : corps du menu
   réduit, sous-ligne de l'enseigne cédée (le redondant cède en premier). */
@media (max-width: 1279px) and (min-width: 900px) {
  .enseigne__nom { font-size: .95rem; }
  .enseigne__nom small { display: none; }
  .menu { gap: clamp(.45rem, .9vw, 1rem); }
  .menu a { font-size: .76rem; letter-spacing: .03em; }
}

.menu-bouton {
  display: none;
  background: none;
  border: 1px solid var(--trait-fort);
  padding: .55rem .9rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre);
  cursor: pointer;
}

@media (max-width: 899px) {
  .menu-bouton { display: inline-block; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--marbre-leve);
    border-bottom: 1px solid var(--trait);
    padding: .5rem 0;
    z-index: 40;
  }
  .menu.est-ouvert { display: flex; }
  .menu a { padding: .8rem var(--marge); font-size: .95rem; }
}

/* ---- Le hero : la pesée -------------------------------------------------- */

.course { position: relative; }
.course[data-course] { min-height: 250svh; }

/* Deux classes et non une : .hero pose position:relative plus bas et
   l'emporterait à spécificité égale. */
.hero.hero--colle { position: sticky; top: 0; }

/* La vidéo est le FOND du hero, bord à bord ; le discours vit à gauche
   par-dessus, sur un voile de marbre qui garantit la lecture. */
.hero {
  position: relative;
  min-height: calc(100svh - 73px);
  display: flex;
  align-items: center;
  background: var(--marbre);
  isolation: isolate;
}
/* Le filet de progression : il se trace en bas du cadre avec la pesée. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bronze);
  transform: scaleX(var(--avance, 0));
  transform-origin: left;
  z-index: 2;
}

.hero__texte {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 6vh, 5rem) clamp(1.5rem, 4vw, 4rem)
           clamp(2rem, 5vh, 4rem) var(--marge);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  max-width: 46rem;
  min-height: calc(100svh - 73px);
}
.hero__texte .titre-un { margin-top: .4rem; }
.hero__chapo { max-width: 34rem; font-size: 1.13rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: .6rem;
}

.hero__reperes {
  margin-top: auto;
  padding-top: 2rem;
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: .55rem;
}
.repere {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  border-top: 1px solid var(--trait);
  padding-top: .55rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.repere b { font-weight: 500; color: var(--encre); }

/* En régime scrub, les repères s'impriment un à un avec l'avancée. */
.est-scrubee .repere {
  opacity: 0;
  transition: opacity .8s var(--courbe), border-color .8s var(--courbe);
}
.est-scrubee .repere.est-ouvert { opacity: 1; border-color: var(--bronze-trait); }

.hero__scene {
  position: absolute;
  inset: 0;
  overflow: clip;
  z-index: 0;
  background: var(--marbre-creux);
}
.hero__film {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Le voile de lecture : marbre plein sous le discours, transparent vers la scène. */
.hero__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--marbre) 16%,
    color-mix(in srgb, var(--marbre) 78%, transparent) 40%,
    transparent 66%);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 899px) {
  .course[data-course] { min-height: 0; }
  .hero.hero--colle { position: static; }
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero::after { content: none; }
  .hero__scene { position: static; order: -1; aspect-ratio: 16 / 9; }
  .hero__scene::before { content: none; }
  .hero__texte { min-height: 0; justify-content: flex-start; }
  .hero__reperes { margin-top: 1rem; }
  .est-scrubee .repere { opacity: 1; border-color: var(--trait); }
}

/* ---- Sections : trois densités ------------------------------------------ */

.section { padding: 6rem var(--marge); }          /* lecture — 96 px */
.section--chapitre { padding: 9rem var(--marge); } /* chapitre — 144 px */
.section--banc { padding: 4rem var(--marge); }     /* banc — 64 px */

.section__tete {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2.8rem;
}
.section__tete .filet-bronze { width: 72px; }

.section--encre {
  background: var(--encre);
  color: var(--marbre);
}
.section--encre .eyebrow { color: color-mix(in srgb, var(--marbre) 62%, transparent); }
.section--encre .sourdine { color: color-mix(in srgb, var(--marbre) 74%, transparent); }

.colonnes {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 899px) {
  .colonnes { grid-template-columns: 1fr; }
}

.exergue {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  max-width: 22ch;
}

/* Les trois principes, au banc. */
.principes {
  list-style: none;
  padding: 0;
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.5rem;
  border-top: 1px dotted var(--trait-fort);
}
.principes li { padding-top: 1.2rem; }
.principes .folio { font-size: .78rem; color: var(--encre-tenue); }
.principes h3 { margin: .5rem 0 .45rem; }
.principes p { font-size: .96rem; color: var(--encre-douce); max-width: 30ch; }
@media (max-width: 899px) {
  .principes { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---- Expertises : le sommaire de dossier -------------------------------- */

.sommaire { list-style: none; padding: 0; border-top: 1px solid var(--trait); }
.sommaire > li { border-bottom: 1px solid var(--trait); }

.sommaire details summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 2rem;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.35rem .4rem 1.35rem 0;
}
.sommaire details summary::-webkit-details-marker { display: none; }

.sommaire .folio { font-size: .85rem; color: var(--encre-tenue); }
.sommaire .titre-trois { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); }

.sommaire .signe {
  justify-self: end;
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--encre-tenue);
  transition: transform var(--vif) var(--courbe), color var(--vif) var(--courbe);
}
.sommaire details[open] .signe { transform: rotate(45deg); color: var(--accent); }

.sommaire .depli {
  padding: 0 .4rem 1.6rem calc(4rem + 1.2rem);
  max-width: calc(var(--mesure) + 5.2rem);
}
.sommaire .depli p { color: var(--encre-douce); }
@media (max-width: 899px) {
  .sommaire details summary { grid-template-columns: 2.6rem minmax(0, 1fr) 1.6rem; gap: .8rem; }
  .sommaire .depli { padding-left: calc(2.6rem + .8rem); }
}

/* ---- La méthode : l'écran de silence ------------------------------------ */
/* Aucun mouvement dans cette section : c'est voulu, et c'est une règle. */

.methode { list-style: none; padding: 0; counter-reset: temps; display: grid; gap: 3rem; max-width: 46rem; }
.methode li { counter-increment: temps; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.5rem; }
.methode li::before {
  content: counter(temps, upper-roman) ".";
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--bronze);
}
.methode h3 { margin-bottom: .5rem; }
.methode p { color: color-mix(in srgb, var(--marbre) 76%, transparent); max-width: 52ch; }
@media (max-width: 899px) {
  .methode li { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; }
}

/* ---- Engagements : le banc à filets pointillés --------------------------- */

.engagements {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
}
.engagements li {
  border-top: 1px dotted var(--trait-fort);
  padding: 1.3rem .5rem 1.6rem 0;
}
.engagements h3 { margin-bottom: .4rem; }
.engagements p { font-size: .97rem; color: var(--encre-douce); max-width: 46ch; }
@media (max-width: 899px) {
  .engagements { grid-template-columns: 1fr; }
}

/* ---- Honoraires ---------------------------------------------------------- */

.honoraires { list-style: none; padding: 0; border-top: 1px solid var(--trait); max-width: 52rem; }
.honoraires li {
  border-bottom: 1px solid var(--trait);
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.25rem .4rem 1.25rem 0;
}
.honoraires h3 { font-family: var(--mono); font-size: .85rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding-top: .2rem; }
.honoraires p { color: var(--encre-douce); }
@media (max-width: 640px) {
  .honoraires li { grid-template-columns: 1fr; gap: .4rem; }
}

/* ---- FAQ ----------------------------------------------------------------- */

.questions { list-style: none; padding: 0; border-top: 1px solid var(--trait); max-width: 56rem; }
.questions > li { border-bottom: 1px solid var(--trait); }
.questions summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem .4rem 1.1rem 0;
  font-weight: 600;
}
.questions summary::-webkit-details-marker { display: none; }
.questions .signe {
  justify-self: end;
  font-family: var(--mono);
  color: var(--encre-tenue);
  transition: transform var(--vif) var(--courbe), color var(--vif) var(--courbe);
}
.questions details[open] .signe { transform: rotate(45deg); color: var(--accent); }
.questions .depli { padding: 0 .4rem 1.4rem 0; max-width: var(--mesure); color: var(--encre-douce); }

/* ---- Contact ------------------------------------------------------------- */

.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } }

.contact__adresse { display: grid; gap: 1.2rem; align-content: start; }
.contact__adresse .eyebrow { margin-top: .5rem; }
.contact__adresse p { max-width: 38ch; }

.formulaire { display: grid; gap: 1.15rem; }
.formulaire .rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 640px) { .formulaire .rangee { grid-template-columns: 1fr; } }

.champ { display: grid; gap: .4rem; }
.champ span { font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.champ input, .champ select, .champ textarea {
  font: inherit;
  color: var(--encre);
  background: var(--marbre-leve);
  border: 1px solid var(--trait-fort);
  border-radius: 0;
  padding: .75rem .9rem;
  transition: border-color var(--vif) var(--courbe);
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--encre); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
.champ textarea { min-height: 8.5rem; resize: vertical; }

.consentement { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--encre-douce); max-width: 60ch; }
.consentement input { margin-top: .25rem; accent-color: var(--accent); }

.formulaire [data-etat] { min-height: 1.5rem; font-size: .95rem; color: var(--accent-fonce); }

/* ---- Le pied : un plan du site ------------------------------------------ */

.pied {
  background: var(--encre);
  color: var(--marbre);
  padding: 4.5rem var(--marge) 2rem;
}
.pied a { color: inherit; }
.pied .tampon:hover, .pied .tampon:focus-visible { color: var(--bronze); }
.pied .tampon::before { background: var(--bronze); }
/* Dans le pied, le trait s'imprime dans la gouttière : tout reste au ras. */
.pied .tampon { margin-left: -.8rem; }

.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 899px) { .pied__haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pied__haut { grid-template-columns: 1fr; } }

.pied__marque { display: grid; gap: 1rem; align-content: start; }
.pied__marque .enseigne__marque { color: var(--marbre); width: 46px; height: 46px; }
.pied__marque .enseigne__marque .accent { fill: var(--bronze); }
.pied__marque p { font-size: .95rem; color: color-mix(in srgb, var(--marbre) 72%, transparent); max-width: 34ch; }

.pied h2 {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--marbre) 55%, transparent);
  margin-bottom: 1.1rem;
}
.pied ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.pied ul a { font-size: .95rem; display: inline-block; }
.pied address { font-style: normal; font-size: .95rem; display: grid; gap: .55rem; }

.pied__bas {
  border-top: 1px solid color-mix(in srgb, var(--marbre) 16%, transparent);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem 2rem;
  font-size: .82rem;
  color: color-mix(in srgb, var(--marbre) 60%, transparent);
}
.pied__bas nav { display: flex; gap: 1.6rem; }

/* ---- Pages légales (sans vidéo, sans mouvement) -------------------------- */

.legale { max-width: 46rem; padding: 4rem var(--marge) 6rem; margin: 0 auto; }
.legale h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); text-transform: uppercase; letter-spacing: .05em; margin: .8rem 0 2.2rem; }
.legale h2 { font-size: 1.25rem; margin: 2.2rem 0 .7rem; }
.legale p, .legale li { color: var(--encre-douce); }
.legale p + p { margin-top: .8rem; }
.legale ul { padding-left: 1.2rem; }
.legale .a-completer { color: var(--accent-fonce); font-family: var(--mono); font-size: .9em; }
.legale a { text-decoration: underline; text-underline-offset: 3px; }
.legale .retour { display: inline-block; margin-bottom: 2rem; text-decoration: none; }

/* ---- Révélations (strictement additives) --------------------------------- */

html[data-anim] [data-ligne] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--pose) var(--courbe), transform var(--pose) var(--courbe);
  transition-delay: calc(var(--rang, 0) * 60ms);
}
html[data-anim] [data-ligne].est-en-place {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}