/* Lot 1 · Se renseigner, Le CRA, Contact, FAQ, pages légales (src/pages/le-cra.mjs). */

/* Fonds sombres (marine, bleu) : titres blancs, textes secondaires clairs, surtitres turquoise. */
.cra-sombre h1, .cra-sombre h2, .cra-sombre h3 { color: #fff; }
.cra-sombre .has-encre-2-color { color: var(--wp--preset--color--ciel-clair) !important; }
.cra-sombre .has-turquoise-fonce-color { color: var(--wp--preset--color--turquoise) !important; }
.cra-sombre .has-encre-2-color, .cra-sombre p { opacity: 1; }
.cra-sombre a:not(.wp-element-button) { color: #fff; }
.cra-sombre .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,0.55); background: transparent; }
.cra-sombre .has-turquoise-clair-background-color.has-turquoise-fonce-color { color: var(--wp--preset--color--turquoise-fonce) !important; }
.cra-chapo { max-width: 46rem; }

/* Grilles de cartes : 1 colonne sous 600 px par défaut, 2 colonnes pour les petites cartes. */
.cra-grille { gap: 1.25rem !important; }
.cra-grille > * { margin: 0 !important; }
@media (max-width: 781px) {
	.cra-grille { grid-template-columns: 1fr !important; }
	.cra-grille.cra-missions, .cra-grille.cra-equipe, .cra-grille.cra-seances { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
	.cra-missions > .wp-block-group, .cra-equipe > .wp-block-group, .cra-seances > .wp-block-group { padding: 1rem !important; }
	.cra-missions h3 { font-size: 1rem; }
}

/* Niveaux du diagnostic et cartes d'accès (fond marine) */
.cra-niveau { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.cra-niveau > * + * { margin-top: 0.75rem; }
.cra-niveau p { color: var(--wp--preset--color--ciel-clair); margin: 0; }
.cra-niveau--cra { background: var(--wp--preset--color--turquoise); border-color: var(--wp--preset--color--turquoise); }
.cra-niveau--cra h3, .cra-sombre .cra-niveau--cra p { color: var(--wp--preset--color--marine) !important; }
.cra-etiquette-niveau { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; background: #fff; color: var(--wp--preset--color--marine) !important; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.cra-niveau--cra .cra-etiquette-niveau { background: var(--wp--preset--color--marine); color: #fff !important; }

/* Parcours en étapes numérotées */
.cra-etapes { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: etape; display: grid; gap: 1.6rem; }
.cra-etapes li { counter-increment: etape; position: relative; padding-left: 3.6rem; color: var(--wp--preset--color--encre-2); font-size: 0.92rem; }
.cra-etapes li strong { display: inline-block; color: var(--wp--preset--color--marine); font-size: 1.05rem; margin-bottom: 0.3rem; }
.cra-etapes li::before { content: counter(etape); position: absolute; left: 0; top: -0.1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--ciel-clair); color: var(--wp--preset--color--marine); font-weight: 800; }
.cra-etapes li:first-child::before { background: var(--wp--preset--color--bleu); color: #fff; }
.cra-etapes li:not(:last-child)::after { content: ''; position: absolute; left: 1.2rem; top: 2.5rem; bottom: -1.5rem; width: 1px; background: #d5dee8; }

/* Listes de documents à télécharger */
.cra-docs { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.cra-docs li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid #e3e9f0; font-size: 0.92rem; }
.cra-docs li::before { content: '↓'; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 6px; display: grid; place-items: center; background: var(--wp--preset--color--turquoise-clair); color: var(--wp--preset--color--turquoise-fonce); font-weight: 800; font-size: 0.8rem; }
.cra-docs li a { flex: 1; font-weight: 700; text-decoration: none; color: var(--wp--preset--color--marine); }
.cra-docs li a:hover { text-decoration: underline; }
.cra-docs li span { color: var(--wp--preset--color--encre-2); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.cra-docs--grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.5rem; }
.cra-docs--grille li { border: 1px solid #e3e9f0; border-radius: 14px; padding: 0.9rem 1rem; }
@media (max-width: 781px) { .cra-docs--grille { grid-template-columns: 1fr; } }

/* Questions fréquentes et relevés : bloc Détails natif en accordéon */
.cra-faq { border-bottom: 1px solid #dfe6ee; padding: 0; margin: 0 !important; }
.cra-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-weight: 700; color: var(--wp--preset--color--marine); }
.cra-faq summary::-webkit-details-marker { display: none; }
.cra-faq summary::after { content: '+'; flex: 0 0 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--ciel-clair); color: var(--wp--preset--color--bleu); font-size: 1.1rem; }
.cra-faq[open] summary { color: var(--wp--preset--color--turquoise-fonce); }
.cra-faq[open] summary::after { content: '−'; background: var(--wp--preset--color--marine); color: #fff; }
.cra-faq > :not(summary) { margin: 0 0 1.1rem; }
.cra-faq summary:focus-visible { outline: 2px solid var(--wp--preset--color--bleu); outline-offset: 2px; }

/* Bandeau « Une question ? » */
.cra-question .wp-block-heading { margin: 0 0 0.4rem; }
.cra-question p { margin: 0; }
.cra-boutons-droite { justify-content: flex-end; }
.cra-question .wp-block-button__link { padding: 0.75rem 1.3rem; }
@media (max-width: 781px) { .cra-boutons-droite { justify-content: flex-start; } .cra-question { padding: 1.5rem !important; } }

/* Cartes de lien des pages parentes */
.cra-carte-lien h3 a { text-decoration: none; color: var(--wp--preset--color--marine); }
.cra-carte-lien h3 a:hover { text-decoration: underline; }
.cra-carte-lien > * + * { margin-top: 0.75rem; }

/* Petites étiquettes en capitales (équipe, bureau, séances) */
.cra-etiquette-groupe { margin: 0 0 0.4rem !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--turquoise-fonce); }
.cra-equipe p { margin: 0; line-height: 1.7; }
.cra-personne p, .cra-point p { margin: 0.15rem 0 0; }
.cra-point + .cra-point { margin-top: 0.75rem; }
.cra-missions > .wp-block-group > * + * { margin-top: 0.5rem; }

/* Séances du COS */
.cra-seances h3 { margin: 0.2rem 0 0.6rem; }
.cra-statut { display: inline-block; margin: 0; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--wp--preset--color--fond); font-size: 0.72rem; font-weight: 700; color: var(--wp--preset--color--encre-2); }
.cra-statut--prochaine { background: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--marine); }
.cra-seances .has-bleu-background-color .cra-etiquette-groupe { color: var(--wp--preset--color--turquoise); }

/* Coordonnées et accès */
.cra-plan-carte .leaflet-map { height: 440px !important; border-radius: 20px; border: 1px solid #e3e9f0; z-index: 0; }
@media (max-width: 781px) { .cra-plan-carte .leaflet-map { height: 300px !important; } }
.cra-coord { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--wp--preset--color--encre-2); }
.cra-coord strong { color: var(--wp--preset--color--marine); }
.cra-coord a { text-decoration: none; }
.cra-horaires { margin: 1rem 0 !important; }
.cra-horaires p { margin: 0.3rem 0 0; display: flex; justify-content: space-between; gap: 0.75rem; }
.cra-horaires p span { color: var(--wp--preset--color--encre-2); }
.cra-horaires p strong { color: var(--wp--preset--color--marine); }
.cra-interlocuteur { display: grid !important; grid-template-columns: 1.6fr 1fr 1.3fr; align-items: center; gap: 0.5rem 1rem !important; }
.cra-interlocuteur + .cra-interlocuteur { margin-top: 0.75rem !important; }
.cra-interlocuteur p { margin: 0; }
.cra-interlocuteur a { text-decoration: none; }
@media (max-width: 781px) { .cra-interlocuteur { grid-template-columns: 1fr 1fr; } .cra-interlocuteur > p:first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .cra-interlocuteur { grid-template-columns: 1fr; } }

/* Contact */
.cra-avant-ecrire p { font-size: 0.92rem; color: var(--wp--preset--color--encre-2); }
.cra-avant-ecrire strong { color: var(--wp--preset--color--marine); }
.cra-sombre p a { text-decoration: none; }

/* Pages de texte (données personnelles, cookies, accessibilité) */
.cra-texte-legal p, .cra-texte-legal li { color: var(--wp--preset--color--encre-2); }
.cra-texte-legal li::marker { color: var(--wp--preset--color--turquoise); }
.cra-texte-legal h2 { margin-top: 2.25rem; }
.cra-texte-legal h2:first-child { margin-top: 0; }

/* Photo portrait de petite taille : largeur plafonnée pour rester nette. */
.wp-block-image img[src$="famille-tablette.webp"] { max-width: 340px; display: block; margin-inline: auto; }
.cra-sombre .cra-niveau--cra .cra-etiquette-niveau { color: #fff !important; }
.cra-niveau h3 { margin-top: 0.9rem; }
/* Cartes blanches posées sur fond sombre : on revient aux couleurs du fond clair. */
.cra-sombre .has-blanc-background-color .has-encre-2-color { color: var(--wp--preset--color--encre-2) !important; }
.cra-sombre .has-blanc-background-color h3 { color: var(--wp--preset--color--marine); }
.cra-sombre .has-blanc-background-color .has-turquoise-fonce-color, .cra-sombre .has-blanc-background-color .cra-etiquette-groupe { color: var(--wp--preset--color--turquoise-fonce) !important; }
/* Sections pleine largeur collées (pas de liseré blanc entre deux fonds colorés), pages du lot 1 seulement. */
.wp-block-post-content:has(> .cra-l1) > .alignfull { margin-block-start: 0; }
