/* ==========================================================================
   Kazao — feuille de styles du site vitrine
   Fidèle à la maquette kazao-maquette.dc.html.
   Sommaire : 1. Polices  2. Variables  3. Base  4. Utilitaires  5. Boutons
   6. En-tête  7. Hero  8. Sections  9. Formulaire  10. Pied de page
   11. Pages annexes  12. Réglages (offre cyber, mouvement réduit)
   ========================================================================== */

/* 1. Polices auto-hébergées (sous-ensemble latin : accents, « », œ, €) --- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Variables ----------------------------------------------------------- */
:root {
  /* Couleurs */
  --c-accent: #C8412B;          /* boutons, sur-titres */
  --c-accent-hover: #A9351F;
  --c-accent-soft: #FBEDEA;
  --c-bg: #FBF7EF;              /* fond crème */
  --c-surface: #FFFDF8;         /* cartes */
  --c-white: #FFFFFF;
  --c-ink: #16302E;             /* texte principal */
  --c-muted: #4F625F;           /* texte secondaire */
  --c-muted-strong: #3E524F;
  --c-teal: #0E7C7B;
  --c-teal-dark: #0B5E5D;
  --c-deep: #0F3B3A;            /* sections sombres */
  --c-deeper: #0B2B2A;          /* pied de page */
  --c-aqua: #7FD1C7;
  --c-on-deep-muted: #B9CFC9;
  --c-mint: #DCEFEA;
  --c-mint-bg: #E4F0EB;
  --c-mint-strong: #CFE3DB;
  --c-mint-ink: #2E5A4F;
  --c-sand: #F6E1C3;
  --c-sand-ink: #8A5419;
  --c-rose: #F5DCD6;
  --c-rose-ink: #A3361F;
  --c-paper: #F3ECE0;           /* encart suivi mensuel */
  --c-browser-bar: #F1E8D9;
  --c-browser-screen: #EFE6D6;
  --c-brown: #6B5440;
  --c-line: #E8DDCB;
  --c-line-strong: #D9CCB6;
  --c-line-faq: #E2D5BF;
  --c-outline: #C9BBA3;
  --c-outline-teal: #9FC2B7;
  --c-input-border: #9A8A70;    /* assombri vs maquette : contraste 3:1 exigé pour les champs (WCAG 1.4.11) */
  --c-placeholder: #66736F;
  --c-error: #8E2A1A;
  --c-focus: var(--c-teal);

  /* Typographie */
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;
  --font-logo: "Bricolage Grotesque", system-ui, sans-serif;

  /* Rayons */
  --r-pill: 999px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Espacements */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --gap-section: 56px;

  /* Ombres et mouvements */
  --shadow-badge: 0 12px 30px rgba(15, 59, 58, 0.18);
  --shadow-mock: 0 24px 60px rgba(15, 59, 58, 0.12);
  --shadow-menu: 0 18px 40px rgba(15, 59, 58, 0.16);
  --ease: 150ms ease;
}

/* 3. Base ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  font-family: var(--font-body);
  color: var(--c-ink);
}

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--c-teal); }
a:hover { color: var(--c-teal-dark); }

input, textarea, button { font: inherit; }
img, svg { max-width: 100%; }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.page { overflow-x: clip; }

/* 4. Utilitaires --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--c-ink);
  color: var(--c-bg);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; color: var(--c-bg); }

.text-accent { color: var(--c-accent); }

.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.icon--22 { width: 22px; height: 22px; }
.icon--24 { width: 24px; height: 24px; }
.icon--28 { width: 28px; height: 28px; }
.icon--teal { color: var(--c-teal); }
.icon--check { color: var(--c-teal); stroke-width: 2.2; margin-top: 1px; }
.icon--check-bold { color: var(--c-teal); stroke-width: 2.4; }

.eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.eyebrow--on-dark { color: var(--c-aqua); }
.eyebrow--teal { color: var(--c-teal-dark); }

.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }

.section-title {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.section-title--sm { font-size: clamp(2rem, 3.6vw, 2.9rem); }

.section-lead { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--c-muted); }
.body-lg { margin: 0; font-size: 1.12rem; line-height: 1.65; color: var(--c-muted); }

.price { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }

.tag {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-mint);
  color: var(--c-teal-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tag--lg { padding: 8px 14px; font-size: 14px; font-weight: 600; letter-spacing: 0; }

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.45;
}
.check-list li { display: flex; gap: 10px; align-items: flex-start; }

/* Emplacements d'image (capture Kaï-Kaï, photo) */
.media-slot { position: relative; display: flex; align-items: center; justify-content: center; }
.media-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-slot__placeholder {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-brown);
  text-align: center;
}

/* 5. Boutons et liens d'action ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--accent { background: var(--c-accent); color: var(--c-white); }
.btn--accent:hover { background: var(--c-accent-hover); color: var(--c-white); }

.btn--lg { min-height: 54px; padding: 0 28px; font-size: 17px; }

.btn--outline { border: 1.5px solid var(--c-outline); color: var(--c-ink); }
.btn--outline.btn--lg { padding: 0 26px; }
.btn--outline:hover { border-color: var(--c-ink); background: rgba(22, 48, 46, 0.04); color: var(--c-ink); }

.btn--outline-teal {
  align-self: flex-start;
  padding: 0 20px;
  border: 1.5px solid var(--c-outline-teal);
  color: var(--c-teal-dark);
}
.btn--outline-teal:hover { border-color: var(--c-teal-dark); background: rgba(14, 124, 123, 0.06); color: var(--c-teal-dark); }

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-accent);
  text-decoration: none;
}
.link-cta:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: 4px; }
.link-cta .icon { transition: transform var(--ease); }
.link-cta:hover .icon { transform: translateX(3px); }

.link-external {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  font-size: 17px;
  color: var(--c-teal);
}

/* 6. En-tête et menu ----------------------------------------------------- */
.site-header {
  position: relative;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--c-ink); }
a.brand:hover { color: var(--c-ink); }
.brand__mark { flex: none; }
.brand__name {
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.site-menu { display: contents; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-weight: 500;
  font-size: 16px;
}
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 6px;      /* agrandit la zone cliquable sans déplacer le texte */
  margin-inline: -6px;
  color: var(--c-ink);
  text-decoration: none;
}
.site-nav__list a:hover { color: var(--c-teal); }

.nav-toggle { display: none; }

@media (max-width: 1023.98px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1.5px solid var(--c-outline);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--c-ink);
    cursor: pointer;
    transition: border-color var(--ease), background-color var(--ease);
  }
  .nav-toggle:hover { border-color: var(--c-ink); }

  .nav-toggle__bars { position: relative; display: block; width: 18px; height: 14px; }
  .nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--ease), opacity var(--ease);
  }
  .nav-toggle__bars span:nth-child(1) { top: 0; }
  .nav-toggle__bars span:nth-child(2) { top: 6px; }
  .nav-toggle__bars span:nth-child(3) { top: 12px; }
  .site-header.is-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
  .site-header.is-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .site-menu {
    display: none;
    position: absolute;
    top: calc(100% - 12px);
    left: var(--gutter);
    right: var(--gutter);
    z-index: 50;
    flex-direction: column;
    gap: 16px;
    padding: 8px 20px 20px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-menu);
  }
  .site-header.is-open .site-menu { display: flex; }

  .site-nav__list { flex-direction: column; gap: 0; font-size: 17px; }
  .site-nav__list li + li { border-top: 1px solid var(--c-line); }
  .site-nav__list a { display: flex; justify-content: flex-start; min-height: 50px; margin-inline: 0; padding-inline: 0; }
  .site-menu__cta { width: 100%; }
}

/* 7. Hero ---------------------------------------------------------------- */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-section);
  padding-block: 40px 88px;
}
.hero__content { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero__title {
  margin: 0;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--c-ink);
}
.hero__lead { margin: 0; font-size: 1.22rem; line-height: 1.6; color: var(--c-muted); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__pledges {
  list-style: none;
  margin: -6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-muted-strong);
}
.hero__pledges li { display: flex; align-items: center; gap: 8px; }

.hero__visual { flex: 1 1 400px; min-width: 0; max-width: 560px; position: relative; }
.hero__frame { border-radius: var(--r-xl); overflow: hidden; background: var(--c-sand); }
.hero__illustration { display: block; width: 100%; height: auto; }
.hero__badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  max-width: calc(100% - 40px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-badge);
  font-size: 15px;
  color: var(--c-ink);
}
.hero__badge-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.hero__badge-text strong { font-weight: 700; }
.hero__badge-text span { font-weight: 500; color: var(--c-muted); }

/* 8. Sections ------------------------------------------------------------ */

/* Pour qui ? */
.audience { display: flex; flex-direction: column; gap: 36px; padding-block: 16px 32px; }
.audience__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}
.audience-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.audience-card__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--c-mint);
  color: var(--c-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.audience-card__icon .icon { stroke-width: 1.8; }
.audience-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.audience-card h3 { margin: 0; font-size: 1.18rem; font-weight: 700; }
.audience-card p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--c-muted); }

/* Services */
.services { display: flex; flex-direction: column; gap: 48px; padding-block: 72px 104px; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}
.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.service-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card__icon .icon { stroke-width: 1.75; }
.service-card__icon--teal { background: var(--c-mint); color: var(--c-teal); }
.service-card__icon--sand { background: var(--c-sand); color: var(--c-sand-ink); }
.service-card__icon--rose { background: var(--c-rose); color: var(--c-rose-ink); }
.service-card__intro { display: flex; flex-direction: column; gap: 8px; }
.service-card h3 { margin: 0; font-size: 1.6rem; letter-spacing: -0.01em; font-weight: 700; }
.service-card__intro p { margin: 0; font-size: 1.06rem; line-height: 1.55; color: var(--c-muted); }
.service-card__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px dashed var(--c-line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Suivi mensuel */
.plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  padding: 28px 32px;
  border-radius: var(--r-lg);
  background: var(--c-paper);
}
.plan__intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.plan__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.plan h3 { margin: 0; font-size: 1.45rem; letter-spacing: -0.01em; font-weight: 700; }
.plan__text { margin: 0; font-size: 1.06rem; line-height: 1.55; color: var(--c-muted); }
.plan__ownership {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.98rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--c-teal-dark);
}
.plan__ownership .icon { margin-top: 1px; }
.plan__list { flex: 1 1 300px; min-width: 0; gap: 10px; }
.plan__price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* Vagues autour de « Méthode » */
.wave { display: block; width: 100%; height: 56px; }
.wave--top { margin-bottom: -1px; }
.wave--bottom { margin-top: -1px; }

/* Méthode */
.method { background: var(--c-deep); color: var(--c-bg); --c-focus: var(--c-aqua); }
.method__inner { display: flex; flex-direction: column; gap: var(--gap-section); padding-block: 72px 88px; }
.method .section-title { color: var(--c-bg); }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 40px 32px;
}
.step { display: flex; flex-direction: column; gap: 14px; }
.step__number {
  width: 55px;
  height: 55px;
  border: 1.5px solid var(--c-aqua);
  border-radius: var(--r-pill);
  color: var(--c-aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
}
.step h3 { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--c-bg); }
.step p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--c-on-deep-muted); }

/* Réalisation */
.showcase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-section);
  padding-block: 88px 104px;
}
.browser-mock {
  flex: 1 1 480px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 22px;
  background: var(--c-surface);
  box-shadow: var(--shadow-mock);
}
.browser-mock__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-browser-bar);
}
.browser-mock__dots { display: flex; gap: 6px; }
.browser-mock__dots span { display: block; width: 11px; height: 11px; border-radius: var(--r-pill); background: var(--c-line-strong); }
.browser-mock__url {
  flex: 1;
  min-width: 0;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: 14px;
  color: var(--c-muted);
}
.browser-mock__screen { aspect-ratio: 16 / 10; padding: 24px; background: var(--c-browser-screen); }
.showcase__content { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* À propos */
.about { background: var(--c-mint-bg); }
.about__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-section); padding-block: 96px; }
.about__photo {
  flex: 0 1 340px;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px;
  background: var(--c-mint-strong);
}
.about__photo .media-slot__placeholder { color: var(--c-mint-ink); }
.about__content { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.about .body-lg { color: var(--c-muted-strong); }
.about__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 20px;
  padding-top: 12px;
}
.about__values > div { display: flex; flex-direction: column; gap: 6px; }
.about__values h3 { margin: 0; font-size: 1.12rem; font-weight: 700; }
.about__values p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--c-muted-strong); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 40px; padding-block: 96px 0; }
.faq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 32px 56px;
}
.faq-item { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid var(--c-line-faq); }
.faq-item h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.faq-item p { margin: 0; font-size: 1.04rem; line-height: 1.6; color: var(--c-muted); }

/* Contact */
.contact { padding-block: 104px; }
.contact__card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 36px;
  background: var(--c-deep);
  --c-focus: var(--c-aqua);
}
.contact__intro { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 22px; color: var(--c-bg); }
.section-title--contact { line-height: 1.06; color: var(--c-bg); }
.contact__lead { margin: 0; font-size: 1.12rem; line-height: 1.6; color: var(--c-on-deep-muted); }
.contact__details {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  font-size: 1.05rem;
}
.contact__detail { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.contact__detail--strong { font-weight: 600; }
.contact__detail .icon { color: var(--c-aqua); stroke-width: 1.9; }
.contact__detail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-bg);
  text-decoration: underline;
  text-decoration-color: rgba(127, 209, 199, 0.55);
  text-underline-offset: 4px;
}
.contact__detail a:hover { color: var(--c-white); text-decoration-color: var(--c-aqua); }

/* 9. Formulaire ---------------------------------------------------------- */
.contact-form {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  --c-focus: var(--c-teal);
}
.contact-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label,
.choices legend { font-weight: 600; font-size: 15px; color: var(--c-ink); }
.field input,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid var(--c-input-border);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 16px;
  transition: border-color var(--ease);
}
.field textarea { padding: 14px 16px; line-height: 1.5; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--c-ink); }
.field input:focus-visible,
.field textarea:focus-visible { border-color: var(--c-teal); outline-offset: 1px; }
/* Même spécificité que :hover / :focus-visible et placé après : l'erreur reste visible pendant la correction. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--c-error); }
::placeholder { color: var(--c-placeholder); opacity: 1; }

.choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.choices legend { padding: 0; margin-bottom: 10px; }
.choices__list { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}
.choice:hover { border-color: var(--c-input-border); }
.choice input { margin: 0; accent-color: var(--c-accent); }
.choices[aria-invalid="true"] .choice { border-color: var(--c-error); }
/* L'anneau de focus passe du bouton radio à la pastille, seulement si :has() est pris en charge. */
@supports selector(:has(*)) {
  .choice input:focus-visible { outline: none; }
  .choice:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
  .choice:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
}

/* Champ piège anti-spam : invisible pour les humains, rempli par les robots */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.btn--submit { width: 100%; min-height: 56px; font-size: 17px; }
/* Pendant l'envoi, le bouton garde le focus (aria-disabled plutôt que disabled). */
.btn--submit[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

.form-status {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 600;
}
.form-status:empty { margin-top: -20px; padding: 0; }
.form-status--success { background: var(--c-mint); color: var(--c-teal-dark); }
.form-status--error { background: var(--c-rose); color: var(--c-error); }

/* 10. Pied de page ------------------------------------------------------- */
.site-footer { background: var(--c-deeper); color: var(--c-bg); --c-focus: var(--c-aqua); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding-block: 40px;
}
.brand--footer { color: var(--c-bg); }
.brand--footer .brand__name { font-size: 24px; }
.site-footer__services,
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--c-on-deep-muted); }
.site-footer__services { font-size: 15px; }
.site-footer__legal { font-size: 14px; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-on-deep-muted); }
.site-footer__legal a:hover { color: var(--c-bg); }

/* 11. Pages annexes (mentions légales, 404) ------------------------------ */
.legal { padding-block: 40px 104px; }
.legal__inner { max-width: 780px; display: flex; flex-direction: column; gap: 14px; }
.legal__title {
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.legal h2 { margin: 28px 0 0; font-size: 1.4rem; letter-spacing: -0.01em; font-weight: 700; }
.legal p,
.legal li { margin: 0; font-size: 1.04rem; line-height: 1.65; color: var(--c-muted); }
.legal ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal strong { color: var(--c-ink); font-weight: 600; }
.legal__updated { font-size: 0.95rem; }

.not-found {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-section);
  padding-block: 40px 104px;
}
.not-found__content { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.not-found__code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 12vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--c-accent);
}
.not-found__visual { flex: 1 1 320px; min-width: 0; max-width: 460px; }

/* 12. Réglages ----------------------------------------------------------- */

/* Offre cybersécurité : <body class="no-cyber"> la masque partout. */
.no-cyber [data-offre="cyber"] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}