/* =========================================================
   VL Finance — Expert-comptable à Poitiers
   Feuille de style principale
   ========================================================= */

:root {
  --petrole: #123C4A;
  --petrole-fonce: #0C2A34;
  --petrole-clair: #2B6D7E;
  --laiton: #B58B3C;
  --laiton-fonce: #8F6C2B;
  --eau: #E3EEEA;
  --eau-claire: #F3F7F5;
  --encre: #1B2A30;
  --gris: #5A6E75;
  --ligne: #D3DFDA;
  --blanc: #FFFFFF;
  --erreur: #B3341F;
  --succes: #1F7A4D;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --mesure: 62ch;
  --conteneur: 1180px;
  --rayon: 14px;
  --rayon-petit: 8px;
  --ombre: 0 18px 40px -20px rgba(18, 60, 74, 0.35);
  --transition: 180ms ease;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--petrole);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; max-width: var(--mesure); }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

a { color: var(--petrole-clair); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrole); }

:focus-visible {
  outline: 3px solid var(--laiton);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--petrole); color: var(--blanc);
  padding: 0.6rem 1rem; border-radius: var(--rayon-petit);
  z-index: 1000; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.conteneur {
  width: min(100% - 2.5rem, var(--conteneur));
  margin-inline: auto;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--laiton); color: var(--blanc); border-color: var(--laiton); }
.btn-principal:hover { background: var(--laiton-fonce); border-color: var(--laiton-fonce); color: var(--blanc); }
.btn-secondaire { background: transparent; color: var(--petrole); border-color: var(--petrole); }
.btn-secondaire:hover { background: var(--petrole); color: var(--blanc); }
.btn-clair { background: var(--blanc); color: var(--petrole); border-color: var(--blanc); }
.btn-clair:hover { background: var(--eau); border-color: var(--eau); color: var(--petrole); }
.btn svg { width: 18px; height: 18px; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ligne);
}
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 78px;
}
.marque { display: inline-flex; align-items: center; text-decoration: none; }
.marque img { height: 52px; width: auto; }

.nav-principale { display: flex; align-items: center; gap: 1.75rem; }
.nav-principale ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.5rem;
}
.nav-principale li { margin: 0; }
.nav-principale a:not(.btn) {
  color: var(--encre); text-decoration: none; font-weight: 600; font-size: 0.98rem;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav-principale a:not(.btn):hover,
.nav-principale a[aria-current="page"] { color: var(--petrole); border-bottom-color: var(--laiton); }

.nav-bascule {
  display: none;
  background: none; border: 2px solid var(--petrole); border-radius: var(--rayon-petit);
  width: 46px; height: 42px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-bascule span {
  display: block; width: 22px; height: 2px; background: var(--petrole);
  position: relative; transition: transform var(--transition), background var(--transition);
}
.nav-bascule span::before, .nav-bascule span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--petrole);
  transition: transform var(--transition), top var(--transition);
}
.nav-bascule span::before { top: -7px; }
.nav-bascule span::after { top: 7px; }
.nav-bascule[aria-expanded="true"] span { background: transparent; }
.nav-bascule[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-bascule[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Héros ---------- */
.heros {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    linear-gradient(180deg, var(--eau-claire) 0%, var(--blanc) 100%);
  overflow: hidden;
}
.heros::before {
  /* Colonne réglée, comme la marge d'un grand livre */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - var(--conteneur) / 2 - 2.2rem);
  width: 2px; background: linear-gradient(180deg, var(--laiton) 0%, rgba(181, 139, 60, 0) 100%);
  opacity: 0.6;
}
.heros .conteneur {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.heros-texte .surtitre {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--laiton-fonce); font-weight: 700; margin-bottom: 1.25rem; font-size: 0.95rem;
}
.heros-texte .surtitre::before {
  content: ""; width: 28px; height: 2px; background: var(--laiton);
}
.heros-texte h1 { margin-bottom: 1rem; }
.heros-texte h1 em { font-style: italic; font-weight: 500; }
.heros-texte .accroche { font-size: 1.2rem; color: var(--gris); max-width: 52ch; margin-bottom: 2rem; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.25rem; }
.heros-garanties {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; list-style: none; padding: 0; margin: 0;
  font-size: 0.95rem; color: var(--gris);
}
.heros-garanties li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.heros-garanties svg { width: 20px; height: 20px; color: var(--petrole-clair); flex-shrink: 0; }
.heros-visuel img { width: 100%; max-width: 620px; margin-inline: auto; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-eau { background: var(--eau-claire); }
.section-petrole { background: var(--petrole); color: var(--blanc); }
.section-petrole h2, .section-petrole h3 { color: var(--blanc); }
.section-petrole p { color: rgba(255,255,255,0.85); }

.entete-section { max-width: 64ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.entete-section .intro { font-size: 1.15rem; color: var(--gris); }
.section-petrole .entete-section .intro { color: rgba(255,255,255,0.8); }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section.centre p { margin-inline: auto; }

/* ---------- Clients (pour qui) ---------- */
.clients {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
  list-style: none; padding: 0; margin: 0;
}
.clients li {
  margin: 0; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.clients svg { width: 34px; height: 34px; color: var(--laiton); }
.clients strong { font-family: var(--serif); font-size: 1.15rem; color: var(--petrole); font-weight: 600; }
.clients span { font-size: 0.95rem; color: var(--gris); line-height: 1.45; }

/* ---------- Services (liste réglée comme un grand livre) ---------- */
.services { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ligne); }
.services li {
  margin: 0; display: grid; grid-template-columns: 56px 1fr 1.3fr; gap: 1.5rem; align-items: start;
  padding: 1.75rem 0; border-bottom: 1px solid var(--ligne);
}
.services .service-icone {
  width: 56px; height: 56px; border-radius: 14px; background: var(--eau);
  display: grid; place-items: center; color: var(--petrole);
}
.services .service-icone svg { width: 28px; height: 28px; }
.services h3 { margin-bottom: 0.25rem; }
.services .service-sous { color: var(--laiton-fonce); font-weight: 600; font-size: 0.95rem; margin: 0; }
.services p { margin: 0; color: var(--gris); }
.services .service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.services .service-tags span {
  font-size: 0.82rem; font-weight: 600; color: var(--petrole);
  background: var(--eau-claire); border: 1px solid var(--ligne); border-radius: 999px; padding: 0.2rem 0.65rem;
}

/* ---------- Cabinet ---------- */
.cabinet .conteneur {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.cabinet-visuel img { width: 100%; max-width: 560px; margin-inline: auto; }
.engagements { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.engagements li { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; margin: 0; align-items: start; }
.engagements .puce {
  width: 40px; height: 40px; border-radius: 50%; background: var(--eau); color: var(--petrole);
  display: grid; place-items: center;
}
.engagements .puce svg { width: 20px; height: 20px; }
.engagements strong { display: block; color: var(--petrole); font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.engagements p { margin: 0.15rem 0 0; color: var(--gris); font-size: 0.98rem; }

.citation {
  margin: 2rem 0 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--laiton);
  background: var(--eau-claire); border-radius: 0 var(--rayon) var(--rayon) 0;
}
.citation p { font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--petrole); margin: 0 0 0.5rem; }
.citation cite { font-style: normal; font-size: 0.95rem; color: var(--gris); }

/* ---------- Étapes ---------- */
.etapes {
  list-style: none; padding: 0; margin: 0; counter-reset: etape;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.etapes li { margin: 0; position: relative; padding-top: 1rem; counter-increment: etape; }
.etapes li::before {
  content: counter(etape);
  font-family: var(--serif); font-size: 2.4rem; font-weight: 600; line-height: 1;
  color: var(--laiton); display: block; margin-bottom: 0.75rem;
}
.etapes li::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.25);
}
.etapes h3 { color: var(--blanc); font-size: 1.2rem; }
.etapes p { color: rgba(255,255,255,0.8); font-size: 0.98rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq details:first-of-type { border-top: 1px solid var(--ligne); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--petrole);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--laiton); border-bottom: 2px solid var(--laiton);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--transition);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { color: var(--gris); padding-bottom: 1.15rem; margin: 0; }

/* ---------- Bandeau d'appel ---------- */
.appel {
  background: var(--petrole-fonce) url("../images/motif-grand-livre.svg") repeat;
  color: var(--blanc); padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.appel .conteneur { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.appel h2 { color: var(--blanc); margin-bottom: 0.5rem; }
.appel p { color: rgba(255,255,255,0.85); margin: 0; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: flex-end; }

/* ---------- Pied de page ---------- */
.pied { background: var(--petrole); color: rgba(255,255,255,0.85); padding: 3.5rem 0 1.5rem; font-size: 0.95rem; }
.pied a { color: var(--blanc); }
.pied a:hover { color: var(--eau); }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.pied h3 { color: var(--blanc); font-size: 1.05rem; margin-bottom: 0.9rem; font-family: var(--sans); font-weight: 700; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.5rem; }
.pied ul a { text-decoration: none; }
.pied ul a:hover { text-decoration: underline; }
.pied .marque img { height: 44px; margin-bottom: 1rem; }
.pied address { font-style: normal; line-height: 1.6; }
.pied-bas {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
}
.pied-bas ul { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.pied-bas li { margin: 0; }

/* ---------- Pages internes ---------- */
.bandeau-page { background: var(--eau-claire); padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--ligne); }
.bandeau-page h1 { margin-bottom: 0.4rem; font-size: clamp(2rem, 4vw, 3rem); }
.bandeau-page p { color: var(--gris); font-size: 1.1rem; margin: 0; }
.fil-ariane { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 0.5rem; font-size: 0.9rem; color: var(--gris); }
.fil-ariane li { margin: 0; }
.fil-ariane li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ligne); }
.fil-ariane a { color: var(--gris); text-decoration: none; }
.fil-ariane a:hover { color: var(--petrole); text-decoration: underline; }

.contenu-juridique > * { max-width: 760px; }
.contenu-juridique h2 { font-size: 1.55rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ligne); }
.contenu-juridique h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.contenu-juridique h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.contenu-juridique p, .contenu-juridique li { color: var(--encre); }
.contenu-juridique .note { color: var(--gris); font-size: 0.95rem; }
.contenu-juridique .maj { color: var(--gris); font-size: 0.9rem; margin-bottom: 2rem; }

.fiche { border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; margin: 1.25rem 0 1.5rem; }
.fiche dl { display: grid; grid-template-columns: 220px 1fr; margin: 0; }
.fiche dt, .fiche dd { margin: 0; padding: 0.7rem 1rem; border-bottom: 1px solid var(--ligne); }
.fiche dt { background: var(--eau-claire); font-weight: 700; color: var(--petrole); font-size: 0.95rem; }
.fiche dl > :nth-last-child(-n+2) { border-bottom: 0; }

.tableau-defilant { overflow-x: auto; margin: 1.25rem 0 1.5rem; }
table.donnees { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.95rem; }
table.donnees th, table.donnees td { text-align: left; padding: 0.7rem 0.9rem; border: 1px solid var(--ligne); vertical-align: top; }
table.donnees th { background: var(--eau-claire); color: var(--petrole); }

/* ---------- Page contact ---------- */
.contact-grille { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--ombre); }
.carte h2 { font-size: 1.6rem; }

.formulaire { display: grid; gap: 1.1rem; }
.formulaire .ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.champ { display: grid; gap: 0.35rem; }
.champ label { font-weight: 700; font-size: 0.95rem; color: var(--petrole); }
.champ label .facultatif { font-weight: 500; color: var(--gris); }
.champ input, .champ select, .champ textarea {
  font: inherit; width: 100%; padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--ligne); border-radius: var(--rayon-petit); background: var(--blanc); color: var(--encre);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--petrole-clair); box-shadow: 0 0 0 3px rgba(43, 109, 126, 0.18);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-color: var(--erreur); }
.champ .aide { font-size: 0.85rem; color: var(--gris); }
.champ .message-erreur { font-size: 0.88rem; color: var(--erreur); display: none; }
.champ.invalide .message-erreur { display: block; }
.consentement { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; align-items: start; font-size: 0.92rem; color: var(--gris); }
.consentement input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--petrole); }
.consentement.invalide { color: var(--erreur); }
.piege { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.formulaire-retour { border-radius: var(--rayon-petit); padding: 0.9rem 1.1rem; font-weight: 600; display: none; }
.formulaire-retour.succes { display: block; background: #E6F4EC; color: var(--succes); border: 1px solid #BFE1CC; }
.formulaire-retour.echec { display: block; background: #FBE9E5; color: var(--erreur); border: 1px solid #F1C4BA; }

.infos-contact { display: grid; gap: 1.5rem; }
.bloc-info { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.bloc-info .puce {
  width: 44px; height: 44px; border-radius: 12px; background: var(--eau); color: var(--petrole); display: grid; place-items: center;
}
.bloc-info .puce svg { width: 22px; height: 22px; }
.bloc-info h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.bloc-info p, .bloc-info address { margin: 0; color: var(--gris); font-style: normal; }
.bloc-info a { color: var(--petrole); font-weight: 600; }

.horaires { width: 100%; border-collapse: collapse; margin-top: 0.4rem; font-size: 0.98rem; }
.horaires td { padding: 0.35rem 0; border-bottom: 1px dashed var(--ligne); color: var(--gris); }
.horaires td:first-child { font-weight: 600; color: var(--encre); width: 42%; }
.horaires tr:last-child td { border-bottom: 0; }

.plan { margin-top: clamp(2.5rem, 5vw, 4rem); }
.plan-cadre {
  position: relative; display: grid; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--ligne);
  background: var(--eau); min-height: 320px;
}
.plan-cadre.charge { aspect-ratio: 16 / 7; }
.plan-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan-attente {
  grid-area: 1 / 1; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  background: var(--eau);
}
.plan-attente > div { max-width: 100%; }
.plan-attente img { width: min(100%, 300px); margin: 0 auto 1rem; }
.plan-attente p { color: var(--gris); font-size: 0.95rem; margin: 0 auto 1rem; max-width: min(46ch, 100%); }
.plan-cadre.charge .plan-attente { display: none; }
.plan-liens { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1rem; font-size: 0.95rem; }

/* ---------- Animation d'entrée du héros (une seule, discrète) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .heros-texte > * { animation: apparition 600ms ease both; }
  .heros-texte > *:nth-child(2) { animation-delay: 80ms; }
  .heros-texte > *:nth-child(3) { animation-delay: 160ms; }
  .heros-texte > *:nth-child(4) { animation-delay: 240ms; }
  .heros-texte > *:nth-child(5) { animation-delay: 320ms; }
  .heros-visuel { animation: apparition 800ms ease 200ms both; }
  @keyframes apparition {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .clients { grid-template-columns: repeat(3, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .heros .conteneur { grid-template-columns: 1fr; }
  .heros-visuel { order: -1; }
  .heros-visuel img { max-width: 440px; }
  .heros::before { display: none; }
  .cabinet .conteneur { grid-template-columns: 1fr; }
  .cabinet-visuel { order: -1; }
  .cabinet-visuel img { max-width: 440px; }
  .services li { grid-template-columns: 48px 1fr; }
  .services li > p { grid-column: 2; }
  .services .service-icone { width: 48px; height: 48px; }
  .appel .conteneur { grid-template-columns: 1fr; }
  .appel-actions { justify-content: flex-start; }
  .contact-grille { grid-template-columns: 1fr; }

  /* Navigation mobile */
  .nav-bascule { display: inline-flex; }
  .nav-principale {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanc); border-bottom: 1px solid var(--ligne);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem 1.25rem 1.25rem;
    display: none;
    box-shadow: var(--ombre);
  }
  .nav-principale.ouverte { display: flex; }
  .nav-principale ul { flex-direction: column; gap: 0; }
  .nav-principale li { border-bottom: 1px solid var(--ligne); }
  .nav-principale a:not(.btn) { display: block; padding: 0.9rem 0; border-bottom: 0; font-size: 1.05rem; }
  .nav-principale .btn { margin-top: 1rem; justify-content: center; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .conteneur { width: min(100% - 2rem, var(--conteneur)); }
  .entete .conteneur { min-height: 68px; }
  .marque img { height: 40px; }
  .clients { grid-template-columns: 1fr 1fr; }
  .clients li { padding: 1.15rem 1rem; }
  .etapes { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; gap: 1.75rem; }
  .formulaire .ligne { grid-template-columns: 1fr; }
  .fiche dl { grid-template-columns: 1fr; }
  .fiche dt { border-bottom: 0; padding-bottom: 0.2rem; }
  .fiche dl > :nth-last-child(-n+2) { border-bottom: 1px solid var(--ligne); }
  .fiche dl > dd:last-child { border-bottom: 0; }
  .heros-actions .btn, .appel-actions .btn { width: 100%; justify-content: center; }
  .plan-cadre.charge { aspect-ratio: 4 / 3; }
  .plan-attente img { width: min(100%, 200px); margin-bottom: 0.5rem; }
}

@media (max-width: 400px) {
  .clients { grid-template-columns: 1fr; }
}

/* ---------- Impression ---------- */
@media print {
  .entete, .pied, .appel, .nav-bascule, .heros-visuel, .plan { display: none; }
  body { color: #000; }
  a { color: #000; text-decoration: none; }
}