/* ============================================================
   O'Travaux — feuille de style principale
   Charte : Lemon Milk (titres) · couleurs du logo
   ============================================================ */

/* Lemon Milk : déposer LemonMilk-Regular.woff2 dans /assets/fonts/ (fichier fourni par le client).
   En son absence, Outfit prend le relais automatiquement. */
@font-face { font-family: "Lemon Milk"; src: url("../fonts/LemonMilk-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --rouge: #DD3B35;
  --jaune: #FDC95B;
  --bleu: #51AEE2;
  --marine: #064890;
  --anthracite: #3C3C3B;
  --noir: #2A2A29;
  --gris-fond: #F2F4F7;
  --gris-trait: #DEE2E8;
  --gris-texte: #5B5E63;
  --blanc: #FFFFFF;

  --f-titre: "Lemon Milk", "Outfit", system-ui, sans-serif;
  --f-texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --r: 6px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-texte); font-size: 1.0625rem; line-height: 1.65; color: var(--anthracite); background: var(--blanc); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marine); text-underline-offset: 3px; }
a:hover { color: var(--rouge); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; color: var(--noir); }
h1, h2 { font-family: var(--f-titre); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--jaune); color: var(--noir); padding: .6em 1em; z-index: 100; }
.skip:focus { left: 8px; }
.nowrap { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: .55em; padding: .85em 1.35em; border-radius: var(--r); font: 700 1rem/1.2 var(--f-texte); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn--primary { background: var(--jaune); color: var(--noir); }
.btn--primary:hover { background: #FFD677; color: var(--noir); }
.btn--light { border-color: rgba(255,255,255,.55); color: var(--blanc); background: transparent; }
.btn--light:hover { border-color: var(--blanc); background: rgba(255,255,255,.08); color: var(--blanc); }
.btn--ghost { border-color: var(--anthracite); color: var(--anthracite); background: transparent; }
.btn--ghost:hover { background: var(--anthracite); color: var(--blanc); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Bande 4 couleurs (reprend le cercle du logo) ---------- */
.quad-band { display: flex; height: 8px; }
.quad-band span { flex: 1; }
.quad-band span:nth-child(1) { background: var(--jaune); }
.quad-band span:nth-child(2) { background: var(--marine); }
.quad-band span:nth-child(3) { background: var(--bleu); }
.quad-band span:nth-child(4) { background: var(--rouge); }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--blanc); border-bottom: 1px solid var(--gris-trait); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--noir); }
.brand:hover { color: var(--noir); }
.brand-emblem { width: 50px; height: 50px; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--f-titre); font-weight: 500; text-transform: uppercase; font-size: 1.45rem; line-height: 1; letter-spacing: .01em; }
.brand-tag { font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: var(--gris-texte); margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { white-space: nowrap; color: var(--anthracite); text-decoration: none; font-weight: 600; padding: 6px 0; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--marine); }
.nav a[aria-current="page"] { border-bottom-color: var(--jaune); }
.nav .nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--anthracite); color: var(--blanc); padding: 10px 16px; border-radius: var(--r); border: 0; }
.nav .nav-cta:hover { background: var(--marine); color: var(--blanc); }
.nav-toggle { display: none; }

/* ---------- Hero accueil ---------- */
.hero { color: var(--blanc); position: relative; overflow: hidden;
  background-color: var(--anthracite);
  background-image: linear-gradient(90deg, rgba(42,42,41,.94) 0%, rgba(42,42,41,.82) 38%, rgba(42,42,41,.25) 72%, rgba(42,42,41,.05) 100%), url("../img/photoindex.jpeg");
  background-size: cover; background-position: center right; }
.hero-inner { display: grid; grid-template-columns: 1fr; align-items: center; padding-top: 110px; padding-bottom: 120px; min-height: 560px; }
.hero-text { max-width: 620px; }
.hero h1, .hero .lead { text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.hero h1 { color: var(--blanc); max-width: 14ch; }
.lead { font-size: 1.2rem; max-width: 60ch; }
.hero .lead { color: #E3E4E6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-text { animation: pose .8s cubic-bezier(.2,.8,.2,1) both .1s; }
  @keyframes pose { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section--alt { background: var(--gris-fond); }
.section--tight { padding: 64px 0; }
.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head p { color: var(--gris-texte); }
.section-head--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.section-head--row h2 { margin: 0; }

/* Couleurs par métier */
.svc--bleu   { --c: var(--bleu);   --c-ink: var(--noir); }
.svc--rouge  { --c: var(--rouge);  --c-ink: var(--blanc); }
.svc--gris   { --c: var(--anthracite); --c-ink: var(--blanc); }
.svc--marine { --c: var(--marine); --c-ink: var(--blanc); }
.svc--jaune  { --c: var(--jaune);  --c-ink: var(--noir); }

/* ---------- Grille services (accueil) ---------- */
.services-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.svc a { display: flex; flex-direction: column; height: 100%; padding: 26px 22px 22px; background: var(--blanc); border: 1px solid var(--gris-trait); border-top: 6px solid var(--c); border-radius: 0 0 var(--r) var(--r); text-decoration: none; color: var(--anthracite); transition: border-color .2s, transform .2s; }
.svc a:hover { border-color: var(--c); color: var(--anthracite); }
.svc-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c); color: var(--c-ink); margin-bottom: 18px; }
.svc-ico .ico { width: 24px; height: 24px; }
.svc h3 { font-size: 1.08rem; margin-bottom: .45em; }
.svc p { font-size: .96rem; color: var(--gris-texte); flex: 1; margin-bottom: 1.2em; }
.svc-more { font-weight: 700; font-size: .92rem; color: var(--marine); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- À propos + zone ---------- */
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.about-text p { max-width: 64ch; }
.zone { background: var(--blanc); border-radius: var(--r); padding: 30px; border-left: 6px solid var(--marine); }
.zone h3 { display: flex; align-items: center; gap: 10px; }
.zone h3 .ico { color: var(--rouge); }
.zone-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.zone-list li { background: var(--gris-fond); padding: 5px 12px; border-radius: 999px; font-size: .92rem; font-weight: 600; }
.zone-list li:first-child { background: var(--marine); color: var(--blanc); }
.zone-note { font-size: .92rem; color: var(--gris-texte); margin: 0; }

/* ---------- Teaser projets ---------- */
.projets-teaser { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.projets-teaser a { display: block; text-decoration: none; color: var(--anthracite); }
.projets-teaser img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: var(--r); }
.pt-body { display: flex; flex-direction: column; padding-top: 12px; }
.pt-body span { color: var(--gris-texte); font-size: .94rem; }
.projets-teaser a:hover strong { color: var(--marine); }

/* ---------- Fournisseurs ---------- */
.fournisseurs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.fournisseurs li > * { display: grid; place-items: center; height: 100px; padding: 18px; background: var(--blanc); border-radius: var(--r); border: 1px solid var(--gris-trait); }
.fournisseurs img { max-height: 60px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.fournisseurs a:hover img, .fournisseurs a:focus-visible img { filter: none; opacity: 1; }

/* ---------- Bandeau CTA ---------- */
.cta-band { background: var(--marine); color: var(--blanc); padding: 56px 0; }
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { color: var(--blanc); margin-bottom: .3em; }
.cta-band p { margin: 0; color: #D6E2F2; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- En-tête des pages intérieures ---------- */
.page-hero { background: var(--anthracite); color: var(--blanc); }
.page-hero .wrap { padding-top: 64px; padding-bottom: 56px; }
.page-hero h1 { color: var(--blanc); }
.page-hero .lead { color: #E3E4E6; }
.page-hero--img { background-image: linear-gradient(90deg, rgba(42,42,41,.94) 0%, rgba(42,42,41,.84) 40%, rgba(42,42,41,.3) 75%, rgba(42,42,41,.08) 100%), var(--hero-img); background-size: cover; background-position: center right; }
.page-hero--img .wrap { padding-top: 88px; padding-bottom: 80px; }
.page-hero--img h1, .page-hero--img .lead { text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.page-hero--img .lead { max-width: 56ch; }
.page-hero--img .chip { background: rgba(42,42,41,.55); backdrop-filter: blur(4px); }
.page-hero--small .wrap { padding-top: 48px; padding-bottom: 36px; }
.page-hero--small h1 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.svc-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--blanc); text-decoration: none; font-weight: 600; font-size: .95rem; border: 1px solid rgba(255,255,255,.18); }
.chip .ico { color: var(--c); }
.chip--gris .ico { color: #B9BBBE; }
.chip:hover { background: rgba(255,255,255,.16); color: var(--blanc); }
.chip--bleu { --c: var(--bleu); } .chip--rouge { --c: var(--rouge); } .chip--marine { --c: #7FA8E6; } .chip--jaune { --c: var(--jaune); }

/* ---------- Détail des services ---------- */
.services-list { padding-top: 72px; padding-bottom: 40px; }
.svc-detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--gris-trait); }
.svc-detail:last-child { border-bottom: 0; margin-bottom: 0; }
.svc-detail:nth-child(even) { grid-template-columns: 1.1fr 1fr; }
.svc-detail:nth-child(even) .svc-media { order: 2; }
.svc-detail:not(:has(.svc-media)) { grid-template-columns: 1fr; }
.svc-media { margin: 0; }
.svc-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); border-bottom: 6px solid var(--c); }
.svc-content > header { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.svc-content > header .svc-ico { margin: 0; }
.svc-content h2 { margin: 0; }
.svc-content p { max-width: 62ch; }
.svc-content .checks { margin-top: 8px; }
.svc-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 12px; }
.svc-lists h3 { margin-bottom: .4em; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--gris-trait); }
.checks li:last-child { border-bottom: 0; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 3px solid var(--c); border-bottom: 3px solid var(--c); transform: rotate(-45deg); }
.svc--jaune .checks li::before { border-color: #D9A02A; }

/* Étapes */
.approach h2 { margin-bottom: 36px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 3px solid var(--anthracite); padding-top: 18px; }
.steps li::before { content: counter(s); font-family: var(--f-titre); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--marine); display: block; margin-bottom: 12px; }
.steps p { color: var(--gris-texte); font-size: .98rem; margin: 0; }

/* ---------- Projets ---------- */
.projets-list { padding-top: 72px; padding-bottom: 72px; }
.projet { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid var(--gris-trait); }
.projet:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.projet:nth-child(even) { grid-template-columns: 1fr 1.25fr; }
.projet:nth-child(even) .projet-media { order: 2; }
.projet-main, .projet-thumbs button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); overflow: hidden; }
.projet-main img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .4s; }
.projet-main:hover img { transform: scale(1.02); }
.projet-thumbs { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.projet-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .2s; }
.projet-thumbs button:hover img { opacity: .8; }
.projet-ville { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--marine); margin-bottom: .6em; }
.projet-ville .ico { color: var(--rouge); }
.projet-desc { color: var(--gris-texte); }
.empty { background: var(--gris-fond); border-radius: var(--r); padding: 40px; text-align: center; }
.empty p { margin: 0; max-width: 60ch; margin-inline: auto; }

/* ---------- Pages légales ---------- */
.legal { max-width: 820px; padding-top: 56px; padding-bottom: 80px; }
.legal h2 { font-size: 1.25rem; margin-top: 2em; }
.legal h2:first-child { margin-top: 0; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--noir); color: #C9CACC; font-size: .96rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr; gap: 48px; padding-top: 64px; padding-bottom: 48px; }
.brand--light, .brand--light:hover { color: var(--blanc); }
.brand--light .brand-tag { color: #A9ABAE; }
.brand--light .brand-emblem path[fill="#3C3C3B"], .brand--light .brand-emblem rect[fill="#3C3C3B"], .brand--light .brand-emblem circle[fill="#3C3C3B"] { fill: #1E1E1D; }
.footer-about { margin-top: 18px; max-width: 38ch; }
.footer-title { font-family: var(--f-texte); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700; color: var(--blanc); margin-bottom: 14px; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.footer-list .ico { margin-top: .25em; color: var(--jaune); }
.site-footer a, .site-footer .link-btn { color: #E6E7E8; text-decoration: none; }
.site-footer a:hover, .site-footer .link-btn:hover { color: var(--jaune); }
.footer-links li { margin-bottom: 6px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); }
.socials a:hover { background: var(--jaune); color: var(--noir); }
.socials svg { width: 19px; height: 19px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .86rem; color: #9D9FA2; }

/* ---------- Bouton téléphone flottant ---------- */
.fab-tel { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; height: 60px; min-width: 60px; padding: 0 18px; border-radius: 30px; background: var(--rouge); color: var(--blanc); text-decoration: none; font-weight: 700; box-shadow: 0 8px 24px rgba(221,59,53,.35); transition: background-color .2s, bottom .3s; }
.fab-tel:hover { background: #C62F2A; color: var(--blanc); }
.fab-tel .ico { width: 24px; height: 24px; }
body.cookie-open .fab-tel { bottom: var(--cookie-h, 20px); }

/* ---------- Bannière cookies ---------- */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 70; max-width: 440px; background: var(--blanc); color: var(--anthracite); border-radius: var(--r); padding: 22px; box-shadow: 0 14px 40px rgba(20,20,20,.22); border-top: 5px solid var(--jaune); }
.cookie p { font-size: .94rem; margin-bottom: 16px; }
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cookie .btn { padding: .65em 1.2em; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(20,20,20,.94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100vh; padding: 24px 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 4px; }
.lightbox figcaption { color: #E6E7E8; font-size: .95rem; }
.lightbox button { background: none; border: 0; color: var(--blanc); font-size: 2.6rem; line-height: 1; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; justify-self: center; }
.lightbox button:hover { background: rgba(255,255,255,.1); }
.lb-close { position: absolute; top: 14px; right: 14px; }

/* ---------- Formulaire « Votre projet » ---------- */
.projet-page { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; padding-top: 64px; padding-bottom: 88px; }
.form fieldset { border: 0; padding: 0; margin: 0 0 36px; }
.form legend { font-family: var(--f-titre); font-weight: 500; text-transform: uppercase; font-size: 1.25rem; color: var(--noir); margin-bottom: 18px; padding: 0; }
.form label { display: block; font-weight: 600; margin-bottom: 18px; }
.form small { font-weight: 400; color: var(--gris-texte); }
.form input[type=text], .form input[type=tel], .form input[type=email], .form select, .form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: 400 1rem/1.4 var(--f-texte); color: var(--anthracite); background: var(--blanc); border: 1.5px solid #C3C8D0; border-radius: var(--r); }
.form textarea { resize: vertical; min-height: 150px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(81,174,226,.3); }
.form input[type=file] { display: block; margin-top: 8px; font: inherit; font-weight: 400; }
.form .has-err input, .form .has-err textarea { border-color: var(--rouge); }
.form .has-err { color: #B3261E; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-hint { font-weight: 600; margin-bottom: 10px; }
.form-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.form .choice { margin: 0; font-weight: 600; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1.5px solid #C3C8D0; border-radius: 999px; background: var(--blanc); transition: background-color .15s, border-color .15s, color .15s; }
.choice span .ico { color: var(--c, var(--anthracite)); }
.choice input:checked + span { background: var(--anthracite); border-color: var(--anthracite); color: var(--blanc); }
.choice input:checked + span .ico { color: var(--c, var(--blanc)); }
.choice input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
.choice--bleu { --c: var(--bleu); } .choice--rouge { --c: var(--rouge); } .choice--jaune { --c: var(--jaune); }
.choice--marine { --c: var(--marine); } .choice--marine input:checked + span .ico { color: #7FA8E6; }
.choice--gris input:checked + span .ico { color: #B9BBBE; }
.form-legal { font-size: .88rem; color: var(--gris-texte); max-width: 64ch; }
.btn--big { padding: 1em 1.8em; font-size: 1.05rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-err { background: #FCE9E8; border-left: 5px solid var(--rouge); border-radius: var(--r); padding: 18px 22px; margin-bottom: 32px; color: #8E1F1A; }
.form-err ul { margin: 8px 0 0; }
.form-err p { margin: 0; }
.form-ok { background: var(--gris-fond); border-left: 6px solid var(--jaune); border-radius: var(--r); padding: 36px; }
.form-ok h2 { font-size: 1.5rem; }
.projet-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h) + 24px); }
.aside-card { background: var(--anthracite); color: #E3E4E6; border-radius: var(--r); padding: 26px; }
.aside-card--light { background: var(--gris-fond); color: var(--anthracite); }
.aside-title { font-family: var(--f-texte); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.1rem; color: inherit; margin-bottom: .5em; }
.aside-card:not(.aside-card--light) .aside-title { color: var(--blanc); }
.aside-card p { font-size: .96rem; }
.aside-card--light p { margin: 0; }
.svc-cta { margin-top: 20px; }
.svc-cta a { font-weight: 700; color: var(--marine); text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .projet-page { grid-template-columns: 1fr; gap: 40px; }
  .projet-aside { position: static; }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .btn--big { width: 100%; justify-content: center; }
}

/* ---------- Forfaits ---------- */
.forfaits { padding-top: 72px; padding-bottom: 72px; }
.bouquet { padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--gris-trait); }
.bouquet:last-of-type { border-bottom: 0; margin-bottom: 32px; padding-bottom: 0; }
.bouquet-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 32px; }
.bouquet-head .svc-ico { margin: 4px 0 0; flex: none; }
.bouquet-head h2 { margin-bottom: .3em; }
.bouquet-head p { color: var(--gris-texte); max-width: 70ch; margin: 0; }
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.offre { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--gris-trait); border-top: 6px solid var(--c); border-radius: 0 0 var(--r) var(--r); }
.offre-top { padding: 24px 24px 20px; border-bottom: 1px solid var(--gris-trait); }
.offre h3 { font-family: var(--f-titre); font-weight: 500; text-transform: uppercase; font-size: 1.2rem; margin-bottom: .25em; }
.offre-pour { color: var(--gris-texte); font-size: .95rem; min-height: 2.9em; margin-bottom: 14px; }
.offre-prix { margin: 0; display: flex; flex-direction: column; }
.offre-prix strong { font-family: var(--f-titre); font-weight: 500; font-size: 2rem; line-height: 1.1; color: var(--noir); }
.offre-prix span { font-size: .88rem; color: var(--gris-texte); }
.offre-liste { margin: 0; padding: 8px 24px; flex: 1; }
.offre-liste > div { padding: 12px 0; border-bottom: 1px solid var(--gris-trait); }
.offre-liste > div:last-child { border-bottom: 0; }
.offre-liste dt { font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: var(--marine); margin-bottom: 3px; }
.offre-liste dd { margin: 0; font-size: .95rem; }
.offre-liste .is-none dd { color: #9A9DA2; }
.offre-cta { margin: 0 24px 24px; justify-content: center; }
.bouquet-note { font-size: .93rem; color: var(--gris-texte); margin: 20px 0 16px; max-width: 90ch; }
.conditions { background: var(--gris-fond); border-radius: var(--r); }
.conditions summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.conditions summary::-webkit-details-marker { display: none; }
.conditions summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--marine); }
.conditions[open] summary::after { content: "–"; }
.conditions dl { margin: 0; padding: 0 20px 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
.conditions dt { font-weight: 700; font-size: .93rem; }
.conditions dd { margin: 2px 0 0; font-size: .93rem; color: var(--gris-texte); }
.forfaits-legal { font-size: .88rem; color: var(--gris-texte); border-top: 1px solid var(--gris-trait); padding-top: 20px; max-width: 90ch; }
.forfaits-teaser { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--anthracite); color: var(--blanc); border-radius: var(--r); padding: 26px 30px; }
.forfaits-teaser p { margin: 0; font-size: 1.05rem; }
.forfaits-teaser strong { color: var(--jaune); font-weight: 700; white-space: nowrap; }
@media (max-width: 1000px) {
  .offres { grid-template-columns: 1fr; max-width: 620px; }
  .offre-pour { min-height: 0; }
  .conditions dl { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1180px) {
  .nav-toggle { display: grid; place-items: center; width: 46px; height: 46px; background: none; border: 0; cursor: pointer; }
  .nav-toggle span:first-child, .nav-toggle span:first-child::before, .nav-toggle span:first-child::after { display: block; width: 26px; height: 3px; background: var(--anthracite); border-radius: 2px; position: relative; transition: transform .2s, background-color .2s; }
  .nav-toggle span:first-child::before, .nav-toggle span:first-child::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span:first-child::before { top: -8px; } .nav-toggle span:first-child::after { top: 8px; }
  .nav-toggle[aria-expanded="true"] span:first-child { background: transparent; }
  .nav-toggle[aria-expanded="true"] span:first-child::before { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:first-child::after { transform: translateY(-8px) rotate(-45deg); }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--blanc); border-bottom: 1px solid var(--gris-trait); padding: 8px 24px 20px; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--gris-trait); }
  .nav a[aria-current="page"] { border-bottom-color: var(--gris-trait); box-shadow: inset 4px 0 0 var(--jaune); padding-left: 14px; }
  .nav .nav-cta { justify-content: center; margin-top: 16px; padding: 14px; }
}
@media (max-width: 900px) {
  .hero-inner { padding-top: 64px; padding-bottom: 72px; min-height: 0; }
  .page-hero--img { background-image: linear-gradient(180deg, rgba(42,42,41,.8) 0%, rgba(42,42,41,.9) 100%), var(--hero-img); background-position: 70% center; }
  .page-hero--img .wrap { padding-top: 56px; padding-bottom: 48px; }
  .hero { background-image: linear-gradient(180deg, rgba(42,42,41,.78) 0%, rgba(42,42,41,.88) 100%), url("../img/photoindex.jpeg"); background-position: 70% center; }
  .about, .projet, .projet:nth-child(even), .svc-detail, .svc-detail:nth-child(even) { grid-template-columns: 1fr; gap: 28px; }
  .svc-detail:nth-child(even) .svc-media { order: 0; }
  .svc-detail { padding-bottom: 56px; margin-bottom: 56px; }
  .projet:nth-child(even) .projet-media { order: 0; }
  .projets-teaser { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .section { padding: 64px 0; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .wrap { padding-inline: 18px; }
  .brand-emblem { width: 42px; height: 42px; }
  .brand-name { font-size: 1.2rem; }
  .brand-tag { font-size: .6rem; }
  .services-grid, .projets-teaser { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .svc-lists { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
  .cta-actions { width: 100%; }
  .fab-label { display: none; }
  .fab-tel { padding: 0; justify-content: center; width: 60px; }
  .cookie { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .lightbox { grid-template-columns: 44px 1fr 44px; }
  .lightbox button { width: 44px; height: 44px; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}