/* ==========================================================================
   Fit Your Com : feuille de style
   Blanc dominant, encre presque noire, rouge de marque #E40E4F en accent.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  --blanc: #ffffff;
  --craie: #f7f5f3;          /* blanc cassé très léger, légèrement chaud */
  --encre: #101014;          /* texte principal */
  --graphite: #6e6e76;       /* texte secondaire */
  --trait: #e6e3e0;          /* filets */
  --rouge: #e40e4f;          /* couleur de marque */
  --rouge-fonce: #b60b3f;    /* survol */
  --rouge-voile: #fdeff3;    /* aplat très léger */

  --police-titre: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-texte: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-accent: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gouttiere: clamp(20px, 5vw, 68px);
  --largeur: 1280px;
  --rayon: 16px;
  --rayon-s: 10px;
  --entete: 76px;

  --transition: 420ms cubic-bezier(.2, .7, .25, 1);
}

/* ------------------------------------------------------------ 2. Réglages */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

figure, blockquote { margin: 0; }   /* le navigateur leur met 40px de marge */
h1, h2, h3, h4 { margin: 0; font-family: var(--police-titre); font-weight: 600; letter-spacing: -.028em; line-height: 1.02; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--rouge); color: #fff; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--encre); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--rayon-s) 0;
}
.saut-contenu:focus { left: 0; }

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

/* -------------------------------------------------------- 3. Mise en page */
.shell {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(64px, 9vw, 128px); }
.section--craie { background: var(--craie); }
.section--filet { border-top: 1px solid var(--trait); }
.section--serre { padding-block: clamp(48px, 6vw, 88px); }
.page-tete + .section--serre { padding-top: clamp(24px, 3vw, 40px); }

/* En-tête de section : tout centré, étiquette au-dessus du titre */
.bloc-tete {
  display: grid; justify-items: center; text-align: center;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.bloc-tete__texte { max-width: 74ch; margin-top: 16px; }
.bloc-tete p { color: var(--graphite); margin-top: 18px; font-size: 1.02rem; }

/* ------------------------------------------------------- 4. Typographie */
.etiquette {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--police-texte);
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rouge);
}

.titre-xl { font-size: clamp(2.7rem, 7.2vw, 5.1rem); letter-spacing: -.035em; }
.titre-l  { font-size: clamp(2.1rem, 4.6vw, 3.5rem); text-wrap: balance; }
.titre-m  { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -.02em; }
.titre-s  { font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.25; }

/* Accent calligraphique : rappel de la boucle du « R » et de la goutte du « M » du logo */
.accent {
  font-family: var(--police-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge);
  letter-spacing: -.01em;
}

.chapo { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--graphite); line-height: 1.55; }
.mention { font-size: .92rem; color: var(--graphite); }
.gris { color: var(--graphite); }

/* ----------------------------------------------------------- 5. Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 100px; border: 1px solid transparent;
  font-size: .96rem; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer; text-align: center;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--rouge { background: var(--rouge); color: #fff; }
.btn--rouge:hover { background: var(--rouge-fonce); }

.btn--encre { background: var(--encre); color: #fff; }
.btn--encre:hover { background: #2a2a32; }

.btn--ligne { background: transparent; border-color: var(--trait); color: var(--encre); }
.btn--ligne:hover { border-color: var(--encre); }

.btn--blanc { background: #fff; color: var(--encre); }
.btn--blanc:hover { background: var(--craie); }

.btn--petit { padding: 11px 20px; font-size: .88rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .98rem;
  padding-bottom: 3px; border-bottom: 1px solid var(--trait);
  transition: border-color 220ms ease, color 220ms ease;
}
.lien-fleche svg { width: 15px; transition: transform 260ms cubic-bezier(.2,.7,.25,1); }
.lien-fleche:hover { color: var(--rouge); border-color: var(--rouge); }
.lien-fleche:hover svg { transform: translateX(5px); }

.groupe-btn { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --------------------------------------- 6. En-tête : capsule flottante */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  padding: 14px var(--gouttiere) 0;
  pointer-events: none;
  transition: padding-top 300ms ease;
}
.entete__in {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px);
  width: fit-content; max-width: 100%; margin-inline: auto;
  height: 62px; padding: 0 8px 0 22px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  border: 1px solid var(--trait); border-radius: 100px;
  transition: height 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}
.entete.est-collee { padding-top: 8px; }
.entete.est-collee .entete__in,
body.menu-ouvert .entete__in {
  height: 56px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 34px rgba(16, 16, 20, .09);
}
@media (max-width: 1059px) {
  .entete__in { width: 100%; justify-content: space-between; padding: 0 8px 0 18px; }
}

.logo { display: block; flex: none; }
.logo img { height: 26px; width: auto; transition: height 300ms ease; }
.entete.est-collee .logo img { height: 23px; }

.nav { display: none; align-items: center; gap: clamp(16px, 1.8vw, 28px); }
@media (min-width: 1060px) { .nav { display: flex; } }

.nav a { position: relative; font-size: .93rem; font-weight: 500; color: var(--encre); padding-block: 5px; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--rouge); transition: right 300ms cubic-bezier(.2,.7,.25,1);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--rouge); }

.entete__actions { display: flex; align-items: center; gap: 10px; }
.entete .btn { display: none; }
@media (min-width: 1060px) { .entete .btn { display: inline-flex; } }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 12px;
  background: none; border: 1px solid var(--trait); border-radius: 100px; cursor: pointer;
}
@media (min-width: 1060px) { .burger { display: none; } }
.burger span { display: block; height: 1.5px; background: var(--encre); transition: transform 260ms ease, opacity 200ms ease; }
body.menu-ouvert .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
body.menu-ouvert .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menu mobile plein écran */
.menu-mobile {
  position: fixed; inset: 0; z-index: 80;
  background: var(--blanc);
  padding: calc(var(--entete) + 24px) var(--gouttiere) 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(.2,.7,.25,1), visibility 0s 320ms;
  overflow-y: auto;
}
body.menu-ouvert .menu-mobile {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(.2,.7,.25,1), visibility 0s;
}
.menu-mobile__liens { display: flex; flex-direction: column; }
.menu-mobile__liens a {
  font-family: var(--police-titre); font-size: clamp(1.7rem, 8vw, 2.4rem); font-weight: 600;
  letter-spacing: -.03em; padding: 14px 0; border-bottom: 1px solid var(--trait);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.menu-mobile__liens a[aria-current="page"] { color: var(--rouge); }
.menu-mobile__pied { display: grid; gap: 14px; }
.menu-mobile__pied .btn { width: 100%; }

/* Le hero centré vit dans composants.css (section 7). */

/* ---------------------------------------------- 9. Grille à filets partagés
   Élément signature : une seule trame de filets d'1 px, sans ombre portée. */
.trame {
  display: grid; gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
/* Colonnes fixées par palier : avec `auto-fit`, six cellules tombaient sur quatre
   colonnes et laissaient deux cases vides grises en bas de la trame. */
.trame--2, .trame--3, .trame--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .trame--2, .trame--3, .trame--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .trame--2, .trame--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trame--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cellule {
  background: var(--blanc);
  padding: clamp(24px, 3vw, 34px);
  position: relative;
  transition: background-color 260ms ease;
}
.cellule::before {
  content: ""; position: absolute; inset: -1px auto auto -1px; height: 2px; width: 0;
  background: var(--rouge); transition: width 340ms cubic-bezier(.2,.7,.25,1);
}
.cellule:hover { background: var(--craie); }
.cellule:hover::before { width: calc(100% + 2px); }
.cellule { display: flex; flex-direction: column; }
.cellule h3 { margin-bottom: 10px; }
.cellule h3 { padding-top: 4px; }
.cellule p { color: var(--graphite); font-size: .96rem; }
.section--craie .cellule { background: var(--blanc); }

.cellule__num {
  display: block; font-family: var(--police-titre); font-size: 1.6rem; font-weight: 700;
  color: var(--rouge); letter-spacing: -.04em; margin-bottom: 18px;
}

.cellule--service h3 { font-size: 1.24rem; }
.cellule--service .resume { color: var(--encre); font-size: .98rem; margin-bottom: 18px; }
.liste-points { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--trait); }
.liste-points li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--graphite); }
.liste-points li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--rouge); margin-top: 9px;
}

/* ----------------------------------------------- 10. Liste éditoriale */
.rangs { border-top: 1px solid var(--trait); }
.rangs li { border-bottom: 1px solid var(--trait); }
.rangs__item {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 4px;
  font-family: var(--police-titre); font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 500;
  letter-spacing: -.025em;
  transition: color 240ms ease, padding-left 300ms cubic-bezier(.2,.7,.25,1);
}
.rangs li:hover .rangs__item { color: var(--rouge); padding-left: 14px; }
.rangs__item svg { width: 15px; flex: none; opacity: 0; transition: opacity 240ms ease, transform 260ms ease; }
.rangs li:hover .rangs__item svg { opacity: 1; transform: translateX(4px); }

/* ----------------------------------------------- 11. Emplacements vidéo */
.projets { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 560px)  { .projets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .projets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .projets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.projet { display: flex; flex-direction: column; gap: 16px; }

.emplacement-video {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--craie);
  border: 1px dashed #d5d1cd;
  border-radius: var(--rayon);
  display: grid; place-items: center; text-align: center;
  padding: 20px; overflow: hidden;
  transition: border-color 260ms ease, background-color 260ms ease;
}
.emplacement-video[data-format="16:9"] { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .emplacement-video[data-format="16:9"] { aspect-ratio: 4 / 3; } }
.emplacement-video:hover { border-color: var(--rouge); background: var(--rouge-voile); }
.emplacement-video__contenu { display: grid; justify-items: center; gap: 12px; }
.emplacement-video b { font-family: var(--police-titre); font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.emplacement-video small { font-size: .82rem; color: var(--graphite); letter-spacing: .03em; }

.projet__infos { display: grid; gap: 6px; }
.projet__type {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge);
}
.projet__client { font-family: var(--police-titre); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.projet__meta { font-size: .88rem; color: var(--graphite); }

.jeton-a-completer {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rouge); background: var(--rouge-voile);
  padding: 4px 10px; border-radius: 100px;
}

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
.filtres--centre { justify-content: center; }
.filtre {
  padding: 9px 18px; border-radius: 100px; border: 1px solid var(--trait);
  background: transparent; font-size: .87rem; font-weight: 500; cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }

/* ---------------------------------------------------------- 12. Avis */
/* Colonnes plutôt que grille : les témoignages Google vont de trois lignes à
   quinze, et une grille laisserait de grands vides sous les plus courts. */
.avis { columns: 1; column-gap: clamp(18px, 2vw, 24px); }
@media (min-width: 700px)  { .avis { columns: 2; } }
@media (min-width: 1100px) { .avis { columns: 3; } }
.avis > * { break-inside: avoid; margin-bottom: clamp(18px, 2vw, 24px); }
.avis__carte {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: clamp(24px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--blanc);
  transition: border-color 260ms ease, transform 300ms cubic-bezier(.2,.7,.25,1), box-shadow 300ms ease;
}
.avis__carte:hover {
  border-color: transparent; transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 16, 20, .1);
}
.avis__carte--vide { border-style: dashed; align-items: flex-start; justify-content: space-between; min-height: 220px; }

/* En-tête : la photo et le nom passent avant le témoignage. */
.avis__tete { display: flex; align-items: center; gap: 14px; }
.avis__photo {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--rouge-voile);
}
.avis__photo--initiale {
  display: grid; place-items: center;
  color: var(--rouge); font-family: var(--police-titre); font-weight: 700; font-size: 1.2rem;
}
.avis__identite strong {
  display: block; font-family: var(--police-titre); font-size: 1.06rem;
  letter-spacing: -.02em; line-height: 1.2;
}
.avis__identite span { font-size: .88rem; color: var(--graphite); }

.avis__note { display: flex; gap: 3px; color: var(--rouge); }
.avis__note svg { width: 16px; height: 16px; }

.avis__prestation {
  align-self: flex-start;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rouge); background: var(--rouge-voile);
  padding: 5px 12px; border-radius: 100px;
}

.avis__texte { font-size: 1rem; line-height: 1.62; margin: 0; }
.avis__texte p + p { margin-top: 12px; }
/* Les témoignages Google sont longs : on les tronque sur l'accueil,
   la page dédiée les affiche en entier. */
.avis--apercu .avis__texte {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
}

/* -------------------------------------------------- 13. Bloc image + texte */
.duo {
  display: grid; gap: clamp(28px, 4vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .duo--inverse > :first-child { order: 2; }
}
.duo img { width: 100%; border-radius: var(--rayon); object-fit: cover; }
.duo__image--portrait img { aspect-ratio: 4 / 5; }
.duo__image--paysage img { aspect-ratio: 4 / 3; }

.bande-image img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 42%;
  border-radius: var(--rayon);
}
@media (max-width: 700px) { .bande-image img { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------ 14. Appel à l'action */
.cta-final { background: var(--rouge); color: #fff; }
.cta-final .shell { display: grid; gap: 32px; }

.cta-final h2 { max-width: 18ch; }
.cta-final p { color: rgba(255, 255, 255, .84); margin-top: 20px; max-width: 42ch; }
.cta-final .etiquette { color: rgba(255, 255, 255, .78); }
.cta-final .zone-btn { display: grid; gap: 12px; }
.cta-final .lien-simple { color: rgba(255,255,255,.86); font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.4); }
.cta-final .lien-simple:hover { color: #fff; border-color: #fff; }

/* ------------------------------------------------------ 15. Page intérieure */
.page-tete {
  padding-top: calc(var(--entete) + clamp(44px, 6vw, 82px));
  padding-bottom: clamp(28px, 3vw, 44px);
  text-align: center;
}
.page-tete h1 { max-width: 26ch; margin: 20px auto 24px; text-wrap: balance; }
.page-tete .chapo { max-width: 58ch; margin-inline: auto; text-wrap: balance; }
.page-tete .groupe-btn { justify-content: center; }

/* ---------------------------------------------------------- 16. Contact */
.contact-grille { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .contact-grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }

.formulaire { display: grid; gap: 20px; }
.champs-2 { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .champs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.champ { display: grid; gap: 8px; }
.champ label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
.champ label .req { color: var(--rouge); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 14px 16px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-s);
  font-size: .98rem;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: #cfcbc7; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--rouge); outline: none; background: var(--blanc); }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23101014' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 42px; }
.champ .aide { font-size: .8rem; color: var(--graphite); }
.champ[data-erreur="true"] input, .champ[data-erreur="true"] select, .champ[data-erreur="true"] textarea { border-color: var(--rouge); }
.champ .erreur { font-size: .8rem; color: var(--rouge); display: none; }
.champ[data-erreur="true"] .erreur { display: block; }

.consentement { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--graphite); }
.consentement { flex-wrap: wrap; }
.consentement input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--rouge); }
.consentement .erreur { flex-basis: 100%; }
.consentement a { text-decoration: underline; text-underline-offset: 3px; }

.message-formulaire {
  display: none; padding: 16px 18px; border-radius: var(--rayon-s);
  background: var(--rouge-voile); border: 1px solid #f6cdd9; font-size: .92rem;
}
.message-formulaire.est-visible { display: block; }

.coordonnees { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.coordonnee { background: var(--blanc); padding: 20px 24px; display: grid; gap: 4px; }
.coordonnee dt { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.coordonnee dd { margin: 0; font-family: var(--police-titre); font-size: 1.06rem; font-weight: 500; letter-spacing: -.02em; }
.coordonnee dd a:hover { color: var(--rouge); }

.encart-rdv {
  margin-top: 24px; padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--encre); border-radius: var(--rayon);
  display: grid; gap: 16px;
}
.encart-rdv p { font-size: .94rem; color: var(--graphite); }

/* -------------------------------------------------------- 17. Contenu légal */
.texte-legal { max-width: 74ch; display: grid; gap: 30px; }
.texte-legal h2 { font-size: 1.35rem; margin-bottom: 12px; }
.texte-legal p, .texte-legal li { color: var(--graphite); font-size: .98rem; }
.texte-legal ul { display: grid; gap: 8px; padding-left: 4px; }
.texte-legal li { display: flex; gap: 12px; }
.texte-legal li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--rouge); margin-top: 10px;
}
.texte-legal strong { color: var(--encre); }

/* ------------------------------------------------------------ 18. Pied */
.pied { background: var(--encre); color: #fff; padding-block: clamp(56px, 7vw, 84px) 28px; }
.pied__haut { display: grid; gap: clamp(36px, 5vw, 64px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .pied__haut { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .6fr)); } }
.pied img { height: 52px; width: auto; }
.pied__intro { margin-top: 22px; max-width: 34ch; color: rgba(255, 255, 255, .66); font-size: .95rem; }
.pied h2 { font-size: .78rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 18px; font-family: var(--police-texte); }
.pied ul { display: grid; gap: 11px; }
.pied a { color: rgba(255, 255, 255, .82); font-size: .95rem; transition: color 200ms ease; }
.pied a:hover { color: var(--rouge); }
.pied__zone { margin-top: 26px; display: inline-flex; align-items: center; gap: 9px; font-size: .88rem; color: rgba(255,255,255,.8); }
.pied__bas {
  margin-top: clamp(44px, 6vw, 68px); padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  font-size: .84rem; color: rgba(255, 255, 255, .5);
}
.pied__bas a { font-size: .84rem; color: rgba(255, 255, 255, .6); }
.pied .jeton-a-completer { background: transparent; border: 1px solid rgba(228, 14, 79, .55); color: #ff5f8d; }

/* ---------------------------------------------------------- 19. Animations */
.reveler { opacity: 0; transform: translateY(18px); }
.reveler.est-visible {
  opacity: 1; transform: none;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .25, 1);
  transition-delay: var(--retard, 0ms);
}

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

/* Sur très petits écrans, on resserre l'interlettrage des capitales
   plutôt que de réduire la taille du texte. */
@media (max-width: 420px) {
  .etiquette { letter-spacing: .12em; }
  .projet__type, .coordonnee dt, .pied h2 { letter-spacing: .1em; }
}

/* --------------------------------------------------------- 20. Impression */
@media print {
  .entete, .menu-mobile, .cta-final { display: none; }
  body { color: #000; }
}

/* ==========================================================================
   Boutons : jamais de retour à la ligne
   Un libellé sur deux lignes casse la forme de la pastille et brouille la
   lecture. On interdit le retour, on adapte la taille, et les libellés longs
   ont une version courte affichée sur les écrans étroits.
   ========================================================================== */
.btn { white-space: nowrap; max-width: 100%; }

.btn__court { display: none; }

/* Sous 520 px, le libellé long ne tient plus dans la largeur utile. */
@media (max-width: 520px) {
  .btn__long { display: none; }
  .btn__court { display: inline; }
}

/* Très petits écrans : on resserre plutôt que de laisser déborder. */
@media (max-width: 400px) {
  .btn { padding: 14px 20px; font-size: .92rem; }
  .btn--grand { padding: 16px 22px; font-size: .96rem; }
  .btn--petit { padding: 10px 15px; font-size: .84rem; }
}
@media (max-width: 340px) {
  .btn { padding: 13px 16px; font-size: .87rem; gap: 8px; }
  .btn--grand { padding: 15px 18px; font-size: .9rem; }
}

/* Les libellés d'action ne se coupent pas non plus. */
.lien-fleche, .filtre { white-space: nowrap; }

/* ==========================================================================
   Ajustements mobile
   Sur petit écran, on remonte les tailles minimales et on agrandit les zones
   tactiles. Les libellés en capitales espacées sont les plus pénalisés :
   12,5 px avec 0,16 em d'interlettrage se lit mal sur un téléphone.
   ========================================================================== */
.etiquette,
.projet__type,
.coordonnee dt,
.pied h2 { font-size: .82rem; }

.avis__prestation { font-size: .84rem; }
.champ .erreur, .champ .aide { font-size: .85rem; }
.puce-lieu small,
.avis__identite span,
.projet__meta { font-size: .84rem; }
.pied__bas, .pied__bas a { font-size: .86rem; }

@media (max-width: 700px) {
  /* Capitales espacées : on resserre l'interlettrage plutôt que de réduire
     la taille, illisible sur un écran de téléphone. */
  .etiquette,
  .projet__type,
  .coordonnee dt,
  .pied h2 { letter-spacing: .12em; }

  /* Zones tactiles : 44 px de haut minimum, la cible recommandée. */
  .lien-fleche { padding-block: 10px; }
  /* 17 px de texte + 2 x 12 px de marge intérieure = 41 px de zone tactile. */
  .pied ul a,
  .menu-mobile__pied a { display: inline-block; padding-block: 12px; }
  .pied ul { gap: 0; }
  .cta-final .lien-simple { display: inline-block; padding-block: 8px; }
}

/* Les pastilles du carrousel restent petites à l'œil mais gagnent une zone
   tactile confortable, invisible, autour d'elles. */
.rail-point { position: relative; }
.rail-point::after {
  content: ""; position: absolute; inset: -14px;
}

/* Témoignage reçu par message : pas de note, donc pas d'étoiles. */
.avis__origine {
  align-self: flex-start;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--graphite);
}

/* Crédits du studio, discrets dans la barre basse du pied de page */
.pied__credits { font-size: .86rem; color: rgba(255, 255, 255, .5); }
.pied__credits a {
  color: rgba(255, 255, 255, .72); font-size: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: color 200ms ease, border-color 200ms ease;
}
.pied__credits a:hover { color: #fff; border-color: #fff; }