/* AGT PRO Propreté — direction « affiche de chantier »
   Aplats de couleurs RAL pleine largeur, typo extra-large qui déborde, pictogrammes de signalétique,
   un bon d'intervention en guise de méthode. Un seul thème, assumé (affiche imprimée). */
:root {
  color-scheme: light;
  --bleu: #12306e;      /* bleu nuit, celui du logo */
  --jaune: #d4a373;     /* bronze champagne, celui de la virgule du logo */
  --bronze-degrade: linear-gradient(100deg, #b98252 0%, #ecc89d 45%, #c28c5c 70%, #e9c294 100%);
  --blanc: #f4f3ee;     /* papier */
  --noir: #0d1220;      /* encre */
  --gris: #5d6475;      /* texte secondaire sur papier */
  --carbone: #dfe6f3;   /* bleu pâle du double carbone */

  --f-affiche: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --f-texte: "Newsreader", Georgia, "Times New Roman", serif;
  --f-tech: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --g: max(16px, env(safe-area-inset-left, 0px));
  --d: max(16px, env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--blanc); color: var(--noir); font-family: var(--f-texte); font-size: 19px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cadre { padding-left: var(--g); padding-right: var(--d); max-width: 1440px; margin-inline: auto; }
.mono { font-family: var(--f-tech); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.affiche { font-family: var(--f-affiche); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; }
.etroit { font-family: var(--f-affiche); font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .9; }

/* Bouton : étiquette autocollante */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; font-family: var(--f-affiche); font-weight: 800; font-stretch: 110%; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--noir); }
.btn-jaune { background: var(--jaune); color: var(--noir); }
.btn-noir { background: var(--noir); color: var(--blanc); }
.btn-noir:hover { box-shadow: 4px 4px 0 var(--jaune); }

/* ---------- Haut de page ---------- */
.barre { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 10; color: var(--blanc); }
.barre .cadre { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; }
.logo { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.logo svg { width: 42px; height: 42px; flex: none; }
.logo b { font-family: var(--f-affiche); font-weight: 900; font-stretch: 125%; font-size: 22px; letter-spacing: -.01em; line-height: 1; }
.barre nav { display: flex; gap: 26px; align-items: center; }
.barre nav a { font-family: var(--f-tech); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.barre nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.barre .tel-haut { font-family: var(--f-affiche); font-weight: 800; font-stretch: 100%; font-size: 17px; letter-spacing: .02em; }
@media (max-width: 860px) { .barre nav a.lien { display: none; } }

/* ---------- Hero bleu ---------- */
.hero { background: var(--bleu); color: var(--blanc); position: relative; overflow: hidden; }
.hero .cadre { padding-block: 120px 40px; position: relative; }
.hero h1 { font-family: var(--f-tech); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; max-width: 40ch; margin-bottom: 28px; }
.hero h1 span { color: var(--jaune); }
.hero .slogan { font-size: clamp(34px, 9.4vw, 150px); margin-left: -.04em; }
.hero .slogan .ligne { display: block; white-space: nowrap; }
.hero .rot { position: relative; display: inline-block; color: var(--jaune); }
.hero .rot::after { content: ""; position: absolute; top: .02em; bottom: .02em; left: 0; width: 0; background: var(--blanc); }
.hero .rot.lave::after { animation: lave .9s cubic-bezier(.7,0,.3,1); }
@keyframes lave { 0% { left: 0; width: 0; } 45% { left: 0; width: 100%; } 55% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } }
.hero .bas { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; border-top: 2px solid rgba(244,243,238,.35); padding-top: 24px; }
.hero .bas p { font-size: 22px; font-style: italic; max-width: 46ch; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .vertical { position: absolute; right: calc(var(--d) - 4px); top: 130px; writing-mode: vertical-rl; color: var(--jaune); }
@media (max-width: 760px) {
  .hero .cadre { padding-block: 96px 32px; }
  .hero .bas { grid-template-columns: 1fr; }
  .hero .bas p { font-size: 19px; }
  .hero .vertical { display: none; }
  .hero .slogan .ligne { white-space: normal; }
}

/* ---------- Défilant des communes ---------- */
.defile { background: var(--jaune); color: var(--noir); overflow: hidden; border-block: 3px solid var(--noir); }
.defile .piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.defile span { font-family: var(--f-affiche); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 34px; line-height: 1; padding: 14px 0; white-space: nowrap; }
.defile span::after { content: "✕"; font-size: 18px; margin: 0 26px; vertical-align: middle; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile .piste { animation: none; } }

/* ---------- Manifeste ---------- */
.manifeste { padding-block: 120px; }
.manifeste .cadre { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
.manifeste .mono { color: var(--gris); padding-top: 14px; }
.manifeste p.gros { font-size: clamp(30px, 3.7vw, 54px); line-height: 1.12; letter-spacing: -.01em; max-width: 26ch; }
.manifeste p.gros mark { background: none; color: inherit; font-family: var(--f-affiche); font-weight: 900; font-stretch: 125%; font-size: .78em; text-transform: uppercase; letter-spacing: -.01em; background-image: linear-gradient(var(--jaune), var(--jaune)); background-size: 100% .38em; background-position: 0 88%; background-repeat: no-repeat; }
.manifeste .suite { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 900px; color: var(--gris); font-size: 18px; }
@media (max-width: 760px) { .manifeste { padding-block: 72px; } .manifeste .cadre { grid-template-columns: 1fr; gap: 16px; } .manifeste .suite { grid-template-columns: 1fr; } }

/* ---------- Secteurs : panneaux empilés ---------- */
.secteurs-tete { padding-bottom: 40px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.secteurs-tete h2 { font-size: clamp(38px, 6vw, 92px); }
.secteurs-tete p { max-width: 38ch; color: var(--gris); }
.panneau { position: sticky; top: 0; min-height: 86vh; display: flex; border-top: 3px solid var(--noir); }
.panneau .cadre { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-rows: auto 1fr auto; gap: 24px 48px; padding-block: 28px 40px; }
.panneau .num { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.panneau h3 { grid-column: 1 / -1; align-self: center; font-size: clamp(54px, 12vw, 200px); overflow-wrap: anywhere; hyphens: manual; }
.panneau p { align-self: end; font-size: 21px; max-width: 44ch; }
.panneau .picto { align-self: end; justify-self: end; width: 150px; height: 150px; }
.panneau .picto rect.fond { fill: currentColor; }
.panneau.p-blanc { background: var(--blanc); color: var(--noir); }
.panneau.p-bleu { background: var(--bleu); color: var(--blanc); }
.panneau.p-jaune { background: var(--jaune); color: var(--noir); }
.panneau.p-noir { background: var(--noir); color: var(--blanc); }
.panneau.p-noir h3 { color: var(--jaune); }
.panneau .picto .trait { fill: none; stroke-width: 4.5; stroke-linecap: square; stroke-linejoin: miter; }
.p-blanc .picto .trait { stroke: var(--blanc); }
.p-jaune .picto .trait { stroke: var(--jaune); }
.p-bleu .picto .trait { stroke: var(--bleu); }
.p-noir .picto .trait { stroke: var(--noir); }
.panneau h3.etroit { font-size: clamp(50px, 12vw, 176px); }
@media (max-width: 760px) {
  .panneau { min-height: 78vh; }
  .panneau .cadre { grid-template-columns: 1fr auto; }
  .panneau p { font-size: 18px; grid-column: 1 / -1; }
  .panneau .picto { width: 84px; height: 84px; grid-row: 1; grid-column: 2; align-self: start; }
  .panneau .num { grid-column: 1; }
}

/* ---------- Sales boulots : index typographique ---------- */
.boulots { background: var(--noir); color: var(--blanc); padding-block: 110px; position: relative; z-index: 2; }
.boulots h2 { font-size: clamp(40px, 7vw, 120px); max-width: 12ch; }
.boulots h2 em { font-family: var(--f-texte); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; color: var(--jaune); letter-spacing: 0; }
.boulots .intro { margin-top: 24px; max-width: 48ch; color: #b9bfcd; }
.liste { margin-top: 64px; list-style: none; padding: 0; border-top: 1px solid rgba(244,243,238,.25); }
.liste li { padding-block: 22px; border-bottom: 1px solid rgba(244,243,238,.25); transition: padding .25s ease, color .25s ease; }
.liste summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 24px; align-items: center; cursor: pointer; list-style: none; }
.liste summary::-webkit-details-marker { display: none; }
.liste summary i { width: 28px; height: 28px; position: relative; }
.liste summary i::before, .liste summary i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 13px; height: 2px; background: currentColor; transition: transform .25s ease; }
.liste summary i::after { transform: rotate(90deg); }
.liste details[open] summary i::after { transform: rotate(0); }
.liste details p { margin-top: 12px; max-width: 60ch; }
.liste li:hover { color: var(--jaune); padding-left: 16px; }
.liste h3 { font-size: clamp(30px, 4.2vw, 64px); }
.liste p { color: #b9bfcd; font-size: 18px; }
.liste .mono { justify-self: end; color: #b9bfcd; }
@media (max-width: 860px) { .boulots { padding-block: 72px; } .liste summary { grid-template-columns: minmax(0, 1fr) 28px; gap: 4px 12px; } .liste summary .mono { grid-row: 2; justify-self: start; } .liste summary i { grid-row: 1; grid-column: 2; } }

/* ---------- Bon d'intervention ---------- */
.methode { background: var(--blanc); padding-block: 110px; position: relative; z-index: 2; }
.methode .cadre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.methode h2 { font-size: clamp(40px, 5.6vw, 88px); }
.methode .gauche p { margin-top: 24px; max-width: 34ch; color: var(--gris); }
.bon { background: var(--carbone); color: #1b2f63; border: 1.5px solid #1b2f63; padding: 28px 28px 32px; font-family: var(--f-tech); font-size: 14px; position: relative; transform: rotate(-1.2deg); box-shadow: 10px 12px 0 rgba(13,18,32,.12); }
.bon header { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1.5px solid #1b2f63; padding-bottom: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.bon header b { font-family: var(--f-affiche); font-weight: 900; font-stretch: 125%; font-size: 22px; text-transform: uppercase; letter-spacing: -.01em; }
.bon ol { list-style: none; padding: 0; margin: 0; counter-reset: l; }
.bon li { counter-increment: l; display: grid; grid-template-columns: 26px 34px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px dashed #1b2f63; align-items: start; }
.bon li::before { content: counter(l, decimal-leading-zero); padding-top: 2px; }
.bon .case { width: 22px; height: 22px; border: 1.5px solid #1b2f63; display: grid; place-items: center; font-size: 17px; line-height: 1; font-family: var(--f-texte); font-style: italic; }
.bon li strong { display: block; font-family: var(--f-affiche); font-weight: 800; font-stretch: 100%; text-transform: uppercase; font-size: 16px; margin-bottom: 4px; }
.bon li span.d { font-family: var(--f-texte); font-size: 17px; color: #2a3d70; }
.bon footer { display: flex; justify-content: space-between; margin-top: 20px; gap: 16px; flex-wrap: wrap; }
.tampon { position: absolute; right: 22px; bottom: 54px; border: 3px solid #b3261e; color: #b3261e; padding: 8px 14px; font-family: var(--f-affiche); font-weight: 900; font-stretch: 110%; text-transform: uppercase; font-size: 22px; line-height: 1; transform: rotate(-11deg); opacity: .85; mix-blend-mode: multiply; text-align: center; }
.tampon small { display: block; font-family: var(--f-tech); font-size: 10px; font-weight: 500; letter-spacing: .1em; margin-top: 4px; }
@media (max-width: 900px) { .methode { padding-block: 72px; } .methode .cadre { grid-template-columns: 1fr; } .bon { transform: none; padding: 20px 16px; } .tampon { right: 10px; bottom: 70px; font-size: 17px; } }

/* ---------- Zone ---------- */
.zone { background: var(--bleu); color: var(--blanc); padding-block: 110px; position: relative; z-index: 2; }
.zone .cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.zone h2 { font-size: clamp(30px, 4vw, 72px); }
.zone .cadre > *, .methode .cadre > *, .faq .cadre > *, .contact .bloc > * { min-width: 0; }
h2.affiche { overflow-wrap: break-word; }
.zone .texte p { margin-top: 24px; max-width: 42ch; }
.zone .texte p.mono { color: var(--jaune); }
.zone svg { width: 100%; height: auto; display: block; }
.zone svg .anneau { fill: none; stroke: rgba(244,243,238,.35); stroke-width: 1.2; stroke-dasharray: 3 5; }
.zone svg .anneau-txt { fill: rgba(244,243,238,.7); font-family: var(--f-tech); font-size: 10px; }
.zone svg .ville circle { fill: var(--blanc); }
.zone svg .ville text { fill: var(--blanc); font-family: var(--f-affiche); font-weight: 700; font-stretch: 75%; font-size: 15px; text-transform: uppercase; }
.zone svg .base circle { fill: var(--jaune); }
.zone svg .base text { fill: var(--jaune); font-family: var(--f-affiche); font-weight: 900; font-stretch: 100%; font-size: 17px; text-transform: uppercase; }
.zone svg .dep { fill: var(--jaune); font-family: var(--f-tech); font-size: 11px; letter-spacing: .12em; }
.zone figcaption { margin-top: 8px; font-family: var(--f-tech); font-size: 11px; color: rgba(244,243,238,.7); }
@media (max-width: 860px) { .zone { padding-block: 72px; } .zone .cadre { grid-template-columns: 1fr; } }

/* ---------- Preuves : tampons ---------- */
.preuves { padding-block: 110px; background: var(--blanc); position: relative; z-index: 2; }
.preuves h2 { font-size: clamp(40px, 6vw, 96px); max-width: 14ch; }
.preuves .sous { margin-top: 20px; color: var(--gris); max-width: 52ch; }
.tampons { margin-top: 64px; display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; }
.rond { width: 210px; height: 210px; border-radius: 50%; border: 3px solid var(--noir); display: grid; place-content: center; text-align: center; padding: 18px; position: relative; }
.rond::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px solid var(--noir); }
.rond b { font-family: var(--f-affiche); font-weight: 900; font-stretch: 125%; font-size: 46px; line-height: .9; }
.rond span { font-family: var(--f-tech); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; display: block; }
.rond:nth-child(1) { transform: rotate(-6deg); }
.rond:nth-child(2) { transform: rotate(4deg); background: var(--jaune); }
.rond:nth-child(3) { transform: rotate(-3deg); }
.rond:nth-child(4) { transform: rotate(7deg); background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.rond:nth-child(4)::before { border-color: var(--blanc); }
.rond a { font-family: var(--f-tech); font-size: 11px; margin-top: 6px; }
.preuves .legal { margin-top: 48px; font-family: var(--f-tech); font-size: 12px; color: var(--gris); max-width: 80ch; }
@media (max-width: 520px) { .rond { width: 160px; height: 160px; } .rond b { font-size: 34px; } .tampons { gap: 16px; justify-content: center; } }

/* ---------- FAQ ---------- */
.faq { padding-block: 0 110px; background: var(--blanc); position: relative; z-index: 2; }
.faq .cadre { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 48px; }
.faq h2 { font-size: clamp(36px, 4.6vw, 72px); }
.faq details { border-top: 2px solid var(--noir); }
.faq details:last-child { border-bottom: 2px solid var(--noir); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 48px 20px 0; position: relative; font-family: var(--f-affiche); font-weight: 800; font-stretch: 100%; font-size: 19px; text-transform: uppercase; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--jaune); font-size: 26px; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 22px; max-width: 60ch; color: var(--gris); }
@media (max-width: 860px) { .faq .cadre { grid-template-columns: 1fr; } }

/* ---------- Contact jaune ---------- */
.contact { background: var(--jaune); color: var(--noir); padding-block: 96px 80px; position: relative; z-index: 2; border-top: 3px solid var(--noir); }
.contact .appel { display: block; text-decoration: none; font-size: clamp(44px, 10.5vw, 176px); white-space: nowrap; margin-left: -.03em; user-select: all; }
.contact .appel:hover { color: var(--bleu); }
.contact .sous { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 16px; border-top: 3px solid var(--noir); padding-top: 16px; }
.contact .bloc { margin-top: 72px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.contact h2 { font-size: clamp(40px, 5vw, 80px); }
.contact .bloc p { margin-top: 18px; max-width: 34ch; }
form.devis { background: var(--blanc); border: 3px solid var(--noir); padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
form.devis .plein { grid-column: 1 / -1; }
form.devis label { display: grid; gap: 4px; font-family: var(--f-tech); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
form.devis input, form.devis select, form.devis textarea { font-family: var(--f-texte); font-size: 19px; padding: 8px 0; border: 0; border-bottom: 2px solid var(--noir); background: transparent; color: var(--noir); border-radius: 0; width: 100%; }
form.devis input:focus, form.devis select:focus, form.devis textarea:focus { outline: none; border-bottom-color: var(--bleu); background: rgba(212,163,115,.12); }
form.devis textarea { min-height: 96px; resize: vertical; }
form.devis .note { font-size: 15px; color: var(--gris); font-style: italic; }
form.devis .retour { font-family: var(--f-tech); font-size: 13px; }
@media (max-width: 860px) { .contact { padding-block: 72px; } .contact .bloc { grid-template-columns: 1fr; gap: 32px; } .contact .appel { white-space: normal; } }
@media (max-width: 520px) { form.devis { grid-template-columns: 1fr; padding: 20px; } }

/* ---------- Pied ---------- */
.pied { background: var(--noir); color: var(--blanc); padding-block: 56px 40px; position: relative; z-index: 2; }
.pied .cadre { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; font-size: 16px; }
.pied .marque { font-size: clamp(48px, 9vw, 140px); grid-column: 1 / -1; color: var(--jaune); margin-bottom: 24px; }
.pied ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.pied .mono { color: #9aa1b2; margin-bottom: 10px; display: block; }
.pied .legal { grid-column: 1 / -1; border-top: 1px solid rgba(244,243,238,.18); padding-top: 18px; font-family: var(--f-tech); font-size: 11px; color: #9aa1b2; letter-spacing: .03em; }
@media (max-width: 760px) { .pied .cadre { grid-template-columns: 1fr; } }

/* Bouton flottant devis */
.flottant { position: fixed; z-index: 30; right: calc(var(--d) + 4px); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 4px 4px 0 var(--noir); }

/* ---------- Page simple (mentions légales) ---------- */
.page-simple .barre { position: static; background: var(--bleu); }
.prose { max-width: 70ch; padding-block: 64px 96px; }
.prose h1 { font-size: clamp(44px, 7vw, 96px); margin-bottom: 32px; }
.prose h2 { font-family: var(--f-affiche); font-weight: 800; font-stretch: 100%; text-transform: uppercase; font-size: 22px; margin: 36px 0 10px; }
.prose p + p { margin-top: 10px; }
.prose .a-completer { background: var(--jaune); padding: 0 4px; }

/* ---------- Images et mouvement ---------- */
/* Hero : la vidéo est passée en bichromie bleue (niveaux de gris fondus en luminosité sur l'aplat bleu), comme une affiche imprimée. */
.hero .film { position: absolute; inset: 0 0 0 auto; width: 56%; background: var(--bleu); -webkit-mask-image: linear-gradient(to right, transparent, #000 38%); mask-image: linear-gradient(to right, transparent, #000 38%); }
.hero .film video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: luminosity; opacity: .85; }
.hero .film .rec { position: absolute; right: calc(var(--d) + 28px); bottom: 22px; color: var(--blanc); display: flex; align-items: center; gap: 8px; }
.hero .film .rec i { width: 9px; height: 9px; border-radius: 50%; background: #e5372c; animation: clignote 1.2s steps(2, jump-none) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.hero .cadre { z-index: 1; }
@media (max-width: 860px) {
  .hero .film { width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 55%); mask-image: linear-gradient(to bottom, transparent 10%, #000 55%); opacity: .7; }
  .hero .film .rec { display: none; }
}

/* Secteurs : chaque panneau a sa photo, découverte d'un coup de raclette puis en zoom lent continu. */
.panneau .cadre { position: relative; }
.panneau .num, .panneau h3, .panneau p, .panneau .picto { position: relative; z-index: 1; }
.panneau .photo { position: absolute; z-index: 0; margin: 0; right: var(--d); top: 70px; bottom: 40px; width: min(36%, 520px); overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.7,0,.3,1) .1s; }
.panneau .photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.6s cubic-bezier(.2,.7,.2,1) .1s; }
.panneau.vu .photo { clip-path: inset(0); }
.panneau.vu .photo img { transform: scale(1.04); animation: respire 18s ease-in-out 1.7s infinite alternate; }
@keyframes respire { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, 1.5%); } }
.panneau .picto { margin-right: -14px; margin-bottom: -14px; }
@media (max-width: 860px) {
  .panneau .photo { position: relative; right: auto; top: auto; bottom: auto; width: auto; height: 32vh; grid-column: 1 / -1; order: 0; }
  .panneau .picto { margin: 0; }
}

/* Interventions : la photo suit la souris au survol d'une ligne. */
.boulots .cadre { position: relative; }
.survol { position: fixed; left: 0; top: 0; width: 260px; height: 330px; object-fit: cover; pointer-events: none; z-index: 5; opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.85); transition: opacity .2s ease, transform .25s ease; border: 6px solid var(--blanc); }
.survol.on { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
@media (hover: none), (max-width: 860px) { .survol { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .panneau .photo, .panneau .photo img { transition: none; clip-path: none; transform: none; animation: none !important; }
  .hero .film .rec i { animation: none; }
}

/* Ligne de mots-clés sous les grands titres : lisible, discrète, utile au référencement. */
h2 .cle { display: block; margin-top: .9em; font-family: var(--f-tech); font-weight: 500; font-stretch: 100%; font-style: normal; font-size: 13px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; opacity: .75; max-width: 48ch; }
.note a, .legal a { color: inherit; text-decoration: underline; }

/* Blocs à déplier : le détail reste dans la page (lu par Google), mais replié. */
details.plus { margin-top: 28px; }
details.plus > summary { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-family: var(--f-tech); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; border: 2px solid currentColor; }
details.plus > summary::-webkit-details-marker { display: none; }
details.plus > summary::after { content: "+"; font-size: 18px; line-height: 1; }
details.plus[open] > summary::after { content: "−"; }
details.plus > summary:hover { background: var(--jaune); color: var(--noir); border-color: var(--jaune); }
details.plus[open] > *:not(summary) { margin-top: 20px; }
.manifeste details.plus .suite { margin-top: 20px; }

/* Baseline « by PLANETT » */
.logo .nom { display: flex; flex-direction: column; gap: 3px; }
.by { display: block; font-family: var(--f-tech); font-weight: 500; font-stretch: 100%; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; line-height: 1; opacity: .8; }
.pied .marque .by { font-size: clamp(12px, 1.4vw, 18px); margin-top: .6em; color: var(--papier, #f3efe6); opacity: .85; }
.tampon small { white-space: nowrap; }

/* Logo détouré, liseré blanc et halo intégrés à l'image : il ressort seul sur le bleu et le noir. */
.logo { background: none; padding: 0; margin-left: -6px; }
.logo img { display: block; height: 92px; width: auto; filter: drop-shadow(0 6px 14px rgba(13,18,32,.35)); transition: transform .25s ease; }
.logo:hover img { transform: rotate(-2deg) scale(1.03); }
.barre .cadre { padding-block: 10px; }
.pied .marque { color: inherit; font-size: inherit; position: relative; }
.pied .plaque { display: inline-block; position: relative; }
.pied .plaque::before { content: ""; position: absolute; inset: -30% -20%; background: radial-gradient(closest-side, rgba(18,48,110,.55), rgba(18,48,110,0)); z-index: 0; }
.pied .plaque picture, .pied .plaque img { position: relative; z-index: 1; }
.pied .plaque img { display: block; width: clamp(240px, 32vw, 460px); height: auto; }
@media (max-width: 760px) { .logo img { height: 70px; } }
.hero .cadre { padding-top: 150px; }
@media (max-width: 760px) { .hero .cadre { padding-top: 118px; } }

/* Logo héros : très grand à l'arrivée, il se replie dans une barre fixe dès qu'on fait défiler. */
.barre { position: fixed; transition: background .35s ease, box-shadow .35s ease; }
.barre .cadre { align-items: flex-start; padding-block: 18px; transition: padding .35s ease; }
.barre nav { padding-top: 14px; transition: padding .35s ease; }
.logo img { height: clamp(130px, 15vw, 240px); transition: height .45s cubic-bezier(.2,.7,.2,1), transform .25s ease; }
.barre.reduit { background: linear-gradient(to bottom, rgba(16,45,88,.96), rgba(18,48,110,.9)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(13,18,32,.25); }
.barre.reduit .cadre { align-items: center; padding-block: 6px; }
.barre.reduit nav { padding-top: 0; }
.barre.reduit .logo img { height: 66px; }
.hero .cadre { padding-top: calc(clamp(130px, 15vw, 240px) + 56px); }
@media (max-width: 760px) {
  .logo img { height: 112px; }
  .barre.reduit .logo img { height: 54px; }
  .hero .cadre { padding-top: 150px; }
}
.page-simple .barre { position: static; }
.page-simple .logo img { height: 84px; }
@media (prefers-reduced-motion: reduce) { .logo img, .barre, .barre .cadre { transition: none; } }
/* La barre fixe ne doit pas cacher le haut des panneaux empilés. */
.panneau .cadre { padding-top: 96px; }
.panneau .photo { top: 130px; }
@media (max-width: 860px) { .panneau .cadre { padding-top: 84px; } }
/* Le titre H1 reste pour Google mais n'est plus affiché : le slogan suit directement le logo. */
.hero .cadre { padding-top: calc(clamp(130px, 15vw, 240px) + 40px); }
@media (max-width: 760px) { .hero .cadre { padding-top: 140px; } }
/* « Comment ça se passe » sur une seule ligne, en tête de section, sans mot coupé. */
.methode .cadre > h2 { grid-column: 1 / -1; font-size: min(5.6vw, 88px); overflow-wrap: normal; margin-bottom: -16px; }
.methode .une-ligne { white-space: nowrap; }
@media (max-width: 760px) { .methode .cadre > h2 { font-size: 6vw; } }

/* Accent bronze champagne (repris du logo) : effet métal sur les grands mots. */
.hero .rot, .panneau.p-noir h3, .boulots h2 em { background: var(--bronze-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .rot::after { background: var(--blanc); }
.btn-jaune, .flottant { background: var(--bronze-degrade); }

/* ---------- Robots : un plan de sol vu du dessus, le robot trace son sillon propre ---------- */
.robots { background: var(--bleu); color: var(--blanc); padding-block: 110px; position: relative; z-index: 2; overflow: hidden; }
.robots::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60vw; height: 60vw; background: radial-gradient(closest-side, rgba(212,163,115,.18), rgba(212,163,115,0)); pointer-events: none; }
.robots .cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; position: relative; }
.robots .surtitre { color: var(--jaune); margin-bottom: 18px; }
.robots h2 { font-size: clamp(40px, 5.4vw, 86px); }
.robots h2 em { display: block; font-family: var(--f-texte); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; letter-spacing: 0; background: var(--bronze-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.robots .chapo { margin-top: 28px; max-width: 44ch; color: #d9dfec; }
.robots .defi { margin: 22px 0 30px; font-family: var(--f-tech); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; max-width: 44ch; line-height: 1.6; }
.robots .defi strong { color: var(--jaune); }
.robots details.plus p { max-width: 52ch; color: #d9dfec; font-size: 17px; }
.robots .plan { margin: 0; border: 1px solid rgba(244,243,238,.18); background: rgba(13,18,32,.35); box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: perspective(1400px) rotateX(18deg) rotateZ(-4deg); }
.robots .plan svg { display: block; width: 100%; height: auto; }
.robots .trace { stroke-dasharray: 3970; stroke-dashoffset: 3970; animation: sillon 18s linear infinite; }
@keyframes sillon { to { stroke-dashoffset: 0; } }
.robots .led { animation: clignote 1.4s steps(2, jump-none) infinite; }
.robots figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; color: rgba(244,243,238,.7); font-size: 11px; border-top: 1px solid rgba(244,243,238,.18); }
@media (max-width: 860px) {
  .robots { padding-block: 72px; }
  .robots .cadre { grid-template-columns: 1fr; gap: 40px; }
  .robots .plan { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .robots .trace { animation: none; stroke-dashoffset: 0; } }

/* Carte Aquitaine */
.zone svg .cote { fill: none; stroke: var(--jaune); stroke-width: 2; stroke-linejoin: round; opacity: .9; }
.zone svg .ocean { fill: rgba(244,243,238,.45); font-family: var(--f-tech); font-size: 11px; letter-spacing: .5em; }
.zone svg .ville text { font-size: 13px; }
.zone svg .ville.maj text { font-size: 16px; }
.zone svg .ville:not(.maj) circle { fill: rgba(244,243,238,.75); }
.zone svg { max-height: 760px; }

/* Accroche du haut plus discrète, le logo reste dominant */
.hero .slogan { font-size: clamp(30px, 5vw, 80px); }
.hero .bas { margin-top: 40px; }
.hero .cadre { padding-top: calc(clamp(130px, 15vw, 240px) + 80px); }
.hero .slogan .ligne + .ligne { margin-top: .18em; }
.hero .bas { margin-top: 64px; padding-top: 32px; }
@media (max-width: 760px) { .hero .cadre { padding-top: 170px; } .hero .bas { margin-top: 44px; padding-top: 24px; } }

/* ===== Affinage « élégant » (2026-11-01) : tailles réduites, graisses allégées, plus d'air ===== */
body { font-size: 17px; line-height: 1.6; }
.affiche { font-weight: 700; font-stretch: 100%; letter-spacing: .005em; line-height: .98; }
.etroit { font-weight: 600; font-stretch: 75%; line-height: .98; letter-spacing: .01em; }
.btn { padding: 12px 18px; font-size: 13px; font-weight: 700; font-stretch: 100%; letter-spacing: .06em; }

/* Logo un peu plus mesuré, toujours en vedette */
.logo img { height: clamp(104px, 10vw, 168px); }
.barre.reduit .logo img { height: 56px; }
.hero .cadre { padding-top: calc(clamp(104px, 10vw, 168px) + 64px); }
.barre .tel-haut { font-size: 15px; font-weight: 600; }

/* Hero */
.hero .slogan { font-size: clamp(26px, 3.6vw, 56px); }
.hero .bas p { font-size: 18px; }
.defile span { font-size: 20px; font-weight: 600; padding: 10px 0; letter-spacing: .04em; }
.defile span::after { font-size: 11px; margin: 0 20px; }

/* Titres de sections */
.manifeste p.gros { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.3; max-width: 34ch; }
.manifeste .suite { font-size: 16px; }
.secteurs-tete h2, .boulots h2, .methode h2, .preuves h2, .robots h2, .contact h2 { font-size: clamp(28px, 3.4vw, 50px); max-width: 22ch; }
.methode .cadre > h2 { font-size: clamp(28px, 3.4vw, 50px); margin-bottom: 0; }
.zone h2, .faq h2 { font-size: clamp(26px, 3vw, 44px); }
h2 .cle { font-size: 11px; }

/* Panneaux secteurs */
.panneau { min-height: 70vh; }
.panneau h3, .panneau h3.etroit { font-size: clamp(38px, 5.6vw, 92px); }
.panneau p { font-size: 17px; }

/* Interventions, méthode, preuves */
.liste h3 { font-size: clamp(20px, 2.2vw, 32px); }
.liste p { font-size: 16px; }
.liste li { padding-block: 16px; }
.bon { font-size: 13px; }
.bon header b { font-size: 18px; }
.bon li span.d { font-size: 15px; }
.rond b { font-size: 34px; }
.faq summary { font-size: 15px; font-weight: 600; padding-block: 16px; }

/* Contact et pied */
.contact .appel { font-size: clamp(34px, 5.4vw, 84px); }
form.devis input, form.devis select, form.devis textarea { font-size: 17px; }
.pied .cadre { font-size: 15px; }
.pied .plaque img { width: clamp(200px, 20vw, 300px); }

/* Respiration : sections un peu moins hautes mais aérées */
.manifeste, .boulots, .methode, .zone, .preuves, .robots { padding-block: 96px; }
.faq { padding-bottom: 96px; }
.contact { padding-block: 80px 72px; }

@media (max-width: 760px) {
  .logo img { height: 92px; }
  .barre.reduit .logo img { height: 48px; }
  .hero .cadre { padding-top: 150px; }
  .hero .slogan { font-size: 28px; }
  .panneau h3, .panneau h3.etroit { font-size: clamp(32px, 10vw, 48px); }
  .secteurs-tete h2, .boulots h2, .methode h2, .methode .cadre > h2, .preuves h2, .robots h2, .contact h2, .zone h2, .faq h2 { font-size: 26px; }
  .contact .appel { font-size: 34px; }
  .manifeste p.gros { font-size: 22px; }
  .manifeste, .boulots, .methode, .zone, .preuves, .robots, .contact { padding-block: 64px; }
  .faq { padding-bottom: 64px; }
}
.manifeste p.gros mark { font-weight: 700; font-stretch: 100%; font-size: .8em; }
/* Alignement sur les standards des sites haut de gamme actuels (texte 17 px, titres de section 40-50 px, grand titre ~60 px) */
.panneau h3, .panneau h3.etroit { font-size: clamp(34px, 4.2vw, 64px); }
.contact .appel { font-size: clamp(32px, 4vw, 60px); }
.hero .slogan { font-size: clamp(28px, 4vw, 60px); }
@media (max-width: 760px) { .panneau h3, .panneau h3.etroit { font-size: clamp(30px, 9vw, 40px); } .hero .slogan { font-size: 30px; } }
/* Téléphone : secteurs en colonne propre (en-tête, photo, titre, texte), sans chevauchement ni grand vide */
@media (max-width: 860px) {
  .panneau { position: relative; min-height: 0; }
  .panneau .cadre { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; gap: 18px 16px; padding-top: 88px; padding-bottom: 44px; }
  .panneau .num { grid-row: 1; grid-column: 1; flex-direction: column; justify-content: flex-start; gap: 6px; align-self: center; }
  .panneau .picto { grid-row: 1; grid-column: 2; width: 64px; height: 64px; align-self: center; }
  .panneau .photo { grid-row: 2; grid-column: 1 / -1; height: auto; aspect-ratio: 4 / 3; top: auto; bottom: auto; }
  .panneau h3, .panneau h3.etroit { grid-row: 3; grid-column: 1 / -1; align-self: start; margin-top: 6px; }
  .panneau p { grid-row: 4; grid-column: 1 / -1; align-self: start; max-width: none; }
}