/* ==========================================================================
   JustiComm · page « Notaires » (/professions/notaires/)
   v1, 25/10/2026 : texte v3.1 validé par Raoudha (« Oui, la v3.1 est validée. Construis la page Notaires. »).
   Même esprit que les pages Avocats et Commissaires de justice, déjà validées : bandeau photo bord à bord avec
   un téléphone animé posé dessus, sections claires et sombres en alternance, vrais écrans (site, Google,
   fiche pratique, appel), extrait d'audit, carte de France, appel final sur photo.
   L'office fictif « Ormelune » (ormelune.notaires.fr) garde sa propre identité : prune, olive, brume,
   Georgia et police système, jamais les couleurs ni les polices de JustiComm.
   Aucune publicité payante montrée : elle est interdite aux notaires (RPN, art. 14.2).
   Animations courtes, jouées une fois ; état final fixe avec « moins d'animations » ou sans JavaScript.
   Préfixe : not-
   ========================================================================== */

.not {
  --om-prune: #4A2D4E;      /* office fictif : prune, 11,6:1 sur blanc */
  --om-olive: #56662A;      /* office fictif : olive, 6,1:1 sur blanc */
  --om-brume: #F4F1F5;
  --om-filet: #DED6E0;
  --om-gris: #55505A;       /* 7,8:1 sur blanc */
  --f-om-titre: Georgia, "Times New Roman", serif;
  --f-om: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
.not.section { padding-block: clamp(3rem, 1.8rem + 3.6vw, 5rem); }
.not .titre-section { max-width: none; font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.375rem); line-height: 1.12; color: var(--titre); text-wrap: pretty; }
.not h3 { text-wrap: pretty; }
.not-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .not-or, .surface-nuit .not-or { color: var(--or-clair); }
.not-tete { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.not-tete .surtitre { margin-bottom: var(--e-4); }
.not-chapo { margin-top: var(--e-4); max-width: none; font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.45 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.surface-nuit .not-chapo, .surface-sombre .not-chapo { color: var(--creme); }
.not-texte { max-width: none; font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.not-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.not .btn-plaque.btn--grand { max-width: 100%; }

.not .lien-suite.not-lien { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; color: var(--petrole); text-decoration: underline; text-decoration-color: var(--or-400); text-underline-offset: 5px; }
.not .lien-suite.not-lien:hover { color: var(--or-texte); }
.surface-nuit .lien-suite.not-lien, .surface-sombre .lien-suite.not-lien { color: var(--or-clair); text-decoration-color: rgba(224, 189, 142, 0.5); }
.surface-nuit .lien-suite.not-lien:hover, .surface-sombre .lien-suite.not-lien:hover { color: var(--creme); }
.not-liens { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: var(--e-5) 0 0; }

/* Relances : un bouton après chaque section forte, puis le téléphone et WhatsApp */
.not-relance { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); margin-top: clamp(2.25rem, 4.5vw, 3.25rem); text-align: center; }
.not-joindre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.75rem; margin: 0; font-size: 1rem; color: var(--taupe); }
.not-joindre--gauche { justify-content: flex-start; margin-top: var(--e-5); }
.not-joindre a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.55rem 1.1rem; border: 1px solid var(--or-400); border-radius: 999px; font-weight: 500; color: var(--petrole); text-decoration: none; transition: background-color var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie); }
.not-joindre a:hover, .not-joindre a:focus-visible { background: var(--petrole); color: var(--or-clair); }
.not-joindre svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.surface-nuit .not-joindre, .surface-sombre .not-joindre { color: var(--creme-doux); }
.surface-nuit .not-joindre a, .surface-sombre .not-joindre a { border-color: rgba(224, 189, 142, 0.55); color: var(--creme); }
.surface-nuit .not-joindre a:hover, .surface-sombre .not-joindre a:hover, .surface-nuit .not-joindre a:focus-visible, .surface-sombre .not-joindre a:focus-visible { background: var(--or); color: var(--petrole-profond); }

/* Photos (ChatGPT, 25/10/2026) */
.not-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@keyframes not-monte { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes not-glisse { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes not-pastille { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes not-frappe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes not-deroule { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes not-anneau { 0% { box-shadow: 0 0 0 2px var(--or), 0 0 0 0 rgba(224, 189, 142, 0.7); } 100% { box-shadow: 0 0 0 2px var(--or), 0 0 0 16px rgba(224, 189, 142, 0); } }
@keyframes not-onde { 0%, 100% { scale: 1 0.35; } 50% { scale: 1 1; } }
@keyframes not-barre { from { width: 0; } to { width: var(--l); } }

/* --------------------------------------------------------------------------
   1. Premier écran : bandeau photo bord à bord, téléphone animé posé dessus
   (la recherche, la page « Préparer une succession » dont les pièces se cochent, la demande envoyée)
   -------------------------------------------------------------------------- */
body:has(.not-haut) .entete__fond { opacity: 1; }
.not-haut { position: relative; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
.not-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding-block: 0.9rem; font-size: 0.875rem; color: var(--taupe); }
.not-ariane a { color: inherit; text-underline-offset: 3px; }
.not-ariane [aria-current] { color: var(--encre); }

.not-haut__bandeau { position: relative; width: 100%; overflow: hidden; aspect-ratio: 1920 / 860; max-height: 46rem; background: var(--petrole-900); }
.not-haut__bandeau .not-photo { object-position: 30% 25%; }
.not-haut__bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 48%, rgba(2, 24, 24, 0.35) 72%, rgba(2, 24, 24, 0.6) 100%); pointer-events: none; }
.not-haut__tel { position: absolute; z-index: 1; top: 50%; right: max(var(--marge), calc((100vw - var(--conteneur)) / 2)); translate: 0 -50%; }

/* Le téléphone (office fictif Ormelune) */
.not-tel { width: 17rem; padding: 10px; border-radius: 34px; background: linear-gradient(160deg, #3A3340, #17131A); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.not-tel p { margin: 0; }
.not-tel__ecran { position: relative; height: 27rem; overflow: hidden; border-radius: 26px; background: #fff; font-family: var(--f-om); color: #241E27; }
.not-tel__encoche { position: absolute; top: 8px; left: 50%; z-index: 3; width: 76px; height: 20px; margin-left: -38px !important; border-radius: 12px; background: #17131A; }
.not-tel__etape { position: absolute; inset: 0; padding: 40px 16px 16px; }
.not-tel__barre { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #DADCE0; border-radius: 999px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 0.8125rem; color: #202124; box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1); }
.not-tel__barre svg { flex: none; width: 14px; height: 14px; fill: none; stroke: #4285F4; stroke-width: 2.4; stroke-linecap: round; }
.not-tape { white-space: nowrap; overflow: hidden; }
.not-tel__resultat { margin-top: 16px !important; padding: 12px; border-radius: 12px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; box-shadow: 0 0 0 2px var(--or), 0 0 0 6px rgba(224, 189, 142, 0.22); }
.not-tel__site { display: flex; align-items: center; gap: 7px; font-size: 0.6875rem; color: #4D5156; }
.not-tel__favicon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--om-prune); font: 700 0.625rem / 1 var(--f-om-titre); color: #fff; }
.not-tel__lien { margin-top: 6px !important; font-size: 0.9375rem; line-height: 1.3; color: #1A0DAB; }
.not-tel__extrait { margin-top: 4px !important; font-size: 0.75rem; line-height: 1.45; color: #4D5156; }
.not-tel__gris { display: grid; gap: 6px; margin-top: 16px !important; }
.not-tel__gris i { display: block; height: 7px; border-radius: 4px; background: #ECEDEF; }
.not-tel__gris i:nth-child(1) { width: 40%; } .not-tel__gris i:nth-child(2) { width: 85%; } .not-tel__gris i:nth-child(3) { width: 65%; }
.not-tel__etape--page { background: var(--om-brume); }
.not-tel__marque { display: flex; align-items: center; gap: 8px; margin: 0 -16px !important; padding: 0 16px 10px; border-bottom: 1px solid var(--om-filet); font: 700 0.875rem / 1.2 var(--f-om-titre); color: var(--om-prune); }
.not-tel__marque span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--om-prune); font-size: 0.75rem; color: #fff; }
.not-tel__marque small { margin-left: auto; font: 500 0.625rem / 1 var(--f-om); letter-spacing: 0.06em; text-transform: uppercase; color: var(--om-gris); }
.not-tel__sur { margin-top: 14px !important; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--om-olive); }
.not-tel__titre { margin-top: 4px !important; font: 700 1.25rem / 1.2 var(--f-om-titre); color: var(--om-prune); }
.not-tel__pieces { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.not-tel__pieces li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; background: #fff; font-size: 0.75rem; color: #241E27; box-shadow: 0 0 0 1px var(--om-filet); }
.not-tel__case { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--om-olive); }
.not-tel__case svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.not-tel__bouton { margin-top: 14px !important; padding: 11px; border-radius: 6px; background: var(--om-prune); text-align: center; font-size: 0.8125rem; font-weight: 600; color: #fff; }
.not-tel__etape--envoi { inset: auto 12px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--om-prune); color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); }
.not-tel__coche { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.not-tel__coche svg { width: 18px; height: 18px; fill: none; stroke: var(--om-prune); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.not-tel__merci { font-size: 0.875rem; font-weight: 600; }
.not-tel__suite { font-size: 0.75rem; opacity: 0.9; }

/* Animation (une fois, 4,6 s). Sans JavaScript ou avec « moins d'animations » : la page et la demande envoyée */
.not-tel__etape--recherche { visibility: hidden; }
.js .not-haut__tel:not(.est-fini) .not-tel__etape--recherche { visibility: visible; }
.js .not-haut__tel:not(.est-fini) .not-tel__etape--page, .js .not-haut__tel:not(.est-fini) .not-tel__etape--envoi { opacity: 0; }
.js .not-haut__tel:not(.est-fini) .not-tel__case { scale: 0; }
.js .not-haut__tel.est-anime .not-tape { animation: not-frappe 1.1s steps(24) 0.3s both; }
.js .not-haut__tel.est-anime .not-tel__resultat { animation: not-monte 0.5s var(--ease-sortie) 1.3s both; }
.js .not-haut__tel.est-anime .not-tel__etape--recherche { animation: not-disparait 0.3s ease 2.3s both; }
.js .not-haut__tel.est-anime .not-tel__etape--page { animation: not-glisse 0.6s var(--ease-sortie) 2.2s both; }
.js .not-haut__tel.est-anime .not-tel__pieces li:nth-child(1) .not-tel__case { animation: not-pastille 0.35s var(--ease-sortie) 2.9s both; }
.js .not-haut__tel.est-anime .not-tel__pieces li:nth-child(2) .not-tel__case { animation: not-pastille 0.35s var(--ease-sortie) 3.15s both; }
.js .not-haut__tel.est-anime .not-tel__pieces li:nth-child(3) .not-tel__case { animation: not-pastille 0.35s var(--ease-sortie) 3.4s both; }
.js .not-haut__tel.est-anime .not-tel__etape--envoi { animation: not-pastille 0.45s var(--ease-sortie) 3.9s both; }
@keyframes not-disparait { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

@media (min-width: 48em) and (max-width: 63.99em) { .not-haut__tel { scale: 0.6; transform-origin: right center; } }
@media (min-width: 64em) and (max-width: 79.99em) { .not-haut__tel { scale: 0.85; transform-origin: right center; } }
@media (max-width: 47.99em) {
  .not-haut__bandeau { aspect-ratio: 4 / 5; max-height: none; }
  .not-haut__bandeau .not-photo { object-position: 34% 30%; }
  .not-haut__bandeau::after { background: linear-gradient(180deg, transparent 50%, rgba(2, 24, 24, 0.5) 100%); }
  .not-haut__tel { top: auto; bottom: 1.25rem; right: 10px; translate: none; scale: 0.52; transform-origin: bottom right; }
}

.not-haut__texte { margin-top: clamp(2rem, 4vw, 3rem); }
.not-haut__titre { margin: 0; }
.not-haut__sur { display: block; margin-bottom: var(--e-4); }
.not-haut__grand { display: block; font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.08 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.not-haut__accroche { margin-top: var(--e-4); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.not-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.not-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--encre); }
.not-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.not-engagements li::before { content: "✓"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or); }
@media (max-width: 29.99em) { .not-haut .btn-plaque.btn--grand { width: 100%; white-space: normal; text-align: center; line-height: 1.35; } }


/* --------------------------------------------------------------------------
   2. Votre projet : cinq situations, la première en grand avec une photo
   -------------------------------------------------------------------------- */
.not-situations { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .not-situations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .not-situations { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.not-situation { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); border-top: 2px solid var(--or-400); border-radius: 0 0 8px 8px; background: #FBF8F2; box-shadow: 0 1rem 2rem -1.5rem rgba(2, 24, 24, 0.25); transition: translate var(--d) var(--ease-sortie), box-shadow var(--d) var(--ease-sortie); }
.not-situation:hover { translate: 0 -4px; box-shadow: 0 1.25rem 2rem -1.25rem rgba(2, 24, 24, 0.35); }
.not-situation__picto { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.not-situation__titre { margin: 0; font: 500 1.375rem / 1.25 var(--f-titre); color: var(--petrole); }
.not-situation p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--encre); }
/* La première situation (cabinet établi) occupe toute la largeur : photo à gauche, texte à droite */
.not-situation--une { grid-column: 1 / -1; display: grid; gap: 0; padding: 0; overflow: hidden; border-radius: 0 0 10px 10px; background: var(--petrole); }
.not-situation--une:hover { translate: none; }
.not-situation__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.not-situation__photo .not-photo { object-position: 50% 0; }
.not-situation__corps { display: flex; flex-direction: column; justify-content: center; gap: var(--e-3); padding: clamp(1.5rem, 3.5vw, 3rem); }
.not-situation--une .not-situation__titre { font-size: clamp(1.625rem, 1.4rem + 0.7vw, 2rem); color: var(--creme); }
.not-situation--une p { font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
.not-situation--une .not-situation__picto { stroke: var(--or); }
@media (min-width: 52em) { .not-situation--une { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .not-situation__photo { aspect-ratio: auto; min-height: 20rem; } }
.not-situations.est-visible .not-situation { animation: not-monte 0.7s var(--ease-sortie) both; }
.not-situations.est-visible .not-situation:nth-child(2) { animation-delay: 0.1s; }
.not-situations.est-visible .not-situation:nth-child(3) { animation-delay: 0.18s; }
.not-situations.est-visible .not-situation:nth-child(4) { animation-delay: 0.26s; }
.not-situations.est-visible .not-situation:nth-child(5) { animation-delay: 0.34s; }

/* --------------------------------------------------------------------------
   3. Notre accompagnement : rangées alternées, texte et vrai écran
   -------------------------------------------------------------------------- */
.not-vue { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.not-vue + .not-vue { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (min-width: 60em) {
  .not-vue { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .not-vue--inverse { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .not-vue--inverse .not-vue__texte { order: 2; }
}
.not-vue__ecran { position: relative; }
.not-vue__num { display: block; font: italic 300 2.5rem / 1 var(--f-titre); color: var(--or); }
.not-vue__titre { margin: var(--e-3) 0 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem) / 1.2 var(--f-titre); color: var(--creme); }
.not-vue__texte > p:not(.not-liens) { margin: var(--e-3) 0 0; font-size: var(--t-corps); line-height: 1.65; color: var(--creme-doux); }

/* Navigateur */
.not-nav { overflow: hidden; border-radius: 12px; background: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #202124; box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.not-nav p { margin: 0; }
.not-nav__barre { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #ECEFF1; }
.not-nav__points { display: inline-flex; gap: 6px; }
.not-nav__points i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.not-nav__points i:nth-child(2) { background: #FEBC2E; } .not-nav__points i:nth-child(3) { background: #28C840; }
.not-nav__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 0.8125rem; color: #5F6368; white-space: nowrap; overflow: hidden; }
.not-nav__url svg { flex: none; width: 13px; height: 13px; fill: none; stroke: #5F6368; stroke-width: 2; }

/* 3.1 Le site de l'office fictif (Ormelune) */
.not-om { font-family: var(--f-om); color: #1C232B; }
.not-om__entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--om-filet); }
.not-om__logo { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; font: 600 0.9375rem / 1.2 var(--f-om-titre); color: var(--om-prune); }
.not-om__logo b { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--om-prune); font: 600 1rem / 1 var(--f-om-titre); color: #fff; }
.not-om__logo small { font: 400 0.6875rem / 1.2 var(--f-om); color: var(--om-gris); }
.not-om__menu { display: inline-flex; gap: 16px; font-size: 0.75rem; color: var(--om-gris); }
.not-om__une { padding: 28px 18px 22px; background: linear-gradient(180deg, var(--om-brume), #fff); }
.not-om__sur { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--om-olive); }
.not-om__titre { margin-top: 8px !important; font: 600 clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem) / 1.15 var(--f-om-titre); color: var(--om-prune); }
.not-om__texte { margin-top: 10px !important; max-width: 34rem; font-size: 0.875rem; line-height: 1.55; color: #3A4652; }
.not-om__boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.not-om__bouton { padding: 9px 15px; border-radius: 4px; background: var(--om-olive); font-size: 0.8125rem; font-weight: 600; color: #fff; }
.not-om__bouton--clair { background: #fff; box-shadow: inset 0 0 0 1px var(--om-prune); color: var(--om-prune); }
.not-om__domaines { display: grid; gap: 10px; padding: 14px 18px 20px; }
@media (min-width: 40em) { .not-om__domaines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.not-om__domaines p { display: grid; gap: 3px; padding: 10px 12px; border-top: 2px solid var(--om-olive); background: var(--om-brume); }
.not-om__domaines b { font: 600 0.9375rem / 1.2 var(--f-om-titre); color: var(--om-prune); }
.not-om__domaines span { font-size: 0.75rem; color: var(--om-gris); }

/* 3.2 Page de résultats Google */
.not-g { padding: 16px 20px 20px; }
.not-g__tete { display: flex; align-items: center; gap: 18px; }
.not-g__logo { flex: none; font: 400 1.75rem / 1 "Product Sans", Arial, sans-serif; letter-spacing: -0.02em; }
.not-g__logo span:nth-child(1), .not-g__logo span:nth-child(4) { color: #4285F4; }
.not-g__logo span:nth-child(2), .not-g__logo span:nth-child(6) { color: #EA4335; }
.not-g__logo span:nth-child(3) { color: #FBBC05; }
.not-g__logo span:nth-child(5) { color: #34A853; }
.not-g__recherche { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); font-size: 0.9375rem; }
.not-g__recherche svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #4285F4; stroke-width: 2.4; stroke-linecap: round; }
.not-g__requete { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.not-g__onglets { display: flex; gap: 18px; margin-top: 14px !important; padding-bottom: 8px; border-bottom: 1px solid #EBEBEB; font-size: 0.8125rem; color: #5F6368; white-space: nowrap; overflow: hidden; }
.not-g__onglets span { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 6px; }
.not-g__onglets svg { width: 13px; height: 13px; fill: #5F6368; }
.not-g__onglets .est-actif { color: #1A73E8; box-shadow: inset 0 -3px 0 #1A73E8; }
.not-g__resultats { margin-top: 16px; }
.not-g__resultat, .not-g__annonce { padding: 10px 12px; margin: 0 -12px; border-radius: 10px; }
.not-g__resultat--vous, .not-g__annonce { box-shadow: 0 0 0 2px var(--or), 0 0 0 7px rgba(224, 189, 142, 0.25); background: #FFFDF8; }
.not-g__site { display: flex; align-items: center; gap: 10px; }
.not-g__site span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.not-g__site b { font-size: 0.875rem; font-weight: 400; color: #202124; }
.not-g__site small { font-size: 0.75rem; color: #4D5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.not-g__favicon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--om-prune); box-shadow: 0 0 0 1px #E8EAED; font: 600 0.8125rem / 1 var(--f-om-titre); color: #fff; }
.not-g__titre { margin-top: 6px !important; font-size: 1.1875rem; line-height: 1.3; color: #1A0DAB; }
.not-g__extrait { margin-top: 4px !important; font-size: 0.875rem; line-height: 1.55; color: #4D5156; }
.not-g__sponso { margin-bottom: 6px !important; font-size: 0.875rem; font-weight: 700; color: #202124; }
.not-g__resultat--gris { margin-top: 14px; }
.not-g__resultat--gris p { display: flex; gap: 8px; margin-top: 7px !important; }
.not-g__resultat--gris i { display: block; height: 8px; border-radius: 4px; background: #ECEDEF; }
.not-g__resultat--gris p:first-child i:first-child { width: 22px; height: 22px; border-radius: 50%; } .not-g__resultat--gris p:first-child i:last-child { width: 40%; height: 10px; align-self: center; }
.not-g__resultat--gris p:nth-child(2) i { width: 70%; height: 11px; background: #DCE4F4; }
.not-g__resultat--gris p:nth-child(3) i:first-child { width: 90%; } .not-g__resultat--gris p:nth-child(3) i:last-child { width: 50%; }

.not-g__questions { margin-top: 18px; }
.not-g__questions-titre { margin-bottom: 4px !important; font-size: 1.0625rem; color: #202124; }
.not-g__question { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #EBEBEB; font-size: 0.875rem; color: #202124; }
.not-g__question i { flex: none; width: 8px; height: 8px; border-right: 2px solid #5F6368; border-bottom: 2px solid #5F6368; rotate: 45deg; translate: 0 -3px; }

/* Aperçu IA */
.not-apercu { margin-bottom: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #EEF3FD, #F6F1FB); }
.not-apercu__titre { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; color: #202124; }
.not-apercu__titre svg { width: 18px; height: 18px; fill: #4285F4; }
.not-apercu__phrase { margin-top: 10px !important; font-size: 0.9375rem; line-height: 1.6; color: #202124; }
.not-apercu__phrase mark { padding: 1px 3px; border-radius: 3px; background: rgba(224, 189, 142, 0.5); color: #202124; font-weight: 700; }
.not-apercu__renvoi { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; background: var(--om-prune); font: 600 0.625rem / 1 var(--f-om-titre); color: #fff; vertical-align: 2px; }
.not-apercu__lignes { display: grid; gap: 7px; margin-top: 10px !important; }
.not-apercu__lignes i { display: block; height: 8px; border-radius: 4px; background: rgba(32, 33, 36, 0.09); }
.not-apercu__lignes i:last-child { width: 60%; }
.not-apercu__avertissement { margin-top: 10px !important; font-size: 0.6875rem; color: #5F6368; }

/* 3.3 Fiche pratique, publication et lettre de l'office fictif, posées sur une table */
.not-table { min-height: 25rem; border-radius: 8px; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, 0.12), transparent 70%), linear-gradient(160deg, #13403F, #0B2E2F); font-family: var(--f-om); color: #1C232B; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.15); }
.not-table > div { position: absolute; transition: translate var(--d) var(--ease-sortie); }
.not-table > div:hover { translate: 0 -4px; }
.not-table p { margin: 0; }
.not-article { top: 9%; left: 6%; width: 15rem; padding: 18px 16px; border-radius: 4px; background: #fff; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.6); rotate: -3deg; }
.not-article__sur { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--om-olive); }
.not-article__titre { margin-top: 6px !important; font: 600 0.9375rem / 1.28 var(--f-om-titre); color: var(--om-prune); }
.not-article__lignes { display: grid; gap: 6px; margin-top: 12px !important; }
.not-article__lignes i { display: block; height: 5px; border-radius: 3px; background: #E1E6EC; }
.not-article__lignes i:nth-child(even) { width: 80%; }
.not-article__pied { margin-top: 14px !important; padding-top: 8px; border-top: 1px solid var(--om-filet); font-size: 0.6875rem; color: var(--om-gris); }
.not-post { top: 12%; right: 6%; width: 14rem; padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.6); rotate: 3deg; }
.not-post__tete { display: flex; align-items: center; gap: 8px; }
.not-post__avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--om-prune); font: 600 0.8125rem / 1 var(--f-om-titre); color: #fff; }
.not-post__tete span:last-child { display: grid; line-height: 1.2; font-size: 0.75rem; }
.not-post__tete b { font-weight: 600; }
.not-post__tete small { font-size: 0.625rem; color: var(--om-gris); }
.not-post__texte { margin-top: 8px !important; font-size: 0.75rem; line-height: 1.45; color: #2C3540; }
.not-post__visuel { display: grid; place-items: end start; height: 5.25rem; margin-top: 8px !important; padding: 10px; border-radius: 6px; background: linear-gradient(135deg, var(--om-prune), #2E4560); }
.not-post__visuel span { font: 600 0.8125rem / 1.2 var(--f-om-titre); color: #fff; }
.not-post__actions { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 9px !important; padding-top: 7px; border-top: 1px solid var(--om-filet); }
.not-post__actions span { font-size: 0.6875rem; color: var(--om-gris); }
.not-lettre { bottom: 8%; left: 26%; width: 15rem; padding: 12px 14px; border-radius: 6px; background: #fff; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.6); rotate: -1deg; }
.not-lettre__tete { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--om-olive); font: 600 0.875rem / 1 var(--f-om-titre); color: var(--om-prune); }
.not-lettre__tete b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--om-prune); font-size: 0.6875rem; color: #fff; }
.not-lettre__objet { margin-top: 10px !important; font: 600 0.9375rem / 1.3 var(--f-om-titre); color: var(--om-prune); }
.not-lettre__note { margin-top: 4px !important; font-size: 0.6875rem; color: var(--om-gris); }
.not-vue.est-visible .not-table > div { animation: not-monte 0.7s var(--ease-sortie) both; }
.not-vue.est-visible .not-table > div:nth-child(2) { animation-delay: 0.2s; }
.not-vue.est-visible .not-table > div:nth-child(3) { animation-delay: 0.4s; }

/* 3.4 Photo de l'accueil et appel pris par l'assistant */
.not-accueil { min-height: 27rem; margin-bottom: 2.5rem; }
.not-accueil .not-photo { border-radius: 8px; object-position: 30% 30%; }
.not-accueil::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(90deg, transparent 40%, rgba(2, 24, 24, 0.5) 100%); pointer-events: none; }
.not-appel { position: absolute; z-index: 1; right: -1rem; bottom: -2.5rem; width: min(18rem, 72%); padding: 16px; border-radius: 10px; font-family: var(--f-om); background: linear-gradient(160deg, #2A3D52, var(--om-prune)); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.not-appel p { margin: 0; }
.not-appel__ligne { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.not-appel__icone { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.not-appel__icone svg { width: 18px; height: 18px; fill: none; stroke: var(--om-prune); stroke-width: 1.8; stroke-linejoin: round; }
.not-appel__ligne > span:nth-child(2) { display: grid; line-height: 1.25; font-size: 0.875rem; color: #fff; }
.not-appel__ligne small { font-size: 0.75rem; color: #C9D2DC; }
.not-appel__onde { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; height: 20px; }
.not-appel__onde i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: center; scale: 1 0.5; }
.not-vue.est-visible .not-appel__onde i { animation: not-onde 0.9s ease-in-out 3 both; }
.not-vue.est-visible .not-appel__onde i:nth-child(2n) { animation-delay: 0.15s; }
.not-vue.est-visible .not-appel__onde i:nth-child(3n) { animation-delay: 0.3s; }
.not-appel__bulle { width: fit-content; max-width: 90%; margin: 12px 0 0 auto !important; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: rgba(255, 255, 255, 0.1); font-size: 0.875rem; line-height: 1.45; color: #fff; }
.not-appel__bulle--ia { margin: 10px auto 0 0 !important; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.18); }
.not-appel__fiche { margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: #fff; }
.not-appel__fiche-titre { margin: 0 0 6px !important; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--om-olive); }
.not-appel__fiche dl { display: grid; gap: 5px; margin: 0; }
.not-appel__fiche dl div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--om-filet); font-size: 0.8125rem; }
.not-appel__fiche dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.not-appel__fiche dt { color: var(--om-gris); }
.not-appel__fiche dd { margin: 0; text-align: right; color: #1C232B; }
.js .not-vue:not(.est-visible) .not-appel__bulle, .js .not-vue:not(.est-visible) .not-appel__fiche { opacity: 0; }
.not-vue.est-visible .not-appel__bulle { animation: not-monte 0.5s var(--ease-sortie) 0.4s both; }
.not-vue.est-visible .not-appel__bulle--ia { animation-delay: 1.1s; }
.not-vue.est-visible .not-appel__fiche { animation: not-monte 0.6s var(--ease-sortie) 1.8s both; }
@media (max-width: 39.99em) {
  .not-accueil { min-height: 0; margin-bottom: 0; }
  .not-accueil .not-photo { position: relative; display: block; height: 16rem; border-radius: 8px; }
  .not-accueil::after { display: none; }
  .not-appel { position: relative; right: auto; bottom: auto; width: auto; margin: -2.5rem 0.75rem 0; }
}

/* Animations des écrans Google (une fois, à l'arrivée) */
.js .not-vue .not-g__requete { clip-path: inset(0 100% 0 0); }
.js .not-vue.est-visible .not-g__requete { animation: not-frappe 1s steps(32) 0.3s both; }
.js .not-vue.est-visible .not-g__resultats > * { animation: not-monte 0.6s var(--ease-sortie) 1.3s both; }
.js .not-vue.est-visible .not-g__resultats > :nth-child(2) { animation-delay: 1.6s; }
.js .not-vue.est-visible .not-g__resultats > :nth-child(3) { animation-delay: 1.8s; }
.js .not-vue.est-visible .not-g__resultat--vous { animation: not-monte 0.6s var(--ease-sortie) 1.6s both, not-anneau 1.4s ease-out 2.4s 1; }
.js .not-vue.est-visible .not-g__annonce { animation: not-monte 0.6s var(--ease-sortie) 1.3s both, not-anneau 1.4s ease-out 2.1s 1; }
.js .not-vue .not-apercu__phrase { clip-path: inset(0 0 100% 0); }
.js .not-vue.est-visible .not-apercu__phrase { animation: not-deroule 0.9s ease-out 1.7s both; }
@media (max-width: 29.99em) {
  .not-g { padding: 12px 14px 16px; }
  .not-g__tete { gap: 10px; }
  .not-g__logo { font-size: 1.25rem; }
  .not-g__recherche { padding: 7px 12px; font-size: 0.8125rem; }
  .not-g__titre { font-size: 1rem; }
  .not-om__menu { display: none; }
}

/* --------------------------------------------------------------------------
   4. Exemple : extrait d'un rapport d'audit (livrable de JustiComm, aux couleurs de la charte)
   -------------------------------------------------------------------------- */
.not-audit__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60em) { .not-audit__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.not-recu { margin: 0; padding: var(--e-4) var(--e-5); border-left: 2px solid var(--or-400); background: #FBF8F2; font-size: var(--t-corps); line-height: 1.55; color: var(--encre); }
.not-recu b { font-weight: 500; color: var(--petrole); }
.not-rapport { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 6px; background: #fff; box-shadow: 0 2rem 3.5rem -2rem rgba(2, 24, 24, 0.45), 0 0 0 1px var(--lin); }
.not-rapport::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--petrole), var(--or-400)); }
.not-rapport p { margin: 0; }
.not-rapport__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: var(--e-4); border-bottom: 1px solid var(--lin); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); }
.not-rapport__marque { font: 500 1.25rem / 1 var(--f-titre); letter-spacing: 0; text-transform: none; color: var(--petrole); }
.not-rapport__bloc { display: grid; gap: var(--e-2); padding: var(--e-4) 0; border-bottom: 1px solid var(--lin); }
@media (min-width: 40em) { .not-rapport__bloc { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--e-5); } }
.not-rapport__bloc:last-child { border-bottom: 0; padding-bottom: 0; }
.not-rapport__etiquette { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or-texte); }
.not-rapport__texte { font-size: 1.0625rem; line-height: 1.55; color: var(--encre); }
.not-rapport__priorites { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; counter-reset: not-prio; }
.not-rapport__priorites li { position: relative; padding-left: 2.25rem; font-size: 1.0625rem; line-height: 1.5; color: var(--encre); counter-increment: not-prio; }
.not-rapport__priorites li::before { content: counter(not-prio); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--petrole); font: 500 0.8125rem / 1 var(--f-texte); color: var(--or); }
.not-rapport__note { margin-top: var(--e-4) !important; font-size: 0.875rem; font-style: italic; color: var(--taupe); }
.not-rapport.est-visible .not-rapport__bloc { animation: not-monte 0.6s var(--ease-sortie) both; }
.not-rapport.est-visible .not-rapport__bloc:nth-of-type(2) { animation-delay: 0.15s; }
.not-rapport.est-visible .not-rapport__bloc:nth-of-type(3) { animation-delay: 0.3s; }
.not-rapport.est-visible .not-rapport__bloc:nth-of-type(4) { animation-delay: 0.45s; }

/* --------------------------------------------------------------------------
   5. Méthode : quatre étapes en colonnes, chacune avec un petit écran
   -------------------------------------------------------------------------- */
.not-etapes { display: grid; gap: var(--e-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 56em) { .not-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(224, 189, 142, 0.22); } }
.not-etape { display: flex; flex-direction: column; }
@media (min-width: 56em) { .not-etape { padding: var(--e-6) var(--e-6) 0; border-left: 1px solid rgba(224, 189, 142, 0.22); } .not-etape:first-child { padding-left: 0; border-left: 0; } }
.not-etape__visuel { display: grid; align-content: center; min-height: 10.5rem; margin-bottom: var(--e-4); padding: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.not-mini { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 6px; background: var(--papier); font-size: 0.8125rem; color: var(--encre); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7); }
.not-mini b { font: 500 1.0625rem / 1.2 var(--f-titre); color: var(--petrole); }
.not-mini--plan span { display: flex; align-items: center; gap: 8px; }
.not-mini--plan span i { flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--petrole) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0BD8E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 70% no-repeat; }
.not-mini--valider > i { display: block; height: 6px; border-radius: 3px; background: var(--lin); }
.not-mini--valider > i:nth-of-type(2) { width: 70%; }
.not-mini__bouton { justify-self: end; padding: 6px 14px; border-radius: 999px; background: var(--petrole); font-size: 0.8125rem; font-weight: 500; color: var(--or-clair); }
.not-mini--suivi span { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: 8px; color: var(--taupe); }
.not-mini--suivi span i { display: block; width: var(--l); height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--or-400), var(--or)); }
.not-etapes.est-visible .not-mini--suivi span i { animation: not-barre 1s var(--ease-sortie) 0.6s both; }
.not-etape__num { display: block; font: 300 2.5rem / 1 var(--f-titre); color: var(--or); }
.not-etape__titre { margin: var(--e-2) 0 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem) / 1.2 var(--f-titre); color: var(--creme); }
.not-etape > p { margin: var(--e-3) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--creme-doux); }
.not-etapes.est-visible .not-etape { animation: not-monte 0.7s var(--ease-sortie) both; }
.not-etapes.est-visible .not-etape:nth-child(2) { animation-delay: 0.2s; }
.not-etapes.est-visible .not-etape:nth-child(3) { animation-delay: 0.4s; }

/* --------------------------------------------------------------------------
   6. Les règles du notariat : phrase sur la fondatrice, liste cochée avec ses sources, encadré
   -------------------------------------------------------------------------- */
.not-regles__liste { display: grid; gap: 0 var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (min-width: 52em) { .not-regles__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.not-regles__liste li { position: relative; padding: var(--e-4) 0 var(--e-4) 2.25rem; border-bottom: 1px solid #D6CFC1; font-size: 1.125rem; line-height: 1.5; color: var(--encre); }
.not-regles__liste li::before { content: ""; position: absolute; left: 0; top: calc(var(--e-4) + 0.18em); width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0BD8E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 70% no-repeat; }
.not-regles__liste.est-visible li::before { animation: not-pastille 0.45s var(--ease-sortie) both; }
.not-regles__liste.est-visible li:nth-child(2)::before { animation-delay: 0.12s; }
.not-regles__liste.est-visible li:nth-child(3)::before { animation-delay: 0.24s; }
.not-regles__liste.est-visible li:nth-child(4)::before { animation-delay: 0.36s; }
.not-regles__liste.est-visible li:nth-child(5)::before { animation-delay: 0.48s; }

/* --------------------------------------------------------------------------
   7. Tarifs : liste des prix sur papier, encadré à double filet
   -------------------------------------------------------------------------- */
.not-tarifs__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60em) { .not-tarifs__grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: start; } }
.not-prix { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: 6px; background: var(--papier); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.not-prix__liste { display: grid; margin: 0; padding: 0; list-style: none; }
.not-prix__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2) var(--e-5); align-items: baseline; padding: var(--e-4) 0; border-bottom: 1px solid var(--lin); }
.not-prix__liste li:first-child { padding-top: 0; }
.not-prix__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.not-prix__liste p { display: grid; gap: 3px; margin: 0; }
.not-prix__liste b { font-size: 1.0625rem; font-weight: 500; color: var(--petrole); }
.not-prix__liste b a { color: inherit; text-decoration-color: var(--or-400); text-underline-offset: 3px; }
.not-prix__liste b a:hover { color: var(--or-texte); }
.not-prix__liste span { font-size: 0.9375rem; line-height: 1.45; color: var(--taupe); }
.not-prix__liste strong { display: grid; justify-items: end; font: 500 1.125rem / 1.25 var(--f-texte); white-space: nowrap; color: var(--petrole); }
.not-prix__liste strong small { font: 400 0.8125rem / 1.3 var(--f-texte); color: var(--taupe); }
.not-prix__offert strong { color: var(--or-texte); }
@media (max-width: 29.99em) { .not-prix__liste li { grid-template-columns: minmax(0, 1fr); } .not-prix__liste strong { justify-items: start; } }
.not-cadre { margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 4px; background: var(--petrole); outline: 1px solid rgba(224, 189, 142, 0.6); outline-offset: -8px; text-align: center; font: 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.not-tarifs__cote .not-actions { justify-content: center; }
.not-tarifs__cote .not-liens { justify-content: center; }

/* --------------------------------------------------------------------------
   8. Nice et toute la France : carte de France de nuit. Le contour se dessine, les liens partent
   de Nice, les villes s'allument en vague ; Nice clignote (bouton pause).
   -------------------------------------------------------------------------- */
.not-lieu__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60em) { .not-lieu__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.not-lieu__cartes { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .not-lieu__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.not-lieu__carte { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); border-top: 2px solid var(--or-400); border-radius: 0 0 8px 8px; background: #FBF8F2; box-shadow: 0 1rem 2rem -1.5rem rgba(2, 24, 24, 0.25); }
.not-lieu__carte svg { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.not-lieu__carte p { display: grid; margin: 0; line-height: 1.35; }
.not-lieu__carte b { font: 500 1.25rem / 1.2 var(--f-titre); color: var(--petrole); }
.not-lieu__carte span { font-size: 0.9375rem; color: var(--taupe); }

.not-carte { position: relative; margin: 0; padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.25rem); border-radius: 12px; background: radial-gradient(ellipse 55% 45% at 82% 68%, rgba(176, 99, 57, 0.22), transparent 70%), radial-gradient(ellipse 80% 70% at 45% 40%, rgba(224, 189, 142, 0.1), transparent 70%), linear-gradient(160deg, var(--petrole), var(--petrole-900)); box-shadow: 0 2.5rem 4rem -2rem rgba(2, 24, 24, 0.6); overflow: hidden; }
.not-carte__svg { display: block; width: 100%; height: auto; overflow: visible; }
#not-points circle { fill: var(--or); opacity: 0.32; }
.not-carte__trame { fill: url(#not-points); }
.not-carte__contour { fill: none; stroke: var(--or); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
.not-carte__arc { fill: none; stroke: var(--or-clair); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.6; }
.not-carte__ville { fill: var(--or); transform-box: fill-box; transform-origin: center; }
.not-carte__ville--grande { fill: var(--or-clair); filter: drop-shadow(0 0 4px rgba(242, 217, 172, 0.7)); }
.not-carte__nom { fill: var(--creme); font: 400 13px / 1 var(--f-texte); letter-spacing: 0.02em; opacity: 0.9; }
.not-carte__nom--nice { fill: var(--or-clair); font: italic 500 22px / 1 var(--f-titre); opacity: 1; }
.not-carte__nice { fill: var(--cuivre); stroke: var(--or-clair); stroke-width: 2; }
.not-carte__onde { fill: none; stroke: var(--or-clair); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.not-carte__halo { opacity: 0.9; }
.not-carte__legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: var(--e-3) 0 0; font-size: 0.875rem; color: var(--creme-doux); }
.not-carte__legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.not-carte__puce { width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 3px rgba(176, 99, 57, 0.3); }
.not-carte__puce--ville { width: 7px; height: 7px; background: var(--or-clair); box-shadow: 0 0 6px rgba(242, 217, 172, 0.8); }
.not-carte__pause { position: absolute; top: 0.75rem; right: 0.75rem; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(224, 189, 142, 0.55); border-radius: 50%; background: rgba(2, 24, 24, 0.55); color: var(--or-clair); cursor: pointer; }
.js .not-carte__pause { display: grid; }
.not-carte__pause svg { width: 18px; height: 18px; fill: currentColor; }
.not-carte__lire { display: none; }
.not-carte.est-en-pause .not-carte__lire { display: block; }
.not-carte.est-en-pause .not-carte__arret { display: none; }
.not-carte__pause:hover { background: var(--petrole); }
.not-carte__pause:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.js .not-carte:not(.est-visible) .not-carte__contour, .js .not-carte:not(.est-visible) .not-carte__arc { stroke-dashoffset: 1; }
.js .not-carte:not(.est-visible) .not-carte__trame, .js .not-carte:not(.est-visible) .not-carte__nom { opacity: 0; }
.js .not-carte:not(.est-visible) .not-carte__ville { opacity: 0.15; }
.js .not-carte.est-visible .not-carte__contour { animation: not-trace 1.4s ease-in-out both; }
.js .not-carte.est-visible .not-carte__trame { animation: not-apparait 1.2s ease 0.6s both; }
.js .not-carte.est-visible .not-carte__arc { animation: not-trace 1.1s ease-out var(--not-d) both; }
.js .not-carte.est-visible .not-carte__ville { animation: not-allume 0.5s ease-out var(--not-d) both; }
.js .not-carte.est-visible .not-carte__nom { animation: not-apparait-nom 0.5s ease var(--not-d) both; }
.js .not-carte.est-visible .not-carte__nom--nice { animation: none; }
.js .not-carte .not-carte__onde { animation: not-pulse 2.4s ease-out infinite; }
.js .not-carte .not-carte__onde--2 { animation-delay: 1.2s; }
.js .not-carte .not-carte__nice { animation: not-battement 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.not-carte.est-en-pause .not-carte__onde, .not-carte.est-en-pause .not-carte__nice { animation-play-state: paused; }
@keyframes not-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes not-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes not-apparait-nom { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes not-allume { 0% { opacity: 0.15; scale: 0.4; } 60% { opacity: 1; scale: 1.8; } 100% { opacity: 1; scale: 1; } }
@keyframes not-pulse { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 4.2; } }
@keyframes not-battement { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }

/* --------------------------------------------------------------------------
   9. FAQ (composant commun faq5)
   -------------------------------------------------------------------------- */
.not.faq5 .faq5__titre { max-width: none; text-align: left; }

/* --------------------------------------------------------------------------
   Appel final sur photo assombrie, texte à gauche
   -------------------------------------------------------------------------- */
.not-final { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 7rem); background: var(--petrole-profond); }
.not-final > .not-photo { z-index: 0; }
.not-final .not-photo { object-position: 70% 50%; }
.not-final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(2, 24, 24, 0.96) 0%, rgba(2, 24, 24, 0.88) 32%, rgba(2, 24, 24, 0.35) 58%, rgba(2, 24, 24, 0.1) 80%); }
@media (max-width: 59.99em) { .not-final::before { background: rgba(2, 24, 24, 0.84); } }
.not-final__contenu { position: relative; z-index: 2; }
@media (min-width: 60em) { .not-final__contenu > * { max-width: 36rem; } }
.not-final__repere { display: block; width: 14px; height: 14px; margin: 0 0 var(--e-5); border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 7px rgba(176, 99, 57, 0.2), 0 0 32px rgba(224, 189, 142, 0.55); }
.not-final .titre-section { color: var(--creme); }
.not-final__texte { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
.not-final__fondatrice { margin-top: var(--e-4); padding-left: var(--e-4); border-left: 1px solid var(--or-400); font: italic 500 1.125rem / 1.45 var(--f-titre); color: var(--creme); }
.not-final__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: var(--e-5); font-size: 1rem; color: var(--creme-doux); }
.not-final__contact a { color: var(--creme); text-underline-offset: 3px; }
.not-final__contact a:hover { color: var(--or-clair); }

/* --------------------------------------------------------------------------
   Réglages repris de la page Avocats (contrôle visuel du 25/10/2026)
   -------------------------------------------------------------------------- */
/* La règle commune « .section p + p » ne doit pas décaler les écrans ni le rapport */
.not .not-om__domaines p, .not .not-g__tete p, .not .not-g__annonce .not-g__site, .not .not-rapport__bloc > p { margin-top: 0; }
.not .not-liens { margin-top: var(--e-5); }
.not-joindre--gauche { margin-top: var(--e-5) !important; }
/* Chiffres alignés (Cormorant écrit « 01 » à l'ancienne) */
.not-vue__num, .not-etape__num { font-variant-numeric: lining-nums; }
/* Contenus : cartes en pourcentage, puis en pile au téléphone */
@media (min-width: 30em) {
  .not-article { left: 4%; width: 47%; max-width: 17rem; }
  .not-post { right: 4%; width: 43%; max-width: 16rem; }
  .not-lettre { left: 6%; width: 46%; max-width: 17rem; }
  .not-table { min-height: 27rem; }
}
@media (max-width: 29.99em) {
  .not-table { display: grid; gap: 14px; min-height: 0; padding: 22px 18px; }
  .not-table > div { position: relative; inset: auto; width: auto; }
  .not-post { margin-left: 2.5rem; }
  .not-article, .not-lettre { margin-right: 2.5rem; }
  .not-final__contact span[aria-hidden] { display: none; }
  .not-g__resultat, .not-g__annonce { margin-inline: -4px; }
}
/* Carte de France lisible au téléphone (Rennes et Brest masqués) */
@media (max-width: 39.99em) {
  .not-carte__nom { font-size: 20px; }
  .not-carte__nom--nice { font-size: 32px; }
  .not-carte__nom:nth-of-type(9), .not-carte__nom:nth-of-type(10) { display: none; }
}


/* --------------------------------------------------------------------------
   Propre à la page Notaires
   -------------------------------------------------------------------------- */
/* Situations : encadré fort centré après les cartes */
.not-exergue { max-width: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 4px; background: var(--petrole); outline: 1px solid rgba(224, 189, 142, 0.6); outline-offset: -8px; text-align: center; font: 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem) / 1.4 var(--f-titre); color: var(--creme); text-wrap: pretty; }
/* Le site de l'office : repère « Marianne et bloc-marque » (annotation JustiComm) */
.not-om__bloc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px dashed var(--or-400); border-radius: 4px; background: #FFFDF8; font: 500 0.6875rem / 1.2 var(--f-texte); letter-spacing: 0.04em; color: var(--or-texte); white-space: nowrap; }
.not-om__tarifs { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px !important; font-size: 0.75rem; color: var(--om-gris); }
.not-om__tarifs b { color: var(--om-prune); }
/* Méthode : quatre étapes */
@media (min-width: 56em) { .not-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; row-gap: var(--e-6); } .not-etape { padding: var(--e-6) var(--e-6) 0 0; border-left: 0; border-top: 1px solid rgba(224, 189, 142, 0.22); } .not-etape:first-child { padding-left: 0; } }
@media (min-width: 75em) { .not-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; border-top: 1px solid rgba(224, 189, 142, 0.22); } .not-etape { padding: var(--e-6) var(--e-5) 0; border-top: 0; border-left: 1px solid rgba(224, 189, 142, 0.22); } .not-etape:first-child { padding-left: 0; border-left: 0; } }
.not-etapes.est-visible .not-etape:nth-child(4) { animation-delay: 0.6s; }
.not-mini--chambre span { display: flex; justify-content: space-between; gap: 8px; color: var(--taupe); }
.not-mini--chambre span em { font-style: normal; color: var(--petrole); }
.not-mini__etat { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(224, 189, 142, 0.35); font-size: 0.75rem; color: var(--petrole); }
/* Règles : la fondatrice, puis la liste avec ses sources */
.not-fondatrice { max-width: none; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); padding-left: var(--e-4); border-left: 2px solid var(--or-400); font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.5 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.not-regles__liste li { display: grid; gap: 4px; }
.not-regles__source { font-size: 0.875rem; font-style: italic; color: var(--taupe); }
.not-regles__liste.est-visible li:nth-child(6)::before { animation-delay: 0.6s; }
.not-regles__liste.est-visible li:nth-child(7)::before { animation-delay: 0.72s; }
.not-regles__fin { display: grid; gap: var(--e-4); justify-items: center; margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.not-regles__fin .not-exergue { width: 100%; margin: 0; }
.not-regles__doute { margin: 0; font-size: var(--t-corps); line-height: 1.55; color: var(--encre); }
/* Tarifs : note sous la liste */
.not-prix__note { margin: var(--e-4) 0 0 !important; padding-top: var(--e-4); border-top: 1px solid var(--lin); font-size: 0.9375rem; line-height: 1.55; color: var(--taupe); }
.not-prix__chapo-bis { margin-top: var(--e-3); }

/* --------------------------------------------------------------------------
   Moins d'animations : état final fixe
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .not *, .not *::before, .not *::after { animation: none !important; transition: none !important; }
  .not-situation:hover, .not-table > div:hover { translate: none; }
  .not-g__requete, .not-apercu__phrase, .not-tape { clip-path: none !important; }
  .not-tel__etape--recherche { visibility: hidden !important; }
  .not-tel__etape--page, .not-tel__etape--envoi { opacity: 1 !important; }
  .not-tel__case { scale: 1 !important; }
  .not-carte__pause { display: none !important; }
  .not-carte__onde { opacity: 0 !important; }
}

/* Contrôle du 25/10/2026 : doré clair dans les encadrés pétrole, petits écrans de la méthode de même hauteur,
   boutons de l'appel final sur une ligne */
.not-exergue .not-or, .not-cadre .not-or { color: var(--or-clair); }
.not-etape__visuel { min-height: 12.5rem; }
@media (min-width: 60em) { .not-final__contenu > .not-actions { max-width: none; } }

/* Photos (ChatGPT, 25/10/2026) : cadrages */
.not-situation__photo .not-photo { object-position: 76% 30%; }
.not-accueil .not-photo { object-position: 22% 40%; }

/* Contrôle des agents du 25/10/2026 (Pauline, Octave) : texte et mise en page, texte validé inchangé */
/* Appel final : bouton sur fond, voile renforcé selon la largeur (contraste ≥ 4,5:1 de 960 à 2560 px) */
.not-final .btn-cartouche { background: rgba(2, 24, 24, 0.72); }
@media (min-width: 60em) and (max-width: 79.99em) { .not-final::before { background: linear-gradient(90deg, rgba(2, 24, 24, 0.96) 0%, rgba(2, 24, 24, 0.9) 62%, rgba(2, 24, 24, 0.35) 85%, rgba(2, 24, 24, 0.1) 100%); } }
@media (min-width: 80em) { .not-final::before { background: linear-gradient(90deg, rgba(2, 24, 24, 0.96) 0%, rgba(2, 24, 24, 0.9) 50%, rgba(2, 24, 24, 0.35) 72%, rgba(2, 24, 24, 0.1) 88%); } }
/* Outils IA, de 960 à 1279 px : la carte d'appel passe sous la photo pour ne pas cacher le client */
@media (min-width: 60em) and (max-width: 79.99em) {
  .not-accueil { min-height: 0; margin-bottom: 0; }
  .not-accueil .not-photo { position: relative; display: block; height: 18rem; }
  .not-accueil::after { display: none; }
  .not-appel { position: relative; right: auto; bottom: auto; width: auto; margin: -2.5rem 0.75rem 0; }
}
@media (min-width: 40em) and (max-width: 59.99em) { .not-appel { right: 0.75rem; } }
/* Où nous intervenons : cartes en une colonne de 960 à 1279 px ; flèche des liens collée au dernier mot */
@media (min-width: 60em) and (max-width: 79.99em) { .not-lieu__cartes { grid-template-columns: minmax(0, 1fr); } }
.not .not-liens .lien-suite.not-lien { display: inline; }
.not .not-liens .lien-suite.not-lien .lien-suite__fleche { display: inline-block; vertical-align: -0.15em; margin-left: 10px; }
/* Méthode sur deux colonnes : colonnes équilibrées */
@media (min-width: 56em) and (max-width: 74.99em) { .not-etape:nth-child(odd) { padding-right: calc(var(--e-6) / 2); } .not-etape:nth-child(even) { padding-left: calc(var(--e-6) / 2); padding-right: 0; } }
/* Haut de page à 320 px : la notaire reste entière à gauche du téléphone */
@media (max-width: 22.49em) { .not-haut__bandeau .not-photo { object-position: 42% 30%; } .not-om__bloc { white-space: normal; } }
/* Aperçu IA : pas de faux espace avant le nom surligné */
.not-apercu__phrase mark { padding: 1px 0; }
/* Mots à trait d'union gardés sur une ligne */
.not-insecable { white-space: nowrap; }
/* Carte au téléphone : « Marseille » ne colle plus à « Nice » */
@media (max-width: 39.99em) { .not-carte__nom:nth-of-type(3) { text-anchor: end; translate: -14px 0; } }

/* 3.2 Fiche Google Maps de l'office d'exemple, posée sur la page de résultats (suggestion de Capucine, accord de Raoudha du 25/10/2026) :
   nom seul, catégorie « Notaire », aucune étoile */
.not-vue__ecran--maps { padding-bottom: 7rem; }
.not-maps { position: absolute; right: -1rem; bottom: 0; width: 17rem; overflow: hidden; border-radius: 12px; background: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #202124; box-shadow: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, 0.7); }
.not-maps p { margin: 0; }
.not-maps__plan { position: relative; height: 6.5rem; overflow: hidden; }
.not-maps__plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.not-maps__epingle { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -16px 0 0 -8px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #9AA0A6; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); }
.not-maps__epingle--vous { z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: -32px 0 0 -15px; background: #EA4335; }
.not-maps__epingle--vous b { rotate: 45deg; font: 700 0.8125rem / 1 var(--f-om-titre); color: #fff; }
.not-maps__infos { padding: 12px 14px 12px; }
.not-maps__nom { font-size: 1.0625rem; }
.not-maps__type, .not-maps__horaire { margin-top: 3px !important; font-size: 0.8125rem; color: #5F6368; }
.not-maps__horaire b { font-weight: 400; color: #188038; }
.not-maps__boutons { display: flex; justify-content: space-between; gap: 4px; margin-top: 12px !important; padding-bottom: 12px; border-bottom: 1px solid #EBEBEB; }
.not-maps__boutons span { display: grid; justify-items: center; gap: 4px; font-size: 0.6875rem; color: #1A73E8; }
.not-maps__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #E8F0FE; }
.not-maps__ico svg { width: 16px; height: 16px; fill: none; stroke: #1A73E8; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.not-maps__ico--itin { background: #1A73E8; } .not-maps__ico--itin svg { stroke: #fff; }
.not-maps__ligne { display: flex; align-items: center; gap: 8px; margin-top: 10px !important; font-size: 0.8125rem; color: #3C4043; }
.not-maps__ligne svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #1A73E8; stroke-width: 2; }
.js .not-vue:not(.est-visible) .not-maps { opacity: 0; }
.js .not-vue.est-visible .not-maps { animation: not-monte 0.6s var(--ease-sortie) 2.4s both; }
.js .not-vue.est-visible .not-maps__epingle--vous { animation: not-pastille 0.45s var(--ease-sortie) 2.9s both; }
@media (max-width: 39.99em) {
  .not-vue__ecran--maps { padding-bottom: 0; }
  .not-maps { position: relative; right: auto; bottom: auto; width: auto; margin: -1rem 0.75rem 0; }
}