/* ═══ LOCALIA V2 — habillage commun des pages intérieures ═══
   Chargé en dernier sur chaque page : il réhabille les gabarits existants
   (villes, blog, offres, pages uniques) sans toucher à leur contenu.
   Charte : crème #F5EFE4, vert profond #17382D, orange #E8672E (accents)
   et #C2511F (fond des boutons orange) ; Playfair Display + Inter. */

:root {
  --v2-cream: #F5EFE4;
  --v2-cream2: #FBF7EE;
  --v2-green: #17382D;
  --v2-green2: #1F4A3C;
  --v2-orange: #E8672E;
  --v2-orange-ink: #C2511F;
  --v2-orange-soft: #F0A274;
  --v2-muted: #4E5650;
  --v2-line: #E4DCCB;
  --v2-on-green: #C9D8CE;
  --v2-on-green-soft: #9FB8A9;
  --v2-serif: 'Playfair Display', Georgia, serif;
  --v2-sans: 'Inter', system-ui, sans-serif;

  /* Anciennes variables des gabarits, remappées sur la charte V2 */
  --vert-racine: #17382D; --vert-localia: #17382D; --vert-vif: #1F4A3C; --vert: #17382D;
  --vert-clair: #C9D8CE; --vert-pale: #E4DCCB;
  --ambre: #C2511F; --ambre-ia: #C2511F;
  --ardoise: #17382D; --texte: #17382D;
  --blanc: #F5EFE4; --blanc-naturel: #F5EFE4; --fond: #F5EFE4; --creme: #FBF7EE;
  --gris: #4E5650; --gris-texte: #4E5650; --muted: #4E5650;
  --green: #17382D; --root: #17382D; --mid: #1F4A3C; --light: #C9D8CE; --mint: #C9D8CE;
  --pale: #E4DCCB; --amber: #C2511F; --ink: #17382D; --paper: #F5EFE4; --grey: #4E5650; --cream: #F5EFE4;
}

html { background: var(--v2-cream); }
body { font-family: var(--v2-sans); background: var(--v2-cream); color: var(--v2-green); }
h1, h2, h3, summary { font-family: var(--v2-serif); color: var(--v2-green); letter-spacing: -.2px; }
h1, h2 { line-height: 1.15; text-wrap: balance; }
h4 { font-family: var(--v2-sans); }
p { color: var(--v2-muted); }
:focus-visible { outline: 3px solid var(--v2-orange); outline-offset: 3px; border-radius: 6px; }

/* Liens dans le texte : vert souligné orange */
main p a, .wrap p a, article p a, article li a, .container p a, section p a, details p a {
  color: var(--v2-green); text-decoration: underline; text-decoration-color: var(--v2-orange);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}

/* ── Barre de menu claire ── */
nav {
  background: rgba(245, 239, 228, .94) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--v2-line);
}
nav .brand, nav > a.brand, .brand {
  font-family: var(--v2-serif) !important; font-weight: 700; color: var(--v2-green) !important; letter-spacing: -.3px;
}
.brand i, .brand .i-green, nav .i-green { color: inherit !important; font-style: normal; }
nav .links a, .nav-links a:not(.cta):not(.btn), nav a:not(.brand):not(.cta):not(.btn):not(.nav-cta):not(.nav-logo) { color: var(--v2-muted) !important; opacity: 1; font-weight: 500; }
nav .links a:hover, .nav-links a:hover { color: var(--v2-green) !important; }
nav .cta, .nav-links .cta, nav a.cta, .nav-cta, nav .btn {
  background: var(--v2-green) !important; color: #FDFBF5 !important; font-family: var(--v2-sans);
  font-weight: 500 !important; border-radius: 999px !important; padding: 10px 20px !important; opacity: 1;
}
nav .cta:hover, .nav-links .cta:hover { background: var(--v2-green2) !important; }

/* ── Bandeau de titre clair (villes, offres, services) ── */
.hero, header.hero {
  background: var(--v2-cream2) !important; color: var(--v2-green) !important;
  border-bottom: 1px solid var(--v2-line); position: relative; overflow: hidden;
}
.hero h1, header.hero h1 { color: var(--v2-green) !important; }
.hero p, header.hero p { color: var(--v2-muted) !important; }
.hero .breadcrumb, .hero .crumb, .breadcrumb, .crumb { color: var(--v2-muted) !important; }
.hero .breadcrumb a, .hero .crumb a, .breadcrumb a, .crumb a {
  color: var(--v2-green) !important; text-decoration: underline; text-decoration-color: var(--v2-orange); text-underline-offset: 3px;
}
.eyebrow {
  background: var(--v2-cream) !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-line);
  font-weight: 500 !important; letter-spacing: .14em !important;
}
.hero-price { background: #fff !important; border: 1px solid var(--v2-line) !important; border-radius: 16px !important; }
.hero-price .amt { font-family: var(--v2-serif) !important; color: var(--v2-green) !important; font-weight: 700 !important; white-space: nowrap; }
.hero-price .per { color: var(--v2-muted) !important; }
.hero-actions a[style] { color: var(--v2-green) !important; text-decoration-color: var(--v2-orange) !important; }

/* Bandeau image des articles de blog : garde l'image, cadre V2 */
article .hero, .wrap .hero { background: var(--v2-cream2) !important; border: 1px solid var(--v2-line) !important; border-radius: 20px !important; box-shadow: 0 24px 48px -30px rgba(23,56,45,.28) !important; }

/* ── Boutons pilule ── */
.btn, a.btn, .button, .cta-btn {
  background: var(--v2-green) !important; color: #FDFBF5 !important; font-family: var(--v2-sans) !important;
  font-weight: 500 !important; border-radius: 999px !important; border: none;
  transition: background .2s, transform .2s;
}
.btn:hover, a.btn:hover { background: var(--v2-green2) !important; transform: translateY(-1px); }
.btn.secondary, a.btn.secondary {
  background: transparent !important; color: var(--v2-green) !important; border: 1.5px solid var(--v2-green) !important;
}

/* ── Cartes, panneaux, chiffres ── */
.card, .panel, .price, .compare, .fact {
  background: #fff; border: 1px solid var(--v2-line) !important; border-radius: 20px !important; box-shadow: none;
}
.card strong, .price strong, .fact .n, .compare h2, .panel h2 { font-family: var(--v2-serif) !important; color: var(--v2-green) !important; }
.fact .n { font-weight: 700; }
.price small, .fact .l, .source { color: var(--v2-muted) !important; }
.checklist span, .checklist li > span:first-child { color: var(--v2-orange) !important; }
.compare a { color: var(--v2-green) !important; border-bottom: 2px solid var(--v2-orange); }
.badge, .badge-top {
  background: var(--v2-cream2) !important; color: var(--v2-green) !important; border: 1px solid var(--v2-line);
  font-weight: 500 !important;
}
.badge-top { background: var(--v2-orange-ink) !important; color: #fff !important; border: none; }

/* Pastilles de liens (villes voisines, liens locaux) */
.puces a, .puces span, .local-links a {
  background: #fff !important; color: var(--v2-green) !important; border: 1px solid var(--v2-line); font-weight: 500 !important;
}
.puces a:hover, .local-links a:hover { border-color: var(--v2-green); }

/* ── Encadrés « En bref » ── */
.encadre {
  background: var(--v2-cream2) !important; border-left: 4px solid var(--v2-orange) !important;
  border-radius: 0 16px 16px 0 !important;
}
.encadre p, .encadre li { color: var(--v2-green) !important; }
.checklist { background: #fff !important; border: 1px solid var(--v2-line) !important; box-shadow: none !important; }

/* ── FAQ ── */
details { background: #fff !important; border: 1px solid var(--v2-line) !important; border-radius: 16px !important; }
summary { color: var(--v2-green) !important; font-weight: 700; }
summary::marker { color: var(--v2-orange); }

/* ── Bloc d'appel final vert ── */
.cta-fin, .final-cta {
  background: var(--v2-green) !important; color: var(--v2-cream) !important; border-radius: 24px !important; box-shadow: none !important;
}
.cta-fin h2, .final-cta h2 { color: var(--v2-cream) !important; }
.cta-fin p, .final-cta p { color: var(--v2-on-green) !important; }
.cta-fin .btn, .final-cta .btn, .cta-fin a.btn, .final-cta a.btn { background: var(--v2-orange-ink) !important; color: #fff !important; }
.cta-fin .btn:hover, .final-cta .btn:hover { background: #A9441A !important; }
.cta-fin a:not(.btn), .final-cta a:not(.btn) { color: var(--v2-cream) !important; text-decoration-color: var(--v2-orange-soft) !important; }

/* Maillage et articles liés */
.maillage, .related { border-top: 1px solid var(--v2-line) !important; }
.maillage a, .related a:not(.card) { color: var(--v2-green) !important; text-decoration: underline; text-decoration-color: var(--v2-orange); text-underline-offset: 3px; }

/* ── Pied de page vert ── */
footer { background: var(--v2-green) !important; color: var(--v2-on-green) !important; }
footer p { color: var(--v2-on-green); }
footer a { color: var(--v2-cream) !important; }
footer a:hover { text-decoration: underline; text-decoration-color: var(--v2-orange-soft); }

/* Logo de type accueil (réalisations, pages légales, store…) */
.nav-logo-text, .nav-logo-text span, .nav-logo-text .i-green {
  font-family: var(--v2-serif) !important; color: var(--v2-green) !important; font-weight: 700 !important;
}

/* Bandeau des pages légales : clair */
.page-hero { background: var(--v2-cream2) !important; border-bottom: 1px solid var(--v2-line); }
.page-hero h1 { color: var(--v2-green) !important; }
.page-hero p, .page-hero .breadcrumb { color: var(--v2-muted) !important; }
.page-hero .breadcrumb a { color: var(--v2-green) !important; text-decoration: underline; text-decoration-color: var(--v2-orange); }

/* Mot accent des grands titres : italique souligné orange, comme l'accueil */
.hero h1 em, header.hero h1 em {
  color: var(--v2-green) !important; font-style: italic !important;
  text-decoration: underline; text-decoration-color: var(--v2-orange); text-decoration-thickness: .08em; text-underline-offset: .12em;
}
.hero-realizations h1 em { color: var(--v2-orange-soft) !important; font-style: italic !important; }
.hero .tag { color: var(--v2-orange-ink) !important; }

/* Encart « besoins » de la page Logiciels, conçu pour un fond sombre */
.needs { background: #fff !important; border: 1px solid var(--v2-line) !important; }
.need { border-top-color: var(--v2-line) !important; }
.need strong { color: var(--v2-green) !important; }
.need small { color: var(--v2-muted) !important; }
.hero-note { color: var(--v2-muted) !important; }

/* Anciens boutons ambre : orange V2, texte blanc lisible */
.card-cta, .btn-dl, .btn-download, .btn-amber, .btn-primary, .badge-top {
  background: var(--v2-orange-ink) !important; color: #fff !important; font-family: var(--v2-sans) !important;
  font-weight: 600 !important; border-radius: 999px !important;
}
.card-cta:hover, .btn-dl:hover, .btn-download:hover, .btn-amber:hover, .btn-primary:hover { background: #A9441A !important; }
.urgency-bar { background: var(--v2-orange-ink) !important; color: #fff !important; }
.urgency-bar * { color: #fff !important; }

/* Bloc « Articles à découvrir » ajouté en bas des articles */
.related .cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px !important; margin-top: 14px; }
.related a.card {
  display: flex !important; flex-direction: column; background: #fff !important; border: 1px solid var(--v2-line) !important;
  border-radius: 16px !important; padding: 18px 20px !important; text-decoration: none !important; box-shadow: none !important;
}
.related a.card:hover { border-color: var(--v2-green) !important; }
.related a.card h3 { font-size: 1.02rem !important; line-height: 1.3; margin: 0 0 8px !important; color: var(--v2-green) !important; }
.related a.card p { font-size: .9rem !important; color: var(--v2-muted) !important; margin: 0 0 12px !important; text-decoration: none !important; }
.related a.card .card-cta {
  margin-top: auto; align-self: flex-start; background: none !important; color: var(--v2-green) !important; padding: 0 0 2px !important;
  border-radius: 0 !important; border-bottom: 2px solid var(--v2-orange); font-size: .88rem !important; font-weight: 600 !important;
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Identité cohérente et espace large, sans étirer les lignes de lecture. */
nav .brand, nav .nav-logo { position:relative; padding-bottom:17px; flex-shrink:0; }
nav .brand::after, nav .nav-logo::after { content:'Thibaut Marie'; position:absolute; left:0; bottom:0; font:500 12px/1.2 var(--v2-sans); color:var(--v2-muted); letter-spacing:0; white-space:nowrap; }
nav .brand:has(img)::after, nav .nav-logo:has(img)::after { left:46px; }
@media (min-width:901px) {
  .wrap, .container, .hero-inner, .footer-inner, .realisations-section { width:92%; max-width:none; margin-left:auto; margin-right:auto; }
  nav .nav-inner { width:92%; }
  article.wrap, article .wrap { max-width:80ch; }
  .wrap > p, .container > p { max-width:75ch; }
}
@media (max-width:600px) {
  nav .brand::after, nav .nav-logo::after { font-size:10px; }
  nav .brand, nav .nav-logo { padding-bottom:14px; }
}