/*
Theme Name: Annuaire
Description: Theme mince pour les annuaires de metiers JPL (Couvreurs Verifies et la famille). Systeme de design "Le registre, pas la brochure" (DESIGN.md v1.0). Aucune dependance, aucun jQuery.
Author: JPL Digital Growth Group
Version: 0.3.0
Requires PHP: 8.0
*/

@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- Couleurs de base ---- */
  --base: #F7F5F1;
  --surface: #FFFFFF;
  --ink: #1C1B18;
  --muted: #5C5A54;
  --line: #E3E0D8;
  --line-strong: #8B877D;

  /* ---- Semantiques ---- */
  --verified: #1E6B4E;
  --verified-bg: #E8F2ED;
  --cta: #B3461D;
  --cta-hover: #96390F;
  --sponsored: #8A5A00;
  --sponsored-bg: #F6EEDD;
  --error: #A61B1B;
  --error-bg: #F9ECEC;
  --footer-bg: #22312B;
  --focus: #1E6B4E;

  /* ---- Espacement (base 4px) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-6: 1.5rem;  --sp-8: 2rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* ---- Rayons ---- */
  --r-sm: 4px;
  --r-md: 8px;

  /* ---- Ombres ---- */
  --shadow-card: 0 1px 2px rgba(28, 27, 24, 0.06);
  --shadow-raise: 0 2px 8px rgba(28, 27, 24, 0.10);

  --tap: 44px;

  --font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Echelle fluide ---- */
  --t-1: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --t-2: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);
  --t-3: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --t-4: clamp(1.375rem, 1.24rem + 0.60vw, 1.625rem);
  --t-5: clamp(1.75rem, 1.51rem + 1.05vw, 2.25rem);
  --t-6: clamp(2.125rem, 1.77rem + 1.60vw, 2.875rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-2);
  font-synthesis: none;
  line-height: 1.6;
  color: var(--ink);
  background: var(--base);
}

img { max-width: 100%; height: auto; }

a { color: var(--cta); text-underline-offset: 3px; }
a:hover { color: var(--cta-hover); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.25; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--t-5); line-height: 1.15; margin: 0 0 var(--sp-3); }
.h1-accueil { font-size: var(--t-6); line-height: 1.15; }
h2 { font-size: var(--t-4); margin: var(--sp-8) 0 var(--sp-4); }
h3 { font-size: var(--t-3); }
p { text-wrap: pretty; }

.prose, .prose p, .section p { max-width: 42rem; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--sp-4); }

.screen-reader {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.skip-link { position: absolute; left: -9999px; background: var(--surface); padding: var(--sp-2) var(--sp-4); }
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); z-index: 100; }

/* ---- 4.1 En-tete ---- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
}
.brand {
  font-weight: 700;
  font-size: var(--t-3);
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand .brand-verified { color: var(--verified); }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; padding: 0; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-1);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 4.2 Heros ---- */

.hero { background: var(--base); padding: var(--sp-8) 0; }
.hero .surtitre {
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-2);
}
.hero .hero-sub { font-size: var(--t-3); max-width: 42rem; margin: 0 0 var(--sp-6); }
.hero .preuve { font-size: var(--t-1); color: var(--muted); margin: 0 0 var(--sp-6); }
.hero .hero-actions { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 26rem; }
.hero .hero-actions .btn { width: 100%; }

/* Selecteur de ville (accueil) */
.ville-jump { display: flex; flex-wrap: wrap; gap: var(--sp-3); max-width: 34rem; }
.ville-jump select {
  flex: 1 1 14rem;
  min-height: 48px;
  font: inherit;
  font-size: max(1rem, var(--t-2));
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
}

/* ---- 4.8 Boutons et liens ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta);
  color: #fff;
  font: inherit;
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: var(--sp-3) var(--sp-6);
  min-height: 48px;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover, .btn:focus { background: var(--cta-hover); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
}
.btn-secondary:hover, .btn-secondary:focus { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn-inverse {
  background: transparent;
  color: var(--base);
  border: 1.5px solid var(--base);
}
.btn-inverse:hover, .btn-inverse:focus { background: rgba(247, 245, 241, 0.12); color: #fff; }

/* Bouton d'appel compact de l'en-tete (hi-fi 1a/1b) */
.btn-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--t-1);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 120ms ease;
}
.btn-tel:hover, .btn-tel:focus { color: var(--ink); border-color: var(--ink); }

/* Libelle telephone responsif : "Appeler" en mobile, numero en clair des 48rem (DESIGN.md 4.8) */
.tel-long { display: none; }
@media (min-width: 48rem) {
  .tel-court { display: none; }
  .tel-long { display: inline; }
}

/* ---- 4.5 Badges ---- */

.badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--t-1);
  font-weight: 700;
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  min-height: 24px;
  border-radius: var(--r-sm);
}
.badge-verifie { color: var(--verified); background: var(--verified-bg); }
.badge-verifie svg { flex: none; }
.badge-vedette { color: var(--sponsored); background: transparent; border: 1px solid var(--sponsored); }
.badge-fait { color: var(--muted); background: transparent; border: 1px solid var(--line); font-weight: 400; }

/* ---- 4.3 Carte d'inscription ---- */

.cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: var(--sp-6) 0; padding: 0; list-style: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  transition: border-color 120ms ease;
}
.card:hover { border-color: var(--line-strong); }
.card h3 { margin: 0 0 var(--sp-2); font-size: var(--t-3); }
.card h3 .rang { color: var(--muted); font-weight: 400; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card .licence, .card .faits { font-size: var(--t-1); color: var(--muted); margin: 0 0 var(--sp-2); }
.card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.card-actions .btn { min-height: var(--tap); font-size: var(--t-1); padding: var(--sp-2) var(--sp-3); }
.card-actions .btn:first-child { flex: 1 1 auto; }
.note-classement { font-size: var(--t-1); color: var(--muted); }

/* ---- 4.4 Bloc Partenaire recommande ---- */

.partenaire {
  background: var(--surface);
  border: 1px solid var(--sponsored);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raise);
  margin: var(--sp-6) 0;
  overflow: hidden;
}
.partenaire .barrette {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  background: var(--sponsored-bg);
  color: var(--sponsored);
  font-size: var(--t-1);
  padding: var(--sp-2) var(--sp-4);
}
.partenaire .barrette strong { font-weight: 700; }
.partenaire .barrette .mention { font-weight: 400; }
.partenaire .corps { padding: var(--sp-4); }
.partenaire h2, .partenaire h3 { margin: 0 0 var(--sp-2); font-size: var(--t-3); }
.partenaire .p-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.partenaire .p-actions .btn { width: 100%; }

/* ---- 4.6 Accordeon FAQ ---- */

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  font-size: var(--t-3);
  font-weight: 700;
  padding: var(--sp-4) var(--sp-8) var(--sp-4) 0;
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: var(--sp-2);
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 160ms ease;
}
.faq details[open] summary::after { transform: translateY(-35%) rotate(225deg); }
.faq summary:hover { color: var(--cta); }
.faq details > p { margin: 0 0 var(--sp-4); max-width: 42rem; }

/* ---- 4.7 Formulaire de soumission ---- */

.lead-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin: var(--sp-8) 0;
}
.lead-form h2 { margin-top: 0; }
.lead-form .sous-titre { font-size: var(--t-1); color: var(--muted); margin: 0 0 var(--sp-4); }

.acf-form .acf-field { margin-bottom: var(--sp-4); }
.acf-form .acf-label label { font-size: var(--t-1); font-weight: 700; }
.acf-form .acf-required { color: var(--error); }
.acf-form input[type="text"],
.acf-form input[type="email"],
.acf-form input[type="url"],
.acf-form input[type="number"],
.acf-form select,
.acf-form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: max(1rem, var(--t-2));
  background: var(--surface);
  color: var(--ink);
}
.acf-form textarea { min-height: 7rem; }
.acf-form .acf-error input, .acf-form .acf-error textarea, .acf-form .acf-error select { border: 2px solid var(--error); }
.acf-form .acf-notice, .acf-form .acf-error-message {
  font-size: var(--t-1);
  color: var(--error);
  background: var(--error-bg);
  border: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
.acf-form .acf-form-submit .button,
.acf-form .acf-form-submit [type="submit"] {
  background: var(--cta);
  color: #fff;
  font: inherit;
  font-size: var(--t-2);
  font-weight: 700;
  border: 0;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-6);
  min-height: 48px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.acf-form .acf-form-submit .button:hover { background: var(--cta-hover); }

/* Panneau de succes (page merci) */
.panneau-succes {
  background: var(--verified-bg);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  max-width: 42rem;
}
.panneau-succes h1, .panneau-succes h2 { color: var(--verified); margin-top: 0; }

/* ---- 4.9 Barre d'action collante (mobile) ---- */

.sticky-scope { position: relative; }
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: var(--sp-2);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--sp-2);
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
  margin: 0 calc(-1 * var(--sp-4));
}
.action-bar .btn { flex: 1 1 50%; font-size: var(--t-1); padding: var(--sp-3) var(--sp-2); }

/* ---- Etapes numerotees ---- */

.steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding: 0; margin: var(--sp-6) 0; list-style: none; counter-reset: etape; }
.steps li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  counter-increment: etape;
}
.steps li::before {
  content: counter(etape);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--verified);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: var(--sp-3);
}

/* ---- Bandeau entrepreneurs ---- */

.bandeau-inscription {
  background: var(--verified-bg);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin: var(--sp-8) 0;
}
.bandeau-inscription h2 { margin-top: 0; }

/* ---- Liste de villes (accueil) ---- */

.liste-villes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: var(--sp-4) 0;
  padding: 0;
}
.liste-villes a { display: inline-flex; align-items: center; min-height: var(--tap); }

@media (min-width: 64rem) {
  .liste-villes { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Tableaux (section prix) ---- */

.section table {
  border-collapse: collapse;
  width: 100%;
  max-width: 42rem;
  font-size: var(--t-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.section th, .section td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--line); }
.section th { color: var(--muted); font-size: var(--t-1); font-weight: 700; }
.section th:last-child, .section td:last-child { text-align: right; white-space: nowrap; }
.section tr:last-child td { border-bottom: 0; }

/* ---- Fil d'Ariane / faits ---- */

.ariane { font-size: var(--t-1); color: var(--muted); margin: var(--sp-4) 0 0; }
.ariane a { color: var(--muted); }
.faits-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); max-width: 42rem; margin: var(--sp-4) 0; }
.faits-dl dt { font-size: var(--t-1); font-weight: 700; }
.faits-dl dd { margin: 0; font-size: var(--t-2); }
.note-source { font-size: var(--t-1); color: var(--muted); }

/* ---- Sections ---- */

.section { padding: var(--sp-4) 0; }
.contact-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-4) 0; }

/* ---- 4.10 Pied de page ---- */

.site-footer {
  background: var(--footer-bg);
  color: var(--base);
  margin-top: var(--sp-16);
  padding: var(--sp-12) 0;
  font-size: var(--t-1);
  line-height: 1.7;
}
.site-footer a { color: var(--base); }
.site-footer h2 {
  color: #fff;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--sp-1); }
.footer-villes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-4); }
.site-footer .mentions { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid rgba(247, 245, 241, 0.25); color: var(--base); }

/* ---- 4.11 Banniere de consentement ---- */

.consent {
  position: fixed;
  bottom: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  max-width: 28rem;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raise);
  padding: var(--sp-4);
  z-index: 50;
  font-size: var(--t-1);
}
.consent p { margin: 0 0 var(--sp-3); }
.consent .actions { display: flex; gap: var(--sp-2); }
.consent .actions .btn { flex: 1 1 50%; min-height: var(--tap); font-size: var(--t-1); }

/* ---- Points de rupture ---- */

@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1.4fr; }
  .footer-villes { grid-template-columns: repeat(3, 1fr); }
  .action-bar { display: none; }
  .hero .hero-actions { flex-direction: row; max-width: none; }
  .hero .hero-actions .btn { width: auto; }
}

@media (min-width: 64rem) {
  .colonnes { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-8); align-items: start; }
  .colonnes .colonne-form { position: sticky; top: var(--sp-6); }
  .colonnes .colonne-form .lead-form { margin: 0; }
  .colonnes .cards { grid-template-columns: 1fr; }
  .masque-desktop { display: none; }
  /* Cartes et bloc partenaire : grille 1fr/auto, colonne d'actions a droite (hi-fi 1b) */
  .colonnes .card { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; }
  .colonnes .card-actions { flex-direction: column; min-width: 230px; margin: 0; }
  .colonnes .card-actions .btn { flex: none; width: 100%; }
  .partenaire .corps { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; }
  .partenaire .p-actions { min-width: 230px; margin: 0; }
}

/* ---- 6. Mouvement ---- */

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