/* ================================================================
   STYLE DU SITE L.C.P LES COMPAGNONS POSEURS (tout le style est dans ce fichier)
   Les couleurs sont réglées plus bas, dans :root
     --logo  : bleu du logo
     --brand : bleu des boutons et des liens
     --ink   : bleu nuit des bandeaux et du texte
     --paper : bleu très clair des fonds de section
   Pour changer une couleur, remplacez seulement le code (ex. #5271FF).
   ================================================================ */
/* Polices hébergées dans le dossier fonts (licence SIL Open Font License) */
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/BebasNeue-Regular.woff') format('woff'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Barlow-Regular.woff') format('woff'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Barlow-Medium.woff') format('woff'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Barlow-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Barlow-Bold.woff') format('woff'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/BarlowSemiCondensed-SemiBold.woff') format('woff'); }
/* Layout : façade claire. En-tête blanc avec le logo en couleur, bandeau d'accueil bleu nuit
     qui reprend les rayures du socle du logo, sections blanches et bleu pâle, titres en Bebas Neue
     comme le logo. Une seule ambiance de couleurs, choisie pour coller au logo. Aucune animation. */
  :root {
    --white: #FFFFFF;
    --paper: #F3F5FF;
    --ink: #11173A;
    --ink-deep: #0B1030;
    --muted: #4D5578;
    --line: #DCE1F5;
    --logo: #5271FF;
    --brand: #3650E0;
    --brand-hover: #2A40BE;
    --brand-soft: #E6EAFF;
    --brand-light: #8EA0FF;
    --on-ink: #F4F6FF;
    --on-ink-muted: #B8C1EA;
    --on-ink-line: rgba(255, 255, 255, 0.16);
    --stripe: rgba(142, 160, 255, 0.22);
    --tag-bg: rgba(17, 23, 58, 0.85);
    --ok: #1F7A4D;
    --display: "Bebas Neue", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --body: "Barlow", "Segoe UI", Arial, sans-serif;
    --label: "Barlow Semi Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;
    color-scheme: light;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; }
  [hidden] { display: none !important; }
  h1, h2, h3, p { margin: 0; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--logo); outline-offset: 3px; }
  .wrap { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

  .eyebrow {
    font-family: var(--label);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
  }
  .h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.6rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }
  .lead { color: var(--muted); font-size: 1.12rem; max-width: 40rem; }
  .section { padding-block: 96px; scroll-margin-top: 80px; }
  .section-paper { background: var(--paper); }
  .head { display: grid; gap: 14px; margin-bottom: 48px; }
  @media (max-width: 760px) { .section { padding-block: 64px; } .head { margin-bottom: 36px; } }

  /* Boutons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    font: 600 1.02rem/1.2 var(--body);
    border: 2px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn svg { width: 18px; height: 18px; flex: none; }
  .btn-brand { background: var(--brand); color: var(--white); }
  .btn-brand:hover { background: var(--brand-hover); }
  .btn-ghost { border-color: var(--on-ink-line); color: var(--on-ink); }
  .btn-ghost:hover { border-color: var(--on-ink); }
  .btn-sm { padding: 10px 16px; font-size: 0.95rem; }

  /* Bandeau du haut */
  .topbar { background: var(--ink-deep); color: var(--on-ink-muted); font-size: 0.9rem; }
  .topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding-block: 8px; }
  .topbar a { color: var(--on-ink); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
  .topbar a:hover { text-decoration: underline; }

  /* En-tête */
  .header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); }
  .header .wrap { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
  .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
  .logo-mark { display: block; flex: none; width: auto; aspect-ratio: 170 / 162; fill: var(--logo); }
  .logo .logo-mark { height: 50px; }
  .logo-name { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 0.9; letter-spacing: 0.015em; color: var(--logo); overflow-wrap: anywhere; }
  .nav { display: flex; align-items: center; gap: 4px; }
  .nav a { text-decoration: none; font-weight: 600; color: var(--ink); padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
  .nav a:hover { background: var(--brand-soft); color: var(--brand-hover); }
  .menu-btn { display: none; align-items: center; gap: 8px; font: 600 1rem var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; cursor: pointer; }
  .menu-btn svg { width: 18px; height: 18px; }
  @media (max-width: 760px) {
    .menu-btn { display: inline-flex; }
    .header .btn-sm { display: none; }
    .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; }
    .nav.open { display: flex; }
    .nav a { padding: 13px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
    .nav a:hover { background: none; }
  }
  @media (max-width: 440px) {
    .logo .logo-mark { height: 40px; }
    .logo-name { font-size: 1.32rem; }
    .menu-btn span { display: none; }
  }

  /* Accueil */
  .hero { background: var(--ink); color: var(--on-ink); position: relative; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; padding-block: 80px 72px; }
  .hero .eyebrow { color: var(--brand-light); }
  .hero h1 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(3.2rem, 2rem + 5.2vw, 6rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    margin-top: 18px;
  }
  .hero h1 em { font-style: normal; color: var(--brand-light); }
  .hero .intro { color: var(--on-ink-muted); font-size: 1.15rem; max-width: 34rem; margin-top: 24px; }
  .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 12px 36px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--on-ink-line); }
  .facts dt { font-family: var(--label); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-muted); }
  .facts dd { margin: 2px 0 0; font-weight: 600; color: var(--on-ink); }

  .picker { background: var(--white); color: var(--ink); border-radius: 10px; padding: 28px; min-width: 0; }
  .picker h2 { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; }
  .picker > p { color: var(--muted); margin-top: 6px; font-size: 0.98rem; }
  .picker ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .picker li { border-bottom: 1px solid var(--line); }
  .picker a { display: flex; align-items: center; gap: 14px; padding: 13px 4px; text-decoration: none; font-weight: 600; }
  .picker a:hover { color: var(--brand); }
  .picker a:hover .chev { color: var(--brand); }
  .pk-ico { flex: none; width: 38px; height: 38px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
  .pk-ico svg { width: 22px; height: 22px; }
  .chev { margin-left: auto; width: 18px; height: 18px; flex: none; color: var(--muted); }

  .socle { display: grid; gap: 7px; padding-block: 0 28px; }
  .socle span { display: block; height: 7px; border-radius: 7px; background: var(--stripe); }
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 56px 48px; }
    .facts { grid-template-columns: repeat(2, minmax(0, auto)); }
  }
  @media (max-width: 440px) { .picker { padding: 22px 18px; } }

  /* Services */
  .services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .card { border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--white); }
  .card .pk-ico { width: 52px; height: 52px; border-radius: 10px; margin-bottom: 4px; }
  .card .pk-ico svg { width: 28px; height: 28px; }
  .card h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
  .card p { color: var(--muted); }
  .card .mat { margin-top: auto; padding-top: 6px; font-family: var(--label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
  @media (max-width: 960px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .services { grid-template-columns: minmax(0, 1fr); } .card { padding: 22px; } }

  /* Méthode */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .step { display: grid; gap: 10px; align-content: start; min-width: 0; padding-top: 18px; border-top: 3px solid var(--logo); }
  .step-num { font-family: var(--display); font-size: 3.2rem; line-height: 0.85; color: var(--logo); }
  .step h3 { font-size: 1.15rem; font-weight: 700; }
  .step p { color: var(--muted); }
  @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 540px) { .steps { grid-template-columns: minmax(0, 1fr); } }

  /* L'entreprise */
  .about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .about .text { display: grid; gap: 18px; }
  .about .text p { color: var(--muted); max-width: 36rem; }
  .checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
  .checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
  .checks svg { flex: none; width: 22px; height: 22px; color: var(--brand); margin-top: 2px; }
  .idcard { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); min-width: 0; }
  .idcard-top { background: var(--paper); border-bottom: 1px solid var(--line); padding: 22px 26px; display: flex; align-items: center; gap: 14px; }
  .idcard-top .logo-mark { height: 46px; }
  .idcard-top b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--logo); }
  .idcard-top small { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
  .idcard dl { margin: 0; padding: 8px 26px 18px; }
  .idcard .row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .idcard .row:last-child { border-bottom: 0; }
  .idcard dt { font-family: var(--label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
  .idcard dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  @media (max-width: 900px) { .about { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
  @media (max-width: 480px) { .idcard .row { grid-template-columns: minmax(0, 1fr); gap: 2px; } .idcard dl, .idcard-top { padding-inline: 18px; } }

  /* Réalisations */
  .works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .work { margin: 0; min-width: 0; }
  .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shot { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--brand-soft); display: grid; place-items: center; align-content: center; gap: 12px; color: var(--brand); text-align: center; padding: 12px; }
  .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .shot .logo-mark { height: 56px; fill: var(--logo); opacity: 0.55; }
  .shot .wait { font-family: var(--label); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .tag { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--tag-bg); color: var(--white); font-family: var(--label); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
  .work h3 { font-size: 1.2rem; font-weight: 700; margin-top: 16px; }
  .work p { color: var(--muted); margin-top: 4px; }
  @media (max-width: 820px) { .works { grid-template-columns: minmax(0, 1fr); } }

  /* Contact */
  .contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .coords { display: grid; gap: 24px; margin-top: 36px; }
  .coord { display: flex; gap: 16px; align-items: flex-start; }
  .coord .pk-ico { width: 46px; height: 46px; }
  .coord .k { display: block; font-family: var(--label); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .coord .v { display: block; font-weight: 600; font-size: 1.1rem; overflow-wrap: anywhere; }
  .coord .tel { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1.05; letter-spacing: 0.02em; color: var(--brand); text-decoration: none; font-variant-numeric: tabular-nums; }
  .coord .tel:hover { color: var(--brand-hover); }
  .coord .link { color: var(--brand); font-weight: 600; }

  .form { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .form h3 { grid-column: 1 / -1; font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; }
  .field { display: grid; gap: 6px; min-width: 0; }
  .field.full { grid-column: 1 / -1; }
  .field label { font-weight: 600; font-size: 0.95rem; }
  .field input, .field select, .field textarea {
    font: inherit; font-size: 1rem; color: var(--ink); background: var(--white);
    border: 1px solid var(--line); border-radius: 6px; padding: 12px; width: 100%;
  }
  .field textarea { min-height: 130px; resize: vertical; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--logo); outline-offset: 0; border-color: var(--brand); }
  .form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .form-note { color: var(--muted); font-size: 0.9rem; flex: 1 1 16rem; }
  .form-status { grid-column: 1 / -1; color: var(--ok); font-weight: 600; }
  @media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
  @media (max-width: 560px) { .form { grid-template-columns: minmax(0, 1fr); padding: 22px; } }

  /* Pied de page */
  .footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: 56px 28px; }
  .foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
  .logo-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; text-align: center; text-decoration: none; }
  .logo-stack .logo-mark { height: 104px; }
  .logo-stack .logo-name { font-size: 1.65rem; }
  .foot-title { font-family: var(--label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
  .foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; overflow-wrap: anywhere; }
  .foot-list a { text-decoration: none; }
  .foot-list a:hover { color: var(--brand); text-decoration: underline; }
  .legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 24px; color: var(--muted); font-size: 0.9rem; }
  @media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

  /* ---------- Ajouts pour le site en plusieurs pages ---------- */

  /* Page active dans le menu */
  .nav a[aria-current="page"] { color: var(--brand); text-decoration: underline; text-decoration-color: var(--logo); text-decoration-thickness: 3px; text-underline-offset: 9px; }
  @media (max-width: 760px) { .nav a[aria-current="page"] { text-decoration: none; box-shadow: inset 4px 0 0 var(--logo); padding-left: 14px; } }

  /* Bandeau en haut des pages intérieures */
  .page-hero { background: var(--ink); color: var(--on-ink); }
  .page-hero .inner { padding-block: 56px 60px; display: grid; gap: 16px; }
  .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--label); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-muted); }
  .crumbs a { color: var(--brand-light); text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .page-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 0.92; letter-spacing: 0.01em; text-wrap: balance; }
  .page-hero h1 em { font-style: normal; color: var(--brand-light); }
  .page-hero p.intro { color: var(--on-ink-muted); font-size: 1.15rem; max-width: 40rem; }
  @media (max-width: 760px) { .page-hero .inner { padding-block: 40px 44px; } }

  /* Accueil : accès rapide aux services */
  .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tile { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 1.08rem; background: var(--white); min-width: 0; }
  .tile:hover { border-color: var(--brand); color: var(--brand); }
  .tile:hover .chev { color: var(--brand); }
  .tile .pk-ico { width: 48px; height: 48px; border-radius: 10px; }
  .tile .pk-ico svg { width: 26px; height: 26px; }
  .more { margin-top: 28px; }
  .more a { color: var(--brand); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
  .more a:hover { text-decoration: underline; }
  .more svg { width: 18px; height: 18px; }
  @media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

  /* Accueil : présentation courte */
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .split .text { display: grid; gap: 18px; }
  .split .text p { color: var(--muted); max-width: 36rem; }
  .preview-shot { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 10px; overflow: hidden; }
  .preview-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

  /* Bandeau d'appel à l'action */
  .cta { background: var(--brand); color: var(--white); }
  .cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-block: 48px; }
  .cta h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 0.95; }
  .cta p { margin-top: 8px; font-size: 1.08rem; }
  .cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .btn-white { background: var(--white); color: var(--brand); }
  .btn-white:hover { background: var(--brand-soft); }
  .btn-line { border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
  .btn-line:hover { border-color: var(--white); }

  .card { scroll-margin-top: 100px; }

  /* Accueil : encadré des matériaux (à lire, rien de cliquable) */
  .mat-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .mat-list li { display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; border-bottom: 1px solid var(--line); }
  .mat-list b { display: block; font-weight: 700; font-size: 1.05rem; }
  .mat-list span:not(.swatch) { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
  .swatch { flex: none; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line); margin-top: 2px; }
  .sw-pvc { background: var(--sw-pvc); }
  .sw-bois { background: var(--sw-bois); }
  .sw-alu { background: var(--sw-alu); }
  :root { --sw-pvc: #FFFFFF; --sw-bois: #C8956A; --sw-alu: #A7AEBB; }
  .zone { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 700; color: var(--brand); }
  .zone svg { width: 20px; height: 20px; flex: none; }

  /* Pied de page : 4 colonnes et petit encadré "Nos prestations" */
  .foot-grid { grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
  .presta { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; min-width: 0; cursor: default; }
  .presta .foot-title { margin-bottom: 10px; }
  .presta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.95rem; }
  .presta li { display: flex; align-items: center; gap: 10px; }
  .presta li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--logo); }
  @media (max-width: 960px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

  /* Accueil : encadré "Nos engagements" (remplace la photo en attendant les réalisations) */
  .engage { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
  .engage-top { display: flex; align-items: center; gap: 14px; padding: 20px 26px; background: var(--brand-soft); border-bottom: 1px solid var(--line); }
  .engage-top .logo-mark { height: 44px; }
  .engage-top b { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--ink); }
  .engage ul { list-style: none; margin: 0; padding: 6px 26px 10px; }
  .engage li { display: flex; gap: 14px; align-items: flex-start; padding-block: 16px; border-bottom: 1px solid var(--line); }
  .engage li:last-child { border-bottom: 0; }
  .engage li svg { flex: none; width: 24px; height: 24px; color: var(--brand); margin-top: 1px; }
  .engage li b { display: block; font-weight: 700; font-size: 1.05rem; }
  .engage li span { display: block; color: var(--muted); font-size: 0.97rem; }
  @media (max-width: 480px) { .engage ul, .engage-top { padding-inline: 18px; } }

  /* Formulaire : champs obligatoires et messages d'erreur */
  :root { --error: #C0262D; }
  .req { color: var(--error); font-weight: 700; }
  .req-note { grid-column: 1 / -1; margin-top: -8px; font-size: 0.85rem; color: var(--muted); }
  .err { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--error); }
  .field [aria-invalid="true"] { border-color: var(--error); background: #FFF6F6; }
  .field [aria-invalid="true"]:focus-visible { outline-color: var(--error); }

  .coord .mail { color: var(--brand); text-decoration: none; }
  .coord .mail:hover { text-decoration: underline; }

  /* Accueil : grande photo de maison avec la phrase d'accroche au milieu */
  .home-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--white); text-align: center; }
  .home-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 50%; display: block; color: transparent; font-size: 0; }
  .home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 16, 48, 0.45) 0%, rgba(11, 16, 48, 0.62) 55%, rgba(11, 16, 48, 0.78) 100%); }
  .home-hero-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; padding-block: clamp(110px, 16vw, 200px); }
  .home-hero .eyebrow { color: var(--white); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
  .home-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 1.8rem + 5.4vw, 6.4rem); line-height: 0.92; letter-spacing: 0.01em; max-width: 17ch; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
  .home-hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
  .btn-ghost-light { border-color: rgba(255, 255, 255, 0.85); color: var(--white); background: rgba(11, 16, 48, 0.25); }
  .btn-ghost-light:hover { background: rgba(11, 16, 48, 0.5); }
  @media (max-width: 560px) { .home-hero .actions .btn { width: 100%; } .home-hero .actions { width: 100%; max-width: 360px; } }

  /* Accueil : prestations (à lire, rien de cliquable) */
  .pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .pcard { border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--white); cursor: default; }
  .pcard .pk-ico { width: 56px; height: 56px; border-radius: 10px; }
  .pcard .pk-ico svg { width: 30px; height: 30px; }
  .pcard h3 { font-family: var(--display); font-weight: 400; font-size: 2.1rem; line-height: 1; }
  .pcard p { color: var(--muted); }
  .chips { list-style: none; margin: auto 0 0; padding: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .chips li { background: var(--brand-soft); color: var(--brand-hover); font-weight: 600; font-size: 0.92rem; padding: 6px 12px; border-radius: 999px; }
  @media (max-width: 900px) { .pcards { grid-template-columns: minmax(0, 1fr); } }

  /* Accueil : engagements (budget, délais, projet) */
  .engage-band { background: var(--ink); color: var(--on-ink); }
  .engage-band .eyebrow { color: var(--brand-light); }
  .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--on-ink-line); }
  .pillar { padding: 28px 28px 8px 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
  .pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--on-ink-line); }
  .pillar-k { font-family: var(--label); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-light); }
  .pillar-w { font-family: var(--display); font-size: clamp(3rem, 2.2rem + 2.6vw, 4.4rem); line-height: 0.9; color: var(--white); }
  .pillar p { color: var(--on-ink-muted); margin-top: 6px; max-width: 26rem; }
  @media (max-width: 680px) {
    .pillars { grid-template-columns: minmax(0, 1fr); }
    .pillar, .pillar + .pillar { padding: 24px 0; border-left: 0; }
    .pillar + .pillar { border-top: 1px solid var(--on-ink-line); }
  }

  /* Menu : bouton bleu "Nous contacter" (remplace Contact + Devis gratuit) */
  .nav a.nav-cta { margin-left: 10px; background: var(--brand); color: var(--white); padding: 10px 18px; border-radius: 6px; }
  .nav a.nav-cta:hover { background: var(--brand-hover); color: var(--white); }
  .nav a.nav-cta[aria-current="page"] { background: var(--brand-hover); color: var(--white); text-decoration: none; box-shadow: none; }
  @media (max-width: 760px) {
    .nav a.nav-cta { margin: 16px 0 4px; padding: 14px; text-align: center; border-bottom: 0; border-radius: 6px; }
    .nav a.nav-cta:hover { background: var(--brand-hover); }
    .nav a.nav-cta[aria-current="page"] { padding-left: 14px; }
  }

  /* Accueil : photos des prestations en haut des cartes */
  .pcard { padding: 0; gap: 0; overflow: hidden; }
  .pcard-img { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--brand-soft); border-bottom: 1px solid var(--line); }
  .pcard-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 26px; }
  @media (max-width: 900px) {
    .pcard { flex-direction: row; }
    .pcard-img { width: 40%; flex: none; border-bottom: 0; border-right: 1px solid var(--line); }
    .pcard-body { justify-content: center; }
    .pcard .chips { margin-top: 4px; }
  }

  /* Accueil : phrase de réassurance sous les prestations */
  .reassure { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-weight: 700; color: var(--ink); }
  .reassure svg { flex: none; width: 22px; height: 22px; color: var(--brand); }
  .pcard-body p { color: var(--muted); }

  /* Pages Mentions légales et Politique de confidentialité */
  .prose { display: grid; gap: 14px; max-width: 52rem; }
  .prose h2 { font-family: var(--body); font-weight: 700; font-size: 1.3rem; line-height: 1.3; margin-top: 22px; color: var(--ink); }
  .prose h2:first-child { margin-top: 0; }
  .prose p { color: var(--muted); }
  .prose a { color: var(--brand); font-weight: 600; }
  .legal-list { margin: 0; border-top: 1px solid var(--line); }
  .legal-list div { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--line); }
  .legal-list dt { font-weight: 700; color: var(--ink); }
  .legal-list dd { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .todo { background: #FFF1B8; color: #6A4B00; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
  .updated { margin-top: 18px; font-size: 0.92rem; }
  @media (max-width: 600px) { .legal-list div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

  /* Pied de page : liens légaux */
  .legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  .legal a:hover { color: var(--brand); }
  .form-note a { color: var(--brand); font-weight: 600; }

  /* ================================================================
     ANIMATIONS
     - à l'arrivée sur le site : l'en-tête descend, la photo zoome doucement,
       les textes apparaissent les uns après les autres ;
     - au changement de page : fondu entre l'ancienne et la nouvelle page.
     Désactivées automatiquement si le visiteur a demandé moins d'animations
     dans les réglages de son appareil.
     ================================================================ */
  @keyframes lcp-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes lcp-descend { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  @keyframes lcp-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
  @keyframes lcp-sortie { to { opacity: 0; } }
  @keyframes lcp-entree { from { opacity: 0; } }

  @media (prefers-reduced-motion: no-preference) {
    /* Arrivée sur le site */
    .first-visit .header { animation: lcp-descend 0.6s ease-out both; }

    /* Accueil : photo et phrase d'accroche */
    .home-hero-bg { animation: lcp-zoom 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .home-hero-inner > * { animation: lcp-monte 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .home-hero-inner > :nth-child(1) { animation-delay: 0.2s; }
    .home-hero-inner > :nth-child(2) { animation-delay: 0.38s; }
    .home-hero-inner > :nth-child(3) { animation-delay: 0.6s; }

    /* Autres pages : bandeau du haut */
    .page-hero .inner > * { animation: lcp-monte 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .page-hero .inner > :nth-child(1) { animation-delay: 0.08s; }
    .page-hero .inner > :nth-child(2) { animation-delay: 0.18s; }
    .page-hero .inner > :nth-child(3) { animation-delay: 0.3s; }

    /* Première partie sous le bandeau */
    main > section:nth-of-type(2) { animation: lcp-monte 0.8s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

    /* Survol : cartes, photos et boutons */
    .pcard { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .pcard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17, 23, 58, 0.12); }
    .pcard-img { transition: transform 0.6s ease; }
    .pcard:hover .pcard-img { transform: scale(1.04); }
    .btn, .nav a { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
    .btn:hover, .nav a.nav-cta:hover { transform: translateY(-1px); }

    /* Changement de page (Chrome, Edge, Safari) : l'en-tête reste en place, le contenu fait un fondu */
    @view-transition { navigation: auto; }
    .header { view-transition-name: entete; }
    ::view-transition-old(root) { animation: lcp-sortie 0.22s ease-in both; }
    ::view-transition-new(root) { animation: lcp-entree 0.35s ease-out both; }

    /* Changement de page (autres navigateurs) : fondu de sortie avant d'ouvrir la page suivante */
    main, .footer { transition: opacity 0.22s ease, transform 0.22s ease; }
    body.is-leaving main, body.is-leaving .footer { opacity: 0; transform: translateY(10px); }
  }


  /* Formulaire relié à Formspree : champ anti-spam invisible et message d'erreur */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .form { position: relative; }
  .form-status.is-error { color: var(--error); }
  .form button[disabled] { opacity: 0.7; cursor: wait; }


  /* ================================================================
     OPTIMISATIONS TÉLÉPHONE, TABLETTE ET ORDINATEUR
     ================================================================ */

  /* Tablette : menu complet, logo un peu plus petit */
  @media (max-width: 960px) {
    .header .wrap { gap: 16px; }
    .logo .logo-mark { height: 42px; }
    .logo-name { font-size: 1.45rem; }
    .nav a { padding: 8px 10px; }
  }

  /* Téléphone : en-tête compact */
  @media (max-width: 760px) {
    .header .wrap { padding-block: 8px; gap: 12px; }
    .logo { gap: 8px; }
    .logo .logo-mark { height: 34px; }
    .logo-name { min-width: 0; font-size: clamp(1.05rem, 4.4vw, 1.4rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .menu-btn { width: 42px; height: 42px; padding: 0; justify-content: center; flex: none; }
    .menu-btn span { display: none; }
    .nav { padding: 4px 16px 14px; box-shadow: 0 16px 30px rgba(17, 23, 58, 0.14); }
    .nav a { padding: 12px 4px; }
    .nav a.nav-cta { margin: 12px 0 2px; padding: 12px; }
  }

  /* Téléphone : bandeaux et sections moins hauts */
  @media (max-width: 760px) {
    .home-hero-inner { padding-block: 76px 68px; gap: 18px; }
    .home-hero .eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; }
    .section { padding-block: 52px; }
    .head { margin-bottom: 26px; gap: 10px; }
    .h2 { font-size: clamp(2rem, 1.3rem + 3.4vw, 2.6rem); }
    .lead { font-size: 1rem; }
    .page-hero .inner { padding-block: 34px 38px; gap: 12px; }
    .page-hero h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 3.2rem); }
    .page-hero p.intro { font-size: 1rem; }
  }
  @media (max-width: 480px) {
    body { font-size: 1rem; }
    .home-hero h1 { font-size: clamp(2.6rem, 11.5vw, 3.2rem); }
  }

  /* Prestations : photo à gauche du texte sur tablette et téléphone */
  @media (max-width: 900px) {
    .pcards { gap: 14px; }
    .pcard-img { width: 38%; aspect-ratio: auto; height: auto; min-height: 100%; }
    .pcard-body { padding: 18px 18px 20px; gap: 8px; }
  }
  @media (max-width: 480px) {
    .pcard-img { width: 36%; }
    .pcard h3 { font-size: 1.7rem; }
    .pcard-body p { font-size: 0.94rem; line-height: 1.5; }
    .reassure { margin-top: 20px; font-size: 0.95rem; }
  }

  /* Engagements : plus compacts sur téléphone */
  @media (max-width: 680px) {
    .pillar, .pillar + .pillar { padding: 18px 0; }
    .pillar-w { font-size: 2.8rem; }
  }

  /* Méthode : numéro à gauche sur téléphone */
  @media (max-width: 560px) {
    .steps { gap: 16px; }
    .step { grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding-top: 14px; }
    .step-num { grid-column: 1; grid-row: 1 / span 2; font-size: 2.6rem; }
    .step h3, .step p { grid-column: 2; }
  }

  /* Bandeau "Un projet de menuiserie ?" */
  @media (max-width: 560px) {
    .cta .wrap { padding-block: 36px; gap: 18px; }
    .cta .actions { width: 100%; }
    .cta .actions .btn { flex: 1 1 100%; }
  }

  /* Contact */
  @media (max-width: 560px) {
    .coords { gap: 18px; }
    .form { padding: 18px; gap: 14px; }
    .form h3 { font-size: 1.8rem; }
    .prose h2 { font-size: 1.15rem; }
  }

  /* Pied de page plus léger sur téléphone */
  @media (max-width: 560px) {
    .footer { padding-block: 40px 24px; }
    .foot-grid { gap: 26px; }
    .logo-stack .logo-mark { height: 64px; }
    .logo-stack .logo-name { font-size: 1.35rem; }
    .legal { margin-top: 28px; font-size: 0.82rem; }
  }

  /* Écrans tactiles : pas d'effet de survol qui reste bloqué */
  @media (hover: none) {
    .pcard:hover { transform: none; box-shadow: none; }
    .pcard:hover .pcard-img { transform: none; }
    .btn:hover, .nav a.nav-cta:hover { transform: none; }
  }