/* Tous les guides (/guides/, 17/10/2026) : index en cartes posé par wordpress/pages/guides.php. Charte B. Chargée après
   accueil.css sur la page qui porte « dbh-page-guides ». Tout est préfixé par dbh-gx-. */

/* En-tête */
.dbh-gx-tete .uk-container { padding-top: 20px; padding-bottom: 38px; }
.dbh-gx-tete-rangee { align-items: flex-end; }
.dbh-gx-ariane { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 30px; font-size: 13px; color: var(--dbh-gris2); }
.dbh-gx-ariane a { color: var(--dbh-gris); text-decoration: none; }
.dbh-gx-ariane a:hover { color: var(--dbh-action); }
.dbh-gx-ariane [aria-current] { color: var(--dbh-encre); font-weight: 600; }
.dbh-s .dbh-gx-titre, .dbh-s h1.dbh-gx-titre, .dbh-s .dbh-gx-titre :where(h1) { max-width: 760px; font-size: clamp(42px, 4.8vw, 68px); line-height: 1.04; letter-spacing: -.025em; }
.dbh-s .dbh-gx-chapo, .dbh-s .dbh-gx-chapo p { max-width: 460px; margin: 0; font-family: var(--dbh-titre); font-weight: 300; font-size: 21px; line-height: 1.5; color: #26292C; }
.dbh-gx-tete .uk-grid > * { animation: dbh-fondu .9s .1s var(--dbh-doux) both; }

/* Groupes */
.dbh-gx-groupe .uk-container { padding-top: 44px; padding-bottom: 54px; border-top: 1px solid var(--dbh-trait2); }
.dbh-s.dbh-gx-acheteurs .uk-container { border-top: 0; }
.dbh-gx-groupe-tete { margin-bottom: 32px; }
.dbh-s .dbh-gx-h2, .dbh-s h2.dbh-gx-h2, .dbh-s .dbh-gx-h2 :where(h2) { font-size: clamp(30px, 3vw, 42px); }

/* Cartes */
.dbh-gx-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.dbh-gx-carte { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--dbh-trait2); border-radius: 4px; color: inherit !important; text-decoration: none !important; transition: border-color .3s, box-shadow .3s; }
.dbh-gx-carte:hover { border-color: var(--dbh-trait); box-shadow: 0 18px 40px rgba(23,25,27,.08); }
.dbh-gx-carte:focus-visible { outline: 2px solid var(--dbh-action); outline-offset: 3px; }
.dbh-gx-ph { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--dbh-trait2); }
.dbh-gx-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--dbh-doux); }
.dbh-gx-ph::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.85); border-radius: 2px; }
.dbh-gx-carte:hover .dbh-gx-ph img { transform: scale(1.04); }
.dbh-gx-corps { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; padding: 24px 28px 26px; }
.dbh-gx-rub { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dbh-action); }
.dbh-gx-ti { font-family: var(--dbh-titre); font-weight: 360; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; color: var(--dbh-encre); transition: color .3s; }
.dbh-gx-carte:hover .dbh-gx-ti { color: var(--dbh-action); }
.dbh-gx-ex { font-size: 15px; line-height: 1.6; color: var(--dbh-texte); }
.dbh-gx-action { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 600; color: var(--dbh-action); }
.dbh-gx-carte:hover .dbh-fl { transform: translateX(5px); }
/* Un seul guide dans le groupe : carte en largeur, image à gauche */
.dbh-gx-cartes:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.dbh-gx-cartes > :only-child { flex-direction: row; }
.dbh-gx-cartes > :only-child .dbh-gx-ph { flex: 0 0 50%; aspect-ratio: auto; min-height: 340px; }
.dbh-gx-cartes > :only-child .dbh-gx-corps { justify-content: center; padding: 40px 48px; }
.dbh-gx-cartes > :only-child .dbh-gx-ti { font-size: clamp(28px, 2.6vw, 36px); }
.dbh-gx-cartes > :only-child .dbh-gx-ex { max-width: 520px; font-size: 16.5px; }
.dbh-gx-cartes > :only-child .dbh-gx-action { margin-top: 10px; }

/* Appel à l'action : la seule bande charbon */
.dbh-s.dbh-gx-cta, .dbh-s.dbh-gx-cta .uk-section { background: var(--dbh-encre); color: #A9AEB2; overflow: hidden; }
.dbh-gx-cta .uk-container { padding-top: 65px; padding-bottom: 65px; }
@media (min-width: 960px) {
  .dbh-gx-cta .uk-container { padding-right: calc(40% + 40px); min-height: 460px; box-sizing: border-box; }
  .dbh-gx-cta .uk-grid > :first-child { width: 100%; }
  .dbh-gx-cta .dbh-gx-col-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; padding: 0; margin: 0; }
  .dbh-gx-cta .dbh-gx-col-photo > *, .dbh-gx-cta .dbh-gx-col-photo .dbh-html { height: 100%; margin: 0; }
}
.dbh-gx-cta .dbh-k, .dbh-gx-cta .dbh-k p { color: #E9A07F; }
.dbh-gx-cta .dbh-t, .dbh-gx-cta h2.dbh-t, .dbh-gx-cta .dbh-t :where(h2) { color: #fff; font-size: clamp(30px, 3.1vw, 44px); }
.dbh-s.dbh-gx-cta .dbh-p p { max-width: 540px; color: #D5D8DB; }
.dbh-s.dbh-gx-cta .uk-button.uk-button-default { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.dbh-s.dbh-gx-cta .uk-button.uk-button-default:hover { background: #fff; color: var(--dbh-encre); }
.dbh-gx-cta-photo { position: relative; height: 100%; min-height: 320px; }
.dbh-gx-cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dbh-gx-cta-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--dbh-encre) 0%, rgba(23,25,27,0) 35%); }
.dbh-gx-cta-photo .dbh-note { position: absolute; right: 40px; bottom: 40px; z-index: 2; font-size: 30px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); text-align: right; }

@media (max-width: 959px) {
  .dbh-gx-tete .uk-container { padding-top: 8px; padding-bottom: 36px; }
  .dbh-gx-ariane { margin-bottom: 20px; }
  .dbh-s .dbh-gx-titre, .dbh-s h1.dbh-gx-titre, .dbh-s .dbh-gx-titre :where(h1) { font-size: clamp(34px, 9vw, 44px); line-height: 1.07; }
  .dbh-gx-col-chapo { margin-top: 18px !important; }
  .dbh-s .dbh-gx-chapo, .dbh-s .dbh-gx-chapo p { font-size: 18px; }
  .dbh-gx-groupe .uk-container { padding-top: 40px; padding-bottom: 48px; }
  .dbh-gx-groupe-tete { margin-bottom: 20px; }
  .dbh-s .dbh-gx-h2, .dbh-s h2.dbh-gx-h2, .dbh-s .dbh-gx-h2 :where(h2) { font-size: 28px; }
  .dbh-gx-cartes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dbh-gx-cartes > :only-child { flex-direction: column; }
  .dbh-gx-cartes > :only-child .dbh-gx-ph { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .dbh-gx-cartes > :only-child .dbh-gx-corps, .dbh-gx-corps { padding: 20px 20px 22px; }
  .dbh-gx-ti, .dbh-gx-cartes > :only-child .dbh-gx-ti { font-size: 23px; }
  .dbh-gx-action { min-height: 44px; }
  .dbh-gx-cta .uk-container { padding-top: 38px; padding-bottom: 32px; }
  .dbh-gx-cta .dbh-gx-col-photo { margin-top: 24px; }
  .dbh-gx-cta-photo { min-height: 220px; border-radius: 4px; overflow: hidden; }
  .dbh-gx-cta-photo::before { background: linear-gradient(180deg, var(--dbh-encre) 0%, rgba(23,25,27,0) 40%); }
  .dbh-gx-cta-photo .dbh-note { right: 20px; bottom: 22px; font-size: 26px; }
  .dbh-s.dbh-gx-cta .uk-button { width: 100%; justify-content: center; }
  .dbh-s.dbh-gx-cta .uk-flex-center > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dbh-gx-tete .uk-grid > * { animation: none; }
  .dbh-gx-ph img, .dbh-gx-carte { transition: none; }
}

/* 26/10/2026 (Vincent : « le script sur la photo trop près du bord ») : note manuscrite plus loin des bords, proportionnée à l'écran */
@media (min-width: 960px) { .dbh-gx-cta-photo .dbh-note { right: clamp(48px, 4.5vw, 96px); bottom: clamp(56px, 5vw, 104px); } }
@media (max-width: 959px) { .dbh-gx-cta-photo .dbh-note { right: 28px; bottom: 30px; } }