/* ============================================================
   WPZ / Iliade – Root CSS Global
   ------------------------------------------------------------
   > S’applique à tout le site (WordPress natif + Gutenberg)
   > Écrase Hello / Elementor sans !important
   > Couches : reset → base → components → blocks → utilities
   ============================================================ */

/* --- Définition des couches --- */
@layer reset, base, components, blocks, utilities;

/* ============================================================
   0) Variables
   ============================================================ */
@layer base {
:root {
  --brand: #5CA174;
  --brand-600: #4b8b62;
  --ink: #0f172a;
  --muted: #64748b;
  --soft: #F4F7F5;
  --soft-2: #E9EEF0;
  --white: #fff;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --wrap: min(1200px, 100% - 2rem);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --focus: color-mix(in oklab, var(--brand) 65%, #000 0%);
}
}

/* ============================================================
   1) RESET DOUX & BASE HTML
   ============================================================ */
@layer reset {
/* Box & margin reset */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }

/* Media */
img, svg, video, canvas, audio, iframe { display: block; max-width: 100%; }
picture { display: block; }
svg { height: auto; }
video, iframe { width: 100%; }

/* Text elements */
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--soft-2); margin: 1.5rem 0; }
abbr[title]{ text-decoration: underline dotted; cursor: help; }
sup { font-size: .8em; vertical-align: super; }
sub { font-size: .8em; vertical-align: sub; }
small { font-size: .875em; }
mark { background: #fff6bf; padding: .05em .2em; border-radius: .2em; }

/* Forms native reset */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; }
/* Improve line-height in inputs on iOS */
input, select, textarea { line-height: 1.2; }
}

/* ============================================================
   2) TYPO, LIENS, CONTENU
   ============================================================ */
@layer base {
body {
  color: var(--ink);
  background: #fff;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
  margin: .2em 0 .4em;
}
h1{ font-size: clamp(28px, 4.6vw, 46px); }
h2{ font-size: clamp(22px, 3.2vw, 32px); }
h3{ font-size: clamp(18px, 2.6vw, 24px); }
h4{ font-size: 18px; } h5{ font-size:16px; } h6{ font-size:14px; }
p{ margin: 0 0 1em; }
.lead, .has-large-font-size{ color: var(--muted); }

/* Links & focus */
a{
  color: var(--brand);
  text-decoration-color: color-mix(in oklab, var(--brand) 40%, transparent);
  text-underline-offset: 2px;
  transition: color .2s ease, text-decoration-color .2s ease, background .2s ease, border-color .2s ease;
}
a:hover{ text-decoration-color: color-mix(in oklab, var(--brand) 80%, transparent); }
:where(a, button, [role="button"], input, textarea, select):focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Content semantics */
address{ font-style: normal; color: var(--muted); }
blockquote{
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-left: 4px solid var(--brand);
  background: #f8fbf9;
  border-radius: 8px;
}
blockquote cite{ display:block; margin-top:.4rem; color:var(--muted); font-style: normal; }
code, kbd, samp { font-family: var(--mono); font-size: .95em; }
pre{
  font-family: var(--mono);
  font-size: .95em;
  background: #0b1b12;
  color: #e8fff1;
  padding: 1rem;
  border-radius: var(--radius-sm);
  overflow:auto;
}

/* Lists */
ul,ol{ margin: 0 0 1em 1.2em; padding: 0; }
li{ margin: .25em 0; }

/* Tables */
table, .wp-block-table table{
  width:100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  border:1px solid var(--soft-2);
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
caption{ caption-side: bottom; padding:.5rem; color:var(--muted); }
th,td{ padding:.7rem .8rem; border-top:1px solid var(--soft-2); }
thead th{ background: var(--soft); text-align:left; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background:#fafcfa; }
.table-responsive{ overflow:auto; border-radius:12px; }

/* Details / Summary */
details{ border:1px solid var(--soft-2); border-radius:12px; padding:.6rem .8rem; background:#fff; }
summary{ cursor:pointer; font-weight:700; }
details[open]{ box-shadow: var(--shadow); }

/* Progress / Meter */
progress, meter{ width:100%; height:10px; }
progress{ accent-color: var(--brand); }
meter{ accent-color: var(--brand); }
}

/* ============================================================
   3) LAYOUT & MÉDIAS
   ============================================================ */
@layer components {
/* Wrappers & sections */
.container, .wpz-wrap { width: var(--wrap); margin-inline: auto; }
.section, .wpz-section{ padding: clamp(28px, 5vw, 56px) 0; }
.section--soft, .wpz-section--soft{ background: var(--soft); border-block:1px solid var(--soft-2); }

/* Alignment helpers (Gutenberg & natif) */
.wp-site-blocks main, .alignwide{ width: var(--wrap); margin-inline: auto; }
.alignfull{ width: 100%; margin-inline: 0; }
.alignleft{ float:left; margin:.3rem 1rem .7rem 0; max-width:46%; }
.alignright{ float:right; margin:.3rem 0 .7rem 1rem; max-width:46%; }
.wp-caption, .wp-element-caption{ color:var(--muted); font-size:.9rem; margin-top:.3rem; }
@media (max-width: 820px){
  .alignleft,.alignright{ float:none; margin:0 0 .8rem 0; max-width:100%; }
}

/* Cards */
.card, .wpz-card, .wp-block-group.is-style-card{
  background:#fff;
  border:1px solid var(--soft-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card__body, .wpz-card__body, .wp-block-group.is-style-card > .wp-block-group__inner-container{ padding: 14px; }
}

/* ============================================================
   4) FORMULAIRES COMPLETS (HTML natif + Gutenberg)
   ============================================================ */
@layer components {
/* Champs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select{
  width:100%;
  padding:.75rem .8rem;
  border:1px solid var(--soft-2);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{ min-height:120px; resize: vertical; }
input::placeholder, textarea::placeholder{ color: color-mix(in oklab, var(--muted) 65%, transparent); }

/* États */
:where(input, textarea, select):hover{
  border-color: color-mix(in oklab, var(--brand) 25%, var(--soft-2));
}
:where(input, textarea, select):focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
  outline: none;
}
:where(input, textarea, select):disabled{
  opacity:.6; cursor:not-allowed; background:#f6f7f8;
}

/* Fieldset / Legend */
fieldset{
  border:1px solid var(--soft-2);
  border-radius:12px;
  padding: .8rem 1rem;
  margin: 0 0 1rem 0;
}
legend{
  padding: 0 .4rem;
  font-weight: 700;
  color: var(--muted);
}

/* Cases à cocher / radios */
input[type="checkbox"],
input[type="radio"]{
  inline-size: 1.05rem;
  block-size: 1.05rem;
  accent-color: var(--brand);
}
label{ display:block; font-weight:600; margin:.4rem 0 .2rem; }
label.inline{ display:inline-flex; align-items:center; gap:.5rem; font-weight:500; }

/* Range */
input[type="range"]{
  width:100%;
  accent-color: var(--brand);
}

/* Fichier */
input[type="file"]{
  border:1px dashed var(--soft-2);
  border-radius:12px;
  padding:.7rem;
  background:#fff;
}
input[type="file"]::file-selector-button{
  margin-right:.8rem;
  border:1px solid var(--brand);
  background: var(--brand);
  color:#fff;
  padding:.5rem .8rem;
  border-radius:999px;
  cursor:pointer;
}
input[type="file"]::file-selector-button:hover{
  filter:brightness(.98);
}

/* Boutons natifs */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-element-button,
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius:999px; padding:.7rem 1rem; font-weight:700;
  border:1px solid var(--brand); cursor:pointer; text-decoration:none;
  background: var(--brand); color:#fff; transition: transform .05s ease, filter .2s ease, background .2s ease;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover{ filter:brightness(.98); }
button:active,
input[type="submit"]:active{ transform: translateY(1px); }
button:disabled,
input[type="submit"]:disabled{ opacity:.6; cursor:not-allowed; }

/* Variantes */
.btn--ghost, .is-style-outline .wp-block-button__link{
  background:transparent; color:var(--brand); border-color:var(--brand);
}
.btn--ghost:hover{ background: color-mix(in oklab, var(--brand) 8%, transparent); }
}

/* ============================================================
   5) BLOCS GUTENBERG (principaux)
   ============================================================ */
@layer blocks {
/* Group / Stack / Row */
.wp-block-group{ margin: 0 0 1rem; }
.wp-block-group.is-style-card{ border:1px solid var(--soft-2); border-radius: var(--radius); box-shadow: var(--shadow); background:#fff; }
.is-layout-flow > * + *{ margin-block-start: .8rem; }
.is-layout-constrained > *{ margin-left:auto; margin-right:auto; }

/* Columns */
.wp-block-columns{ display:grid; gap: 16px; grid-template-columns: repeat(12, minmax(0,1fr)); }
.wp-block-column{ grid-column: span 12; }
@media (min-width: 781px){
  .wp-block-columns.is-layout-flex{ display:flex; gap:16px; }
  .wp-block-column{ flex:1; }
}
@media (max-width: 780px){
  .wp-block-columns{ grid-template-columns: 1fr; }
}

/* Media & Text */
.wp-block-media-text{
  display:grid; gap:16px; align-items:center;
  grid-template-columns: 1fr 1fr;
}
.wp-block-media-text .wp-block-media-text__content{ padding: 0; }
@media (max-width: 980px){
  .wp-block-media-text{ grid-template-columns: 1fr; }
}

/* Image / Gallery */
.wp-block-image img{ border-radius: 12px; }
.wp-block-gallery .wp-block-image img{ border-radius: 12px; }

/* Cover */
.wp-block-cover{ border-radius: 18px; overflow:hidden; }
.wp-block-cover__inner-container{ padding: clamp(24px, 6vw, 80px); }

/* Buttons */
.wp-block-buttons{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* Quote / Pullquote */
.wp-block-quote{
  border-left:4px solid var(--brand);
  padding:.75rem 1rem; background:#f8fbf9; border-radius:8px;
}
.wp-block-quote cite{ display:block; margin-top:.4rem; color:var(--muted); font-style:normal; }
.wp-block-pullquote{
  border-top:2px solid var(--brand); border-bottom:2px solid var(--brand);
  padding:1rem; text-align:center;
}

/* Separator / Spacer */
.wp-block-separator{ border:none; border-top:1px solid var(--soft-2); margin:1.5rem 0; }
.wp-block-spacer{ display:block; }

/* Code / Pre / Verse */
.wp-block-code, .wp-block-preformatted, .wp-block-verse{
  font-family: var(--mono);
  background:#0b1b12; color:#e8fff1;
  padding:1rem; border-radius: var(--radius-sm); overflow:auto;
}

/* File block */
.wp-block-file{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.8rem 1rem; border:1px solid var(--soft-2); border-radius: 12px; background:#fff;
}
.wp-block-file__button{ border-radius:999px; background:var(--brand); color:#fff; }

/* Embed / Responsive ratio */
.wp-block-embed.is-type-video iframe,
.wp-has-aspect-ratio iframe,
.wp-has-aspect-ratio video{
  width:100%; height:auto; aspect-ratio: 16/9;
}

/* Navigation */
.wp-block-navigation{ --wp--preset--color--foreground: var(--ink); }
.wp-block-navigation__container{ gap: 8px; }
.wp-block-navigation-item__label{ font-weight:600; }

/* Pagination (Query & classique) */
.wp-block-query-pagination, .wp-block-pagination, .navigation.pagination{
  display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; justify-content:center; margin: 1rem 0;
}
.wp-block-query-pagination .page-numbers,
.wp-block-pagination .page-numbers,
.navigation.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 38px; height: 38px; padding: 0 .6rem;
  border:1px solid var(--soft-2); border-radius: 999px; background:#fff; color:var(--ink);
}
.page-numbers.current{ border-color: var(--brand); background: var(--brand); color:#fff; }
.page-numbers:hover{ border-color: var(--brand); }

/* Table */
.wp-block-table table{ border-radius:12px; }
.wp-block-table figcaption{ color:var(--muted); font-size:.9rem; margin-top:.3rem; }

/* Search */
.wp-block-search__input{ border-radius: 999px; }
.wp-block-search__button{ border-radius: 999px; }
}

/* ============================================================
   6) UTILITAIRES
   ============================================================ */
@layer utilities {
/* Grids */
.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:980px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }

/* Spacing */
.mt-0{ margin-top:0 !important; } .mb-0{ margin-bottom:0 !important; }
.mt-2{ margin-top:.5rem !important; } .mb-2{ margin-bottom:.5rem !important; }
.mt-4{ margin-top:1rem !important; } .mb-4{ margin-bottom:1rem !important; }
.p-0{ padding:0 !important; } .p-2{ padding:.5rem !important; } .p-4{ padding:1rem !important; }
.center{ text-align:center; }

/* Alerts / Notices (utilitaires rapides) */
.notice{ border:1px solid var(--soft-2); border-radius:12px; padding:.8rem 1rem; background:#fff; }
.notice--success{ border-color:#CFE9D9; background:#F2FBF6; }
.notice--warning{ border-color:#f6e3b0; background:#fff9e8; }
.notice--danger{ border-color:#f3cccc; background:#fff0f0; }

/* Accessibility & print */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}
::selection{ background: color-mix(in oklab, var(--brand) 25%, transparent); }

@media print{
  .no-print{ display:none !important; }
  a{ text-decoration:none; color:#000; }
  body{ color:#000; background:#fff; }
  .alignleft,.alignright{ float:none; max-width:100%; }
}
}