/* Florska V2 — base : reset, typographie, grille, utilitaires. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fl-bg);
  color: var(--fl-text);
  font-family: var(--fl-font);
  font-size: var(--fl-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--fl-text); }
a:hover { color: var(--fl-white); }
:focus-visible { outline: 2px solid var(--fl-bone); outline-offset: 3px; }
::selection { background: var(--fl-action); color: var(--fl-white); }
[hidden] { display: none !important; }

/* Typographie */
.mono { font-family: var(--fl-mono); font-size: var(--fl-fs-mono); letter-spacing: .06em; }
.disp { font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; margin: 0; }
.cond { font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.h1 { font-size: var(--fl-fs-h1); }
.h2 { font-size: var(--fl-fs-h2); }
.h3 { font-size: var(--fl-fs-h3); }
.eyebrow { font-family: var(--fl-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fl-muted); margin: 0 0 16px; }
.lead { font-size: var(--fl-fs-lead); line-height: 1.6; color: var(--fl-text-2); max-width: 58ch; margin: 0; }
.muted { color: var(--fl-muted); }
.text-2 { color: var(--fl-text-2); }

/* Mise en page */
.wrap { max-width: var(--fl-max); margin: 0 auto; padding-left: var(--fl-gutter); padding-right: var(--fl-gutter); }
.sec { padding-top: var(--fl-sec); padding-bottom: var(--fl-sec); }
.rule { border-top: 1px solid var(--fl-line); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--fl-gap); }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }

/* Section claire (Tarifs, formulaire Contact uniquement) */
.light { background: var(--fl-bone); color: var(--fl-ink); }
.light .muted { color: var(--fl-muted-light); }
.light a { color: var(--fl-ink); }
.light :focus-visible { outline-color: var(--fl-ink); }

/* Formulaires */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { font-size: 16px; min-height: 52px; padding: 12px 14px; border: 1px solid #6B6A66; background: var(--fl-white); color: var(--fl-ink); border-radius: 0; }
.field textarea { min-height: 140px; }

/* Accessibilité */
.screen-reader-text, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; top: 8px; z-index: 90; }
.skip:focus { left: 16px; }

/* Contenu éditorial WordPress */
.entry > * + * { margin-top: 1em; }
.entry a { text-decoration: underline; text-underline-offset: 3px; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text { font-family: var(--fl-mono); font-size: 12px; color: var(--fl-muted); margin-top: 8px; }

@media (max-width: 900px) {
  .g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .s3, .s4, .s5, .s6, .s7, .s8 { grid-column: span 4; }
  .hide-m { display: none !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .s3, .s4, .s6 { grid-column: span 2; }
}