/* Présentation et confort de lecture — septembre 2026.
   Les couleurs propres aux rubriques sont conservées dans la feuille principale. */
:root { --maxw: 1240px; --header-height: 128px; --brass-deep: #795b30; }
html { font-size: 100%; scroll-padding-top: calc(var(--header-height) + 24px); }
body { background: var(--paper); }
body::before { display: none; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 3px solid #a77d3e; outline-offset: 5px; }
.dark :focus-visible, .hero :focus-visible, .page-band :focus-visible { outline-color: #e8c995; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 300; padding: 12px 20px; background: #fff; color: var(--ink); transform: translateY(-180%); border: 2px solid var(--brass-deep); border-radius: 6px; }
.skip-link:focus { transform: none; }
main:focus, h1:focus { outline: none; }
.wrap { padding-inline: 40px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.reveal { opacity: 1; transform: none; }
.btn { min-height: 48px; border-radius: 6px; letter-spacing: .015em; }
.btn-primary { background: var(--brass-deep); border-color: var(--brass-deep); }
.btn[disabled] { opacity: .65; cursor: wait; }

/* Un en-tête compact, avec des coordonnées toujours accessibles. */
header.nav { background: #fcfaf6; box-shadow: 0 3px 24px #16202e0a; border-bottom: 1px solid var(--line); }
header.nav::after { height: 1px; }
.nav-inner { height: 86px; max-width: 1560px; margin: auto; padding: 8px 32px; gap: 22px; }
.brand { flex: 0 0 auto; }
.brand .monogram-solo { width: 44px; height: 66px; }
.brand .monogram-solo img { width: auto; height: 66px; }
nav.links { margin-left: 0; gap: clamp(12px, 1.4vw, 24px); }
nav.links a, nav.links .nav-drop-trigger { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: 0; }
nav.links .nav-drop-trigger { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--ink); padding: 14px 0; cursor: pointer; white-space: nowrap; }
nav.links > a:not(.btn) { padding: 14px 0; }
nav.links a.active, nav.links .nav-drop-trigger.active { color: var(--brass-deep); }
nav.links a.active::after { width: 100%; }
nav.links .btn-primary { color: #fff; font-family: var(--sans); font-size: .76rem; padding: 12px 16px; background: var(--brass-deep); border-color: var(--brass-deep); box-shadow: none; }
.nav-logo-reseau { height: 56px; }
.nav-logos-right { display: flex; }
.nav-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding: 0 32px; }
.nav-bottomline .nav-subline { min-height: 40px; padding: 8px 0; font-size: .97rem; font-weight: 500; letter-spacing: 0; text-shadow: none; text-align: left; flex: 1; }
.nav-bottomline .bcoord { padding: 0; gap: 24px; font-size: .75rem; color: var(--ink-soft); text-shadow: none; }
.bcoord a { min-height: 40px; }
.bcoord svg { width: 14px; height: 14px; }
.nav-drop-menu { margin-top: 0; min-width: 220px; border-radius: 8px; padding: 8px; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop-menu a { min-height: 44px; }
.nav-drop:hover .nav-drop-caret { transform: none; }
.nav-drop.open .nav-drop-caret { transform: rotate(180deg); }
.burger { border: 1px solid var(--line); border-radius: 6px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

/* Accueil : une lecture plus aérée, avec la photo animée choisie pour l'Étude (20/09/2026). */
.hero { padding: calc(var(--header-height) + 78px) 0 32px; min-height: 690px; background: #14232f url('hist-archives.jpg') center / cover; }
.hero-overlay { background: linear-gradient(90deg, rgba(13,26,37,.94), rgba(13,26,37,.75) 48%, rgba(13,26,37,.28)), linear-gradient(0deg,rgba(13,26,37,.6),transparent 60%); }
.hero-video-silhouettes { filter: blur(5px) brightness(.88) saturate(.75); }
.hero-kicker { display: flex; align-items: center; gap: 14px; color: #e4cba7; text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 700; margin-bottom: 24px; }
.hero-kicker::before { content: ''; width: 36px; height: 1px; background: #d4b27c; }
.hero h1 { font-size: clamp(3rem, 5.2vw, 4.7rem); line-height: 1.06; font-weight: 500; letter-spacing: -.025em; max-width: 850px; margin-bottom: 24px; }
.hero h1 em { color: #dfbe8b; }
/* Référencement (17/10/2026) : la petite ligne dorée « Notaire à Roanne » est désormais DANS le grand titre,
   pour que Google le lise. Ces deux règles lui gardent exactement son apparence d'avant. */
.hero h1 .hero-kicker { font-family: var(--sans); line-height: 1.65; text-align: left; }
.hero h1 .hero-slogan { display: block; }
.hero .lead { max-width: 550px; font-size: 1.03rem; line-height: 1.85; margin-bottom: 30px; color: #e3e7eb; }
.hero-cta { margin-bottom: 48px; gap: 12px; }
.hero .btn-primary { padding: 15px 23px; font-size: .8rem; }
.hero .btn-light { font-size: .8rem; border-color: #ffffff66; background: #ffffff06; }
.hero-details { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid #ffffff30; padding-top: 22px; color: #e0e5e8; font-size: .76rem; }
.hero-location { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hero-location strong { color: #e4cba7; font-weight: 600; }
.video-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 12px; color: #fff; font-size: .72rem; background: #10243166; border: 1px solid #ffffff55; border-radius: 5px; cursor: pointer; }
.video-toggle[hidden] { display: none; }
.video-toggle svg { width: 14px; height: 14px; }
.help { padding: 0 0 88px; background: var(--paper); }
.presentation { padding: 62px 20px 48px; max-width: 850px; }
.presentation-plume { height: 62px; width: 44px; margin-bottom: 20px; }
.presentation-eyebrow { font-size: .67rem; letter-spacing: .23em; }
.presentation-nom { font-size: clamp(2.1rem, 3.5vw, 3rem); font-weight: 500; line-height: 1.12; }
.presentation-sub { font-family: var(--sans); font-size: .8rem; line-height: 1.7; color: #5b6169; }
.help-panel { margin: 0; padding: 36px 0 0; border-top: 1px solid var(--line); }
.help-head { margin-bottom: 26px; }
.help-head h2 { font-size: 2rem; font-weight: 500; }
.help-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.help-card { text-align: left; padding: 26px 24px 30px; border: 1px solid var(--line); background: #fff; border-radius: 8px; min-height: 206px; }
.help-card::before { display: none; }
.help-card::after { content: '↗'; position: absolute; right: 20px; top: 22px; color: #87765b; font-size: 1.1rem; }
.help-card .ic { width: 42px; height: 42px; border: none; border-radius: 6px; background: #f5efe5; color: var(--brass-deep); margin: 0 0 20px; animation: none; }
.help-card .ic svg { width: 23px; height: 23px; }
.help-card .hct { font-size: 1.5rem; line-height: 1.2; }
.help-card .hcs { font-size: .8rem; line-height: 1.65; margin-top: 8px; color: #545f6b; }
.help-card:hover { transform: translateY(-3px); background: #f8f4ed; border-color: #baa27e; box-shadow: 0 10px 24px #16202e08; }
.help-card:hover .hct { color: var(--ink); }
.help-card:hover .hcs { color: #33445a; }
.help-card:hover .ic { transform: none; background: #eee3d2; color: var(--brass-deep); }
.help-card:hover .ic::after, .help-card:hover .ic svg * { animation: none; }
.help-card.accent { background: #193444; border-color: #193444; }
.help-card.accent .hct { color: #fff; }
.help-card.accent .hcs { color: #dde4e9; }
.help-card.accent .ic { background: #ffffff12; color: #e4cba7; }
.help-card.accent::after { color: #e4cba7; }

/* Rubriques, documents et formulaire. */
.sec { padding: 76px 0; }
.sec-head h2 { line-height: 1.15; }
.page-band { padding-bottom: 40px; }
.page-band h1 { font-size: clamp(2.5rem, 4.8vw, 3.6rem); font-weight: 500; }
.page-band .pb-sub { line-height: 1.6; }
.page-band.reveal-band { animation: none; }
.promo-pill { letter-spacing: .03em; }
.expertise, .expertise.rev { gap: 44px; }
.outil-card, .res-link, .fam-pillar, .etude-aside, .domain-photo, .news-card { border-radius: 8px; }
.domain-photo { box-shadow: none; }
.domain-photo img, .ex-photo img, .aside-photo img, .news-top img { filter: saturate(.95); }
.rdv-grid { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 55px #16202e08; }
.rdv-info { background: #193444; }
.rdv-form { background: #fff; }
.field label { font-size: .72rem; letter-spacing: .035em; }
.field input, .field select, .field textarea { background: #fcfaf6; border-radius: 5px; min-height: 48px; font-size: 1rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brass-deep); outline-offset: 2px; }
.f-aide, .f-rgpd, .form-note { font-size: .8rem; opacity: 1; line-height: 1.7; }
.f-rgpd a { text-decoration: underline; text-underline-offset: 3px; }
.ci a:hover { text-decoration: underline; text-underline-offset: 4px; }
.map { height: auto; min-height: 230px; background: #f0ebe1; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.map-placeholder { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 40px 24px; }
.map-placeholder p { max-width: 480px; font-size: .86rem; color: var(--ink-soft); text-align: center; }
.map-placeholder a { text-decoration: underline; text-underline-offset: 4px; font-size: .8rem; }
.map iframe { display: block; height: 350px; width: 100%; border: 0; }
.cta-band { padding: 60px 0; }
.cta-band h2 { font-weight: 500; max-width: 24em; }
footer { padding-top: 30px; }
.foot-signature { padding: 14px 30px; margin-bottom: 24px; }
.foot-signature .fs-plume { height: 90px; }
.foot-signature .fs-notaires { height: 76px; }
.foot-links a { padding-block: 5px; display: inline-block; }

@media (max-width: 1200px) {
  .nav-inner { gap: 16px; padding-inline: 24px; }
  .nav-logos-right { display: none; }
  nav.links { gap: 16px; }
}
@media (max-width: 1120px) {
  :root { --header-height: 115px; }
  .nav-inner { height: 72px; min-height: 72px; justify-content: space-between; }
  .brand { flex: 1; }
  .brand .monogram-solo, .brand .monogram-solo img { height: 54px; }
  .nav-logos-right { display: flex; margin-right: 16px; }
  .nav-logo-reseau { height: 43px; }
  .nav-bottomline { padding-inline: 24px; }
  .nav-bottomline .nav-subline { display: none; }
  .nav-bottomline .bcoord { width: 100%; justify-content: center; gap: 24px; font-size: .76rem; }
  .burger { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 8px; gap: 5px; }
  nav.links { position: absolute; inset: auto 0 auto 0; top: 100%; margin: 0; display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 16px 24px 24px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; transform: none; visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
  nav.links { justify-content: flex-start; }
  nav.links > * { flex-shrink: 0; }
  nav.links.open { transform: none; visibility: visible; opacity: 1; pointer-events: auto; }
  nav.links a, nav.links .nav-drop-trigger { width: 100%; font-size: .95rem; min-height: 48px; display: flex; padding: 12px 0; border-bottom: 1px solid var(--line); }
  nav.links .btn-primary { margin-top: 16px; justify-content: center; }
  .nav-drop { flex-direction: column; align-items: stretch; }
  .nav-drop-trigger { justify-content: space-between; }
  .nav-drop-menu { position: static; padding: 0 0 0 18px; margin: 0; min-width: 0; width: 100%; max-height: none; box-shadow: none; border: none; background: transparent; display: none; }
  .nav-drop.open .nav-drop-menu { display: block; max-height: none; }
  .nav-drop-menu a { font-size: .85rem; }
  .hero { min-height: 650px; padding-top: calc(var(--header-height) + 60px); }
  .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .wrap { padding-inline: max(22px, env(safe-area-inset-left)); }
  .nav-inner, .nav-bottomline { padding-inline: 20px; }
  .nav-bottomline .bcoord { gap: 14px; font-size: .7rem; }
  .bcoord svg { width: 12px; height: 12px; }
  .hero { min-height: 0; padding-top: calc(var(--header-height) + 42px); padding-bottom: 24px; }
  .hero-kicker { font-size: .63rem; letter-spacing: .15em; margin-bottom: 22px; gap: 10px; }
  .hero-kicker::before { width: 22px; }
  .hero h1 { font-size: clamp(2.55rem, 9.6vw, 3.6rem); line-height: 1.08; margin-bottom: 24px; }
  .hero h1 br { display: none; }
  .hero .lead { font-size: .95rem; line-height: 1.8; margin-bottom: 26px; }
  .hero-cta { gap: 10px; margin-bottom: 32px; }
  .hero-cta .btn { width: 100%; min-height: 50px; }
  .hero-details { align-items: flex-start; font-size: .7rem; gap: 18px; }
  .hero-location { flex-direction: column; gap: 5px; }
  .video-toggle { font-size: .68rem; }
  .presentation { padding: 42px 0 34px; }
  .presentation-nom { font-size: 2.1rem; }
  .presentation-eyebrow { font-size: .62rem; }
  .presentation-sub { font-size: .76rem; text-align: center; }
  .help { padding-bottom: 48px; }
  .help-panel { padding: 28px 0 0; }
  .help-head h2 { font-size: 1.8rem; }
  .help-grid { gap: 12px; }
  .help-card { padding: 20px 16px; min-height: 190px; }
  .help-card .hct { font-size: 1.25rem; }
  .help-card .hcs { font-size: .75rem; }
  .help-card::after { top: 17px; right: 14px; }
  .help-card .ic { margin-bottom: 16px; }
  .sec { padding: 48px 0; }
  .sec-head { margin-bottom: 28px; }
  .sec-head h2 { font-size: 2rem; }
  .sec-head p { font-size: .96rem; }
  .page-band { padding-bottom: 30px; }
  .page-band .promo-pills { gap: 6px; }
  .page-band .promo-pill { font-size: .65rem; }
  .rdv-info, .rdv-form { padding: 28px 22px; }
  .rdv-grid { gap: 0; }
  .era-head { flex-wrap: wrap; gap: 8px; }
  .era-head .ribbon { white-space: normal; max-width: 100%; }
  .era-head .era-span { flex-basis: 100%; }
  .era-head .era-line { display: none; }
  .frow { grid-template-columns: 1fr; }
  .cta-band { padding: 44px 0; }
  .cta-band h2 { font-size: 2rem; }
}
@media (max-width: 360px) {
  .nav-bottomline .bcoord { gap: 10px; font-size: .66rem; }
  .help-grid { grid-template-columns: 1fr; }
  .help-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}