/* Composants — traduction en CSS des composants JSX du design system
   (Button, Card, ImageSlot, Tag, Input/Select/Textarea, Radio, Checkbox,
   Logo, SectionHeading). Les interactions hover/focus/press remplacent les
   gestionnaires React par de vraies pseudo-classes CSS. */

/* --- Button --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  white-space:nowrap;flex-shrink:0;font-family:var(--font-display);
  font-weight:var(--fw-semibold);font-size:var(--fs-body);line-height:1;
  padding:12px 24px;border-radius:var(--radius-pill);cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),color var(--dur-base) var(--ease-standard);
  text-decoration:none;
}
.btn:active{transform:scale(.97)}
.btn[disabled]{cursor:not-allowed;background:var(--surface-disabled)!important;color:var(--text-muted)!important;border-color:var(--border-subtle)!important;transform:none!important}
.btn--sm{padding:8px 16px;font-size:var(--fs-body-sm);gap:8px}
.btn--lg{padding:16px 32px;font-size:var(--fs-lead);gap:12px}
.btn--full{display:flex;width:100%}
.btn .icon{width:18px;height:18px}
.btn--sm .icon{width:16px;height:16px}
.btn--lg .icon{width:20px;height:20px}

/* Le texte du bouton est réaffirmé sur chaque état :hover — sans ça, la
   règle globale a:hover (couleur de lien) l'emporterait sur les boutons
   rendus en <a> et rendrait le texte illisible sur fond coloré. */
.btn--primary{background:var(--brand-primary);color:var(--text-inverse);border:1px solid var(--brand-primary);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--brand-primary-hover);color:var(--text-inverse)}
.btn--accent{background:var(--brand-accent);color:var(--text-on-accent);border:1px solid var(--brand-accent)}
.btn--accent:hover{background:var(--brand-accent-hover);color:var(--text-on-accent)}
.btn--secondary{background:transparent;color:var(--brand-primary);border:2px solid var(--brand-primary)}
.btn--secondary:hover{background:var(--blue-50);color:var(--brand-primary)}
.btn--ghost{background:transparent;color:var(--brand-primary);border:1px solid transparent}
.btn--ghost:hover{background:var(--blue-50);color:var(--brand-primary)}
.btn--inverse{background:var(--white);color:var(--brand-deep);border:1px solid var(--white)}
.btn--inverse:hover{background:var(--blue-100);color:var(--brand-deep)}
.btn--inverseOutline{background:transparent;color:var(--white);border:2px solid var(--border-on-deep)}
.btn--inverseOutline:hover{background:rgba(255,255,255,.10);color:var(--white)}

/* --- Card --- */
.card{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-standard)}
.card--plain{background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--text-body)}
.card--subtle{background:var(--surface-subtle);border:1px solid transparent;color:var(--text-body)}
.card--deep{background:var(--surface-deep);border:1px solid var(--border-on-deep);color:var(--text-inverse-muted)}
.card--accent{background:var(--surface-accent);border:1px solid var(--gold-300);color:var(--text-body)}
.card--pad-sm{padding:var(--space-4)}
.card--pad-md{padding:var(--space-5)}
.card--pad-lg{padding:var(--space-6)}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
a.card-link{display:block;text-decoration:none;color:inherit}

/* --- ImageSlot --- */
.image-slot{position:relative;width:100%;overflow:hidden;background:var(--blue-100);display:flex;align-items:center;justify-content:center}
.image-slot--rounded{border-radius:var(--radius-md)}
.image-slot--large{border-radius:var(--radius-lg)}
.image-slot--arch{border-radius:var(--radius-arch)}
.image-slot--square{border-radius:0}
.image-slot--circle{border-radius:var(--radius-pill)}
.image-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.image-slot__placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--blue-400);text-align:center;padding:var(--space-4)}
.image-slot__placeholder .icon{width:28px;height:28px}
.image-slot__placeholder span{font-family:var(--font-display);font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase}
.image-slot__overlay{position:absolute;inset:0;pointer-events:none}
.image-slot__overlay--left{background:var(--scrim-photo)}
.image-slot__overlay--bottom{background:var(--scrim-bottom)}
.image-slot__content{position:absolute;inset:0}

/* --- Tag --- */
.tag{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);
  padding:6px 14px;border-radius:var(--radius-pill);cursor:pointer;background:var(--surface-subtle);color:var(--brand-primary);
  border:1px solid var(--blue-100);transition:var(--transition-base)}
.tag:hover{background:var(--blue-100)}
.tag[aria-pressed="true"]{background:var(--brand-primary);color:var(--white);border-color:var(--brand-primary)}
.tag[aria-pressed="true"]:hover{background:var(--brand-primary)}

/* --- Form fields (Input / Select / Textarea) --- */
.field{display:flex;flex-direction:column;gap:var(--space-2);width:100%}
.field label{font-family:var(--font-display);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-heading)}
.field label .req{color:var(--status-danger-fg)}
.field-control{display:flex;align-items:center;gap:var(--space-3);padding:12px 16px;background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);transition:var(--transition-base)}
.field-control:focus-within{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.field-control .icon{width:18px;height:18px;color:var(--text-muted);flex:0 0 auto}
.field-control input,.field-control textarea{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--text-heading);min-width:0;width:100%}
.field-control textarea{resize:vertical;padding:0}
textarea.field-control{padding:12px 16px;display:block}
.field-hint{font-size:var(--fs-caption);color:var(--text-muted)}
.field-hint--error{color:var(--status-danger-fg)}

.select-control{position:relative;display:flex;align-items:center;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);transition:var(--transition-base)}
.select-control:focus-within{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.select-control select{appearance:none;flex:1;font:inherit;color:var(--text-heading);background:transparent;border:none;outline:none;padding:12px 44px 12px 16px;width:100%}
.select-control .chev{position:absolute;right:14px;pointer-events:none;display:flex;color:var(--text-muted)}

/* --- Radio / Checkbox --- */
.choice{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__box{width:20px;height:20px;flex:0 0 auto;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;transition:var(--transition-base)}
.choice__box--radio{border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--white)}
.choice input:checked ~ .choice__box--radio{border-color:var(--brand-primary)}
.choice__box--radio i{width:10px;height:10px;border-radius:var(--radius-pill);background:var(--brand-primary);display:none}
.choice input:checked ~ .choice__box--radio i{display:block}
.choice__box--checkbox{border-radius:var(--radius-xs);border:1px solid var(--border-strong);background:var(--white)}
.choice input:checked ~ .choice__box--checkbox{background:var(--brand-primary);border-color:var(--brand-primary)}
.choice__box--checkbox .icon{width:14px;height:14px;color:var(--white);display:none}
.choice input:checked ~ .choice__box--checkbox .icon{display:block}
.choice__label{display:block;font-size:var(--fs-body-sm);color:var(--text-heading);font-weight:var(--fw-medium)}

/* --- Logo --- */
.logo{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none}
.logo__mark{width:40px;height:40px;flex:0 0 auto;border-radius:var(--radius-sm);overflow:hidden;background:var(--gradient-deep);display:inline-block}
.logo__mark img{width:100%;height:100%;object-fit:cover;display:block}
.logo__word{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:var(--ls-logotype);text-transform:uppercase;
  font-size:15px;line-height:1.1;color:var(--brand-deep);white-space:nowrap}
.logo--inverse .logo__word{color:var(--white)}

/* --- SectionHeading --- */
.section-heading{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start;text-align:left}
.section-heading--center{align-items:center;text-align:center}
.section-heading__overline{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);
  font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--brand-primary)}
.section-heading__overline .icon{width:14px;height:14px}
.section-heading--inverse .section-heading__overline{color:var(--brand-accent)}
.section-heading h2{margin:0;max-width:24ch}
.section-heading--inverse h2{color:var(--white)}
.section-heading p{margin:0;color:var(--text-muted);max-width:56ch}
.section-heading--inverse p{color:var(--text-inverse-muted)}

/* --- Icon helper --- */
.icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor}
.icon svg{display:block}