/* Cœur Webdevo : variables standard, base et composants communs à tous les sites.
   Le site donne ses couleurs et ses polices dans son style.css en redéfinissant ces variables,
   et peut surcharger n'importe quelle classe. Ne jamais modifier ce fichier pour un site. */

:root {
  /* Couleurs : le site redéfinit au moins --accent, --ink et --paper */
  --ink: #101318;            /* texte fort, aplats sombres */
  --ink-2: #1c222a;
  --text: #3a404a;           /* texte courant */
  --muted: #6b717b;          /* texte secondaire */
  --paper: #ffffff;          /* fond des cartes */
  --bg: #f6f4ef;             /* fond de page */
  --bg-alt: #eee9e0;         /* fond des sections alternées */
  --line: #e2ddd3;           /* filets et bordures */
  --accent: #1a7581;         /* couleur de marque */
  --accent-dk: #14606a;      /* survol */
  --accent-soft: #e6f1f2;    /* aplats légers */
  --on-accent: #ffffff;      /* texte sur la couleur de marque */
  --err: #b3261e;
  --ok: #2c7445;

  /* Typographie */
  --f-head: "Archivo", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-body: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Mise en page */
  --maxw: 1200px;
  --maxw-etroit: 820px;
  --pad: clamp(1rem, 4vw, 2rem);
  --section: clamp(3rem, 7vw, 5.5rem);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(16, 19, 24, .05), 0 8px 24px -16px rgba(16, 19, 24, .25);
  --shadow-2: 0 24px 60px -30px rgba(16, 19, 24, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-head); color: var(--ink); line-height: 1.15; margin: 0 0 .6em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 700; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Structure */
.wd-wrap { width: min(var(--maxw), 100% - 2 * var(--pad)); margin-inline: auto; }
.wd-wrap--etroit { width: min(var(--maxw-etroit), 100% - 2 * var(--pad)); }
.wd-section { padding: var(--section) 0; }
.wd-section--alt { background: var(--bg-alt); }
.wd-section--sombre { background: var(--ink); color: #d7dae0; }
.wd-section--sombre h2, .wd-section--sombre h3 { color: #fff; }
.wd-kicker { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; }
.wd-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--text); max-width: 62ch; }
.wd-grille { display: grid; gap: clamp(1rem, 2.5vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Boutons */
.wd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.4rem; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); font-family: inherit; font-size: 1rem; }
.wd-btn:hover { transform: translateY(-1px); }
.wd-btn--accent { background: var(--accent); color: var(--on-accent); }
.wd-btn--accent:hover { background: var(--accent-dk); }
.wd-btn--ink { background: var(--ink); color: #fff; }
.wd-btn--ligne { background: transparent; color: var(--ink); border-color: var(--line); }
.wd-btn--ligne:hover { border-color: var(--accent); color: var(--accent); }
.wd-btn .wd-ico { width: 1.05em; height: 1.05em; }

/* Icônes */
.wd-ico { width: 1.25rem; height: 1.25rem; flex: none; display: inline-block; vertical-align: -.2em; }
.wd-ico--gros { width: 2rem; height: 2rem; }

/* Cartes et images */
.wd-carte { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 1.8rem); box-shadow: var(--shadow-1); }
.wd-media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.wd-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wd-media > *:not(img) { position: relative; z-index: 2; }
.wd-ph { display: grid; place-items: center; min-height: 180px; background: var(--bg-alt); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .9rem; }
.wd-ph span { display: inline-flex; align-items: center; gap: .4rem; }

/* Haut des pages intérieures : bandeau sombre, photo en fondu à droite */
.wd-hero-int { position: relative; background: var(--ink); color: #cfd4db; padding: calc(var(--section) * .8) 0; overflow: hidden; }
.wd-hero-int h1 { color: #fff; max-width: 20ch; }
.wd-hero-int .wd-lead { color: #cfd4db; max-width: 54ch; }
.wd-hero-int .wd-kicker { color: var(--accent); }
.wd-hero-int__media { position: absolute; inset: 0 0 0 auto; width: min(58%, 780px); }
.wd-hero-int__media img { width: 100%; height: 100%; object-fit: cover; }
.wd-hero-int__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(16, 19, 24, .85) 35%, rgba(16, 19, 24, .3) 100%); }
.wd-hero-int__in { position: relative; z-index: 2; }
.wd-hero-int--photo .wd-hero-int__in { max-width: 62%; }
@media (max-width: 860px) { .wd-hero-int__media { width: 100%; opacity: .35; } .wd-hero-int--photo .wd-hero-int__in { max-width: 100%; } }

/* FAQ */
.wd-faq { display: grid; gap: .6rem; }
.wd-faq__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wd-faq__q { margin: 0; font-size: 1.02rem; }
.wd-faq__q button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; background: none; border: 0; padding: 1.05rem 1.2rem; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.wd-faq__ico { width: 12px; height: 12px; flex: none; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .25s var(--ease); }
.wd-faq__q button[aria-expanded="true"] .wd-faq__ico { transform: rotate(-135deg); }
.wd-faq__a { padding: 0 1.2rem 1.1rem; color: var(--text); }
.wd-faq__a p:last-child { margin-bottom: 0; }

/* Avis */
.wd-avis { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.wd-avis__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin: 0; box-shadow: var(--shadow-1); }
.wd-avis__notes { display: flex; gap: 2px; color: #f0a500; margin-bottom: .7rem; }
.wd-avis__notes .wd-ico { width: 1rem; height: 1rem; fill: currentColor; }
.wd-avis__item blockquote { margin: 0 0 1rem; font-style: italic; }
.wd-avis__item figcaption { font-weight: 700; color: var(--ink); }
.wd-avis__item figcaption span { font-weight: 400; color: var(--muted); }

/* Bande d'appel à l'action */
.wd-cta { background: var(--ink); color: #d7dae0; padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.wd-cta h2 { color: #fff; margin-bottom: .3rem; }
.wd-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.wd-cta__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.wd-cta .wd-btn--ligne { color: #fff; border-color: rgba(255, 255, 255, .35); }

/* Section contact : formulaire d'abord sur mobile (règle des formulaires) */
.wd-contact { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
.wd-contact__form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 2rem); box-shadow: var(--shadow-1); }
.wd-contact__infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.wd-contact__infos li { display: flex; gap: .8rem; align-items: flex-start; }
.wd-contact__infos .wd-ico { color: var(--accent); margin-top: .15rem; }
.wd-contact__infos a { text-decoration: none; font-weight: 700; color: var(--ink); }
@media (max-width: 900px) { .wd-contact { grid-template-columns: minmax(0, 1fr); } .wd-contact__infos { order: 2; } }

/* Formulaires : le mu-plugin pose son propre style de base, on l'accorde au thème */
.wd-contact .wdf-form { --wdf-accent: var(--accent); --wdf-ink: var(--ink); --wdf-line: var(--line); --wdf-bg: var(--paper); }

/* Bouton « Gérer les cookies » du pied de page */
.wd-cc-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }