.refonte {
  --ink: #171915;
  --paper: #f5f3ec;
  --orange: #ff995b;
  --rust: #903d19;
  --line: #d9d5c9;
  background: var(--paper);
  color: var(--ink);
  height: auto;
  min-height: 100vh;
  overflow-x: visible;
  font-family: system-ui, "Segoe UI", sans-serif;
  line-height: 1.55;
}
.refonte :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.wrap, .refonte .container { width: min(1232px, calc(100% - 80px)); margin-inline: auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0;
  border-bottom: 1px solid #383a32;
}
.refonte :target { scroll-margin-top: 96px; }
.site-bar { min-height: 77px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.site-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; letter-spacing: -.055em; }
.site-logo img { display: block; object-fit: contain; border-radius: 50%; }
.site-logo span span { color: var(--orange); }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(12px, 3vw, 36px); font-size: .93rem; font-weight: 650; }
.site-nav a:hover, .site-nav [aria-current="page"] { color: var(--orange); }
.site-contact { border: 1px solid #626258; padding: .55rem .85rem; }
.site-contact span { margin-left: .45rem; }
.confirmation { padding-block: 1rem; font-weight: 700; }
.home-intro, .home-method { background: var(--ink); color: var(--paper); }
.intro-grid { display: grid; grid-template-columns: .95fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; padding-block: clamp(40px, 6vw, 85px) clamp(34px, 4vw, 55px); }
.kicker { font-size: .74rem; letter-spacing: .13em; line-height: 1.45; text-transform: uppercase; font-weight: 800; color: var(--rust); }
.home-intro .kicker, .home-method .kicker { color: var(--orange); }
.intro-copy h1 { font-size: clamp(3.5rem, 6.55vw, 6.35rem); line-height: .96; letter-spacing: -.079em; margin: .19em 0 .24em; }
.intro-copy h1 em { color: var(--orange); font-style: normal; }
.intro-text { max-width: 43ch; color: #dfded5; font-size: clamp(1rem, 1.35vw, 1.18rem); }
.intro-actions, .end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.action { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; padding: .73rem .95rem; font-size: .9rem; font-weight: 750; border: 1px solid transparent; }
.action-primary { background: var(--orange); color: var(--ink); }
.action-secondary { border-color: #686b5f; }
.action-dark { background: var(--ink); color: var(--paper); }
.action:hover { text-decoration: underline; text-underline-offset: 4px; }
.intro-photo { min-width: 0; background: #292b24; }
.intro-photo img { width: 100%; display: block; aspect-ratio: 1.31; object-fit: cover; object-position: center 57%; }
.intro-photo figcaption { display: flex; justify-content: space-between; gap: .5rem; padding: .65rem .85rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #e0ded2; }
.disciplines { border-top: 1px solid #505146; display: grid; grid-template-columns: repeat(4, 1fr); }
.disciplines span { padding: 1rem .3rem; color: #e1ded2; font-size: .84rem; text-align: center; }
.disciplines span + span { border-left: 1px solid #505146; }
.home-section { padding-block: clamp(40px, 6vw, 85px); scroll-margin: 15px; }
.section-heading, .home-end { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 30px; }
.section-heading { margin-bottom: 30px; }
.home-section h2, .page-intro h1 { font-size: clamp(2rem, 4.35vw, 4.2rem); line-height: 1.02; letter-spacing: -.064em; margin-top: .17em; }
.text-link { text-decoration: underline; text-underline-offset: 5px; font-weight: 750; font-size: .9rem; }
.text-link:hover { text-decoration-thickness: 2px; }
.featured-stage { display: grid; }
.featured-stage > .featured-grid { grid-area: 1 / 1; min-width: 0; }
.featured-stage > [inert] { pointer-events: none; }
.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.featured-photo { display: block; margin-bottom: 16px; background: #e1ded4; }
.featured-photo img { display: block; width: 100%; aspect-ratio: 1.48; object-fit: cover; }
.featured-photo:hover img { opacity: .88; }
.featured h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  letter-spacing: -.03em;
  margin-block: 5px;
  line-height: 1.2;
  block-size: 3.6em;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.method-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px clamp(40px, 7vw, 105px);
}
.method-intro .text-link { display: inline-block; margin-top: 18px; }
.method-steps { list-style: decimal; padding-inline-start: 1.6rem; }
.method-steps li { padding-inline-start: .45rem; }
.method-steps li + li { margin-top: 1.2rem; }
.method-steps li::marker { color: var(--orange); font-weight: 750; }
.method-steps h3 { font-size: 1.08rem; margin-bottom: .2rem; }
.method-steps p { max-width: 50ch; color: #dfded5; }
.home-end h2 { max-width: 20ch; }
.home-end .end-actions { margin-top: 0; }
.site-footer { margin-top: auto; background: var(--ink); color: #dfded5; padding-block: 25px; font-size: .86rem; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 30px; }
.footer-grid strong { color: var(--paper); font-size: 1.14rem; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-grid a:hover { text-decoration: underline; }
.footer-grid .footer-count { font-size: .75rem; }
.refonte.interior {
  --bg: var(--paper);
  --card: #fffdf8;
  --card2: #eeebe2;
  --text: var(--ink);
  --muted: #4d4e44;
  --accent: var(--rust);
  --accent2: var(--rust);
  --border: var(--line);
  --shadow: none;
  --radius: 6px;
  --radius2: 8px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.refonte.interior .container { padding: 0 0 54px; }
.page-intro { padding-block: clamp(32px, 5vw, 65px) 28px; }
.page-intro p:last-child { margin-top: 12px; max-width: 64ch; color: var(--muted); }
.refonte.interior .section { background: var(--card); }
.refonte.interior .section h2 { letter-spacing: -.025em; }
.refonte.interior .section > .section { padding: 12px 0; border: 0; }
.refonte.interior.page-qui-sommes-nous .section > .section { padding-inline: clamp(14px, 2vw, 26px); }
.refonte.interior .project-card { background: var(--card); }
.refonte.interior .project-card:hover { background: var(--card2); }
.refonte.interior .project-card:target { outline: 2px solid var(--rust); outline-offset: 3px; }
.refonte.interior .project-title { color: var(--ink); }
.refonte.interior .btn { background: var(--card2); }
.refonte.interior .page-count { margin-left: auto; }
@media (max-width: 840px) {
  .wrap, .refonte .container { width: calc(100% - 44px); }
  .intro-grid { gap: 24px; }
  .intro-copy h1 { font-size: clamp(3rem, 7.4vw, 4rem); }
  .home-end { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .refonte :target { scroll-margin-top: 164px; }
  .wrap, .refonte .container { width: calc(100% - 32px); }
  .site-bar { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 12px; }
  .site-logo img { width: 38px; height: 38px; }
  .site-nav { width: 100%; justify-content: space-between; gap: 6px 10px; font-size: .86rem; }
  .site-nav a { padding-block: .45rem; }
  .intro-grid, .featured-grid, .method-layout { grid-template-columns: 1fr; }
  .intro-copy h1 { font-size: clamp(3rem, 11.2vw, 4.7rem); }
  .intro-photo img { aspect-ratio: 1.55; }
  .disciplines { grid-template-columns: repeat(2, 1fr); }
  .disciplines span:nth-child(3) { border-left: 0; }
  .disciplines span:nth-child(n+3) { border-top: 1px solid #505146; }
  .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .featured-grid { gap: 24px; }
}

.page-contact .contact-card { border: 0; padding: 0; }
.page-contact .form-row input,
.page-contact .form-row textarea { border-color: #a29f92; background: white; }
.page-contact .form-row input:focus,
.page-contact .form-row textarea:focus { background: white; }
.page-contact .btn-submit { color: white; }
.page-contact .field-error { color: #a32824; }
.page-notre-demarche .section h2:not(:first-child) { margin-top: 1.5rem; }
.page-fdo .container > main { padding-top: 20px; }

@media (min-width: 841px) {
  .intro-grid { padding-block: clamp(36px, 4.2vw, 59px) clamp(28px, 3.4vw, 44px); }
  .intro-photo img { aspect-ratio: 1.48; }
  #realisations { padding-top: clamp(42px, 4vw, 58px); }
}

.featured-link { display: block; }
.featured-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.featured-controls[hidden] { display: none; }
.featured-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.featured-position { margin-right: auto; color: #4d4e44; font-size: .9rem; }
.featured-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: .45rem .8rem;
  background: transparent;
  border: 1px solid #aaa698;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.featured-controls button:hover { background: #e9e5da; }

.fdo-access { max-width: 640px; }
.fdo-access form { display: grid; gap: 10px; margin-block: 20px; }
.fdo-access label { font-weight: 700; }
.fdo-access input {
  width: 100%;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid #a29f92;
  background: white;
  color: var(--ink);
  font: inherit;
}
.fdo-access input[aria-invalid="true"] { border-color: #a32824; }
.fdo-access #fdo-error { margin: 0; color: #a32824; font-weight: 700; }
.fdo-access button { justify-self: start; cursor: pointer; }

.intro-photo-stage { position: relative; overflow: hidden; }
.intro-photo-stage .intro-photo-next { position: absolute; inset: 0; height: 100%; }
.intro-photo figcaption { align-items: center; min-height: 48px; }
.intro-photo-toggle {
  padding: .3rem .6rem;
  color: inherit;
  background: transparent;
  border: 1px solid #68695e;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.intro-photo-toggle:hover { background: #3a3c32; }