/* Centre Sahélien pour la Biodiversité - page « Contact » (partials/contact/*), préfixe .csb-ct-
   Chargé après csb.css et csb-formation.css : bandeau, formulaire, FAQ et puces d'icône réutilisés (main.csb-fo fournit les variables). */

body main.csb-ct p:not(#csb) { max-width: none; }
.csb-ct-entete { margin-bottom: 36px; }

/* --- 1. Coordonnées : quatre cartes à icône, la valeur est le lien --- */
.csb-ct-coordonnees { padding: var(--fo-section) 0; background: #fff; }
.csb-ct-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.csb-ct-carte { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 22px 26px; border-radius: 14px; background: var(--fo-creme); }
.csb-ct-carte .csb-fo-puce-icone { margin-bottom: 16px; background: #fff; }
body main.csb-ct .csb-ct-carte h3:not(#csb) { margin: 0 0 8px; font-size: 18px; }
.csb-ct-lien { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--fo-vert); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.csb-ct-lien::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }   /* toute la carte est cliquable */
.csb-ct-carte:hover .csb-ct-lien { color: var(--fo-texte); }
.csb-ct-carte:has(.csb-ct-lien:focus-visible) { outline: 3px solid var(--fo-vert); outline-offset: 3px; }
.csb-ct-lien:focus-visible { outline: none; }
body main.csb-ct .csb-ct-carte p:not(#csb) { margin: 8px 0 0; font-size: 15px; color: var(--fo-doux); }
@media (max-width: 1199px) { .csb-ct-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .csb-ct-cartes { grid-template-columns: 1fr; } }

/* --- 2. Formulaire : texte à gauche, formulaire sur panneau blanc à droite --- */
.csb-ct-formulaire { padding: var(--fo-section) 0; background: #EDF3EE; }
.csb-ct-form-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.csb-ct-form-texte p { max-width: 46ch; }
.csb-ct-formulaire .csb-fo-form-boite { box-shadow: var(--fo-ombre); }
body main.csb-ct .csb-fo-form-boite select:not(#csb) { width: 100%; padding: 11px 40px 11px 14px; border: 1.5px solid rgba(0, 69, 64, .32); border-radius: 6px; background-color: #fff; color: var(--fo-texte);
  font-size: 16px; line-height: 1.5; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23004540' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
body main.csb-ct .csb-fo-form-boite select:focus-visible:not(#csb) { outline: 3px solid var(--fo-vert); outline-offset: 1px; border-color: var(--fo-vert); }
body main.csb-ct .csb-fo-form-boite select[aria-invalid="true"]:not(#csb) { border-color: #B3261E; }
body main.csb-ct .csb-fo-form-boite :is(input, textarea)[aria-invalid="true"]:not(#csb) { border-color: #B3261E; }
body main.csb-ct .csb-ct-erreur:not(#csb) { margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #B3261E; }
.csb-ct-erreur:empty { display: none; }
@media (max-width: 991px) { .csb-ct-form-grille { grid-template-columns: 1fr; gap: 28px; } }

/* --- 3. Venir au centre : encart sur fond vert --- */
.csb-ct-venir { padding: var(--fo-section) 0; background: var(--fo-vert); }
.csb-ct-venir-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
body main.csb-ct .csb-ct-venir h2:not(#csb) { color: #fff; }
body main.csb-ct .csb-ct-venir .common-subtitle span:not(#csb) { color: #fff; }
body main.csb-ct .csb-ct-venir-grille > div:first-child p:not(#csb) { max-width: 58ch; color: rgba(255, 255, 255, .92); }
.csb-ct-venir-action { display: grid; justify-items: start; gap: 20px; padding: 26px 28px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
body main.csb-ct .csb-ct-adresse:not(#csb) { display: flex; align-items: flex-start; gap: 14px; margin: 0; font-size: 18px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.csb-ct-adresse-lib { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.csb-ct-adresse-repere { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; opacity: .9; }
.csb-ct-adresse .csb-fo-puce-icone { background: var(--fo-jaune); }
.csb-ct-venir a:focus-visible { outline-color: var(--fo-jaune); }
@media (max-width: 991px) { .csb-ct-venir-grille { grid-template-columns: 1fr; gap: 28px; } }

/* --- 4. Raccourcis : trois liens, la carte entière est un lien --- */
.csb-ct-raccourcis { padding: var(--fo-section) 0; background: #fff; }
.csb-ct-rac-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.csb-ct-rac { display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px; align-items: center; gap: 16px; height: 100%; padding: 20px 22px; border-radius: 14px; background: var(--fo-creme);
  border: 1px solid transparent; color: var(--fo-texte); transition: border-color .2s, background-color .2s; }
.csb-ct-rac .csb-fo-puce-icone { background: #fff; }
.csb-ct-rac-corps { display: grid; gap: 2px; font-size: 15px; line-height: 1.45; color: var(--fo-doux); }
.csb-ct-rac-corps strong { font-size: 17px; font-weight: 600; color: var(--fo-vert); }
.csb-ct-rac > i { font-size: 12px; color: var(--fo-doux); transition: transform .2s; }
.csb-ct-rac:hover { border-color: var(--fo-vert); background: #fff; }
.csb-ct-rac:hover > i { transform: translateX(3px); color: var(--fo-vert); }
.csb-ct-rac:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .csb-ct-rac, .csb-ct-rac > i { transition: none; } .csb-ct-rac:hover > i { transform: none; } }

/* --- 5. FAQ : styles de .csb-fo-faq réutilisés (fond crème) ; le bouton remplace le lien texte --- */
.csb-ct-faq .csb-fo-faq-intro .e-primary-btn { margin-top: 4px; }