/* Police de secours calée sur Montserrat (audit du 2026-09-29) : pendant le chargement de Montserrat, le texte
   s'affiche en Arial ajusté à la même largeur (mesuré par graisse : fine +10,8 %, normale +12,2 %, demi-gras +8,1 %, gras +10 %), donc rien ne « saute »
   quand la vraie police arrive (Lighthouse : « Web font loaded » causait un décalage de 0,18 à 0,26). */
@font-face { font-family: "Montserrat repli"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 349; size-adjust: 110.8%; ascent-override: 87.4%; descent-override: 22.7%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat repli"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 350 549; size-adjust: 112.2%; ascent-override: 86.3%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat repli"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 649; size-adjust: 108.1%; ascent-override: 89.5%; descent-override: 23.2%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat repli"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 650 900; size-adjust: 110.0%; ascent-override: 88.0%; descent-override: 22.8%; line-gap-override: 0%; }
/* ==========================================================
   Cabinet Virtus — maquette de l'accueil
   Référence visuelle : « Cabinet Virtus – Nouveau site.pdf »
   Jetons : brief section 2, valeurs relevées sur la référence
   ========================================================== */

:root {
  --teal: #00303C;
  --cuivre: #C47C5A;
  --cuivre-fonce: #96543A;       /* audit 2026-09-29 : était #A5603F (contraste 4,1 sur le beige) → 4,9 sur beige, 5,5 sur ivoire */
  --cuivre-clair: #EBB394;        /* ton clair du dégradé : petit texte cuivré sur fond teal (AA) */
  --encre: #131E29;
  --ivoire: #FBF8F5;
  --creme: #F8F3EF;               /* fond « Pourquoi nous », relevé sur la référence */
  --beige: #F3EBE5;
  --sable-haut: #F3EBE3;          /* fond des sections alternées : dégradé sable, du plus clair au plus chaud */
  --sable-bas: #EDE3D8;
  --teal-eclat: #0B4150;          /* halo discret en haut à gauche des sections teal */
  --teal-profond: #00272F;
  --texte: #2B4A52;
  --texte-doux: #5E7479;
  --bordure: #EBDFD6;
  --blanc: #FFFFFF;
  --menthe: #CFE6DE;              /* pastille « Livres à jour », relevée sur la référence */
  --cuivre-degrade: linear-gradient(120deg, #7A3E22 0%, #C47C5A 38%, #EBB394 52%, #B06A48 70%, #7A3E22 100%);

  --police: 'Montserrat', 'Montserrat repli', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1440px;
  --gouttiere: 80px;
  --section: 80px;
  --r-bouton: 4px;
  --r-verre: 8px;
  --r-carte: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --h1: 62px;                    /* 1er oct. 2026 (Rafik : « le site paraît zoomé ») : 68 → 62 */
  --h2: 48px;                    /* 52 → 48 */
  --h3: 26px;
  --entete-h: 96px;
}

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

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

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--texte);
  font-family: var(--police);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
address { font-style: normal; }
strong, b { font-weight: 700; }

h1, h2, h3 {
  margin: 0;
  color: var(--teal);
  font-weight: 300;
  letter-spacing: -.01em;
  hyphens: none;
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.06; }
h2 { font-size: var(--h2); line-height: 1.12; text-wrap: wrap; }
.entete-deux-colonnes h2 { font-size: calc(var(--h2) + 3px); }
.titre-bloc { font-size: calc(var(--h2) - 8px); }
.entete-deux-colonnes .titre-bloc { font-size: calc(var(--h2) - 8px); }
h3 { font-size: var(--h3); line-height: 1.3; font-weight: 700; letter-spacing: 0; }
h1 strong, h2 strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }

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

.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--teal); color: var(--blanc); padding: 10px 18px;
  border-radius: var(--r-bouton); text-decoration: none; font-weight: 600;
  transition: top .2s;
}
.evitement:focus { top: 12px; }

/* ---------- Mise en page ---------- */

.enveloppe {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gouttiere);
  padding-right: var(--gouttiere);
}

.section { padding: var(--section) 0; position: relative; }

.section-serree { padding: 68px 0; }

.fond-ivoire { background: var(--ivoire); }

/* Passage en douceur d'un fond clair à l'autre : la section beige naît de l'ivoire */

/* Les ancres (« Faire le diagnostic », « Rencontre sans frais »…) arrivent sous le menu fixe */
section[id], [id="partenaires"] { scroll-margin-top: calc(var(--entete-h) - 1px); }
.fond-teal {
  background-color: var(--teal);
  background-image: radial-gradient(120% 100% at 12% 0%, var(--teal-eclat) 0%, var(--teal) 55%, var(--teal-profond) 100%);
  color: rgba(255,255,255,.78);
}
/* Toutes les sections sable suivent une section ivoire : 60 px de transition douce, puis le sable s'installe */
.fond-sable { background: linear-gradient(180deg, var(--ivoire) 0, var(--sable-haut) 60px, var(--sable-bas) 100%); }
.fond-teal h2, .fond-teal h3 { color: var(--blanc); }

.sureminence {
  display: block;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--cuivre-fonce);
}
.sureminence-clair { color: var(--cuivre-clair); }

.entete-section { margin-bottom: 48px; max-width: 760px; }
.entete-centre { margin-left: auto; margin-right: auto; text-align: center; max-width: 820px; }
.entete-centre .chapeau { margin: 22px auto 0; max-width: 560px; }
.entete-deux-colonnes {
  max-width: none;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px 80px;
  align-items: end;
}
.entete-deux-colonnes > :last-child { justify-self: start; }
.chapeau { font-size: 16.5px; color: var(--texte-doux); max-width: 520px; line-height: 1.65; }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 30px;
  border-radius: var(--r-bouton);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: filter .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.bouton:hover { filter: brightness(.92); }
.bouton-petit { min-height: 46px; padding: 0 20px; font-size: 14.5px; }
.bouton-plein { width: 100%; }

.bouton-cuivre {
  background: var(--cuivre-degrade);
  background-size: 200% 100%;
  background-position: 0 0;
  color: var(--blanc);
  text-shadow: 0 1px 1px rgba(90, 40, 15, .35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.bouton-teal { background: var(--teal); color: var(--blanc); }
.bouton-beige { background: var(--beige); color: var(--cuivre-fonce); }
.bouton-verre {
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--blanc);
}
.bouton-verre:hover { filter: none; background: rgba(255,255,255,.2); }
.bouton-contour-clair { border: 1px solid rgba(255,255,255,.3); color: var(--blanc); }
.bouton-contour-clair:hover { filter: none; border-color: var(--cuivre); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cuivre-fonce);
  text-decoration: none;
}
.lien-fleche:hover { text-decoration: underline; text-underline-offset: 6px; }
.lien-souligne {
  min-height: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  text-decoration: none !important;
  transition: opacity .2s;
}
.lien-souligne:hover { opacity: .75; }
.lien-teal { color: var(--teal); }

.lien-clair { color: var(--cuivre-clair); }

/* ---------- Listes ---------- */

.liste-crochets li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}
.liste-crochets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--cuivre);
  border-bottom: 1.5px solid var(--cuivre);
  transform: rotate(-45deg);
}
.liste-points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}
.liste-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cuivre);
}

/* ---------- Cartes ---------- */

/* À fournir par le client (visible uniquement dans la maquette) */
.a-fournir {
  background: repeating-linear-gradient(135deg, rgba(196,124,90,.10) 0 6px, rgba(196,124,90,.04) 6px 12px);
  outline: 1px dashed rgba(165, 96, 63, .55);
  outline-offset: 1px;
  border-radius: 2px;
  padding: 0 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.a-fournir::before { content: "À fournir · "; font-weight: 600; font-size: .78em; letter-spacing: .04em; color: var(--cuivre-fonce); }
.fond-teal .a-fournir::before, .temoignage-grand .a-fournir::before { color: var(--cuivre-clair); }

/* ==========================================================
   5.1 Barre d'annonce
   ========================================================== */

.annonce { background: var(--encre); color: var(--blanc); font-size: 14px; }
.annonce.est-masquee { display: none; }
.annonce-interieur {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.annonce p { margin: 0; text-align: center; line-height: 1.4; padding: 8px 36px; }
.annonce a { text-decoration: none; color: var(--cuivre-clair); }
.annonce a:hover { text-decoration: underline; text-underline-offset: 3px; }
.annonce-pastille {
  display: inline-block;
  width: 8px; height: 8px; margin-right: 10px;
  border-radius: 50%;
  background: var(--cuivre);
  box-shadow: 0 0 0 4px rgba(196,124,90,.22);
  vertical-align: 1px;
}

/* ==========================================================
   En-tête
   ========================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ivoire);
  border-bottom: 1px solid var(--bordure);
  transition: box-shadow .25s var(--ease);
}
.entete.a-defile { box-shadow: 0 6px 24px -12px rgba(0, 48, 60, .22); }
.entete-interieur {
  height: var(--entete-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.entete-logo img { width: 124px; }

.nav { display: flex; align-items: center; gap: 22px; }
.nav-liens { display: flex; gap: 22px; }
.nav-liens > li > a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
}
.nav-liens > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cuivre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-liens > li > a:hover::after, .nav-liens > li > a[aria-current="page"]::after, .a-sous-menu:hover > a::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 18px; }

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--teal);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--teal);
  padding: calc(var(--entete-h) + 32px) 24px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.menu-mobile.est-ouvert { opacity: 1; visibility: visible; }
.menu-mobile li { border-bottom: 1px solid rgba(255,255,255,.1); }
.menu-mobile nav a {
  display: block;
  padding: 10px 0;
  font-size: 24px;
  font-weight: 300;
  color: var(--blanc);
  text-decoration: none;
}
.menu-mobile-actions { display: grid; gap: 12px; margin-top: 28px; }

/* ==========================================================
   5.2 Haut de page
   ========================================================== */

.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  overflow: hidden;
  background: var(--teal);
  color: rgba(255,255,255,.86);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 38%;
}
.hero-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,48,60,.94) 0%, rgba(0,48,60,.84) 38%, rgba(0,48,60,.55) 100%);
}
.hero-contenu {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
  padding-top: 96px;
  padding-bottom: 40px;
}
.hero-texte-bloc { max-width: 980px; }
.hero-titre { color: var(--blanc); }
.filet-anime {
  display: block;
  width: 130px;
  height: 2px;
  margin: 30px 0 32px;
  background: var(--cuivre-degrade);
  transform-origin: left;
  animation: filet 1.1s .35s var(--ease) both;
}
@keyframes filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-texte { font-size: 18.5px; max-width: 630px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.hero-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.carte-verre {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 84px;
  padding: 16px 24px;
  border-radius: var(--r-verre);
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.carte-verre:hover { border-color: var(--cuivre); background: rgba(255,255,255,.17); }
.carte-verre strong { display: block; color: var(--blanc); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.carte-verre .icone { flex: none; width: 24px; height: 24px; }

.icone, .raison-icone svg, .contact-liens svg, .barre-mobile svg, .carte-epingle svg {
  fill: none;
  stroke: var(--cuivre);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carte-verre .icone { stroke: var(--cuivre-clair); }

/* ==========================================================
   5.3 Bandeau de services
   ========================================================== */

.bandeau { background: var(--teal); border-top: 1px solid rgba(255,255,255,.08); }

.bandeau-sep { color: rgba(196,124,90,.8); font-weight: 200; font-size: 20px; }

/* ==========================================================
   5.4 Services — accordéon
   ========================================================== */

.volets { border-top: 1px solid var(--bordure); }
.volet { border-bottom: 1px solid var(--bordure); }
.volet-titre { font-size: inherit; font-weight: inherit; }
.volet-bouton {
  width: 100%;
  display: grid;
  grid-template-columns: 64px 1fr 46px;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  text-align: left;
  color: var(--teal);
}
.volet-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--cuivre-fonce);
}
.volet-nom {
  font-size: 31.5px;
  font-weight: 300;
  line-height: 1.25;
  transition: color .2s;
}
.volet.est-ouvert .volet-nom { font-weight: 700; }
.volet-bouton:hover .volet-nom { color: var(--cuivre-fonce); }

.plus {
  position: relative;
  justify-self: end;
  width: 46px; height: 46px;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  transition: transform .3s var(--ease), border-color .2s, background-color .2s;
}
.plus::before, .plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.5px;
  background: var(--cuivre);
  transform: translate(-50%, -50%);
}
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
[aria-expanded="true"] .plus { transform: rotate(45deg); border-color: var(--teal); background: var(--teal); }
[aria-expanded="true"] .plus::before, [aria-expanded="true"] .plus::after { background: var(--blanc); }

.volet-panneau, .question-panneau {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.volet-panneau > *, .question-panneau > * { overflow: hidden; min-height: 0; }
.est-ouvert > .volet-panneau, .est-ouvert > .question-panneau { grid-template-rows: 1fr; }

/* Aucun padding vertical sur l'élément replié : il ne descendrait pas sous sa valeur.
   L'espace du bas est porté par les marges des enfants, rognées quand le volet est fermé. */
.volet-interieur {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 580px);
  gap: 0 64px;
  padding: 0 0 0 80px;
}
.volet-interieur > * { margin-bottom: 40px; }
.volet-texte { font-size: 18.5px; max-width: 580px; }
.pour-qui { margin-top: 18px; font-size: 15px; color: var(--texte-doux); }
.pour-qui strong { color: var(--teal); }
.volet-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 6px; }
.lien-secondaire {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--texte-doux);
  text-underline-offset: 5px;
  text-decoration-color: var(--bordure);
}
.lien-secondaire:hover { color: var(--teal); text-decoration-color: var(--cuivre); }
.inclus {
  align-self: start;
  background: var(--beige);
  padding: 28px 32px 18px;
  font-size: 16.5px;
  color: var(--teal);
}
.inclus-titre {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cuivre-fonce);
  margin-bottom: 14px;
}

/* ==========================================================
   5.5 Secteurs
   ========================================================== */

/* Secteurs mis en avant (page Services) */
.secteurs-vedettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.secteur { display: flex; flex-direction: column; padding: 30px 26px 26px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); }
.secteur-icone { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 12px; background: radial-gradient(120% 120% at 100% 0%, rgba(196,124,90,.35) 0%, rgba(196,124,90,0) 60%), var(--teal); }
.secteur-icone svg { width: 26px; height: 26px; fill: none; stroke: var(--cuivre-clair); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.secteur h3 { font-size: 20px; line-height: 1.3; margin-bottom: 8px; color: var(--teal); }
.secteur-qui { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--texte-doux); }
.secteur-points { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bordure); }
.secteur-points li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.45; color: var(--teal); }
.secteur-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--cuivre); }
.secteurs-autres { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 24px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(165,96,63,.18); }
.secteurs-autres .secteurs-pastilles { grid-column: 1 / -1; }
.secteurs-autres .lien-fleche { grid-column: 2; grid-row: 1; }
.secteurs-autres-titre { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cuivre-fonce); }
.secteurs-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.secteurs-pastilles li { padding: 8px 14px; border: 1px solid var(--bordure); border-radius: 999px; background: rgba(255,255,255,.7); font-size: 14px; font-weight: 500; color: var(--teal); }
.secteurs-pastilles li.pastille-plus { border-style: dashed; border-color: rgba(165,96,63,.45); background: transparent; color: var(--cuivre-fonce); font-style: italic; }
.chapeau strong { color: var(--teal); font-weight: 600; }

/* ==========================================================
   5.6 Pourquoi nous
   ========================================================== */

/* ==========================================================
   5.7 Diagnostic express
   ========================================================== */

.diag-grille {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 60px;
  align-items: start;
}
.diag-intro h2 { margin-bottom: 26px; }
.diag-intro p { max-width: 360px; font-size: 17.5px; color: rgba(255,255,255,.7); }
/* Bande teal sur photo réelle des bureaux (salle de réunion) */
.fond-teal.cta-photo {
  background-image: linear-gradient(90deg, rgba(0,48,60,.97) 0%, rgba(0,48,60,.9) 40%, rgba(0,48,60,.45) 100%), url(img/salle-reunion.jpg);
  background-size: cover, cover;
  background-position: center, center 55%;
}
/* Nous trouver : la façade de la carte montre l'intérieur des bureaux */

/* À propos : le sens du logo (planche de marque) */
/* Motif de la marque (monogramme VIR/TUS ton sur ton), comme sur la carte d'affaires et l'eBook */
.fond-teal.avec-motif {
  background-image: url(img/motif-virtus.png), radial-gradient(120% 100% at 12% 0%, var(--teal-eclat) 0%, var(--teal) 55%, var(--teal-profond) 100%);
  background-size: 1440px auto, auto;
  background-repeat: repeat, no-repeat;
  background-position: center top, center;
}
.diag-questions { display: grid; gap: 20px; }
.diag-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.diag-q legend {
  padding: 0;
  margin-bottom: 14px;
  color: var(--blanc);
  font-size: 17px;
  font-weight: 500;
}
.diag-choix { display: flex; flex-wrap: wrap; gap: 12px; }
.diag-choix label { position: relative; display: block; cursor: pointer; }
.diag-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.diag-choix span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--r-bouton);
  color: var(--blanc);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.diag-choix label:hover span { border-color: var(--cuivre); }
.diag-choix input:checked + span { background: var(--blanc); color: var(--teal); border-color: var(--blanc); font-weight: 600; }
.diag-choix input:focus-visible + span { outline: 2px solid var(--cuivre); outline-offset: 3px; }

.diag-resultats { margin-top: 6px; }
.diag-resultat {
  display: none;
  padding: 28px 36px 32px;
  background: var(--blanc);
  border-left: 4px solid var(--cuivre);
  color: var(--texte);
}
.diag-resultat.est-visible { display: block; animation: apparition .5s var(--ease) both; }
.diag-attente { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: none !important; }
.diag-resultat.diag-attente .sureminence { color: var(--cuivre-clair); }
.diag-resultat.diag-attente h3 { color: var(--blanc); }
.diag-resultat.diag-attente p:not(.sureminence) { color: rgba(255,255,255,.72); }
.diag-attente .bouton-teal { background: var(--blanc); color: var(--teal); }
.diag-attente .bouton-teal:hover { filter: none; background: var(--cuivre-clair); }
.diag-resultat h3 { color: var(--teal); font-size: 30px; font-weight: 700; margin-bottom: 12px; }
.diag-resultat p:not(.sureminence) { margin-bottom: 26px; max-width: 560px; font-size: 16px; color: var(--texte-doux); }
.diag-resultat .sureminence { margin-bottom: 10px; }
@keyframes apparition { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ==========================================================
   5.8 Notre approche
   ========================================================== */

/* ==========================================================
   5.9 Outils infonuagiques
   ========================================================== */

.outils-grille {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
  margin-top: 130px;
  scroll-margin-top: calc(var(--entete-h) + 24px);
}
.outils-texte h2 { margin-bottom: 22px; }
.outils-texte > p { font-size: 17px; color: var(--texte-doux); margin-bottom: 26px; }
.outils-texte .liste-points { color: var(--teal); font-weight: 500; font-size: 16px; }

.tableau-bord {
  position: relative;
  margin: 0;
  height: 440px;
  margin-top: 40px;
  background-color: var(--teal);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--blanc);
}
.tb-verre {
  position: absolute;
  border-radius: var(--r-verre);
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
}
.tb-mois {
  left: 5.6%;
  top: 9.3%;
  width: 77.5%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 26px 30px 28px;
}
.tb-sur { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cuivre-clair); }
.tb-titre { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }
.tb-badge {
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(151,191,181,.22);
  color: var(--menthe);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}
.tb-etats {
  left: 9.6%;
  top: 68%;
  width: 61%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 18px 0;
}
.tb-etats p {
  margin: 0;
  padding: 0 26px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.tb-etats p + p { border-left: 1px solid rgba(255,255,255,.2); }
.tb-etats span { display: block; font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.62); }
.tb-graphique {
  z-index: 1;
  left: 59.7%;
  top: 34%;
  width: 34.7%;
  padding: 18px 20px 12px;
  background: rgba(31,73,83,.92);
}
.tb-legende { margin: 0 0 12px; font-size: 13px; color: rgba(255,255,255,.75); }
.tb-barres { height: 72px; display: flex; align-items: flex-end; gap: 8px; }
.tb-barres span { flex: 1; height: var(--h); background: rgba(255,255,255,.34); }
.tb-barres .tb-actuel { background: var(--cuivre-clair); }
.tableau-bord figcaption { margin-top: 8px; font-size: 10.5px; letter-spacing: .02em; color: rgba(255,255,255,.5); }

/* ==========================================================
   5.10 Capsules vidéo
   ========================================================== */

.capsules { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }

@keyframes pulsation {
  0% { box-shadow: 0 0 0 0 rgba(196,124,90,.55); }
  70% { box-shadow: 0 0 0 26px rgba(196,124,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,124,90,0); }
}

/* ==========================================================
   5.11 Équipe
   ========================================================== */

.equipe { display: grid; grid-template-columns: 440px 1fr; gap: 24px; align-items: start; }
.fondateurs { position: relative; margin: 0; }
.fondateurs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 22%; }
.fondateurs figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 16px 28px 18px;
  background: var(--ivoire);
}
.fondateurs figcaption .sureminence { margin-bottom: 2px; font-size: 11.5px; }
.fondateurs figcaption strong { font-size: 19.5px; color: var(--teal); }

.techniciennes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.membre-portrait {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--beige);
  display: grid;
  place-items: center;
}
.membre-portrait span { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-doux); }
.membre-portrait img { width: 100%; height: 100%; object-fit: cover; }
.membre h3 { font-size: 18.5px; margin-top: 22px; }

.membre p { font-size: 15px; color: var(--cuivre-fonce); margin: 4px 0 0; }
.equipe-note { margin-top: 36px; font-size: 17px; color: var(--texte-doux); max-width: 640px; }

/* ==========================================================
   5.12 CPA partenaires
   ========================================================== */

/* ==========================================================
   5.13 Formations
   ========================================================== */

.formations { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.formation { padding: 48px 48px 52px; min-height: 0; }
.formation h2 { font-size: 35px; margin-bottom: 18px; }
.formation p:not(.sureminence) { font-size: 17px; max-width: 470px; margin-bottom: 30px; }

/* ==========================================================
   5.14 Témoignages
   ========================================================== */

.temoignages-bloc { margin-top: 0; }
.temoignages-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 40px;
  margin-bottom: 32px;
}
.temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.etoiles { display: block; width: 104px; height: 19px; fill: #FBBC04; flex: none; }
.google-g { display: block; width: 24px; height: 24px; flex: none; }

.avis {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 30px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.avis:hover { transform: translateY(-3px); border-color: var(--cuivre); box-shadow: 0 12px 28px -18px rgba(0,48,60,.35); }
.avis-entete { display: flex; align-items: center; gap: 12px; }
.avis-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--avatar, var(--teal));
  color: var(--blanc);
  font-size: 18px;
  font-weight: 600;
}
.avis-auteur { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; color: var(--texte-doux); line-height: 1.4; }
.avis-auteur strong { font-size: 16px; color: var(--teal); }
.avis blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: var(--texte); }

/* ==========================================================
   5.15 Guide gratuit
   ========================================================== */

.guide { overflow: hidden; }
.guide-grille { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: center; }
.guide-texte h2 { margin-bottom: 24px; }
.guide-texte > p { max-width: 560px; margin-bottom: 36px; }
.guide-champ { display: flex; gap: 10px; max-width: 580px; }
.guide-champ input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-bouton);
  background: rgba(255,255,255,.08);
  color: var(--blanc);
  font: 400 16px var(--police);
}
.guide-champ input::placeholder { color: rgba(255,255,255,.6); }
.guide-champ input:focus { outline: none; border-color: var(--cuivre-clair); background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(235,179,148,.45); }
.guide-champ input[aria-invalid="true"] { border-color: #f0a58a; }
.form-erreur { color: #f6c3ae; font-size: 14px; margin: 12px 0 0; }
.guide-succes {
  margin: 14px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--cuivre);
  background: rgba(255,255,255,.08);
  color: var(--blanc);
  font-weight: 500;
}
.guide-mention { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 16px; }

@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.couverture {
  position: relative;
  min-height: 300px;
  padding: 28px 24px 22px;
  border-radius: 4px;
  background: var(--encre);
  color: rgba(255,255,255,.75);
  display: flex;
  flex-direction: column;
  box-shadow: 0 50px 80px -40px rgba(0,0,0,.7);
  overflow: hidden;
}
.couverture::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: var(--cuivre-degrade);
}
.couverture img { width: 96px; margin-bottom: 30px; }

.couverture ul { font-size: 11px; }
.couverture li { padding: 7px 0; border-top: 1px solid rgba(255,255,255,.12); }

/* ==========================================================
   5.16 Article de fond
   ========================================================== */

.article-grille { display: grid; grid-template-columns: 3fr 8fr; gap: 80px; align-items: start; }

/* ==========================================================
   5.17 FAQ
   ========================================================== */

.faq-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.faq-entete { position: sticky; top: calc(var(--entete-h) + 40px); }
.faq-entete h2 { margin-bottom: 24px; }
.faq-entete .lien-fleche { margin-top: 4px; }
.faq { border-top: 1px solid var(--bordure); }
.question { border-bottom: 1px solid var(--bordure); }
.question h3 { font-size: inherit; font-weight: inherit; }
.question-bouton {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  text-align: left;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--teal);
}
.question-bouton:hover { color: var(--cuivre-fonce); }
.question-interieur { padding: 0 70px 0 0; }
.question-interieur > p { margin-bottom: 26px; font-size: 16px; color: var(--texte-doux); }

/* ==========================================================
   5.18 Blogue  ·  5.19 Carrières
   ========================================================== */

/* ==========================================================
   5.20 Régions desservies
   ========================================================== */

/* ==========================================================
   5.21 Contact
   ========================================================== */

.contact { border-top: 1px solid rgba(255,255,255,.1); }
.contact-grille { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
.contact-texte h2 { margin-bottom: 24px; }
.contact-texte > p { max-width: 460px; margin-bottom: 26px; }
.contact-liens { margin-bottom: 28px; }
.contact-liens li { border-top: 1px solid rgba(255,255,255,.12); }
.contact-liens li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-liens a, .contact-liens span {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  color: var(--blanc);
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
}
.contact-liens a:hover { color: var(--cuivre-clair); }
.contact-liens svg { width: 22px; height: 22px; stroke: var(--cuivre-clair); }

.formulaire {
  position: relative;
  padding: 40px 40px 34px;
  background: var(--blanc);
  color: var(--texte);
}
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 24px; }
.champ-large { grid-column: 1 / -1; }
.champ label { display: block; font-size: 14px; font-weight: 600; color: var(--teal); margin-bottom: 8px; }
.champ label span { color: var(--cuivre-fonce); }
.champ input:not([type="checkbox"]), .champ textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--r-bouton);
  background: var(--ivoire);
  color: var(--teal);
  font: 400 16px/1.5 var(--police);
  transition: border-color .2s, background-color .2s;
}
.champ textarea { resize: vertical; min-height: 96px; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--cuivre); background: var(--blanc); box-shadow: 0 0 0 3px rgba(196,124,90,.18); }
.champ-erreur { display: none; margin: 6px 0 0; font-size: 13px; color: #a33b1c; }
.champ.a-erreur .champ-erreur { display: block; }
.champ.a-erreur input, .champ.a-erreur textarea { border-color: #c4553a; }
.champ-case { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.champ-case input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--teal); }
.champ-case label { font-size: 14px; font-weight: 400; color: var(--texte); margin: 0; line-height: 1.55; }
.champ-case label a { color: var(--cuivre-fonce); font-weight: 500; }
.champ-case .champ-erreur { grid-column: 2; }
.formulaire-mention { margin: 16px 0 0; font-size: 14px; text-align: center; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-succes {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
  background: var(--blanc);
  border-left: 4px solid var(--cuivre);
}
.formulaire-succes[hidden] { display: none; }
.formulaire-succes h3 { font-size: 30px; font-weight: 700; margin-bottom: 12px; }

/* ==========================================================
   5.22 Pied de page
   ========================================================== */

.pied { background: var(--encre); color: rgba(255,255,255,.66); font-size: 15px; padding: 72px 0 0; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--cuivre-clair); }
.pied-haut { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; padding-bottom: 48px; }
.pied-marque img { width: 190px; margin-bottom: 30px; }
.pied-marque address { line-height: 1.8; margin-bottom: 28px; }
.pied-espaces { display: flex; flex-wrap: wrap; gap: 10px; }
.pied-colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.pied-titre {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cuivre-clair); margin-bottom: 18px;
}
.pied-colonnes li { margin-bottom: 8px; line-height: 1.5; }
.pied-colonnes li a { display: inline-block; padding: 3px 0; }
.reseaux { display: flex; gap: 10px; margin-top: 26px; }
.reseaux a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-bouton);
  transition: border-color .2s;
}
.reseaux a:hover { border-color: var(--cuivre); }
.reseaux svg { width: 18px; height: 18px; fill: rgba(255,255,255,.8); }
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 40px;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.pied-bas p { margin: 0; }

/* ==========================================================
   Pages internes
   ========================================================== */

.sans-marge { margin-top: 0 !important; }

/* En-tête de page */
.entete-page { padding: 44px 0 92px; }
.ariane { margin-bottom: 56px; }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 13.5px; color: rgba(255,255,255,.62); }
.ariane li + li::before { content: "›"; margin: 0 10px; color: var(--cuivre-clair); }
.ariane a { color: rgba(255,255,255,.78); text-decoration: none; }
.ariane a:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }
.ariane [aria-current="page"] { color: var(--blanc); font-weight: 500; }
.entete-page-grille { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.entete-page h1 { color: var(--blanc); font-size: calc(var(--h1) - 6px); line-height: 1.06; }
.entete-page .filet-anime { margin: 28px 0 28px; }
.entete-page-intro { font-size: 18.5px; max-width: 620px; margin-bottom: 34px; color: rgba(255,255,255,.84); }

.pour-qui-carte {
  padding: 32px 34px;
  border-radius: var(--r-verre);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.pour-qui-carte .sureminence { margin-bottom: 12px; }
.pour-qui-texte { font-size: 19px; font-weight: 400; line-height: 1.5; color: var(--blanc); margin-bottom: 24px; }
.pour-qui-faits { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.pour-qui-faits li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255,255,255,.82); }
.pour-qui-faits .icone { width: 20px; height: 20px; flex: none; stroke: var(--cuivre-clair); }

.sommaire-services ol { display: grid; }
.sommaire-services li + li { border-top: 1px solid rgba(255,255,255,.14); }
.sommaire-services a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  font-size: 17px;
  font-weight: 500;
  color: var(--blanc);
  text-decoration: none;
  transition: color .2s, padding-left .25s var(--ease);
}
.sommaire-services a span { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: var(--cuivre-clair); }
.sommaire-services a:hover { color: var(--cuivre-clair); padding-left: 6px; }

/* Ce qui est inclus */
.inclus-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.inclus-carte {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto 1fr;
  gap: 8px 24px;
  padding: 34px 36px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.inclus-carte:hover { transform: translateY(-3px); border-color: var(--cuivre); box-shadow: 0 12px 28px -18px rgba(0,48,60,.35); }
.inclus-icone {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--beige);
  flex: none;
}
.inclus-carte .inclus-icone { grid-row: span 2; }
.inclus-icone svg { width: 26px; height: 26px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.inclus-carte h3 { font-size: 20px; line-height: 1.3; align-self: center; }
.inclus-carte p { margin: 0; font-size: 16px; color: var(--texte-doux); }

/* Étapes en cycle (chaque mois, démarrage) */
.cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cycle-etape {
  position: relative;
  padding: 30px 28px 28px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
}
.cycle-etape:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 52px;
  right: -21px;
  width: 22px;
  height: 1px;
  background: var(--cuivre);
}
.cycle-num {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanc);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
}
.cycle-etape h3 { font-size: 19px; margin-bottom: 10px; }
.cycle-etape p { margin: 0; font-size: 15.5px; color: var(--texte-doux); }

/* Calendrier fiscal */
.calendrier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 2px solid var(--teal);
  margin-top: 8px;
}
.calendrier li { position: relative; padding: 30px 12px 0 0; }
.calendrier li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cuivre);
  box-shadow: 0 0 0 5px var(--sable-haut);
}
.calendrier-date { display: block; margin-bottom: 8px; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--teal); }
.calendrier li p { margin: 0; font-size: 16px; color: var(--texte-doux); }
.calendrier-note { margin: 40px 0 0; font-size: 14px; color: var(--texte-doux); }

/* Logiciels (page QuickBooks) */
.logiciels { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.logiciels li {
  padding: 8px 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--r-bouton);
  background: var(--blanc);
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}
.certification {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 500px;
  margin-bottom: 28px;
  padding: 16px 20px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--cuivre);
  border-radius: var(--r-bouton);
}
.certification-icone { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--teal); }
.certification-icone svg { width: 22px; height: 22px; fill: none; stroke: var(--cuivre-clair); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.certification p { margin: 0; font-size: 14px; color: var(--texte-doux); line-height: 1.45; }
.certification strong { display: block; font-size: 16px; color: var(--teal); }
.tableau-bord .tb-note { margin: 8px 0 0; font-size: 10.5px; letter-spacing: .02em; color: rgba(255,255,255,.5); }

/* Autres services */

.autre-service, .service-carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  color: var(--texte);
  text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.autre-service:hover, .service-carte:hover { transform: translateY(-3px); border-color: var(--cuivre); box-shadow: 0 12px 28px -18px rgba(0,48,60,.35); }

.autre-service .lien-fleche, .service-carte .lien-fleche { margin-top: auto; }

/* Vue d'ensemble des services */
.services-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-carte { position: relative; overflow: hidden; padding: 32px 32px 24px; }
.service-carte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--cuivre-fonce), var(--cuivre-clair)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
a.service-carte:hover::before { transform: scaleX(1); }
.service-carte-haut { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
.service-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--beige); transition: background .25s var(--ease); }
.service-icone svg { width: 26px; height: 26px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s var(--ease); }
a.service-carte:hover .service-icone { background: var(--teal); }
a.service-carte:hover .service-icone svg { stroke: var(--cuivre-clair); }
.service-num { font-size: 46px; font-weight: 200; line-height: .85; letter-spacing: -.02em; color: rgba(196,124,90,.38); }
.service-carte h2 { font-size: 23px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
.service-carte > p { font-size: 15.5px; line-height: 1.6; color: var(--texte-doux); margin-bottom: 20px; }
.service-carte .liste-crochets { margin: 0 0 24px; font-size: 15px; color: var(--teal); font-weight: 400; }
.service-carte .liste-crochets li { margin-bottom: 8px; }
.service-pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--bordure); font-size: 15px; font-weight: 600; color: var(--cuivre-fonce); }
.service-fleche { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bordure); transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.service-fleche svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a.service-carte:hover .service-fleche { background: var(--cuivre); border-color: var(--cuivre); color: var(--blanc); transform: translateX(4px); }

/* Bande d'appel à l'action */
.cta-bande-grille { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.cta-bande h2 { margin-bottom: 18px; }
.cta-bande-grille > div:first-child p:last-child { max-width: 560px; }
.cta-bande-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-bande-actions .bouton { margin-bottom: 8px; }
.cta-coord { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; color: var(--blanc); font-size: 17px; text-decoration: none; }
.cta-coord:hover { color: var(--cuivre-clair); }
.cta-coord svg { width: 20px; height: 20px; fill: none; stroke: var(--cuivre-clair); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* À propos */
.histoire { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.histoire-photo { margin: 0; }
.histoire-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.histoire-texte h2 { margin-bottom: 14px; }
.histoire-chapeau { font-size: 20px; font-weight: 400; color: var(--teal); line-height: 1.5; margin-bottom: 30px; }
.fondateurs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.fondateurs-duo > div { padding: 24px 26px; background: var(--blanc); border: 1px solid var(--bordure); border-top: 3px solid var(--cuivre); }
.fondateurs-duo h3 { font-size: 20px; }
.fondateur-role { margin: 2px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-fonce); }
.fondateurs-duo p { font-size: 15.5px; color: var(--texte-doux); }
.fondateurs-duo .fondateur-role { font-size: 13px; color: var(--cuivre-fonce); }
.fondateurs-duo .fondateur-apport { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--bordure); font-size: 15px; font-weight: 500; color: var(--teal); }
.histoire-texte > p:last-child { font-size: 16.5px; color: var(--texte-doux); }

.virtus { max-width: 860px; margin: 0 auto 56px; text-align: center; }
.virtus-citation { margin: 0 0 22px; font-size: 46px; font-weight: 300; line-height: 1.2; color: var(--teal); text-wrap: balance; }
.virtus-citation em { font-style: normal; font-weight: 600; }
.virtus-citation strong { font-weight: 700; color: var(--cuivre-fonce); }
.virtus-texte { font-size: 17.5px; color: var(--texte-doux); }
.virtus-texte + .virtus-texte { margin-top: -4px; }
.virtus-signature { max-width: 820px; margin: 56px auto 0; text-align: center; font-size: 30px; font-weight: 300; line-height: 1.35; color: var(--teal); text-wrap: balance; }
.virtus-signature strong { font-weight: 700; color: var(--cuivre-fonce); }
.virtus-signature::before { content: ""; display: block; width: 72px; height: 2px; margin: 0 auto 28px; background: var(--cuivre-degrade); background-size: 200% 100%; }
.mission-vision { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mv-carte { padding: 34px 38px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); }
.mv-carte p:last-child { margin: 0; font-size: 18px; line-height: 1.6; color: var(--teal); }

.equipe-photo { margin: 0 0 32px; }
.equipe-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 40%; }
.equipe-cpa { margin: 40px 0 0; max-width: 760px; font-size: 16px; color: var(--texte-doux); }

.postes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px; }
.poste { padding: 30px 30px 28px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); }
.poste .inclus-icone { margin-bottom: 20px; }
.poste h3 { font-size: 20px; margin-bottom: 10px; }
.poste p { margin: 0; font-size: 15.5px; color: var(--texte-doux); }

/* Contact */
.coordonnees-carte .pour-qui-faits { padding-top: 4px; border-top: 0; gap: 16px; }
.coordonnees-carte .pour-qui-faits li { align-items: flex-start; font-size: 16px; line-height: 1.5; }
.coordonnees-carte .pour-qui-faits .icone { margin-top: 2px; }
.coordonnees-carte a:not(.bouton) { color: var(--blanc); text-decoration: none; }
.coordonnees-carte a:hover { color: var(--cuivre-clair); }
.contact-page-grille { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; }
.contact-page-texte h2 { margin-bottom: 32px; }

.formulaire-clair { border: 1px solid var(--bordure); }

.pied-partout { margin: -14px 0 24px; font-size: 14px; color: var(--cuivre-clair); }
/* Formations */
.pour-qui-carte .bouton { margin-top: 4px; }

.formation-sous-titre { margin: 8px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cuivre-fonce); }

.atelier-niveau { align-self: flex-start; margin-bottom: 16px; padding: 4px 10px; border-radius: 999px; background: var(--teal); color: var(--blanc); font-size: 12px; font-weight: 600; letter-spacing: .08em; }

/* Formation en entreprise */
.poste .liste-crochets { margin-top: 18px; font-size: 15px; color: var(--teal); }
.poste .liste-crochets li { margin-bottom: 6px; }
.poste-vedette { border-color: var(--cuivre); box-shadow: 0 16px 34px -24px rgba(0,48,60,.45); }
.cycle-5 { grid-template-columns: repeat(5, 1fr); margin-bottom: 36px; }
.cycle-3 { grid-template-columns: repeat(3, 1fr); }
.soumission-texte { font-size: 16.5px; color: var(--texte-doux); }
.soumission-points { margin-top: 18px; color: var(--teal); font-weight: 500; }
.champ select {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--r-bouton);
  background: var(--ivoire);
  color: var(--teal);
  font: 400 16px/1.5 var(--police);
}

/* Déclaration d'impôts */

.etapes-action { margin-top: 36px; }
.documents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.document-groupe { padding: 30px 30px 20px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); }
.document-groupe h3 { font-size: 20px; margin-bottom: 16px; }
.document-groupe .liste-crochets { font-size: 15.5px; color: var(--texte); }
/* Formations : catalogue et pages de détail */

.bouton-contour { border: 1px solid var(--teal); color: var(--teal); background: transparent; }
.bouton-contour:hover { filter: none; background: var(--teal); color: var(--blanc); }
.bouton-blanc { background: var(--blanc); color: var(--teal); }

.pour-qui-carte a:not(.bouton) { color: var(--cuivre-clair); }
.faits-formation { padding-top: 4px; border-top: 0; gap: 16px; }
.faits-formation li { align-items: flex-start; font-size: 16px; line-height: 1.45; }
.faits-formation .icone { margin-top: 1px; }

.acquis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.acquis li { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); }
.acquis p { margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.4; color: var(--teal); }
.acquis .inclus-icone { width: 52px; height: 52px; }
.acquis .inclus-icone svg { width: 24px; height: 24px; }

.programme-grille { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.programme-entete { position: sticky; top: calc(var(--entete-h) + 32px); }
.programme-entete h2 { margin-bottom: 18px; }
.programme-entete p:not(.sureminence) { font-size: 16.5px; color: var(--texte-doux); margin-bottom: 28px; }
.modules { display: grid; gap: 12px; }
.modules li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding: 24px 28px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); }
.module-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--teal); color: var(--cuivre-clair); font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.modules h3 { font-size: 19px; margin-bottom: 4px; }
.modules p { margin: 0; font-size: 15.5px; color: var(--texte-doux); }

.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.partie { padding: 36px 38px 26px; background: var(--blanc); border: 1px solid var(--bordure); border-top: 3px solid var(--cuivre); }
.partie-num { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cuivre-fonce); }
.partie h3 { font-size: 23px; margin-bottom: 20px; }
.partie .liste-crochets { font-size: 16px; color: var(--teal); }

/* Formations : choix du mode de paiement (2 pages de paiement Systeme.io, une facture juste pour chacune) */
.paiement-choix { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: center; margin-top: 56px; padding: 36px 40px; background: var(--blanc); border: 1px solid var(--bordure); border-top: 3px solid var(--cuivre); scroll-margin-top: calc(var(--entete-h) + 24px); }
.paiement-choix .sureminence { margin-bottom: 8px; }
.paiement-choix h3 { margin: 0; font-size: 26px; }
.paiement-options { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.paiement-option .bouton { width: 100%; }
.paiement-option p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--teal); }
.paiement-option .paiement-note { margin-top: 6px; font-size: 14.5px; color: var(--texte-doux); }
.bouton-contour-cuivre { border: 1.5px solid var(--cuivre); color: var(--cuivre-fonce); background: transparent; }
.bouton-contour-cuivre:hover { filter: none; background: var(--cuivre-fonce); border-color: var(--cuivre-fonce); color: var(--blanc); }
@media (max-width: 1024px) { .paiement-choix { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 600px) { .paiement-choix { margin-top: 40px; padding: 28px 22px; } .paiement-options { grid-template-columns: 1fr; gap: 28px; } }

/* Ateliers */
.ateliers-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.atelier-carte { display: flex; flex-direction: column; padding: 32px 30px 30px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); }
.atelier-tete { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--bordure); }
.atelier-carte .atelier-niveau { display: inline-block; margin-bottom: 14px; }
.atelier-carte h3 { font-size: 23px; margin-bottom: 6px; }
.atelier-sous-titre { margin: 0; font-size: 15px; color: var(--cuivre-fonce); font-weight: 500; }
.atelier-carte .liste-crochets { font-size: 15.5px; color: var(--teal); margin-bottom: 14px; }
.atelier-pour { font-size: 14.5px; color: var(--texte-doux); margin-bottom: 22px; }
.atelier-pour strong { color: var(--teal); }
.atelier-carte .bouton { margin-top: auto; }

/* Fond cuivre : la matière du logo, réservée aux offres mises en avant */
.fond-cuivre {
  background-color: #7A3E22;
  background-image: linear-gradient(100deg, rgba(19,30,41,.84) 0%, rgba(19,30,41,.7) 50%, rgba(19,30,41,.45) 100%), url(img/cuivre.jpg);
  background-size: cover;
  background-position: center;
  color: rgba(255,255,255,.88);
}
.fond-cuivre h2 { color: var(--blanc); }

/* Forfait implantation */
.forfait { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.forfait-texte h2 { margin-bottom: 18px; }
.forfait-texte > p:not(.sureminence) { font-size: 17px; max-width: 560px; margin-bottom: 32px; }
.forfait-liste { padding: 32px 34px 22px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-carte); background: rgba(255,255,255,.05); }
.fond-teal .liste-crochets, .fond-cuivre .liste-crochets { color: rgba(255,255,255,.92); }
.fond-cuivre .liste-crochets li::before { border-color: var(--cuivre-clair); }
.fond-cuivre .forfait-liste { background: rgba(19,30,41,.5); border-color: rgba(255,255,255,.2); }
.fond-cuivre .cta-coord svg { stroke: var(--cuivre-clair); }
.contact-court { font-size: 16.5px; color: var(--texte-doux); }
.contact-court + .bouton { margin-top: 8px; }
.programme-pour { font-size: 15px; }
.programme-pour strong { color: var(--teal); }

.cycle-seul { margin-bottom: 0 !important; }
.fond-teal .liste-crochets li::before { border-color: var(--cuivre-clair); }
/* Vitrine des formations */
.vitrine { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.produit { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.produit:hover { transform: translateY(-3px); border-color: var(--cuivre); box-shadow: 0 18px 36px -24px rgba(0,48,60,.45); }
.produit-couverture {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  min-height: 176px; padding: 24px 28px;
  background-color: #7A3E22;
  background-image: linear-gradient(110deg, rgba(19,30,41,.8) 0%, rgba(19,30,41,.55) 60%, rgba(19,30,41,.35) 100%), url(img/cuivre.jpg);
  background-size: cover; background-position: center;
  color: var(--blanc);
}
.produit:nth-child(2) .produit-couverture { background-position: 30% 70%; }
.produit:nth-child(3) .produit-couverture { background-position: 80% 20%; }
.produit:nth-child(4) .produit-couverture { background-position: 60% 90%; }
.produit-type { position: absolute; top: 20px; left: 28px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.produit-chiffre { display: flex; align-items: baseline; gap: 10px; font-size: 64px; font-weight: 300; line-height: 1; }
.produit-chiffre small { font-size: 15px; font-weight: 500; letter-spacing: .04em; color: var(--cuivre-clair); }

.produit-corps { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 26px; }
.produit-corps h3 { font-size: 24px; line-height: 1.25; margin-bottom: 8px; }
.produit-promesse { font-size: 16px; color: var(--texte-doux); margin-bottom: 18px; }
.produit-faits { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 24px; }
.produit-faits li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--teal); }
.produit-faits svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--cuivre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.produit-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.produit-actions .bouton { flex: 1 1 auto; }
.entreprise-bande { display: grid; grid-template-columns: 1fr auto; gap: 24px 56px; align-items: center; }
.entreprise-bande h2 { margin-bottom: 12px; }
.entreprise-bande p:not(.sureminence) { margin: 0; max-width: 620px; font-size: 16.5px; color: var(--texte-doux); }

/* Outils */
.comparateur { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.comparateur-texte h2 { margin-bottom: 18px; }
.comparateur-texte > p:not(.sureminence) { font-size: 17px; color: var(--texte-doux); margin-bottom: 22px; }
.comparateur-texte .liste-crochets { margin-bottom: 28px; color: var(--teal); }
.etapes-outil { display: grid; gap: 18px; margin: 6px 0 30px; }
.etapes-outil li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.etapes-outil-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cuivre); color: var(--cuivre-fonce); font-size: 16px; font-weight: 600; }
.etapes-outil strong { display: block; margin: 2px 0 4px; font-size: 17px; color: var(--teal); }
.etapes-outil p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--texte-doux); }
.comparateur-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.comparateur-texte > p.comparateur-note { margin: 16px 0 0; font-size: 14px; color: var(--texte-doux); }

/* À la carte : services payables d'avance */

.produit-chiffre.produit-prix { font-weight: 300; letter-spacing: -.01em; }

.forfait-prix { margin: -6px 0 18px; font-size: 44px; font-weight: 300; line-height: 1; color: var(--blanc); }
.forfait-prix span { font-size: 15px; font-weight: 500; color: var(--cuivre-clair); }
.renvoi-cuivre { display: grid; grid-template-columns: 1fr auto; gap: 24px 56px; align-items: center; }
.renvoi-cuivre h2 { margin-bottom: 12px; }
.renvoi-cuivre p:not(.sureminence) { margin: 0; font-size: 16.5px; max-width: 620px; }
.renvoi-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.aside-prix { margin: 0 0 18px; font-size: 48px; font-weight: 300; line-height: 1; color: var(--blanc); }
.aside-prix span { font-size: 16px; font-weight: 500; color: var(--cuivre-clair); }
.acquis-2 { grid-template-columns: repeat(2, 1fr); }
.fond-cuivre .cta-bande-grille a.lien-clair { color: var(--cuivre-clair); }
/* Services : carte d'orientation et bandeau cliquable */
.service-carte-orientation { background: radial-gradient(120% 90% at 100% 0%, rgba(196,124,90,.26) 0%, rgba(196,124,90,0) 55%), var(--teal); border-color: var(--teal); color: rgba(255,255,255,.82); }
.service-carte-orientation:hover { transform: none; box-shadow: none; border-color: var(--teal); }
.service-carte-orientation .service-icone { margin-bottom: 28px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.service-carte-orientation .service-icone svg { stroke: var(--cuivre-clair); }
.service-carte-orientation h2 { color: var(--blanc); }
.service-carte-orientation > .sureminence-clair { margin-bottom: 10px; color: var(--cuivre-clair); }
.service-carte-orientation > p:not(.sureminence) { color: rgba(255,255,255,.82); margin-bottom: 26px; }
.service-carte-orientation .bouton { margin-top: auto; align-self: flex-start; }

.question-interieur a { color: var(--cuivre-fonce); font-weight: 500; text-underline-offset: 3px; }
/* Services payables d'avance, dans la grille des services */
.services-en-ligne { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--bordure); }
.services-en-ligne-cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.services-separateur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: 24px; }
.services-separateur .sureminence { margin: 0; }
.services-separateur p:not(.sureminence) { margin: 0; font-size: 16px; color: var(--texte-doux); }
.service-carte-payable { overflow: hidden; padding-top: 0; }
.service-carte-payable:hover { transform: translateY(-3px); }
.payable-bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 -32px 26px; padding: 20px 32px;
  background-color: #7A3E22;
  background-image: linear-gradient(100deg, rgba(19,30,41,.82) 0%, rgba(19,30,41,.55) 100%), url(img/cuivre.jpg);
  background-size: cover; background-position: center;
  color: var(--blanc);
}
.payable-etiquette { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.payable-prix { font-size: 34px; font-weight: 300; line-height: 1; white-space: nowrap; }
.payable-prix small { font-size: 14px; font-weight: 500; color: var(--cuivre-clair); }
.payable-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.sommaire-services a em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(235,179,148,.18); color: var(--cuivre-clair); }
/* Formule réservable en ligne, dans la carte de son service */

.service-carte > .lien-fleche { align-self: flex-start; }
article.service-carte { cursor: default; }
.sommaire-plus { display: flex; align-items: center; min-height: 44px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14.5px; font-weight: 600; color: var(--cuivre-clair); text-decoration: none; }
.sommaire-plus:hover { color: var(--blanc); }
.payable-parent { margin: 0 0 6px !important; font-size: 13.5px !important; color: var(--texte-doux); }
.payable-parent a { color: var(--cuivre-fonce); font-weight: 600; text-underline-offset: 3px; }
#en-ligne { scroll-margin-top: calc(var(--entete-h) + 24px); }

/* Pages juridiques */
.a-confirmer { background: repeating-linear-gradient(135deg, rgba(0,48,60,.08) 0 6px, rgba(0,48,60,.03) 6px 12px); outline: 1px dashed rgba(0,48,60,.45); outline-offset: 1px; border-radius: 2px; padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.a-confirmer::before { content: "À confirmer · "; font-weight: 600; font-size: .78em; letter-spacing: .04em; color: var(--teal); }
.juridique-date { margin: -14px 0 0; font-size: 14.5px; color: rgba(255,255,255,.7); }
.responsable-titre { margin: 0 0 18px; font-size: 19px; color: var(--blanc); }
.pour-qui-faits a { color: inherit; text-decoration: none; }
.pour-qui-faits a:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }
.juridique { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 80px; align-items: start; }
.juridique-sommaire { position: sticky; top: calc(var(--entete-h) + 32px); }
.juridique-sommaire ol { counter-reset: jur; border-left: 1px solid var(--bordure); }
.juridique-sommaire li { counter-increment: jur; }
.juridique-sommaire a { display: flex; gap: 12px; padding: 7px 0 7px 18px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14.5px; color: var(--texte); text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease); }
.juridique-sommaire a::before { content: counter(jur, decimal-leading-zero); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--cuivre-fonce); padding-top: 2px; }
.juridique-sommaire a:hover { color: var(--teal); border-left-color: var(--cuivre); }
.juridique-texte { max-width: 780px; }
.juridique-texte article { scroll-margin-top: calc(var(--entete-h) + 24px); }
.juridique-texte article + article { margin-top: 48px; padding-top: 44px; border-top: 1px solid var(--bordure); }
.juridique-texte h2 { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; font-size: 28px; line-height: 1.25; font-weight: 700; color: var(--teal); }
.juridique-texte h2 span { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--cuivre-fonce); }
.juridique-texte p, .juridique-texte li, .juridique-texte dd { font-size: 16.5px; line-height: 1.7; color: var(--texte); }
.juridique-texte p { margin: 0 0 14px; }
.juridique-texte a:not(.bouton) { color: var(--teal); font-weight: 500; text-decoration: underline; text-decoration-color: var(--cuivre); text-underline-offset: 4px; }
.juridique-puces { margin: 0 0 16px; }
.juridique-puces li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.juridique-puces li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--cuivre); }
.juridique-liste { margin: 0 0 18px; }
.juridique-liste dt { margin-top: 16px; font-size: 16.5px; font-weight: 700; color: var(--teal); }
.juridique-liste dd { margin: 4px 0 0; }
.juridique-encadre { margin: 20px 0 0 !important; padding: 18px 22px; background: var(--beige); border-left: 3px solid var(--cuivre); border-radius: 0 var(--r-carte) var(--r-carte) 0; }

.juridique-texte p.juridique-note { margin-top: 22px; font-size: 14.5px; color: var(--texte-doux); }

.juridique-questions { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; }
.juridique-questions h2 { margin-bottom: 10px; }
.juridique-questions p { margin: 0; color: var(--texte-doux); }
/* ---------- Barre fixe mobile ---------- */

.barre-mobile { display: none; }

/* ==========================================================
   Apparition au défilement
   ========================================================== */

.js .revele { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .revele.est-revele { opacity: 1; transform: none; }

/* ==========================================================
   Adaptatif — points de rupture 1440 / 1024 / 768 / 480
   ========================================================== */

@media (max-width: 1439px) {
  :root { --gouttiere: 56px; }
  .nav-liens { gap: 18px; }
  .nav-liens > li > a, .lien-espace { font-size: 14px; }
  .nav, .nav-actions { gap: 16px; }
  .entete-interieur { gap: 20px; }
}

@media (max-width: 1279px) {   /* 2 oct. 2026 : 1360 → 1279, le menu complet s'affiche dès 1 280 px (portables de 14 po), voir la fin du fichier */
  .nav { display: none; }
  .burger { display: block; }
}

@media (max-width: 1200px) {
  
  
  .equipe { grid-template-columns: 1fr; }
  .fondateurs { max-width: 560px; }
  
  .services-cartes { grid-template-columns: repeat(2, 1fr); }
  .secteurs-vedettes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  :root { --h1: 54px; --h2: 40px; --section: 88px; --gouttiere: 40px; --entete-h: 84px; }
  .entete-deux-colonnes, .secteurs, .diag-grille, .outils-grille, .capsules,
  .partenaires, .guide-grille, .article-grille, .faq-grille, .regions-grille, .contact-grille { grid-template-columns: 1fr; gap: 44px; }
  .entete-deux-colonnes { gap: 18px; }
  .volet-interieur { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .volet-interieur > .volet-texte { margin-bottom: 28px; }
  .volet-bouton { grid-template-columns: 56px 1fr 46px; }
  .hero-cartes { grid-template-columns: 1fr; gap: 10px; }
  .hero-contenu { padding-top: 80px; }
  
  
  
  
  
  .outils-grille { margin-top: 72px; }
  .tableau-bord { margin-top: 0; }
  
  
  .formations { grid-template-columns: 1fr; }
  .temoignages { grid-template-columns: 1fr; }
  .temoignages-bloc { margin-top: 0; }
  
  .faq-entete { position: static; }
  .pied-haut { grid-template-columns: 1fr; gap: 48px; }
  
  .entete-page-grille, .cta-bande-grille { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .cycle { grid-template-columns: repeat(2, 1fr); }
  .cycle-etape::after { display: none; }
  .calendrier { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  
  .histoire, .contact-page-grille, .trouver-grille { grid-template-columns: 1fr; gap: 44px; }
  .histoire-photo { max-width: 520px; }
  .postes { grid-template-columns: 1fr; }
  
  .ateliers, .documents { grid-template-columns: 1fr; }
  .cycle-5 { grid-template-columns: repeat(2, 1fr); }
  .cycle-3 { grid-template-columns: 1fr; }
  .acquis { grid-template-columns: 1fr 1fr; }
  .programme-grille, .parties, .ateliers-detail, .pack, .forfait, .a-venir-bloc { grid-template-columns: 1fr; gap: 36px; }
  .programme-entete { position: static; }
  .a-la-carte, .renvoi-cuivre { grid-template-columns: 1fr; }
  .comparateur { grid-template-columns: 1fr; gap: 40px; }
  
  .juridique { grid-template-columns: 1fr; gap: 48px; }
  .juridique-sommaire { position: static; }
  .juridique-sommaire ol { columns: 2; column-gap: 32px; }
  .juridique-sommaire li { break-inside: avoid; }
}

@media (max-width: 768px) {
  :root { --h1: 40px; --h2: 32px; --h3: 22px; --section: 72px; --gouttiere: 20px; --entete-h: 72px; }
  body { font-size: 16px; padding-bottom: 64px; }
  .entete-deux-colonnes h2 { font-size: var(--h2); }
  .titre-bloc { font-size: calc(var(--h2) - 2px); }
  .juridique-sommaire ol { columns: 1; }
  .juridique-sommaire a { min-height: 44px; align-items: center; padding-top: 4px; padding-bottom: 4px; }
  .juridique-texte h2 { font-size: 23px; gap: 12px; }
  .juridique-texte p, .juridique-texte li, .juridique-texte dd { font-size: 16px; }
  
  
  .juridique-questions { flex-direction: column; align-items: stretch; }
  .volet-texte { font-size: 16.5px; }
  .bouton { min-height: 54px; font-size: 15px; }
  .entete-logo img { width: 110px; }
  .annonce p { font-size: 13px; padding: 8px 36px 8px 0; text-align: left; }
  
  .hero { min-height: 0; }
  .hero-voile { background: linear-gradient(180deg, rgba(0,48,60,.8) 0%, rgba(0,48,60,.94) 55%); }
  .hero-contenu { padding-top: 56px; padding-bottom: 28px; gap: 32px; }
  .hero-texte { font-size: 16.5px; }
  .hero-actions .bouton { flex: 1 1 100%; }
  .carte-verre { padding: 14px 18px; min-height: 0; }
  
  .volet-bouton { grid-template-columns: 34px 1fr 40px; gap: 10px; padding: 22px 0; }
  .volet-nom { font-size: 21px; }
  .plus { width: 40px; height: 40px; }
  .inclus { padding: 22px 22px 10px; }
  
  
  
  
  .diag-choix label { flex: 1 1 100%; }
  .diag-resultat { padding: 26px 22px 28px; }
  .diag-resultat h3 { font-size: 24px; }
  .diag-resultat .bouton { white-space: normal; width: 100%; }
  
  .tableau-bord { height: 400px; }
  .tb-mois { left: 16px; right: 16px; width: auto; top: 16px; padding: 18px 18px 20px; }
  .tb-titre { font-size: 20px; }
  .tb-badge { font-size: 11px; padding: 5px 10px; }
  .tb-graphique { left: auto; right: 16px; top: 130px; width: 60%; }
  .tb-etats { left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; }
  .tb-etats p { padding: 0 12px; font-size: 15px; }
  .tb-etats span { font-size: 11px; }
  
  
  
  
  
  
  .techniciennes { grid-template-columns: 1fr 1fr; gap: 16px; }
  .techniciennes li:last-child { grid-column: 1 / -1; max-width: calc(50% - 8px); }
  .formation { padding: 36px 24px 40px; min-height: 0; }
  .formation h2 { font-size: 27px; }
  
  
  .guide-champ { flex-direction: column; }
  
  .question-bouton { font-size: 17px; gap: 14px; grid-template-columns: 1fr 40px; }
  .question-interieur { padding-right: 0; }
  
  
  
  
  
  
  
  .formulaire { padding: 30px 22px; }
  .champs { grid-template-columns: 1fr; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .bouton { white-space: normal; }
  .entete-page { padding: 28px 0 64px; }
  .ariane { margin-bottom: 36px; }
  .pour-qui-carte { padding: 26px 24px; }
  .inclus-grille, .services-cartes, .cycle { grid-template-columns: 1fr; }
  .inclus-carte { grid-template-columns: 1fr; gap: 8px; padding: 26px 22px; }
  .inclus-carte .inclus-icone { grid-row: auto; margin-bottom: 8px; }
  .inclus-icone { width: 48px; height: 48px; }
  .inclus-icone svg { width: 22px; height: 22px; }
  .service-carte { padding: 28px 24px 22px; }
  .service-carte h2 { font-size: 22px; }
  .service-carte-haut { margin-bottom: 22px; }
  .service-num { font-size: 40px; }
  .services-en-ligne { margin-top: 48px; padding-top: 32px; }
  .services-en-ligne-cartes { grid-template-columns: 1fr; }
  .secteurs-vedettes { grid-template-columns: 1fr; gap: 14px; }
  .secteur { padding: 26px 22px 20px; }
  .secteurs-autres { grid-template-columns: 1fr; }
  .fond-teal.cta-photo { background-image: linear-gradient(180deg, rgba(0,48,60,.95) 0%, rgba(0,48,60,.88) 100%), url(img/salle-reunion-1100.jpg); }
  .secteurs-autres .lien-fleche { grid-column: 1; grid-row: auto; }
  .payable-bandeau { margin: 0 -24px 22px; padding: 16px 24px; }
  
  .payable-prix { font-size: 28px; }
  .calendrier { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--teal); gap: 28px; margin-left: 7px; }
  .calendrier li { padding: 0 0 0 26px; }
  .calendrier li::before { top: 6px; left: -8px; }
  .fondateurs-duo, .mission-vision { grid-template-columns: 1fr; }
  .cycle-5 { grid-template-columns: 1fr; }
  .acquis { grid-template-columns: 1fr; }
  .vitrine { grid-template-columns: 1fr; }
  
  .offres-verre, .acquis-2 { grid-template-columns: 1fr; }
  .forfait-prix, .aside-prix { font-size: 36px; }
  .produit-couverture { min-height: 140px; padding: 20px 22px; }
  .produit-chiffre { font-size: 48px; }
  .produit-corps { padding: 24px 22px; }
  .entreprise-bande { grid-template-columns: 1fr; }
  .modules li { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px; }
  .module-num { width: 40px; height: 40px; font-size: 14px; }
  .partie { padding: 28px 22px 18px; }
  
  .forfait-liste { padding: 26px 22px 16px; }
  
  
  .virtus-citation { font-size: 32px; }
  .virtus-signature { font-size: 22px; margin-top: 40px; }
  .mv-carte { padding: 26px 24px; }
  .equipe-photo img { aspect-ratio: 4 / 3; }
  
  

  .barre-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--blanc);
    border-top: 1px solid var(--bordure);
    box-shadow: 0 -8px 24px -16px rgba(0,48,60,.3);
  }
  .barre-mobile a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    font-size: 15px;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
  }
  .barre-mobile svg { width: 20px; height: 20px; }
  .barre-mobile-rdv { background: var(--teal); color: var(--blanc) !important; }
  .barre-mobile-rdv svg { stroke: var(--cuivre-clair); }
}

@media (max-width: 480px) {
  .pied-colonnes { grid-template-columns: 1fr; }
  
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .revele { opacity: 1; transform: none; }
  
}

/* Ressources à télécharger : guides et trousse (prix toujours affichés avant taxes) */
.mention-taxes { font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--cuivre-fonce); white-space: nowrap; vertical-align: middle; }
.vitrine-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }

.produit-couverture.ressource { min-height: 214px; overflow: hidden; }
.ressource .produit-chiffre { position: relative; z-index: 1; font-size: 46px; white-space: nowrap; }
.ressource .produit-chiffre small { white-space: nowrap; }

.ressource-miniature { position: absolute; right: 24px; bottom: -30px; width: 124px; height: auto; border: 3px solid #fff; border-radius: 4px; background: #fff; box-shadow: 0 16px 30px -10px rgba(0,0,0,.7); transform: rotate(4deg); }
.note-taxes { margin: 20px 0 0; font-size: 14.5px; color: var(--texte-doux); }
/* Rappel discret d'une ressource sur les pages de services */
.ressource-bande { display: grid; grid-template-columns: 104px 1fr auto; gap: 30px; align-items: center; padding: 26px 32px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); }
.ressource-bande img { width: 104px; height: auto; border-radius: 3px; box-shadow: 0 12px 24px -14px rgba(0,48,60,.6); transform: rotate(-3deg); }
.ressource-bande .sureminence { margin-bottom: 4px; }
.ressource-bande h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.3; }
.ressource-bande p:not(.sureminence):not(.ressource-prix) { margin: 0; font-size: 15.5px; color: var(--texte-doux); }
.ressource-bande-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ressource-prix { margin: 0; font-size: 30px; font-weight: 300; line-height: 1; color: var(--teal); white-space: nowrap; }
.ressource-prix small { font-size: 13px; font-weight: 500; color: var(--cuivre-fonce); }
/* Page de produit : aperçu */
.apercu-produit { margin: 0; border-radius: var(--r-carte); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,48,60,.6); }
.apercu-produit img { display: block; width: 100%; height: auto; }
.apercu-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.apercu-pages figure { margin: 0; }
.apercu-pages img { display: block; width: 100%; height: auto; border: 1px solid var(--bordure); border-radius: 4px; background: #fff; box-shadow: 0 18px 36px -26px rgba(0,48,60,.55); }
.apercu-pages figcaption { margin-top: 12px; font-size: 14.5px; color: var(--texte-doux); text-align: center; }
.guide-succes a { color: var(--cuivre-clair); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 1024px) {
  .vitrine-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .vitrine-3, .apercu-pages { grid-template-columns: 1fr; }
  .ressource-bande { grid-template-columns: 76px 1fr; gap: 18px; padding: 22px; }
  .ressource-bande img { width: 76px; }
  .ressource-bande-actions { grid-column: 1 / -1; }
  .ressource-miniature { width: 96px; }
  
}.apercu-excel { display: grid; gap: 28px; margin-top: 32px; }
.apercu-excel figure { margin: 0; }
.apercu-excel img { display: block; width: 100%; height: auto; border: 1px solid var(--bordure); border-radius: 6px; background: #fff; box-shadow: 0 18px 36px -26px rgba(0,48,60,.55); }
.apercu-excel figure:last-child img { max-width: 760px; margin: 0 auto; }
.apercu-excel figcaption { margin-top: 12px; font-size: 14.5px; color: var(--texte-doux); text-align: center; }.note-taxes a { color: var(--cuivre-fonce); font-weight: 600; text-underline-offset: 3px; }

/* Boutique : offre vedette, tableau comparatif */
.boutique-vedette { display: grid; grid-template-columns: 7fr 6fr; gap: 56px; align-items: center; }
.boutique-vedette figure { margin: 0; border-radius: var(--r-carte); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,48,60,.6); }
.boutique-vedette figure img { display: block; width: 100%; height: auto; }
.badge-offre { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px; background: var(--teal); color: var(--cuivre-clair); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.boutique-vedette h2 { margin-bottom: 14px; }
.boutique-vedette > div > p:not(.badge-offre):not(.prix-vedette) { font-size: 16.5px; color: var(--texte-doux); }
.boutique-vedette .liste-crochets { margin: 18px 0 24px; color: var(--teal); }
.prix-vedette { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 22px; }
.prix-vedette s { font-size: 20px; color: var(--texte-doux); }
.prix-vedette strong { font-size: 52px; font-weight: 300; line-height: 1; color: var(--teal); }
.prix-vedette span { font-size: 15px; font-weight: 500; color: var(--cuivre-fonce); }
.prix-vedette em { flex-basis: 100%; font-style: normal; font-size: 14.5px; font-weight: 600; color: var(--cuivre-fonce); }
.prix-barre { display: block; margin-top: 6px; font-size: 14px; color: var(--cuivre-clair); }
.prix-barre s { color: rgba(255,255,255,.6); }
.tableau-defile { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--r-carte); background: var(--blanc); }
.tableau-offres { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.tableau-offres th, .tableau-offres td { padding: 14px 18px; border-bottom: 1px solid var(--bordure); text-align: center; }
.tableau-offres thead th { font-size: 14px; font-weight: 600; color: var(--teal); background: var(--sable-haut, #F7F1EC); }
.tableau-offres th[scope="row"] { text-align: left; font-weight: 500; color: var(--texte); }
.tableau-offres .vedette { background: rgba(196,124,90,.08); }
.tableau-offres thead .vedette { background: var(--teal); color: var(--blanc); }
.tableau-offres tbody tr:last-child th, .tableau-offres tbody tr:last-child td { border-bottom: 0; font-weight: 600; color: var(--teal); }
.tableau-offres .oui { color: var(--cuivre-fonce); font-weight: 700; }
.tableau-offres .non { color: #B9B1A9; }
.tableau-offres small { display: block; font-size: 12px; font-weight: 500; color: var(--cuivre-fonce); }
.acquis-confiance { margin-top: 28px; }
@media (max-width: 1024px) { .boutique-vedette { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 768px) { .prix-vedette strong { font-size: 42px; } }#a-la-carte .ressource-bande { margin: 48px 0 56px; }

/* Menus déroulants (ordinateur) et sous-listes (téléphone) */
.nav-liens > li { position: relative; }
.nav-chevron { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .6; transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); }
.a-sous-menu:hover .nav-chevron, .a-sous-menu:focus-within .nav-chevron { transform: translateY(1px) rotate(225deg); }
.sous-menu { position: absolute; top: 100%; left: -28px; z-index: 110; padding-top: 30px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.a-sous-menu:hover > .sous-menu, .a-sous-menu:focus-within > .sous-menu { opacity: 1; visibility: visible; transform: none; }
.sous-menu-boite { display: grid; grid-template-columns: 1fr 250px; width: 700px; background: var(--blanc); border: 1px solid var(--bordure); border-top: 2px solid var(--cuivre); border-radius: 0 0 14px 14px; box-shadow: 0 30px 60px -30px rgba(0,48,60,.45); overflow: hidden; }
.sous-menu-liens { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 4px; padding: 18px; }
.sous-menu a { display: block; padding: 12px 14px; border-radius: 8px; text-decoration: none; transition: background .2s; }
.sous-menu a:hover, .sous-menu a:focus-visible { background: var(--sable-haut); }
.sous-menu a strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--teal); white-space: normal; }
.sous-menu a span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--texte-doux); white-space: normal; }
.sous-menu-pub { display: flex; flex-direction: column; gap: 4px; padding: 22px 18px; background: var(--sable-haut); }
.sous-menu-pub a:hover, .sous-menu-pub a:focus-visible { background: var(--blanc); }
.sous-menu-sur { margin: 0 14px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-fonce); }
.sous-menu-vedette { background: var(--teal); }
.sous-menu-vedette .sous-menu-sur { color: var(--cuivre-clair); }
.sous-menu-vedette a strong { font-size: 18px; color: var(--blanc); }
.sous-menu-vedette a span { color: rgba(255,255,255,.78); }
.sous-menu-vedette a:hover, .sous-menu-vedette a:focus-visible { background: rgba(255,255,255,.08); }
.menu-mobile .mm-groupe summary { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 24px; font-weight: 300; color: var(--blanc); cursor: pointer; list-style: none; }
.menu-mobile .mm-groupe summary::-webkit-details-marker { display: none; }
.menu-mobile .mm-groupe summary::after { content: "+"; font-size: 26px; font-weight: 300; color: var(--cuivre-clair); }
.menu-mobile .mm-groupe details[open] > summary::after { content: "−"; }
.menu-mobile .mm-groupe ul { padding: 0 0 14px 14px; }
.menu-mobile .mm-groupe li { border: 0; }
.menu-mobile .mm-groupe ul a { padding: 7px 0; font-size: 17px; font-weight: 400; color: rgba(255,255,255,.85); }
@media (prefers-reduced-motion: reduce) { .sous-menu { transition: none; } }
/* Accueil : trois façons de commencer */

/* ---------- Conditions de vente sous le bouton d'achat ---------- */
.cta-conditions { max-width: 360px; margin: -6px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.85); }
.cta-conditions a { color: var(--blanc); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.fond-cuivre .a-confirmer, .fond-teal .a-confirmer { background: rgba(255,255,255,.1); outline-color: rgba(255,255,255,.55); }
.fond-cuivre .a-confirmer::before, .fond-teal .a-confirmer::before { color: var(--blanc); }

/* ---------- Guide gratuit : consentement facultatif (LCAP) ---------- */
.guide-case { display: flex; align-items: flex-start; gap: 10px; max-width: 580px; margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
.guide-case input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cuivre); }
.guide-case label { cursor: pointer; }
.guide-champ[hidden], .guide-case[hidden] { display: none; }

/* ==========================================================
   Signature visuelle par famille de pages (en-têtes)
   Services : photo à droite + grand numéro · Cabinet : pleine photo
   Formations et outils : bleu nuit quadrillé + fenêtre d'écran
   Boutique : fond sable + couvertures · Légal : document sobre
   ========================================================== */

/* --- Photo (services, cabinet) --- */
.entete-avec-photo { position: relative; overflow: hidden; isolation: isolate; }
.entete-avec-photo > .enveloppe { position: relative; z-index: 1; }
.entete-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; z-index: 0; }
.entete-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.entete-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #00292F 0%, rgba(0,41,47,.78) 22%, rgba(0,41,47,.38) 60%, rgba(0,41,47,.3) 100%); }
.entete-photo[data-numero]::before {
  content: attr(data-numero); position: absolute; z-index: 1; top: 18px; right: 4%;
  font-size: 210px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(235,179,148,.75);
}
.entete-photo.pleine { width: 100%; }
.entete-photo.pleine::after { background: linear-gradient(90deg, rgba(0,41,47,.97) 0%, rgba(0,41,47,.9) 38%, rgba(0,41,47,.5) 70%, rgba(0,41,47,.35) 100%); }
.entete-avec-photo .pour-qui-carte { background: rgba(0,39,47,.42); border-color: rgba(255,255,255,.22); }

/* --- Formations et outils : bleu nuit, papier quadrillé, fenêtre d'écran --- */
.entete-ecran {
  background-color: var(--encre);
  background-image:
    radial-gradient(80% 90% at 88% 20%, rgba(196,124,90,.2) 0%, rgba(196,124,90,0) 60%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}
.entete-ecran .pour-qui-carte { position: relative; padding-top: 70px; background: rgba(255,255,255,.05); border-color: rgba(235,179,148,.35); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.entete-ecran .pour-qui-carte::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12); border-radius: var(--r-verre) var(--r-verre) 0 0;
  background:
    radial-gradient(circle, #EBB394 0 5px, transparent 5.5px) 18px 50% / 12px 12px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.35) 0 5px, transparent 5.5px) 38px 50% / 12px 12px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.35) 0 5px, transparent 5.5px) 58px 50% / 12px 12px no-repeat,
    rgba(255,255,255,.06);
}
.entete-ecran .pour-qui-carte::after {
  content: attr(data-fenetre); position: absolute; top: 0; left: 84px; right: 18px; height: 40px;
  display: flex; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Boutique et légal : en-tête clair --- */
.entete-clair { background: linear-gradient(180deg, var(--ivoire) 0%, var(--sable-haut) 45%, var(--sable-bas) 100%); color: var(--texte); border-bottom: 1px solid var(--bordure); }
.entete-clair h1 { color: var(--teal); }
.entete-clair .sureminence-clair { color: var(--cuivre-fonce); }
.entete-clair .entete-page-intro { color: var(--texte); }
.entete-clair .ariane ol { color: var(--texte-doux); }
.entete-clair .ariane a { color: var(--texte-doux); }
.entete-clair .ariane a:hover, .entete-clair .ariane [aria-current="page"] { color: var(--teal); }
.entete-clair .ariane li + li::before { color: var(--cuivre); }
.entete-clair .bouton-verre { background: transparent; border-color: rgba(0,48,60,.3); color: var(--teal); -webkit-backdrop-filter: none; backdrop-filter: none; }
.entete-clair .bouton-verre:hover { background: rgba(0,48,60,.06); }
.entete-clair .pour-qui-carte { background: var(--blanc); border-color: var(--bordure); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 50px -30px rgba(0,48,60,.45); }
.entete-clair .pour-qui-texte, .entete-clair .aside-prix { color: var(--teal); }
.entete-clair .aside-prix span, .entete-clair .prix-barre { color: var(--cuivre-fonce); }
.entete-clair .prix-barre s { color: var(--texte-doux); }
.entete-clair .pour-qui-faits { border-top-color: var(--bordure); }
.entete-clair .pour-qui-faits li { color: var(--texte); }
.entete-clair .pour-qui-faits .icone { stroke: var(--cuivre-fonce); }
.entete-clair .pour-qui-faits a { color: var(--teal); }

/* Boutique : couvertures des produits */
.entete-vitrine { display: grid; gap: 0; }
.vitrine-couvertures { position: relative; height: 330px; margin-bottom: -70px; z-index: 0; }
.vitrine-couvertures img {
  position: absolute; bottom: 0; left: 50%; width: 200px; height: auto; aspect-ratio: 640 / 828;
  border-radius: 3px; box-shadow: 0 28px 44px -22px rgba(0,30,38,.7), 0 0 0 1px rgba(0,0,0,.05);
  transform: translateX(-50%) rotate(-2deg);
}
.vitrine-couvertures.trio img:nth-child(1) { transform: translateX(-118%) translateY(-8px) rotate(-9deg); width: 176px; }
.vitrine-couvertures.trio img:nth-child(2) { transform: translateX(18%) translateY(-8px) rotate(8deg); width: 176px; }
.vitrine-couvertures.trio img:nth-child(3) { transform: translateX(-50%) rotate(0deg); }
.entete-vitrine .pour-qui-carte { position: relative; z-index: 1; }

/* Légal : document sobre */
.entete-document { padding-bottom: 64px; }
.entete-document h1 { font-size: calc(var(--h1) - 20px); }
.entete-document .ariane { margin-bottom: 40px; }

@media (max-width: 1024px) {
  .entete-photo { width: 100%; }
  .entete-photo::after, .entete-photo.pleine::after { background: linear-gradient(180deg, rgba(0,41,47,.93) 0%, rgba(0,41,47,.86) 55%, rgba(0,41,47,.72) 100%); }
  .entete-photo[data-numero]::before { font-size: 130px; top: auto; bottom: 12px; right: 16px; -webkit-text-stroke-color: rgba(235,179,148,.4); }
  .vitrine-couvertures { height: 260px; margin-bottom: -50px; }
  .vitrine-couvertures img { width: 150px; }
  .vitrine-couvertures.trio img:nth-child(1), .vitrine-couvertures.trio img:nth-child(2) { width: 136px; }
}
@media (max-width: 480px) {
  .vitrine-couvertures { height: 220px; }
  .vitrine-couvertures img { width: 128px; }
  .vitrine-couvertures.trio img:nth-child(1), .vitrine-couvertures.trio img:nth-child(2) { width: 112px; }
  .entete-document h1 { font-size: 36px; }
}
/* Ajustements des en-têtes par famille */
.entete-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
.entete-photo::after { background: linear-gradient(90deg, rgba(0,41,47,.55) 0%, rgba(0,41,47,.35) 60%, rgba(0,41,47,.3) 100%); }
.entete-photo.pleine { -webkit-mask-image: none; mask-image: none; }

.entete-ecran .entete-page-grille { align-items: center; }
.entete-clair .juridique-date { color: var(--texte-doux); }
.vitrine-couvertures { height: 370px; margin-bottom: -44px; }
.vitrine-couvertures img { width: 232px; }
.vitrine-couvertures.trio img:nth-child(1), .vitrine-couvertures.trio img:nth-child(2) { width: 200px; }
@media (max-width: 1024px) {
  .entete-photo { -webkit-mask-image: none; mask-image: none; }
  .entete-photo::after { background: linear-gradient(180deg, rgba(0,41,47,.93) 0%, rgba(0,41,47,.86) 55%, rgba(0,41,47,.72) 100%); }
  .vitrine-couvertures { height: 280px; margin-bottom: -36px; }
  .vitrine-couvertures img { width: 172px; }
  .vitrine-couvertures.trio img:nth-child(1), .vitrine-couvertures.trio img:nth-child(2) { width: 150px; }
}
@media (max-width: 480px) {
  .vitrine-couvertures { height: 230px; }
  .vitrine-couvertures img { width: 142px; }
  .vitrine-couvertures.trio img:nth-child(1), .vitrine-couvertures.trio img:nth-child(2) { width: 120px; }
}
.entete-photo[data-numero]::before { font-size: 150px; top: 14px; right: 2.5%; }
@media (max-width: 1024px) { .entete-photo[data-numero]::before { font-size: 110px; top: auto; bottom: 10px; right: 16px; } }
@media (max-width: 1024px) { .entete-photo[data-numero]::before { display: none; } }

/* --- Outils : en-tête clair « logiciel », papier pointillé et courbe de résultats --- */
.entete-outil {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: #F2F7F6;
  background-image: radial-gradient(rgba(0,48,60,.12) 1px, transparent 1.6px), linear-gradient(180deg, #F7FAF9 0%, #E4EFEC 100%);
  background-size: 22px 22px, auto;
}
.entete-outil > .enveloppe { position: relative; z-index: 1; }
.entete-courbe { position: absolute; right: 0; bottom: 0; z-index: 0; width: 64%; height: 78%; }
.entete-outil .pour-qui-carte { position: relative; padding-top: 70px; box-shadow: 0 30px 60px -32px rgba(0,48,60,.5); }
.entete-outil .pour-qui-carte::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40px;
  border-bottom: 1px solid var(--bordure); border-radius: var(--r-verre) var(--r-verre) 0 0;
  background:
    radial-gradient(circle, var(--cuivre) 0 5px, transparent 5.5px) 18px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #D5DDDD 0 5px, transparent 5.5px) 38px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #D5DDDD 0 5px, transparent 5.5px) 58px 50% / 12px 12px no-repeat,
    #F4F7F7;
}
.entete-outil .pour-qui-carte::after {
  content: attr(data-fenetre); position: absolute; top: 0; left: 84px; right: 18px; height: 40px;
  display: flex; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--texte-doux);
}
.entete-clair .sommaire-plus { border-top-color: var(--bordure); color: var(--cuivre-fonce); }
.entete-clair .sommaire-plus:hover { color: var(--teal); }
@media (max-width: 1024px) { .entete-courbe { width: 100%; height: 45%; opacity: .7; } }

/* --- Cartes : chaque famille garde sa signature --- */
/* Formations : couverture bleu nuit quadrillée, grand chiffre en contour cuivré */

/* Boutique : couverture sable, le vrai produit en vedette */
.vitrine-boutique .produit-couverture.ressource { background: linear-gradient(160deg, var(--beige) 0%, var(--sable-bas) 100%); color: var(--teal); min-height: 232px; border-bottom: 1px solid var(--bordure); }
.vitrine-boutique .produit-type { background: rgba(255,255,255,.75); border-color: var(--bordure); color: var(--cuivre-fonce); }
.vitrine-boutique .produit-chiffre small { color: var(--cuivre-fonce); }
.vitrine-boutique .ressource-miniature { width: 134px; right: 26px; bottom: -14px; border: 0; box-shadow: 0 24px 34px -14px rgba(0,30,38,.55); transform: rotate(5deg); transition: transform .3s var(--ease); }
.vitrine-boutique .produit:hover .ressource-miniature { transform: rotate(1deg) translateY(-8px); }

/* Services : réservation en ligne aux couleurs des services (teal et monogramme) */
.payable-bandeau {
  background-color: var(--teal);
  background-image: url(img/motif-virtus.png), radial-gradient(120% 140% at 0% 0%, var(--teal-eclat) 0%, var(--teal) 55%, var(--teal-profond) 100%);
  background-size: 720px auto, auto; background-repeat: repeat, no-repeat; background-position: left top, center;
}
@media (prefers-reduced-motion: reduce) { .vitrine-boutique .ressource-miniature { transition: none; } }
.entete-clair .pour-qui-carte a:not(.bouton) { color: var(--cuivre-fonce); }
.entete-clair .pour-qui-carte a:not(.bouton):hover { color: var(--teal); }

/* ==========================================================
   Schémas d'étapes : icônes reliées par une ligne cuivrée
   qui se dessine à l'arrivée (repos = tout visible)
   ========================================================== */
.cycle { --n: 4; --g: 28px; position: relative; gap: 40px var(--g); }
.cycle-3 { --n: 3; }
.cycle-5 { --n: 5; }
.cycle::before {
  content: ""; position: absolute; z-index: 0; top: 40px; height: 2px;
  left: calc((100% - (var(--n) - 1) * var(--g)) / (2 * var(--n)));
  right: calc((100% - (var(--n) - 1) * var(--g)) / (2 * var(--n)));
  background: var(--cuivre-degrade); transform-origin: left center;
  transition: transform 1.5s var(--ease) .15s;
}
.cycle-etape { z-index: 1; padding: 0 6px; background: none; border: 0; border-radius: 0; text-align: center; }
.cycle-etape:not(:last-child)::after {
  top: 35px; right: calc(var(--g) / -2 - 5px); width: 10px; height: 10px; background: none;
  border-top: 2px solid var(--cuivre); border-right: 2px solid var(--cuivre); transform: rotate(45deg);
}
.cycle-icone {
  position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 22px;
  border-radius: 50%; background: var(--blanc); border: 1px solid var(--bordure);
  box-shadow: 0 16px 30px -18px rgba(0,48,60,.55);
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.cycle-icone svg { width: 34px; height: 34px; fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cycle-icone .cycle-num { position: absolute; top: -4px; right: -8px; width: 30px; height: 30px; margin: 0; font-size: 11.5px; background: var(--cuivre-fonce); box-shadow: 0 0 0 3px var(--blanc); }
.cycle-etape:hover .cycle-icone { transform: translateY(-4px); border-color: var(--cuivre); }
.cycle-etape h3 { font-size: 19px; }
.cycle-etape p { max-width: 280px; margin-inline: auto; }

/* Animation : la ligne se trace, puis les icônes apparaissent l'une après l'autre */
.js .cycle.revele:not(.est-revele)::before { transform: scaleX(0); }
@keyframes icone-pop { from { transform: scale(.78); } 60% { transform: scale(1.06); } to { transform: none; } }
.js .cycle.est-revele .cycle-icone { animation: icone-pop .6s var(--ease) backwards; }
.js .cycle.est-revele .cycle-etape:nth-child(2) .cycle-icone { animation-delay: .3s; }
.js .cycle.est-revele .cycle-etape:nth-child(3) .cycle-icone { animation-delay: .6s; }
.js .cycle.est-revele .cycle-etape:nth-child(4) .cycle-icone { animation-delay: .9s; }
.js .cycle.est-revele .cycle-etape:nth-child(5) .cycle-icone { animation-delay: 1.2s; }

/* Tenue de livres : la boucle du mois */
.cycle-retour { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 36px auto 0; padding: 10px 20px; border: 1px dashed rgba(165,96,63,.55); border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--cuivre-fonce); }
.cycle-retour svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .8s var(--ease); }
.cycle-retour:hover svg { transform: rotate(-360deg); }

/* Calendrier fiscal : la ligne du temps se trace, les points s'allument */
.calendrier { position: relative; border-top: 0; }
.calendrier::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--teal); transform-origin: left center; transition: transform 1.5s var(--ease) .1s; }
.js .calendrier.revele:not(.est-revele)::before { transform: scaleX(0); }
.js .calendrier.est-revele li::before { animation: icone-pop .5s var(--ease) backwards; }
.js .calendrier.est-revele li:nth-child(2)::before { animation-delay: .35s; }
.js .calendrier.est-revele li:nth-child(3)::before { animation-delay: .7s; }
.js .calendrier.est-revele li:nth-child(4)::before { animation-delay: 1.05s; }

@media (max-width: 1024px) {
  .cycle, .cycle-3, .cycle-5 { grid-template-columns: 1fr; gap: 28px; }
  .cycle::before { display: none; }
  .cycle-etape { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; padding: 0; text-align: left; }
  .cycle-etape:not(:last-child)::before { content: ""; position: absolute; z-index: -1; left: 31px; top: 32px; bottom: -60px; width: 2px; background: linear-gradient(180deg, var(--cuivre), var(--cuivre-clair)); }
  .cycle-etape:not(:last-child)::after { display: none; }
  .cycle-icone { grid-row: 1 / span 2; width: 64px; height: 64px; margin: 0; }
  .cycle-icone svg { width: 28px; height: 28px; }
  .cycle-icone .cycle-num { width: 26px; height: 26px; font-size: 10.5px; right: -6px; }
  .cycle-etape h3 { align-self: end; margin: 8px 0 6px; }
  .cycle-etape p { max-width: none; margin: 0; }
}

/* ==========================================================
   En-têtes : un peu de vie à l'arrivée (tout reste lisible)
   ========================================================== */
@keyframes photo-entree { from { transform: scale(1.08); } to { transform: none; } }
.entete-photo img { animation: photo-entree 2.4s var(--ease) both; }
@keyframes numero-entree { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.entete-photo[data-numero]::before { animation: numero-entree 1.2s .5s var(--ease) both; }
@keyframes courbe-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.entete-courbe { animation: courbe-trace 2.2s .3s var(--ease) both; }
@keyframes eventail { from { transform: translateX(-50%) rotate(0deg); } }
.vitrine-couvertures.trio img:nth-child(1), .vitrine-couvertures.trio img:nth-child(2) { animation: eventail 1.1s .35s var(--ease) both; }
@keyframes couverture-entree { from { transform: translateX(-50%) translateY(22px) rotate(-7deg); } }
.vitrine-couvertures:not(.trio) img { animation: couverture-entree 1.1s .25s var(--ease) both; }
@keyframes fenetre-entree { from { transform: translateY(22px); } }
.entete-ecran .pour-qui-carte, .entete-outil .pour-qui-carte { animation: fenetre-entree 1s .2s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .entete-photo img, .entete-photo[data-numero]::before, .entete-courbe, .vitrine-couvertures img,
  .entete-ecran .pour-qui-carte, .entete-outil .pour-qui-carte, .cycle-icone, .calendrier li::before { animation: none !important; }
  .cycle::before, .calendrier::before, .cycle-retour svg { transition: none; }
}

/* ==========================================================
   Page FAQ : centre d'aide avec recherche instantanée
   ========================================================== */
.entete-aide { position: relative; overflow: hidden; isolation: isolate; }
.entete-aide > .enveloppe { position: relative; z-index: 1; }
.entete-aide::after {
  content: "?"; position: absolute; z-index: 0; right: 2%; top: -70px;
  font-size: 520px; font-weight: 700; line-height: 1; color: transparent;
  -webkit-text-stroke: 2px rgba(196,124,90,.32); pointer-events: none;
  animation: flotte-aide 7s ease-in-out infinite;
}
@keyframes flotte-aide { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
.faq-recherche { position: relative; max-width: 560px; }
.faq-recherche svg { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.faq-recherche input {
  width: 100%; height: 58px; padding: 0 20px 0 52px; border: 1px solid var(--bordure); border-radius: var(--r-bouton);
  background: var(--blanc); font: 400 16.5px/1 var(--police); color: var(--teal);
  box-shadow: 0 18px 36px -26px rgba(0,48,60,.5); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-recherche input::placeholder { color: var(--texte-doux); }
.faq-recherche input:focus { outline: none; border-color: var(--cuivre); box-shadow: 0 0 0 4px rgba(196,124,90,.18), 0 18px 36px -26px rgba(0,48,60,.5); }
.faq-compte { min-height: 1.5em; margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--cuivre-fonce); }
.faq-page { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; align-items: start; }
.faq-themes { position: sticky; top: calc(var(--entete-h) + 32px); }
.faq-themes ul { display: grid; gap: 4px; }
.faq-themes a {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--r-bouton); font-size: 15px; font-weight: 500; color: var(--texte); text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.faq-themes a svg { width: 20px; height: 20px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faq-themes b { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--beige); font-size: 12px; font-weight: 600; color: var(--cuivre-fonce); text-align: center; font-variant-numeric: tabular-nums; }
.faq-themes a:hover, .faq-themes a.est-actif { background: var(--blanc); color: var(--teal); box-shadow: inset 3px 0 0 var(--cuivre); }
.faq-themes a.est-vide { opacity: .4; }
.faq-groupes { display: grid; gap: 64px; }
.faq-groupe { scroll-margin-top: calc(var(--entete-h) + 24px); }
.faq-groupe h2 { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; font-size: 30px; line-height: 1.2; }
.faq-groupe-icone { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--beige); }
.faq-groupe-icone svg { width: 24px; height: 24px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faq-groupe[hidden], .faq-groupe .question[hidden] { display: none; }
.faq-vide { margin: 0; padding: 28px 32px; border: 1px dashed var(--bordure); border-radius: var(--r-carte); font-size: 17px; }
.faq-vide[hidden] { display: none; }
@media (max-width: 1024px) {
  .faq-page { grid-template-columns: 1fr; gap: 36px; }
  .faq-themes { position: static; }
  .faq-themes ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
  .faq-themes a { white-space: nowrap; background: var(--blanc); border: 1px solid var(--bordure); }
  .entete-aide::after { font-size: 300px; top: auto; bottom: -50px; right: -10px; }
  .faq-groupe h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .entete-aide::after { animation: none; } }

/* ==========================================================
   Accueil vivant : entrée du haut de page, bandeau qui défile,
   parcours animé, étoiles, couverture qui s'incline
   ========================================================== */
/* Haut de page : la photo se pose et suit le défilement (profondeur) */
.hero-photo { translate: 0 var(--decalage, 0px); animation: photo-entree 2.8s var(--ease) backwards; will-change: translate; }
@keyframes monte { from { opacity: .3; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-texte-bloc > .sureminence { animation: monte .8s .1s var(--ease) backwards; }
.hero-titre { animation: monte .9s .2s var(--ease) backwards; }
.hero-texte { animation: monte .9s .45s var(--ease) backwards; }
.hero-actions { animation: monte .9s .6s var(--ease) backwards; }
.hero-cartes .carte-verre { animation: monte .8s var(--ease) backwards; }
.hero-cartes .carte-verre:nth-child(1) { animation-delay: .8s; }
.hero-cartes .carte-verre:nth-child(2) { animation-delay: .95s; }
.hero-cartes .carte-verre:nth-child(3) { animation-delay: 1.1s; }
.carte-verre { transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .25s var(--ease); }
.carte-verre:hover { transform: translateY(-3px); }
/* Un reflet passe sur le bouton principal, de temps en temps */
.hero .bouton-cuivre { position: relative; overflow: hidden; isolation: isolate; }
.hero .bouton-cuivre::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  transform: translateX(-130%); animation: reflet 7s 2s var(--ease) infinite;
}
@keyframes reflet { 0% { transform: translateX(-130%); } 18%, 100% { transform: translateX(130%); } }

/* Bandeau des services : défilement continu, pause au survol */
.bandeau-defile { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bandeau-piste {
  display: flex; flex: none; align-items: center; gap: 36px; padding-right: 36px; min-height: 72px;
  color: rgba(255,255,255,.88); font-size: 15px; letter-spacing: .02em; white-space: nowrap;
  animation: defile 46s linear infinite;
}
.bandeau-piste a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.bandeau-piste a:hover { color: var(--cuivre-clair); }
.bandeau:hover .bandeau-piste, .bandeau:focus-within .bandeau-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-100%); } }

/* Pourquoi nous : les cartes arrivent l'une après l'autre, l'anneau tourne au survol */

@keyframes tourne { to { transform: rotate(360deg); } }

/* Parcours en trois temps (accueil) */
.accueil-parcours .cycle { max-width: 1040px; margin-inline: auto; }
.accueil-parcours-action { margin: 44px 0 0; text-align: center; }

/* Témoignages : les étoiles s'allument une à une */
@keyframes etoile { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } to { transform: none; } }
.js .temoignages.est-revele .etoiles use { transform-box: fill-box; transform-origin: center; animation: etoile .45s var(--ease) backwards; }
.js .temoignages.est-revele .etoiles use:nth-child(2) { animation-delay: .1s; }
.js .temoignages.est-revele .etoiles use:nth-child(3) { animation-delay: .2s; }
.js .temoignages.est-revele .etoiles use:nth-child(4) { animation-delay: .3s; }
.js .temoignages.est-revele .etoiles use:nth-child(5) { animation-delay: .4s; }

/* Guide gratuit : la couverture s'incline sous la souris */
[data-inclinaison] { perspective: 900px; }
[data-inclinaison] .couverture { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease); }

/* Barre de progression de lecture, sous l'en-tête (toutes les pages) */
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cuivre-degrade); transform: scaleX(0); transform-origin: left center; pointer-events: none; }

@media (max-width: 768px) {
  .bandeau-piste { min-height: 60px; font-size: 14px; gap: 26px; padding-right: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-texte-bloc > .sureminence, .hero-titre, .hero-texte, .hero-actions, .hero-cartes .carte-verre,
  .hero .bouton-cuivre::after, .raison, .raison-icone::after, .etoiles use { animation: none !important; }
  .bandeau-piste { animation: none; }
  .bandeau-piste[aria-hidden] { display: none; }
  .bandeau-defile { overflow-x: auto; scrollbar-width: none; }
  .progression { display: none; }
}
.accueil-parcours .entete-section h2 { max-width: 780px; margin-inline: auto; text-wrap: balance; }
.faq-page > * { min-width: 0; }
@media (max-width: 768px) { .entete-aide::after { display: none; } }

/* ==========================================================
   Blogue : façon journal, fil d'actualité qui défile,
   filtres par sujet, une couleur par sujet
   ========================================================== */
.entete-blogue { padding-bottom: 0; }

.entete-blogue h1 { font-size: calc(var(--h1) - 6px); line-height: 1.06; letter-spacing: -.01em; }   /* 1er oct. 2026 : plus de titre géant (Rafik n'aimait pas l'en-tête clair) */

.blogue-fil { display: flex; overflow: hidden; background: var(--teal); color: rgba(255,255,255,.9); }
.blogue-fil-piste { display: flex; flex: none; gap: 56px; padding: 18px 56px 18px 0; white-space: nowrap; font-size: 15px; animation: defile 70s linear infinite; }
.blogue-fil-piste b { margin-right: 12px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cuivre-clair) !important; }
.blogue-fil:hover .blogue-fil-piste { animation-play-state: paused; }

.blogue-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.blogue-filtre {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--bordure); border-radius: 999px; background: var(--blanc);
  font: 600 14.5px/1 var(--police); color: var(--teal); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.blogue-filtre[style]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.blogue-filtre:hover { border-color: var(--cuivre); }
.blogue-filtre[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--blanc); }

/* Article */
.entete-article { position: relative; overflow: hidden; }
.entete-article::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.article-entete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
.entete-article h1 { max-width: 860px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; text-wrap: balance; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 20px; font-size: 14px; color: var(--texte-doux); }
.article-cat { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.article-cat::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.article-verifie { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--blanc); font-size: 13.5px; font-weight: 600; color: var(--teal); }
.article-verifie svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.article-grand-chiffre { margin: 0; text-align: right; }
.article-grand-chiffre span { display: block; font-size: clamp(64px, 9vw, 136px); font-weight: 700; line-height: .9; letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px var(--accent); animation: glisse 1.2s .2s var(--ease) backwards; }
.article-grand-chiffre small { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.article-grille { display: grid; grid-template-columns: minmax(0, 740px) 340px; justify-content: space-between; gap: 64px; align-items: start; }
.article-corps { font-size: 18px; line-height: 1.75; color: var(--texte); }
.article-corps > h2 { margin: 48px 0 16px; font-size: 28px; line-height: 1.25; }
.article-corps p { margin: 0 0 18px; }
.article-corps .liste-points { display: grid; gap: 10px; margin: 0 0 20px; }
.article-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.article-chiffres > div { padding: 22px 20px 20px; background: var(--blanc); border: 1px solid var(--bordure); border-top: 3px solid var(--accent); border-radius: var(--r-bouton); }
.article-chiffres strong { display: block; margin-bottom: 8px; font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--teal); font-variant-numeric: tabular-nums; }
.article-chiffres span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--texte-doux); }
.article-tableau { width: 100%; margin: 4px 0 18px; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.article-tableau th, .article-tableau td { padding: 12px 16px; border-bottom: 1px solid var(--bordure); text-align: left; }
.article-tableau thead th { background: var(--beige); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre-fonce); }
.article-tableau td strong { color: var(--teal); }
.article-frise { margin: 8px 0 24px; padding: 0; list-style: none; border-left: 2px solid var(--accent); }
.article-frise li { position: relative; padding: 0 0 24px 30px; }
.article-frise li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--blanc); border: 3px solid var(--accent); }
.article-frise span { display: block; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre-fonce); }
.article-frise p { margin: 4px 0 0; }
.article-afaire { margin: 44px 0; padding: 30px 32px 20px; background: var(--beige); border-left: 4px solid var(--accent); border-radius: var(--r-bouton); }
.article-sources { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--bordure); }
.article-sources h2 { margin: 0 0 14px; font-size: 20px; }
.article-sources ul { display: grid; gap: 10px; font-size: 15px; line-height: 1.55; }
.article-sources a { color: var(--cuivre-fonce); text-underline-offset: 3px; }
.article-avertissement { margin-top: 24px !important; font-size: 14px; color: var(--texte-doux); }
.article-cote { position: sticky; top: calc(var(--entete-h) + 32px); display: grid; gap: 28px; }
.article-appel {
  padding: 30px 28px; border-radius: var(--r-carte); color: rgba(255,255,255,.86);
  background-color: var(--teal); background-image: url(img/motif-virtus.png), radial-gradient(120% 140% at 0% 0%, var(--teal-eclat) 0%, var(--teal) 55%, var(--teal-profond) 100%);
  background-size: 720px auto, auto;
}
.article-appel p:not(.sureminence) { margin: 0 0 22px; font-size: 17px; line-height: 1.55; }
.article-appel .bouton { width: 100%; }
.article-autres ul { display: grid; margin-bottom: 16px; }
.article-autres a { display: block; padding: 14px 0; border-bottom: 1px solid var(--bordure); font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--teal); text-decoration: none; transition: color .2s var(--ease); }
.article-autres a:hover { color: var(--cuivre-fonce); }
.article-autres b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.article-autres b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

@media (max-width: 1024px) {
  .blogue-entete, .article-entete { grid-template-columns: 1fr; gap: 28px; }
  
  .article-grille { grid-template-columns: 1fr; }
  .article-cote { position: static; }
  .article-grand-chiffre { text-align: left; }
}
@media (max-width: 768px) {
  
  
  
  
  .article-chiffres { grid-template-columns: 1fr; }
  .article-corps { font-size: 17px; }
  .article-grand-chiffre { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .blogue-fil-piste { animation: none; }
  .blogue-fil .blogue-fil-piste + .blogue-fil-piste { display: none; }
  .billet.apparait, .article-grand-chiffre span { animation: none; }
}
/* Blogue : corrections (ancien style .billet neutralisé, carte large en fin de liste) */

/* Mouvements toujours lisibles : on glisse, on ne part jamais d'un élément invisible */
@keyframes glisse { from { transform: translateY(22px); } }
.js .article-chiffres.est-revele > div { animation: glisse .7s var(--ease) backwards; }
.js .article-chiffres.est-revele > div:nth-child(2) { animation-delay: .12s; }
.js .article-chiffres.est-revele > div:nth-child(3) { animation-delay: .24s; }
.article-chiffres > div { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.article-chiffres > div:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -24px rgba(0,48,60,.45); }
@media (prefers-reduced-motion: reduce) { .article-chiffres > div { animation: none !important; } }

/* ==========================================================
   Boutique : une couleur par produit (palette validée des guides)
   Tenir vos livres #00809C · Registre #A8841F · Incorporé #6C5BA8 · Trousse cuivre
   ========================================================== */
.produit-livres, .produit-livres ~ section { --accent: #00809C; --accent-fonce: #00596D; --accent-pale: #E3F1F4; }
.produit-km, .produit-km ~ section { --accent: #A8841F; --accent-fonce: #6B5212; --accent-pale: #F5EEDB; }
.produit-incorpore, .produit-incorpore ~ section { --accent: #6C5BA8; --accent-fonce: #4A3C7D; --accent-pale: #ECE9F5; }
.produit-trousse, .produit-trousse ~ section { --accent: #C47C5A; --accent-fonce: #7A3E22; --accent-pale: #F6E9E1; }

/* En-tête du produit : teinte douce de sa couleur, liseré, carte prix */
.produit-teinte { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--ivoire) 0%, var(--accent-pale) 100%); border-bottom: 3px solid var(--accent); }
.produit-teinte::before {
  content: ""; position: absolute; right: -120px; top: -120px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%);
  pointer-events: none; animation: halo 9s ease-in-out infinite alternate;
}
@keyframes halo { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.15); } }
.produit-teinte > .enveloppe { position: relative; }
.produit-teinte .sureminence-clair { color: var(--accent-fonce); }
.produit-teinte h1 strong { color: var(--accent-fonce); }
.produit-teinte .pour-qui-carte { border-top: 4px solid var(--accent); }
.produit-teinte .aside-prix { color: var(--accent-fonce); }
.produit-teinte .pour-qui-faits .icone { stroke: var(--accent); }
.produit-teinte .filet-anime { background: var(--accent); }

/* Corps de la page produit */
.produit-teinte ~ section .inclus-icone { background: var(--accent-pale); }
.produit-teinte ~ section .inclus-icone svg { stroke: var(--accent-fonce); }
.produit-teinte ~ section .sureminence { color: var(--accent-fonce); }
.produit-teinte ~ section .apercu-pages figure img { border-top: 3px solid var(--accent); }
.produit-teinte ~ .cta-bande.fond-cuivre {
  background-color: var(--accent-fonce);
  background-image: linear-gradient(120deg, rgba(0,0,0,.18) 0%, rgba(255,255,255,.06) 55%, rgba(0,0,0,.12) 100%), repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px);
}
.produit-teinte ~ .cta-bande.fond-cuivre .sureminence-clair { color: rgba(255,255,255,.85); }

/* Boutique : liseré aux quatre couleurs, cartes teintées */
.boutique-entete { position: relative; }
.boutique-entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #00809C 0 25%, #A8841F 25% 50%, #6C5BA8 50% 75%, #C47C5A 75% 100%);
  transform-origin: left center; animation: lisere 1.4s .3s var(--ease) backwards;
}
@keyframes lisere { from { transform: scaleX(0); } }
.vitrine-boutique .produit-livres { --accent: #00809C; --accent-fonce: #00596D; --accent-pale: #E3F1F4; }
.vitrine-boutique .produit-km { --accent: #A8841F; --accent-fonce: #6B5212; --accent-pale: #F5EEDB; }
.vitrine-boutique .produit-incorpore { --accent: #6C5BA8; --accent-fonce: #4A3C7D; --accent-pale: #ECE9F5; }
.vitrine-boutique .produit .produit-couverture.ressource {
  background: linear-gradient(160deg, var(--accent-pale) 0%, color-mix(in srgb, var(--accent) 30%, var(--accent-pale)) 100%);
  border-bottom: 3px solid var(--accent);
}
.vitrine-boutique .produit .produit-type { color: var(--accent-fonce); border-color: color-mix(in srgb, var(--accent) 35%, #fff); }
.vitrine-boutique .produit .produit-chiffre { color: var(--accent-fonce); }
.vitrine-boutique .produit .produit-chiffre small { color: var(--accent-fonce); }
.vitrine-boutique .produit:hover { border-color: var(--accent); }
.vitrine-boutique .produit .produit-faits svg { stroke: var(--accent); }
.tableau-offres thead th:nth-child(2) { box-shadow: inset 0 -3px 0 #00809C; }
.tableau-offres thead th:nth-child(3) { box-shadow: inset 0 -3px 0 #A8841F; }
.tableau-offres thead th:nth-child(4) { box-shadow: inset 0 -3px 0 #6C5BA8; }
@media (prefers-reduced-motion: reduce) { .produit-teinte::before, .boutique-entete::after { animation: none; } }

/* ==========================================================
   Formations : écran de l'espace formation (illustration animée)
   et escalier des niveaux d'ateliers
   ========================================================== */
.apercu-formation-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.apercu-formation-texte p:not(.sureminence) { font-size: 17.5px; color: var(--texte-doux); }

.ecran-cours { position: relative; margin: 0; padding: 26px 34px 40px; }
.ecran-cadre {
  position: relative; z-index: 1; overflow: hidden; border-radius: 12px 12px 4px 4px;
  background: var(--encre); border: 10px solid #1d2a36; box-shadow: 0 50px 80px -40px rgba(0,30,38,.7);
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transition: transform .6s var(--ease);
}
.ecran-cours:hover .ecran-cadre { transform: perspective(1600px) rotateY(0deg) rotateX(0deg); }
.ecran-socle { position: relative; z-index: 0; height: 16px; margin: -2px -34px 0; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #c9cfd4 0%, #8f989f 100%); box-shadow: 0 20px 30px -18px rgba(0,0,0,.5); }
.ecran-socle::before { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #7d868d; }
.ecran-barre { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #24323f; }
.ecran-barre span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); }
.ecran-barre span:first-child { background: var(--cuivre); }
.ecran-barre b { margin-left: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecran-contenu { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); min-height: 300px; }
.ecran-video { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; background: #0f1a22; }
.ecran-affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(.6); animation: affiche 14s ease-in-out infinite alternate; }
@keyframes affiche { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, -2%); } }
.ecran-video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,30,41,.2) 0%, rgba(19,30,41,.85) 100%); }
.ecran-logo { position: absolute; top: 16px; left: 18px; z-index: 1; width: 64px; height: auto; opacity: .8; }
.ecran-lecture {
  position: absolute; z-index: 1; left: 50%; top: 42%; display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50%; transform: translate(-50%, -50%); background: var(--cuivre-degrade); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6);
}
.ecran-lecture::before, .ecran-lecture::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(235,179,148,.7); animation: onde 2.4s ease-out infinite; }
.ecran-lecture::after { animation-delay: 1.2s; }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.ecran-lecture svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
.ecran-titre { position: relative; z-index: 1; margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #fff; }
.ecran-titre small { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cuivre-clair); }
.ecran-controles { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.ecran-progression { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.ecran-progression i { display: block; height: 100%; width: 100%; background: var(--cuivre-degrade); transform-origin: left center; animation: lecture 9s linear infinite; }
@keyframes lecture { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
.ecran-temps { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ecran-modules { margin: 0; padding: 12px 0; list-style: none; background: #16222c; border-left: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.ecran-modules li { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.62); }
.ecran-modules li b { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.7); }
.ecran-modules li.fait b { background: var(--teal); border-color: var(--teal); color: transparent; position: relative; }
.ecran-modules li.fait b::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--cuivre-clair); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ecran-modules li.en-cours { color: #fff; background: rgba(196,124,90,.14); box-shadow: inset 3px 0 0 var(--cuivre); }
.ecran-modules li.en-cours b { border-color: var(--cuivre); color: var(--cuivre-clair); }
/* Le module « en cours » avance tout seul, doucement */
.ecran-modules li::before { content: ""; position: absolute; inset: 0; background: rgba(235,179,148,.1); opacity: 0; animation: parcours 18s linear infinite; animation-delay: calc(var(--i) * 1.6s); }
@keyframes parcours { 0%, 100% { opacity: 0; } 2%, 8% { opacity: 1; } 11% { opacity: 0; } }
.ecran-pastille {
  position: absolute; z-index: 2; padding: 10px 16px; border-radius: 999px; background: var(--blanc);
  box-shadow: 0 16px 30px -16px rgba(0,48,60,.55); font-size: 13.5px; font-weight: 700; color: var(--teal); white-space: nowrap;
  animation: flotte 6s ease-in-out infinite;
}
.ecran-pastille::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--cuivre); vertical-align: 1px; }
.ecran-pastille-1 { top: 0; left: 0; }
.ecran-pastille-2 { top: 38%; right: -6px; animation-delay: 1.5s; }
.ecran-pastille-3 { bottom: 12px; left: 12%; animation-delay: 3s; }
.ecran-cours figcaption { position: absolute; right: 34px; bottom: 0; font-size: 12px; color: var(--texte-doux); }

/* Escalier des trois niveaux (ateliers) */
.escalier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 0; padding: 0; list-style: none; }
.escalier li { display: flex; flex-direction: column; gap: 6px; }
.escalier-marche {
  position: relative; display: flex; align-items: flex-start; justify-content: flex-end; height: calc(var(--n) * 90px + 40px); padding: 16px;
  border-radius: 8px 8px 0 0; color: #fff; overflow: hidden;
  background: linear-gradient(180deg, #2E6A6E 0%, var(--teal) 100%);
  transform-origin: bottom center; transition: transform .4s var(--ease);
}
.escalier li:nth-child(2) .escalier-marche { background: linear-gradient(180deg, #7A6A55 0%, var(--teal) 100%); }
.escalier li:nth-child(3) .escalier-marche { background: linear-gradient(180deg, var(--cuivre) 0%, #6B4A3A 55%, var(--teal) 100%); }
.escalier-marche::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px); }
.escalier-marche b { position: relative; z-index: 1; font-size: 64px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.8); }
.escalier li:hover .escalier-marche { transform: translateY(-6px); }
.escalier strong { margin-top: 10px; font-size: 18px; color: var(--teal); }
.escalier li > span:last-child { font-size: 14.5px; line-height: 1.5; color: var(--texte-doux); }
.js .escalier.est-revele .escalier-marche { animation: monte-marche .9s var(--ease) backwards; animation-delay: calc(var(--n) * .2s); }
@keyframes monte-marche { from { transform: scaleY(.25); } }

@media (max-width: 1024px) {
  .apercu-formation-grille { grid-template-columns: 1fr; gap: 40px; }
  .ecran-cadre { transform: none; }
}
@media (max-width: 768px) {
  .ecran-cours { padding: 34px 0 44px; }
  .ecran-socle { margin: -2px -10px 0; }
  .ecran-contenu { grid-template-columns: 1fr; }
  .ecran-modules { display: none; }
  .ecran-pastille { font-size: 12px; padding: 8px 12px; }
  .ecran-pastille-2 { right: 0; top: auto; bottom: 60px; }
  .ecran-cours figcaption { right: 0; }
  .escalier-marche { height: calc(var(--n) * 60px + 40px); }
  .escalier-marche b { font-size: 44px; }
  .escalier strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ecran-affiche, .ecran-lecture::before, .ecran-lecture::after, .ecran-progression i, .ecran-modules li::before, .ecran-pastille, .escalier-marche { animation: none !important; }
  .ecran-progression i { transform: scaleX(.35); }
}
.apercu-formation-texte .titre-bloc { margin-bottom: 20px; }
.ecran-pastille-2 { right: -26px; }

/* ==========================================================
   Outils v2 : fond « papier de graphique » avec halos qui dérivent,
   point qui parcourt la courbe, rapport qui se remplit
   ========================================================== */
.entete-outil {
  background-color: #EEF4F3;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 55px, rgba(0,48,60,.07) 55px 56px),
    linear-gradient(160deg, var(--ivoire) 0%, #E4EFEC 100%);
  background-size: auto, auto;
}
.entete-outil::before, .entete-outil::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(10px);
}
.entete-outil::before { width: 560px; height: 560px; left: -160px; top: -220px; background: radial-gradient(circle, rgba(0,128,156,.2) 0%, transparent 68%); animation: derive-a 14s ease-in-out infinite alternate; }
.entete-outil::after { width: 620px; height: 620px; right: 8%; bottom: -320px; background: radial-gradient(circle, rgba(196,124,90,.26) 0%, transparent 68%); animation: derive-b 16s ease-in-out infinite alternate; }
@keyframes derive-a { to { transform: translate(120px, 60px) scale(1.1); } }
@keyframes derive-b { to { transform: translate(-140px, -40px) scale(1.15); } }
.entete-outil > .enveloppe { z-index: 1; }
.entete-courbe { z-index: 0; }

/* Rapport de démonstration */
.rapport-demo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; margin: 0; }
.rapport-fichiers { position: relative; display: grid; gap: 12px; }
.rapport-fichiers span {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: var(--blanc);
  border: 1px solid var(--bordure); box-shadow: 0 12px 24px -18px rgba(0,48,60,.5);
  font-size: 12.5px; font-weight: 600; color: var(--teal); white-space: nowrap;
}
.rapport-fichiers svg { width: 18px; height: 18px; fill: none; stroke: #1D7A45; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rapport-fleche { position: absolute; right: -26px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); display: grid; place-items: center; font-style: normal; }
.rapport-fleche svg { width: 22px; height: 22px; fill: none; stroke: var(--cuivre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: pousse 1.6s ease-in-out infinite; }
@keyframes pousse { 50% { transform: translateX(5px); } }
.rapport-fenetre { overflow: hidden; border-radius: var(--r-carte); background: var(--blanc); border: 1px solid var(--bordure); box-shadow: 0 34px 60px -38px rgba(0,48,60,.6); }
.rapport-barre { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #F4F7F7; border-bottom: 1px solid var(--bordure); }
.rapport-barre span { width: 9px; height: 9px; border-radius: 50%; background: #D5DDDD; }
.rapport-barre span:first-child { background: var(--cuivre); }
.rapport-barre b { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--texte-doux); }
.rapport-corps { padding: 18px 22px 20px; }
.rapport-onglets { display: flex; gap: 6px; margin-bottom: 16px; }
.rapport-onglets span { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--texte-doux); background: #F2F5F5; }
.rapport-onglets .actif { background: var(--teal); color: var(--blanc); }
.rapport-legende { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; padding-left: 106px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.rapport-legende .ecart { margin-left: auto; }
.rapport-legende b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rapport-legende .p1::before, .rapport-legende .p2::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: #9FB6BA; }
.rapport-legende .p2::before { background: var(--cuivre); }
.rapport-ligne { display: grid; grid-template-columns: 92px 1fr 64px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--bordure); }
.rapport-nom { font-size: 14.5px; font-weight: 600; color: var(--teal); }
.rapport-barres { display: grid; gap: 5px; }
.rapport-barres i { display: block; height: 11px; border-radius: 0 4px 4px 0; transform-origin: left center; }
.rapport-barres .p1 { width: var(--a); background: #9FB6BA; }
.rapport-barres .p2 { width: var(--b); background: var(--cuivre-degrade); }
.rapport-ecart { justify-self: end; padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rapport-ecart.hausse { background: #E2F2E8; color: #1D6B3E; }
.rapport-ecart.neutre { background: #F2F5F5; color: var(--texte-doux); }
.rapport-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bordure); }
.rapport-export { padding: 5px 11px; border: 1px solid var(--bordure); border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--teal); }
.rapport-pret { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #1D6B3E; }
.rapport-pret::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2E9E5F; box-shadow: 0 0 0 0 rgba(46,158,95,.5); animation: pouls 2s ease-out infinite; }
@keyframes pouls { to { box-shadow: 0 0 0 10px rgba(46,158,95,0); } }
.rapport-demo figcaption { position: absolute; right: 4px; bottom: -26px; font-size: 11.5px; color: var(--texte-doux); }

/* Animation à l'arrivée : les fichiers glissent, les barres se remplissent, les écarts apparaissent */
@keyframes glisse-g { from { transform: translateX(-26px); } }
@keyframes barre { from { transform: scaleX(0); } }
@keyframes pop { from { transform: scale(.4); } 70% { transform: scale(1.12); } }
.js .rapport-demo.est-revele .rapport-fichiers span { animation: glisse-g .6s var(--ease) backwards; animation-delay: calc(var(--k) * .15s); }
.js .rapport-demo.est-revele .rapport-barres i { animation: barre 1.1s var(--ease) backwards; animation-delay: calc(.5s + var(--k) * .2s); }
.js .rapport-demo.est-revele .rapport-barres .p2 { animation-delay: calc(.7s + var(--k) * .2s); }
.js .rapport-demo.est-revele .rapport-ecart { animation: pop .5s var(--ease) backwards; animation-delay: calc(1.5s + var(--k) * .2s); }

@media (max-width: 1024px) {
  .rapport-demo { grid-template-columns: 1fr; }
  .rapport-fichiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rapport-fichiers span { justify-content: center; }
  .rapport-fleche { display: none; }
}
@media (max-width: 480px) {
  .rapport-fichiers span { font-size: 11px; padding: 8px; }
  .rapport-ligne { grid-template-columns: 74px 1fr 56px; gap: 10px; }
  .rapport-legende { padding-left: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .entete-outil::before, .entete-outil::after, .rapport-fleche svg, .rapport-pret::before { animation: none; }
  .courbe-point, .courbe-halo { display: none; }
  .rapport-demo * { animation: none !important; }
}

/* ==========================================================
   À propos v2 : photo encadrée, VIRTUS en grand, équipe vivante,
   carrières en bleu nuit avec ruban de valeurs
   ========================================================== */
.histoire-photo { position: relative; }
.histoire-photo::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: 0; border: 2px solid var(--cuivre); border-radius: 4px; transition: transform .6s var(--ease); }
.histoire-photo:hover::before { transform: translate(-10px, -10px); }
.histoire-photo img { position: relative; z-index: 1; border-radius: 4px; }
.histoire-pastille {
  position: absolute; z-index: 2; left: -26px; bottom: 36px; display: grid; gap: 2px; padding: 18px 22px; border-radius: var(--r-carte);
  background: var(--teal); color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 24px 40px -22px rgba(0,30,38,.7); animation: flotte 6s ease-in-out infinite;
}
.histoire-pastille b { font-size: 44px; line-height: 1; letter-spacing: -.02em; text-transform: none; color: transparent; -webkit-text-stroke: 1.5px var(--cuivre-clair); }

.virtus-mot { display: flex; justify-content: center; align-items: flex-end; gap: .02em; margin: 6px 0 10px; font-size: clamp(72px, 13vw, 190px); font-weight: 700; line-height: .9; letter-spacing: -.02em; }
.virtus-mot span { display: inline-block; color: var(--teal); transition: color .4s var(--ease), transform .4s var(--ease); }
.virtus-mot span:hover { color: var(--cuivre); transform: translateY(-8px); }
.virtus-mot small { align-self: center; margin-left: 24px; padding: 8px 16px; border-radius: 999px; background: var(--cuivre-degrade); font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 0; }
.js .virtus.est-revele .virtus-mot span { animation: lettre .8s var(--ease) backwards; animation-delay: calc(var(--l) * .09s); }
.js .virtus.est-revele .virtus-mot small { animation: pop .6s .75s var(--ease) backwards; }
@keyframes lettre { from { transform: translateY(40%) rotate(-6deg); } }
.mv-carte { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.mv-carte:hover { transform: translateY(-4px); border-color: var(--cuivre); box-shadow: 0 22px 40px -30px rgba(0,48,60,.5); }

.equipe-photo { overflow: hidden; }
.equipe-photo img { transition: transform 1.2s var(--ease); }
.equipe-photo:hover img { transform: scale(1.04); }
.membre-portrait { overflow: hidden; }
.membre-portrait img { transition: transform .8s var(--ease), filter .8s var(--ease); }
.membre:hover .membre-portrait img { transform: scale(1.06); }
.membre h3 { position: relative; display: inline-block; }
.membre h3::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--cuivre-degrade); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.membre:hover h3::after { transform: scaleX(1); }

/* Carrières */

@media (max-width: 1024px) {
  
  
  .histoire-pastille { left: 12px; bottom: 16px; }
  .histoire-photo::before { inset: 14px -10px -14px 10px; }
}
@media (max-width: 768px) {
  .virtus-mot { flex-wrap: wrap; }
  .virtus-mot small { margin: 12px 0 0; flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .carrieres-piste, .histoire-pastille, .virtus-mot span, .virtus-mot small, .poste-carte { animation: none !important; }
  
}

/* ==========================================================
   Contact v2 : nos bureaux (ouvert en ce moment ?) et à distance
   ========================================================== */
.trouver-cartes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.trouver-bureau {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 40px 40px 36px; border-radius: var(--r-carte);
  color: rgba(255,255,255,.82); background-color: var(--teal);
  background-image: url(img/motif-virtus.png), radial-gradient(120% 140% at 0% 0%, var(--teal-eclat) 0%, var(--teal) 55%, var(--teal-profond) 100%);
  background-size: 900px auto, auto;
}
.trouver-bureau-haut { display: flex; align-items: center; gap: 22px; }
.trouver-epingle { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cuivre-degrade); }
.trouver-epingle::before, .trouver-epingle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(235,179,148,.7); animation: onde 2.6s ease-out infinite; }
.trouver-epingle::after { animation-delay: 1.3s; }
.trouver-epingle svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; animation: rebond 2.6s ease-in-out infinite; }
@keyframes rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.trouver-bureau .sureminence { margin-bottom: 6px; }
.trouver-adresse { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.35; color: var(--blanc); }
.trouver-statut { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin: 0; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 14.5px; }
.trouver-statut span { width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre-clair); }
.trouver-statut b { font-weight: 600; color: var(--blanc); }
.trouver-statut.est-ouvert span { background: #3CC37A; box-shadow: 0 0 0 0 rgba(60,195,122,.55); animation: pouls-vert 2s ease-out infinite; }
@keyframes pouls-vert { to { box-shadow: 0 0 0 10px rgba(60,195,122,0); } }
.trouver-statut.est-ferme span { background: #E8917A; }
.trouver-heures { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.trouver-heures li { display: flex; justify-content: space-between; padding: 8px 14px; border-radius: 6px; transition: background-color .3s var(--ease); }
.trouver-heures li span:last-child { color: rgba(255,255,255,.65); }
.trouver-heures li.aujourdhui { background: rgba(255,255,255,.09); box-shadow: inset 3px 0 0 var(--cuivre); color: var(--blanc); font-weight: 600; }
.trouver-heures li.aujourdhui span:last-child { color: var(--cuivre-clair); }
.trouver-note { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.65); }
.trouver-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

.trouver-distance { display: flex; flex-direction: column; gap: 14px; padding: 40px 36px 34px; border-radius: var(--r-carte); background: var(--blanc); border: 1px solid var(--bordure); }
.trouver-distance h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; font-weight: 300; color: var(--teal); }
.trouver-distance h3 strong { font-weight: 700; }
.distance-etapes { position: relative; display: grid; gap: 22px; margin: 6px 0 16px; padding: 0; list-style: none; }
.distance-etapes::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: repeating-linear-gradient(180deg, var(--cuivre) 0 6px, transparent 6px 12px); background-size: 2px 24px; animation: signal 1.2s linear infinite; }
@keyframes signal { to { background-position: 0 24px; } }
.distance-etapes li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; }
.distance-icone { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--beige); border: 2px solid var(--blanc); transition: transform .3s var(--ease), background-color .3s var(--ease); }
.distance-icone svg { width: 24px; height: 24px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.distance-etapes li:hover .distance-icone { transform: scale(1.08); background: var(--teal); }
.distance-etapes li:hover .distance-icone svg { stroke: var(--cuivre-clair); }
.distance-etapes strong { display: block; font-size: 16.5px; color: var(--teal); }
.distance-etapes p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--texte-doux); }
.js .trouver-distance.est-revele .distance-etapes li { animation: glisse .6s var(--ease) backwards; animation-delay: calc(var(--k) * .18s); }
.trouver-distance .lien-fleche { margin-top: auto; align-self: flex-start; }

@media (max-width: 1024px) {
  .trouver-cartes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .trouver-bureau, .trouver-distance { padding: 30px 22px 26px; }
  .trouver-adresse { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .trouver-epingle::before, .trouver-epingle::after, .trouver-epingle svg, .trouver-statut span, .distance-etapes::before, .distance-etapes li { animation: none !important; }
}
@media (max-width: 768px) { .ecran-pastille-2 { right: 0; } .ecran-cours { overflow: hidden; } }
@media (max-width: 480px) { .payable-bandeau { flex-wrap: wrap; row-gap: 10px; } .payable-prix { font-size: 28px; } }

/* ==========================================================
   Lot du 28 septembre (soir) : retour aux couleurs de la charte
   ========================================================== */
/* Boutique : chaque produit garde une teinte, mais seulement celles de la charte */
.produit-livres, .produit-livres ~ section, .vitrine-boutique .produit-livres { --accent: #0B4150; --accent-fonce: #00303C; --accent-pale: #E3ECEE; }
.produit-km, .produit-km ~ section, .vitrine-boutique .produit-km { --accent: #C47C5A; --accent-fonce: #8A4B2E; --accent-pale: #F6E9E1; }
.produit-incorpore, .produit-incorpore ~ section, .vitrine-boutique .produit-incorpore { --accent: #131E29; --accent-fonce: #131E29; --accent-pale: #E8EAED; }
.produit-trousse, .produit-trousse ~ section { --accent: #A5603F; --accent-fonce: #7A3E22; --accent-pale: #F3EBE5; }
.boutique-entete::after { background: linear-gradient(90deg, #00303C 0 33.3%, #C47C5A 33.3% 66.6%, #131E29 66.6% 100%); }
.tableau-offres thead th:nth-child(2) { box-shadow: inset 0 -3px 0 #00303C; }
.tableau-offres thead th:nth-child(3) { box-shadow: inset 0 -3px 0 #C47C5A; }
.tableau-offres thead th:nth-child(4) { box-shadow: inset 0 -3px 0 #131E29; }

/* Blogue : une seule couleur (teal), la catégorie se lit en mots et en icône */
.blogue-filtre[style]::before { display: none; }

.entete-article, .entete-article ~ section { --accent: #C47C5A !important; }

/* Outils : fond épuré, on ne garde que la courbe */
.entete-outil { background-image: linear-gradient(160deg, var(--ivoire) 0%, #EEF3F2 100%); }
.entete-outil::before, .entete-outil::after { display: none; }

/* Services : notre approche, photo et parcours animé */
.approche-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.approche-photo { position: relative; margin: 0; }
.approche-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-carte); box-shadow: 0 40px 70px -46px rgba(0,30,38,.7); }
.approche-photo::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; z-index: -1; border-radius: var(--r-carte); background: var(--beige); }
.approche-pastille {
  position: absolute; right: -28px; bottom: 40px; display: grid; gap: 4px; max-width: 230px; padding: 18px 22px; border-radius: var(--r-carte);
  background: var(--teal); color: rgba(255,255,255,.8); font-size: 13.5px; line-height: 1.45; box-shadow: 0 24px 40px -22px rgba(0,30,38,.7);
  animation: flotte 6s ease-in-out infinite;
}
.approche-pastille b { font-size: 22px; color: var(--cuivre-clair); }
.approche-contenu .titre-bloc { margin-bottom: 36px; }
.approche-etapes { position: relative; display: grid; gap: 16px; margin: 0 0 36px; padding: 0; list-style: none; }
.approche-etapes::before { content: ""; position: absolute; left: 31px; top: 36px; bottom: 36px; width: 2px; background: linear-gradient(180deg, var(--cuivre), var(--teal)); transform-origin: top center; transition: transform 1.4s var(--ease) .2s; }
.js .approche-etapes.revele:not(.est-revele)::before { transform: scaleY(0); }
.approche-etapes li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: center; padding: 18px 22px 18px 0; border-radius: var(--r-carte); }
.approche-etapes li::after { content: ""; position: absolute; inset: 0 0 0 44px; z-index: -1; border-radius: var(--r-carte); background: var(--blanc); box-shadow: 0 18px 34px -26px rgba(0,48,60,.45); opacity: 0; animation: etape-active 9s ease-in-out infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes etape-active { 0%, 100% { opacity: 0; } 6%, 30% { opacity: 1; } 36% { opacity: 0; } }
.approche-icone { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blanc); border: 1px solid var(--bordure); box-shadow: 0 14px 26px -18px rgba(0,48,60,.55); }
.approche-icone svg { width: 28px; height: 28px; fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.approche-num { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-fonce); }
.approche-etapes h3 { margin: 0 0 6px; font-size: 21px; }
.approche-etapes p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte-doux); }
.js .approche-etapes.est-revele li { animation: glisse .7s var(--ease) backwards; animation-delay: calc(.2s + var(--k) * .25s); }

/* Formations : sélecteur « Quel est votre objectif ? » */
.choix-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: start; margin-top: 12px; }

@keyframes minuterie { to { transform: scaleX(1); } }

/* À propos : on recrute (section cuivrée) */
.recrutement {
  color: rgba(255,255,255,.88); background-color: #7A3E22;
  background-image: linear-gradient(110deg, rgba(19,30,41,.86) 0%, rgba(19,30,41,.66) 55%, rgba(19,30,41,.5) 100%), url(img/cuivre.jpg);
  background-size: cover; background-position: center;
}
.recrutement-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.recrutement-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blanc); }
.recrutement-badge span { width: 10px; height: 10px; border-radius: 50%; background: #3CC37A; animation: pouls-vert 2s ease-out infinite; }
.recrutement-texte h2 { color: var(--blanc); margin-bottom: 18px; }
.recrutement-texte > p { font-size: 17.5px; line-height: 1.7; }
.recrutement-photo { position: relative; margin: 30px 0 0; overflow: hidden; border-radius: var(--r-carte); }
.recrutement-photo img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 1.2s var(--ease); }
.recrutement-photo:hover img { transform: scale(1.05); }
.recrutement-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(19,30,41,.7); font-size: 12.5px; color: var(--blanc); }
.recrutement-carte { padding: 34px 34px 30px; border-radius: 16px; background: var(--blanc); color: var(--texte); box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.recrutement-postes { display: grid; margin: 0 0 24px; padding: 0; list-style: none; }
.recrutement-postes li { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 20px 12px; border-bottom: 1px solid var(--bordure); border-radius: 8px; transition: background-color .3s var(--ease); }
.recrutement-postes li:hover { background: var(--ivoire); }
.recrutement-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--beige); transition: background-color .3s var(--ease); }
.recrutement-icone svg { width: 24px; height: 24px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.recrutement-postes li:hover .recrutement-icone { background: var(--teal); }
.recrutement-postes li:hover .recrutement-icone svg { stroke: var(--cuivre-clair); }
.recrutement-postes h3 { margin: 0 0 4px; font-size: 18px; color: var(--teal); }
.recrutement-postes p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texte-doux); }
.recrutement-postuler { font-size: 15px; font-weight: 700; color: var(--cuivre-fonce); text-decoration: none; white-space: nowrap; }
.recrutement-postuler span { display: inline-block; transition: transform .3s var(--ease); }
.recrutement-postes li:hover .recrutement-postuler span { transform: translateX(5px); }
.js .recrutement-carte.est-revele .recrutement-postes li { animation: glisse .6s var(--ease) backwards; animation-delay: calc(.15s + var(--k) * .15s); }
.recrutement-spontanee { display: grid; gap: 16px; padding: 22px 24px; border-radius: var(--r-carte); background: var(--beige); }
.recrutement-spontanee p { margin: 0; font-size: 15.5px; }
.recrutement-spontanee a:not(.bouton) { color: var(--cuivre-fonce); }
.recrutement-spontanee .bouton { justify-self: start; }

@media (max-width: 1024px) {
  .approche-grille, .choix-grille, .recrutement-grille { grid-template-columns: 1fr; gap: 40px; }
  .approche-pastille { right: 12px; }
  
  
}
@media (max-width: 600px) {
  
  
  .recrutement-carte { padding: 24px 18px; }
  .recrutement-postes li { grid-template-columns: 44px 1fr; }
  .recrutement-postuler { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .approche-pastille, .approche-etapes li, .approche-etapes li::after, .choix-minuterie, .choix-panneau, .recrutement-badge span, .recrutement-postes li { animation: none !important; }
}

/* ==========================================================
   Outils du site : offre glissante, bulle « Une question ? »,
   bandeau des témoins (Loi 25)
   ========================================================== */
.pied-lien-bouton { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.pied-lien-bouton:hover { color: var(--cuivre-clair); text-decoration: underline; text-underline-offset: 4px; }

/* Offre glissante (en bas à gauche, ne cache pas la page) */
.offre-glissante {
  position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 130; display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center;
  width: min(380px, calc(100vw - 32px)); padding: 18px 20px 18px 18px; border-radius: var(--r-carte); background: var(--blanc);
  border: 1px solid var(--bordure); border-top: 3px solid var(--cuivre); box-shadow: 0 30px 60px -30px rgba(0,30,38,.55);
  transform: translateY(24px); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.offre-glissante.est-visible { transform: none; opacity: 1; }
.offre-glissante img { width: 76px; height: auto; border-radius: 3px; box-shadow: 0 12px 20px -12px rgba(0,30,38,.6); transform: rotate(-4deg); }
.offre-sur { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-fonce); }
.offre-titre { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--teal); }
.offre-texte { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--texte-doux); }
.offre-fermer { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.offre-fermer:hover { background: var(--beige); }
.offre-fermer svg { width: 12px; height: 12px; stroke: var(--texte-doux); stroke-width: 1.8; }

/* Bulle « Une question ? » (en bas à droite, ordinateur seulement) */
.bulle { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 131; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.bulle-bouton {
  position: relative; display: inline-flex; align-items: center; gap: 0; height: 60px; min-width: 60px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--teal); color: var(--blanc); box-shadow: 0 18px 34px -14px rgba(0,30,38,.7); cursor: pointer; font: 600 15px/1 var(--police);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.bulle-bouton::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(196,124,90,.55); animation: appel 3s ease-out 3; }
@keyframes appel { 0% { box-shadow: 0 0 0 0 rgba(196,124,90,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(196,124,90,0); } }
.bulle-bouton:hover { transform: translateY(-2px); background: var(--teal-eclat); }
.bulle-bouton svg { width: 24px; height: 24px; fill: none; stroke: var(--blanc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bulle-ico-fermer { display: none; width: 16px !important; height: 16px !important; }
.bulle-etiquette { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--ease), margin .5s var(--ease); }
.bulle-bouton:hover .bulle-etiquette, .bulle.invite .bulle-etiquette { max-width: 160px; margin-left: 10px; }
.bulle.est-ouvert .bulle-ico-ouvrir { display: none; }
.bulle.est-ouvert .bulle-ico-fermer { display: block; }
.bulle.est-ouvert .bulle-etiquette { max-width: 0; margin: 0; }
.bulle.est-ouvert .bulle-bouton { padding: 0; width: 60px; justify-content: center; }
.bulle-panneau {
  display: flex; flex-direction: column; width: min(390px, calc(100vw - 48px)); max-height: min(620px, calc(100vh - 140px)); overflow: hidden;
  border-radius: 16px; background: var(--blanc); border: 1px solid var(--bordure); box-shadow: 0 40px 80px -30px rgba(0,30,38,.6);
  transform-origin: bottom right; animation: bulle-ouvre .35s var(--ease);
}
@keyframes bulle-ouvre { from { transform: translateY(12px) scale(.96); } }
.bulle-panneau[hidden] { display: none; }
.bulle-entete { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 16px 16px 16px 18px; background: var(--teal); color: rgba(255,255,255,.75); }
.bulle-entete img { width: 54px; height: auto; }
.bulle-entete strong { display: block; font-size: 16.5px; color: var(--blanc); }
.bulle-entete span { display: block; font-size: 13px; }
.bulle-fermer { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); cursor: pointer; }
.bulle-fermer svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 1.8; }
.bulle-recherche { padding: 14px 16px 6px; }
.bulle-recherche input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--bordure); border-radius: var(--r-bouton); background: var(--ivoire); font: 400 15px/1 var(--police); color: var(--teal); }
.bulle-recherche input:focus { outline: none; border-color: var(--cuivre); box-shadow: 0 0 0 3px rgba(196,124,90,.18); }
.bulle-corps { flex: 1; overflow-y: auto; padding: 6px 16px 10px; }
.bulle-suggestions-titre { margin: 6px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cuivre-fonce); }
.bulle-reponses { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bulle-reponses details { border: 1px solid var(--bordure); border-radius: 10px; background: var(--blanc); transition: border-color .2s var(--ease); }
.bulle-reponses details[open] { border-color: var(--cuivre); }
.bulle-reponses summary { padding: 12px 14px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--teal); cursor: pointer; list-style: none; }
.bulle-reponses summary::-webkit-details-marker { display: none; }
.bulle-reponses summary::after { content: "+"; float: right; margin-left: 10px; color: var(--cuivre); font-weight: 400; }
.bulle-reponses details[open] summary::after { content: "−"; }
.bulle-reponses p { margin: 0; padding: 0 14px 8px; font-size: 14px; line-height: 1.55; color: var(--texte); }
.bulle-lien { display: inline-block; margin: 0 14px 12px; font-size: 13.5px; font-weight: 600; color: var(--cuivre-fonce); }
.bulle-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 16px 16px; border-top: 1px solid var(--bordure); background: var(--ivoire); }
.bulle-actions p { grid-column: 1 / -1; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.bulle-actions a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; background: var(--blanc); border: 1px solid var(--bordure); font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--teal); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.bulle-actions a:hover { border-color: var(--cuivre); transform: translateY(-2px); }
.bulle-actions svg { width: 20px; height: 20px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Bandeau des témoins */
.temoins {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 140; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: center;
  width: min(1040px, calc(100vw - 32px)); padding: 20px 24px; transform: translateX(-50%); border-radius: var(--r-carte);
  background: var(--blanc); border: 1px solid var(--bordure); box-shadow: 0 30px 70px -30px rgba(0,30,38,.6); animation: temoins-monte .5s var(--ease);
}
@keyframes temoins-monte { from { transform: translate(-50%, 20px); } }
.temoins[hidden] { display: none; }
.temoins-texte p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.temoins-texte p + p { margin-top: 4px; }
.temoins-texte strong { color: var(--teal); font-size: 15.5px; }
.temoins-texte a { color: var(--cuivre-fonce); font-weight: 600; }
.temoins-details { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px 0 2px; border-top: 1px solid var(--bordure); }
.temoins-details[hidden] { display: none; }
.temoins-choix { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--texte-doux); cursor: pointer; }
.temoins-choix input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--teal); }
.temoins-choix strong { color: var(--teal); margin-right: 4px; }
.temoins-boutons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.temoins-boutons .bouton { min-height: 44px; }
.temoins-boutons [hidden] { display: none; }

@media (max-width: 768px) {
  .bulle { display: none; }
  .offre-glissante { left: 16px; right: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 56px 1fr; }
  .offre-glissante img { width: 56px; }
  .temoins { grid-template-columns: 1fr; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding: 16px; }
  .temoins-boutons { justify-content: stretch; }
  .temoins-boutons .bouton { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .offre-glissante { transition: none; }
  .bulle-bouton::before, .bulle-panneau, .temoins { animation: none; }
}
.recrutement-photo img { object-position: 50% 42%; }

/* ==========================================================
   Boutons de réservation : on comprend tout de suite que ça ouvre l'agenda
   (icône de calendrier, petite flèche « s'ouvre », vraie réaction au survol)
   ========================================================== */
.bouton { transition: filter .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.bouton-teal { box-shadow: 0 10px 22px -14px rgba(0,48,60,.7); }
.bouton-teal:hover { filter: none; background: var(--teal-eclat); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0,48,60,.75); }
.bouton-cuivre:hover { transform: translateY(-2px); }
a.bouton[href*="calendly.com"]::before {
  content: ""; flex: none; width: 19px; height: 19px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.bouton[href*="calendly.com"]:not(.hero a)::after {
  content: ""; flex: none; width: 12px; height: 12px; background-color: currentColor; opacity: .7; transition: transform .25s var(--ease), opacity .25s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.bouton[href*="calendly.com"]:hover::after { transform: translate(2px, -2px); opacity: 1; }
.entete a.bouton[href*="calendly.com"]::after { display: none; }
/* Une phrase sous les boutons isolés : ce qui se passe quand on clique */
.bouton-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--texte-doux); }
.bouton-note::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3CC37A; }
.accueil-parcours-action + .bouton-note { justify-content: center; }
.bouton-note { align-items: flex-start; max-width: 520px; line-height: 1.5; }
.bouton-note::before { margin-top: 6px; }
.accueil-parcours-action + .bouton-note { margin-inline: auto; }

/* Formations : la fenêtre du haut devient un lecteur de cours (photo, lecture, progression) */
.entete-ecran .pour-qui-carte { overflow: hidden; }
.fenetre-video { position: relative; display: block; height: 196px; margin: -30px -34px 26px; overflow: hidden; background: #0f1a22; }
.fenetre-video img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .62; animation: affiche 14s ease-in-out infinite alternate; }
.fenetre-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,30,41,.05) 0%, rgba(19,30,41,.35) 45%, rgba(19,30,41,.9) 100%); }
.fenetre-lecture { position: absolute; z-index: 1; left: 50%; top: 40%; display: grid; place-items: center; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cuivre-degrade); box-shadow: 0 12px 26px -8px rgba(0,0,0,.6); }
.fenetre-lecture::before, .fenetre-lecture::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(235,179,148,.75); animation: onde 2.4s ease-out infinite; }
.fenetre-lecture::after { animation-delay: 1.2s; }
.fenetre-lecture svg { width: 20px; height: 20px; margin-left: 3px; fill: #fff; }
.fenetre-legende { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 22px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #fff; }
.fenetre-legende small { display: block; margin-bottom: 3px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cuivre-clair); }
.fenetre-barre { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 11px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.2); }
.fenetre-barre i { display: block; height: 100%; background: var(--cuivre-degrade); transform-origin: left center; animation: lecture 9s linear infinite; }
@media (max-width: 768px) { .fenetre-video { margin: -30px -24px 22px; height: 170px; } }
@media (prefers-reduced-motion: reduce) { .fenetre-video img, .fenetre-lecture::before, .fenetre-lecture::after, .fenetre-barre i { animation: none; } .fenetre-barre i { transform: scaleX(.35); } }

/* ==========================================================
   En-tête v3 : barre du haut avec liens pratiques, logo qui ne rétrécit plus
   ========================================================== */
.annonce-interieur { justify-content: space-between; gap: 24px; }
.annonce p { padding: 8px 0; text-align: left; }
.annonce-liens { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.annonce-liens a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.82); font-size: 13.5px; white-space: nowrap; }
.annonce-liens a:hover { color: var(--blanc); }
.annonce-liens svg { width: 15px; height: 15px; fill: none; stroke: var(--cuivre-clair); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.entete-logo { flex: none; }
.entete-logo img { width: 158px; height: auto; }
@media (max-width: 1439px) { .entete-logo img { width: 140px; } }
@media (max-width: 1024px) { .annonce-liens li:first-child { display: none; } }
@media (max-width: 768px) {
  .annonce-liens { display: none; }
  .annonce p { text-align: center; padding: 8px 0; }
  .entete-logo img { width: 122px; }
}
.trouver-cartes { align-items: start; }
.trouver-distance .lien-fleche { margin-top: 8px; }
.trouver-bureau { gap: 20px; }

/* Formations : une vraie photo en fond (plus de fond noir), voile teal lumineux */
.entete-ecran.entete-avec-photo { background-color: var(--teal-profond); background-image: none; }
.photo-formation::after { background: linear-gradient(90deg, rgba(0,39,47,.94) 0%, rgba(0,48,60,.8) 38%, rgba(0,48,60,.38) 72%, rgba(0,48,60,.22) 100%) !important; }
.photo-formation img { object-position: 60% 50%; }
@media (max-width: 1024px) { .photo-formation::after { background: linear-gradient(180deg, rgba(0,39,47,.9) 0%, rgba(0,48,60,.84) 60%, rgba(0,48,60,.7) 100%) !important; } }

/* Outils v3 : tableau de bord sur fond teal profond (colonnes qui montent, courbe cuivrée) */
.entete-tableau { background-color: var(--teal-profond); background-image: radial-gradient(120% 100% at 12% 0%, var(--teal-eclat) 0%, var(--teal) 50%, var(--teal-profond) 100%); }
.entete-tableau .entete-courbe { width: 70%; height: 86%; }
.courbe-grille { stroke: rgba(255,255,255,.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.courbe-colonne { fill: rgba(255,255,255,.07); transform-box: fill-box; transform-origin: 50% 100%; animation: colonne 1.1s var(--ease) backwards; animation-delay: calc(.2s + var(--c) * .07s); }
.courbe-colonne:nth-child(n+14) { fill: rgba(235,179,148,.12); }
@keyframes colonne { from { transform: scaleY(.08); } }
.entete-tableau .pour-qui-carte { background: var(--blanc); border-color: transparent; color: var(--texte); box-shadow: 0 40px 70px -30px rgba(0,0,0,.55); }
.entete-tableau .pour-qui-carte .sureminence-clair { color: var(--cuivre-fonce); }
.entete-tableau .pour-qui-faits { border-top-color: var(--bordure); }
.entete-tableau .pour-qui-faits li { color: var(--texte); }
.entete-tableau .pour-qui-faits .icone { stroke: var(--cuivre-fonce); }
.entete-tableau .sommaire-plus, .entete-tableau .pour-qui-carte a:not(.bouton) { color: var(--cuivre-fonce); border-top-color: var(--bordure); }
.entete-tableau .bouton-verre { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: var(--blanc); }
@media (max-width: 1024px) { .entete-tableau .entete-courbe { width: 100%; height: 50%; opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .courbe-colonne { animation: none; } }

/* ==========================================================
   Blogue v3 : mise en page de journal (à la une, fil daté, chiffres clés)
   ========================================================== */
.journal-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.une { position: relative; padding: 0 0 44px; margin-bottom: 48px; border-bottom: 2px solid var(--teal); }
.une-etiquette { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; background: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blanc); }
.une-etiquette::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cuivre-clair); animation: pouls-cuivre 2s ease-out infinite; }
@keyframes pouls-cuivre { 0% { box-shadow: 0 0 0 0 rgba(235,179,148,.7); } 100% { box-shadow: 0 0 0 9px rgba(235,179,148,0); } }
.une-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font-size: 14px; color: var(--texte-doux); }
.une-meta span:first-child { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; color: var(--cuivre-fonce); align-self: center; }
.une h2 { margin: 0 0 16px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; text-wrap: balance; }
.une h2 a { color: var(--teal); text-decoration: none; background-image: linear-gradient(var(--cuivre), var(--cuivre)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .5s var(--ease); }
.une h2 a:hover { background-size: 100% 2px; }
.une-resume { max-width: 720px; margin: 0 0 26px; font-size: 18.5px; line-height: 1.65; color: var(--texte); }
.une-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.une-chiffres li { padding: 18px 20px 18px 0; }
.une-chiffres li + li { padding-left: 20px; border-left: 1px solid var(--bordure); }
.une-chiffres strong { display: block; margin-bottom: 6px; font-size: 24px; line-height: 1.15; color: var(--cuivre-fonce); }
.une-chiffres span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--texte-doux); }

.journal-fil-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 8px; }
.journal-titre { margin: 0; font-size: 26px; }
.journal-fil-entete .blogue-filtres { margin: 0; gap: 6px; }
.journal-fil-entete .blogue-filtre { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.fil { margin: 0; padding: 0; list-style: none; }
.fil-item { border-bottom: 1px solid var(--bordure); }
.fil-item[hidden] { display: none; }
.fil-item.apparait { animation: glisse .5s var(--ease) backwards; }
.fil-lien { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 24px; align-items: center; padding: 26px 8px; color: var(--texte); text-decoration: none; border-radius: 8px; transition: background-color .3s var(--ease); }
.fil-lien:hover { background: var(--blanc); }
.fil-date { display: grid; place-items: center; align-content: center; width: 76px; height: 76px; border-radius: 12px; background: var(--beige); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cuivre-fonce); line-height: 1.1; transition: background-color .3s var(--ease), color .3s var(--ease); }
.fil-date b { font-size: 28px; letter-spacing: 0; color: var(--teal); transition: color .3s var(--ease); }
.fil-date sup { font-size: .5em; }
.fil-lien:hover .fil-date { background: var(--teal); color: var(--cuivre-clair); }
.fil-lien:hover .fil-date b { color: var(--blanc); }
.fil-corps { display: grid; gap: 6px; }
.fil-meta { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre-fonce); }
.fil-corps strong { font-size: 19.5px; line-height: 1.3; color: var(--teal); text-wrap: balance; }
.fil-resume { font-size: 15.5px; line-height: 1.6; color: var(--texte-doux); }
.fil-fleche { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bordure); font-size: 18px; color: var(--cuivre-fonce); transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.fil-lien:hover .fil-fleche { transform: translateX(4px); background: var(--cuivre); border-color: var(--cuivre); color: var(--blanc); }
.js .fil-item.revele.est-revele { transition-delay: calc(var(--k) * .06s); }

.journal-cote { position: sticky; top: calc(var(--entete-h) + 28px); display: grid; gap: 24px; }
.chiffres-cles { padding: 28px 26px 22px; border-radius: var(--r-carte); background: var(--teal); color: rgba(255,255,255,.75); }
.chiffres-cles .sureminence { color: var(--cuivre-clair); margin-bottom: 10px; }
.chiffres-cles ul { margin: 0; padding: 0; list-style: none; }
.chiffres-cles li + li { border-top: 1px solid rgba(255,255,255,.1); }
.chiffres-cles a { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; padding: 13px 0; color: inherit; text-decoration: none; }
.chiffres-cles strong { font-size: 22px; line-height: 1.1; color: var(--cuivre-clair); white-space: nowrap; transition: transform .3s var(--ease); }
.chiffres-cles span { font-size: 13.5px; line-height: 1.45; }
.chiffres-cles a:hover strong { transform: translateX(4px); }
.chiffres-cles a:hover span { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
.chiffres-cles-note { margin: 12px 0 0; font-size: 12px; color: rgba(255,255,255,.55); }
.journal-guide { display: grid; grid-template-columns: 70px 1fr; gap: 6px 18px; align-items: center; padding: 22px; border-radius: var(--r-carte); background: var(--blanc); border: 1px solid var(--bordure); }
.journal-guide img { grid-row: span 3; width: 70px; border-radius: 3px; box-shadow: 0 12px 20px -12px rgba(0,30,38,.6); transform: rotate(-4deg); }
.journal-guide .sureminence { margin: 0; }
.journal-guide-titre { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--teal); }
.journal-guide .bouton { justify-self: start; margin-top: 6px; }

@media (max-width: 1024px) {
  .journal-grille { grid-template-columns: 1fr; gap: 40px; }
  .journal-cote { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .journal-cote { grid-template-columns: 1fr; }
  .une-chiffres { grid-template-columns: 1fr; }
  .une-chiffres li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--bordure); }
  .fil-lien { grid-template-columns: 60px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .fil-date { width: 60px; height: 60px; }
  .fil-date b { font-size: 22px; }
  .fil-fleche { display: none; }
}
@media (prefers-reduced-motion: reduce) { .une-etiquette::before, .fil-item.apparait { animation: none; } }
.fil-date sup { text-transform: none; font-size: .45em; }

/* ==========================================================
   Vidéos : bouton dans le haut de l'accueil, section vidéo, visionneuse,
   bandeau « 4 formations »
   ========================================================== */
.lien-video { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 6px; border: 0; background: none; font: 600 16px/1.2 var(--police); color: var(--blanc); cursor: pointer; }
.lien-video-rond { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.lien-video-rond::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(235,179,148,.8); animation: onde 2.4s ease-out infinite; }
.lien-video-rond svg { width: 16px; height: 16px; margin-left: 2px; fill: var(--blanc); }
.lien-video:hover .lien-video-rond { background: var(--cuivre); transform: scale(1.06); }

.video-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.video-texte > p:not(.sureminence) { font-size: 17.5px; color: var(--texte-doux); }

.video-affiche { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: var(--teal); cursor: pointer; box-shadow: 0 40px 70px -40px rgba(0,30,38,.7); }
.video-affiche img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.video-affiche:hover img { transform: scale(1.04); }
.video-affiche-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,30,38,0) 40%, rgba(0,30,38,.55) 100%); }
.video-affiche-lecture { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 92px; height: 92px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cuivre-degrade); box-shadow: 0 16px 34px -10px rgba(0,0,0,.6); transition: transform .3s var(--ease); }
.video-affiche-lecture::before, .video-affiche-lecture::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(235,179,148,.8); animation: onde 2.4s ease-out infinite; }
.video-affiche-lecture::after { animation-delay: 1.2s; }
.video-affiche-lecture svg { width: 32px; height: 32px; margin-left: 5px; fill: #fff; }
.video-affiche:hover .video-affiche-lecture { transform: translate(-50%, -50%) scale(1.08); }
.video-affiche-duree { position: absolute; left: 18px; bottom: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(19,30,41,.75); font-size: 13.5px; font-weight: 600; color: #fff; }

button.fenetre-video { display: block; width: calc(100% + 68px); padding: 0; border: 0; text-align: left; cursor: pointer; font: inherit; }
button.fenetre-video:hover .fenetre-lecture { transform: translate(-50%, -50%) scale(1.1); }
.fenetre-lecture { transition: transform .3s var(--ease); }
@media (max-width: 768px) { button.fenetre-video { width: calc(100% + 48px); } }

.visionneuse { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(10,20,26,.86); animation: visionneuse-ouvre .3s var(--ease); }
.visionneuse[hidden] { display: none; }
@keyframes visionneuse-ouvre { from { opacity: 0; } }
.visionneuse-boite { position: relative; width: min(1100px, 100%); }
.visionneuse-titre { margin: 0 56px 12px 0; font-size: 17px; font-weight: 600; color: #fff; }
.visionneuse-cadre { overflow: hidden; border-radius: 12px; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.visionneuse-cadre video { display: block; width: 100%; height: 100%; }
.visionneuse-fermer { position: absolute; right: 0; top: -8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); cursor: pointer; }
.visionneuse-fermer:hover { background: var(--cuivre); }
.visionneuse-fermer svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 1.8; }
html.sans-defilement { overflow: hidden; }

@media (max-width: 1024px) {
  .video-grille { grid-template-columns: 1fr; gap: 36px; }
  
}

@media (prefers-reduced-motion: reduce) { .lien-video-rond::after, .video-affiche-lecture::before, .video-affiche-lecture::after, .quatre-tuile, .visionneuse { animation: none; } }

/* Guide gratuit (accueil) : vraie couverture, page intérieure, sceau « Gratuit » */
.guide-visuel { position: relative; justify-self: center; width: min(330px, 100%); aspect-ratio: 640 / 828; margin: 20px 40px 20px 0; perspective: 900px; }
.guide-page { position: absolute; inset: 0; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.65); }
.guide-page-2 { transform: translate(64px, 18px) rotate(7deg); filter: brightness(.94); transition: transform .6s var(--ease); }
.guide-page-1 { transform: rotate(-3deg); transition: transform .35s var(--ease); }
.guide-visuel:hover .guide-page-2 { transform: translate(92px, 10px) rotate(11deg); }
[data-inclinaison] .guide-page-1.couverture { transform: rotate(-3deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.guide-sceau { position: absolute; z-index: 2; right: -34px; top: -26px; display: grid; place-items: center; align-content: center; width: 112px; height: 112px; border-radius: 50%; background: var(--cuivre-degrade); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; box-shadow: 0 16px 30px -12px rgba(0,0,0,.55); animation: sceau 8s ease-in-out infinite; }
.guide-sceau b { font-size: 21px; letter-spacing: .02em; }
.guide-sceau::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.7); animation: tourne 18s linear infinite; }
@keyframes sceau { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(4deg) scale(1.05); } }
.guide-etiquette { position: absolute; z-index: 2; left: -30px; bottom: 34px; padding: 10px 16px; border-radius: 999px; background: var(--blanc); color: var(--teal); font-size: 13px; font-weight: 700; box-shadow: 0 16px 30px -14px rgba(0,0,0,.5); animation: flotte 6s ease-in-out infinite; }
@media (max-width: 1024px) { .guide-visuel { width: 250px; margin: 30px auto; } .guide-sceau { width: 92px; height: 92px; right: -20px; } .guide-sceau b { font-size: 17px; } .guide-etiquette { left: -16px; } }
@media (prefers-reduced-motion: reduce) { .guide-sceau, .guide-sceau::before, .guide-etiquette { animation: none; } }

/* Accueil : capsules vidéo */

.video-affiche.change img { animation: glisse .5s var(--ease); }

/* Vidéos v3 : lecteur dans la page, 4 questions de l'accueil */
.video-lecteur { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--teal); box-shadow: 0 40px 70px -40px rgba(0,30,38,.7); }
.video-lecteur .video-affiche { height: 100%; border-radius: 0; box-shadow: none; }
.video-lecteur video, .fenetre-en-lecture video { display: block; width: 100%; height: 100%; background: #000; }
.fenetre-en-lecture { height: 196px; margin: -30px -34px 26px; background: #000; }
@media (max-width: 768px) { .fenetre-en-lecture { margin: -30px -24px 22px; height: 170px; } }

/* Formations : la vidéo seule dans sa fenêtre, « Déjà inscrit ? » séparé sous les boutons */
.entete-ecran .carte-video-seule { padding-bottom: 0; overflow: hidden; }
.carte-video-seule .fenetre-video, .carte-video-seule .fenetre-en-lecture { height: auto; aspect-ratio: 16 / 9; margin-bottom: 0; }
.deja-inscrit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 30px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); font-size: 15.5px; color: rgba(255,255,255,.78); }
.deja-inscrit a { color: var(--cuivre-clair); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(235,179,148,.5); text-underline-offset: 4px; }
.deja-inscrit a:hover { color: #fff; }

/* « Mes premiers pas » gratuit : le formulaire courriel sur fond clair */
.form-gratuit { width: 100%; }
.form-gratuit .guide-champ input { border-color: var(--bordure); background: var(--blanc); color: var(--texte); }
.form-gratuit .guide-champ input::placeholder { color: var(--texte-doux); }
.form-gratuit .guide-champ input:focus { border-color: var(--cuivre); background: var(--blanc); }
.form-gratuit .guide-case { color: var(--texte); font-size: 14px; }
.form-gratuit .form-erreur { color: #B3261E; }
.form-gratuit .guide-succes { background: var(--beige); color: var(--teal); }
.form-gratuit .guide-mention { color: var(--texte-doux); font-size: 13px; margin-top: 10px; }
@media (max-width: 560px) { .form-gratuit .guide-champ { flex-direction: column; } }

/* Aperçu du tableau de bord Excel (pages produits) */
.apercu-tableau { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: center; margin: 44px 0 0; }
.apercu-tableau img { display: block; width: 100%; height: auto; border-radius: var(--r-carte); box-shadow: 0 34px 60px -36px rgba(0,48,60,.7); }
.apercu-tableau figcaption { display: grid; gap: 10px; }
.apercu-tableau figcaption strong { font-size: 24px; font-weight: 700; color: var(--teal); }
.apercu-tableau figcaption span { font-size: 16.5px; line-height: 1.6; color: var(--texte); }
.apercu-tableau figcaption small { font-size: 13px; color: var(--texte-doux); }
@media (max-width: 860px) { .apercu-tableau { grid-template-columns: 1fr; gap: 20px; } }

/* Contraste AA : petit texte de la tuile « Formation en entreprise » sur fond beige */

/* Menu déroulant refermé après un clic (voir app.js) */
.a-sous-menu.menu-ferme:hover > .sous-menu, .a-sous-menu.menu-ferme:focus-within > .sous-menu { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* ===== Formations v3 : vidéo plus grande, introduction gratuite visible, cartes claires ===== */
.fo-entete .entete-page-grille { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.fo-entete h1 { font-size: clamp(36px, 4.4vw, 58px); }
.fo-entete .pour-qui-carte { max-width: none; }
.fo-gratuit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px 44px; border-radius: 20px; background: var(--blanc); border: 2px solid var(--cuivre); box-shadow: 0 40px 70px -46px rgba(0,48,60,.55); }
.fo-sceau { display: inline-block; margin: 0 0 14px; padding: 7px 16px; border-radius: 999px; background: var(--cuivre); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fo-gratuit-texte > p { margin-top: 14px; }
.fo-gratuit .form-gratuit { margin-top: 22px; }
.fo-faits { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.fo-faits li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--texte); }
.fo-faits svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--cuivre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fo-faits-ligne { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fo-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.fo-carte { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--blanc); border: 1px solid var(--bordure); box-shadow: 0 30px 56px -42px rgba(0,48,60,.55); }
.fo-carte .fo-video { border-radius: 0; margin: 0; }

.fo-carte-corps { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.fo-type { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre-fonce); }
.fo-etiquette { padding: 4px 11px; border-radius: 999px; background: var(--teal); color: #fff; letter-spacing: .08em; }

.fo-carte h3 { margin: 10px 0 0; font-size: 26px; font-weight: 700; color: var(--teal); line-height: 1.2; }
.fo-pourqui { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--beige); font-size: 15px; color: var(--texte); }
.fo-pourqui strong { color: var(--teal); }
.fo-promesse { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--texte); }
.fo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 22px; }
.fo-carte .fo-faits { margin-bottom: 4px; }
@media (max-width: 1024px) {
  .fo-entete .entete-page-grille { grid-template-columns: 1fr; gap: 36px; }
  .fo-gratuit { grid-template-columns: 1fr; padding: 30px 24px; gap: 28px; }
}
@media (max-width: 760px) { .fo-grille { grid-template-columns: 1fr; } }

/* ===== Atelier QuickBooks v2 : présentiel, tout compris, liste d'attente ===== */
.at-pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.at-pastilles li { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 14.5px; font-weight: 600; }
.at-pastilles b { color: var(--cuivre-clair); font-weight: 800; }

.at-attente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; color: #fff; }
.at-attente p { color: rgba(255,255,255,.92); }
.at-prix { margin-top: 20px; font-size: 20px; }
.at-prix b { font-size: 44px; font-weight: 800; color: #fff; margin-right: 6px; }
.at-prix span { display: block; margin-top: 4px; font-size: 15px; color: rgba(255,255,255,.85); }
.at-form .guide-case, .at-form .guide-mention { color: rgba(255,255,255,.9); }
@media (max-width: 1024px) {  .at-attente { grid-template-columns: 1fr; gap: 28px; } }

/* Offre glissante des formations : vignette « Gratuit » (pas d'image à charger) */
.offre-vignette {
  position: relative; display: grid; place-items: center; width: 76px; aspect-ratio: 4 / 5; border-radius: 6px;
  background: linear-gradient(150deg, #0A4150 0%, var(--teal) 70%); transform: rotate(-4deg);
  box-shadow: 0 12px 20px -12px rgba(0,30,38,.6);
}
.offre-vignette svg { width: 30px; height: 30px; fill: var(--blanc); margin-bottom: 14px; }
.offre-vignette small {
  position: absolute; left: 6px; right: 6px; bottom: 8px; padding: 3px 0; border-radius: 999px; text-align: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blanc);
  background: linear-gradient(90deg, #7A3E22, #C47C5A 50%, #EBB394);
}
@media (max-width: 768px) { .offre-vignette { width: 56px; } .offre-vignette svg { width: 22px; height: 22px; margin-bottom: 12px; } .offre-vignette small { font-size: 8px; bottom: 6px; } }

/* À propos : un seul « K » partagé par les prénoms des fondateurs. Deux traits fins : Rafi-K (teal) et K-enza (cuivre) se croisent sous le K. */
.logo-k {
  display: grid; width: max-content; max-width: 100%; grid-template-columns: auto auto auto; column-gap: .04em; row-gap: 5px; align-items: end;
  margin: 20px 0 12px; font-size: clamp(30px, 3.6vw, 40px); font-weight: 300; letter-spacing: .03em; color: var(--teal); line-height: 1;
}
.logo-k-mot { grid-row: 1; }
.logo-k-mot:first-child { grid-column: 1; }
.logo-k-mot:nth-of-type(2) { grid-column: 3; }
.logo-k b {
  grid-row: 1; grid-column: 2; padding: 0 .02em; font-size: 1.18em; font-weight: 700; line-height: .86;
  background: linear-gradient(160deg, #7A3E22, #C47C5A 55%, #EBB394); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-k-trait { display: block; height: 2px; border-radius: 2px; }
.logo-k-trait-a { grid-row: 2; grid-column: 1 / 3; background: var(--teal); }
.logo-k-trait-b { grid-row: 3; grid-column: 2 / 4; background: linear-gradient(90deg, #C47C5A, #EBB394); }
.logo-k-nom { grid-row: 4; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; line-height: 1; }
.logo-k-nom-a { grid-column: 1; justify-self: start; color: var(--teal); }
.logo-k-nom-b { grid-column: 3; justify-self: end; color: var(--cuivre-fonce); }
.logo-k-devise { display: block; margin: 4px 0 10px; font-size: 16px; font-style: italic; font-weight: 500; color: var(--cuivre-fonce); }
@media (forced-colors: active) { .logo-k b { color: CanvasText; background: none; } .logo-k-trait { background: CanvasText; } }

/* À propos : « anatomie » du logo — repères numérotés sur le logo, explications à côté */
.logo-anatomie {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 56px; align-items: center; max-width: 980px; margin: 56px auto 64px;
  padding: 44px 48px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte);
}
.logo-anatomie-image { position: relative; margin: 0; padding: 18px; }
.logo-anatomie-image img { display: block; width: 100%; height: auto; }
.logo-repere {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 800; color: var(--blanc);
  background: linear-gradient(145deg, #7A3E22, #C47C5A 60%, #EBB394); box-shadow: 0 0 0 4px var(--blanc), 0 8px 16px -8px rgba(0,30,38,.6);
  transition: transform .25s var(--ease);
}
.logo-anatomie-texte h3 { margin: 6px 0 22px; font-size: 24px; font-weight: 300; color: var(--teal); }
.logo-anatomie-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.logo-anatomie-liste li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
.logo-num {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 800;
  color: var(--cuivre-fonce); border: 1.5px solid var(--cuivre); transition: background .25s var(--ease), color .25s var(--ease);
}
.logo-anatomie-liste strong { display: block; margin-bottom: 2px; font-size: 16.5px; color: var(--teal); }
.logo-anatomie-liste p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--texte); }
.logo-anatomie-vedette > div { padding: 18px 20px 16px; margin: -6px 0 0; border-radius: 10px; background: var(--ivoire); border-left: 3px solid var(--cuivre); }
.logo-anatomie-vedette .logo-k { margin: 14px 0 8px; }
.logo-anatomie-vedette .logo-k-devise { margin: 8px 0 0; }
/* survol d'une explication : son repère grossit sur le logo */
.logo-anatomie-liste li:hover .logo-num { background: var(--cuivre); color: var(--blanc); }
.logo-anatomie:has(.logo-anatomie-liste li:nth-child(1):hover) .logo-repere:nth-of-type(1),
.logo-anatomie:has(.logo-anatomie-liste li:nth-child(2):hover) .logo-repere:nth-of-type(2),
.logo-anatomie:has(.logo-anatomie-liste li:nth-child(3):hover) .logo-repere:nth-of-type(3),
.logo-anatomie:has(.logo-anatomie-liste li:nth-child(4):hover) .logo-repere:nth-of-type(4) { transform: translate(-50%, -50%) scale(1.3); }
@media (max-width: 768px) {
  .logo-anatomie { grid-template-columns: 1fr; gap: 28px; margin: 40px 0 48px; padding: 28px 20px; }
  .logo-anatomie-image { width: min(240px, 80%); margin: 0 auto; }
  .logo-anatomie-texte h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .logo-repere, .logo-num { transition: none; } }

/* Accueil : la présentation du cabinet en tête de la liste des vidéos */

/* Prix des formations (décision de Rafik, 2026-09-29 : prix comptant, avant taxes) */
.fo-prix { margin: 18px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: var(--teal); font-variant-numeric: tabular-nums; }
.fo-prix small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--cuivre-fonce); }
.programme-entete .fo-prix { margin: 4px 0 18px; }
.pour-qui-faits .fait-prix strong { font-size: 1.15em; font-weight: 800; }
.fo-carte-corps .fo-prix { margin-top: auto; padding-top: 20px; }
.fo-carte-corps .fo-prix + .fo-actions { margin-top: 0; padding-top: 16px; }

/* Accueil : section vidéos en « liste de lecture » (Rafik, 2026-09-29 : l'ancienne mise en page n'était pas esthétique)
   Vidéo en grand à gauche, liste compacte à droite dans un seul encadré ; le résumé ne s'affiche que pour la vidéo choisie. */

/* Petits écrans : bouton ▶ et durée plus discrets, pour ne pas cacher l'image de départ */
@media (max-width: 600px) {
  .video-affiche-lecture { width: 58px; height: 58px; }
  .video-affiche-lecture svg { width: 22px; height: 22px; margin-left: 3px; }
  .video-affiche-duree { left: 10px; bottom: 10px; padding: 4px 10px; font-size: 11px; }
}

/* Accueil : section vidéos v3 « Choisissez votre question, on vous répond en vidéo » (Rafik, 2026-09-29 : idée plus claire, texte plus gros)
   6 cartes-questions, puis la réponse : la vidéo en grand + un encadré (question en gros, réponse en bref, rendez-vous). */
.qv-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.qv-grille li { display: flex; }
.qv-carte {
  display: grid; grid-template-columns: 50px 1fr; gap: 16px; align-items: center; width: 100%; padding: 20px 22px; text-align: left; font: inherit; color: var(--teal);
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-carte); cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.qv-carte:hover { border-color: var(--cuivre); transform: translateY(-2px); box-shadow: 0 18px 30px -24px rgba(0,30,38,.55); }
.qv-icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--beige); }
.qv-icone svg { width: 24px; height: 24px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qv-texte strong { display: block; font-size: 17.5px; line-height: 1.35; font-weight: 700; }
.qv-meta { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--cuivre-fonce); }
.qv-meta svg { width: 12px; height: 12px; fill: currentColor; }
.qv-carte.est-actif { background: var(--teal); border-color: var(--teal); color: var(--blanc); box-shadow: 0 22px 40px -26px rgba(0,30,38,.8); }
.qv-carte.est-actif .qv-icone { background: var(--cuivre-degrade); box-shadow: 0 8px 16px -8px rgba(0,0,0,.5); }   /* rond cuivré plein (l'ancien cuivre transparent donnait un gris terne) */
.qv-carte.est-actif .qv-icone svg { stroke: var(--blanc); }
.qv-carte.est-actif .qv-meta { color: var(--cuivre-clair); }
.qv-reponse { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; margin-top: 28px; align-items: stretch; }
.qv-video { align-self: center; }
.qv-panneau { display: flex; flex-direction: column; padding: 34px 34px 30px; border-radius: var(--r-carte); background: var(--teal); color: var(--blanc); box-shadow: 0 30px 50px -36px rgba(0,30,38,.8); }
.qv-etiquette { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cuivre-clair); }
.qv-question { margin: 0 0 26px; font-size: 26px; font-weight: 300; line-height: 1.3; }
.qv-resume { margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.9); }
.qv-actions { margin-top: auto; padding-top: 26px; }
.qv-note { margin: 10px 0 0; font-size: 14px; color: rgba(255,255,255,.72); }
@media (max-width: 1024px) {
  .qv-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qv-reponse { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .qv-grille { grid-template-columns: 1fr; gap: 10px; }
  .qv-carte { grid-template-columns: 42px 1fr; gap: 14px; padding: 16px 18px; }
  .qv-icone { width: 42px; height: 42px; }
  .qv-texte strong { font-size: 16.5px; }
  .qv-panneau { padding: 26px 22px 24px; }
  .qv-question { font-size: 22px; }
  .qv-resume { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .qv-carte { transition: none; } .qv-carte:hover { transform: none; } }

/* Formations : une identité par formation (Rafik, 2026-09-29 : « elles se ressemblent toutes ») — couleurs de la charte seulement */
.fo-media { position: relative; }

/* (ruban retiré : il répétait le haut de l'image — Rafik) */
/* 1. Comptabilité Élite : la carte vedette, bleu profond et cuivre */
.fo-theme-elite { background: var(--teal); border-color: var(--teal); }

.fo-theme-elite .video-affiche-voile { background: none; }
.fo-theme-elite h3, .fo-theme-elite .fo-prix { color: var(--blanc); }
.fo-theme-elite .fo-type, .fo-theme-elite .fo-prix small, .fo-theme-elite .fo-pourqui strong { color: var(--cuivre-clair); }
.fo-theme-elite .fo-etiquette { background: var(--cuivre); }
.fo-theme-elite .fo-pourqui { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.fo-theme-elite .fo-promesse, .fo-theme-elite .fo-faits li { color: rgba(255,255,255,.88); }
.fo-theme-elite .fo-faits svg { stroke: var(--cuivre-clair); }
/* 2. Mes premiers pas : ivoire et cuivre, léger */

/* 3. QuickBooks 360° : bleu nuit */
.fo-theme-360 { border-top: 6px solid var(--encre); }

.fo-theme-360 .video-affiche-voile { background: none; }
.fo-theme-360 .fo-type { color: var(--encre); }
.fo-theme-360 .fo-pourqui { background: rgba(19,30,41,.06); }
.fo-theme-360 .bouton-teal { background: var(--encre); }
.fo-theme-360 .bouton-contour { border-color: var(--encre); color: var(--encre); }
.fo-theme-360 .bouton-contour:hover { background: var(--encre); color: var(--blanc); }
/* 4. L'atelier : sable et cuivre, chaleureux (en personne) */
.fo-theme-atelier { background: var(--beige); border-top: 6px solid var(--cuivre); }

.fo-theme-atelier .video-affiche-voile { background: none; }
.fo-theme-atelier .fo-pourqui { background: rgba(255,255,255,.7); }
.fo-theme-atelier .fo-etiquette { background: var(--cuivre-fonce); }
.fo-theme-atelier .fo-type { color: var(--cuivre-fonce); }

/* Contact, « Tout peut se faire à distance » : une couleur par étape (Rafik : « les trois icônes ont la même couleur ») */
.distance-etapes li:nth-child(1) .distance-icone { background: var(--teal); }
.distance-etapes li:nth-child(2) .distance-icone { background: var(--cuivre-degrade); }
.distance-etapes li:nth-child(3) .distance-icone { background: var(--encre); }
.distance-etapes .distance-icone svg { stroke: var(--blanc); }
.distance-etapes li:nth-child(1) .distance-icone svg, .distance-etapes li:nth-child(3) .distance-icone svg { stroke: var(--cuivre-clair); }
.distance-etapes .distance-icone { box-shadow: 0 10px 18px -10px rgba(0,30,38,.55); }
.distance-etapes li:nth-child(1):hover .distance-icone { background: var(--teal); }
.distance-etapes li:nth-child(2):hover .distance-icone { background: var(--cuivre-degrade); }
.distance-etapes li:nth-child(3):hover .distance-icone { background: var(--encre); }
.distance-etapes li:hover .distance-icone svg { stroke: var(--blanc); }

/* Accueil : « Pourquoi les entreprises nous confient leur comptabilité » v2 (Rafik, 2026-09-29 : « tu peux faire mieux »)
   Bandeau bleu profond : à gauche le titre, les preuves et le rendez-vous ; à droite 4 engagements numérotés. */

/* Le « + » des volets et des questions change de couleur au survol, comme le titre (Rafik, 2026-09-29) */
.volet-bouton:hover .plus, .question-bouton:hover .plus,
.volet-bouton:focus-visible .plus, .question-bouton:focus-visible .plus { border-color: var(--cuivre); background: var(--cuivre); }
.volet-bouton:hover .plus::before, .volet-bouton:hover .plus::after,
.question-bouton:hover .plus::before, .question-bouton:hover .plus::after,
.volet-bouton:focus-visible .plus::before, .volet-bouton:focus-visible .plus::after,
.question-bouton:focus-visible .plus::before, .question-bouton:focus-visible .plus::after { background: var(--blanc); }

/* Section vidéos, retouches (Rafik, 2026-09-29) :
   1) survol d'une carte-question : proche de la carte choisie, en plus doux (teinte bleutée + icône cuivrée) ;
   2) encadré de réponse CLAIR, pour qu'on comprenne que c'est l'explication, pas la vidéo. */
.qv-carte:not(.est-actif):hover { background: rgba(0,48,60,.07); border-color: rgba(0,48,60,.28); }
.qv-carte:not(.est-actif):hover .qv-icone { background: var(--cuivre-degrade); }
.qv-carte:not(.est-actif):hover .qv-icone svg { stroke: var(--blanc); }
/* Encadré de réponse : bleu de la vidéo, en plus clair (option B). Rafik a refusé le bleu très pâle (#E4EDEF, « trop moche ») et le blanc */
.qv-panneau { background: #1C5362; color: var(--blanc); border: 0; border-top: 4px solid var(--cuivre); box-shadow: 0 30px 50px -40px rgba(0,48,60,.55); }
.qv-etiquette { color: var(--cuivre-clair); }
.qv-question { color: var(--blanc); font-weight: 400; }
.qv-resume { color: rgba(255,255,255,.9); }
.qv-note { color: rgba(255,255,255,.8); }

/* Services, « En un coup d'œil » : on doit comprendre d'instinct que chaque ligne se clique (Rafik, 2026-09-29).
   Une flèche toujours visible ; au survol : ligne éclairée, texte en gras qui grossit, flèche cuivrée qui avance. */
.sommaire-services ol a { position: relative; padding-right: 44px; border-radius: 8px; transition: background-color .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease), font-size .2s var(--ease); }
.sommaire-services ol a::after {
  content: "→"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 14px; font-weight: 700; color: var(--cuivre-clair); border: 1px solid rgba(235,179,148,.45); transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.sommaire-services ol a:hover, .sommaire-services ol a:focus-visible { background: rgba(255,255,255,.08); color: var(--blanc); font-weight: 700; font-size: 1.06em; padding-left: 10px; }
.sommaire-services ol a:hover::after, .sommaire-services ol a:focus-visible::after { background: var(--cuivre); border-color: var(--cuivre); color: var(--blanc); transform: translate(4px, -50%); }
/* « Réservation en ligne » sous la liste : même réaction que les 5 services (rond fléché, ligne éclairée, texte gras qui grossit) */
.sommaire-services .sommaire-plus { position: relative; margin-top: 28px; padding: 12px 44px 12px 0; border-top: 0; border-radius: 8px; font-size: 15.5px; font-weight: 500; line-height: 1.45; color: var(--blanc); transition: background-color .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease), font-size .2s var(--ease); }
.sommaire-services .sommaire-plus::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 1px; background: rgba(255,255,255,.14); }
.sommaire-services .sommaire-plus::after {
  content: "→"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 14px; font-weight: 700; color: var(--cuivre-clair); border: 1px solid rgba(235,179,148,.45); transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.sommaire-services .sommaire-plus:hover, .sommaire-services .sommaire-plus:focus-visible { background: rgba(255,255,255,.08); color: var(--blanc); font-weight: 700; font-size: 16.5px; padding-left: 10px; }
.sommaire-services .sommaire-plus:hover::after, .sommaire-services .sommaire-plus:focus-visible::after { background: var(--cuivre); border-color: var(--cuivre); color: var(--blanc); transform: translate(4px, -50%); }
@media (prefers-reduced-motion: reduce) { .sommaire-services ol a, .sommaire-services ol a::after, .sommaire-services .sommaire-plus, .sommaire-services .sommaire-plus::after { transition: none; } }

/* Services — cartes : chiffres lisibles et cartes qui ont l'air cliquables même sans souris (téléphone) */
a.service-carte { box-shadow: 0 22px 36px -30px rgba(0,48,60,.55); }
a.service-carte .service-num { font-weight: 300; color: var(--cuivre); }
a.service-carte .service-pied { color: var(--teal); font-weight: 700; transition: color .25s var(--ease), font-size .25s var(--ease); }
a.service-carte .service-fleche { width: 42px; height: 42px; border: 0; background: var(--cuivre-degrade); color: var(--blanc); box-shadow: 0 10px 18px -10px rgba(122,62,34,.85); }
a.service-carte .service-fleche svg { width: 18px; height: 18px; stroke-width: 2.2; }
a.service-carte h2 { transition: color .25s var(--ease); }
a.service-carte:hover, a.service-carte:focus-visible { box-shadow: 0 30px 44px -30px rgba(0,48,60,.6); }
a.service-carte:hover h2, a.service-carte:focus-visible h2 { color: var(--cuivre-fonce); }
a.service-carte:hover .service-pied, a.service-carte:focus-visible .service-pied { color: var(--cuivre-fonce); font-size: 16px; }
a.service-carte:hover .service-fleche, a.service-carte:focus-visible .service-fleche { background: var(--teal); color: var(--cuivre-clair); transform: translateX(4px) scale(1.08); }

/* ==========================================================================
   Dynamisme des sous-pages (demande de Rafik) : clair au repos, vivant au survol,
   et de petits détails qu'on découvre (lueur qui suit la souris, reflet sur les boutons…)
   ========================================================================== */

/* « Ce qui est inclus » (pages de services) : numéro, icône forte, filet cuivré qui se remplit */
.inclus-grille { counter-reset: inclus; gap: 22px; }
.inclus-carte {
  counter-increment: inclus; position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 24px 40px -34px rgba(0,48,60,.55);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.inclus-carte::before {
  content: counter(inclus, decimal-leading-zero); position: absolute; top: 24px; right: 30px;
  font-size: 38px; font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--cuivre);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.inclus-carte::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--cuivre-fonce), var(--cuivre-clair));
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease);
}
.inclus-carte h3 { padding-right: 58px; transition: color .3s var(--ease); }
.inclus-carte .inclus-icone { border-radius: 16px; background: var(--teal); box-shadow: 0 14px 24px -14px rgba(0,48,60,.8); transition: transform .35s var(--ease); }
.inclus-carte .inclus-icone svg { stroke: var(--cuivre-clair); stroke-width: 1.7; }
.inclus-carte:hover { transform: translateY(-4px); border-color: rgba(196,124,90,.55); box-shadow: 0 32px 50px -32px rgba(0,48,60,.6); }
.inclus-carte:hover::after { transform: scaleY(1); }
.inclus-carte:hover::before { transform: translateY(-3px); color: var(--cuivre-fonce); }
.inclus-carte:hover .inclus-icone { background: var(--cuivre-degrade); transform: rotate(-8deg) scale(1.06); }
.inclus-carte:hover .inclus-icone svg { stroke: var(--blanc); }
.inclus-carte:hover h3 { color: var(--cuivre-fonce); }

/* Ce que contient le produit (pages de la boutique) : même réaction, dans la couleur du produit */
.acquis li { transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.acquis li .inclus-icone { transition: transform .35s var(--ease), background-color .3s var(--ease); }
.acquis li .inclus-icone svg { transition: stroke .3s var(--ease); }
.acquis li:hover { transform: translateY(-3px); border-color: rgba(196,124,90,.5); box-shadow: 0 24px 38px -28px rgba(0,48,60,.5); }
.acquis li:hover .inclus-icone { background: var(--teal); transform: rotate(-8deg) scale(1.06); }
.acquis li:hover .inclus-icone svg { stroke: var(--cuivre-clair); }
.produit-teinte ~ section .acquis li:hover { border-color: var(--accent); }
.produit-teinte ~ section .acquis li:hover .inclus-icone { background: var(--accent-fonce); }
.produit-teinte ~ section .acquis li:hover .inclus-icone svg { stroke: var(--blanc); }

/* Ateliers : la carte se soulève, un liseré cuivré apparaît, l'étiquette de niveau devient cuivrée */
.atelier-carte { position: relative; overflow: hidden; box-shadow: 0 24px 40px -34px rgba(0,48,60,.5); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.atelier-carte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cuivre-degrade); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.atelier-carte:hover { transform: translateY(-4px); border-color: rgba(196,124,90,.55); box-shadow: 0 32px 50px -32px rgba(0,48,60,.6); }
.atelier-carte:hover::before { transform: scaleX(1); }
.atelier-carte:hover .atelier-niveau { background: var(--cuivre-degrade); }

/* Lueur cuivrée qui suit la souris (position donnée par app.js) */
@media (hover: hover) {
  .inclus-carte:hover, .acquis li:hover, .atelier-carte:hover, a.service-carte:hover, .autre-service:hover {
    background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(235,179,148,.2), rgba(235,179,148,0) 65%);
  }
}

/* Les cartes arrivent l'une après l'autre, les icônes font un petit « pop » */
.js .inclus-grille.est-revele .inclus-carte, .js .acquis.est-revele li, .js .ateliers-detail.est-revele .atelier-carte { animation: monte .7s var(--ease) backwards; }
.js .inclus-grille.est-revele .inclus-carte:nth-child(2), .js .acquis.est-revele li:nth-child(2), .js .ateliers-detail.est-revele .atelier-carte:nth-child(2) { animation-delay: .12s; }
.js .inclus-grille.est-revele .inclus-carte:nth-child(3), .js .acquis.est-revele li:nth-child(3), .js .ateliers-detail.est-revele .atelier-carte:nth-child(3) { animation-delay: .24s; }
.js .inclus-grille.est-revele .inclus-carte:nth-child(4), .js .acquis.est-revele li:nth-child(4), .js .ateliers-detail.est-revele .atelier-carte:nth-child(4) { animation-delay: .36s; }
.js .inclus-grille.est-revele .inclus-icone, .js .acquis.est-revele .inclus-icone { animation: icone-pop .6s .25s var(--ease) backwards; }
.js .inclus-grille.est-revele .inclus-carte:nth-child(2) .inclus-icone, .js .acquis.est-revele li:nth-child(2) .inclus-icone { animation-delay: .37s; }
.js .inclus-grille.est-revele .inclus-carte:nth-child(3) .inclus-icone, .js .acquis.est-revele li:nth-child(3) .inclus-icone { animation-delay: .49s; }
.js .inclus-grille.est-revele .inclus-carte:nth-child(4) .inclus-icone, .js .acquis.est-revele li:nth-child(4) .inclus-icone { animation-delay: .61s; }

/* Un reflet de lumière traverse les boutons cuivrés au survol (le bouton de l'accueil garde son reflet automatique) */
.bouton-cuivre { position: relative; overflow: hidden; isolation: isolate; }
.bouton-cuivre:not(.hero .bouton-cuivre)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
  transform: translateX(-130%);
}
.bouton-cuivre:not(.hero .bouton-cuivre):hover::after { transform: translateX(130%); transition: transform .8s var(--ease); }

/* Petits détails partout : texte surligné aux couleurs du cabinet, curseur de saisie cuivré, barre de défilement assortie */
::selection { background: rgba(235,179,148,.6); color: var(--teal); }
input, textarea { caret-color: var(--cuivre); }
html { scrollbar-color: #C9A38E var(--ivoire); }

@media (max-width: 768px) {
  .inclus-carte h3 { padding-right: 0; }
  .inclus-carte::before { top: 26px; right: 22px; font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .inclus-carte, .inclus-carte::before, .inclus-carte::after, .inclus-carte .inclus-icone, .acquis li, .acquis li .inclus-icone,
  .atelier-carte, .atelier-carte::before, .bouton-cuivre::after { transition: none !important; animation: none !important; }
  .inclus-carte:hover, .acquis li:hover, .atelier-carte:hover { transform: none; }
  .inclus-carte:hover .inclus-icone, .acquis li:hover .inclus-icone { transform: none; }
}

/* Formations — « En personne » : la formation en entreprise (photo de la salle, bleu du cabinet) */

.fo-theme-entreprise { border-top: 6px solid var(--teal); }
.fo-theme-entreprise .fo-type { color: var(--teal); }
.fo-theme-entreprise .fo-pourqui { background: rgba(0,48,60,.06); }
.fo-theme-entreprise .fo-prix { font-size: 24px; }
/* Les cartes de formation se soulèvent un peu au survol, comme les autres cartes du site */
.fo-carte { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.fo-carte:hover { transform: translateY(-4px); box-shadow: 0 40px 64px -42px rgba(0,48,60,.65); }
@media (prefers-reduced-motion: reduce) { .fo-carte, .fo-photo img { transition: none; } .fo-carte:hover { transform: none; }  }

/* Accueil — « Nos services comptables » : un vrai bloc qu'on repère (panneau blanc, liseré cuivré,
   icône + accroche sur chaque ligne, ligne ouverte bien marquée, barre de fin vers /services) */
.services-panneau { position: relative; margin-top: 8px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 22px; box-shadow: 0 44px 74px -50px rgba(0,48,60,.6); overflow: hidden; }
.services-panneau::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cuivre-degrade); z-index: 1; }
.services-panneau .volets { border-top: 0; }
.services-panneau .volet { position: relative; transition: background-color .3s var(--ease); }
.services-panneau .volet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--cuivre-fonce), var(--cuivre-clair)); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.services-panneau .volet-bouton { grid-template-columns: 34px 60px 1fr 46px; gap: 20px; padding: 26px 40px 26px 36px; }
.volet-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--teal); box-shadow: 0 14px 24px -14px rgba(0,48,60,.8); transition: transform .35s var(--ease); }
.volet-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--cuivre-clair); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s var(--ease); }
.services-panneau .volet-nom { font-size: 27px; font-weight: 500; line-height: 1.2; }
.services-panneau .volet.est-ouvert .volet-nom { font-weight: 700; }
.volet-accroche { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 400; line-height: 1.45; color: var(--texte-doux); }
/* Survol : la ligne s'éclaire, l'icône devient cuivrée et penche un peu */
.services-panneau .volet:hover { background: rgba(0,48,60,.035); }
.services-panneau .volet-bouton:hover .volet-ico, .services-panneau .volet-bouton:focus-visible .volet-ico { background: var(--cuivre-degrade); transform: rotate(-8deg) scale(1.05); }
.services-panneau .volet-bouton:hover .volet-ico svg, .services-panneau .volet-bouton:focus-visible .volet-ico svg { stroke: var(--blanc); }
/* Service ouvert : fond sable léger, filet cuivré à gauche, icône cuivrée */
.services-panneau .volet.est-ouvert { background: linear-gradient(180deg, rgba(243,235,229,.7) 0%, rgba(255,255,255,0) 260px); }
.services-panneau .volet.est-ouvert::before { transform: scaleY(1); }
.services-panneau .volet.est-ouvert .volet-ico { background: var(--cuivre-degrade); }
.services-panneau .volet.est-ouvert .volet-ico svg { stroke: var(--blanc); }
.services-panneau .volet-interieur { padding: 0 40px 0 170px; }
/* Barre de fin du panneau */
.services-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding: 22px 40px 24px 36px; background: var(--beige); }
.services-pied p { margin: 0; font-size: 16px; color: var(--teal); }
.services-pied-lien { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--teal); text-decoration: none; }
.services-pied-lien span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cuivre-degrade); color: var(--blanc); font-size: 16px; box-shadow: 0 10px 18px -10px rgba(122,62,34,.85); transition: transform .25s var(--ease); }
.services-pied-lien:hover { color: var(--cuivre-fonce); }
.services-pied-lien:hover span { transform: translateX(4px); }

@media (max-width: 1024px) {
  .services-panneau .volet-bouton { grid-template-columns: 30px 52px 1fr 44px; gap: 16px; padding: 22px 28px 22px 26px; }
  .volet-ico { width: 52px; height: 52px; border-radius: 14px; }
  .services-panneau .volet-interieur { padding: 0 28px; }
}
@media (max-width: 760px) {
  .services-panneau { border-radius: 18px; }
  .services-panneau .volet-bouton { grid-template-columns: 46px 1fr 40px; gap: 14px; padding: 20px 18px; }
  .services-panneau .volet-num { display: none; }
  .volet-ico { width: 46px; height: 46px; border-radius: 12px; }
  .volet-ico svg { width: 22px; height: 22px; }
  .services-panneau .volet-nom { font-size: 19px; }
  .volet-accroche { font-size: 14px; }
  .services-panneau .volet-interieur { padding: 0 18px; }
  .services-pied { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-panneau .volet, .services-panneau .volet::before, .volet-ico, .services-pied-lien span { transition: none; }
  .services-panneau .volet-bouton:hover .volet-ico { transform: none; }
}

/* Accueil — « Pourquoi les entreprises nous confient leur comptabilité » : version C (photo du bureau + liste).
   Remplace le bandeau bleu foncé que Rafik n'aimait pas. Photo cadrée sur l'écran VIRTUS et la table. */
.choix-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.choix-photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 70px -40px rgba(0,48,60,.7); }
.choix-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; transition: transform 1.2s var(--ease); }
.choix-photo:hover img { transform: scale(1.04); }
.choix-photo figcaption { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; background: rgba(0,48,60,.9); color: rgba(255,255,255,.86); font-size: 14.5px; line-height: 1.45; }
.choix-photo figcaption strong { display: block; color: var(--blanc); font-size: 16px; }
.choix-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cuivre-degrade); box-shadow: 0 12px 22px -12px rgba(122,62,34,.8); transition: transform .35s var(--ease); }
.choix-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--blanc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.choix-preuves { list-style: none; margin: 0 0 28px; padding: 18px 0 0; border-top: 1px solid var(--bordure); display: flex; flex-wrap: wrap; gap: 10px 26px; }
.choix-preuves li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--teal); }
.choix-preuves svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--cuivre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Les 4 raisons arrivent l'une après l'autre */

/* Toujours le cadrage vertical 4:5 : un cadrage plus large ferait entrer la silhouette floue à gauche de la photo */
@media (max-width: 1024px) { .choix-grille { gap: 40px; } }
@media (max-width: 900px) {
  .choix-grille { grid-template-columns: 1fr; }
  .choix-photo { max-width: 420px; }
}
@media (max-width: 760px) {
  .choix-photo { max-width: none; border-radius: 18px; }
  .choix-photo figcaption { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; font-size: 13.5px; }
  .choix-photo figcaption .choix-ico { width: 40px; height: 40px; }
  
  
}
@media (prefers-reduced-motion: reduce) {
  .choix-photo img, .choix-ico { transition: none; }
  .choix-photo:hover img, .choix-liste li:hover .choix-ico { transform: none; }
  
}

/* Ateliers — « Tout le cycle comptable, dans QuickBooks Online » : 6 étapes reliées par un trait cuivré qui se dessine,
   les étapes apparaissent l'une après l'autre ; au survol, l'icône devient cuivrée et monte. Puis la bande « tout compris ». */
   /* correction : les icônes étaient foncées sur fond foncé */
.cycle-qbo { position: relative; list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; counter-reset: none; }
.cycle-qbo::before { content: ""; position: absolute; left: 6%; right: 6%; top: 36px; height: 2px; background: linear-gradient(90deg, var(--teal), var(--cuivre) 55%, var(--cuivre-clair)); transform-origin: left; }
.js .cycle-qbo.revele:not(.est-revele)::before { transform: scaleX(0); }
.js .cycle-qbo.est-revele::before { animation: filet 1.8s .2s var(--ease) backwards; }
.cycle-qbo li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.cq-ico { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 7px var(--ivoire), 0 18px 30px -16px rgba(0,48,60,.8); transition: transform .35s var(--ease), background .3s var(--ease); }
.cq-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--cuivre-clair); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s var(--ease); }
.cq-ico b { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cuivre-degrade); color: #fff; font-size: 12.5px; font-weight: 800; box-shadow: 0 0 0 3px var(--ivoire); }
.cycle-qbo strong { margin-top: 10px; font-size: 17.5px; line-height: 1.25; color: var(--teal); }
.cq-texte { font-size: 14.5px; line-height: 1.5; color: var(--texte); }
.cq-niveau { margin-top: 4px; padding: 4px 11px; border-radius: 999px; background: rgba(0,48,60,.07); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.cycle-qbo li:hover .cq-ico { background: var(--cuivre-degrade); transform: translateY(-6px) rotate(-6deg); }
.cycle-qbo li:hover .cq-ico svg { stroke: #fff; }
.cycle-qbo li:hover .cq-ico b { background: var(--teal); }
.js .cycle-qbo.est-revele li { animation: monte .6s calc(.2s + var(--i) * .12s) var(--ease) backwards; }
.js .cycle-qbo.est-revele .cq-ico { animation: icone-pop .6s calc(.3s + var(--i) * .12s) var(--ease) backwards; }
/* Bande « tout compris » */
.cq-compris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 52px; padding: 22px 28px; border-radius: 18px; background: var(--beige); }
.cq-compris p { margin: 0; font-size: 17px; color: var(--teal); } .cq-compris p b { font-size: 20px; font-weight: 800; }
.cq-compris ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; }
.cq-compris li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--teal); }
.cq-compris li:last-child { font-weight: 500; color: var(--texte-doux); }
.cq-compris svg { width: 20px; height: 20px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .cycle-qbo { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .cycle-qbo::before { display: none; }
}
@media (max-width: 640px) {
  .cycle-qbo { grid-template-columns: 1fr; row-gap: 22px; }
  .cycle-qbo::before { display: block; left: 35px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--teal), var(--cuivre) 55%, var(--cuivre-clair)); transform-origin: top; }
  .js .cycle-qbo.revele:not(.est-revele)::before { transform: scaleY(0); }
  .cycle-qbo li { grid-template-columns: 72px 1fr; justify-items: start; text-align: left; column-gap: 18px; row-gap: 4px; }
  .cycle-qbo li > :not(.cq-ico) { grid-column: 2; }
  .cq-ico { grid-row: span 4; }
  .cycle-qbo strong { margin-top: 0; }
  .cq-compris { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cq-ico { transition: none; } .cycle-qbo li:hover .cq-ico { transform: none; }
  .js .cycle-qbo.est-revele li, .js .cycle-qbo.est-revele .cq-ico, .js .cycle-qbo.est-revele::before { animation: none; }
}
@media (min-width: 641px) { .cycle-qbo li { grid-template-rows: auto auto 1fr auto; } }

/* Accueil — « Pourquoi » en schéma : « Ce qu'on vit trop souvent → Avec Virtus » (les flèches se dessinent, les rangées arrivent une à une) */
.duel { margin: 30px 0 28px; }
.duel-tete, .duel-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1.35fr); gap: 0 14px; align-items: center; }
.duel-tete { margin-bottom: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.duel-tete span:first-child { color: var(--texte-doux); } .duel-tete span:last-child { color: var(--cuivre-fonce); }
.duel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.duel-avant { display: flex; gap: 10px; align-items: center; margin: 0; padding: 14px 16px; border-radius: 12px; background: rgba(0,48,60,.045); color: var(--texte-doux); font-size: 14.5px; line-height: 1.4; }
.duel-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(94,116,121,.45); }
.duel-x svg { width: 12px; height: 12px; fill: none; stroke: var(--texte-doux); stroke-width: 2.2; stroke-linecap: round; }
.duel-fleche svg { display: block; width: 54px; height: 16px; fill: none; stroke: var(--cuivre); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.duel-apres { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--bordure); box-shadow: 0 22px 36px -30px rgba(0,48,60,.55); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.duel-apres strong { display: block; font-size: 17px; line-height: 1.25; color: var(--teal); }
.duel-apres div > span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--texte); }
.duel-apres .choix-ico { width: 42px; height: 42px; } .duel-apres .choix-ico svg { width: 20px; height: 20px; }
.duel-liste li:hover .duel-apres { transform: translateX(4px); border-color: rgba(196,124,90,.55); }
.duel-liste li:hover .duel-fleche svg { transform: translateX(4px); }
.duel-liste li:hover .choix-ico { transform: rotate(-8deg) scale(1.06); }
.js .choix-texte.est-revele .duel-liste li { animation: monte .6s calc(.2s + var(--i) * .12s) var(--ease) backwards; }
.js .choix-texte.est-revele .duel-fleche path { stroke-dasharray: 60; animation: duel-trace .6s calc(.55s + var(--i) * .12s) var(--ease) backwards; }
@keyframes duel-trace { from { stroke-dashoffset: 60; } }
/* La colonne de texte s'élargit plus tôt (le schéma a besoin de place) */
@media (max-width: 1100px) {
  .choix-grille { grid-template-columns: 1fr; }
  .choix-photo { max-width: 420px; }
}
@media (max-width: 760px) {
  .duel-tete { display: none; }
  .duel-liste { gap: 18px; }
  .duel-liste li { grid-template-columns: 1fr; gap: 6px; }
  .duel-avant { padding: 10px 14px; font-size: 14px; }
  .duel-fleche { justify-self: start; margin-left: 18px; transform: rotate(90deg); }
  .duel-fleche svg { width: 30px; height: 12px; }
  .choix-photo { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .duel-apres, .duel-fleche svg { transition: none; }
  .duel-liste li:hover .duel-apres, .duel-liste li:hover .duel-fleche svg { transform: none; }
  .js .choix-texte.est-revele .duel-liste li, .js .choix-texte.est-revele .duel-fleche path { animation: none; }
}

/* ==========================================================================
   Pages de services : en-tête CLAIR + un SCHÉMA propre à chaque service
   (Rafik : « les sous-pages se ressemblent toutes » — 15 pages avaient la même photo assombrie + carte « Pour qui »)
   ========================================================================== */
.es { position: relative; overflow: hidden; padding: 30px 0 84px; }
.es::after { content: ""; position: absolute; right: -10%; top: -20%; width: 60%; height: 140%; background: radial-gradient(closest-side, rgba(235,179,148,.28), rgba(235,179,148,0)); pointer-events: none; }
.es .enveloppe { position: relative; z-index: 1; }
.es-grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; margin-top: 26px; }
.es h1 { margin: 10px 0 0; }
.es .filet-anime { margin: 22px 0 22px; }
.es-intro { font-size: 19px; line-height: 1.6; color: var(--texte); max-width: 600px; margin: 0 0 20px; }
.es-pourqui { display: flex; gap: 14px; align-items: baseline; max-width: 600px; margin: 0 0 30px; padding: 14px 18px; border-left: 3px solid var(--cuivre); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.75); font-size: 16px; line-height: 1.5; color: var(--texte); }
.es-pourqui span { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-fonce); }
.es-faits { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 22px 0 0; padding: 0; font-size: 14.5px; color: var(--texte-doux); }
.es-faits li { display: flex; align-items: center; gap: 8px; }
.es-faits svg { width: 18px; height: 18px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.es-schema { position: relative; margin: 0; }
.es-carte { padding: 28px 30px 26px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 20px; box-shadow: 0 50px 80px -50px rgba(0,48,60,.7); }
.es-carte-titre { margin: 0 0 20px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre-fonce); }
.es-coches { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 11px; }
.es-coches li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: var(--teal); animation: es-entre .5s calc(.4s + var(--i) * .25s) var(--ease) backwards; }
.es-coches b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cuivre-degrade); }
.es-coches b svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes es-entre { from { opacity: .25; transform: translateX(-8px); } }
.es-badge { position: absolute; right: -14px; top: -16px; padding: 10px 18px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 16px 30px -14px rgba(0,48,60,.8); transform: rotate(4deg); }

/* 01 · Tenue de livres : le rapport du mois */
.es-doc { position: relative; padding: 28px 30px 24px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 20px; box-shadow: 0 50px 80px -50px rgba(0,48,60,.7); transform: rotate(-1deg); }
.es-doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 20px 20px 0 0; background: var(--cuivre-degrade); }
.es-doc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--bordure); }
.es-doc-logo { font-family: Georgia, serif; font-size: 20px; letter-spacing: .12em; color: var(--teal); }
.es-doc-titre { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre-fonce); }
.es-barres { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 12px 14px 0; border-radius: 12px; background: linear-gradient(180deg, rgba(0,48,60,.04), rgba(0,48,60,.08)); }
.es-barres i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #1C5362, var(--teal)); transform-origin: bottom; animation: monte-marche .7s calc(.3s + var(--i) * .08s) var(--ease) backwards; }
.es-barres i:last-child { background: var(--cuivre-degrade); }
.es-doc-pied { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 14.5px; color: var(--texte-doux); }
.es-doc-pied svg { width: 18px; height: 18px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 1.7; }

/* 02 · Redressement : période par période */
.es-periodes { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.es-periodes::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--cuivre) 0%, var(--cuivre) 70%, var(--teal) 100%); transform-origin: top; animation: es-trace 1.6s .3s var(--ease) backwards; }
@keyframes es-trace { from { transform: scaleY(.1); } }
.es-periodes li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: center; animation: es-entre .5s calc(.4s + var(--i) * .3s) var(--ease) backwards; }
.es-point { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cuivre-degrade); box-shadow: 0 0 0 5px var(--blanc); }
.es-point svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.es-periodes strong { display: block; font-size: 17px; color: var(--teal); }
.es-periodes small { display: block; margin-top: 2px; font-size: 14.5px; color: var(--texte); }
.es-periodes s { margin-right: 6px; color: var(--texte-doux); }
.es-jour { margin-top: 4px; padding: 14px 16px 14px 0; border-radius: 14px; background: rgba(0,48,60,.05); }
.es-jour strong { font-size: 19px; }
.es-jour .es-point { background: var(--teal); }
.es-jour .es-point::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cuivre-clair); animation: es-pouls 1.8s ease-out infinite; box-shadow: 0 0 0 0 rgba(235,179,148,.7); }
@keyframes es-pouls { to { box-shadow: 0 0 0 12px rgba(235,179,148,0); } }

/* 03 · Impôts : le calendrier fiscal */
.es-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.es-dates li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed var(--bordure); animation: es-entre .5s calc(.4s + var(--i) * .22s) var(--ease) backwards; }
.es-dates li:last-child { padding-bottom: 0; border-bottom: 0; }
.es-date { display: grid; place-items: center; align-content: center; width: 70px; height: 70px; border-radius: 16px; background: var(--teal); color: var(--cuivre-clair); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; text-align: center; box-shadow: 0 14px 24px -14px rgba(0,48,60,.8); }
.es-date b { font-size: 27px; font-weight: 800; letter-spacing: 0; color: #fff; }
.es-date-cuivre { background: var(--cuivre-degrade); color: #fff; }
.es-date-clair { background: var(--beige); color: var(--cuivre-fonce); box-shadow: none; } .es-date-clair b { color: var(--teal); }
.es-dates strong { display: block; font-size: 17px; color: var(--teal); }
.es-dates small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--texte); }

/* 04 · QuickBooks : votre fichier configuré */
.es-fenetre { overflow: hidden; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 18px; box-shadow: 0 50px 80px -50px rgba(0,48,60,.7); }
.es-fenetre-barre { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--teal); }
.es-fenetre-barre i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.28); }
.es-fenetre-barre i:first-child { background: var(--cuivre-clair); }
.es-fenetre-barre span { margin-left: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }
.es-fenetre-corps { display: grid; grid-template-columns: 64px 1fr; min-height: 300px; }
.es-fenetre-menu { display: grid; align-content: start; gap: 14px; padding: 20px 16px; background: rgba(0,48,60,.05); border-right: 1px solid var(--bordure); }
.es-fenetre-menu i { height: 8px; border-radius: 4px; background: rgba(0,48,60,.14); }
.es-fenetre-menu i:first-child { background: var(--cuivre); }
.es-fenetre-contenu { padding: 22px 26px 24px; }
.es-progression { height: 8px; margin-top: 4px; border-radius: 4px; background: rgba(0,48,60,.08); overflow: hidden; }
.es-progression span { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--cuivre)); transform-origin: left; animation: es-remplit 1.8s .4s var(--ease) backwards; }
@keyframes es-remplit { from { transform: scaleX(.08); } }
.es-pret { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14.5px; font-weight: 700; color: var(--teal); }
.es-pret svg { width: 18px; height: 18px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 05 · Conseil : vos résultats réels et vos prévisions */
.es-graphe { display: block; width: 100%; height: auto; overflow: visible; }
.es-grille-g { fill: none; stroke: rgba(0,48,60,.08); stroke-width: 1; }
.es-aire { fill: rgba(0,48,60,.06); }
.es-reel { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: es-dessine 1.4s .3s var(--ease) backwards; }
.es-prevision { fill: none; stroke: var(--cuivre); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 7; animation: es-apparait .8s 1.5s var(--ease) backwards; }
.es-auj { fill: none; stroke: rgba(196,124,90,.5); stroke-width: 1.2; stroke-dasharray: 3 4; }
.es-pt { fill: var(--blanc); stroke: var(--cuivre); stroke-width: 3; }
.es-graphe text { font-size: 11px; font-weight: 700; letter-spacing: .06em; fill: var(--cuivre-fonce); }
@keyframes es-dessine { from { stroke-dashoffset: 100; } }
@keyframes es-apparait { from { opacity: 0; } }
.es-legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 16px; font-size: 13.5px; color: var(--texte); }
.es-legende span { display: flex; align-items: center; gap: 8px; }
.es-legende span::before { content: ""; width: 22px; height: 3px; border-radius: 2px; }
.es-l-reel::before { background: var(--teal); }
.es-l-prev::before { background: repeating-linear-gradient(90deg, var(--cuivre) 0 5px, transparent 5px 9px); }
.es-etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--bordure); }
.es-etiquettes li { padding: 6px 12px; border-radius: 999px; background: var(--beige); font-size: 13.5px; font-weight: 600; color: var(--teal); }

@media (max-width: 1024px) {
  .es-grille { grid-template-columns: 1fr; gap: 44px; }
  .es-schema { max-width: 560px; }
}
@media (max-width: 760px) {
  .es { padding-bottom: 64px; }
  .es-intro { font-size: 17px; }
  .es-pourqui { flex-direction: column; gap: 4px; }
  .es-badge { right: 8px; top: -14px; }
  .es-carte, .es-doc { padding: 22px 20px 20px; }
  .es-fenetre-corps { grid-template-columns: 1fr; }
  .es-fenetre-menu { display: none; }
  .es-dates li { grid-template-columns: 60px 1fr; gap: 12px; }
  .es-date { width: 60px; height: 60px; } .es-date b { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .es-coches li, .es-barres i, .es-periodes::before, .es-periodes li, .es-jour .es-point::after, .es-dates li,
  .es-progression span, .es-reel, .es-prevision { animation: none !important; }
}

/* Audit du 2026-09-29 : petits textes lisibles (contraste d'au moins 4,5) */
.fo-sceau, .fo-theme-elite .fo-etiquette { background: var(--cuivre-fonce); }   /* blanc sur cuivre clair = 3,3 */
.cq-compris li:last-child { color: var(--texte); }                                /* gris doux sur beige = 4,2 */
/* Audit du 2026-09-29 : liens du pied de page plus faciles à toucher au doigt sur téléphone (zone de 40 px) */
@media (max-width: 760px) {
  .pied-colonnes li { margin-bottom: 2px; }
  .pied-colonnes li a, .pied-lien-bouton { display: inline-flex; align-items: center; min-height: 40px; padding: 0; }
}
/* Blogue, téléphone : la ligne « rubrique · date · lecture » tenait juste sur une ligne et passait à deux pendant le chargement de la police */
@media (max-width: 480px) { .article-meta { gap: 6px 12px; font-size: 13.5px; } }

/* ==========================================================================
   VERSION 3 (30 septembre 2026) — carte blanche : sections mieux définies, schémas, moins de redondance
   ========================================================================== */

/* Accueil, téléphone : les 3 cartes du premier écran répètent ce qui suit → cachées (le bouton principal reste en vue) */
@media (max-width: 760px) { .hero-cartes { display: none; } }
/* Bandeau des secteurs */
.bandeau-tous a { color: var(--cuivre-clair); font-weight: 600; }
/* « Pourquoi » : la liste des preuves termine la section */
.choix-preuves-fin { margin-bottom: 0; }

/* Accueil — le relais Virtus → CPA partenaires → vous (schéma, à la place des deux cartes à initiales) */
.relais { position: relative; list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.relais-etape { position: relative; display: grid; align-content: start; gap: 8px; padding: 28px 28px 26px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 20px; box-shadow: 0 30px 50px -40px rgba(0,48,60,.55); }
.relais-etape + .relais-etape::before { content: ""; position: absolute; left: -44px; top: 58px; width: 44px; height: 2px; background: linear-gradient(90deg, var(--cuivre), var(--cuivre-clair)); }
.relais-etape + .relais-etape::after { content: ""; position: absolute; left: -12px; top: 53px; width: 8px; height: 8px; border-right: 2px solid var(--cuivre); border-bottom: 2px solid var(--cuivre); transform: rotate(-45deg); }
.relais-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--teal); box-shadow: 0 14px 24px -14px rgba(0,48,60,.8); }
.relais-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--cuivre-clair); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.relais-cpa .relais-ico { background: var(--cuivre-degrade); } .relais-cpa .relais-ico svg { stroke: var(--blanc); }
.relais-vous .relais-ico { background: var(--beige); box-shadow: none; } .relais-vous .relais-ico svg { stroke: var(--cuivre-fonce); }
.relais-qui { margin: 10px 0 0; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-fonce); }
.relais-etape h3 { margin: 0; font-size: 21px; line-height: 1.25; color: var(--teal); }
.relais-etape ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.relais-etape ul li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.45; color: var(--texte); }
.relais-etape ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 5px; border-left: 1.6px solid var(--cuivre); border-bottom: 1.6px solid var(--cuivre); transform: rotate(-45deg); }
.relais-noms { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--bordure); }
.relais-noms span { padding: 5px 11px; border-radius: 999px; background: var(--beige); font-size: 13px; font-weight: 600; color: var(--teal); }
.relais-lien { margin: 26px 0 0; }
.js .relais.est-revele .relais-etape { animation: monte .6s calc(.15s + var(--i) * .18s) var(--ease) backwards; }
.js .relais.est-revele .relais-etape + .relais-etape::before { transform-origin: left; animation: filet .5s calc(.35s + var(--i) * .18s) var(--ease) backwards; }
.relais-etape { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.relais-etape:hover { transform: translateY(-4px); box-shadow: 0 36px 54px -34px rgba(0,48,60,.6); }
@media (max-width: 900px) {
  .relais { grid-template-columns: 1fr; gap: 34px; }
  .relais-etape + .relais-etape::before { left: 44px; top: -34px; width: 2px; height: 34px; background: linear-gradient(180deg, var(--cuivre), var(--cuivre-clair)); }
  .relais-etape + .relais-etape::after { left: 41px; top: -12px; transform: rotate(45deg); }
  .js .relais.est-revele .relais-etape + .relais-etape::before { transform-origin: top; animation-name: es-trace; }
}

/* Accompagnement — le « billet » de réservation (en-tête) */
.billet { position: relative; padding: 26px 28px 22px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 18px; box-shadow: 0 50px 80px -50px rgba(0,48,60,.7); transform: rotate(-1deg); overflow: hidden; }
.billet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--cuivre-degrade); }
.billet-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.billet-logo { font-family: Georgia, serif; font-size: 20px; letter-spacing: .12em; color: var(--teal); }
.billet-type { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-fonce); }
.billet-titre { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--teal); }
.billet-prix { margin: 6px 0 18px; font-size: 44px; font-weight: 300; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; }
.billet-prix small { font-size: 15px; font-weight: 600; color: var(--cuivre-fonce); }
.billet-details { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px dashed var(--bordure); display: grid; gap: 12px; }
.billet-details li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--texte); }
.billet-details b { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre-fonce); padding-top: 3px; }
.billet-pied { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 22px -28px -22px; padding: 16px 28px; background: var(--beige); }
.billet-pied::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0; border-top: 2px dashed rgba(196,124,90,.5); }
.billet-coche { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--teal); }
.billet-coche svg { width: 18px; height: 18px; fill: none; stroke: var(--cuivre-fonce); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.billet-note { font-size: 13px; color: var(--texte-doux); }
.es-billet:hover .billet { transform: rotate(0deg); } .billet { transition: transform .4s var(--ease); }

/* Déclaration d'impôts — le parcours de la déclaration (en-tête) */
.flux { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.flux::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(180deg, var(--cuivre), var(--cuivre) 65%, var(--teal)); transform-origin: top; animation: es-trace 1.6s .3s var(--ease) backwards; }
.flux li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; animation: es-entre .5s calc(.35s + var(--i) * .28s) var(--ease) backwards; }
.flux-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cuivre-degrade); box-shadow: 0 0 0 5px var(--blanc); }
.flux-ico svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flux strong { display: block; font-size: 17px; color: var(--teal); }
.flux small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--texte); }
.flux-fin { padding: 12px 14px 12px 0; border-radius: 14px; background: rgba(0,48,60,.05); }
.flux-fin .flux-ico { background: var(--teal); } .flux-fin .flux-ico svg { stroke: var(--cuivre-clair); }
.flux-dates { display: grid; gap: 8px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--bordure); font-size: 13.5px; line-height: 1.4; color: var(--texte-doux); }
.flux-dates span { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; }
.flux-dates b { font-size: 15px; color: var(--teal); }

/* Déclaration d'impôts — les documents à préparer se cochent un à un quand la section apparaît */
.js .documents.est-revele .liste-crochets li { animation: es-entre .45s var(--ease) backwards; }
.js .documents.est-revele .liste-crochets li::before { animation: coche-pop .4s var(--ease) backwards; }
@keyframes coche-pop { from { transform: rotate(-45deg) scale(0); } 70% { transform: rotate(-45deg) scale(1.4); } to { transform: rotate(-45deg) scale(1); } }
.js .documents.est-revele .document-groupe:nth-child(1) li:nth-child(1), .js .documents.est-revele .document-groupe:nth-child(1) li:nth-child(1)::before { animation-delay: .2s; }
.js .documents.est-revele .document-groupe:nth-child(1) li:nth-child(2), .js .documents.est-revele .document-groupe:nth-child(1) li:nth-child(2)::before { animation-delay: .32s; }
.js .documents.est-revele .document-groupe:nth-child(1) li:nth-child(3), .js .documents.est-revele .document-groupe:nth-child(1) li:nth-child(3)::before { animation-delay: .44s; }
.js .documents.est-revele .document-groupe:nth-child(1) li:nth-child(4), .js .documents.est-revele .document-groupe:nth-child(1) li:nth-child(4)::before { animation-delay: .56s; }
.js .documents.est-revele .document-groupe:nth-child(2) li:nth-child(1), .js .documents.est-revele .document-groupe:nth-child(2) li:nth-child(1)::before { animation-delay: .5s; }
.js .documents.est-revele .document-groupe:nth-child(2) li:nth-child(2), .js .documents.est-revele .document-groupe:nth-child(2) li:nth-child(2)::before { animation-delay: .62s; }
.js .documents.est-revele .document-groupe:nth-child(2) li:nth-child(3), .js .documents.est-revele .document-groupe:nth-child(2) li:nth-child(3)::before { animation-delay: .74s; }
.js .documents.est-revele .document-groupe:nth-child(2) li:nth-child(4), .js .documents.est-revele .document-groupe:nth-child(2) li:nth-child(4)::before { animation-delay: .86s; }
.js .documents.est-revele .document-groupe:nth-child(3) li:nth-child(1), .js .documents.est-revele .document-groupe:nth-child(3) li:nth-child(1)::before { animation-delay: .8s; }
.js .documents.est-revele .document-groupe:nth-child(3) li:nth-child(2), .js .documents.est-revele .document-groupe:nth-child(3) li:nth-child(2)::before { animation-delay: .92s; }
.js .documents.est-revele .document-groupe:nth-child(3) li:nth-child(3), .js .documents.est-revele .document-groupe:nth-child(3) li:nth-child(3)::before { animation-delay: 1.04s; }

/* FAQ — un thème sur deux sur fond beige : on voit où un thème finit et où le suivant commence */
.faq-groupes { gap: 28px; }
.faq-groupe { padding: 26px 28px 18px; border-radius: 18px; }
.faq-groupe:nth-child(even of :not([hidden])) { background: var(--beige); }
@media (max-width: 760px) { .faq-groupe { padding: 18px 16px 12px; } }

@media (max-width: 760px) {
  .billet { padding: 22px 20px 20px; } .billet-pied { margin: 20px -20px -20px; padding: 14px 20px; }
  .billet-details li { grid-template-columns: 60px 1fr; }
  .billet-prix { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .relais-etape, .billet { transition: none; } .relais-etape:hover { transform: none; }
  .js .relais.est-revele .relais-etape, .js .relais.est-revele .relais-etape + .relais-etape::before, .flux::before, .flux li,
  .js .documents.est-revele .liste-crochets li, .js .documents.est-revele .liste-crochets li::before { animation: none !important; }
}
/* Blogue, téléphone : la rubrique sur sa propre ligne, la date et la durée sur la suivante — même hauteur quelle que soit la police (V3, audit) */
@media (max-width: 480px) { .article-meta .article-cat { flex-basis: 100%; } .article-meta { gap: 6px 14px; } }

/* ==========================================================================
   VERT QUICKBOOKS (Rafik, 30 sept. 2026) : « une petite touche, pas partout » — le vert n'apparaît QUE dans la
   pastille « QuickBooks Online ». Tout le reste garde le bleu et le cuivre de la charte.
   ========================================================================== */
:root { --vert-qb: #2CA01C; --vert-qb-fonce: #1F7A14; --vert-qb-pale: #E9F6E6; }
.chip-qb { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--vert-qb-pale); color: var(--vert-qb-fonce); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.chip-qb::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert-qb); }
.sureminence .chip-qb { margin-left: 12px; }

/* Formations — « Nos 4 formations » en un coup d'œil (Rafik : « ce n'est pas clair qu'il y a 4 volets ») */
.fo-apercu-liste { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fo-apercu-liste a { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; height: 100%; padding: 20px 20px 18px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 16px; text-decoration: none; color: var(--texte); box-shadow: 0 24px 40px -34px rgba(0,48,60,.5); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.fo-apercu-liste a:hover, .fo-apercu-liste a:focus-visible { transform: translateY(-4px); border-color: rgba(196,124,90,.55); box-shadow: 0 32px 50px -32px rgba(0,48,60,.6); }
.fo-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cuivre-degrade); color: var(--blanc); font-size: 18px; font-weight: 800; box-shadow: 0 10px 18px -10px rgba(122,62,34,.85); }
.fo-apercu-texte { display: grid; gap: 4px; }
.fo-apercu-texte strong { font-size: 17px; line-height: 1.25; color: var(--teal); }
.fo-apercu-texte > span { font-size: 14px; line-height: 1.4; color: var(--texte); }
.fo-apercu-texte em { font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cuivre-fonce); }

.js .fo-apercu-liste.est-revele li { animation: monte .6s calc(.15s + var(--i) * .12s) var(--ease) backwards; }
/* Le numéro de chaque formation sur sa carte, comme dans sa vidéo */
.fo-num-carte { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--cuivre-degrade); color: var(--blanc); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.fo-carte { position: relative; }
.fo-num-coin { position: absolute; left: 16px; top: 16px; z-index: 3; box-shadow: 0 10px 18px -10px rgba(0,30,38,.7); }
.fo-num-plus { background: var(--teal); }
.fo-gratuit .fo-num-carte { margin: 0 0 14px 10px; vertical-align: top; }
@media (max-width: 1024px) { .fo-apercu-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fo-apercu-liste { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fo-apercu-liste a { transition: none; } .fo-apercu-liste a:hover { transform: none; } .js .fo-apercu-liste.est-revele li { animation: none; } }

/* Écrans d'ordinateur portable (jusqu'à 1 536 px) : titres et textes un peu plus petits — Rafik : « le site paraît zoomé » */
@media (min-width: 761px) and (max-width: 1760px) {   /* 1er oct. 2026 : jusqu'à 1 760 px (était 1 536) — les fenêtres de 1 600 px recevaient la plus grande échelle */
  :root { --h1: 58px; --h2: 44px; }
  body { font-size: 16px; }
  .entete-page-intro, .es-intro { font-size: 17.5px; }
  .chapeau { font-size: 16px; }
}
@media (min-width: 761px) and (max-width: 1280px) { :root { --h1: 50px; --h2: 40px; } }
/* Vidéos des en-têtes (Rafik, 30 sept. 2026 : « dès que je clique je ne peux pas l'arrêter ») : le voile dégradé de la fenêtre
   restait par-dessus la vidéo et bloquait ses commandes → plus de voile pendant la lecture */
.fenetre-en-lecture::after { display: none; }
.fenetre-en-lecture video { position: relative; z-index: 1; }
/* Ateliers, en-tête (Rafik, 30 sept. 2026 : « regarde la mise en page ») : les 3 faits passent SOUS les boutons, en une ligne de crochets, comme sur les pages de services */
.at-pastilles.at-faits { margin: 22px 0 0; gap: 8px 24px; }
.at-pastilles.at-faits li { padding: 0 0 0 24px; position: relative; border: 0; background: none; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.86); }
.at-pastilles.at-faits li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 1.8px solid var(--cuivre-clair); border-bottom: 1.8px solid var(--cuivre-clair); transform: rotate(-45deg); }
/* Retours à la ligne maladroits (contrôle du 30 sept. 2026 à 5 largeurs d'écran) */
.es-etiquettes { display: grid; gap: 7px; }
.es-etiquettes li { position: relative; padding: 0 0 0 22px; border-radius: 0; background: none; font-size: 14.5px; font-weight: 500; color: var(--texte); }
.es-etiquettes li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 1.8px solid var(--cuivre); border-bottom: 1.8px solid var(--cuivre); transform: rotate(-45deg); }
@media (min-width: 761px) and (max-width: 1300px) { .diag-choix label { flex: 1 1 auto; } .diag-choix span { display: block; text-align: center; } }
.rapport-pret { flex-basis: 100%; }
@media (min-width: 761px) and (max-width: 1300px) { .diag-choix { gap: 10px; } .diag-choix span { padding: 10px 14px; font-size: 14px; } }
/* Portables étroits : quand les deux boutons d'un en-tête passent l'un sous l'autre, ils prennent la même largeur */
@media (min-width: 761px) and (max-width: 1300px) { .entete-page .hero-actions .bouton { flex: 1 1 auto; } }

/* FORMATION EN ENTREPRISE — une journée dans vos bureaux (Rafik : la vendre, montrer l'expertise comptabilité + QuickBooks) */
.fe-expert-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.fe-expert-grille .titre-bloc { margin-bottom: 18px; }
.fe-expert-grille > div > p:not(.sureminence):not(.fe-expert-somme) { font-size: 17px; line-height: 1.6; color: var(--texte-doux); }
.fe-expertises { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.fe-expertise { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px; box-shadow: 0 22px 36px -30px rgba(0,48,60,.55); }
.fe-expertise .choix-ico { width: 44px; height: 44px; } .fe-expertise .choix-ico svg { width: 21px; height: 21px; }
.fe-expertise strong { display: block; font-size: 17px; line-height: 1.25; color: var(--teal); }
.fe-expertise span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--texte); }
.fe-expert-somme { display: flex; gap: 12px; align-items: center; margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--teal); color: var(--blanc); font-size: 15px; font-weight: 600; line-height: 1.4; }
.fe-expert-somme b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cuivre-degrade); font-size: 18px; font-weight: 800; }
.fe-expert-grille .duel { margin: 6px 0 0; }
.fe-journee-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.fe-journee-texte { position: sticky; top: 100px; }
.fe-journee-texte .titre-bloc { margin-bottom: 18px; }
.fe-journee-texte > p:not(.sureminence):not(.fe-note) { font-size: 17px; line-height: 1.6; color: var(--texte-doux); }
.fe-note { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(0,48,60,.045); font-size: 14.5px; line-height: 1.5; color: var(--texte-doux); }
.fe-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--cuivre); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.horaire { list-style: none; margin: 0; padding: 0; }
.horaire li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 0 36px; padding-bottom: 16px; }
.horaire li::before { content: ""; position: absolute; left: 81px; top: 26px; bottom: -4px; width: 2px; background: var(--bordure); }
.horaire li:last-child::before { display: none; }
.horaire li::after { content: ""; position: absolute; left: 76px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 4px var(--ivoire); }
.horaire-heure { padding-top: 16px; font-size: 14.5px; font-weight: 800; color: var(--cuivre-fonce); white-space: nowrap; font-variant-numeric: tabular-nums; }
.horaire-bloc { padding: 14px 18px 15px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px; box-shadow: 0 22px 36px -30px rgba(0,48,60,.55); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.horaire li:hover .horaire-bloc { transform: translateX(4px); border-color: rgba(196,124,90,.55); }
.horaire-bloc strong { font-size: 17px; line-height: 1.25; color: var(--teal); }
.horaire-qui { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--beige); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre-fonce); vertical-align: middle; white-space: nowrap; }
.horaire-bloc p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--texte); }
.horaire-pause .horaire-bloc { padding: 10px 18px; background: transparent; border-style: dashed; box-shadow: none; }
.horaire-pause .horaire-bloc strong { font-size: 15px; font-weight: 600; color: var(--texte-doux); }
.horaire-pause::after { background: var(--bordure); }
.horaire-pause .horaire-heure { padding-top: 11px; }
.js .horaire.est-revele li { animation: monte .6s calc(.15s + var(--i) * .1s) var(--ease) backwards; }
.fe-roles .inclus-carte p { font-size: 15.5px; }
.fe-livrables { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--bordure); }
.fe-livrables-titre { flex-basis: 100%; margin: 0 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.fe-livrables ul { list-style: none; margin: 0; padding: 0; display: contents; }
.fe-livrables li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--bordure); font-size: 14.5px; font-weight: 600; color: var(--teal); }
.fe-livrables svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--cuivre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .fe-expert-grille, .fe-journee-grille { grid-template-columns: 1fr; gap: 36px; }
  .fe-journee-texte { position: static; }
}
@media (max-width: 600px) {
  .horaire li { grid-template-columns: 1fr; gap: 6px; padding-left: 26px; }
  .horaire li::before { left: 5px; top: 22px; }
  .horaire li::after { left: 0; top: 4px; }
  .horaire-heure, .horaire-pause .horaire-heure { padding-top: 0; }
  .horaire-qui { display: block; width: max-content; margin: 6px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .horaire-bloc { transition: none; }
  .horaire li:hover .horaire-bloc { transform: none; }
  .js .horaire.est-revele li { animation: none; }
  .fo-hero-liste a { transition: none; }
  .fo-hero-liste a:hover { transform: none; }
}

/* Formations : les 4 volets dès l'en-tête (Rafik : « je n'ai pas compris qu'il y avait 4 volets ») */
.fo-hero-liste { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 26px 0 0; padding: 0; }
.fo-hero-liste a { display: flex; width: 100%; height: 100%; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.fo-hero-liste a:hover, .fo-hero-liste a:focus-visible { background: rgba(255,255,255,.18); border-color: var(--cuivre-clair); transform: translateY(-2px); }
.fo-hero-liste b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cuivre-degrade); font-size: 13px; font-weight: 800; box-shadow: 0 8px 14px -8px rgba(122,62,34,.9); }
.fo-hero-liste small { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); }

/* Formations, suite (Rafik : « même fond, même cadre… regarde la mise en page ») */
.fo-entete .hero-actions { margin-top: 30px; }
.fo-entete .hero-actions .bouton { flex: 0 1 auto; }
@media (max-width: 600px) { .fo-hero-liste { grid-template-columns: 1fr; } .fo-entete .hero-actions .bouton { flex: 1 1 auto; } }
/* Plus de voile gris sur les vidéos des cartes : chaque vidéo a maintenant son propre fond */
.fo-carte .video-affiche-voile, .fo-gratuit .video-affiche-voile { background: none; }
/* Étiquette du coin lisible sur chaque fond : blanche sur le fond cuivre (Élite) et sur le bleu nuit (entreprise) */
.fo-theme-elite .fo-num-coin, .fo-theme-entreprise .fo-num-coin { background: var(--blanc); color: var(--cuivre-fonce); }
.fo-theme-entreprise .fo-num-coin { color: var(--teal); }
.fo-hero-liste small { margin-left: -4px; }
@media (max-width: 600px) { .fo-actions .bouton { flex: 1 1 100%; justify-content: center; } }   /* boutons des cartes : même largeur quand ils s'empilent */
.fo-faits li { align-items: flex-start; } .fo-faits svg { margin-top: .2em; }   /* crochet sur la 1re ligne quand le texte passe sur 2 lignes */
.fo-prix small { white-space: nowrap; }   /* « proposition écrite », « + taxes, tout compris » : jamais coupés en deux */

/* Services : en-tête « à notre image » (Rafik : « j'aime quand il y a un fond à notre image, puis les sections ») — le schéma reste la signature de chaque service */
.es-marque::after { background: radial-gradient(closest-side, rgba(235,179,148,.14), rgba(235,179,148,0)); }
.es-marque .sureminence { color: var(--cuivre-clair); }
.es-marque .es-intro { color: rgba(255,255,255,.86); }
.es-marque .es-pourqui { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); border-left-color: var(--cuivre-clair); }
.es-marque .es-pourqui span { color: var(--cuivre-clair); }
.es-marque .es-faits { color: rgba(255,255,255,.75); }
.es-marque .es-faits svg { stroke: var(--cuivre-clair); }
.es-marque .es-badge { background: var(--cuivre-degrade); }

/* Sous-pages de services : même en-tête « à notre image », un ton plus clair que la page Services (Rafik : « éclaircis un peu pour montrer que ce sont des sous-pages ») */
.es-marque, .sous-page { background: #0B4150; }   /* sous-pages (services, formations) : un cran plus clair que leur page principale */
.es-marque .entete-photo::after, .sous-page .entete-photo::after { background: linear-gradient(90deg, rgba(8,58,70,.97) 0%, rgba(11,65,80,.93) 45%, rgba(11,65,80,.7) 75%, rgba(11,65,80,.52) 100%) !important; }   /* Rafik : « trop clair » → sarcelle « éclat », photo plus discrète */
@media (max-width: 1024px) { .es-marque .entete-photo::after, .sous-page .entete-photo::after { background: linear-gradient(180deg, rgba(8,58,70,.96) 0%, rgba(11,65,80,.93) 60%, rgba(11,65,80,.88) 100%) !important; } }
.es-accompagnement .entete-photo img { object-position: 50% 85%; }   /* la table et la chaise, pas le lettrage de l'écran */

/* Contact : l'épingle Google Maps dans ses couleurs officielles, sur disque blanc (Rafik, 1er oct. 2026 : « l'icône de Google Maps avec les couleurs au lieu du cuivré ») */
.trouver-epingle.gmaps { background: var(--blanc); box-shadow: 0 12px 24px -12px rgba(0,30,38,.6); }
.trouver-epingle.gmaps svg { width: 36px; height: 36px; stroke: none; }

/* L'accès « Espace formation » (le lien QuickBooks a été retiré le soir même) — Rafik, 1er oct. 2026 : « en haut ce n'est pas visible, en bas ils se fondent dans l'image ».
   Barre du haut : pastilles blanches bien lisibles (le téléphone reste en texte). Pied de page : une question qui explique, puis deux vrais boutons pleins. */
.annonce-liens a { padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.09); color: var(--blanc); font-weight: 600; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.annonce-liens a:hover { color: var(--blanc); background: rgba(255,255,255,.18); border-color: var(--cuivre-clair); }
.annonce-liens li:first-child a { padding: 0; border: 0; background: none; font-weight: 400; color: rgba(255,255,255,.85); }
.pied-espaces { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px; }
.pied-espaces-titre { grid-column: 1 / -1; margin: 0 0 2px; font-size: 14.5px; color: rgba(255,255,255,.78); }
.pied-espaces .bouton { gap: 9px; }
.pied-espaces .bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pied-espaces .bouton-blanc:hover { filter: none; background: var(--cuivre-clair); }
@media (max-width: 480px) { .pied-espaces { grid-template-columns: 1fr; } .pied-espaces .bouton { width: 100%; } }

/* ==========================================================
   Formations v4 (Rafik, 1er oct. 2026) : « les deux sections ne sont pas claires, trop zoomé, carrés trop grands »
   → chaque section nomme son mode dans le titre (icône), « En personne » sur fond teal ; cartes couchées (vidéo à gauche,
   texte à droite), donc deux fois moins hautes. Numérotation : introduction gratuite sans numéro, puis 1 à 4.
   ========================================================== */
.fo-mode-titre { display: flex; align-items: center; gap: 16px; }
.fo-mode-ico { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--teal); box-shadow: 0 14px 24px -14px rgba(0,48,60,.8); }
.fo-mode-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--cuivre-clair); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fo-mode-personne .fo-mode-ico { background: var(--cuivre-degrade); box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); }
.fo-mode-personne .fo-mode-ico svg { stroke: var(--blanc); }
.fo-mode-personne .chapeau { color: rgba(255,255,255,.82); }
.fo-mode-personne .fo-carte { border-color: transparent; }
.fo-hero-liste li.fo-hero-gratuit { grid-column: 1 / -1; }
.fo-hero-liste li.fo-hero-gratuit a { background: rgba(196,124,90,.24); border-color: rgba(235,179,148,.55); }
.fo-hero-liste b svg { width: 12px; height: 12px; fill: var(--blanc); margin-left: 2px; }
.fo-apercu-liste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fo-num-gratuit { background: var(--teal); }
.fo-num-gratuit svg { width: 16px; height: 16px; fill: var(--blanc); margin-left: 2px; }
.fo-apercu-gratuit a { border-color: rgba(196,124,90,.55); background: linear-gradient(180deg, var(--blanc), var(--beige)); }
@media (max-width: 1200px) { .fo-apercu-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fo-apercu-liste { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
  .fo-grille { grid-template-columns: 1fr; gap: 22px; margin-top: 36px; }
  .fo-carte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .fo-carte .fo-media { display: grid; align-content: center; }   /* l'image de la vidéo reste en 16:9, centrée : rien n'est rogné */
  .fo-carte .fo-media .video-lecteur { border-radius: 0; }
  .fo-carte-corps { padding: 24px 30px 24px; }
  .fo-carte h3 { font-size: 24px; }
  .fo-carte-corps .fo-prix { margin-top: 14px; padding-top: 14px; font-size: 24px; }
  .fo-carte .fo-actions { padding-top: 16px; }
}

/* Menu : bouton « Espace formation » (Rafik, 1er oct. 2026 : « est-ce que tu peux l'ajouter ici ») — contour teal, icône d'écran, avant les deux autres boutons */
/* « Espace formation » : lien discret avec icône (essai du 1er oct. 2026 : un seul vrai bouton d'action, « Rendez-vous ») */
.nav-formation { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.nav-formation:hover, .nav-formation:focus-visible { color: var(--cuivre-fonce); border-bottom-color: var(--cuivre); }
.nav-formation svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Menu à trois boutons : la largeur utile est plafonnée à 1 440 px, donc la version pleine taille ne tient à aucune largeur
   (Rafik : « on ne voit pas tout » à 1 600 px, « Rendez-vous » coupé aussi à 1 800) → menu resserré partout */
/* Rafik, 1er oct. 2026 : « c'est très proche » → le lien Accueil quitte le menu (le logo y mène), de l'air à partir de 1 600 px (contenu de 1 440 px),
   et le resserrement ne s'applique qu'aux écrans de moins de 1 600 px (où tout doit tenir dans 1 254 à 1 376 px) */
/* CORRIGÉ le 1er oct. 2026 (soir) : « Accueil » revient dans le menu (Rafik : « comment il va savoir que le logo mène à l'accueil? ») et
   « Ateliers » est rangé dans Formations. Mesure : le contenu de l'en-tête fait 1 280 px à toutes les largeurs ≥ 1 440 px (1 254 px à 1 366),
   donc l'ancien palier « aéré » ≥ 1 600 px dépassait l'enveloppe de 113 px à droite. Un seul menu resserré, un peu d'air dès 1 440 px.
   À vérifier après tout changement du menu : node scratchpad/mesure-menu.cjs <largeurs> → depasseDroite doit rester ≤ 0. */
/* Puis (même soir) : « laisse Atelier comme il était, c'est important » → « Ateliers » reste dans la barre : 9 liens.
   Tout doit tenir dans 1 254 px à 1 366 px de fenêtre, et dans 1 280 px dès 1 440 px. */
.entete-interieur { gap: 14px; }
.entete-logo img { width: 126px; }
.nav { gap: 12px; }
.nav-liens { gap: 11px; }
.nav-liens > li > a { font-size: 13.5px; }
.nav-actions { gap: 8px; }
.nav-actions .bouton-petit { padding: 0 12px; font-size: 13.5px; min-height: 42px; }
.nav-formation { font-size: 13.5px; }
@media (max-width: 1439px) {
  .entete-logo img { width: 118px; }
  .nav { gap: 10px; }
  .nav-liens { gap: 9px; }
  .nav-actions { gap: 7px; }
  .nav-actions .bouton-petit { padding: 0 11px; }
  .nav-formation { margin-right: 2px; }
}

/* Barre de menu qui se compacte au défilement (essai du 1er oct. 2026) : 96 → 72 px, logo plus petit, le contenu respire */
.entete-interieur { transition: height .25s var(--ease); }
.entete-logo img { transition: width .25s var(--ease); }
@media (min-width: 769px) {
  .entete.a-defile { --entete-h: 72px; }
  .entete.a-defile .entete-logo img { width: 118px; }
}
@media (prefers-reduced-motion: reduce) { .entete-interieur, .entete-logo img { transition: none; } }

/* ==========================================================
   « Pourquoi nous » v2 (Rafik, 1er oct. 2026 : « tu peux améliorer cette partie ») : le duel devient un vrai tableau comparatif —
   un seul bloc, colonne « trop souvent » sur sable, colonne « Avec Virtus » en blanc sous un en-tête teal, lignes alignées et filets.
   Même style sur la page Formation en entreprise (tutoriel vs Virtus).
   ========================================================== */
.duel { margin: 28px 0 28px; border: 1px solid var(--bordure); border-radius: 20px; overflow: hidden; background: var(--blanc); box-shadow: 0 34px 56px -44px rgba(0,48,60,.5); }
.duel-tete, .duel-liste li { gap: 0; }
.duel-tete { margin: 0; align-items: stretch; }
.duel-tete span { display: flex; align-items: center; padding: 14px 20px; font-size: 12px; }
.duel-tete span:first-child { background: var(--sable-bas); color: var(--texte-doux); }
.duel-tete span:nth-child(2) { background: linear-gradient(90deg, var(--sable-bas), var(--teal)); }
.duel-tete span:last-child { background: var(--teal); color: var(--cuivre-clair); }
.duel-liste { gap: 0; }
.duel-liste li { border-top: 1px solid var(--bordure); }
.duel-avant { height: 100%; margin: 0; padding: 18px 20px; border-radius: 0; background: var(--sable-haut); color: var(--texte); font-size: 15px; }
.duel-x { border-color: rgba(94,116,121,.35); background: var(--blanc); }
.duel-fleche { display: grid; place-items: center; height: 100%; background: linear-gradient(90deg, var(--sable-haut), var(--blanc)); }
.duel-apres { height: 100%; padding: 18px 22px 18px 18px; border: 0; border-radius: 0; box-shadow: none; transition: background-color .3s var(--ease); }
.duel-apres strong { font-size: 17.5px; }
.duel-liste li:hover .duel-apres { transform: none; background: rgba(243,235,229,.55); }
.duel-liste li:hover .duel-avant { background: var(--sable-bas); }
@media (max-width: 760px) {
  .duel-liste li { gap: 0; }
  .duel-avant { padding: 14px 16px; }
  .duel-fleche { height: 34px; margin: 0; padding-left: 20px; justify-self: stretch; transform: none; place-items: center start; background: linear-gradient(180deg, var(--sable-haut), var(--blanc)); }
  .duel-fleche svg { transform: rotate(90deg); }
  .duel-apres { padding: 12px 16px 18px; }
}
/* Colonne « trop souvent » : plus de ×, une icône grise par situation (Rafik, 1er oct. 2026 : « le X, je ne le comprends pas ») */
/* Rafik : « ce n'est pas clair, améliore les cercles » → disque plus grand, icône teal au trait plus épais, léger relief */
.duel-x { width: 48px; height: 48px; background: var(--blanc); border: 1.5px solid rgba(0,48,60,.16); box-shadow: 0 10px 18px -12px rgba(0,48,60,.45); }
.duel-x svg { width: 24px; height: 24px; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.duel-avant { gap: 16px; }
.duel-liste li:hover .duel-x { border-color: var(--cuivre); }
@media (max-width: 760px) { .duel-x { width: 42px; height: 42px; } .duel-x svg { width: 21px; height: 21px; } }

/* Blogue : en-tête « à notre image » (fond teal + photo du carnet), comme les autres pages (Rafik, 1er oct. 2026 : « j'aime pas l'entête ») */
.entete-blogue .entete-page-grille { padding-bottom: 64px; }
.entete-blogue .photo-formation img { object-position: 50% 45%; }
.entete-blogue .blogue-fil { position: relative; z-index: 1; background: var(--encre); border-top: 1px solid rgba(255,255,255,.08); }
#tous-les-articles { scroll-margin-top: calc(var(--entete-h) + 24px); }

/* Accueil, vignette « Nos bureaux à Chambly » : épingle Google Maps en couleurs et lien vers l'itinéraire (Rafik, 1er oct. 2026 : « pour l'icône mets celle de Google ») */
.choix-photo figcaption { padding: 0; }
.choix-itineraire { display: flex; gap: 14px; align-items: center; padding: 16px 18px; color: inherit; text-decoration: none; border-radius: 14px; transition: background-color .2s var(--ease); }
.choix-itineraire:hover { background: rgba(0,48,60,.96); }
.choix-ico.gmaps { background: var(--blanc); }
.choix-ico.gmaps svg { width: 26px; height: 26px; stroke: none; }
.choix-itineraire em { font-style: normal; font-weight: 600; color: var(--cuivre-clair); white-space: nowrap; }
.choix-itineraire:hover em { text-decoration: underline; text-underline-offset: 3px; }

/* Blogue, article à la une, v3 (Rafik : le titre souligné « j'aime pas ») : une vraie carte, comme les lignes de la liste —
   photo à gauche, rond fléché cuivré en haut à droite, la carte se soulève au survol ; toute la carte est cliquable (data-carte-lien) */
.une-carte { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 0; padding: 0; margin-bottom: 48px; border: 1px solid var(--bordure); border-bottom-width: 1px; border-radius: 20px; overflow: hidden; background: var(--blanc); box-shadow: 0 30px 50px -40px rgba(0,48,60,.5); cursor: pointer; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.une-carte:hover { transform: translateY(-4px); border-color: var(--cuivre); box-shadow: 0 40px 64px -40px rgba(0,48,60,.6); }
.une-visuel { position: relative; min-height: 280px; overflow: hidden; }
.une-visuel picture { position: absolute; inset: 0; display: block; }   /* trois cadrages de la même illustration : portrait dans la colonne (≥ 1360 px), paysage 16/9 en bannière, 4/3 au téléphone */
.une-visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 1.2s var(--ease); }
.une-carte:hover .une-visuel img { transform: scale(1.04); }
.une-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,39,47,0) 0%, rgba(0,39,47,.18) 100%); }   /* illustration déjà sur fond teal : voile léger */
.une-visuel .une-etiquette { position: absolute; left: 20px; top: 20px; z-index: 1; margin: 0; }
.une-corps { padding: 28px 32px 28px 32px; }
.une-carte h2 { font-size: clamp(26px, 2.6vw, 34px); }
.une-carte h2 a { text-decoration: none; background: none; }
.une-carte:hover h2 a { color: var(--cuivre-fonce); }
.une-carte .une-resume { font-size: 16.5px; margin-bottom: 18px; }
.une-carte .une-chiffres { grid-template-columns: 1fr; margin-bottom: 22px; }   /* dans la carte, les chiffres clés en lignes : chiffre à gauche, explication à droite */
.une-carte .une-chiffres li { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 14px; align-items: baseline; padding: 10px 0; }
.une-carte .une-chiffres li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--bordure); }
.une-carte .une-chiffres strong { margin: 0; font-size: 19px; line-height: 1.2; }
@media (max-width: 1359px) {   /* sous 1360 px la colonne serait trop étroite : l'illustration passe en bannière 16/9 au-dessus du texte */
  .une-carte { grid-template-columns: 1fr; }
  .une-visuel { min-height: 0; aspect-ratio: 16 / 9; }
  .une-corps { padding: 24px 22px 26px; }
}
@media (max-width: 599px) { .une-visuel { aspect-ratio: 4 / 3; } }   /* au téléphone, cadrage 4/3 : le portable reste lisible */
@media (max-width: 480px) { .une-carte .une-chiffres li { grid-template-columns: 1fr; gap: 4px; } }   /* petit téléphone : le chiffre clé au-dessus de son explication, au lieu de deux colonnes étroites */

/* Saison des impôts (février à avril ; classe posée par app.js sur <html>) — essai du 1er oct. 2026 :
   « Déclaration d'impôts » passe du beige au cuivré dans le menu, pour sauter aux yeux quand les gens cherchent ce service. Hors saison : beige. */
.saison-impots .nav-actions .bouton-beige { background: var(--cuivre-degrade); background-size: 200% 100%; color: var(--blanc); text-shadow: 0 1px 1px rgba(90, 40, 15, .35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.saison-impots .menu-mobile nav a[href="/declaration-impots"] { color: var(--cuivre-clair); font-weight: 700; }

/* Rafik, 1er oct. 2026 (nuit) : « pour l'accueil on doit cliquer sur le logo, mais ce n'est pas clair ; si je passe la souris sur le logo,
   montre qu'on va voir l'accueil » → au survol (ou au clavier), une bulle « Retour à l'accueil » sort sous le logo, avec une petite maison ;
   puis « c'est la même couleur que l'entête » → bulle CUIVRÉE (plus teal) à contour ivoire : elle se détache du bandeau teal des pages comme du menu ivoire.
   Seulement sur les écrans qui ont une souris (hover) ; sur téléphone, le menu garde le lien « Accueil ». */
.entete-logo { position: relative; display: inline-flex; }
@media (hover: hover) {
  .entete-logo::after {
    position: absolute; left: 50%; pointer-events: none; opacity: 0;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
    content: "Retour à l’accueil"; top: calc(100% + 12px); transform: translate(-50%, 4px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h5v-6h4v6h5V9.5'/%3E%3C/svg%3E") no-repeat 12px 50% / 16px 16px, linear-gradient(120deg, #7A3E22 0%, #A45C3E 100%);
    color: var(--blanc); text-shadow: 0 1px 1px rgba(90, 40, 15, .35); font: 600 13px/1 var(--police); letter-spacing: .2px; white-space: nowrap;
    padding: 9px 14px 9px 36px; border-radius: 999px; box-shadow: 0 0 0 2px var(--ivoire), 0 12px 26px -10px rgba(0, 20, 26, .55);
  }
  .entete-logo:hover::after, .entete-logo:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
  .entete-logo:hover img { opacity: .85; }
  /* Déjà sur l'accueil (le lien « Accueil » du menu porte aria-current) : pas de bulle */
  .entete:has(.nav-liens a[aria-current="page"]:is([href="/"], [href="#accueil"])) .entete-logo::after { display: none; } /* #accueil : aperçu en ligne */
}
@media (prefers-reduced-motion: reduce) { .entete-logo::after { transition: none; } }

/* Politique de confidentialité (en-tête clair) : le nom du responsable était écrit en blanc sur la carte claire, donc invisible une fois le blanc « à fournir » rempli */
.entete-clair .responsable-titre { color: var(--teal); font-weight: 600; }

/* Formulaires branchés (site en ligne) : message si l'envoi échoue, juste au-dessus du bouton */
.formulaire-erreur { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid #c4553a; border-radius: var(--r-bouton); background: #fbeee9; color: #8a2f15; font-size: 14.5px; line-height: 1.5; }
.formulaire [type="submit"][disabled] { opacity: .6; cursor: progress; }

/* Introduction gratuite pas encore filmée (2 oct. 2026) : l'affiche seule, avec une pastille « Bientôt en ligne » */
.fo-bientot { position: relative; margin: 0; overflow: hidden; }
.fo-bientot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fo-bientot-pastille { position: absolute; left: 16px; bottom: 16px; padding: 8px 16px; border-radius: 999px; background: var(--teal); color: var(--blanc); font-size: 13px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 10px 22px -12px rgba(0,30,38,.7); }
/* Accueil, témoignages : le lien vers les avis Google reste sur une ligne */
.avis-google { white-space: nowrap; }

/* audit du 2 oct. 2026 : contraste — le texte doux (#5E7479) sur fond beige ne faisait que 4,19 ; cette teinte passe le minimum AA (4,5) */
.question-interieur > p, .question-interieur > p em, .billet-note { color: #51666B; }

/* ==========================================================
   Écrans peu hauts : portables de 14 et 15 po (Rafik, 2 oct. 2026 : « le site ne doit pas paraître trop zoomé, l'en-tête ne doit pas
   prendre la moitié de la page ; les gens sont au téléphone, sur un portable de 14 ou 15 po, ou sur un écran de 24 po »).
   Un portable de 14 po (1920 × 1080 à 150 %) laisse une fenêtre d'environ 1280 × 595 px ; un 15 po (125 %), 1536 × 730 px.
   Mesuré avant (scratchpad/mesure-ecrans.cjs) : bandeau + menu = 137 px (23 % de la fenêtre), et le titre était collé EN BAS
   d'une grille aussi haute que le visuel de droite : le bouton tombait sous l'écran sur 24 pages sur 33.
   Ici tout s'adapte à la HAUTEUR de la fenêtre : barres plus fines, titres plus petits, texte aligné en haut.
   ========================================================== */
@media (min-width: 1025px) and (max-height: 820px) {
  :root { --h1: 52px; --entete-h: 76px; }
  .entete.a-defile { --entete-h: 68px; }
  .annonce { font-size: 13px; }
  .annonce-interieur { min-height: 32px; }
  .annonce p { padding: 5px 0; }
  .hero { min-height: calc(100vh - 108px); }
  .hero-contenu { padding-top: 36px; padding-bottom: 28px; gap: 18px; }
  .hero .filet-anime { margin: 20px 0; }
  .hero-texte { font-size: 17px; margin-bottom: 24px; }
  .entete-page { padding: 22px 0 56px; }
  .ariane { margin-bottom: 26px; }
  .entete-page .entete-page-grille { align-items: start; }
  .entete-page .filet-anime { margin: 18px 0; }
  .entete-page-intro { font-size: 17px; margin-bottom: 24px; }
  .hero .hero-actions .bouton, .entete-page .hero-actions .bouton { min-height: 50px; }
  .entete-article h1 { font-size: clamp(30px, 3.1vw, 42px); }
  .fo-entete h1 { font-size: clamp(34px, 3.4vw, 46px); }
}
@media (min-width: 1025px) and (max-height: 680px) {
  :root { --h1: 46px; --entete-h: 68px; }
  .entete.a-defile { --entete-h: 62px; }
  .entete-logo img, .entete.a-defile .entete-logo img { width: 104px; }
  .annonce-interieur { min-height: 30px; }
  .annonce p { padding: 4px 0; }
  .hero { min-height: calc(100vh - 98px); }
  .hero-contenu { padding-top: 26px; padding-bottom: 22px; gap: 14px; }
  .hero .sureminence, .entete-page .sureminence { margin-bottom: 10px; }
  .hero .filet-anime, .entete-page .filet-anime { margin: 14px 0; }
  .hero-texte, .entete-page-intro { font-size: 16.5px; margin-bottom: 20px; }
  .entete-page { padding: 18px 0 44px; }
  .ariane { margin-bottom: 20px; }
  .carte-verre { min-height: 68px; padding: 10px 20px; }
  .entete-article h1 { font-size: clamp(28px, 2.9vw, 38px); }
  .fo-entete h1 { font-size: clamp(32px, 3.1vw, 40px); }
}

/* Menu complet dès 1 280 px de large (2 oct. 2026). Avant, un portable de 14 po (1 280 px) ne voyait que les trois barres du menu
   de téléphone. Entre 1 280 et 1 399 px : marges de l'en-tête à 32 px, logo de 104 px, écarts et boutons resserrés, liens en 13 px.
   Mesuré avec une vraie barre de défilement (15 px de moins) : node scratchpad/mesure-menu.cjs → depasseDroite ≤ 0. */
@media (min-width: 1280px) and (max-width: 1399px) {
  .entete, .annonce { --gouttiere: 32px; }
  .entete-interieur { gap: 10px; }
  .entete-logo img, .entete.a-defile .entete-logo img { width: 104px; }
  .nav { gap: 8px; }
  .nav-liens { gap: 8px; }
  .nav-liens > li > a, .nav-formation { font-size: 13px; }
  .nav-actions { gap: 6px; }
  .nav-actions .bouton-petit { padding: 0 10px; font-size: 13px; }
}

/* Téléphone (2 oct. 2026, même demande) : le haut de l'écran passe de 125 à 100 px. Le bandeau tient sur une ligne
   (on garde le lien « Réserver un diagnostic gratuit », la phrase d'avant est masquée), la barre du logo est moins haute,
   et le titre de l'accueil tient sur trois lignes au lieu de quatre. */
@media (max-width: 480px) {
  :root { --entete-h: 64px; }
  .annonce-debut { display: none; }
  .annonce p { padding: 7px 0; }
  .annonce-interieur { min-height: 36px; }
  .entete-logo img { width: 104px; }
  .hero-titre { font-size: 35px; }
  .hero-contenu { padding-top: 40px; }
  .annonce-interieur { justify-content: center; }
  /* À 360 px de large (beaucoup de téléphones Android), une carte contenant une longue adresse courriel élargissait la colonne
     de 24 px : le texte et les boutons de Contact, Conditions générales et À propos touchaient le bord droit. */
  .entete-page-grille, .recrutement-grille { grid-template-columns: minmax(0, 1fr); }
  .pour-qui-carte { padding: 24px 20px; }
  .pour-qui-carte a, .recrutement-carte a, .recrutement-carte p { overflow-wrap: anywhere; }
}

/* Quatre portes d'entrée de l'accueil (2 oct. 2026) : déléguer, apprendre, le faire moi-même, mes impôts.
   Le site parle à quatre publics ; chacun trouve son chemin avant la liste des services. */
.portes { background: var(--ivoire); padding: 52px 0 0; }
.portes .sureminence { margin-bottom: 18px; }
.portes-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.porte {
  display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px;
  border-radius: var(--r-carte); background: var(--blanc); border: 1px solid var(--bordure);
  color: var(--texte); text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.porte:hover, .porte:focus-visible { border-color: var(--cuivre); transform: translateY(-2px); box-shadow: 0 18px 30px -22px rgba(0, 48, 60, .45); }
.porte .icone { width: 26px; height: 26px; margin-bottom: 8px; }
.porte strong { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--teal); }
.porte span { font-size: 14.5px; line-height: 1.45; color: var(--texte-doux); }
@media (max-width: 1024px) { .portes-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .portes { padding-top: 36px; }
  .portes-grille { gap: 10px; }
  .porte { padding: 16px 14px 14px; }
  .porte strong { font-size: 15px; }
  .porte span { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .porte { transition: none; } .porte:hover { transform: none; } }

/* MENU AÉRÉ (2 oct. 2026, après-midi ; Rafik : « tu n'as pas l'impression que tout est collé ? »). « Espace formation » est monté dans la barre du haut
   (.annonce-liens, premier lien) : la ligne du menu garde 9 liens et 2 boutons, avec de l'air entre les mots.
   À vérifier après tout changement : node scripts/controles/mesure-menu.cjs 1280 1366 1400 1440 1536 1920 → depasseDroite 0, deuxLignes 0, espaceLogoLiens ≥ 28. */
.entete-interieur { gap: 20px; }
.nav { gap: 26px; }
.nav-liens { gap: 26px; }
.nav-actions { gap: 10px; }
.nav-actions .bouton-petit { padding: 0 14px; }
@media (max-width: 1439px) {
  .nav-actions { gap: 9px; }
  .nav-actions .bouton-petit { padding: 0 13px; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  .entete-interieur { gap: 16px; }
  .nav { gap: 22px; }
  .nav-liens { gap: 22px; }
  .nav-actions { gap: 8px; }
  .nav-actions .bouton-petit { padding: 0 12px; }
}
.annonce-liens svg { flex: none; }
/* Écrans peu hauts : la pastille du téléphone ne doit pas épaissir la barre du haut (30 à 32 px, voir « écrans peu hauts ») */
@media (min-width: 1025px) and (max-height: 820px) { .annonce-liens a { padding-top: 2px; padding-bottom: 2px; } }