/*
Theme Name:   MCG Child (Kadence)
Theme URI:    https://www.meilleurecartegrise.fr
Description:  Thème enfant de Kadence pour l'annuaire meilleurecartegrise.fr. Toute personnalisation se fait ici ; le contenu et les CPT sont gérés par le plugin MCG Core.
Author:       meilleurecartegrise.fr
Template:     kadence
Version:      0.4.4
Text Domain:  mcg-child
*/

/* ====================================================================
   Design tokens — alignés avec tailwind.config.js
   Les classes utilitaires Tailwind sont compilées dans assets/css/tailwind.min.css.
   Ces variables CSS restent utiles pour :
     - les classes mcg-* legacy non encore migrées (page-en-ligne, page-en-agence,
       single-prestataire, single-guide, taxonomy-departement, 404, paiement-nx)
     - quelques overrides Kadence ponctuels
   ==================================================================== */
:root {
	/* Nouvelle palette (référence : tailwind.config.js) */
	--mcg-ink:        #0E1929;
	--mcg-cream:      #F5F1E8;
	--mcg-cream-100:  #FBF9F3;
	--mcg-cream-300:  #E5DDC6;
	--mcg-accent:     #FF5B2E;
	--mcg-accent-d:   #F0451B;
	--mcg-accent-50:  #FFF1EC;
	--mcg-validate:   #0E7C5A;
	--mcg-muted:      #525B6B;
	--mcg-radius:     14px;
	--mcg-shadow:     0 1px 3px rgba(14,25,41,.06), 0 8px 24px rgba(14,25,41,.06);
	--mcg-shadow-h:   0 6px 16px rgba(255,91,46,.18);

	/* Alias rétro-compat : les classes mcg-* legacy ci-dessous consomment ces noms.
	   À retirer progressivement à chaque migration de template vers Tailwind. */
	--mcg-primary:    var(--mcg-accent);
	--mcg-primary-d:  var(--mcg-accent-d);
	--mcg-dark:       var(--mcg-ink);
	--mcg-line:       var(--mcg-cream-300);
	--mcg-bg-soft:    var(--mcg-cream-100);
	--mcg-bg-blue:    var(--mcg-accent-50);
}

/* ====================================================================
   Boutons / CTA
   ==================================================================== */
.mcg-cta {
	display: inline-block;
	padding: .8rem 1.5rem;
	border-radius: 10px;
	background: var(--mcg-primary);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.mcg-cta:hover { background: var(--mcg-primary-d); transform: translateY(-1px); box-shadow: var(--mcg-shadow-h); color: #fff !important; }
.mcg-cta--primary { background: var(--mcg-primary); }
.mcg-cta--secondary { background: var(--mcg-dark); }
.mcg-cta--secondary:hover { background: #1e293b; }
.mcg-disclosure { font-size: .82rem; color: var(--mcg-muted); margin-top: 1rem; max-width: 52rem; }
.mcg-hero .mcg-disclosure { margin-left: auto; margin-right: auto; }

/* ====================================================================
   Homepage — Hero
   ==================================================================== */
.mcg-hero {
	background: radial-gradient(1200px 400px at 50% -10%, #dbeafe, transparent), linear-gradient(180deg, var(--mcg-bg-blue), #fff);
	padding: 4rem 1rem 3.5rem;
	text-align: center;
	border-bottom: 1px solid var(--mcg-line);
}
.mcg-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; margin: 0 auto; max-width: 18ch; }
.mcg-hero-sub { max-width: 44rem; margin: 1rem auto 1.75rem; color: var(--mcg-muted); font-size: 1.12rem; }
.mcg-hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* Bandeau de réassurance */
.mcg-trust { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 1.75rem auto 0; color: var(--mcg-ink); font-weight: 600; font-size: .95rem; }
.mcg-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.mcg-trust span::before { content: "✓"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: #dcfce7; color: #166534; font-size: .75rem; }

/* ====================================================================
   Sections génériques
   ==================================================================== */
.mcg-home > section { margin: 3rem auto; }
.mcg-home h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 1.2rem; }

/* Deux parcours */
.mcg-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.mcg-path-card {
	border: 1px solid var(--mcg-line);
	border-radius: var(--mcg-radius);
	padding: 1.75rem;
	background: #fff;
	box-shadow: var(--mcg-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
	border-top: 4px solid var(--mcg-primary);
}
.mcg-path-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,23,42,.10); }
.mcg-path-card h2 { margin-top: 0; }
.mcg-path-card p { color: var(--mcg-muted); margin-bottom: 1.25rem; }

/* Comparatif */
.mcg-compare { background: var(--mcg-bg-soft); border: 1px solid var(--mcg-line); border-radius: var(--mcg-radius); padding: 2rem; }
.mcg-compare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--mcg-shadow); }
.mcg-compare-table th, .mcg-compare-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--mcg-line); }
.mcg-compare-table thead th { background: var(--mcg-dark); color: #fff; }
.mcg-compare-table tbody tr:nth-child(even) td { background: var(--mcg-bg-soft); }
.mcg-compare-table td:first-child { font-weight: 600; }

/* Guides */
.mcg-guide-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem; }
.mcg-guide-list a {
	display: block; padding: .9rem 1.1rem; background: #fff;
	border: 1px solid var(--mcg-line); border-radius: 10px; text-decoration: none;
	font-weight: 500; color: var(--mcg-ink); transition: border-color .12s, box-shadow .12s, transform .12s;
}
.mcg-guide-list a::before { content: "📄"; margin-right: .5rem; }
.mcg-guide-list a:hover { border-color: var(--mcg-primary); box-shadow: var(--mcg-shadow); transform: translateY(-2px); }

/* Maillage départements (home) */
.mcg-dept-links .mcg-cta { margin-top: 1.25rem; }

/* ====================================================================
   Grilles & chips départements
   ==================================================================== */
.mcg-dept-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.mcg-dept-grid a {
	display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem;
	border: 1px solid var(--mcg-line); border-radius: 10px; text-decoration: none;
	background: #fff; color: var(--mcg-ink); transition: border-color .12s, box-shadow .12s;
}
.mcg-dept-grid a:hover { border-color: var(--mcg-primary); box-shadow: var(--mcg-shadow); }
.mcg-dept-code { font-weight: 700; color: var(--mcg-primary); min-width: 2.4rem; }
.mcg-dept-count { margin-left: auto; font-size: .72rem; background: var(--mcg-bg-blue); color: var(--mcg-primary-d); border-radius: 999px; padding: .05rem .55rem; font-weight: 600; }
.mcg-dept-inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mcg-dept-inline a { padding: .35rem .8rem; border: 1px solid var(--mcg-line); border-radius: 999px; text-decoration: none; font-size: .9rem; background: #fff; transition: border-color .12s, background .12s; }
.mcg-dept-inline a:hover { border-color: var(--mcg-primary); background: var(--mcg-bg-blue); }

/* ====================================================================
   Fiches prestataires
   ==================================================================== */
.mcg-provider-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mcg-provider-card {
	border: 1px solid var(--mcg-line); border-radius: var(--mcg-radius);
	padding: 1.25rem 1.4rem; background: #fff; box-shadow: var(--mcg-shadow);
	transition: transform .15s, box-shadow .15s;
}
.mcg-provider-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15,23,42,.10); }
.mcg-provider-card h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.mcg-provider-card .mcg-address { color: var(--mcg-muted); font-size: .92rem; margin: 0 0 .5rem; }
.mcg-provider-card .mcg-price { font-weight: 700; color: var(--mcg-dark); }
.mcg-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.mcg-badge { font-size: .72rem; padding: .2rem .6rem; border-radius: 999px; background: var(--mcg-bg-blue); color: var(--mcg-primary-d); font-weight: 600; }
.mcg-badge--online { background: #ecfeff; color: #155e75; }
.mcg-badge--onsite { background: #f0fdf4; color: #166534; }
.mcg-unverified { font-size: .78rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; padding: .25rem .6rem; border-radius: 6px; display: inline-block; }

/* Fiche détaillée */
.mcg-prestataire-meta { list-style: none; padding: 0; }
.mcg-prestataire-meta li { padding: .35rem 0; border-bottom: 1px dashed var(--mcg-line); }
.mcg-services { columns: 2; }
.mcg-source { font-size: .82rem; color: var(--mcg-muted); margin-top: 1.5rem; }

/* ====================================================================
   Département / guides / commun
   ==================================================================== */
.mcg-dept-header { margin-bottom: 1.5rem; }
.mcg-dept-intro { color: var(--mcg-ink); }
.mcg-dept-cta, .mcg-dept-maillage { margin-top: 2.5rem; }
.mcg-empty { background: var(--mcg-bg-soft); border: 1px dashed var(--mcg-line); padding: 1.25rem; border-radius: 10px; }
.mcg-pagination { margin: 1.5rem 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.mcg-pagination .page-numbers { padding: .4rem .75rem; border: 1px solid var(--mcg-line); border-radius: 8px; text-decoration: none; }
.mcg-pagination .page-numbers.current { background: var(--mcg-primary); color: #fff; border-color: var(--mcg-primary); }

.mcg-chapo { font-size: 1.15rem; color: var(--mcg-ink); font-weight: 500; }
.mcg-faq-item { border: 1px solid var(--mcg-line); border-radius: 10px; padding: .85rem 1rem; margin-bottom: .6rem; background: #fff; }
.mcg-faq-item summary { font-weight: 600; cursor: pointer; }

/* Fil d'Ariane */
.mcg-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .5rem 0 1.25rem; font-size: .85rem; color: var(--mcg-muted); }
.mcg-breadcrumb li + li::before { content: "›"; margin-right: .4rem; color: #cbd5e1; }
.mcg-breadcrumb a { text-decoration: none; }

/* 404 */
.mcg-404-links { line-height: 2; font-size: 1.05rem; }

/* Index par région */
.mcg-region { margin: 2rem 0; }
.mcg-region h2 { font-size: 1.15rem; border-left: 4px solid var(--mcg-primary); padding-left: .6rem; margin-bottom: .9rem; }

/* Guides liés */
.mcg-related { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mcg-line); }
.mcg-related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mcg-related a { padding: .4rem .85rem; border: 1px solid var(--mcg-line); border-radius: 999px; text-decoration: none; background: #fff; }
.mcg-related a:hover { border-color: var(--mcg-primary); background: var(--mcg-bg-blue); }

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 782px) {
	.mcg-paths { grid-template-columns: 1fr; }
	.mcg-services { columns: 1; }
	.mcg-trust { gap: 1rem; }
	.mcg-compare { padding: 1.25rem; }
}

/* ====================================================================
   Correctif : héritage de couleur des titres sur fond sombre
   --------------------------------------------------------------------
   Kadence applique `color: var(--global-palette3)` (#1A202C) DIRECTEMENT
   sur h1–h6. Une déclaration directe bat toujours l'héritage : nos
   sections sombres (`.bg-ink.text-cream`) voyaient donc leurs titres
   rendus en ink sur ink (contraste ~1.1:1, texte invisible).

   On rétablit l'héritage pour les titres placés dans un conteneur qui
   déclare lui-même sa couleur de texte. Règle générique : tout nouveau
   bloc sombre est couvert sans retoucher son markup.
   ==================================================================== */
.text-cream :is(h1, h2, h3, h4, h5, h6),
.text-white :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* ====================================================================
   Menu mobile (<details>/<summary>, sans JavaScript)
   ==================================================================== */
.mcg-burger > summary {
	list-style: none;      /* Firefox */
}
.mcg-burger > summary::-webkit-details-marker,
.mcg-burger > summary::marker {
	display: none;         /* triangle natif Safari/Chrome */
	content: "";
}
.mcg-burger > summary:focus-visible {
	outline: 2px solid var(--mcg-accent, #FF5B2E);
	outline-offset: 2px;
}
/* Bascule hamburger <-> croix selon l'état ouvert */
.mcg-burger .mcg-burger-close { display: none; }
.mcg-burger[open] .mcg-burger-open { display: none; }
.mcg-burger[open] .mcg-burger-close { display: block; }

/* ====================================================================
   Contenu éditorial des fiches et guides (.mcg-prose)
   Kadence ne style pas le contenu hors éditeur de blocs ; on définit
   ici le rythme typographique du texte long.
   ==================================================================== */
.mcg-prose { color: rgba(14, 25, 41, .78); line-height: 1.75; }
.mcg-prose > * + * { margin-top: 1.1em; }
.mcg-prose p { font-size: 1.0625rem; }
.mcg-prose strong { color: var(--mcg-ink, #0E1929); font-weight: 600; }
.mcg-prose em { font-style: italic; }
.mcg-prose a {
	color: var(--mcg-accent, #FF5B2E);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mcg-prose a:hover { color: #E5411A; }
.mcg-prose h2 {
	margin-top: 2em;
	font-family: Fraunces, ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: -.01em;
	color: var(--mcg-ink, #0E1929);
}
.mcg-prose h3 {
	margin-top: 1.6em;
	font-family: Fraunces, ui-serif, Georgia, serif;
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--mcg-ink, #0E1929);
}
.mcg-prose ul, .mcg-prose ol { padding-left: 1.25rem; }
.mcg-prose ul { list-style: disc; }
.mcg-prose ol { list-style: decimal; }
.mcg-prose li + li { margin-top: .4em; }

/* ====================================================================
   Police de corps
   Inter etait declaree dans tailwind.config.js et chargee sur chaque page,
   mais la classe font-sans n'etait posee nulle part : le corps de texte
   tournait sur la pile systeme de Kadence. On telechargeait donc une police
   sans jamais l'afficher. La regle ci-dessous applique enfin le design.
   ==================================================================== */
body,
button, input, select, textarea {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ====================================================================
   Champs de formulaire (.mcg-input)
   Kadence style les champs avec sa propre palette ; on aligne sur le
   design system sans dépendre de ses réglages.
   ==================================================================== */
.mcg-input {
	display: block;
	width: 100%;
	margin-top: .375rem;
	padding: .625rem .75rem;
	font-size: .9375rem;
	font-family: inherit;
	color: var(--mcg-ink, #0E1929);
	background: #FAF8F3;
	border: 1px solid #E4DDCD;
	border-radius: .5rem;
	transition: border-color .15s, box-shadow .15s;
}
textarea.mcg-input { min-height: 3.5rem; resize: vertical; line-height: 1.55; }
.mcg-input::placeholder { color: rgba(14, 25, 41, .38); }
.mcg-input:focus {
	outline: none;
	border-color: var(--mcg-accent, #FF5B2E);
	box-shadow: 0 0 0 3px rgba(255, 91, 46, .16);
	background: #fff;
}
.mcg-input:user-invalid { border-color: #C2410C; }

/* Le <legend> flotte sur la bordure du fieldset */
fieldset > legend { float: none; width: auto; }

/* ====================================================================
   Réponses de FAQ (accordéons)
   ==================================================================== */
.mcg-faq-reponse > * + * { margin-top: .75em; }
.mcg-faq-reponse a {
	color: var(--mcg-accent, #FF5B2E);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mcg-faq-reponse a:hover { color: #E5411A; }

/* Masque le marqueur natif des <summary> (Safari + Firefox) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker,
details > summary::marker { display: none; content: ""; }
details > summary:focus-visible {
	outline: 2px solid var(--mcg-accent, #FF5B2E);
	outline-offset: 3px;
	border-radius: .25rem;
}

/* ====================================================================
   Accessibilité : accent lisible en petit texte sur fond clair
   --------------------------------------------------------------------
   L'orange de marque #FF5B2E ne donne que 2,57 à 3,09:1 sur nos fonds
   clairs — sous le seuil WCAG AA de 4,5:1 pour du texte courant. Il
   reste parfait sur fond sombre (5,71:1) et en aplat (texte blanc sur
   orange), donc on ne change pas la marque : on change uniquement la
   teinte du TEXTE accentué posé sur fond clair.

   #B03A0A : 6,08 sur blanc, 5,39 sur cream, 5,06 sur cream-200.
   Le logo en est exempté — une marque n'est pas soumise au critère.
   ==================================================================== */
:root { --mcg-accent-text: #B03A0A; }

.text-accent:not(.mcg-logo-accent) { color: var(--mcg-accent-text); }

/* Sur fond sombre, l'orange vif repasse : il y est largement conforme. */
.text-cream .text-accent,
.bg-ink .text-accent,
.bg-ink-950 .text-accent,
.mcg-logo-accent { color: var(--mcg-accent, #FF5B2E); }

.mcg-prose a,
.mcg-faq-reponse a { color: var(--mcg-accent-text); }
.mcg-prose a:hover,
.mcg-faq-reponse a:hover { color: #8F2E08; }

/* --------------------------------------------------------------------
   Boutons pleins : le blanc sur l'orange vif ne donne que 3,09:1.
   On bascule l'aplat sur accent-700 (#C7340F, 5,35:1) — un ton déjà
   présent dans le design system, pas une couleur inventée. L'orange vif
   reste partout où il n'est pas support de texte : puces, barres
   d'accent, halos, bordures.
   -------------------------------------------------------------------- */
.bg-accent { background-color: #C7340F; }
.hover\:bg-accent-600:hover { background-color: #A82B0C; }

/* Éléments purement décoratifs : on garde la teinte de marque. */
.mcg-accent-bar::after,
.rounded-full.bg-accent,
.rounded-l-md.bg-accent { background-color: var(--mcg-accent, #FF5B2E); }

/* --------------------------------------------------------------------
   Carte Leaflet
   -------------------------------------------------------------------- */
#mcg-carte { background: #EFEADC; }
#mcg-carte .leaflet-popup-content { margin: .75rem .9rem; font-size: .875rem; line-height: 1.5; }
#mcg-carte .leaflet-popup-content a { color: var(--mcg-accent-text, #B03A0A); }
.mcg-popup-actions { margin-top: .6rem; display: flex; gap: .75rem; }
.mcg-popup-actions a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------
   Corps d'un guide : ancres décalées sous le header collant
   -------------------------------------------------------------------- */
.mcg-guide-corps h2 { scroll-margin-top: 6rem; }
.mcg-guide-corps h2:first-child { margin-top: 0; }
.mcg-guide-corps table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.25em;
	font-size: .9375rem;
}
.mcg-guide-corps th,
.mcg-guide-corps td {
	border: 1px solid #E4DDCD;
	padding: .55rem .75rem;
	text-align: left;
}
.mcg-guide-corps th { background: #FBF9F3; font-weight: 600; }
.mcg-guide-corps blockquote {
	border-left: 3px solid var(--mcg-accent, #FF5B2E);
	padding-left: 1rem;
	color: rgba(14, 25, 41, .7);
}