/* ============================================================
   ws-1-base.css — WebSentinel Agency
   Remplace Bootstrap 5 (794 KB). Classes réellement utilisées.
   Design tokens : #0D0D0D | #C8A96E | #FAFAFA | #F5F1EB
   Breakpoints : sm=576 md=768 lg=992 xl=1200
   ============================================================ */

/* RESET */
*,*::before,*::after { box-sizing: border-box }
html,body { margin:0; padding:0 }
img { max-width:100%; height:auto; display:block }

/* GRID */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 20px }
.row { display:flex; flex-wrap:wrap; margin-left:-12px; margin-right:-12px }
.row > * { padding-left:12px; padding-right:12px; width:100% }
/* g-0 : reset gutter */
.g-0 { margin:0 } .g-0 > * { padding:0 }
/* g-4 : gutter 24px */
.g-4 { margin-left:-12px; margin-right:-12px } .g-4 > * { padding:12px }

/* col de base */
.col-12 { width:100% }

/* md (768px+) */
@media(min-width:768px) {
  .col-md-6 { width:50% }
  .row-cols-md-2 > * { width:50% }
  .text-md-start { text-align:left !important }
  .text-md-end { text-align:right !important }
}

/* lg (992px+) */
@media(min-width:992px) {
  .col-lg-2 { width:16.666% }
  .col-lg-3 { width:25% }
  .col-lg-4 { width:33.333% }
  .col-lg-6 { width:50% }
  .col-lg-10 { width:83.333% }
  .row-cols-lg-5 > * { width:20% }
  .mb-lg-0 { margin-bottom:0 !important }
  .mt-lg-4 { margin-top:1.5rem !important }
}

/* col-mb-* = Canvas mobile columns (< 992px) */
@media(max-width:991px) {
  .col-mb-10 { width:10% }
  .col-mb-50 { width:50% }
}

/* row-cols-1 */
.row-cols-1 > * { width:100% }

/* UTILITAIRES DISPLAY */
.d-none { display:none !important }
.d-block { display:block !important }
.d-flex { display:flex !important }
@media(min-width:992px) {
  .d-lg-block { display:block !important }
  .d-lg-inline { display:inline !important }
  .d-lg-inline-block { display:inline-block !important }
  .d-lg-none { display:none !important }
}

/* UTILITAIRES SPACING */
.mb-0 { margin-bottom:0 !important }
.mb-5 { margin-bottom:3rem !important }
.mb-14 { margin-bottom:3.5rem !important }
.ms-3 { margin-left:1rem !important }
.mt-3 { margin-top:1rem !important }
.mt-4 { margin-top:1.5rem !important }
.mt-5 { margin-top:3rem !important }
.mt-6 { margin-top:1.5rem !important }
.mt-8 { margin-top:2rem !important }
.my-0 { margin-top:0 !important; margin-bottom:0 !important }
.py-0 { padding-top:0 !important; padding-bottom:0 !important }
.py-20 { padding-top:5rem !important; padding-bottom:5rem !important }
.mx-auto { margin-left:auto !important; margin-right:auto !important }

/* UTILITAIRES TEXTE */
.text-center { text-align:center !important }
.text-white { color:#fff !important }
.text-sm { font-size:0.875rem }
.text-xs { font-size:0.75rem }
.uppercase { text-transform:uppercase }
.italic { font-style:italic }
.font-bold { font-weight:700 }
.font-semibold { font-weight:600 }
.leading-relaxed { line-height:1.625 }
.tracking-wider { letter-spacing:0.05em }
.tracking-widest { letter-spacing:0.1em }
.underline { text-decoration:underline }

/* UTILITAIRES FLEX */
.justify-content-center { justify-content:center !important }
.align-items-center { align-items:center !important }
.items-center { align-items:center }
.items-start { align-items:flex-start }
.items-end { align-items:flex-end }
.items-stretch { align-items:stretch }
.flex-wrap { flex-wrap:wrap }
.flex-col { flex-direction:column }
.flex-1 { flex:1 1 0% }
.flex-none { flex:none }
.inline-flex { display:inline-flex }

/* UTILITAIRES GAP */
.gap-2 { gap:0.5rem }
.gap-3 { gap:0.75rem }
.gap-6 { gap:1.5rem }

/* UTILITAIRES SIZING */
.w-auto { width:auto !important }
.w-100 { width:100% !important }
.max-w-xl { max-width:36rem }
.space-y-3 > * + * { margin-top:0.75rem }

/* UTILITAIRES POSITION */
.absolute { position:absolute }
.relative { position:relative }

/* UTILITAIRES BORDER */
.rounded { border-radius:8px }
.rounded-full { border-radius:9999px }
.rounded-circle { border-radius:50% }

/* GRID CSS (Tailwind-like pour ForfaitsCMS) */
.grid { display:grid }
.grid-cols-3 { grid-template-columns:repeat(3,1fr) }
@media(max-width:991px) { .grid-cols-3 { grid-template-columns:1fr } }

/* SECTION Canvas */
.section { position:relative; padding:100px 0; margin:0 !important }
@media(max-width:991px) { .section { padding:70px 0 } }
@media(max-width:767px) { .section { padding:56px 0 } }
.my-0.section { padding:100px 0 }

/* PRINT */
@media print { nav,header,footer { display:none !important } @page { margin:2cm } }