@charset "utf-8";
/* ==========================================================================
   Activa Conseils — feuille de style principale
   Charte : Pruine #6260a8 · Rouge électrique #e30f01 · Parchemin #eee7e1
            Orange doré #ec9e1d · Indigo nuit #221d44
   Typo   : Cormorant Garamond (titres) · Sora (textes)
   ========================================================================== */

@import url("/assets/fonts/fonts.css");

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Couleurs de la charte */
  --rouge:      #e30f01;
  --pruine:     #6260a8;
  --parchemin:  #eee7e1;
  --orange:     #ec9e1d;
  --indigo:     #221d44;
  --blanc:      #fff;

  /* Variantes de service (dérivées, pour survols et filets) */
  --rouge-fonce:    #b60c01;
  --pruine-fonce:   #4f4d90;
  --indigo-clair:   #3a3468;
  --parchemin-ombre:#e2d8cf;

  /* Typographie */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Sora", "Helvetica Neue", Arial, sans-serif;

  --fs-h1:      clamp(2.375rem, 3.65vw, 4.375rem);  /*  38 →  70 px */
  --fs-h2:      clamp(1.75rem,  2.19vw, 2.625rem);  /*  28 →  42 px */
  --fs-h3:      clamp(1.375rem, 1.82vw, 2.1875rem); /*  22 →  35 px */
  --fs-eyebrow: clamp(1.125rem, 1.46vw, 1.75rem);   /*  18 →  28 px */
  --fs-nav:     1.375rem;                           /*  22 px */
  --fs-lead:    clamp(1.0625rem, 1.46vw, 1.75rem);  /*  17 →  28 px */
  --fs-body:    1rem;                               /*  16 px */
  --fs-small:   0.875rem;                           /*  14 px */

  /* Rythme */
  /* 1770 + gouttière de 75 = contenu utile de 1620 px, aligné sur la maquette 1920 */
  --container: 1770px;
  --gutter:    clamp(1.25rem, 4vw, 4.6875rem);
  --section-y: clamp(3.5rem, 6vw, 6.875rem);
  --radius:    18px;
  --radius-sm: 10px;
  --pill:      999px;

  --header-h: 154px;
}

/* ----------------------------------------------------------- 2. Reset base */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--parchemin);
  color: var(--indigo);
  font: 400 var(--fs-body)/1.62 var(--sans);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: .002em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

ul { margin: 0; padding: 0; list-style: none; }

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

/* -------------------------------------------------------------- 3. Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 1160px; }
.container--text   { max-width: 900px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 3.5vw, 3.75rem); }

.section--parchemin { background: var(--parchemin); }
.section--pruine    { background: var(--pruine);    color: var(--parchemin); }
.section--indigo    { background: var(--indigo);    color: var(--parchemin); }
.section--blanc     { background: var(--blanc); }

.section--pruine h1, .section--pruine h2, .section--pruine h3,
.section--indigo h1, .section--indigo h2, .section--indigo h3 { color: var(--parchemin); }

/* Liens au fil du texte : sans classe, ils héritaient de « a { color: inherit } » et se
   confondaient avec le paragraphe. Rouge souligné sur fond clair, parchemin souligné sur
   pruine et indigo ; les cartes .perk gardent leur fond parchemin, donc le rouge. */
main p:not(.member__contact) a:not([class]),
main .prose li a:not([class]) {
  color: var(--rouge);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
main p:not(.member__contact) a:not([class]):hover,
main .prose li a:not([class]):hover { color: var(--rouge-fonce); }
main :is(.section--pruine, .section--indigo) p a:not([class]) { color: inherit; }
main :is(.section--pruine, .section--indigo) p a:not([class]):hover { color: var(--orange); }
main :is(.section--pruine, .section--indigo) .perk p a:not([class]) { color: var(--rouge); }
main :is(.section--pruine, .section--indigo) .perk p a:not([class]):hover { color: var(--rouge-fonce); }

/* En-tête de section (eyebrow + titre + chapô) */
.section-head { text-align: center; margin-bottom: clamp(2rem, 3.5vw, 3.75rem); }
.section-head > * + * { margin-top: .9rem; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rouge);
  margin: 0;
}
.section--pruine .eyebrow,
.section--indigo .eyebrow { color: var(--orange); }

.title-h1 { font-size: var(--fs-h1); }
.title-h2 { font-size: var(--fs-h2); color: var(--pruine); }
.title-h3 { font-size: var(--fs-h3); }

.section--parchemin .title-h2.is-rouge { color: var(--rouge); }
.title-h2.is-indigo { color: var(--indigo); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.42;
  max-width: 62ch;
  margin-inline: auto;
}
.lead--body { font-size: 1rem; line-height: 1.62; max-width: 76ch; }
/* Mot composé à ne pas couper au trait d'union (« expert-/comptable » en mobile). */
.nobr { white-space: nowrap; }

.text-center { text-align: center; }
.mt-l { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* ---------------------------------------------------------- 4. En-tête     */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--rouge);
  color: var(--parchemin);
}

.site-header__inner {
  position: relative;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
  padding-block: 1.05rem 1.1rem;
}

/* Logo typographique */
.brand {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
  align-self: start;
  padding-top: .15rem;
}
.brand__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.9vw, 3.375rem);
  line-height: 1;
  letter-spacing: .035em;
  color: var(--parchemin);
  white-space: nowrap;
}
.brand__baseline {
  display: block;
  margin-top: .5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .16em;
  color: var(--parchemin);
}

/* Navigation */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.7rem); }
.nav--left  { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.nav--right { grid-column: 3; grid-row: 1; justify-content: flex-end; }

.nav a {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: var(--fs-nav);
  line-height: 1.1;
  color: var(--parchemin);
  padding-bottom: .35rem;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.nav a:hover { border-bottom-color: rgba(238,231,225,.6); }
.nav a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--parchemin); }

/* Burger (mobile) */
.burger {
  display: none;
  grid-column: 1; grid-row: 1;
  align-self: center;
  background: none; border: 0; padding: .25rem;
  color: var(--parchemin); cursor: pointer;
}
.burger svg { width: 30px; height: 30px; }

/* --------------------------------------------------- 5. Menu mobile plein  */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--rouge);
  color: var(--parchemin);
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .32s ease, visibility .32s;
}
.mobile-menu[data-open="true"] { transform: translateY(0); visibility: visible; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__close {
  background: none; border: 0; color: var(--parchemin); cursor: pointer; padding: .25rem;
}
.mobile-menu__close svg { width: 30px; height: 30px; }
.mobile-menu nav { margin-top: 2.5rem; display: grid; gap: 1.35rem; }
.mobile-menu nav a {
  font-family: var(--serif);
  font-size: 1.75rem;
  border-bottom: 1px solid rgba(238,231,225,.28);
  padding-bottom: .7rem;
}

/* ------------------------------------------------------------ 6. Boutons   */
.btn {
  --btn-c: var(--rouge);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 2.15rem;
  border: 1.6px solid var(--btn-c);
  border-radius: var(--pill);
  background: transparent;
  color: var(--btn-c);
  font: 700 var(--fs-body)/1.15 var(--sans);
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--btn-c); color: var(--parchemin); }
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--btn-c); color: var(--parchemin); }
.btn--solid:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }

.btn--light { --btn-c: var(--parchemin); }
.btn--light:hover { color: var(--pruine); }

.btn--indigo { --btn-c: var(--indigo); }

/* Étincelles décoratives (« sparkles ») en haut à droite du bouton */
.btn--spark::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -30px;
  width: 32px;
  height: 32px;
  background-color: var(--btn-c);
  -webkit-mask: var(--spark) center/contain no-repeat;
          mask: var(--spark) center/contain no-repeat;
  pointer-events: none;
}
:root {
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 18 L9 7'/%3E%3Cpath d='M13 22 L21 14'/%3E%3Cpath d='M15 28 L26 25'/%3E%3C/g%3E%3C/svg%3E");
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* Lien fléché */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--rouge);
}
.link-arrow::after { content: "→"; transition: transform .2s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--back::after { content: none; }
.link-arrow--back::before { content: "←"; }

/* ------------------------------------------------- 7. Icônes monochromes   */
/* Les PNG servent de masque : la couleur vient de CSS (charte respectée). */
.icon-hand {
  display: block;
  flex: none;
  width: var(--icon-size, 120px);
  height: var(--icon-size, 120px);
  background-color: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
          mask: var(--icon) center/contain no-repeat;
}
.icon-hand--poignee   { --icon: url("/assets/img/icon-poignee-main.png"); }
.icon-hand--tenue     { --icon: url("/assets/img/icon-main-tenue.png"); }
.icon-hand--index     { --icon: url("/assets/img/icon-index.png"); }
.icon-hand--victoire  { --icon: url("/assets/img/icon-victoire.png"); }
.icon-hand--etoile    { --icon: url("/assets/img/icon-etoile.png"); }
.icon-hand--ecrit     { --icon: url("/assets/img/icon-ecrit.png"); }

/* Illustrations au trait fin (les 4 offres) */
.illu-line {
  display: block;
  width: 100%;
  max-width: var(--illu-w, 240px);
  height: var(--illu-h, 200px);
  margin-inline: auto;
  background-color: var(--rouge);
  -webkit-mask: var(--illu) center/contain no-repeat;
          mask: var(--illu) center/contain no-repeat;
}
.illu-line--poignee { --illu: url("/assets/img/illu-poignee-main.png"); --illu-w: 260px; }
.illu-line--tenues  { --illu: url("/assets/img/illu-mains-tenues.png"); --illu-w: 175px; }
.illu-line--tendue  { --illu: url("/assets/img/illu-main-tendue.png");  --illu-w: 240px; }
.illu-line--ecrit   { --illu: url("/assets/img/illu-main-ecrit.png");   --illu-w: 135px; }

/* ------------------------------------------------------------- 8. Héros    */
.hero {
  position: relative;
  isolation: isolate;
  text-align: center;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(238,231,225,.12) 0%,
              rgba(238,231,225,.45) 38%,
              rgba(238,231,225,.86) 68%,
              var(--parchemin) 96%);
}

/* Accueil : bandeau de 4 photos métiers */
.hero--home .hero__media { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero--home .hero__media img { grid-row: 1; }
.hero--home .hero__media::after { grid-column: 1 / -1; grid-row: 1; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding-top: clamp(13rem, 26vw, 24.5rem);
  padding-bottom: clamp(3rem, 5vw, 5.5rem);
}
.hero__overline {
  font-size: var(--fs-lead);
  letter-spacing: .01em;
  margin: 0;
}
.hero__title { font-size: var(--fs-h1); }
.hero__subtitle { font-size: var(--fs-lead); margin: 0; max-width: 46ch; }
.hero__inner .btn { margin-top: 1.1rem; }

/* Héros de page intérieure : une photo panoramique, titre en surimpression */
.hero--page .hero__media { height: clamp(260px, 32vw, 610px); bottom: auto; }
.hero--page .hero__inner {
  padding-top: clamp(9rem, 22vw, 24rem);
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
  gap: 1.4rem;
}

/* Héros sans photo (pages de contenu) */
.hero--plain { padding-top: clamp(2.5rem, 4vw, 4.5rem); }
.hero--plain .hero__inner { padding-top: 0; padding-bottom: clamp(2rem, 3vw, 3rem); }

/* --------------------------------------------- 9. Grille « je suis… »      */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--parchemin);
  box-shadow: 0 1px 0 rgba(34,29,68,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.sector-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(34,29,68,.18); }
.sector-card__media { aspect-ratio: 533 / 173; overflow: hidden; }
.sector-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sector-card__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.3rem;
  padding: 1rem 1.4rem;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.14;
  text-align: center;
  color: var(--indigo);
}
/* Encoche décorative reprise de la maquette */
.sector-card__media::after {
  content: "";
  position: absolute;
  right: 0;
  width: 74px;
  height: 26px;
  background: var(--parchemin);
  border-top-left-radius: var(--radius-sm);
  margin-top: -26px;
}

/* --------------------------------------------------------- 10. Les 4 offres */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2.25rem);
  align-items: end;
}
.offer { text-align: center; }
.offer__illu { margin-bottom: 1.6rem; }
.offer__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: .03em;
  color: var(--indigo);
}

/* Cartes des offres (page solutions comptables) */
.offer-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2.25rem);
  align-items: end;
}
.offer-cards .offer__name {
  display: block;
  background: var(--blanc);
  padding: 1.15rem 1rem .9rem;
  margin-top: 1.4rem;
}
.offer-cards .offer__arrow { display: block; color: var(--rouge); font-size: 1.4rem; line-height: 1; }

/* --------------------------------------------------- 11. Blocs 2 colonnes  */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: center;
}
.split--text-right > :first-child { order: 0; }
.split__media img { border-radius: var(--radius); }
.split__media--plain img { border-radius: 0; }
/* Photo portrait recadrée en paysage pour ne pas dépasser le texte voisin. Le point de
   cadrage descend vers le sujet (mains, plan de travail) : les visages de ces photos sont
   déjà coupés à la source. */
.split__media--portrait img { width: 100%; aspect-ratio: 1100 / 760; object-fit: cover; object-position: 50% 65%; }

/* Petit dessin « main » posé en décoration */
.deco-hand {
  --icon-size: clamp(64px, 7vw, 108px);
  color: var(--indigo);
  position: absolute;
}

/* ------------------------------------------------- 12. Bloc « juste info » */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5.5rem);
  margin-bottom: 2.5rem;
}
.badges img { max-height: 122px; width: auto; }
.badges__ordre { background: var(--parchemin); padding: .6rem .8rem; }

/* ------------------------------------------------- 13. Trois arguments     */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
}
.feature { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.feature .icon-hand { --icon-size: clamp(80px, 8vw, 128px); }
.feature__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: .035em;
}
.feature p { margin: 0; }
.feature .btn { margin-top: .6rem; }

/* Variante « carte » (page recrutement) */
.perk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2.1rem);
}
/* Variante à 3 colonnes. À déclarer ici et non en style inline : les media queries
   de fin de fichier repassent la grille à 2 puis 1 colonne, et un style inline
   les écraserait — la grille resterait à 3 colonnes sur mobile et déborderait. */
.perk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.perk-grid--left .perk { text-align: left; align-items: stretch; }
.perk {
  background: var(--parchemin);
  color: var(--indigo);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.2vw, 2.4rem) clamp(1rem, 1.6vw, 1.8rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.perk .icon-hand { --icon-size: clamp(74px, 7vw, 104px); color: var(--indigo); }
.perk__name { font-family: var(--serif); font-size: var(--fs-h3); }
/* La carte garde son fond parchemin même posée sur une section colorée : son titre
   doit donc rester indigo, sinon la règle « .section--pruine h3 » le rend invisible. */
.perk .perk__name { color: var(--indigo); }
.perk p { margin: 0; font-size: .9375rem; }

/* ------------------------------------------------------- 14. Cartes outils */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.25rem) clamp(1rem, 2vw, 2rem);
  max-width: 1120px;
  margin-inline: auto;
}
.tool { text-align: center; }
.tool__card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo);
  transition: transform .22s ease, box-shadow .22s ease;
}
.tool__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(34,29,68,.2); }
.tool__media { aspect-ratio: 16 / 7; overflow: hidden; }
.tool__media img { width: 100%; height: 100%; object-fit: cover; }
.tool__name {
  display: block;
  padding: 1.05rem 1rem 1.15rem;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  color: var(--parchemin);
  text-align: center;
}
.tool__desc { margin-top: 1.15rem; font-size: .9375rem; }

/* ------------------------------------------------------ 15. Guide (bento)  */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.chip {
  padding: .62rem 1.35rem;
  border: 1px solid rgba(34,29,68,.28);
  border-radius: var(--pill);
  background: transparent;
  color: var(--indigo);
  font: 400 .9375rem/1.2 var(--sans);
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.chip:hover { border-color: var(--indigo); }
.chip[aria-pressed="true"] {
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--parchemin);
  font-weight: 700;
}

.article-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 230px;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .3rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--parchemin);
  isolation: isolate;
  min-height: 230px;
}
.article-card--feature { grid-row: span 3; }
.article-card__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.article-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(34,29,68,.92) 0%, rgba(34,29,68,.55) 42%, rgba(34,29,68,.06) 78%);
}
.article-card__cat {
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
.article-card__title { font-size: var(--fs-h3); color: var(--parchemin); }
.article-card--feature .article-card__title { font-size: clamp(1.75rem, 2.4vw, 2.75rem); }
.article-card__excerpt { margin: .4rem 0 .2rem; font-size: .9375rem; max-width: 54ch; }
.article-card .link-arrow { color: var(--parchemin); font-size: .9375rem; }
.article-card__flag {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  background: var(--blanc);
  color: var(--indigo);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .12em;
  padding: .4rem .85rem;
  border-radius: var(--pill);
}
.article-card[hidden] { display: none; }

/* ------------------------------------------------------- 16. Fil d'Ariane  */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .9375rem;
  padding-block: clamp(1.25rem, 2vw, 1.85rem) 0;
}
.breadcrumb li::after { content: " ·"; }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a:hover { color: var(--rouge); }
.breadcrumb [aria-current="page"] { color: rgba(34,29,68,.72); }
.breadcrumb .is-parent { color: var(--rouge); font-weight: 700; }

/* --------------------------------------------------------- 17. Article     */
.prose { max-width: 78ch; }
.prose h2 { font-size: var(--fs-h3); margin: clamp(2.25rem, 3.5vw, 3.25rem) 0 .85rem; }
.prose h3 { font-size: var(--fs-eyebrow); margin: 2rem 0 .6rem; }
.prose ul { margin: 0 0 1.15em; padding-left: 1.2em; list-style: disc; }
.prose li { margin-bottom: .35em; }
.prose img { border-radius: var(--radius); margin-block: clamp(1.75rem, 3vw, 2.75rem); }

.article-hero-img { border-radius: var(--radius); width: 100%; aspect-ratio: 1160/430; object-fit: cover; }

/* Cartes « classeurs » de l'article de classement */
.binder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.65rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.binder { display: flex; flex-direction: column; }
.binder__tab {
  align-self: flex-start;
  padding: .45rem 1rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font: 700 .75rem/1.2 var(--sans);
  letter-spacing: .12em;
  color: var(--parchemin);
}
.binder:nth-child(1) .binder__tab { background: var(--indigo); }
.binder:nth-child(2) .binder__tab { background: var(--rouge); }
.binder:nth-child(3) .binder__tab { background: var(--pruine); }
.binder:nth-child(4) .binder__tab { background: var(--orange); }
.binder__body {
  flex: 1;
  background: var(--blanc);
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  padding: 1.4rem 1.5rem 1.6rem;
}
.binder__title { font-family: var(--serif); font-size: var(--fs-h3); margin-bottom: .7rem; }
.binder__body p { font-size: .9375rem; margin: 0; }

/* Bandeau « 12 intercalaires » */
.month-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--indigo);
  color: var(--parchemin);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.6vw, 2.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.month-band__label { font-weight: 700; font-size: .75rem; letter-spacing: .14em; color: var(--orange); }
.month-band__title { font-family: var(--serif); font-size: var(--fs-h3); margin-top: .35rem; }
.month-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.month-list li {
  border: 1px solid rgba(238,231,225,.5);
  border-radius: var(--pill);
  padding: .4rem .2rem;
  text-align: center;
  font-size: .875rem;
}

/* ------------------------------------------------------------ 18. Équipe   */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.6rem) clamp(1rem, 1.8vw, 1.9rem);
}
.member__photo {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 489 / 441;
  object-fit: cover;
  background: var(--parchemin-ombre);
}
.member__role {
  margin-top: 1.1rem;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rouge);
}
.member__name { font-size: var(--fs-h3); margin-top: .35rem; }
.member__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.32;
  color: var(--pruine);
  margin: .6rem 0 .8rem;
}
.member__contact { display: grid; gap: .2rem; font-size: .9375rem; }
.member__contact a:hover { color: var(--rouge); }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.value { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.value .icon-hand { --icon-size: clamp(88px, 9vw, 132px); }
.value__name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.value p { margin: 0; }

/* --------------------------------------------------------- 19. Recrutement */
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.tag {
  border: 1px solid var(--indigo);
  border-radius: var(--pill);
  padding: .5rem 1.2rem;
  font-weight: 700;
  font-size: .875rem;
}

.job-card {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.4vw, 3.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.6rem);
}
.job-card__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 4rem);
}
.job-card h3 { font-size: var(--fs-h3); color: var(--rouge); margin-bottom: 1rem; }
.job-card h3 + ul li { padding: .42rem 0; border-bottom: 1px solid var(--parchemin); }
.job-card ul + h3 { margin-top: clamp(1.75rem, 2.6vw, 2.4rem); }
.job-card__note { margin-top: clamp(1.75rem, 2.6vw, 2.4rem); }
.job-card__note p { font-size: .9375rem; }

/* ------------------------------------------------------- 20. Formulaires   */
.form { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 1.75rem); }
.field { display: grid; gap: .45rem; }
.field > label:not(.dropzone) {
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pruine);
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="search"], .field input[type="number"], .field input[type="month"],
.field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(34,29,68,.32);
  padding: .6rem 0;
  font: 400 1rem/1.5 var(--sans);
  color: var(--indigo);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(34,29,68,.42); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--rouge); outline: none; }

.radio-row { display: flex; gap: 1.6rem; padding-top: .3rem; }
.radio-row label { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; }
.radio-row input { accent-color: var(--rouge); width: 1.05rem; height: 1.05rem; }

.dropzone {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  padding: 1.25rem;
  border: 1.5px dashed rgba(34,29,68,.34);
  border-radius: var(--radius-sm);
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color .18s, background-color .18s;
}
.dropzone:hover, .dropzone[data-drag="true"] { border-color: var(--rouge); background: rgba(227,15,1,.04); }
/* Masqué visuellement mais pas en display:none : un champ « required » invisible bloque
   l'envoi sans aucun message. Ainsi placé, l'avertissement du navigateur s'affiche
   au bas de la zone de dépôt. */
.dropzone input[type="file"] {
  position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 1px; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}
.dropzone__hint { font-size: .9375rem; color: rgba(34,29,68,.62); }
.dropzone__name { font-weight: 700; font-size: .9375rem; }

.form__note { font-size: .875rem; color: rgba(34,29,68,.7); }
.form__status { font-weight: 700; padding: 1rem 1.25rem; border-radius: var(--radius-sm); }
.form__status:empty { display: none; }
.form__status[data-etat="ok"] { background: rgba(98,96,168,.12); color: var(--indigo); }
.form__status[data-etat="erreur"] { background: rgba(227,15,1,.08); color: var(--rouge-fonce); }
.form[aria-busy="true"] button[type="submit"] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------- 21. Contact    */
.contact-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}
.contact-block h2 { font-size: var(--fs-h3); color: var(--rouge); margin-bottom: 1.6rem; }
.contact-block__org { font-weight: 700; }
.contact-block address { font-style: normal; line-height: 1.75; }
.contact-phone {
  display: inline-block;
  margin: 1.6rem 0 1.4rem;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.2vw, 2.375rem);
  color: var(--pruine);
}
.contact-phone:hover { color: var(--rouge); }
.hours dt { font-weight: 700; margin-top: 1.1rem; }
.hours dt:first-child { margin-top: 0; }
.hours dd { margin: .2rem 0 0; }

.booking {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--blanc);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 900px;
  margin-inline: auto;
}
.booking__aside { background: var(--parchemin-ombre); padding: clamp(1.5rem, 2.4vw, 2.15rem); color: var(--indigo); }
.booking__org { font-family: var(--serif); font-size: 1.5rem; }
.booking__kind { font-weight: 700; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(34,29,68,.65); margin-top: .2rem; }
.booking__title { font-family: var(--serif); font-size: 1.625rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(34,29,68,.18); }
.booking__meta { margin-top: 1.4rem; display: grid; gap: .7rem; font-size: .9375rem; }
.booking__meta li { display: flex; align-items: center; gap: .6rem; }
.booking__meta svg { width: 18px; height: 18px; flex: none; color: var(--pruine); }
.booking__frame { min-height: 460px; border: 0; width: 100%; }
.booking__fallback { padding: clamp(1.5rem, 2.4vw, 2.15rem); color: var(--indigo); }

.map-frame { width: 100%; height: clamp(320px, 30vw, 560px); border: 0; display: block; }

/* Façade vidéo : seule la vignette est servie ; le lecteur n'est appelé qu'au clic.
   Le bouton de lecture est déjà dessiné dans l'image de la maquette. */
.video {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
}
.video img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
.video:hover img { transform: scale(1.015); }
.video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  background: var(--indigo);
}

@media (prefers-reduced-motion: reduce) {
  .video img, .video:hover img { transition: none; transform: none; }
}

/* ------------------------------------------ 22. Tableau comparatif offres  */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: .9375rem;
}
.compare th, .compare td { padding: .95rem 1rem; text-align: center; }
.compare thead th {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: .03em;
  color: var(--indigo);
  vertical-align: bottom;
}
.compare tbody th {
  text-align: left;
  font: 400 .9375rem/1.5 var(--sans);
  color: var(--indigo);
  min-width: 260px;
}
.compare tbody tr { border-top: 1px solid var(--parchemin-ombre); }
.compare tbody tr:nth-child(odd) { background: rgba(255,255,255,.55); }
.compare .yes { color: var(--pruine); font-size: 1.3rem; line-height: 1; font-weight: 700; }
.compare .no  { color: var(--rouge); font-size: 1.15rem; line-height: 1; }
.compare sup { color: var(--rouge); font-size: .75rem; }
.compare__foot { margin-top: 1rem; font-size: .8125rem; color: rgba(34,29,68,.72); }

/* --------------------------------------------------------- 23. Outils      */
.tool-app {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.tool-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: end;
}
.tool-form .btn { justify-self: start; }
.tool-result {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--parchemin-ombre);
}
.tool-result__value {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.6vw, 2.625rem);
  color: var(--pruine);
}
.tool-result__label { font-weight: 700; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: var(--rouge); }

.data-table-wrap { overflow-x: auto; margin-top: 1.5rem; max-height: 620px; overflow-y: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: .6rem .85rem; text-align: right; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table thead th {
  position: sticky; top: 0;
  background: var(--indigo);
  color: var(--parchemin);
  font: 700 .75rem/1.3 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.data-table tbody tr:nth-child(even) { background: rgba(238,231,225,.55); }
.data-table tfoot td { border-top: 2px solid var(--indigo); font-weight: 700; }

/* Calculatrice */
.calc { max-width: 380px; margin-inline: auto; }
.calc__screen {
  background: var(--indigo);
  color: var(--parchemin);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calc__expr { min-height: 1.35rem; font-size: .9375rem; color: rgba(238,231,225,.7); word-break: break-all; }
.calc__value { font-family: var(--serif); font-size: 2.5rem; line-height: 1.1; }
.calc__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1rem; }
.calc__keys button {
  padding: 1rem .5rem;
  border: 1px solid var(--parchemin-ombre);
  border-radius: var(--radius-sm);
  background: var(--parchemin);
  color: var(--indigo);
  font: 700 1.15rem/1 var(--sans);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.calc__keys button:hover { background: var(--parchemin-ombre); }
.calc__keys button[data-op] { color: var(--rouge); }
.calc__keys button[data-eq] { background: var(--rouge); border-color: var(--rouge); color: var(--parchemin); }
.calc__keys button[data-eq]:hover { background: var(--rouge-fonce); }
.calc__keys button[data-span="2"] { grid-column: span 2; }

/* Plan comptable */
.pcg-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.pcg-search { flex: 1 1 320px; }
.pcg-classes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.pcg-class-chip {
  border: 0;
  border-radius: var(--pill);
  padding: .5rem 1.1rem;
  font: 700 .8125rem/1.2 var(--sans);
  color: var(--blanc);
  cursor: pointer;
  opacity: .45;
  transition: opacity .18s;
}
.pcg-class-chip[aria-pressed="true"] { opacity: 1; }
.pcg-list { margin-top: 1.75rem; display: grid; gap: .25rem; max-height: 640px; overflow-y: auto; }
.pcg-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  border-left: 5px solid var(--c, var(--pruine));
  background: rgba(238,231,225,.5);
}
.pcg-item--l1 { font-weight: 700; background: rgba(238,231,225,.9); }
.pcg-item--l2 { margin-left: 1.25rem; }
.pcg-item--l3 { margin-left: 2.5rem; font-size: .9375rem; }
.pcg-item--l4 { margin-left: 3.75rem; font-size: .9375rem; color: rgba(34,29,68,.8); }
.pcg-item__num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c, var(--pruine)); }
.pcg-empty { padding: 2rem; text-align: center; color: rgba(34,29,68,.7); }
.pcg-count { margin-top: 1rem; font-size: .875rem; color: rgba(34,29,68,.7); }

/* ------------------------------------------------------------ 24. Footer   */
.site-footer {
  background: var(--rouge);
  color: var(--parchemin);
  padding-top: clamp(2.75rem, 4.5vw, 4.5rem);
}
.site-footer a:hover { text-decoration: underline; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr .8fr .95fr;
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}
/* Le badge se place à droite de la première ligne du logo, comme sur la maquette. */
.footer__brand { position: relative; }
.footer__logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 4.4vw, 5.375rem);
  line-height: .95;
  letter-spacing: .01em;
}
.footer__badge {
  position: absolute;
  top: .55rem;
  right: 0;
  border: 1px solid var(--parchemin);
  border-radius: var(--pill);
  padding: .6rem 1.15rem;
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1.4;
  text-align: center;
  margin: 0;
}
.footer__col h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.7vw, 1.875rem);
  letter-spacing: .02em;
  color: var(--parchemin);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--parchemin);
  margin-bottom: 1.35rem;
}
.footer__col ul { display: grid; gap: .8rem; }
.footer__col address { font-style: normal; line-height: 1.75; }
.footer__hours { margin-top: 2.25rem; grid-column: 2 / -1; font-size: .9375rem; }

.footer__legal { margin-top: clamp(2.25rem, 4vw, 3.75rem); font-size: .9375rem; line-height: 1.7; }
.footer__bottom {
  margin-top: 1.5rem;
  border-top: 1px solid var(--parchemin);
  padding-block: 1.1rem 1.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  font-size: .9375rem;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer__bottom li::after { content: " •"; }
.footer__bottom li:last-child::after { content: none; }

/* ------------------------------------------- 24 bis. Consentement cookies */
/* « Refuser » et « Accepter » ont exactement la même apparence : la CNIL exige
   que refuser soit aussi simple et visible qu'accepter. */
.cookies {
  position: fixed;
  left: 50%;
  bottom: clamp(.75rem, 2vw, 1.5rem);
  transform: translateX(-50%);
  z-index: 90;
  width: min(calc(100% - 1.5rem), 860px);
  display: flex;
  align-items: center;
  gap: 1rem 1.75rem;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--indigo);
  color: var(--parchemin);
  box-shadow: 0 12px 40px rgba(34,29,68,.35);
}
.cookies[hidden] { display: none; }
.cookies__texte { margin: 0; font-size: .9375rem; line-height: 1.5; }
.cookies__texte a { color: var(--parchemin); text-decoration: underline; }
.cookies__choix { display: flex; gap: .75rem; flex-shrink: 0; }
.cookies__choix .btn { padding-inline: 1.4rem; }
@media (max-width: 720px) {
  .cookies { flex-direction: column; align-items: stretch; }
  .cookies__choix .btn { flex: 1; justify-content: center; }
}

.lien-cookies {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* -------------------------------------------------- 25. Retour en haut     */
.to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 2.1rem);
  bottom: clamp(1rem, 2vw, 2.1rem);
  z-index: 80;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--parchemin);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s, transform .22s, visibility .22s, background-color .18s;
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--rouge-fonce); }
.to-top svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------- 26. Bandeau CTA */
.cta-band { text-align: center; }
.cta-band .title-h2 { color: var(--parchemin); }
.cta-band p { margin: 1rem auto 1.9rem; max-width: 62ch; }

/* ============================================================ Responsive   */
@media (max-width: 1240px) {
  :root { --header-h: 128px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__hours { grid-column: 1 / -1; margin-top: 1rem; }
  .article-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; }
  .article-card--feature { grid-row: span 2; grid-column: span 2; }
  .perk-grid { grid-template-columns: repeat(2, 1fr); }
  .booking { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .nav--left, .nav--right { display: none; }
  .burger { display: block; }
  .site-header__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    min-height: 96px;
    padding-block: .9rem;
  }
  .brand { grid-column: 2; text-align: right; }
  .brand__name { white-space: normal; font-size: clamp(1.6rem, 6.4vw, 2.4rem); display: block; }
  .brand__baseline { display: inline-block; border: 1px solid var(--parchemin); border-radius: var(--pill); padding: .3rem .8rem; font-size: .5625rem; margin-top: .45rem; }

  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .offer-grid, .offer-cards { grid-template-columns: repeat(2, 1fr); row-gap: 2.75rem; }
  .feature-grid, .values-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .contact-cols { grid-template-columns: 1fr; }
  .job-card__cols { grid-template-columns: 1fr; }
  .binder-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .month-list { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 720px) {
  .hero--home .hero__media { grid-template-columns: 1fr; }
  .hero--home .hero__media img:not(:first-child) { display: none; }
  .hero__inner { padding-top: clamp(11rem, 62vw, 17rem); }

  .sector-grid { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .article-card--feature { grid-column: auto; grid-row: auto; }
  .team-grid { grid-template-columns: 1fr; }
  .binder-grid { grid-template-columns: 1fr; }
  .perk-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__badge { position: static; display: inline-block; margin-top: .8rem; }
  .month-list { grid-template-columns: repeat(4, 1fr); }
  .month-band { flex-direction: column; align-items: flex-start; }
  .pcg-item { grid-template-columns: 5.5rem 1fr; gap: .6rem; }
  .pcg-item--l2 { margin-left: .6rem; }
  .pcg-item--l3 { margin-left: 1.2rem; }
  .pcg-item--l4 { margin-left: 1.8rem; }
}

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

@media print {
  .site-header, .site-footer, .to-top, .mobile-menu, .chips { display: none; }
  body { background: #fff; }
}

/* ------------------------------------------- 27. Questions fréquentes (FAQ) */
/* Rendu par faq() dans layout.py : <details class="faq__item"> + <summary>.
   Lisible sur parchemin comme sur une section colorée (pruine, indigo). */
.faq .title-h2 { text-align: center; }
.faq .lead { text-align: center; margin-top: .9rem; font-size: 1rem; line-height: 1.62; }
.faq__list {
  max-width: 920px;
  margin: clamp(2rem, 3.5vw, 3.25rem) auto 0;
  border-top: 1px solid rgba(34,29,68,.22);
}
.faq__item { border-bottom: 1px solid rgba(34,29,68,.22); }
.faq__item summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 3rem 1.25rem 0;
  font: 600 clamp(1.25rem, 1.5vw, 1.625rem)/1.25 var(--serif);
  color: var(--indigo);
  transition: color .18s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
/* Chevron dessiné en CSS : deux bordures d'un carré tourné */
.faq__item summary::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  width: .7rem;
  height: .7rem;
  border-right: 2px solid var(--rouge);
  border-bottom: 2px solid var(--rouge);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .22s ease;
}
.faq__item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq__item summary:hover { color: var(--rouge); }
.faq__body { padding: 0 3rem 1.5rem 0; max-width: 72ch; }
.faq__body a { color: var(--rouge); text-decoration: underline; text-underline-offset: .18em; }
.faq__body a:hover { color: var(--rouge-fonce); }

.section--pruine .faq__list, .section--indigo .faq__list,
.section--pruine .faq__item, .section--indigo .faq__item { border-color: rgba(238,231,225,.35); }
.section--pruine .faq__item summary,
.section--indigo .faq__item summary { color: var(--parchemin); }
.section--pruine .faq__item summary:hover,
.section--indigo .faq__item summary:hover { color: var(--orange); }
.section--pruine .faq__item summary::after,
.section--indigo .faq__item summary::after { border-color: var(--orange); }
.section--pruine .faq__body a,
.section--indigo .faq__body a { color: var(--parchemin); }
.section--pruine .faq__body a:hover,
.section--indigo .faq__body a:hover { color: var(--orange); }

/* -------------------------------------------- 28. Où nous intervenons     */
.zone__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.zone__text .title-h2 { margin: .9rem 0 1.5rem; }
.zone__text a:not(.link-arrow) { text-decoration: underline; text-underline-offset: .18em; }
.zone__list { margin: 0; border-top: 1px solid rgba(34,29,68,.22); }
.zone__band {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: .4rem 1.5rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(34,29,68,.22);
}
.zone__band dt {
  font: 600 clamp(1.25rem, 1.5vw, 1.625rem)/1.2 var(--serif);
  color: var(--rouge);
}
.zone__band dd { margin: 0; line-height: 1.55; }
.zone__band--siege dd { font-weight: 700; }
.zone__note { margin-top: .9rem; font-size: var(--fs-small); opacity: .8; }

.section--pruine .zone__list, .section--indigo .zone__list,
.section--pruine .zone__band, .section--indigo .zone__band { border-color: rgba(238,231,225,.35); }
.section--pruine .zone__band dt,
.section--indigo .zone__band dt { color: var(--orange); }
.section--pruine .zone__text .link-arrow,
.section--indigo .zone__text .link-arrow { color: var(--orange); }

/* Petits compléments des pages cabinet, contact et pied de page */
.split--top { align-items: start; }
/* Les étincelles d'un bouton débordent de 30 px à droite : on écarte le bouton suivant. */
.btn-row > .btn--spark:not(:last-child) { margin-right: .75rem; }
/* Un chapô .lead--body est borné à 76ch : centré, sinon il colle à gauche dans un en-tête centré. */
.section-head > .lead--body { margin-inline: auto; }
.contact-access { margin-top: 1rem; font-size: .9375rem; max-width: 46ch; }
.footer__near { margin-top: 1rem; font-size: .9375rem; line-height: 1.6; }

@media (max-width: 1024px) {
  .zone__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .faq__item summary { padding-right: 2.25rem; }
  .faq__body { padding-right: 0; }
  .zone__band { grid-template-columns: 1fr; gap: .2rem; }
}