/* ==========================================================================
   SXM Digital Agency — Offre BTP · pro.sxmdigitalagency.com
   Palette imposée : #1B3A5C (plan) · #2B4D3E (cta) · #D8D6D0 (béton) + blanc
   Typo : Fraunces (display) · Public Sans (corps)
   ========================================================================== */

:root {
  --beton: #d8d6d0;
  --plan: #1b3a5c;
  --cta: #2b4d3e;
  --cta-hover: #223e32;
  --papier: #ffffff;
  --trait: rgba(27, 58, 92, 0.28);
  --trait-fort: rgba(27, 58, 92, 0.55);
  --grille: rgba(27, 58, 92, 0.07);
  --grille-inverse: rgba(216, 214, 208, 0.1);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --corps: "Public Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --gutter: 20px;
  --container: 1120px;
  --radius: 2px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--beton);
  color: var(--plan);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}

h1 {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  text-wrap: balance;
}

h3 {
  font-size: 1.35rem;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

p {
  margin: 0 0 1em;
  max-width: 62ch;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

strong {
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--plan);
  outline-offset: 3px;
}

.panel-plan :focus-visible {
  outline-color: var(--papier);
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-120%);
  background: var(--papier);
  color: var(--plan);
  padding: 0.6em 1em;
  font-weight: 600;
  z-index: 100;
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Étiquette technique : uniquement dans le cartouche, les en-têtes de colonnes,
   la légende des cotes et les mentions de repère. Jamais en eyebrow de titre. */
.etiquette {
  font-family: var(--corps);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 56px;
}

.section__intro {
  margin-bottom: 32px;
}

.section__intro p {
  margin-top: 12px;
  font-size: 1.05rem;
}

.section__cta {
  margin-top: 36px;
}

/* --------------------------------------------------------------------------
   CTA — deux variantes, même libellé, même taille
   -------------------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.75em 1.5em;
  background: var(--cta);
  color: var(--papier);
  font-family: var(--corps);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--cta);
  border-radius: var(--radius);
  text-align: center;
  transition: background-color 120ms ease, color 120ms ease;
}

.cta:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.cta--inverse,
.panel-plan .cta {
  background: var(--papier);
  color: var(--cta);
  border-color: var(--papier);
}

.cta--inverse:hover,
.panel-plan .cta:hover {
  background: var(--beton);
  border-color: var(--beton);
  color: var(--cta);
}

.cta--small {
  min-height: 44px;
  font-size: 15px;
  padding: 0.55em 1.1em;
}

.cta--block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Sélecteur de langue : drapeau + texte, jamais l'un sans l'autre
   -------------------------------------------------------------------------- */
.lang-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.lang-link:hover {
  text-decoration: underline;
}

.lang-link__flag {
  font-size: 1.15em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  border-bottom: 1px solid var(--trait);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.brand span {
  display: block;
  font-family: var(--corps);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__actions .cta {
  display: none;
}

/* --------------------------------------------------------------------------
   Cote (ligne de cote de plan) — CSS pur, animée une seule fois au chargement
   -------------------------------------------------------------------------- */
.cote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin-bottom: 24px;
}

.cote__line {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--trait-fort);
  transform-origin: left center;
}

.cote__line::before,
.cote__line::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 1px;
  height: 13px;
  background: var(--trait-fort);
  transform: rotate(-45deg);
}

.cote__line::before {
  left: 0;
}

.cote__line::after {
  right: 0;
}

.cote__label {
  position: relative;
  padding-inline: 12px;
  background: var(--beton);
  color: var(--plan);
}

.panel-plan .cote__line,
.panel-plan .cote__line::before,
.panel-plan .cote__line::after {
  background: rgba(216, 214, 208, 0.7);
}

.panel-plan .cote__label {
  background: var(--plan);
  color: var(--beton);
}

/* --------------------------------------------------------------------------
   Feuille (papier posé sur le béton) et cartouche
   -------------------------------------------------------------------------- */
.sheet {
  background: var(--papier);
  border: 1px solid var(--plan);
  border-radius: var(--radius);
  padding: 24px var(--gutter);
}

.cartouche {
  background: var(--papier);
  border: 1px solid var(--plan);
  border-radius: var(--radius);
  width: 100%;
  font-size: 15px;
}

.cartouche__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  border-bottom: 1px solid var(--plan);
}

/* Ligne à quatre champs : elle se replie sur deux niveaux dans le cartouche
   étroit du hero, quelle que soit la longueur du format de date. Seul le
   grand cartouche de signature la garde sur une seule ligne. */
.cartouche__row--split {
  grid-template-columns: 84px minmax(0, 1fr);
}

.cartouche__row--split .cartouche__cell:nth-child(1),
.cartouche__row--split .cartouche__cell:nth-child(2) {
  border-bottom: 1px solid var(--plan);
}

.cartouche__row--split .cartouche__cell:nth-child(2) {
  border-right: 0;
}

.cartouche__row--full {
  grid-template-columns: 1fr;
}

.cartouche__row:last-child {
  border-bottom: 0;
}

.cartouche__cell {
  padding: 8px 10px;
  border-right: 1px solid var(--plan);
  min-width: 0;
}

.cartouche__cell:last-child {
  border-right: 0;
}

.cartouche__cell--label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: center;
}

.cartouche__cell--value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cartouche__cell--brand {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 10px;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.cartouche__cell .lang-link {
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: 40px 56px;
  background-image:
    linear-gradient(var(--grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 19px 19px;
  border-bottom: 1px solid var(--trait);
}

.hero__grid {
  display: grid;
  gap: 32px;
}

.hero__lead {
  margin-top: 24px;
  font-size: 1.1rem;
  max-width: 54ch;
}

.hero__cta {
  margin-top: 28px;
}

.hero__cartouche {
  align-self: end;
}

/* --------------------------------------------------------------------------
   §1 Journal de chantier (séquence horodatée réelle)
   -------------------------------------------------------------------------- */
.journal {
  border-top: 1px solid var(--plan);
}

.journal__item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
}

.journal__item:last-child {
  border-bottom: 1px solid var(--plan);
}

.journal__time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.journal__item p {
  max-width: none;
}

.journal__item--fin .journal__time,
.journal__item--fin p {
  font-family: var(--display);
  font-size: 1.15rem;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.journal__note {
  margin-top: 24px;
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   §2 Devis par lots
   -------------------------------------------------------------------------- */
.devis {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.devis th,
.devis td {
  text-align: left;
  vertical-align: top;
  padding: 14px 12px;
  border-bottom: 1px solid var(--trait);
}

.devis thead th {
  border-bottom: 1px solid var(--plan);
  padding-block: 10px;
}

.devis tbody tr:last-child td {
  border-bottom: 1px solid var(--plan);
}

.devis__lot {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  width: 64px;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.devis__nom {
  font-weight: 700;
  width: 30%;
}

.devis__nom small {
  display: block;
  font-weight: 400;
  font-size: 14px;
  margin-top: 4px;
}

.devis__detail ul li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}

.devis__detail ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--plan);
}

.devis tfoot td {
  padding-top: 16px;
  border-bottom: 0;
  font-size: 15px;
}

.devis tfoot strong {
  display: block;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   §3 Panneau plan (fond bleu plein) — le seul fond bleu de la page
   -------------------------------------------------------------------------- */
.panel-plan {
  background: var(--plan);
  color: var(--beton);
  background-image:
    linear-gradient(var(--grille-inverse) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille-inverse) 1px, transparent 1px);
  background-size: 19px 19px;
}

.panel-plan h2 {
  color: var(--papier);
}

.etapes {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(216, 214, 208, 0.5);
}

.etapes__item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(216, 214, 208, 0.3);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
}

.etapes__item:last-child {
  border-bottom: 1px solid rgba(216, 214, 208, 0.5);
}

.etapes__num {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--papier);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.etapes__item h3 {
  color: var(--papier);
  margin-bottom: 6px;
}

.etapes__item p {
  font-size: 16px;
  max-width: none;
}

/* --------------------------------------------------------------------------
   §4 Pour qui / pas pour qui
   -------------------------------------------------------------------------- */
.publics {
  display: grid;
  gap: 32px;
}

.publics__col h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--plan);
  margin-bottom: 4px;
}

.publics__col li {
  padding: 10px 0;
  border-bottom: 1px solid var(--trait);
}

/* --------------------------------------------------------------------------
   §5 Objections de chantier
   -------------------------------------------------------------------------- */
.objections {
  margin: 0;
  border-top: 1px solid var(--plan);
}

.objections > div {
  padding: 22px 0;
  border-bottom: 1px solid var(--trait);
}

.objections > div:last-child {
  border-bottom: 1px solid var(--plan);
}

.objections dt {
  font-family: var(--display);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 10px;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.objections dd {
  margin: 0;
}

.objections dd p {
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   §6 Signature
   -------------------------------------------------------------------------- */
.signature .cartouche {
  font-size: 16px;
}

.signature__titre {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  line-height: 1.12;
  font-weight: 500;
  padding: 24px 16px;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
  text-wrap: balance;
}

.signature__action {
  padding: 20px 16px;
  display: grid;
  gap: 14px;
}

.signature__action p {
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--plan);
  padding-block: 28px 120px;
  font-size: 14px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
}

.footer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   CTA flottant
   -------------------------------------------------------------------------- */
.cta-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--beton);
  border-top: 1px solid var(--plan);
  transform: translateY(110%);
  transition: transform 220ms ease;
}

.cta-float.is-visible {
  transform: none;
}

/* --------------------------------------------------------------------------
   Animation unique : la séquence du hero au chargement.
   Entièrement en CSS, sans classe posée par JavaScript : si le script ne se
   charge pas, le hero reste visible au lieu de rester masqué.
   -------------------------------------------------------------------------- */
.hero .cote__line {
  animation: cote-trace 600ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.hero .cote__label {
  animation: apparait 250ms 450ms ease-out backwards;
}

.hero__cartouche {
  animation: tampon 320ms 600ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@keyframes cote-trace {
  from {
    transform: scaleX(0);
  }
}

@keyframes apparait {
  from {
    opacity: 0;
  }
}

@keyframes tampon {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

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

  .hero .cote__line,
  .hero .cote__label,
  .hero__cartouche {
    animation: none;
  }

  .cta-float {
    transition: none;
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
  }

  body {
    font-size: 18px;
  }

  .section {
    padding-block: 72px;
  }

  .sheet {
    padding: 32px;
  }

  .header__actions .cta {
    display: inline-flex;
  }

  .cartouche__row {
    grid-template-columns: 96px 1fr;
  }

  .cartouche__row--split {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .signature .cartouche__row--split {
    grid-template-columns: 96px 120px 96px minmax(0, 1fr);
  }

  .signature .cartouche__row--split .cartouche__cell:nth-child(1),
  .signature .cartouche__row--split .cartouche__cell:nth-child(2) {
    border-bottom: 0;
  }

  .signature .cartouche__row--split .cartouche__cell:nth-child(2) {
    border-right: 1px solid var(--plan);
  }

  .cartouche__row--full {
    grid-template-columns: 1fr;
  }

  .journal__item {
    grid-template-columns: 96px 1fr;
    gap: 20px;
  }

  .publics {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .signature__action {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 24px;
  }

  .cta-float {
    left: auto;
    right: 24px;
    bottom: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    transform: translateY(calc(100% + 24px));
  }

  .cta-float .cta {
    width: auto;
  }

  .footer {
    padding-bottom: 96px;
  }
}

/* Devis : sous 640px, chaque ligne devient un bloc */
@media (max-width: 639px) {
  .devis thead {
    display: none;
  }

  .devis,
  .devis tbody,
  .devis tfoot,
  .devis tr,
  .devis td {
    display: block;
    width: 100%;
  }

  .devis tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--trait);
  }

  .devis tbody tr:last-child {
    border-bottom: 1px solid var(--plan);
  }

  .devis td {
    padding: 0;
    border: 0;
  }

  .devis tbody tr:last-child td {
    border: 0;
  }

  .devis__lot {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: auto;
    margin-bottom: 8px;
  }

  .devis__lot::before {
    content: attr(data-th);
    font-family: var(--corps);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .devis__nom {
    margin-bottom: 8px;
  }

  .devis tfoot td {
    padding-top: 16px;
  }
}

/* --------------------------------------------------------------------------
   ≥ 900px
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  :root {
    --gutter: 40px;
  }

  .section {
    padding-block: 88px;
  }

  .hero {
    padding-block: 64px 80px;
  }

  .hero__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 40px;
    align-items: end;
  }

  .hero__main {
    grid-column: 1 / 9;
  }

  .hero__cartouche {
    grid-column: 9 / 13;
  }

  .section__intro {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 40px;
  }

  .section__intro p {
    margin-top: 0;
  }

  .sheet {
    padding: 40px;
  }

  .etapes {
    grid-template-columns: repeat(4, 1fr);
    border-top: 0;
  }

  .etapes__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 20px 28px 0;
    border-bottom: 0;
    border-right: 1px solid rgba(216, 214, 208, 0.3);
    margin-right: 20px;
  }

  .etapes__item:last-child {
    border: 0;
    margin-right: 0;
  }

  .signature__titre {
    padding: 36px 32px;
  }

  .signature__action {
    padding: 24px 32px;
  }
}