/* atonweb.fr : refonte one-page, style blobs organiques (référence Yateo) */

:root {
  --framboise: #e63950;
  --rouge-profond: #c0182f;
  --magenta: #e6007e;
  --orange: #f5a04b;
  --orange-fonce: #f08c2e;
  --anthracite: #35373e;
  --gris-texte: #6b6d75;
  --fond-haut: #e9e9eb;
  --fond-bas: #fafafa;
  --blanc: #ffffff;
  --bord: rgba(0,0,0,.08);
  --display: 'Julius Sans One', sans-serif;
  --caps: 'Josefin Sans', sans-serif;
  --corps: 'Mulish', sans-serif;
  --large: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --anthracite: #e8e8ec;
    --gris-texte: #a5a7b0;
    --fond-haut: #191a1e;
    --fond-bas: #101114;
    --blanc: #1c1d22;
    --bord: rgba(255,255,255,.09);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--corps);
  font-weight: 300;
  color: var(--anthracite);
  background: var(--fond-bas);
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }

.ligne-caps {
  font-family: var(--caps);
  font-weight: 300;
  letter-spacing: .5em;
  margin-right: -.5em;
  text-transform: uppercase;
}
.entete { text-align: center; margin-bottom: 56px; }
.entete .ligne-caps { font-size: 15px; color: var(--gris-texte); }
.entete h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 52px);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 12px;
}
section { max-width: var(--large); margin: 0 auto; padding: 90px 24px; }

/* ---------- Navigation : burger + pastilles (grille 2x2 comme la reference) ---------- */
.nav-cluster {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 58px 58px;
}
.nav-cluster button, .nav-cluster a {
  width: 58px; height: 58px;
  border: none;
  background: var(--blanc);
  border-right: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition: background .25s ease;
  text-decoration: none;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--anthracite);
  margin: 2.5px 0;
  transition: transform .25s ease, opacity .25s ease;
}
body.menu-ouvert .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
body.menu-ouvert .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.dot-nav i {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  transition: all .28s cubic-bezier(.6,.2,.2,1.4);
}
.dot-nav[data-c="framboise"] i { background: var(--framboise); }
.dot-nav[data-c="magenta"]   i { background: var(--magenta); }
.dot-nav[data-c="orange"]    i { background: var(--orange); }
.dot-nav:hover i, .dot-nav.actif i { width: 58px; height: 58px; border-radius: 0; }
/* les cellules de la colonne gauche projettent leur bulle au-dela de la colonne droite */
.nav-cluster > :nth-child(odd) .bulle { left: calc(200% + 15px); }
.dot-nav .bulle {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  font-family: var(--caps);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  color: #fff;
  padding: 9px 16px 7px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.dot-nav .bulle::before {
  content: "";
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left: none;
}
.dot-nav[data-c="framboise"] .bulle { background: var(--framboise); }
.dot-nav[data-c="framboise"] .bulle::before { border-right-color: var(--framboise); }
.dot-nav[data-c="magenta"] .bulle { background: var(--magenta); }
.dot-nav[data-c="magenta"] .bulle::before { border-right-color: var(--magenta); }
.dot-nav[data-c="orange"] .bulle { background: var(--orange); }
.dot-nav[data-c="orange"] .bulle::before { border-right-color: var(--orange); }
.dot-nav:hover .bulle, .dot-nav.actif .bulle {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Bouton contact rond en haut a droite */
.contact-rond {
  position: fixed;
  top: 26px; right: 30px;
  z-index: 95;
  width: 118px; height: 118px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.28);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--anthracite);
  font-family: var(--caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  background: transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.contact-rond svg { stroke: currentColor; }
.contact-rond:hover {
  background: var(--anthracite);
  color: var(--fond-bas);
  border-color: var(--anthracite);
}
@media (prefers-color-scheme: dark) {
  .contact-rond { border-color: rgba(255,255,255,.35); }
}

/* Menu plein écran */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--fond-bas);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
body.menu-ouvert .menu-overlay { opacity: 1; visibility: visible; }
.menu-overlay ul { list-style: none; text-align: center; }
.menu-overlay li { margin: 14px 0; }
.menu-overlay a {
  font-family: var(--caps);
  font-weight: 300;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .32em;
  margin-right: -.32em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease;
}
.menu-overlay li:nth-child(3n+1) a:hover { color: var(--framboise); }
.menu-overlay li:nth-child(3n+2) a:hover { color: var(--magenta); }
.menu-overlay li:nth-child(3n)   a:hover { color: var(--orange); }
.menu-overlay .legal-liens { margin-top: 46px; }
.menu-overlay .legal-liens a {
  font-size: 12.5px;
  letter-spacing: .18em;
  margin-right: 18px;
  color: var(--gris-texte);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--fond-haut) 0%, var(--fond-bas) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo { position: relative; z-index: 5; margin-top: 56px; text-align: center; }
.logo .rond {
  width: 74px; height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--framboise), var(--magenta));
  display: grid;
  place-items: center;
}
.logo .rond svg { width: 38px; height: 38px; }
.logo .nom {
  font-family: var(--caps);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: .5em;
  margin-right: -.5em;
  color: var(--magenta);
  text-transform: uppercase;
}

.scene {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
  min-height: 640px;
  margin-top: -20px;
}
.scene svg.blobs { position: absolute; inset: 0; width: 100%; height: 100%; }
.blob { transform-box: fill-box; transform-origin: center; }
@keyframes flotte1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(26px,-20px) scale(1.05); } 66% { transform: translate(-16px,14px) scale(.97); } }
@keyframes flotte2 { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(-30px,18px) scale(1.06); } 75% { transform: translate(18px,-24px) scale(.95); } }
@keyframes flotte3 { 0%,100% { transform: translate(0,0) scale(1); } 30% { transform: translate(20px,26px) scale(.96); } 70% { transform: translate(-24px,-14px) scale(1.07); } }
@keyframes flotte4 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-14px,-30px) scale(1.08); } }
.anim1 { animation: flotte1 16s ease-in-out infinite; }
.anim2 { animation: flotte2 21s ease-in-out infinite; }
.anim3 { animation: flotte3 18s ease-in-out infinite; }
.anim4 { animation: flotte4 24s ease-in-out infinite; }

.titre-hero {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding-bottom: 40px;
  text-shadow: 0 1px 14px rgba(120, 10, 60, .18);
}
.titre-hero .ligne-caps {
  font-size: clamp(14px, 1.9vw, 24px);
  letter-spacing: .62em;
  margin-right: -.62em;
}
.titre-hero .ligne-display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 8.6vw, 118px);
  letter-spacing: .06em;
  margin: 10px 0 16px;
  text-transform: uppercase;
  line-height: 1;
}

.vague {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  height: 210px;
  pointer-events: none;
}
.vague path { fill: var(--fond-bas); }
/* blobs qui debordent sur la vague, comme sur la reference */
.blobs-avant {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 260px;
  pointer-events: none;
}

.fleche-scroll {
  position: absolute;
  z-index: 6;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--fond-bas);
  border: 1px solid rgba(0,0,0,.14);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}
.fleche-scroll svg { stroke: var(--anthracite); }
@keyframes descend { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.fleche-scroll svg { animation: descend 1.6s ease-in-out infinite; }

/* ---------- Piliers ---------- */
.piliers {
  padding: 90px 24px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
.pilier .icone { height: 150px; display: grid; place-items: center; margin-bottom: 26px; }
.pilier h2, .pilier .titre {
  font-family: var(--caps);
  font-weight: 300;
  font-size: 21px;
  letter-spacing: .42em;
  margin-right: -.42em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.pilier[data-c="framboise"] h2 { color: var(--framboise); }
.pilier[data-c="magenta"]   h2 { color: var(--magenta); }
.pilier[data-c="orange"]    h2 { color: var(--orange); }
.pilier p { font-size: 15.5px; line-height: 1.65; color: var(--gris-texte); }

/* ---------- Bandeau logos defilant ---------- */
.bandeau-logos {
  max-width: none;
  padding: 46px 0 52px;
  overflow: hidden;
  position: relative;
}
.bandeau-logos .intitule {
  text-align: center;
  font-family: var(--caps);
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: .5em;
  margin-right: -.5em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin-bottom: 38px;
}
/* fondu sur les bords, le defile sort de l'ecran sans coupure nette */
.bandeau-logos::before, .bandeau-logos::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.bandeau-logos::before { left: 0; background: linear-gradient(90deg, var(--fond-bas), transparent); }
.bandeau-logos::after { right: 0; background: linear-gradient(270deg, var(--fond-bas), transparent); }
.defile {
  display: flex;
  width: max-content;
  animation: defile 42s linear infinite;
}
.defile:hover { animation-play-state: paused; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.defile .piste { display: flex; align-items: flex-start; }
.defile .logo-item {
  width: 172px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #9a9ca4;
  transition: color .25s ease, opacity .25s ease;
  opacity: .78;
}
.defile .logo-item:hover { color: var(--magenta); opacity: 1; }
.defile .marque {
  height: 46px;
  display: grid;
  place-items: center;
}
.defile .marque svg { fill: currentColor; }
.defile .mot {
  font-family: var(--caps);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
  color: currentColor;
  white-space: nowrap;
}
.defile .nom-item {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .26em;
  margin-right: -.26em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .defile { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .defile .piste[aria-hidden="true"] { display: none; }
}

/* ---------- Compteurs par metier ---------- */
.chiffres-metiers {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  text-align: center;
}
.chiffres-metiers .valeur {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 46px);
  display: block;
}
.chiffres-metiers .metier-1 .valeur { color: var(--framboise); }
.chiffres-metiers .metier-2 .valeur { color: var(--magenta); }
.chiffres-metiers .metier-3 .valeur { color: var(--orange); }
.chiffres-metiers .metier-4 .valeur { color: var(--rouge-profond); }
.chiffres-metiers .legende {
  font-family: var(--caps);
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: .26em;
  margin-right: -.26em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin-top: 8px;
  display: block;
}

/* ---------- Cibles ---------- */
.grille-cibles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.cible {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 18px;
  padding: 34px 26px 30px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cible:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -30px rgba(53,55,62,.35); }
.cible .picto { height: 58px; display: grid; place-items: center; margin-bottom: 18px; }
.cible h3 {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .26em;
  margin-right: -.26em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cible p { font-size: 14px; line-height: 1.6; color: var(--gris-texte); }

/* ---------- Forfaits ---------- */
.grille-forfaits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.carte {
  background: var(--blanc);
  border-radius: 22px;
  padding: 42px 34px 38px;
  box-shadow: 0 22px 60px -28px rgba(53,55,62,.25);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.carte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.carte[data-c="framboise"]::before { background: linear-gradient(90deg, var(--rouge-profond), var(--framboise)); }
.carte[data-c="magenta"]::before   { background: linear-gradient(90deg, var(--framboise), var(--magenta)); }
.carte[data-c="orange"]::before    { background: linear-gradient(90deg, var(--magenta), var(--orange)); }
.carte .nom-forfait {
  font-family: var(--caps);
  font-weight: 400;
  letter-spacing: .34em;
  margin-right: -.34em;
  text-transform: uppercase;
  font-size: 15px;
  text-align: center;
}
.carte[data-c="framboise"] .nom-forfait { color: var(--framboise); }
.carte[data-c="magenta"] .nom-forfait   { color: var(--magenta); }
.carte[data-c="orange"] .nom-forfait    { color: var(--orange); }
.carte .prix {
  text-align: center;
  margin: 22px 0 4px;
  font-family: var(--display);
  font-size: 52px;
}
.carte .prix small { font-size: 17px; font-family: var(--corps); color: var(--gris-texte); }
.carte .abo { text-align: center; color: var(--gris-texte); font-size: 14px; margin-bottom: 26px; }
.carte ul { list-style: none; font-size: 15px; line-height: 2.05; color: var(--gris-texte); flex: 1; }
.carte ul li::before { content: "+"; margin-right: 10px; font-weight: 600; color: var(--anthracite); opacity: .5; }
.carte .cta {
  margin-top: 30px;
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--caps);
  font-weight: 400;
  letter-spacing: .22em;
  margin-right: -.22em;
  text-transform: uppercase;
  font-size: 13.5px;
  color: #fff;
  padding: 15px 10px 13px;
  border-radius: 40px;
  transition: filter .2s ease;
}
.carte .cta:hover { filter: brightness(1.08); }
.carte[data-c="framboise"] .cta { background: linear-gradient(90deg, var(--rouge-profond), var(--framboise)); }
.carte[data-c="magenta"] .cta   { background: linear-gradient(90deg, var(--framboise), var(--magenta)); }
.carte[data-c="orange"] .cta    { background: linear-gradient(90deg, var(--magenta), var(--orange)); }

.note-offres {
  margin-top: 34px;
  text-align: center;
  font-size: 14.5px;
  color: var(--gris-texte);
  line-height: 1.8;
}
.note-offres strong { font-weight: 600; color: var(--anthracite); }

/* ---------- Application mobile ---------- */
.app-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.app-mobile .texte h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 42px);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 12px 0 22px;
}
.app-mobile .texte .ligne-caps { font-size: 14px; color: var(--magenta); }
.app-mobile .texte p { color: var(--gris-texte); line-height: 1.8; margin-bottom: 16px; }
.app-mobile .prix-ligne {
  font-family: var(--display);
  font-size: 34px;
  margin: 18px 0 26px;
}
.app-mobile .prix-ligne small { font-family: var(--corps); font-size: 15px; color: var(--gris-texte); }
.telephone {
  justify-self: center;
  width: 240px; height: 480px;
  border-radius: 38px;
  background: #17181c;
  padding: 14px;
  box-shadow: 0 40px 80px -40px rgba(53,55,62,.5);
  position: relative;
}
.telephone .ecran {
  width: 100%; height: 100%;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--framboise), var(--magenta) 55%, var(--orange));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.telephone .ecran .bulle-app {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
}
.telephone .ecran .lignes { width: 60%; }
.telephone .ecran .lignes span {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.65);
  margin: 9px 0;
}
.telephone .ecran .lignes span:nth-child(2) { width: 75%; }
.telephone .ecran .lignes span:nth-child(3) { width: 55%; }
.telephone .encoche {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 8px;
  border-radius: 6px;
  background: #17181c;
  z-index: 2;
}

/* ---------- Boutons génériques ---------- */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--caps);
  font-weight: 400;
  letter-spacing: .22em;
  margin-right: -.22em;
  text-transform: uppercase;
  font-size: 13.5px;
  color: #fff;
  padding: 16px 34px 14px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--framboise), var(--magenta));
  transition: filter .2s ease;
}
.btn:hover { filter: brightness(1.08); }

/* ---------- Process ---------- */
.grille-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: etape; }
.etape { text-align: center; position: relative; padding: 0 10px; }
.etape .numero {
  font-family: var(--display);
  font-size: 46px;
  display: block;
  margin-bottom: 14px;
}
.etape:nth-child(1) .numero { color: var(--framboise); }
.etape:nth-child(2) .numero { color: var(--magenta); }
.etape:nth-child(3) .numero { color: var(--orange); }
.etape:nth-child(4) .numero { color: var(--rouge-profond); }
.etape h3 {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .24em;
  margin-right: -.24em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.etape p { font-size: 14px; color: var(--gris-texte); line-height: 1.6; }

/* ---------- Chiffres ---------- */
.bande-chiffres {
  max-width: none;
  background: linear-gradient(120deg, var(--rouge-profond), var(--magenta) 55%, var(--orange-fonce));
  padding: 80px 24px;
}
.bande-chiffres .grille-chiffres {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  text-align: center;
  color: #fff;
}
.chiffre { padding: 24px 8px; border-radius: 14px; }
/* Une cellule sur deux legerement voilee : c'est ce qui donne le rythme de
   damier du bandeau d'origine, sans ajouter de bordure. */
.chiffre:nth-child(even) { background: rgba(255, 255, 255, .09); }
.chiffre .valeur {
  font-family: var(--display);
  /* Plafonne a 32px : au dela, "1 995 000" ne tient pas dans une colonne sur
     six et repasse a la ligne, ce qui desaligne toute la bande. */
  font-size: clamp(22px, 2.5vw, 32px);
  display: block;
  line-height: 1.15;
  white-space: nowrap;
  /* Chiffres a chasse fixe : sans cela, le compteur anime fait sautiller la
     ligne a chaque changement de largeur de glyphe. */
  font-variant-numeric: tabular-nums;
}
/* Le petit motif de filets decroissants sous chaque nombre. */
.chiffre .filet { display: block; width: 46px; margin: 13px auto 12px; }
.chiffre .filet::before,
.chiffre .filet::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, .75);
  margin-left: auto;
}
.chiffre .filet::before { width: 100%; margin-bottom: 4px; }
.chiffre .filet::after { width: 58%; }
.chiffre .legende {
  font-family: var(--caps);
  font-weight: 300;
  font-size: 11.5px;
  letter-spacing: .2em;
  margin-right: -.2em;
  text-transform: uppercase;
  display: block;
  opacity: .93;
  line-height: 1.5;
}
.chiffres-note {
  max-width: var(--large);
  margin: 30px auto 0;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  font-size: 13.5px;
}

/* ---------- Références ---------- */
.grille-refs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.ref {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--gris-texte);
  border: 1px solid var(--bord);
  background: var(--blanc);
  border-radius: 40px;
  padding: 13px 24px 11px;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.ref:hover { color: var(--magenta); border-color: var(--magenta); }
.refs-note { text-align: center; margin-top: 26px; color: var(--gris-texte); font-size: 14px; }

/* ---------- Contact ---------- */
.bloc-contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; }
.coordonnees h3 {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .26em;
  margin-right: -.26em;
  text-transform: uppercase;
  margin: 26px 0 8px;
}
.coordonnees h3:first-child { margin-top: 0; }
.coordonnees p, .coordonnees a { color: var(--gris-texte); line-height: 1.7; text-decoration: none; }
.coordonnees a:hover { color: var(--magenta); }
form .champ { margin-bottom: 20px; }
form label {
  display: block;
  font-family: var(--caps);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--gris-texte);
}
form input, form select, form textarea {
  width: 100%;
  font-family: var(--corps);
  font-size: 15px;
  color: var(--anthracite);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .2s ease;
}
form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--magenta);
}
form textarea { min-height: 130px; resize: vertical; }
.champ-rgpd { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--gris-texte); }
.champ-rgpd input { width: auto; margin-top: 3px; }
.erreur-form { color: var(--framboise); font-size: 14px; margin-bottom: 16px; display: none; }
.ok-form { color: var(--magenta); font-size: 14px; margin-bottom: 16px; display: none; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--bord);
  padding: 50px 24px 90px;
  text-align: center;
  color: var(--gris-texte);
  font-size: 13.5px;
}
/* Signature : le monogramme et le nom, rien d'autre. Cliquer remonte en haut,
   ce que tout le monde attend d'un logo en pied de page. */
footer .signature {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  margin-bottom: 40px;
}
footer .signature .rond {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--framboise), var(--magenta));
  display: grid;
  place-items: center;
  transition: transform .3s cubic-bezier(.22, .8, .3, 1);
}
footer .signature .rond svg { width: 21px; height: 21px; }
footer .signature:hover .rond { transform: translateY(-3px) rotate(-6deg); }
footer .signature .nom {
  font-family: var(--caps);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: .42em;
  margin-right: -.42em;
  text-transform: uppercase;
  color: var(--magenta);
}

footer .partenaires { margin-bottom: 34px; padding: 0; max-width: none; }
footer .partenaires h2 {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .32em;
  margin-right: -.32em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin-bottom: 16px;
}
footer .partenaires ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
footer .partenaires a {
  display: inline-block;
  font-family: var(--caps);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--gris-texte);
  text-decoration: none;
  border: 1px solid var(--bord);
  border-radius: 30px;
  padding: 9px 18px 7px;
  transition: color .22s ease, border-color .22s ease, transform .22s ease;
}
footer .partenaires a:hover {
  color: var(--magenta);
  border-color: var(--magenta);
  transform: translateY(-2px);
}

footer .legal a { color: var(--gris-texte); margin: 0 10px; }
footer .legal a:hover { color: var(--magenta); }
footer .copyright { margin-top: 16px; }

/* ---------- Bannière cookies ---------- */
.banniere-cookies {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.4);
  padding: 24px 26px;
  display: none;
}
.banniere-cookies.visible { display: block; }
.banniere-cookies p { font-size: 14px; color: var(--gris-texte); line-height: 1.65; margin-bottom: 18px; }
.banniere-cookies p a { color: var(--magenta); }
.banniere-cookies .boutons { display: flex; gap: 12px; flex-wrap: wrap; }
.banniere-cookies button {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 12px 22px 10px;
  border-radius: 30px;
  cursor: pointer;
  border: 1px solid var(--bord);
  background: transparent;
  color: var(--anthracite);
}
.banniere-cookies button.accepter {
  background: linear-gradient(90deg, var(--framboise), var(--magenta));
  color: #fff;
  border: none;
}

/* ---------- Pages légales ---------- */
.page-legale { max-width: 820px; margin: 0 auto; padding: 140px 24px 100px; }
.page-legale h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.page-legale .maj { color: var(--gris-texte); font-size: 13.5px; margin-bottom: 42px; }
.page-legale h2 {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 40px 0 14px;
  color: var(--magenta);
}
.page-legale p, .page-legale li { line-height: 1.8; color: var(--gris-texte); font-size: 15px; margin-bottom: 12px; }
.page-legale ul { padding-left: 22px; }
.page-legale strong { color: var(--anthracite); font-weight: 600; }
.retour {
  display: inline-block;
  margin-bottom: 40px;
  text-decoration: none;
  font-family: var(--caps);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.retour:hover { color: var(--magenta); }

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim1, .anim2, .anim3, .anim4, .fleche-scroll svg { animation: none !important; }
  .cible, .carte, .ref { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .bande-chiffres .grille-chiffres { grid-template-columns: repeat(3, 1fr); }
  /* En trois colonnes, le damier par cellule paire se decale d'une ligne a
     l'autre. On le recale sur les colonnes 2 et 5 de chaque paire de lignes. */
  .chiffre:nth-child(even) { background: transparent; }
  .chiffre:nth-child(2), .chiffre:nth-child(4), .chiffre:nth-child(6) {
    background: rgba(255, 255, 255, .09);
  }
}
@media (max-width: 1000px) {
  .grille-cibles { grid-template-columns: repeat(2, 1fr); }
  .grille-process { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .chiffres-metiers { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .contact-rond { width: 92px; height: 92px; font-size: 10.5px; top: 16px; right: 16px; }
}
@media (max-width: 900px) {
  .piliers, .grille-forfaits { grid-template-columns: 1fr; }
  .piliers { gap: 60px; }
  .app-mobile { grid-template-columns: 1fr; }
  .telephone { width: 210px; height: 420px; }
  .bloc-contact { grid-template-columns: 1fr; }

  /* La grille 2x2 de la navigation mange le coin superieur gauche du contenu
     sur un telephone, et la bulle de survol deborde de l'ecran. En dessous de
     cette largeur, tout repasse en une seule colonne verticale, et les libelles
     ne s'affichent que sur la pastille active. */
  .nav-cluster { grid-template-columns: 46px; }
  .nav-cluster button, .nav-cluster a { width: 46px; height: 46px; }
  .dot-nav i { width: 8px; height: 8px; }
  .dot-nav:hover i, .dot-nav.actif i { width: 46px; height: 46px; }
  .nav-cluster > :nth-child(odd) .bulle { left: calc(100% + 12px); }
  .dot-nav .bulle { font-size: 12.5px; padding: 7px 12px 6px; }
  .dot-nav:hover .bulle { opacity: 0; }
  .dot-nav.actif .bulle { opacity: 1; }

  /* Le rond de contact flotte au-dessus du contenu et, sur un ecran etroit,
     recouvre le texte qu'il survole. Il rejoint donc le bas de la colonne de
     navigation : meme gabarit que les autres cellules, quatre cases empilees
     de 46px, et plus rien qui masque une ligne de texte. */
  .contact-rond {
    top: 184px;
    right: auto;
    left: 0;
    width: 46px;
    height: 46px;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
    background: var(--blanc);
    font-size: 0; /* masque le libelle, l'enveloppe suffit */
    gap: 0;
  }
  .contact-rond svg { width: 20px; height: 15px; }
  .contact-rond:hover { background: var(--magenta); color: #fff; }
}
@media (max-width: 700px) {
  .bande-chiffres { padding: 56px 18px 48px; }
  .bande-chiffres .grille-chiffres { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .chiffre:nth-child(2), .chiffre:nth-child(4), .chiffre:nth-child(6) { background: transparent; }
  .chiffre:nth-child(even) { background: rgba(255, 255, 255, .09); }
  .chiffre { padding: 20px 6px; }
}
@media (max-width: 560px) {
  section { padding: 70px 18px; }
  .grille-cibles { grid-template-columns: 1fr; }
  .grille-process { grid-template-columns: 1fr; }
  .scene { min-height: 480px; }
  /* hors des blobs, le titre blanc manque de contraste sur petit ecran */
  .titre-hero {
    text-shadow: 0 1px 3px rgba(80, 8, 40, .45), 0 2px 18px rgba(120, 10, 60, .35);
  }
}

/* ==========================================================================
   Animations
   ==========================================================================
   Trois familles, et une seule regle qui les gouverne : rien ne doit empecher
   de lire. Les elements sont visibles par defaut dans le HTML ; c'est le
   JavaScript qui pose `.js-anim` sur <html> et arme les revelations. Sans
   JavaScript, ou avec `prefers-reduced-motion`, la page reste complete et
   lisible, simplement immobile.
   ========================================================================== */

/* --- 1. Revelation a l'arrivee dans la fenetre --- */
.js-anim .reveler {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, .8, .3, 1), transform .7s cubic-bezier(.22, .8, .3, 1);
  /* Previent le navigateur : il compose ces elements sur leur propre couche,
     ce qui evite le scintillement sur les grandes sections. */
  will-change: opacity, transform;
}
.js-anim .reveler.vu {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Decalage en cascade a l'interieur d'un meme groupe : les cartes n'arrivent
   pas toutes ensemble, elles se posent l'une apres l'autre. */
.js-anim .reveler[data-retard="1"] { transition-delay: .09s; }
.js-anim .reveler[data-retard="2"] { transition-delay: .18s; }
.js-anim .reveler[data-retard="3"] { transition-delay: .27s; }
.js-anim .reveler[data-retard="4"] { transition-delay: .36s; }
.js-anim .reveler[data-retard="5"] { transition-delay: .45s; }

/* Variante laterale, pour les blocs en deux colonnes. */
.js-anim .reveler-gauche { transform: translateX(-34px); }
.js-anim .reveler-droite { transform: translateX(34px); }
.js-anim .reveler-gauche.vu, .js-anim .reveler-droite.vu { transform: none; }

/* Variante zoom, pour les icones des piliers. */
.js-anim .reveler-zoom { transform: scale(.86); opacity: 0; }
.js-anim .reveler-zoom.vu { transform: none; opacity: 1; }

/* --- 2. Parallaxe --- */
/* La scene de blobs remonte un peu moins vite que la page. Le decalage est
   pose en variable par le JavaScript, jamais en `top` : seul `transform` est
   compose par le GPU, tout le reste declencherait un recalcul de mise en page
   a chaque image. */
.scene .blobs { transform: translate3d(0, var(--parallaxe, 0px), 0); }
.titre-hero { transform: translate3d(0, calc(var(--parallaxe, 0px) * -.45), 0); }

/* --- 3. Micro-interactions --- */
/* Le titre de section se souligne d'un trait qui se deploie a l'arrivee. */
.entete h2 { position: relative; display: inline-block; }
.entete h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--framboise), var(--magenta), var(--orange));
  transform: translateX(-50%);
  transition: width .8s cubic-bezier(.22, .8, .3, 1) .25s;
}
.js-anim .entete.vu h2::after,
html:not(.js-anim) .entete h2::after { width: 74px; }

/* Cartes de forfait : elles se soulevent et leur ombre s'ouvre. */
.carte {
  transition: transform .35s cubic-bezier(.22, .8, .3, 1), box-shadow .35s ease;
}
.carte:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 70px -34px rgba(53, 55, 62, .42);
}
/* Le liseré du haut s'epaissit au survol : le detail se remarque a peine,
   c'est ce qui donne l'impression que la carte reagit. */
.carte::before { transition: height .3s ease; }
.carte:hover::before { height: 8px; }

/* Les pastilles de reference se teintent et avancent. */
.ref { transition: color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.ref:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(230, 0, 126, .5);
}

/* Le pilier respire au survol : l'icone grandit, le titre se decale. */
.pilier .icone { transition: transform .45s cubic-bezier(.22, .8, .3, 1); }
.pilier:hover .icone { transform: translateY(-8px) scale(1.06); }

/* Les cartes metier basculent legerement vers l'avant. */
.cible { transition: transform .3s cubic-bezier(.22, .8, .3, 1), box-shadow .3s ease, border-color .3s ease; }
.cible:hover { border-color: rgba(230, 0, 126, .35); }

/* Les etapes du process : le numero se colore plus fort au survol de la carte. */
.etape .numero { transition: transform .35s cubic-bezier(.22, .8, .3, 1); display: inline-block; }
.etape:hover .numero { transform: translateY(-5px) scale(1.1); }

/* Boutons : un voile qui balaie de gauche a droite au survol. */
.btn, .carte .cta {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
}
.btn::after, .carte .cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .32) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .65s cubic-bezier(.22, .8, .3, 1);
}
.btn:hover::after, .carte .cta:hover::after { transform: translateX(120%); }
.btn:hover, .carte .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(230, 0, 126, .55);
}

/* La fleche de defilement s'efface quand on quitte le hero : elle n'a plus
   rien a indiquer une fois qu'on a commence a lire. */
.fleche-scroll { transition: opacity .4s ease, transform .4s ease; }
.fleche-scroll.effacee { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }

/* Le bouton de contact prend la couleur de marque quand la page defile. */
.contact-rond.active { border-color: var(--magenta); color: var(--magenta); }

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveler,
  .js-anim .reveler-gauche,
  .js-anim .reveler-droite,
  .js-anim .reveler-zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scene .blobs, .titre-hero { transform: none !important; }
  .entete h2::after { transition: none; width: 74px; }
  .carte, .ref, .pilier .icone, .cible, .etape .numero, .btn, .carte .cta, .fleche-scroll {
    transition: none;
  }
  .btn::after, .carte .cta::after { display: none; }
}

/* --- Bandeau defilant des references --- */
/* Monte par js/animations.js a toutes les largeurs. Les quinze pastilles
   formaient un pave de trois rangees centrees, qui se lit comme une liste et
   non comme une preuve ; en bandeau, elles disent le nombre et le mouvement
   retient le regard la ou on le veut. */
.grille-refs.en-bandeau {
  display: block;
  /* Pleine largeur de fenetre, en sortant de la colonne centrale : un bandeau
     qui s'arrete aux marges du texte ressemble a un debordement, pas a un
     defilement. `100vw` et non `100%`, sinon il resterait dans la section. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50vw);
  overflow: hidden;
  position: relative;
  padding: 6px 0;
  /* Fondu aux deux bords : les pastilles apparaissent et disparaissent au lieu
     d'etre tranchees net par le bord de l'ecran. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.refs-piste {
  display: flex;
  width: max-content;
  /* Lent, volontairement : les noms doivent rester lisibles au passage. La
     duree vaut pour un cycle complet des deux series. */
  animation: defile-refs 60s linear infinite;
}
/* Le survol met en pause, pour pouvoir viser un lien sans courir apres. */
.refs-piste:hover { animation-play-state: paused; }
.refs-serie { display: flex; gap: 14px; padding-right: 14px; }
.refs-serie .ref { flex: none; }
@keyframes defile-refs {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 700px) {
  /* Moins de pastilles visibles a la fois : a vitesse egale le bandeau
     paraitrait figé, on le raccourcit. */
  .refs-piste { animation-duration: 34s; }
  .refs-serie { gap: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .refs-piste { animation: none; }
  /* Sans defilement, la copie ferait doublon a l'ecran, et le bandeau devient
     une bande que l'on fait glisser soi-meme. */
  .refs-piste > [aria-hidden="true"] { display: none; }
  .grille-refs.en-bandeau { overflow-x: auto; }
}

/* ==========================================================================
   Pages de contenu editorial (/solutions/)
   ==========================================================================
   Une colonne unique et etroite : au dela d'environ 70 caracteres par ligne,
   l'oeil perd le debut de la ligne suivante. C'est la contrainte qui fixe la
   largeur, pas la place disponible a l'ecran.
   ========================================================================== */

/* Logo compact, partage par l en-tete du tunnel et celui des pages de
   contenu. Il vivait dans tunnel.css ; il sert desormais aux deux. */
.tunnel-logo {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}
.tunnel-logo .rond {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--framboise), var(--magenta));
  display: grid;
  place-items: center;
}
.tunnel-logo .rond svg { width: 21px; height: 21px; }
.tunnel-logo .nom {
  font-family: var(--caps);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: .42em;
  margin-right: -.42em;
  text-transform: uppercase;
  color: var(--magenta);
}

.entete-contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--bord);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fond-bas);
}
.btn-compact { padding: 12px 24px 10px; font-size: 12px; }

.page-contenu {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 24px 90px;
}

.fil-ariane {
  font-family: var(--caps);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin-bottom: 26px;
}
.fil-ariane a { color: var(--gris-texte); text-decoration: none; }
.fil-ariane a:hover { color: var(--magenta); }
.fil-ariane span[aria-hidden] { margin: 0 8px; }

.page-contenu h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 50px);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 22px;
}
.page-contenu .chapeau {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--anthracite);
  margin-bottom: 14px;
}
.page-contenu h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(23px, 3.2vw, 33px);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 64px 0 8px;
  padding-top: 26px;
  border-top: 1px solid var(--bord);
}
.page-contenu h3 {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 38px 0 10px;
}
.page-contenu p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gris-texte);
  margin-bottom: 16px;
}
.page-contenu strong { color: var(--anthracite); font-weight: 600; }
.page-contenu a { color: var(--magenta); }

/* Le point saillant de la page : la regle sur le budget publicitaire. Encadre
   parce que c'est la question que tout le monde pose, et qu'elle doit se lire
   sans avoir a chercher. */
.page-contenu .encadre {
  background: var(--blanc);
  border-left: 3px solid var(--magenta);
  border-radius: 0 12px 12px 0;
  padding: 20px 22px;
  margin: 26px 0;
  font-size: 15.5px;
}

.liste-etapes { list-style: none; counter-reset: etape-contenu; margin: 24px 0; }
.liste-etapes li {
  counter-increment: etape-contenu;
  position: relative;
  padding-left: 52px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--gris-texte);
}
.liste-etapes li::before {
  content: counter(etape-contenu);
  position: absolute;
  left: 0; top: -2px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--framboise), var(--magenta));
  color: #fff;
  font-family: var(--display);
  font-size: 17px;
  display: grid;
  place-items: center;
}

/* Les tableaux debordent sur un telephone : ils defilent dans leur propre
   cadre plutot que d'elargir la page entiere. */
.tableau-defilant { overflow-x: auto; margin: 24px 0 30px; }
.page-contenu table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 520px;
}
.page-contenu caption {
  text-align: left;
  font-family: var(--caps);
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-texte);
  padding-bottom: 12px;
}
.page-contenu th, .page-contenu td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--bord);
  color: var(--gris-texte);
}
.page-contenu thead th {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--anthracite);
}
.page-contenu tbody th { color: var(--anthracite); font-weight: 600; white-space: nowrap; }

.appel-action {
  margin-top: 70px;
  padding: 42px 32px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(120deg, var(--rouge-profond), var(--magenta) 55%, var(--orange-fonce));
}
.appel-action h2 {
  border: none;
  margin: 0 0 12px;
  padding: 0;
  color: #fff;
}
.appel-action p { color: rgba(255,255,255,.9); margin-bottom: 24px; }
.appel-action .btn { background: #fff; color: var(--magenta); }
.appel-action .btn:hover { background: #fff; }

@media (max-width: 560px) {
  .page-contenu { padding: 32px 18px 70px; }
  .entete-contenu { padding: 14px 18px; }
  .appel-action { padding: 32px 20px; }
}

/* --- Bloc de texte "approche" sur l'accueil --- */
.colonnes-texte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 56px;
}
.colonnes-texte h3 {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 10px;
}
.colonnes-texte h3:not(:first-child) { margin-top: 30px; }
.colonnes-texte p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--gris-texte);
}
.lien-approfondir { text-align: center; margin-top: 44px; }
.lien-approfondir a {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--magenta);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity .2s ease;
}
.lien-approfondir a:hover { opacity: .7; }
@media (max-width: 800px) {
  .colonnes-texte { grid-template-columns: 1fr; gap: 0; }
  .colonnes-texte > div:last-child h3:first-child { margin-top: 30px; }
}

/* --- Cartes metier cliquables et maillage entre pages --- */
a.cible { display: block; text-decoration: none; }
.lien-cible {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--magenta);
  transition: transform .25s ease;
}
.lien-cible::after { content: " ›"; }
a.cible:hover .lien-cible { transform: translateX(4px); }

.autres-metiers { margin-top: 66px; padding-top: 30px; border-top: 1px solid var(--bord); }
.autres-metiers h2 {
  border: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: clamp(20px, 2.6vw, 27px);
}
.autres-metiers ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.autres-metiers li a {
  display: inline-block;
  font-family: var(--caps);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--gris-texte);
  text-decoration: none;
  border: 1px solid var(--bord);
  border-radius: 30px;
  padding: 10px 20px 8px;
  transition: color .22s ease, border-color .22s ease, transform .22s ease;
}
.autres-metiers li a:hover {
  color: var(--magenta);
  border-color: var(--magenta);
  transform: translateY(-2px);
}