/* ==========================================================================
   Sections propres aux pages
   ========================================================================== */

/* ---------- Accueil : Nos soins et services ---------- */
.services { padding-block: 128px; }
.services__inner { display: flex; flex-direction: column; gap: 38px; }
.services__intro { max-width: 700px; }
.services__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 16px; }
.carte-service {
  display: flex; justify-content: space-between; height: 240.25px; overflow: hidden; padding: 1px;
  background: var(--blanc); border: 1px solid var(--lin); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.carte-service:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(23, 28, 31, .08); }
.carte-service__texte { display: flex; flex-direction: column; justify-content: space-between; width: 326.7px; max-width: 48%; padding: 24px; }
.carte-service__haut { display: flex; flex-direction: column; gap: 7.1px; padding-bottom: 16px; }
.pastille-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--jade-pale); flex: none; }
.pastille-icone img { width: 24px; height: 24px; }
.carte-service h3 { padding-top: 12.9px; font-family: var(--f-carte); font-weight: 700; font-size: 18px; line-height: 28px; color: var(--taupe); }
.carte-service p { font-family: var(--f-carte); font-size: 13px; line-height: 21.13px; color: var(--taupe); }
.carte-service__lien { display: inline-flex; align-items: center; gap: 6px; padding-top: 8px; font-family: var(--f-carte); font-weight: 700; font-size: 12px; line-height: 16px; color: var(--taupe); }
.carte-service__lien img { width: 8.3px; height: 3.3px; transition: transform .25s var(--ease); }
.carte-service:hover .carte-service__lien img { transform: translateX(4px); }
.carte-service__image { width: 267.3px; flex: none; overflow: hidden; border-radius: 0 23px 23px 0; }
.carte-service__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.carte-service:hover .carte-service__image img { transform: scale(1.05); }
.services__tous { align-self: flex-end; display: flex; flex-direction: column; gap: 8px; }
.services__tous a {
  font-family: var(--f-nav); font-weight: 600; font-size: 13px; line-height: normal; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--taupe); white-space: pre;
}
.services__tous::after { content: ""; height: 1px; background: rgba(147, 139, 130, .5); transform-origin: right; transition: transform .35s var(--ease); }
.services__tous:hover::after { transform: scaleX(.6); }

/* ---------- Accueil : Le cabinet (bento) ---------- */
.cabinet { padding-block: 128px; }
.cabinet__inner { display: flex; gap: 56px; }
.cabinet__gauche { display: flex; flex-direction: column; justify-content: space-between; width: 493px; flex: none; min-height: 655px; }
.cabinet__haut { display: flex; flex-direction: column; gap: 34px; width: 470px; max-width: 100%; }
.cabinet__haut .titre-2 { min-height: 144px; white-space: nowrap; }
.cabinet__texte { font-family: var(--f-texte); font-size: 16px; line-height: 29px; color: var(--taupe); }
.btn-savoir {
  display: inline-flex; align-items: center; align-self: flex-start; height: 52px; padding: 0 32px;
  border-radius: 999px; background: var(--taupe); color: #fff;
  font-family: var(--f-nav); font-weight: 700; font-size: 13px; letter-spacing: 1.2px; white-space: pre;
  transition: background-color .25s;
}
.btn-savoir:hover { background: var(--brun); }
.cabinet__signature { display: flex; align-items: center; gap: 24px; padding-left: 24px; }
.cabinet__signature::before { content: ""; width: 1px; height: 66px; background: rgba(147, 139, 130, .45); }
.cabinet__signature p { font-family: var(--f-nav); font-weight: 700; font-size: 12px; line-height: 22px; letter-spacing: 2px; color: var(--taupe); }

.bento {
  flex: 1; display: grid; min-width: 0;
  grid-template-columns: 319fr 16fr 128fr 14fr 389fr;
  grid-template-rows: 208px 20px 195px 20px 212px;
}
.tuile {
  position: relative; overflow: hidden; border-radius: 16px; background: var(--taupe-fonce); color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
  isolation: isolate;
}
.tuile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.tuile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--taupe-fonce) 0%, rgba(138, 133, 125, 0) 100%);
  transition: opacity .5s var(--ease);
}
.tuile:hover > img { transform: scale(1.06); }
.tuile:hover::before { opacity: .85; }
.tuile__badge {
  position: absolute; left: 24px; top: 24px; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; background: #fff;
}
.tuile__badge img { width: 20px; height: 20px; }
.tuile__titre { max-width: 247px; font-family: var(--f-texte); font-size: 19px; line-height: 25px; }
.tuile__titre span { display: inline-block; margin-left: 10px; transition: transform .3s var(--ease); }
.tuile:hover .tuile__titre span { transform: translateX(5px); }
.tuile__sous { max-width: 247px; margin-top: 8px; font-family: var(--f-texte); font-size: 13.5px; line-height: 20px; color: rgba(255, 255, 255, .85); }
.tuile--histoire { grid-column: 1; grid-row: 1 / 4; }
.tuile--histoire::before { background: linear-gradient(180deg, rgba(138, 133, 125, 0) 0%, var(--taupe-fonce) 100%); }
.tuile--histoire .tuile__badge { top: auto; bottom: 62px; }
.tuile--histoire .tuile__titre, .tuile--histoire .tuile__sous { margin-left: 74px; max-width: 197px; }
.tuile--histoire .tuile__titre { font-size: 22px; line-height: 29px; }
.tuile--profession { grid-column: 3 / 6; grid-row: 1; }
.tuile--profession > img { object-position: center 40%; }
.tuile--clinique { grid-column: 3 / 6; grid-row: 3; }
.tuile--equipe { grid-column: 1 / 4; grid-row: 5; }
.tuile--clienteles { grid-column: 5; grid-row: 5; }
.tuile--equipe .tuile__titre, .tuile--equipe .tuile__sous { max-width: 237px; }
.tuile--clienteles .tuile__titre, .tuile--clienteles .tuile__sous { max-width: 183px; }

/* ---------- Accueil : Mission ---------- */
.mission { padding-block: 96px; }
.mission__inner { display: flex; align-items: center; justify-content: center; gap: 64px; }
.mission__texte { flex: 1; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; min-height: 589px; }
.mission__etiquette { display: flex; flex-direction: column; gap: 16px; }
.mission__etiquette img { width: 32px; height: 32px; }
.mission__etiquette span { font-family: var(--f-ui); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 2.8px; text-transform: uppercase; color: var(--taupe); }
.mission__titre { font-family: var(--f-titre); font-weight: 400; font-size: 60px; line-height: 60px; color: var(--encre); }
.mission__titre + .barre { margin-top: -32px; }
.mission__desc { font-family: var(--f-titre); font-weight: 500; font-size: 22px; line-height: 32px; color: var(--taupe); }
.btn-inter {
  display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 999px;
  background: var(--taupe); color: #fff; font-family: var(--f-ui); font-weight: 700; font-size: 14px; line-height: 20px;
  letter-spacing: .7px; text-transform: uppercase; transition: background-color .25s;
}
.btn-inter img { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn-inter:hover { background: var(--brun); }
.btn-inter:hover img { transform: translateX(4px); }
.mission__visuel { position: relative; width: 520px; flex: none; }
.mission__arche { overflow: hidden; height: 600px; border-radius: 9999px 9999px 24px 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.mission__arche img { width: 100%; height: 100%; object-fit: cover; }
.carte-flottante {
  position: absolute; left: -48px; bottom: -32px; display: flex; align-items: center; gap: 16px;
  max-width: 384px; padding: 25px; background: #fff; border: 1px solid #f3f4f6; border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  animation: flotter 6s ease-in-out infinite;
}
.carte-flottante .pastille-icone { width: 48px; height: 48px; }
.carte-flottante div strong { display: block; font-family: var(--f-ui); font-weight: 600; font-size: 16px; line-height: 24px; color: var(--taupe); }
.carte-flottante div span { display: block; font-family: var(--f-ui); font-size: 14px; line-height: 20px; color: var(--taupe); }
@keyframes flotter { 50% { transform: translateY(-8px); } }

/* ---------- Clinique moderne ---------- */
.approche-intro { padding: 121px 0 72px; text-align: center; }
.approche-intro .container { display: flex; flex-direction: column; align-items: center; }
.approche-intro .titre-2 { max-width: 1144px; margin-top: 14px; }
.approche-intro .barre { margin-top: 24px; height: 3px; }
.approche-intro p.texte { max-width: 780px; margin-top: 24px; font-family: var(--f-titre); font-size: 15px; line-height: 1.85; color: var(--taupe); }
.techno { padding-bottom: 49px; }
.techno__grille { display: grid; grid-template-columns: repeat(2, 548px); justify-content: center; gap: 15px 48px; }
.carte-techno {
  display: flex; flex-direction: column; align-items: flex-start; padding: 36px;
  background: #fff; border: 1px solid var(--lin); border-radius: 16px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .06));
  transition: transform .35s var(--ease);
}
.carte-techno:hover { transform: translateY(-3px); }
.carte-techno__icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 26px; background: var(--jade-pale); }
.carte-techno__icone img { width: 22px; height: 22px; }
.carte-techno h3 { margin: 18px 0 12px; font-family: var(--f-titre); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--encre); }
.carte-techno .barre { width: 36px; }
.carte-techno p { margin-top: 12px; font-family: var(--f-titre); font-size: 13px; line-height: 1.85; color: var(--taupe); }
.avant-garde { display: flex; flex-direction: column; gap: 20px; }
.avant-garde__texte { font-family: var(--f-titre); font-size: 14px; line-height: 1.95; color: var(--taupe); }
.avant-garde__texte p + p { margin-top: 27.3px; }
.piliers { display: grid; grid-template-columns: repeat(2, 540px); gap: 20px; }
.pilier {
  display: flex; align-items: center; gap: 16px; padding: 18px 24px; min-height: 69px;
  background: #fff; border: 1px solid var(--sable); border-radius: 10px;
  font-family: var(--f-titre); font-size: 14px; line-height: 1.55; color: var(--encre);
}
.pilier img { width: 20px; height: 20px; flex: none; }

/* ---------- Bio (lactation, massothérapie) ---------- */
.bio { padding: 100px 0 150px; }
.bio--grand-bas { padding-bottom: 213px; }
.bio__inner { display: grid; grid-template-columns: 420px 644px; justify-content: center; gap: 80px; align-items: start; }
.bio__photo { position: relative; height: 560px; border-radius: 16px; overflow: hidden; background: var(--jade-pale); }
.bio__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio__badge {
  position: absolute; right: 16px; bottom: 16px; width: 106px; height: 62px; padding: 7px 12px;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .07); color: var(--taupe);
}
.bio__badge strong { display: block; font-family: var(--f-titre); font-weight: 700; font-size: 26px; line-height: 30px; }
.bio__badge span { display: block; font-family: var(--f-titre); font-weight: 600; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.bio__texte { display: flex; flex-direction: column; align-items: flex-start; padding-top: 8px; }
.bio__surtitre { font-family: var(--f-titre); font-weight: 700; font-size: 11px; letter-spacing: 3px; color: var(--taupe); }
.bio__nom { margin-top: 11px; font-family: var(--f-titre); font-weight: 400; font-size: 52px; line-height: 50px; color: var(--encre); }
.bio__nom span { display: block; font-weight: 300; }
.bio__texte .barre { margin-top: 15px; }
.bio__role { margin-top: 22px; font-family: var(--f-titre); font-weight: 700; font-size: 10px; letter-spacing: 2px; color: var(--taupe); }
.bio__desc { margin-top: 20px; font-family: var(--f-titre); font-size: 15px; line-height: 28.5px; color: var(--taupe); }
.bio__desc p + p { margin-top: 28.5px; }
.bio__approche { display: flex; gap: 10px; margin-top: 18px; padding: 14px 18px; border-radius: 12px; }
.bio__approche-icone { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--jade-pale); }
.bio__approche-icone img { width: 32px; height: 32px; transform: scale(.5625); }
.bio__approche strong { display: block; font-family: var(--f-titre); font-weight: 700; font-size: 13px; color: var(--taupe); }
.bio__approche span { display: block; margin-top: 4px; font-family: var(--f-titre); font-size: 12px; line-height: 19px; color: var(--taupe); }
.bio .btn { margin-top: 32px; }

.services-liste { display: flex; flex-direction: column; gap: 18px; }
.services-liste__intro { font-family: var(--f-titre); font-size: 14px; line-height: 1.8; color: var(--taupe); }
.techniques { padding-block: 120px; }
.techniques .container { display: flex; flex-direction: column; gap: 18px; }
.techniques .grille-coches { max-width: calc(3 * 345px + 2 * 20px); }

/* ---------- Texte + image (laser, populations) ---------- */
.texte-image { display: flex; gap: 72px; }
.texte-image__texte { flex: 1; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; }
.texte-image__corps { font-family: var(--f-texte); font-size: 16.5px; line-height: 30px; color: var(--taupe); }
.texte-image__corps p + p { margin-top: 30px; }
.texte-image__photo { width: 560px; height: 620px; flex: none; overflow: hidden; border-radius: 20px; background: var(--ligne); }
.texte-image__photo--660 { height: 660px; }
.texte-image__photo img { width: 100%; height: 100%; object-fit: cover; }
.motifs { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.motifs li { display: flex; align-items: center; gap: 12px; font-family: var(--f-texte); font-size: 15.5px; line-height: normal; color: var(--taupe); }
.motifs li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brun); flex: none; }
.bloc-coches { display: flex; flex-direction: column; gap: 44px; }

/* ---------- Soins chiropratiques : clientèles ---------- */
.clienteles { display: flex; flex-direction: column; gap: 52px; }
.clienteles .intro { max-width: 573px; }
.clienteles__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.carte-pop {
  display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border: 1px solid var(--lin); border-radius: 18px; box-shadow: var(--ombre-carte);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.carte-pop:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23, 28, 31, .09); }
.carte-pop__photo { height: 260px; overflow: hidden; background: var(--ligne); }
.carte-pop__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.carte-pop:hover .carte-pop__photo img { transform: scale(1.05); }
.carte-pop__corps { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.carte-pop h3 { font-family: var(--f-texte); font-weight: 500; font-size: 21px; line-height: 28px; color: var(--encre); }
.carte-pop p { font-family: var(--f-texte); font-size: 14px; line-height: 22px; color: var(--encre); }
.lien-souligne { display: inline-flex; flex-direction: column; gap: 6px; align-self: flex-start; padding-top: 8px; font-family: var(--f-texte); font-weight: 500; font-size: 14px; color: var(--encre); white-space: pre; }
.lien-souligne::after { content: ""; height: 1px; background: rgba(46, 50, 50, .35); transition: background-color .25s; }
.carte-pop:hover .lien-souligne::after { background: var(--encre); }

/* ---------- Notre histoire ---------- */
.mission-intro { padding: 80px 0 83px; }
.mission-intro__inner { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 820px; margin-inline: auto; text-align: center; }
.mission-intro__surtitre { font-family: var(--f-titre); font-weight: 600; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--taupe); }
.mission-intro h2 { font-family: var(--f-titre); font-weight: 700; font-size: 28px; line-height: 1.3; color: var(--taupe); }
.mission-intro .barre { width: 36px; margin: 4px 0 8px; }
.mission-intro p.texte { font-family: var(--f-titre); font-size: 15px; line-height: 1.95; color: var(--taupe); }
.accordeons-section { padding: 110px 0; }
.accordeons-section .container { display: flex; flex-direction: column; gap: 48px; }
.accordeons-section .intro { max-width: 500px; }
.accordeons { display: flex; flex-direction: column; gap: 14px; }
.accordeon { background: #fff; border: 1px solid var(--ligne); border-radius: 16px; overflow: hidden; transition: box-shadow .3s var(--ease); }
.accordeon:hover { box-shadow: var(--ombre-carte); }
.accordeon__bouton {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px 36px; text-align: left;
  font-family: var(--f-texte); font-weight: 500; font-size: 22px; line-height: 30px; color: var(--encre);
}
.accordeon__signe {
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--jade-pale);
  transition: background-color .25s;
}
.accordeon__signe::before, .accordeon__signe::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px;
  background: var(--brun); transition: transform .3s var(--ease);
}
.accordeon__signe::after { transform: rotate(90deg); }
.accordeon__bouton[aria-expanded="true"] .accordeon__signe::after { transform: rotate(0deg); }
.accordeon__bouton:hover .accordeon__signe { background: var(--lin); }
.accordeon__panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.accordeon__panneau > div { overflow: hidden; }
.accordeon.est-ouvert .accordeon__panneau { grid-template-rows: 1fr; }
.accordeon__corps { padding: 0 56px 36px; }
.accordeon__corps .prose { max-width: 860px; padding-top: 19px; font-family: var(--f-titre); font-size: 14px; line-height: 27.3px; color: var(--taupe); }
.prose p + p { margin-top: 17.1px; }
.demarche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 20px; align-items: start; }
.etape { display: flex; flex-direction: column; gap: 16px; padding: 37px; border: 1px solid var(--lin); border-radius: 12px; font-family: var(--f-titre); color: var(--taupe); }
.etape__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; background: var(--jade-pale); font-weight: 700; font-size: 14px; }
.etape h4 { font-weight: 700; font-size: 15px; line-height: 21px; }
.etape p, .etape li { font-size: 13px; line-height: 24.7px; }
.etape ul { margin-top: -4px; }
.etape li { position: relative; padding: 5px 0 5px 18px; }
.etape li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 3px; background: var(--teal); }
.colonnes-chiro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding-top: 20px; }
.colonne-chiro { display: flex; flex-direction: column; gap: 13px; padding: 26px 0 25px; border-top: 3px solid var(--teal); font-family: var(--f-titre); color: var(--taupe); }
.colonne-chiro h4 { font-weight: 600; font-size: 14px; line-height: 19.6px; }
.colonne-chiro p { font-size: 13px; line-height: 25.35px; }

/* ---------- Équipe ---------- */
.equipe { display: flex; flex-direction: column; gap: 56px; }
.equipe .intro { max-width: 619px; }
.rangee { display: flex; flex-direction: column; gap: 22px; }
.rangee__titre { font-family: var(--f-nav); font-weight: 600; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--taupe); }
.rangee__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.fiche { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--lin); border-radius: 18px; box-shadow: var(--ombre-carte); }
.fiche__photo { height: 400px; background: var(--ligne); overflow: hidden; }
.fiche__photo--blanc { background: #fff; }
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .9s var(--ease); }
.fiche:hover .fiche__photo img { transform: scale(1.04); }
.fiche__corps { display: flex; flex-direction: column; gap: 6px; padding: 28px; }
.fiche__nom { font-family: var(--f-texte); font-weight: 500; font-size: 21px; line-height: 28px; color: var(--encre); }
.fiche__role { font-family: var(--f-texte); font-size: 14px; line-height: 21px; color: var(--encre); }
.fiche__bascule {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0 6px;
  font-family: var(--f-texte); font-weight: 500; font-size: 14px; color: var(--encre);
}
.fiche__bascule::after {
  content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid var(--brun); border-width: 1.5px 1.5px 0 0;
  transform: rotate(135deg) translate(-2px, 2px); transition: transform .3s var(--ease);
}
.fiche__bascule[aria-expanded="true"]::after { transform: rotate(-45deg); }
.fiche__bio { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.fiche__bio > div { overflow: hidden; }
.fiche.est-ouvert .fiche__bio { grid-template-rows: 1fr; }
.fiche__bio-boite { padding: 18px; border-radius: 12px; background: var(--creme); font-family: var(--f-texte); font-size: 13.5px; line-height: 22px; color: var(--taupe); }
.fiche__bio-boite p + p { margin-top: 22px; }
.fiche__bio-boite p strong { display: block; font-weight: 500; color: var(--encre); }
.fiche__bio-boite p strong + * { margin-top: 0; }
.fiche__a-integrer { display: flex; flex-direction: column; gap: 12px; }
.fiche__a-integrer b { font-weight: 500; font-size: 11.5px; letter-spacing: .6px; color: var(--brun); }
.fiche__a-integrer span { font-size: 13px; line-height: 20px; }
.fiche__a-integrer i { display: block; height: 84px; background: #fff; border: 1px dashed var(--ligne-douce); border-radius: 8px; }
.fiche__sep { height: 1px; margin: 14px 0; background: var(--ligne-douce); }

/* ---------- Contact ---------- */
.contact { display: flex; gap: 64px; align-items: flex-start; }
.formulaire {
  display: flex; flex-direction: column; gap: 22px; width: 760px; flex: none; padding: 44px;
  background: #fff; border-radius: 20px; box-shadow: 0 8px 24px rgba(23, 28, 31, .05);
}
.formulaire h2 { font-family: var(--f-titre); font-weight: 400; font-size: 32px; line-height: 42px; color: var(--taupe); }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label, .champ legend { font-family: var(--f-texte); font-weight: 500; font-size: 13.5px; line-height: normal; color: var(--taupe); }
.champ legend { padding: 0; margin-bottom: 8px; }
fieldset.champ { border: 0; margin: 0; padding: 0; min-width: 0; }
.champ input, .champ select, .champ textarea {
  width: 100%; height: 52px; padding: 0 18px; border: 1px solid var(--ligne); border-radius: 10px;
  background: var(--creme); font-family: var(--f-texte); font-size: 14px; color: var(--encre);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.champ textarea { height: 120px; padding: 16px 18px; resize: vertical; }
.champ select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23625648' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center;
}
.champ ::placeholder { color: var(--encre); opacity: 1; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--taupe); background: #fff; box-shadow: 0 0 0 4px rgba(147, 139, 130, .14); }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: #b3261e; }
.champ__erreur { font-size: 12.5px; color: #b3261e; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  padding: 8px 14px; line-height: normal; border-radius: 999px; background: var(--lin);
  font-family: var(--f-texte); font-size: 12.5px; color: var(--taupe); transition: background-color .2s, color .2s;
}
.puce:hover { background: var(--sable); color: var(--encre); }
.puce[aria-pressed="true"] { background: var(--brun); color: #fff; }
.formulaire .btn-pastille { padding-block: 18px; }
.formulaire__succes { padding: 16px 18px; border-radius: 12px; background: var(--jade-pale); font-family: var(--f-texte); font-size: 14px; color: var(--brun); }
.coordonnees { flex: 1; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.carte-geo { height: 300px; overflow: hidden; border-radius: 20px; background: #ece8e1; }
.carte-geo iframe { width: 100%; height: 100%; border: 0; filter: saturate(.75); }
.bloc-info { display: flex; flex-direction: column; gap: 16px; padding: 32px; background: #fff; border-radius: 20px; color: var(--taupe); }
.bloc-info h2 { font-family: var(--f-nav); font-weight: 600; font-size: 12px; line-height: normal; letter-spacing: 1.8px; text-transform: uppercase; }
.bloc-info address { font-style: normal; font-family: var(--f-texte); font-size: 16px; line-height: 27px; }
.bloc-info hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--ligne); }
.bloc-info dl { display: flex; flex-direction: column; gap: 16px; }
.bloc-info dl div { display: flex; justify-content: space-between; gap: 16px; font-family: var(--f-texte); font-size: 14.5px; line-height: normal; }
.bloc-info dd { font-weight: 500; text-align: right; }
.bloc-info a:hover { color: var(--encre); }
.bloc-info .note { font-family: var(--f-texte); font-size: 12.5px; line-height: normal; }

/* ==========================================================================
   Responsive pages
   ========================================================================== */
@media (max-width: 1400px) {
  .cabinet__inner { gap: 40px; }
  .cabinet__gauche { width: 400px; }
  .cabinet__haut { width: 100%; }
  .bio__inner { grid-template-columns: 380px minmax(0, 644px); gap: 56px; }
  .texte-image__photo { width: 460px; }
  .contact { gap: 40px; }
  .formulaire { width: 56%; }
  .techno__grille { grid-template-columns: repeat(2, minmax(0, 548px)); }
  .piliers { grid-template-columns: repeat(2, minmax(0, 540px)); }
  .services__grille { gap: 20px; }
  .carte-service__image { width: 40%; }
  .carte-service__texte { width: 60%; max-width: none; }
}
@media (max-width: 1100px) {
  .services, .cabinet { padding-block: 96px; }
  .services__grille { grid-template-columns: 1fr; }
  .cabinet__inner { flex-direction: column; }
  .cabinet__gauche { width: 100%; min-height: 0; gap: 40px; }
  .cabinet__haut .titre-2 { min-height: 0; white-space: normal; }
  .bento { width: 100%; grid-template-rows: 208px 20px 195px 20px 240px; }
  .mission__inner { flex-direction: column; align-items: stretch; gap: 72px; }
  .mission__texte { min-height: 0; }
  .mission__visuel { width: min(520px, 100%); margin-inline: auto; }
  .mission__titre { font-size: 48px; line-height: 52px; }
  .techno__grille, .piliers { grid-template-columns: 1fr; }
  .bio__inner { grid-template-columns: 1fr; justify-items: start; }
  .bio__photo { width: min(420px, 100%); }
  .texte-image { flex-direction: column; gap: 48px; }
  .texte-image__photo { width: 100%; height: 520px; }
  .clienteles__grille, .rangee__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demarche, .colonnes-chiro { grid-template-columns: 1fr; }
  .contact { flex-direction: column; }
  .formulaire { width: 100%; }
  .coordonnees { width: 100%; }
}
@media (max-width: 760px) {
  .services, .cabinet, .techniques { padding-block: 72px; }
  .carte-service { flex-direction: column-reverse; height: auto; }
  .carte-service__texte, .carte-service__image { width: 100%; max-width: none; }
  .carte-service__image { height: 200px; border-radius: 23px 23px 0 0; }
  .bento { display: flex; flex-direction: column; gap: 14px; }
  .tuile { min-height: 210px; }
  .tuile--histoire { min-height: 320px; }
  .tuile--histoire .tuile__badge { top: 24px; bottom: auto; }
  .tuile--histoire .tuile__titre, .tuile--histoire .tuile__sous { margin-left: 0; }
  .cabinet__signature { display: none; }
  .mission { padding-block: 72px 96px; }
  .mission__titre { font-size: 36px; line-height: 42px; }
  .mission__titre + .barre { margin-top: -20px; }
  .mission__desc { font-size: 18px; line-height: 28px; }
  .mission__arche { height: 440px; }
  .carte-flottante { left: 12px; right: 12px; bottom: -28px; padding: 18px; }
  .approche-intro { padding: 80px 0 48px; }
  .carte-techno { padding: 28px; }
  .bio { padding: 72px 0; }
  .bio__nom { font-size: 40px; line-height: 42px; }
  .bio__photo { height: 460px; }
  .texte-image__photo { height: 380px; }
  .clienteles__grille, .rangee__grille { grid-template-columns: 1fr; }
  .mission-intro { padding: 64px 0 40px; }
  .accordeons-section { padding: 72px 0; }
  .accordeon__bouton { padding: 22px 20px; font-size: 18px; line-height: 26px; }
  .accordeon__corps { padding: 0 20px 24px; }
  .etape { padding: 24px; }
  .formulaire { padding: 28px 20px; }
  .formulaire h2 { font-size: 26px; line-height: 34px; }
  .bloc-info { padding: 24px; }
  .bloc-info dl div { flex-wrap: wrap; gap: 2px 16px; }
  .bloc-info dd { text-align: left; }
}

/* Formulaire (version PHP) : message d'erreur serveur et champ piège anti-robot */
.formulaire__erreur { padding: 16px 18px; border-radius: 12px; background: #fbeaea; font-family: var(--f-texte); font-size: 14px; color: #8c1d18; }
.hp-champ { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire { position: relative; }
.formulaire [type=submit]:disabled { opacity: .6; cursor: wait; }