/* Rocha CleanHelp — site vitrine.
   Direction : salle obscure, une lampe chaude. Fond noir, cartes charbon, texte blanc,
   un orange (l'action) et un bleu (les repères), tirés du logo. Rien d'autre. */

@font-face { font-family: "Hanken Grotesk"; font-weight: 300; font-style: normal; font-display: swap; src: url("polices/hanken-grotesk-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("polices/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("polices/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("polices/instrument-serif-latin-400-italic.woff2") format("woff2"); }

:root {
  /* Couleurs */
  --noir: #000000;
  --charbon: #161616;
  --charbon-clair: #202020;
  --graphite: #333333;
  --blanc: #ffffff;
  --fumee: #a6a6a6;          /* texte secondaire : 8,6:1 sur noir */
  --orange: #ff6b1a;         /* l'action — texte noir dessus : 7,4:1 */
  --orange-vif: #ff7f3a;
  --bleu: #004aad;           /* bleu du logo, en aplat */
  --bleu-clair: #7fb0ff;     /* bleu du logo éclairci, pour un texte sur noir : 9,6:1 */

  /* Typographie */
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  /* Formes et rythme */
  --rayon: 10px;
  --pilule: 9999px;
  --largeur: 1200px;
  --gouttiere: clamp(16px, 4.5vw, 40px);
  --section: clamp(88px, 11vw, 136px);

  /* Mouvement */
  --courbe: cubic-bezier(0.625, 0.05, 0, 1);
  --duree: 900ms;

  /* Verre fumé : assez sombre pour que le texte blanc reste lisible sur une photo claire. */
  --verre-fond: rgba(16, 16, 16, 0.42);
  --verre-ombre: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; }
em { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--orange); color: var(--noir); }

.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--orange); color: var(--noir); padding: 10px 18px; border-radius: var(--pilule); font-weight: 500;
}
.evitement:focus { top: 12px; }

.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ── Typographie de rôle ─────────────────────────────────────────────── */

.etiquette {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fumee);
}
.etiquette .numero { color: var(--bleu-clair); }
.etiquette::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu-clair); }
.etiquette.sans-point::before { display: none; }

.titre {
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 300;
  text-wrap: balance;
}
.titre em, h1 em, .pied-slogan em, .contact-titre em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--orange);
}
.chapo { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--fumee); font-weight: 400; max-width: 34em; }

/* ── Boutons ─────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--pilule);
  font-size: 16px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color 300ms var(--courbe), color 300ms var(--courbe), border-color 300ms var(--courbe), transform 500ms var(--courbe);
}
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton-plein { background: var(--orange); color: var(--noir); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
.bouton-plein:hover { background: var(--orange-vif); transform: translateY(-1px); }
.bouton-contour { border: 1px solid rgba(255, 255, 255, 0.85); color: var(--blanc); }
.bouton-contour:hover { background: var(--blanc); color: var(--noir); }
.bouton-petit { min-height: 44px; padding: 0 20px; font-size: 15px; }

.badge-verre {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--pilule);
  background: var(--verre-fond);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--verre-ombre);
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blanc);
}
.badge-verre .point { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.badge-verre .point-bleu { background: var(--bleu-clair); }

/* ── Navigation ──────────────────────────────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color 500ms var(--courbe), border-color 500ms var(--courbe);
  border-bottom: 1px solid transparent;
}
.nav.defilee { background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(255, 255, 255, 0.08); }
.nav-interieur { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.marque { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.marque img { width: 44px; height: auto; }
.marque span { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; }
.marque span b { font-weight: 300; }
.nav-liens { display: none; gap: 32px; font-size: 15px; font-weight: 500; }
.nav-liens a { color: rgba(255, 255, 255, 0.78); transition: color 250ms var(--courbe); padding: 12px 0; }
.nav-liens a:hover { color: var(--blanc); }
.nav-liens a[aria-current="page"] { color: var(--blanc); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.bouton-rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background-color 300ms var(--courbe), color 300ms var(--courbe);
}
.bouton-rond:hover { background: var(--blanc); color: var(--noir); }
.bouton-rond svg { width: 18px; height: 18px; }
.nav .texte-long { display: none; }

@media (min-width: 960px) {
  .nav-liens { display: flex; }
  .nav .texte-long { display: inline; }
  .nav .texte-court { display: none; }
}

/* ── Accueil ─────────────────────────────────────────────────────────── */

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: #0d0b09; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 8%, rgba(0, 0, 0, 0.45) 46%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.55) 100%);
}
.hero-media .badge-verre { position: absolute; top: 96px; right: var(--gouttiere); z-index: 1; }
.hero-texte { padding-bottom: clamp(28px, 5vh, 64px); padding-top: 120px; }
.hero-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 20px; }
.hero-pied .note-google { margin-top: 0; }
.hero h1 {
  margin-top: 0;
  font-size: clamp(48px, 13vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 300;
}
.hero h1 em { letter-spacing: -0.03em; }
.hero .chapo { margin-top: 24px; color: rgba(255, 255, 255, 0.78); max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.note-google {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; min-height: 44px;
  font-size: 14px; color: rgba(255, 255, 255, 0.78);
}
.note-google .etoiles { color: var(--orange); letter-spacing: 2px; font-size: 15px; }
.note-google strong { color: var(--blanc); font-weight: 500; }
.note-google:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }

.bouton-film {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px;
  font-size: 13px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase;
}
.bouton-film .disque {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--blanc);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color 400ms var(--courbe), color 400ms var(--courbe), transform 600ms var(--courbe);
}
.bouton-film .disque svg { width: 16px; height: 16px; margin-left: 3px; }
.bouton-film:hover .disque { background: var(--blanc); color: var(--noir); transform: scale(1.06); }
.hero-pied .bouton-film { min-height: 44px; }
.hero-pied .bouton-film .disque { width: 44px; height: 44px; }
@media (max-width: 420px) { .hero-pied .mot-google { display: none; } .hero-pied .bouton-film { gap: 10px; } }
@media (max-width: 899px) {
  .hero .chapo { font-size: 17px; margin-top: 18px; }
  .hero .actions { margin-top: 24px; }
  .hero .actions .bouton { flex: 1 1 auto; }
}

@media (min-width: 900px) {
  .hero { align-items: center; min-height: max(720px, 100svh); }
  .hero-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: 110px; padding-bottom: 56px; }
  .hero-texte { padding: 0; }
  .hero h1 { font-size: clamp(64px, 7.6vw, 112px); }
  .hero-media {
    position: relative; inset: auto; z-index: 0;
    aspect-ratio: 9 / 16; max-height: calc(100svh - 170px); min-height: 560px; justify-self: end; width: 100%; max-width: 420px;
    border-radius: var(--rayon);
  }
  .hero-media::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 40%); }
  .hero-media .badge-verre { top: 16px; right: 16px; }
  .hero-media .bouton-film { position: absolute; left: 20px; bottom: 20px; z-index: 1; margin: 0; }
  .hero-texte .bouton-film { display: none; }
  .hero-pied { margin-top: 28px; }
}
@media (max-width: 899px) {
  .hero-media .bouton-film { display: none; }
}

/* ── Repères ─────────────────────────────────────────────────────────── */

.reperes { border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--graphite); }
.reperes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.reperes li { padding: 22px 0; display: flex; flex-direction: column; gap: 4px; }
.reperes li:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--graphite); }
.reperes li:nth-child(even) { padding-left: 16px; }
.reperes li:nth-child(-n + 2) { border-bottom: 1px solid var(--graphite); }
.reperes .valeur { font-size: clamp(20px, 2.2vw, 26px); font-weight: 300; letter-spacing: -0.02em; }
.reperes .valeur .etoile { color: var(--orange); }
.reperes .legende { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fumee); }
@media (min-width: 900px) {
  .reperes ul { grid-template-columns: repeat(4, 1fr); }
  .reperes li { padding: 30px 24px; border: 0 !important; border-left: 1px solid var(--graphite) !important; }
  .reperes li:first-child { border-left: 0 !important; padding-left: 0; }
}

/* ── Sections ────────────────────────────────────────────────────────── */

.section { padding: var(--section) 0 0; }
.entete-section { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.entete-section .chapo { margin-top: 4px; }
@media (min-width: 900px) {
  .entete-section.deux-colonnes { grid-template-columns: 1.2fr 0.8fr; align-items: end; gap: 48px; }
}

/* Prestations */
.prestations { display: grid; gap: 16px; }
@media (min-width: 900px) { .prestations { grid-template-columns: repeat(3, 1fr); } }
.carte-media { position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--charbon); }
.carte-media .image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.carte-media .image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--courbe); }
.carte-media:hover .image img { transform: scale(1.04); }
.carte-media .image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%); }
.carte-media .badge-verre { position: absolute; top: 14px; right: 14px; z-index: 1; }
.carte-media .titre-carte { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 300; }
.carte-media .corps { padding: 20px 20px 24px; display: grid; gap: 16px; }
.carte-media .corps p { color: var(--fumee); }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 15px; color: rgba(255, 255, 255, 0.86); }
.liste li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--bleu-clair); }

/* Film et méthode */
.film-grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .film-grille { grid-template-columns: 1fr 1fr; gap: 72px; } }
.film-cadre { position: relative; border-radius: var(--rayon); overflow: hidden; background: #0d0b09; aspect-ratio: 9 / 16; width: 100%; max-width: 440px; justify-self: center; }
.film-cadre video { width: 100%; height: 100%; object-fit: cover; }
.film-lancer {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 22px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 45%);
  transition: opacity 500ms var(--courbe);
}
.film-cadre.lance .film-lancer { opacity: 0; pointer-events: none; }
.film-cadre .badge-verre { position: absolute; top: 16px; right: 16px; z-index: 1; transition: opacity 500ms var(--courbe); }
.film-cadre.lance .badge-verre { opacity: 0; }
.etapes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; }
.etapes li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 22px 0; border-top: 1px solid var(--graphite); }
@media (min-width: 900px) { .etapes li { grid-template-columns: 56px 1fr; gap: 16px; } }
.etapes li:last-child { border-bottom: 1px solid var(--graphite); }
.etapes .num { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--bleu-clair); padding-top: 5px; }
.etapes h3 { font-size: 22px; letter-spacing: -0.02em; font-weight: 400; }
.etapes p { margin-top: 6px; color: var(--fumee); }

/* Avant / après */
.comparaisons { display: grid; gap: 16px; }
@media (min-width: 900px) { .comparaisons { grid-template-columns: 1fr 1fr; } }
.comparaison { margin: 0; }
.comparaison .cadre { position: relative; aspect-ratio: 3 / 4; border-radius: var(--rayon); overflow: hidden; background: var(--charbon); }
.comparaison .cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1100ms var(--courbe), transform 1600ms var(--courbe); }
.comparaison .apres { opacity: 0; transform: scale(1.03); }
.comparaison[data-etat="apres"] .apres { opacity: 1; transform: none; }
.comparaison .bascule {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1;
  display: inline-flex; padding: 4px; border-radius: var(--pilule);
  background: rgba(20, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--verre-ombre);
}
.comparaison .bascule button {
  min-height: 44px; min-width: 96px; padding: 0 18px; border-radius: var(--pilule);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75);
  transition: background-color 500ms var(--courbe), color 500ms var(--courbe);
}
.comparaison .bascule button[aria-pressed="true"] { background: var(--blanc); color: var(--noir); }
.comparaison[data-etat="apres"] .bascule button[aria-pressed="true"] { background: var(--orange); }
.comparaison figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 15px; color: var(--fumee); }
.comparaison figcaption strong { color: var(--blanc); font-weight: 500; }

/* Réalisations */
.galerie { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 calc(-1 * var(--gouttiere)); padding-left: var(--gouttiere); padding-right: var(--gouttiere); scrollbar-width: none; }
.galerie::-webkit-scrollbar { display: none; }
.galerie figure { margin: 0; scroll-snap-align: start; }
.galerie .carte-media .image { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .galerie { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 16px; }
  .galerie figure:nth-child(3n + 2) { transform: translateY(56px); }
  .galerie { padding-bottom: 56px; }
}
.galerie .legende-photo { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.9); }
.indice-defilement { margin-top: 14px; font-size: 13px; color: var(--fumee); }
@media (min-width: 900px) { .indice-defilement { display: none; } }

/* Rocha */
.rocha-grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .rocha-grille { grid-template-columns: 0.9fr 1.1fr; gap: 80px; } }
.rocha-photos { position: relative; }
.rocha-photos .principale { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 3 / 4; }
.rocha-photos .principale img { width: 100%; height: 100%; object-fit: cover; }
.rocha-photos .detail {
  position: absolute; right: -8px; bottom: -28px; width: 42%; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 3 / 4;
  border: 6px solid var(--noir);
}
.rocha-photos .detail img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .rocha-photos .detail { right: -40px; } }
.citation {
  margin: 36px 0 0; padding: 28px; border-radius: var(--rayon); background: var(--charbon-clair);
}
.citation p { font-size: clamp(20px, 2vw, 24px); line-height: 1.4; font-weight: 300; letter-spacing: -0.01em; }
.citation footer { margin-top: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fumee); }
.rocha-texte .chapo + .chapo { margin-top: 16px; }

/* Avis */
.avis-grille { display: grid; gap: 16px; }
@media (min-width: 700px) { .avis-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .avis-grille { grid-template-columns: repeat(3, 1fr); } }
.avis {
  margin: 0; padding: 28px; border-radius: var(--rayon); background: var(--charbon);
  display: flex; flex-direction: column; gap: 24px; justify-content: space-between;
  transition: background-color 500ms var(--courbe), transform 700ms var(--courbe);
}
.avis:hover { background: var(--charbon-clair); transform: translateY(-4px); }
.avis .etoiles { color: var(--orange); letter-spacing: 3px; font-size: 14px; }
.avis blockquote { margin: 14px 0 0; font-size: 21px; line-height: 1.4; font-weight: 300; letter-spacing: -0.015em; }
.avis blockquote::before { content: "« "; color: var(--fumee); }
.avis blockquote::after { content: " »"; color: var(--fumee); }
.avis figcaption { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.avis .initiales {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; background: var(--bleu); color: var(--blanc); font-size: 14px; font-weight: 500;
}
.avis .source { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fumee); margin-top: 2px; }
.avis-pied { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-top: 28px; }
.avis-pied p { color: var(--fumee); font-size: 14px; max-width: 40em; }

/* Contact */
.contact { padding-bottom: var(--section); }
.contact-grille { display: grid; gap: 40px; }
@media (min-width: 900px) { .contact-grille { grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: end; } }
.contact-titre { font-size: clamp(48px, 8.4vw, 116px); line-height: 0.98; letter-spacing: -0.05em; font-weight: 300; margin-top: 20px; }
.contact-titre em { letter-spacing: -0.03em; }
.contact .chapo { margin-top: 24px; }
.fiche { border-radius: var(--rayon); background: var(--charbon); padding: 8px 24px 24px; }
.fiche dl { margin: 0; }
.fiche .ligne { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--graphite); }
.fiche dt { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fumee); }
.fiche dd { margin: 0; text-align: right; font-size: 17px; }
.fiche dd a { display: inline-flex; min-height: 44px; align-items: center; border-bottom: 1px solid transparent; transition: border-color 300ms var(--courbe), color 300ms var(--courbe); }
.fiche dd a:hover { color: var(--bleu-clair); border-bottom-color: var(--bleu-clair); }
.fiche .actions { margin-top: 24px; }
.fiche .actions .bouton { flex: 1 1 auto; }
.fiche .astuce { margin-top: 16px; font-size: 14px; color: var(--fumee); }

/* Pied de page */
.pied { border-top: 1px solid var(--graphite); padding: clamp(64px, 9vw, 112px) 0 32px; }
.pied-slogan { font-size: clamp(40px, 7.2vw, 104px); line-height: 1; letter-spacing: -0.05em; font-weight: 300; max-width: 12em; }
.pied-slogan em { letter-spacing: -0.03em; }
.pied-bas { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; margin-top: clamp(56px, 7vw, 96px); padding-top: 24px; border-top: 1px solid var(--graphite); font-size: 14px; color: var(--fumee); }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied-bas a { display: inline-flex; min-height: 44px; align-items: center; }
.pied-bas a:hover { color: var(--blanc); }

/* ── Page des mentions ───────────────────────────────────────────────── */

.page-texte { padding: 150px 0 var(--section); }
.page-texte .contenu { max-width: 760px; }
.page-texte h1 { font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -0.05em; margin-top: 20px; }
.page-texte h2 { font-size: 26px; letter-spacing: -0.02em; font-weight: 400; margin: 56px 0 16px; padding-top: 28px; border-top: 1px solid var(--graphite); }
.page-texte p, .page-texte li { color: rgba(255, 255, 255, 0.82); font-size: 17px; }
.page-texte p + p { margin-top: 12px; }
.page-texte dl { margin: 0; display: grid; gap: 0; }
.page-texte dl div { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #1f1f1f; }
.page-texte dt { color: var(--fumee); font-size: 15px; }
.page-texte dd { margin: 0; font-size: 17px; }
.page-texte a:not(.bouton) { color: var(--bleu-clair); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .page-texte dl div { grid-template-columns: 1fr; gap: 2px; } }

/* ── Apparition au défilement ────────────────────────────────────────── */
/* Sans JavaScript, tout est visible : l'état caché n'existe que sous .js. */

.js [data-apparait] { opacity: 0; transform: translateY(28px); transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); transition-delay: var(--retard, 0ms); }
.js [data-apparait].visible { opacity: 1; transform: none; }
/* L'accueil entre par une animation CSS : elle ne dépend d'aucun script ni d'aucun observateur. */
.js .hero [data-apparait], .js .service-hero [data-apparait] { opacity: 1; transform: none; transition: none; animation: entree var(--duree) var(--courbe) var(--retard, 0ms) both; }
@keyframes entree { from { opacity: 0; transform: translateY(18px); } }
.js .galerie figure[data-apparait]:nth-child(3n + 2).visible { transform: none; }
@media (min-width: 900px) {
  .js .galerie figure[data-apparait]:nth-child(3n + 2) { transform: translateY(84px); }
  .js .galerie figure[data-apparait]:nth-child(3n + 2).visible { transform: translateY(56px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-apparait] { opacity: 1; transform: none; }
  .js .galerie figure[data-apparait]:nth-child(3n + 2) { transform: none; }
  @media (min-width: 900px) { .js .galerie figure[data-apparait]:nth-child(3n + 2), .galerie figure:nth-child(3n + 2) { transform: translateY(56px); } }
  .carte-media:hover .image img { transform: none; }
}

/* Communes desservies */
.villes { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.villes li {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--pilule);
  border: 1px solid var(--graphite); font-size: 15px; color: var(--blanc);
}
.villes .alentours { border-color: transparent; padding-left: 4px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--orange); }

/* Logo d'origine, en vraies couleurs : toujours posé sur une tuile blanche. */
.logo-tuile { background: var(--blanc); border-radius: 8px; padding: 4px 10px; min-height: 48px; }
.logo-tuile img { width: auto; height: 40px; }
@media (min-width: 960px) { .logo-tuile img { height: 46px; } }
.pied-haut { display: grid; gap: 40px; align-items: end; }
@media (min-width: 900px) { .pied-haut { grid-template-columns: 1.4fr 0.6fr; gap: 64px; } }
.logo-carte { background: var(--blanc); border-radius: var(--rayon); padding: clamp(16px, 3vw, 28px); max-width: 420px; width: 100%; justify-self: end; }
.logo-carte img { width: 100%; height: auto; }
@media (max-width: 899px) { .logo-carte { justify-self: start; } }

/* Spécialité : pharmacies */
.specialite { display: grid; gap: 32px; padding: clamp(28px, 5vw, 64px); border-radius: var(--rayon); background: var(--charbon); }
.specialite .etapes { margin-top: 0; }
@media (min-width: 900px) { .specialite { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }

/* ── Pages prestations ───────────────────────────────────────────────── */

.page-service { padding-top: 112px; }
.ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; color: var(--fumee); }
.ariane a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.ariane a:hover { color: var(--blanc); }
.ariane li + li::before { content: "/"; margin-right: 10px; color: var(--graphite); }
.service-hero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .service-hero { grid-template-columns: 1.15fr 0.85fr; gap: 72px; } }
.service-hero h1 { margin-top: 20px; font-size: clamp(40px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.045em; font-weight: 300; text-wrap: balance; }
.service-hero h1 em { letter-spacing: -0.03em; }
.service-hero .chapo { margin-top: 24px; color: rgba(255, 255, 255, 0.78); }
.service-photo { position: relative; margin: 0; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; background: var(--charbon); }
.service-photo img { width: 100%; height: 100%; object-fit: cover; }
.service-photo .badge-verre { position: absolute; top: 14px; right: 14px; }
@media (min-width: 900px) { .service-photo { max-width: 460px; justify-self: end; width: 100%; } }
@media (max-width: 899px) { .service-hero .actions .bouton { flex: 1 1 auto; } }

.blocs { display: grid; gap: 16px; }
@media (min-width: 900px) { .blocs { grid-template-columns: 1fr 1fr; } }
.bloc { padding: clamp(24px, 3vw, 36px); border-radius: var(--rayon); background: var(--charbon); }
.bloc h3 { margin-bottom: 20px; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.bloc .liste li { font-size: 16px; }
.texte-zone { margin-top: 20px; color: var(--fumee); max-width: 40em; }
.texte-zone + .texte-zone { margin-top: 12px; }
.texte-zone a { color: var(--bleu-clair); text-decoration: underline; text-underline-offset: 3px; }

.faq { border-top: 1px solid var(--graphite); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--graphite); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.8vw, 21px); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 300; line-height: 1; color: var(--orange); transition: transform 400ms var(--courbe); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--bleu-clair); }
.faq details p { padding: 0 0 22px; color: var(--fumee); max-width: 46em; }
.faq details p a { color: var(--bleu-clair); text-decoration: underline; text-underline-offset: 3px; }

.liens-services { display: grid; gap: 12px; }
@media (min-width: 900px) { .liens-services { grid-template-columns: repeat(3, 1fr); } }
.lien-service {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 92px; padding: 20px 24px; border-radius: var(--rayon); background: var(--charbon);
  font-size: 20px; letter-spacing: -0.02em; line-height: 1.25;
  transition: background-color 400ms var(--courbe), transform 600ms var(--courbe);
}
.lien-service:hover { background: var(--charbon-clair); transform: translateY(-3px); }
.lien-service small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fumee); }
.lien-service svg { width: 22px; height: 22px; flex: none; color: var(--orange); }

/* Lien vers la page détaillée, sous chaque carte de prestation de l'accueil */
.lien-suite { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; color: var(--blanc); }
.lien-suite svg { width: 16px; height: 16px; color: var(--orange); transition: transform 400ms var(--courbe); }
.lien-suite:hover { color: var(--bleu-clair); }
.lien-suite:hover svg { transform: translate(2px, -2px); }

/* Accueil : le sur-titre fait partie du titre principal */
.hero h1 .etiquette { line-height: 1.4; }
.hero h1 .slogan { display: block; margin-top: 20px; }