/* 3S-A — feuille de style du site. Valeurs issues de la charte graphique 3S-A. */

@font-face { font-family: "Luciole"; src: url("../fonts/Luciole-Regular.woff2") format("woff2"), url("../fonts/Luciole-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("../fonts/Luciole-Italic.woff2") format("woff2"), url("../fonts/Luciole-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("../fonts/Luciole-Bold.woff2") format("woff2"), url("../fonts/Luciole-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("../fonts/Luciole-BoldItalic.woff2") format("woff2"), url("../fonts/Luciole-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --rouge-3sa: #ed1c24;
  --rouge-action: #c4161c;
  --on-rouge: #ffffff;
  --orange-flamme: #f57c1f;
  --jaune-flamme: #fbc520;
  --prune: #851e49;
  --aubergine: #5e1f54;
  --marine: #24265d;
  --on-marine: #ffffff;
  --surface: #fbf8f5;
  --surface-raised: #ffffff;
  --surface-sunken: #f3eeea;
  --ink: #1b1c3a;
  --ink-muted: #5b5d72;
  --border: #8a8b9e;
  --hairline: #e4dcd6;
  --focus: #24265d;
  --succes: #1d6b45;

  --font-sans: Luciole, Verdana, Tahoma, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(27,28,58,.06), 0 4px 16px rgba(27,28,58,.06);
  --flamme: linear-gradient(90deg, #ed1c24, #f57c1f, #fbc520);
  --largeur: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 18px/28px var(--font-sans); }
img, svg { max-width: 100%; }
a { color: var(--rouge-action); text-underline-offset: 3px; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-5); background: var(--marine); color: var(--on-marine); border-radius: var(--radius-md); font-weight: 700; }
.skip-link:focus { top: var(--space-4); outline-color: var(--jaune-flamme); }

.container { width: 100%; max-width: calc(var(--largeur) + 2 * var(--space-6)); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-8) 0; }
.section--sunken { background: var(--surface-sunken); }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); font: 700 28px/36px var(--font-sans); }
.prose h3 { margin-top: var(--space-6); font: 700 22px/30px var(--font-sans); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--rouge-3sa); }

/* Titres */
.eyebrow { margin: 0 0 var(--space-2); color: var(--rouge-action); font: 700 15px/20px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; }
.h2 { font: 700 28px/36px var(--font-sans); }
.h2::after { content: ""; display: block; width: 64px; height: 4px; margin-top: var(--space-3); border-radius: 2px; background: var(--flamme); }
.section-head { margin-bottom: var(--space-7); max-width: 68ch; }
.section-head .lead { margin-top: var(--space-4); }
.lead { font: 400 20px/32px var(--font-sans); }
.muted { color: var(--ink-muted); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 2px solid transparent; font: 700 16px/22px var(--font-sans); text-decoration: none; cursor: pointer; transition: filter 150ms, border-color 150ms; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primaire { background: var(--rouge-action); color: var(--on-rouge); }
.btn--primaire:hover { filter: brightness(.92); }
.btn--secondaire { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--secondaire:hover { border-color: var(--ink); }
.btn--tel { background: var(--on-marine); color: var(--marine); }
.btn--clair { background: transparent; color: var(--on-marine); border-color: rgba(255,255,255,.7); }
.btn--clair:hover { border-color: var(--on-marine); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* En-tête */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface-raised); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-5); min-height: 80px; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; padding: var(--space-2) 0; }
.brand img { width: 56px; height: 56px; object-fit: contain; }
.brand__name { display: block; font: 700 22px/26px var(--font-sans); }
.brand__tag { display: block; color: var(--ink-muted); font: 400 14px/18px var(--font-sans); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-nav a:not(.btn) { display: block; padding: var(--space-2) 0; color: var(--ink); font: 700 16px/22px var(--font-sans); text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--rouge-action); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--rouge-3sa); }
.nav-toggle { display: none; margin-left: auto; min-height: 48px; padding: 0 var(--space-4); gap: var(--space-2); align-items: center; background: transparent; border: 2px solid var(--border); border-radius: var(--radius-md); color: var(--ink); font: 700 16px/22px var(--font-sans); cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; }
.site-header__flame { height: 4px; background: var(--flamme); }

/* Bandeau d'accueil */
.hero { position: relative; overflow: hidden; color: var(--on-marine); background: linear-gradient(135deg, var(--prune) 0%, var(--aubergine) 35%, var(--marine) 75%); }
.hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 48px solid rgba(237,28,36,.35); pointer-events: none; }
.hero .container { position: relative; z-index: 1; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.hero h1 { max-width: 18ch; color: var(--on-marine); font: 700 48px/56px var(--font-sans); letter-spacing: -.5px; }
.hero .lead { max-width: 52ch; margin-top: var(--space-5); }
.hero .actions { margin-top: var(--space-6); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; font: 700 15px/22px var(--font-sans); }
.hero__meta li { display: flex; align-items: center; gap: var(--space-2); }
.hero__meta li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--jaune-flamme); }
.hero :focus-visible, .cta :focus-visible, .site-footer :focus-visible { outline-color: var(--jaune-flamme); }

/* Bandeau de page intérieure */
.page-hero { background: var(--surface-sunken); padding: var(--space-7) 0; }
.page-hero h1 { font: 700 36px/44px var(--font-sans); }
.page-hero .lead { margin-top: var(--space-4); max-width: 60ch; }

/* Grilles et cartes */
.grid { display: grid; gap: var(--space-6); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); transition: transform 150ms; }
.card:hover { transform: translateY(-2px); }
.card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--rouge-3sa); }
.card__icon svg { width: 28px; height: 28px; }
.card h3 { font: 700 22px/30px var(--font-sans); }
.card ul { margin: 0; padding-left: 1.2em; }
.card li + li { margin-top: var(--space-1); }
.card li::marker { color: var(--rouge-3sa); }
.card__link { margin-top: auto; padding-top: var(--space-2); font-weight: 700; }
.card__step { color: var(--prune); font: 700 15px/20px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; }

/* Pastilles */
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; border-radius: var(--radius-pill); border: 2px solid var(--marine); background: var(--surface-raised); color: var(--ink); font: 700 15px/20px var(--font-sans); }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge-3sa); }

/* Qualifications */
.quals { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); align-items: start; }
.quals dl { margin: 0; display: grid; gap: var(--space-4); }
.quals dt { font-weight: 700; }
.quals dd { margin: 0; color: var(--ink-muted); }
.quals__list { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.quals__list strong { display: block; }

/* Références */
.refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.refs li { padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--hairline); }
.refs strong { display: block; font: 700 20px/28px var(--font-sans); }
.refs span { display: block; margin-top: var(--space-2); color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }

/* Services (page détaillée) */
.service { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-7); padding: var(--space-8) 0; border-top: 1px solid var(--hairline); scroll-margin-top: 100px; }
.service:first-of-type { border-top: 0; }
.service__intro .card__icon { margin-bottom: var(--space-4); }
.service__intro h2 { font: 700 28px/36px var(--font-sans); }
.service__intro p { margin-top: var(--space-4); }
.service__intro .badges { margin-top: var(--space-5); }
.service__blocks { display: grid; gap: var(--space-5); }
.service__blocks .card:hover { transform: none; }
.note { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font: 400 16px/24px var(--font-sans); }

/* Actualités */
.posts { display: grid; }
.post { display: grid; gap: var(--space-2); padding: var(--space-6) 0; border-bottom: 1px solid var(--hairline); }
.post:first-child { padding-top: 0; }
.post__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.post__tag { color: var(--prune); font: 700 14px/20px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; }
.post time { color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }
.post h2, .post h3 { font: 700 22px/30px var(--font-sans); }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { color: var(--rouge-action); text-decoration: underline; }
.post .prose { margin-top: var(--space-2); }

/* Appel à l'action */
.cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: center; padding: var(--space-7) var(--space-7); border-radius: var(--radius-lg); background: var(--marine); color: var(--on-marine); }
.cta h2 { color: var(--on-marine); font: 700 28px/36px var(--font-sans); }
.cta p { margin-top: var(--space-3); }
.cta .actions { justify-content: flex-end; }

/* Contact */
.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-7); align-items: start; }
.form { display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field label { font: 700 16px/22px var(--font-sans); }
.field .hint { color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 18px/24px var(--font-sans); }
.field textarea { min-height: 160px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font: 400 16px/24px var(--font-sans); }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--rouge-action); flex: none; }
.hp { position: absolute; left: -9999px; }
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font: 700 16px/24px var(--font-sans); }
.alert svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.alert--ok { background: #e7f3ec; color: var(--succes); }
.alert--erreur { background: #fbeaea; color: var(--rouge-action); }
.alert[hidden] { display: none; }
.contact-card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); }
.contact-card h2 { font: 700 22px/30px var(--font-sans); }
.contact-card dl { margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.contact-card dt { color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }
.contact-card dd { margin: 0; font-weight: 700; }
.contact-card .tel { font: 700 26px/34px var(--font-sans); color: var(--ink); text-decoration: none; border-bottom: 4px solid var(--jaune-flamme); }

/* Pied de page */
.site-footer { margin-top: var(--space-8); background: var(--marine); color: var(--on-marine); font: 400 16px/26px var(--font-sans); }
.site-footer__flame { height: 4px; background: var(--flamme); }
.site-footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); padding-top: var(--space-7); padding-bottom: var(--space-7); }
.site-footer h2 { color: var(--on-marine); font: 700 18px/26px var(--font-sans); margin-bottom: var(--space-3); }
.site-footer a { color: var(--on-marine); }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.footer-brand { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.footer-brand img { width: 64px; height: 64px; padding: 4px; border-radius: var(--radius-lg); background: var(--surface-raised); object-fit: contain; }
.footer-galaxie { margin-top: var(--space-3); font-weight: 700; }
.footer-brand strong { display: block; font: 700 22px/26px var(--font-sans); }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.2); }
.site-footer__legal .container { display: block; padding-top: var(--space-5); padding-bottom: var(--space-5); font: 400 14px/22px var(--font-sans); }

/* Adaptations */
@media (max-width: 1000px) {
  .grid--3, .refs { grid-template-columns: repeat(2, 1fr); }
  .quals, .service, .contact, .cta { grid-template-columns: 1fr; }
  .cta .actions { justify-content: flex-start; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--surface-raised); border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-card); }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3) var(--space-6) var(--space-5); }
  .site-nav a:not(.btn) { padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
  .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--rouge-3sa); padding-left: var(--space-3); }
  .site-nav li:last-child { margin-top: var(--space-4); }
  .site-nav .btn { width: 100%; }
  .site-header { position: sticky; }
  .site-header__bar { position: static; }
}
@media (max-width: 600px) {
  body { font-size: 18px; }
  .container { padding: 0 var(--space-4); }
  .section { padding: var(--space-7) 0; }
  .service { padding: var(--space-7) 0; }
  .brand__tag { display: none; }
  .brand img { width: 44px; height: 44px; }
  .hero .container { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .hero h1 { font-size: 36px; line-height: 44px; }
  .hero::after { width: 260px; height: 260px; border-width: 32px; right: -110px; top: -110px; }
  .page-hero h1 { font-size: 30px; line-height: 38px; }
  .grid--3, .grid--2, .refs, .field--row { grid-template-columns: 1fr; }
  .cta { padding: var(--space-6) var(--space-5); }
  .site-footer .container { grid-template-columns: 1fr; gap: var(--space-6); }
  .actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn { transition: none; }
  .card:hover { transform: none; }
}
@media print {
  .site-header, .site-footer, .cta, .nav-toggle { display: none; }
  .hero { background: none; color: var(--ink); }
  .hero h1 { color: var(--ink); }
}

/* Recette du 11 oct. 2026 : en-tête sur petits écrans d'ordinateur */
.btn { white-space: nowrap; }
@media (max-width: 1180px) { .brand__tag { display: none; } }