/* =========================================================
   Uvidza Ulanga — feuille de style principale
   Bleu marine #012263 · Vert #3C9F35 · Titres Space Grotesk
   ========================================================= */

/* ---------- Polices auto-hébergées (RGPD friendly) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  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: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 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: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons de design ---------- */
:root {
  --navy: #012263;
  --navy-700: #0a2e72;
  --navy-900: #011a4d;
  --green: #3c9f35;        /* vert de marque : accents, icônes, filets */
  --green-700: #2f7f2a;    /* vert accessible : texte et aplats (5:1 sur blanc) */
  --green-800: #276b22;
  --green-50: #eef7ed;
  --sand: #efdfbe;

  --text: #16203a;
  --muted: #5a6478;
  --line: #e4e9f2;
  --surface: #ffffff;
  --surface-alt: #f5f8fc;   /* bleu très pâle */
  --surface-vert: #f6fbf5;  /* vert très pâle */
  --surface-sable: #fdfaf4; /* sable très pâle */

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(1, 34, 99, .06), 0 4px 12px rgba(1, 34, 99, .05);
  --shadow: 0 12px 32px rgba(1, 34, 99, .10);
  --shadow-lg: 0 24px 60px rgba(1, 34, 99, .16);

  --container: 1160px;
  --section-y: clamp(40px, 4.4vw, 64px);
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --font-title: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html {
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.95rem, 1.35rem + 2.4vw, 2.95rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); font-weight: 700; }
h3 { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-color: rgba(1, 34, 99, .35); text-underline-offset: 3px; }
a:hover { color: var(--green-700); }

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section--alt {
  background:
    radial-gradient(42rem 22rem at 88% -14%, rgba(1, 34, 99, .07), transparent 62%),
    var(--surface-alt);
}
.section--vert {
  background:
    radial-gradient(38rem 20rem at 10% -12%, rgba(60, 159, 53, .12), transparent 62%),
    var(--surface-vert);
}
.section--sable {
  background:
    radial-gradient(40rem 22rem at 90% -12%, rgba(239, 223, 190, .55), transparent 60%),
    var(--surface-sable);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.sprite { display: none; }

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

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: .95rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn svg { width: 20px; height: 20px; flex: none; }

.btn--primary { background: var(--green-700); color: #fff; box-shadow: 0 10px 24px rgba(47, 127, 42, .28); }
.btn--primary:hover { background: var(--green-800); color: #fff; box-shadow: 0 14px 30px rgba(47, 127, 42, .34); }

.btn--outline { background: transparent; color: var(--navy); border-color: rgba(1, 34, 99, .22); }
.btn--outline:hover { border-color: var(--navy); background: rgba(1, 34, 99, .04); color: var(--navy); }

.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: #f1f5ff; color: var(--navy); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.btn--block { width: 100%; }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 20px rgba(1, 34, 99, .06); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: clamp(148px, 20vw, 196px); height: auto; }

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav-list { display: flex; align-items: center; gap: 1.7rem; }
.nav-list a {
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover, .nav-list a.is-active { color: var(--navy); border-bottom-color: var(--green); }

.nav .btn { padding: .7rem 1.15rem; font-size: .95rem; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(1px); }

@media (max-width: 940px) {
  .nav-toggle { display: grid; }
  .nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { display: block; padding: .85rem .25rem; border-bottom: 1px solid var(--line); }
  .nav-list a:hover, .nav-list a.is-active { border-bottom-color: var(--line); }
  .nav .btn { margin-top: .9rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 32rem at 85% -10%, rgba(60, 159, 53, .12), transparent 60%),
    radial-gradient(48rem 30rem at 0% 0%, rgba(1, 34, 99, .09), transparent 60%),
    var(--surface);
  padding-block: clamp(30px, 3.4vw, 52px) clamp(34px, 4vw, 60px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-title);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid rgba(60, 159, 53, .22);
  padding: .4rem .85rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.hero h1 { margin-bottom: .9rem; }

.hero-lead {
  font-size: clamp(1rem, .97rem + .28vw, 1.12rem);
  color: var(--muted);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.5rem;
}

/* La phrase qui dit ce que fait le bouton de visite */
.hero-visite-note {
  margin-top: .85rem;
  font-size: .93rem;
  color: var(--muted);
  max-width: 44ch;
}
.btn--visite { text-decoration: none; }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.7rem;
  margin-top: 1.7rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
}
.hero-points svg { width: 22px; height: 22px; color: var(--green); flex: none; }

.hero-visual { position: relative; }
.hero-visual picture { display: block; }
.hero-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}


.hero-badge {
  position: absolute;
  left: -12px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  box-shadow: var(--shadow);
  max-width: 17rem;
}
.hero-badge svg { width: 34px; height: 34px; color: var(--green); flex: none; }
.hero-badge strong { display: block; font-family: var(--font-title); color: var(--navy); font-size: .98rem; }
.hero-badge span { font-size: .84rem; color: var(--muted); line-height: 1.4; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 520px; }
  .hero-badge {
    position: relative;
    z-index: 1;
    left: auto;
    bottom: auto;
    max-width: none;
    margin-top: -1.6rem;
    margin-inline: auto;
    width: fit-content;
  }
}

/* ---------- Titres de section ---------- */
.section-head { max-width: 46rem; margin-bottom: clamp(1.1rem, 1.7vw, 1.45rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* ---------- Qui sommes-nous ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.about-text p { font-size: 1.02rem; color: #313c56; }

.value-list { display: grid; gap: .8rem; }
.value-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .95rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.value-card .ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
  flex: none;
}
.value-card .ico svg { width: 22px; height: 22px; }
.value-card h3 { font-size: 1rem; margin-bottom: .15rem; }
.value-card p { font-size: .92rem; color: var(--muted); }

@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
@media (max-width: 980px) { .services-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow-sm);
}

/* Icône, titre et pastille sur une seule ligne */
.service-tete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .7rem;
  margin-bottom: .7rem;
}
.service-tete h3 { flex: 1 1 8rem; margin: 0; font-size: 1.08rem; }
.service-tete .badge { margin: 0; }
.service-card:hover { box-shadow: var(--shadow); border-color: rgba(60, 159, 53, .35); }
.service-card--soon { background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); }

.service-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--navy);
  color: #fff;
  flex: none;
}
.service-icon svg { width: 21px; height: 21px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-title);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  margin-bottom: .7rem;
  width: fit-content;
}
.badge--live { background: var(--green-700); color: #fff; }
.badge--live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.badge--soon { background: #eef1f7; color: #56617a; }

.service-card > p { color: var(--muted); font-size: .92rem; line-height: 1.45; margin-bottom: 0; }

.service-list {
  display: grid;
  gap: .4rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--line);
}
.service-list li { display: flex; gap: .55rem; font-size: .88rem; line-height: 1.42; }
.service-list li span { color: var(--muted); }
.service-list li svg { width: 19px; height: 19px; color: var(--green); flex: none; margin-top: .2rem; }
.service-list strong { font-family: var(--font-title); color: var(--navy); font-weight: 600; display: block; }

.service-cta { margin-top: auto; padding-top: .8rem; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .96rem;
  color: var(--green-700);
  text-decoration: none;
}
.service-link svg { width: 17px; height: 17px; }
.service-note { font-size: .88rem; color: var(--muted); }

/* ---------- Comment ça se passe ---------- */
.etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  counter-reset: etape;
}
@media (max-width: 980px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

.etape {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding-top: 1rem;
  border-top: 2px solid var(--line);
}
.etape-num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--green-700);
  background: var(--green-50);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.etape h3 { font-size: 1rem; margin-bottom: .25rem; }
.etape p { font-size: .93rem; color: var(--muted); }

/* ---------- Bandeau engagements ---------- */
.band {
  background:
    radial-gradient(40rem 24rem at 90% 0%, rgba(60, 159, 53, .22), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
}
.band h2, .band h3 { color: #fff; }
.band .section-head p { color: rgba(255, 255, 255, .78); }

.commitments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
/* Deux colonnes tant que quatre rendraient les textes trop étroits */
@media (max-width: 1180px) { .commitments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .commitments { grid-template-columns: 1fr; } }

.commitment {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: 1.15rem 1.15rem;
}
.commitment svg { width: 26px; height: 26px; color: #7fd177; margin-bottom: .6rem; }
.commitment h3 { font-size: 1rem; margin-bottom: .25rem; }
.commitment p { font-size: .9rem; color: rgba(255, 255, 255, .78); }

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, min-content);
  grid-auto-flow: column;
  align-content: start;
  gap: .55rem .9rem;
  max-width: 62rem;
  margin-inline: auto;
}
.faq details { align-self: start; }
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; max-width: 52rem; }
}
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq details[open] { border-color: rgba(60, 159, 53, .4); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.15rem;
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 12px; height: 12px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translateY(-2px);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .faq-body { padding: 0 1.15rem 1.05rem; color: var(--muted); font-size: .95rem; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .7rem; }
.field label { font-size: .9rem; font-weight: 600; color: var(--navy); font-family: var(--font-title); }
.field .hint { font-weight: 400; color: var(--muted); font-family: var(--font-body); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: .98rem;
  color: var(--text);
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .62rem .8rem;
  width: 100%;
}
.field textarea { min-height: 82px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(60, 159, 53, .14);
}
.field input:user-invalid { border-color: #d24a43; }

.champ-piege {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-statut {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  line-height: 1.5;
}
.form-statut.est-succes { background: var(--green-50); color: #1f5c1b; border: 1px solid rgba(60, 159, 53, .35); }
.form-statut.est-echec { background: #fdf1f0; color: #8f2620; border: 1px solid rgba(178, 49, 42, .3); }
.form-statut a { color: inherit; }

.form-actions { display: grid; gap: .75rem; margin-top: 1rem; }
#form-envoi[aria-busy="true"] { opacity: .75; cursor: progress; }
.form-legal { font-size: .82rem; color: var(--muted); margin-top: .8rem; }

.contact-panel { display: grid; gap: .8rem; align-content: start; }
@media (min-width: 941px) { .contact-panel { position: sticky; top: 104px; } }
.contact-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
a.contact-card:hover { box-shadow: var(--shadow); border-color: rgba(60, 159, 53, .4); }
.contact-card .ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--navy);
  color: #fff;
  flex: none;
}
.contact-card .ico svg { width: 23px; height: 23px; }
.contact-card h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.contact-card p { font-size: .95rem; color: var(--muted); }
.contact-card strong { color: var(--navy); font-weight: 600; }

.hours {
  background:
    radial-gradient(22rem 14rem at 100% 0%, rgba(60, 159, 53, .28), transparent 62%),
    var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
}
.hours h3 { color: #fff; font-size: 1rem; margin-bottom: .5rem; }
.hours dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; font-size: .92rem; }
.hours dt { color: rgba(255, 255, 255, .72); }
.hours dd { margin: 0; text-align: right; font-weight: 500; }

/* Variante claire de l'accroche sur fond marine */
.eyebrow--light {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

/* Message d'erreur du formulaire */
.form-error {
  color: #b3312a;
  font-size: .92rem;
  font-weight: 500;
  margin-top: .3rem;
}

/* ---------- Appel final ---------- */
.cta-final {
  background: linear-gradient(150deg, var(--green-700) 0%, #235e1e 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255, 255, 255, .9); max-width: 44rem; margin-inline: auto; }
.cta-final .hero-actions { justify-content: center; }
.cta-final--spaced { margin-top: clamp(1.5rem, 2.6vw, 2rem); }

/* Le même appel, mais logé dans la colonne de droite du contact */
.cta-final--panneau {
  text-align: left;
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow);
}
.cta-final--panneau h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); margin-bottom: .3rem; }
.cta-final--panneau p { font-size: .93rem; margin-inline: 0; margin-bottom: 1rem; }
.cta-final--panneau .btn { width: 100%; }
.cta-note {
  margin-top: 1.4rem;
  font-size: .92rem;
  color: rgba(255, 255, 255, .82);
}

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .75);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  align-items: start;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.4rem; padding-bottom: 1.6rem; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand img { margin-inline: auto; }
  .footer-brand img { width: 168px; margin-bottom: 0; }
  .footer-brand p { display: none; }
  .site-footer { padding-block: 2.4rem 1.4rem; }
  .site-footer h3 { margin-bottom: .7rem; }
  .footer-links li, .footer-contact li { margin-bottom: .45rem; font-size: .89rem; }
  .footer-adresse { font-size: .89rem; margin-bottom: .7rem; }
  .footer-bottom { padding-top: 1.2rem; gap: .6rem; }
}

.site-footer h3 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand img { width: 210px; margin-bottom: 1.2rem; }
/* Adresse du siège : même police que le reste du pied de page, sans italique */
.footer-adresse {
  font-family: var(--font-body);
  font-style: normal;
  font-size: .96rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  margin-bottom: .9rem;
}
.footer-brand p { font-size: .95rem; max-width: 30rem; }
.footer-horaires {
  font-size: .94rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  margin-bottom: .9rem;
}
.footer-horaires strong {
  display: block;
  color: #fff;
  font-family: var(--font-title);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.footer-links li, .footer-contact li { margin-bottom: .6rem; font-size: .96rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  font-size: .88rem;
}
.footer-bottom p { color: rgba(255, 255, 255, .62); }
.footer-bottom--solo { border-top: 0; padding-top: 0; }
.footer-bottom nav { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-button:hover { color: #fff; }

/* ---------- Bouton flottant d'appel ----------
   Réservé aux petits écrans : sur un bureau, le numéro est déjà dans
   l'en-tête, et le bouton ne ferait que couvrir la page. */
.fab-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
@media (max-width: 940px) { .fab-wrap { display: flex; } }
.fab {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .96rem;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(1, 34, 99, .26);
}
.fab--call { background: var(--green-700); color: #fff; }
.fab--call:hover { background: var(--green-800); color: #fff; }
.fab--retour { background: var(--navy); color: #fff; }
.fab--retour:hover { background: var(--navy-700); color: #fff; }
.fab svg { width: 24px; height: 24px; flex: none; }
.fab-wrap.is-hidden .fab { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 700px) {
  .fab-wrap { right: 14px; bottom: 14px; gap: .5rem; }
  .fab { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .fab svg { width: 26px; height: 26px; }
  .fab-label { display: none; }
}

/* ---------- Bannière de consentement aux cookies ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 130;
  background: #fff;
  border-top: 3px solid var(--green);
  box-shadow: 0 -12px 34px rgba(1, 34, 99, .16);
  padding: 1.15rem 0 calc(1.15rem + env(safe-area-inset-bottom));
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cookie-banner h2 {
  font-size: 1.05rem;
  margin-bottom: .2rem;
}
.cookie-banner p { font-size: .94rem; color: var(--muted); max-width: 68ch; }
.cookie-banner__actions { display: flex; gap: .7rem; flex: none; }
.cookie-banner__actions .btn { padding: .75rem 1.5rem; font-size: .95rem; }

@media (max-width: 820px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .cookie-banner__actions .btn { flex: 1; }
}

/* Le bloc flottant se décale tant que la bannière est affichée */
body.has-cookie-banner .fab-wrap { bottom: 168px; }
@media (max-width: 820px) { body.has-cookie-banner .fab-wrap { bottom: 210px; } }

/* ---------- Page intérieure (mentions légales) ---------- */
.page-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p { color: rgba(255, 255, 255, .78); }

.legal { max-width: 48rem; }
.legal h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin-top: 2.6rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: #313c56; font-size: 1rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem; }
.legal li { margin-bottom: .4rem; }
.legal-back { margin-top: 2.5rem; }
.ressources-suite { margin-top: 2.5rem; text-align: center; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0 0 1.2rem; }
.legal dt { font-weight: 600; color: var(--navy); }
.legal dd { margin: 0; }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; gap: .1rem 0; } .legal dd { margin-bottom: .6rem; } }

/* ---------- Page 404 ---------- */
.error-page {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.error-page .container { max-width: 34rem; }
.error-page img { width: 210px; margin: 0 auto 2rem; }
.error-page p { color: var(--muted); }
.error-page .hero-actions { justify-content: center; }

/* ---------- États au survol et à l'ouverture ---------- */
.value-card:hover { box-shadow: var(--shadow); border-color: rgba(60, 159, 53, .35); }
.commitment:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .24); }
.faq details[open] summary { color: var(--green-700); }

.btn, .service-card, .value-card, .commitment, .contact-card, .faq details {
  transition: background-color .2s, border-color .2s, box-shadow .25s, color .2s, transform .25s var(--sortie);
}
.service-card:hover, .value-card:hover, a.contact-card:hover { transform: translateY(-3px); }
.btn--primary:hover, .btn--white:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .service-card:hover, .value-card:hover, a.contact-card:hover,
  .btn--primary:hover, .btn--white:hover { transform: none; }
}

@media print {
  .site-header, .fab, .hero-visual, .form-actions { display: none !important; }
  body { color: #000; }
}

/* ---------- Fil d'Ariane des pages intérieures ---------- */
/* Discret par nature : il sert à se situer et à remonter d'un cran, pas à
   attirer l'œil. Il reprend le chemin déclaré aux moteurs de recherche, pour
   que ce qui est affiché et ce qui est balisé disent la même chose. */
/* Le bandeau de titre est sur fond marine : le fil doit donc s'écrire en clair.
   Sur fond sombre, la couleur de texte discret prévue pour le fond blanc rend
   le nom de la page courante illisible — invisible, même, puisqu'elle est
   elle-même marine. */
.fil-ariane { margin: 0 0 .9rem; font-size: .9rem; }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.fil-ariane li + li::before { content: "›"; margin-right: .45rem; }
.fil-ariane a { text-decoration: none; border-bottom: 1px solid transparent; }
.page-hero .fil-ariane, .page-hero .fil-ariane li + li::before { color: rgba(255, 255, 255, .72); }
.page-hero .fil-ariane a { color: rgba(255, 255, 255, .86); }
.page-hero .fil-ariane a:hover { color: #fff; border-bottom-color: var(--green); }
.page-hero .fil-ariane [aria-current="page"] { color: #fff; font-weight: 600; }

/* =========================================================
   MENU PRINCIPAL REGROUPÉ
   Sept destinations tenaient sur une seule ligne : elles ne
   tiennent plus à douze. Les rubriques sont donc regroupées
   sous deux entrées dépliantes, construites avec <details> :
   le navigateur gère seul l'ouverture, le clavier et l'état
   annoncé aux lecteurs d'écran. Sans JavaScript, le menu
   fonctionne encore — c'est la raison de ce choix.
   ========================================================= */
.nav-groupe { position: relative; }
.nav-groupe > summary {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .97rem;
  font-weight: 500;
  color: var(--text);
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.nav-groupe > summary::-webkit-details-marker { display: none; }
.nav-groupe > summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--sortie);
}
.nav-groupe[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-groupe > summary:hover,
.nav-groupe[open] > summary { color: var(--navy); border-bottom-color: var(--green); }

.nav-panneau {
  position: absolute;
  top: calc(100% + .85rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  width: max-content;
  max-width: min(92vw, 640px);
}
.nav-panneau::before {
  content: '';
  position: absolute;
  top: -1.05rem; left: 0; right: 0;
  height: 1.05rem;
}
.nav-panneau ul { display: grid; gap: .1rem; }
.nav-panneau--large ul { grid-template-columns: repeat(2, minmax(13.5rem, 1fr)); gap: .1rem .6rem; }
.nav-panneau a {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: .94rem;
  line-height: 1.35;
}
.nav-panneau a strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--navy);
  font-size: .96rem;
}
.nav-panneau a span { color: var(--muted); font-size: .84rem; }
.nav-panneau a:hover { background: var(--surface-alt); color: var(--navy); }
.nav-panneau .nav-panneau-tout {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
  padding: .5rem .7rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .9rem;
  color: var(--green-700);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav-panneau .nav-panneau-tout:hover { background: var(--green-50); }
.nav-panneau .nav-panneau-tout svg { width: 16px; height: 16px; }

.nav-actions { display: flex; align-items: center; gap: .6rem; }
.btn--connexion { padding-inline: 1rem; }

@media (max-width: 1080px) {
  .nav { gap: 1.1rem; }
  .nav-list { gap: 1.05rem; }
  .nav-list a, .nav-groupe > summary { font-size: .92rem; }
  .nav .btn { padding: .62rem .9rem; font-size: .88rem; }
}

@media (max-width: 940px) {
  /* Au téléphone, le panneau ne flotte plus : il pousse le contenu,
     comme un accordéon. Une superposition serait ingérable au pouce. */
  .nav { max-height: calc(100dvh - 76px); overflow-y: auto; }
  .nav-groupe > summary {
    display: flex;
    justify-content: space-between;
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-groupe[open] > summary { border-bottom-color: var(--line); }
  .nav-panneau {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    border: 0;
    box-shadow: none;
    padding: .35rem 0 .5rem .6rem;
    background: transparent;
  }
  .nav-panneau--large ul { grid-template-columns: 1fr; }
  .nav-panneau a { padding: .6rem .5rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-panneau a span { display: none; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: .5rem; margin-top: .9rem; }
  .nav .btn { margin-top: 0; }
}

/* =========================================================
   PIED DE PAGE EN QUATRE PANNEAUX
   Quatre colonnes de hauteur égale : la grille les étire
   (align-items par défaut), chaque panneau occupe toute la
   hauteur de sa ligne, et la liste de liens pousse le bas
   du panneau vers le bas plutôt que de laisser un vide.
   ========================================================= */
.footer-grid--quatre {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
.footer-col > :last-child { margin-bottom: 0; }
.footer-col--marque img { width: 172px; margin-bottom: .95rem; }
.footer-col--marque p { font-size: .93rem; line-height: 1.6; }
/* Même taille et même pas que les listes de liens : les quatre colonnes
   avancent au même rythme et finissent à la même hauteur. */
.footer-col .footer-links li,
.footer-infos li { margin-bottom: .48rem; font-size: .93rem; line-height: 1.5; }
.footer-col .footer-links li:last-child, .footer-infos li:last-child { margin-bottom: 0; }
.footer-infos { list-style: none; padding: 0; margin: 0; }
.footer-infos li { display: flex; align-items: flex-start; gap: .55rem; color: rgba(255, 255, 255, .82); }
.footer-infos address { font-style: normal; }
.footer-infos svg { width: 17px; height: 17px; color: #8fd98a; flex: none; margin-top: .15em; }

/* Le plan occupe ce qui reste de la colonne : la colonne s'étire à la hauteur
   de la rangée, et l'image, sortie du flux, ne peut pas la rallonger. Elle se
   recadre autour du repère, placé au centre du dessin. */
.footer-col--trouver { align-self: stretch; display: flex; flex-direction: column; }
.footer-plan {
  position: relative; flex: 1 1 auto; min-height: 4.75rem; margin-top: 1rem;
  border-radius: 12px; overflow: hidden; background: #0a2a5e;
  border: 1px solid rgba(255, 255, 255, .12);
}
.footer-plan a { position: absolute; inset: 0; display: block; }
.footer-plan img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.footer-plan a:hover img { transform: scale(1.05); }
.footer-plan a:focus-visible { outline: 2px solid #8fd98a; outline-offset: -2px; border-radius: 12px; }
.footer-plan-lien {
  position: absolute; left: .45rem; bottom: .4rem; padding: .16rem .6rem;
  border-radius: 999px; background: rgba(1, 26, 77, .88); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 1.4;
}
.footer-plan a:hover .footer-plan-lien { background: var(--green-700); }
.footer-plan small {
  position: absolute; right: .4rem; bottom: .4rem; pointer-events: none;
  padding: .05rem .4rem; border-radius: 999px; background: rgba(1, 26, 77, .82);
  font-size: .6rem; line-height: 1.5; color: rgba(255, 255, 255, .78);
}

@media (max-width: 1000px) {
  .footer-grid--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .footer-grid--quatre { gap: .9rem; padding-bottom: 1.4rem; }
  .footer-plan { min-height: 8.5rem; }
  .footer-grid--quatre .footer-col--marque { grid-column: 1 / -1; text-align: left; }
  .footer-grid--quatre .footer-col--marque img { margin-inline: 0; width: 152px; margin-bottom: .7rem; }
  .footer-grid--quatre .footer-col--marque p { display: block; font-size: .88rem; }
}
@media (max-width: 560px) {
  .footer-grid--quatre { grid-template-columns: 1fr; row-gap: 1.8rem; }
  .footer-plan { min-height: 10rem; }
}

/* =========================================================
   PAGES « EN SAVOIR PLUS »
   Un seul gabarit pour toutes : bandeau de titre avec
   illustration, sommaire, corps d'article, encadrés, fiches.
   Ce que l'on gagne à n'avoir qu'un gabarit : une correction
   faite une fois vaut pour les huit pages.
   ========================================================= */
.page-hero--guide { padding-block: clamp(2.4rem, 4.4vw, 3.4rem); }
.guide-entete {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}
.guide-entete-texte h1 { margin-bottom: .6rem; }
.guide-entete-texte > p { color: rgba(255, 255, 255, .82); font-size: 1.04rem; line-height: 1.6; }
.guide-couverture img,
.guide-couverture svg {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .6);
}
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  margin-top: 1.1rem;
  font-size: .86rem;
  color: rgba(255, 255, 255, .7);
}
.guide-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.guide-meta svg { width: 16px; height: 16px; color: #8fd98a; }
@media (max-width: 860px) {
  .guide-entete { grid-template-columns: 1fr; }
  .guide-couverture { order: -1; }
}

/* Corps d'article : même largeur de lecture que les pages légales,
   mais avec de quoi respirer — encadrés, fiches, tableaux. */
.article { max-width: 50rem; }
.article > h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.72rem); margin-top: 2.8rem; }
.article > h2:first-of-type { margin-top: 0; }
.article > h3 { margin-top: 1.9rem; font-size: 1.1rem; }
.article p, .article li { color: #313c56; font-size: 1.02rem; line-height: 1.68; }
.article ul, .article ol { list-style: disc; padding-left: 1.35rem; margin-bottom: 1.15rem; }
.article ol { list-style: decimal; }
.article li { margin-bottom: .5rem; }
.article a { color: var(--green-800); text-decoration-color: rgba(47, 127, 42, .4); }
.article a:hover { color: var(--green-700); }
.article figure { margin: 1.8rem 0; }
.article figure img, .article figure svg { width: 100%; border-radius: var(--radius); }
.article figcaption { margin-top: .6rem; font-size: .88rem; color: var(--muted); }

/* Sommaire : sur une page longue, il évite de faire défiler à l'aveugle
   et donne aux moteurs de recherche la carte de la page. */
.sommaire {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem;
  margin-bottom: 2.4rem;
}
.sommaire h2 {
  font-size: .78rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem !important;
}
.sommaire ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .38rem; }
.sommaire li { margin: 0; counter-increment: som; }
.sommaire a {
  display: flex;
  gap: .6rem;
  font-size: .95rem;
  text-decoration: none;
  color: var(--navy);
  font-weight: 500;
}
.sommaire a::before {
  content: counter(som, decimal-leading-zero);
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .82rem;
  padding-top: .12rem;
}
.sommaire ol { counter-reset: som; }
.sommaire a:hover { color: var(--green-800); text-decoration: underline; }

/* Encadré : un titre court, deux phrases au plus. Trois sortes seulement,
   que la pastille distingue d'un coup d'œil : ce qu'il faut retenir (✓),
   ce qui coûte cher si on l'ignore (!), le conseil pratique (i). */
.encadre {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  column-gap: .95rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
  box-shadow: var(--shadow-sm);
}
.encadre::before {
  content: '✓';
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-800);
  font: 800 1rem/1 var(--font-title);
}
.encadre > * { grid-column: 2; }
.article .encadre > p { margin: 0; font-size: .97rem; line-height: 1.6; }
.article .encadre > .encadre-titre {
  margin: .2rem 0 .2rem;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
}
.encadre--attention { border-left-color: #d79a2b; }
.encadre--attention::before { content: '!'; background: #fdf1dc; color: #94600e; }
.encadre--conseil { border-left-color: var(--navy); }
.encadre--conseil::before { content: 'i'; background: var(--surface-alt); color: var(--navy); font-family: Georgia, serif; font-style: italic; }

/* Cartes : une étiquette, un titre, une phrase — le même patron partout,
   qu'il s'agisse d'une formule, d'un équipement ou d'un document. */
.fiches {
  display: grid;
  gap: .8rem;
  margin: 1.6rem 0 2rem;
  list-style: none;
  padding: 0;
}
.fiche {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 1rem 1rem 1.1rem;
  margin: 0;
  box-shadow: var(--shadow-sm);
}
.fiche h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.fiche p { margin: 0; font-size: .9rem !important; color: var(--muted) !important; line-height: 1.5; }
.fiche-lien {
  margin-top: auto !important;
  padding-top: .35rem;
  font-size: .87rem !important;
  font-weight: 600;
  font-family: var(--font-title);
}
.fiche-etiquette {
  align-self: flex-start;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-800);
  background: var(--green-50);
  border-radius: 999px;
  padding: .2rem .6rem;
  white-space: nowrap;
  max-width: 100%;
}
.article .fiche-note { font-size: .88rem; color: var(--muted); margin-top: -.8rem; }

/* Tableau : matière / destination / ce qui la disqualifie.
   Le tableau est plus large que l'écran d'un téléphone : l'enveloppe défile
   horizontalement. Les deux dégradés ci-dessous signalent qu'il reste du
   contenu à droite (ou à gauche) ; posés en « local », ils disparaissent
   d'eux-mêmes en bout de course et ne s'affichent pas si tout tient à
   l'écran, sans une ligne de JavaScript. */
.tableau-enveloppe {
  overflow-x: auto;
  margin: 1.5rem 0 2rem;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(1, 26, 77, .16), rgba(1, 26, 77, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(1, 26, 77, .16), rgba(1, 26, 77, 0)) right center;
  background-repeat: no-repeat;
  background-size: 3rem 100%, 3rem 100%, .85rem 100%, .85rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 34rem;
}
.tableau th, .tableau td {
  text-align: left;
  padding: .72rem .85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tableau thead th {
  font-family: var(--font-title);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border-bottom: 0;
}
.tableau thead th:first-child { border-top-left-radius: var(--radius-sm); }
.tableau thead th:last-child { border-top-right-radius: var(--radius-sm); }
.tableau tbody tr:nth-child(even) { background: var(--surface-alt); }
.tableau td strong { color: var(--navy); }

/* Bande de rappel en fin d'article */
.article .cta-final { margin: 2.6rem 0 0; text-align: center; padding: clamp(1.6rem, 3vw, 2.4rem); }
.article .cta-final h2 { margin-top: 0; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
.article .cta-final p { color: rgba(255, 255, 255, .9); }

/* Renvois de fin d'article */
.renvois { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.renvois li { margin: 0; }
.renvois a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-decoration: none;
  font-weight: 500;
  color: var(--navy);
}
.renvois a:hover { border-color: rgba(60, 159, 53, .45); background: var(--green-50); color: var(--green-800); }
.renvois svg { width: 18px; height: 18px; color: var(--green-700); flex: none; }

/* =========================================================
   SOMMAIRE DES GUIDES (page « En savoir plus » et accueil)
   ========================================================= */
.ressources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ressource {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--sortie), box-shadow .28s var(--sortie), border-color .2s;
  margin: 0;
}
.ressource:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(60, 159, 53, .4); }
.ressource-visuel { display: block; aspect-ratio: 16 / 9; background: var(--surface-alt); }
.ressource-visuel img, .ressource-visuel svg { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ressource-corps { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.15rem 1.25rem; flex: 1; }
.ressource-etiquette {
  align-self: flex-start;
  font-size: .71rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-800);
  background: var(--green-50);
  border-radius: 999px;
  padding: .22rem .62rem;
}
.ressource h3 { margin: 0; font-size: 1.06rem; line-height: 1.25; }
.ressource h3 a { text-decoration: none; }
.ressource h3 a::after { content: ''; position: absolute; inset: 0; }
.ressource { position: relative; }
.ressource p { margin: 0; font-size: .93rem; color: var(--muted); line-height: 1.55; }
.ressource-lire {
  margin-top: auto;
  padding-top: .75rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .89rem;
  color: var(--green-800);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.ressource-lire svg { width: 16px; height: 16px; transition: transform .25s var(--sortie); }
.ressource:hover .ressource-lire svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .ressource:hover { transform: none; }
  .ressource:hover .ressource-lire svg { transform: none; }
  .footer-plan img { transition: none; }
  .footer-plan a:hover img { transform: none; }
}

/* Listes de composants à l'intérieur d'un article : le corps de texte impose
   des puces et un retrait à toutes ses listes, ce qui n'a pas de sens pour
   des cartes ou un sommaire. On rétablit explicitement, avec la spécificité
   qu'il faut pour passer devant « .article ul ». */
.article .fiches,
.article .renvois,
.article .sommaire ol,
.article .encadre ul.fiches { list-style: none; padding-left: 0; }
.article .fiches > li,
.article .renvois > li,
.article .sommaire li { margin-bottom: 0; }
.article .fiche p { margin: 0; }
.article .fiche-note { font-size: .9rem; color: var(--muted); }
.article .tableau td, .article .tableau th { font-size: .95rem; }
.article .sommaire a { font-size: .95rem; }

/* Les boutons gardent leur couleur propre à l'intérieur d'un article.
   « .article a » colore les liens de texte en vert et l'emportait sur
   « .btn--ghost-light » : sur l'aplat vert du rappel de fin de page, le
   bouton d'appel devenait vert sur vert, donc illisible. */
.article a.btn--white { color: #24571e; }
.article a.btn--ghost-light { color: #fff; }
.article a.btn--primary { color: #fff; }
.article a.btn--outline { color: var(--navy); }

/* La pastille de rubrique se détache du bandeau de titre : sur fond marine,
   un fond marine ne dessine rien. */
.page-hero .eyebrow { background: rgba(255, 255, 255, .16); color: #fff; }
.page-hero .eyebrow::before { background: #8fd98a; }

/* =========================================================
   Quatre blocs sur une ligne, schéma de circuit, pied sans cadres
   ========================================================= */

/* Quatre familles, quatre formules, quatre pièces : ces sections se lisent
   comme un ensemble de quatre, pas comme « trois puis un ». La grille
   automatique n'en plaçait que trois dans la largeur de lecture, laissant le
   quatrième seul sur une ligne. On force donc quatre colonnes et on élargit
   le bloc au-delà de la colonne de texte, le temps de cette liste. */
.fiches--quatre, .fiches--trois {
  width: min(62rem, 100%);
  margin-inline: calc((50rem - min(62rem, 100%)) / 2);
}
.fiches--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fiches--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .fiches--quatre, .fiches--trois { width: 100%; margin-inline: 0; }
}
@media (max-width: 780px) {
  .fiches--quatre, .fiches--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .fiches--quatre, .fiches--trois { grid-template-columns: 1fr; }
}

/* Le circuit de la matière. Cinq étapes alignées sur un rail, plutôt que cinq
   cartes empilées : on voit d'un coup d'œil que le parcours est une chaîne, et
   où il quitte l'île. Le texte reste du texte — sélectionnable, traduisible,
   lisible au lecteur d'écran — plutôt qu'une image. */
.circuit {
  margin: 1.8rem 0 1.4rem;
  width: min(62rem, 100%);
  margin-inline: calc((50rem - min(62rem, 100%)) / 2);
}
.circuit-zones {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: .4rem;
  margin-bottom: .55rem;
}
.circuit-zone {
  font-family: var(--font-title);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: .3rem .5rem;
  border-radius: 999px;
}
.circuit-zone--ici { background: var(--green-50); color: var(--green-800); }
.circuit-zone--ailleurs { background: var(--surface-alt); color: var(--navy); }

.circuit-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.circuit-etape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 .3rem;
  margin: 0;
}
/* Le trait qui relie deux étapes, et la pointe qui donne le sens. */
.circuit-etape + .circuit-etape::before {
  content: '';
  position: absolute;
  top: 27px;
  right: calc(50% + 30px);
  left: calc(-50% + 30px);
  height: 2px;
  background: linear-gradient(to right, var(--line), var(--green));
}
.circuit-etape + .circuit-etape::after {
  content: '';
  position: absolute;
  top: 22px;
  right: calc(50% + 26px);
  width: 8px; height: 8px;
  border-top: 2px solid var(--green);
  border-right: 2px solid var(--green);
  transform: rotate(45deg);
}
.circuit-pastille {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--green);
  color: var(--navy);
  margin-bottom: .55rem;
}
.circuit-pastille svg { width: 26px; height: 26px; }
.circuit-rang {
  position: absolute;
  right: -5px; bottom: -5px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  font-family: var(--font-title);
  font-size: .76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Les deux dernières étapes se passent ailleurs : la pastille change de ton. */
.circuit-etape:nth-child(n+4) .circuit-pastille { border-color: var(--navy); border-style: dashed; }
.circuit-etape:nth-child(n+4) .circuit-rang { background: var(--navy); }
.circuit-titre {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
  line-height: 1.25;
}
.circuit-lieu {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .12rem;
}
.circuit figcaption {
  margin-top: .9rem;
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
}
.circuit-detail { list-style: decimal; padding-left: 1.35rem; }
.circuit-detail strong { color: var(--navy); }

@media (max-width: 1100px) {
  .circuit { width: 100%; margin-inline: 0; }
}
/* Au téléphone, le rail se redresse : les étapes descendent le long d'un fil.
   Le lieu passe sous le titre plutôt qu'à sa droite, où il se faisait couper
   par le bord de l'écran. */
@media (max-width: 720px) {
  .circuit-zones { display: none; }
  .circuit-rail { grid-template-columns: 1fr; }
  .circuit-etape {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .85rem;
    text-align: left;
    padding: .5rem 0;
  }
  .circuit-etape + .circuit-etape::before {
    top: -8px; bottom: auto;
    left: 26px; right: auto;
    width: 2px; height: 20px;
    background: var(--green);
  }
  .circuit-etape + .circuit-etape::after { display: none; }
  .circuit-pastille { margin-bottom: 0; flex: none; }
  .circuit-titre { flex: 1 1 auto; font-size: 1rem; }
  .circuit-lieu { flex: 1 0 100%; padding-left: calc(54px + .85rem); margin-top: 0; }

  /* Le rail vertical perd les deux bandeaux : on garde le seul repère qui
     compte, l'endroit où la matière quitte l'île. */
  .circuit-etape:nth-child(4) { margin-top: 1.9rem; }
  .circuit-etape:nth-child(4)::after {
    content: 'Hors du territoire';
    display: block;
    position: absolute;
    /* Le même pseudo-élément sert de pointe de flèche sur grand écran :
       on annule sa rotation et ses bordures avant de le réutiliser. */
    transform: none;
    border: 0;
    width: auto; height: auto;
    white-space: nowrap;
    top: -1.5rem; left: 0; right: auto;
    font-family: var(--font-title);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--surface-alt);
    padding: .25rem .65rem;
    border-radius: 999px;
  }
}

/* Les questions d'une fiche se lisent dans la colonne de texte : une seule
   colonne, là où l'accueil en présente deux. */
.faq--article { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; max-width: 100%; }
.article .faq--article { margin: 1.4rem 0 0; }
.article .faq--article summary { font-size: 1rem; }
.article .faq--article p { font-size: .98rem; }