/**
 * Bois de Faral — primitives .bdf-* (refresh 2026-07)
 * Source : projet Claude Design 349e4d9e-8b2a-4b5b-8efe-4bffdeaecb95
 * (tokens/components.css intégral + helpers de tokens/base.css sans équivalent theme.json)
 *
 * Nomenclature BEM (__element, --modifier) conservée telle quelle depuis le fichier source :
 * dérogation assumée à la règle "pas de BEM" de l'architecture pour ces primitives précises,
 * afin de rester fidèle aux ui_kits/*.html de référence (voir Dev Notes story 9.1).
 *
 * Les règles d'éléments de base (body/h1-h4/p/a) ne sont PAS dupliquées ici : elles sont
 * couvertes par theme.json styles.* (voir story 9.1, Task 3).
 */

/* ---------- Button ---------- */
.bdf-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--font-body);font-weight:800;line-height:1;cursor:pointer;border-radius:var(--radius-pill);border:var(--border-w-bold) solid transparent;transition:transform var(--dur-fast) var(--ease-bounce),background var(--dur-fast) var(--ease-soft),box-shadow var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft);text-decoration:none;-webkit-user-select:none;user-select:none}
.bdf-btn:hover{text-decoration:none}
.bdf-btn:active{transform:translateY(1px) scale(.98)}
.bdf-btn[disabled],.bdf-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.bdf-btn--sm{padding:7px 16px;font-size:var(--text-sm)}
.bdf-btn--md{padding:11px 24px;font-size:var(--text-md)}
.bdf-btn--lg{padding:15px 32px;font-size:var(--text-lg)}
.bdf-btn--primary{background:var(--green-500);color:#fff;border-color:var(--green-600);box-shadow:var(--shadow-brand)}
.bdf-btn--primary:hover{background:var(--green-600);color:#fff}
.bdf-btn--secondary{background:var(--paper-0);color:var(--ink-900);border-color:var(--ink-900)}
.bdf-btn--secondary:hover{background:var(--paper-100);color:var(--ink-900)}
.bdf-btn--warm{background:var(--red-500);color:#fff;border-color:var(--red-600);box-shadow:0 8px 20px rgba(192,62,11,.24)}
.bdf-btn--warm:hover{background:var(--red-600);color:#fff}
.bdf-btn--ghost{background:transparent;color:var(--green-700)}
.bdf-btn--ghost:hover{background:var(--green-100);color:var(--green-700)}
.bdf-btn__ico{height:1.15em;width:auto;display:block}

/* ---------- Badge & Tag ---------- */
.bdf-badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-body);font-weight:800;font-size:var(--text-2xs);letter-spacing:.02em;padding:4px 11px;border-radius:var(--radius-pill);line-height:1.3}
.bdf-badge--green{background:var(--green-200);color:var(--green-800)}
.bdf-badge--sun{background:#fbe6bf;color:#8a6410}
.bdf-badge--red{background:#f6d9cc;color:var(--red-600)}
.bdf-badge--neutral{background:var(--paper-200);color:var(--ink-700)}
.bdf-badge--eco{background:var(--green-600);color:#fff}

.bdf-tag{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);padding:6px 14px;border-radius:var(--radius-pill);background:var(--paper-0);color:var(--ink-900);border:var(--border-w) solid var(--paper-300);transition:border-color var(--dur-fast),background var(--dur-fast)}
.bdf-tag[data-active="true"]{background:var(--green-300);border-color:var(--green-500)}
button.bdf-tag{cursor:pointer}
button.bdf-tag:hover{border-color:var(--green-500)}

/* ---------- Card ---------- */
.bdf-card{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);display:flex;flex-direction:column}
.bdf-card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bdf-card__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.bdf-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.bdf-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:8px}
.bdf-card__title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--ink-900);line-height:1.05;margin:0}
.bdf-card__text{color:var(--text-muted);font-size:var(--text-sm);margin:0}

/* ---------- Icon medallion ---------- */
.bdf-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.bdf-icon--medallion{background:var(--green-300);border-radius:50%}
.bdf-icon--medallion.bdf-icon--deep{background:var(--green-600)}
.bdf-icon img{width:66%;height:66%;object-fit:contain;display:block}

/* ---------- Speech bubble ---------- */
.bdf-bubble{position:relative;font-family:var(--font-hand);font-size:var(--text-xl);color:var(--ink-900);background:var(--paper-0);border:var(--border-w-bold) solid var(--ink-900);border-radius:var(--radius-lg);padding:16px 22px;display:inline-block;box-shadow:var(--shadow-sm)}
.bdf-bubble::after{content:"";position:absolute;left:34px;bottom:-15px;width:26px;height:18px;background:var(--paper-0);border-right:var(--border-w-bold) solid var(--ink-900);border-bottom:var(--border-w-bold) solid var(--ink-900);transform:skewX(-18deg);border-bottom-right-radius:6px}

/* ---------- Section title (drawn underline) ---------- */
.bdf-section-title{display:inline-block;font-family:var(--font-display);color:var(--ink-900);line-height:1.05;position:relative}
.bdf-section-title::after{content:"";position:absolute;left:2%;right:2%;bottom:-.16em;height:7px;background:var(--green-300);border-radius:999px;transform:rotate(-.7deg)}

/* ---------- Form controls ---------- */
.bdf-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.bdf-field__label{font-weight:700;font-size:var(--text-sm);color:var(--ink-900)}
.bdf-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.bdf-input,.bdf-textarea,.bdf-select{font-family:var(--font-body);font-size:var(--text-md);color:var(--ink-900);background:var(--paper-0);border:var(--border-w-bold) solid var(--paper-300);border-radius:var(--radius-md);padding:11px 14px;transition:border-color var(--dur-fast) var(--ease-soft),box-shadow var(--dur-fast) var(--ease-soft);width:100%;box-sizing:border-box}
.bdf-textarea{min-height:96px;resize:vertical}
.bdf-input:hover,.bdf-textarea:hover,.bdf-select:hover{border-color:var(--green-400)}
.bdf-input:focus,.bdf-textarea:focus,.bdf-select:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-100)}
.bdf-input::placeholder,.bdf-textarea::placeholder{color:var(--ink-500)} /* --ink-300 ≈2,0:1 < AA (story 9.4, deferred-work.md:24) */
.bdf-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236f7639' stroke-width='2' stroke-linecap='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

/* checkbox */
.bdf-check{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:var(--text-md);color:var(--ink-900);cursor:pointer}
.bdf-check input{position:absolute;opacity:0;width:0;height:0}
.bdf-check__box{width:22px;height:22px;border-radius:7px;border:var(--border-w-bold) solid var(--ink-900);background:var(--paper-0);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast),border-color var(--dur-fast);flex:none}
.bdf-check__box svg{opacity:0;transition:opacity var(--dur-fast)}
.bdf-check input:checked+.bdf-check__box{background:var(--green-500);border-color:var(--green-600)}
.bdf-check input:checked+.bdf-check__box svg{opacity:1}
.bdf-check input:focus-visible+.bdf-check__box{box-shadow:0 0 0 3px var(--green-100)}

/* ---------- Stepper (progression tunnel de résa) ---------- */
.bdf-stepper{display:flex;align-items:center;background:var(--paper-0);border:var(--border-w) solid var(--paper-300);border-radius:var(--radius-pill);padding:12px 22px;box-shadow:var(--shadow-sm)}
.bdf-stepper__step{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.bdf-stepper__num{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:800;font-size:var(--text-sm);background:var(--paper-200);color:var(--ink-500);border:2px solid var(--paper-300);flex:none}
.bdf-stepper__num svg{width:15px;height:15px}
.bdf-stepper__label{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);color:var(--ink-500)}
.bdf-stepper__line{flex:1 1 auto;height:3px;background:var(--paper-200);margin:0 14px;border-radius:2px;min-width:24px}
.bdf-stepper__step--done .bdf-stepper__num{background:var(--green-600);border-color:var(--green-700);color:#fff} /* --green-500 blanc ≈3,3:1 < AA (story 9.4) */
.bdf-stepper__step--done .bdf-stepper__label{color:var(--ink-900)}
.bdf-stepper__line--done{background:var(--green-600)}
.bdf-stepper__step--current .bdf-stepper__num{background:var(--green-600);border-color:var(--green-700);color:#fff;box-shadow:0 0 0 4px var(--green-100)}
.bdf-stepper__step--current .bdf-stepper__label{color:var(--green-700)}

/* ---------- Quantity stepper (− n +) ---------- */
.bdf-qty{display:inline-flex;align-items:center;gap:10px}
.bdf-qty__btn{width:34px;height:34px;border-radius:var(--radius-sm);border:var(--border-w-bold) solid var(--ink-900);background:var(--paper-0);color:var(--ink-900);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast),border-color var(--dur-fast)}
.bdf-qty__btn:hover{background:var(--paper-100)}
.bdf-qty__btn--add{background:var(--green-600);border-color:var(--green-700);color:#fff} /* --green-500 blanc ≈3,3:1 < AA (story 9.4) */
.bdf-qty__btn--add:hover{background:var(--green-700)}
.bdf-qty__n{font-family:var(--font-body);font-weight:800;font-size:var(--text-md);min-width:20px;text-align:center;color:var(--ink-900)}

/* ---------- Helpers (tokens/base.css, sans équivalent theme.json) ---------- */

/* Handwritten "eyebrow" label */
.bdf-eyebrow { font-family: var(--font-hand); font-size: var(--text-lg); color: var(--green-600); font-weight: 600; }

/* Small-caps utility label */
.bdf-label { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }

/* Hand-drawn ink underline accent, echoes hr.png */
.bdf-underline { position: relative; }
.bdf-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.15em; height: 6px; background: var(--green-300); border-radius: 999px; transform: rotate(-0.6deg); }

/* On-dark surface helper — headings default to ink, so any text over a photo or
   dark band must be forced light for legibility. Put .bdf-on-dark on the container. */
.bdf-on-dark { color: var(--paper-50); }
.bdf-on-dark h1, .bdf-on-dark h2, .bdf-on-dark h3, .bdf-on-dark h4, .bdf-on-dark p { color: var(--paper-50); }
.bdf-on-dark .bdf-eyebrow { color: var(--paper-50); }
.bdf-on-dark a:not(.bdf-btn) { color: var(--paper-50); text-decoration-color: color-mix(in srgb, var(--paper-50) 45%, transparent); }
.bdf-on-dark a:not(.bdf-btn):hover { color: #fff; text-decoration-color: currentColor; }

/* NB : pas de border-radius ici — l'outline suit déjà le rayon propre de l'élément
   (les navigateurs modernes arrondissent l'outline). Le fixer écraserait le rayon des
   éléments arrondis (boutons pilule, inputs, medallion) au focus clavier.

   Story 9.12 — deux valeurs, pas une, et c'est mesuré :

   Sur les surfaces CLAIRES, --green-500 (3,10:1 sur --paper-50, le fond de page par défaut)
   échoue au 3:1 de WCAG 1.4.11 dès qu'un contrôle est posé sur --paper-100 (2,89:1) ou
   --paper-200 (2,59:1), des fonds de carte courants du thème. --focus-ring (= --green-700)
   passe sur toutes les surfaces claires du DS, de 4,03:1 (--green-300 / slug vert-olive) à
   7,08:1 (--paper-0).

   Sur les surfaces SOMBRES posées par le thème, la même couleur s'effondre : 1,46:1 sur
   --green-800 (le footer, présent sur 100 % des pages, et le bandeau « Qui sommes-nous ? »),
   1,53:1 sur anthracite (parts/bandeau-cta.html), 1,88:1 sur --ink-900 (hero éditorial, CTA
   sticky mobile de la fiche gîte) — là où --green-500 y tenait 3,14 / 3,30 / 4,05:1. Aucune
   couleur unique de la rampe ne tient les deux bords : d'où --focus-ring-on-dark, qui donne
   9,71 à 12,56:1 sur ces mêmes fonds.

   .bdf-on-dark est le crochet conventionnel du thème pour les surfaces sombres (cf. ci-dessus).
   Les deux sélecteurs qui le suivent sont les seuls fonds sombres du thème qui ne le portent
   pas ; ils sont ciblés ici plutôt que d'ajouter la classe à leur markup, .bdf-on-dark
   emportant aussi des règles de couleur de texte et de liens dont ces deux blocs n'ont pas
   besoin (leur bouton est déjà coloré). */
*:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }
.bdf-on-dark *:focus-visible,
.bdf-bandeau-cta *:focus-visible,
.bdf-bandeau-cta-mobile *:focus-visible { outline-color: var(--focus-ring-on-dark); }

/* Ré-inversion — surface CLAIRE ré-posée à l'intérieur d'un contexte sombre.
   Les trois sélecteurs ci-dessus sont des descendants (` *`) : ils traversent donc aussi les
   cartes claires imbriquées dans un bandeau sombre, et y posent l'anneau clair sur du blanc.
   Relevé en recette clavier le 2026-08-15 sur le seul cas existant, `.bdf-contact` (la carte
   blanche du formulaire, dans le bandeau `.bdf-presentation-contact` qui est `.bdf-on-dark`) :
   le bouton « Envoyer le message » tombait à 1,06:1 — invisible — sur les 5 paliers et tous les
   gabarits, le bandeau étant sitewide. Retour à 7,08:1.
   Si une autre carte claire est un jour posée dans un contexte sombre, l'ajouter ici. */
.bdf-on-dark .bdf-contact *:focus-visible { outline-color: var(--focus-ring); }

::selection { background: var(--green-200); color: var(--ink-900); }

/* ---------- Équilibrage des titres ----------
   `text-wrap: balance` fait partie des règles d'éléments de base de tokens/base.css, mais
   theme.json n'expose pas cette propriété : contrairement au reste des styles de base, elle
   n'était donc reprise nulle part. Écart mesuré sur le hero d'accueil, où le mockup coupe
   « Des écologîtes / au milieu des bois » quand le thème produisait
   « Des écologîtes au / milieu des bois » — mêmes font-size et max-width, seule la
   répartition des lignes changeait.

   Le pendant `p { text-wrap: pretty }` du design system n'est volontairement PAS repris ici :
   il toucherait le corps de texte des 83 pages du site, bien au-delà du périmètre traité. */
h1, h2, h3, h4 { text-wrap: balance; }