/* ==========================================================================
   PSA ACCESSIBILITÉ — feuille de style
   Disposition calquée sur les codes du secteur de la douche sécurisée,
   habillée de la charte PSA : le bleu marine devient violet profond,
   le jaune devient rose.
   ========================================================================== */

:root {
  /* Le sombre structurant : titres, navigation, boutons pleins */
  --violet-nuit: #4c1d95;
  --violet: #6d28d9;
  --violet-vif: #8b3dff;

  /* L'accent, qui remplace le jaune */
  --rose: #ec4899;
  --rose-clair: #fbcfe8;
  --magenta: #d946ef;

  --grad: linear-gradient(100deg, var(--violet) 0%, var(--violet-vif) 34%, var(--magenta) 68%, var(--rose) 100%);

  /* Fonds et textes */
  --papier: #ffffff;
  --lavande: #f4f1fe;
  --lavande-2: #ece7fb;
  --encre: #2a2340;
  --gris: #5d6472;
  --gris-clair: #8b91a0;
  --trait: #e6e2f5;

  --titre: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --texte: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --r: 18px;
  --r-lg: 30px;
  --ombre: 0 2px 6px rgba(42, 35, 64, .05), 0 18px 44px -20px rgba(42, 35, 64, .22);
  --ombre-forte: 0 4px 10px rgba(42, 35, 64, .06), 0 34px 70px -28px rgba(42, 35, 64, .3);
  --gouttiere: 1240px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--gris);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  color: var(--violet-nuit);
  margin: 0 0 .6em;
  line-height: 1.22;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); font-weight: 700; line-height: 1.32; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.65rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; }
p { margin: 0 0 1.1em; }
a { color: var(--violet); }

.wrap { width: min(100% - 40px, var(--gouttiere)); margin-inline: auto; }
@media (max-width: 620px) { .wrap { width: calc(100% - 32px); } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--violet-nuit); color: #fff;
  padding: 12px 20px; border-radius: 0 0 12px 0; font-family: var(--titre); font-weight: 700;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 6px; }

/* ==========================================================================
   BARRE HAUTE + EN-TÊTE
   ========================================================================== */
/* La carte blanche qui porte le logo et la navigation, posée sur la photo */
.entete { position: relative; z-index: 20; background: var(--papier); }
.entete .wrap {
  display: flex; align-items: center; gap: 30px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--trait);
  margin-top: 16px;
}
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marque img { height: 54px; width: auto; flex: none; }
.marque span {
  font-family: var(--titre); font-size: .82rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rose);
  padding-left: 12px; border-left: 2px solid var(--trait);
}
.menu { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); }
.menu a {
  font-family: var(--titre); font-size: 1rem; font-weight: 600;
  color: var(--violet-nuit); text-decoration: none;
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.menu a:hover { color: var(--rose); }
.menu a[aria-current="page"] { border-bottom-color: var(--rose); }

.burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border: 0; border-radius: 14px;
  background: var(--lavande); cursor: pointer;
  position: relative;
}
.burger span, .burger::before, .burger::after {
  content: ""; position: absolute; left: 13px; width: 20px; height: 2.4px;
  background: var(--violet-nuit); border-radius: 2px; transition: transform .22s, opacity .22s;
}
.burger span { top: 22px; }
.burger::before { top: 15px; }
.burger::after { top: 29px; }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: block; }
  .menu {
    position: absolute; top: 100%; left: 20px; right: 20px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-radius: var(--r);
    box-shadow: var(--ombre-forte); padding: 10px;
    display: none;
  }
  .menu.ouvert { display: flex; }
  .menu a { padding: 13px 16px; border-radius: 12px; border-bottom: 0; }
  .menu a[aria-current="page"] { background: var(--lavande); color: var(--rose); }
  .entete .wrap { position: relative; }
}
@media (max-width: 720px) {
  .marque img { height: 42px; }
  .marque span { font-size: .68rem; letter-spacing: .12em; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(74svh, 620px);
  display: flex; align-items: center;
  padding: clamp(56px, 7vw, 96px) 0 clamp(110px, 13vw, 190px);
  background: var(--violet-nuit);
  overflow: hidden;
}
.hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% center;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(24, 12, 48, .88) 0%, rgba(24, 12, 48, .8) 30%,
    rgba(24, 12, 48, .46) 52%, rgba(24, 12, 48, .1) 74%, rgba(24, 12, 48, 0) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: 1.5rem; text-wrap: balance; }
.hero h1 .cle { color: var(--rose-clair); }
.hero p.chapo {
  color: rgba(255, 255, 255, .88); font-size: 1.1rem;
  max-width: 46ch; margin-bottom: 2rem;
}

/* Le gros bouton : pastille sombre à gauche, libellé à droite */
.bouton-rdv {
  display: inline-flex; align-items: center; gap: 18px;
  background: var(--rose); color: #fff;
  padding: 8px 34px 8px 8px; border-radius: 999px;
  font-family: var(--titre); font-size: 1.06rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 16px 38px -16px rgba(236, 72, 153, .9);
  transition: transform .2s, box-shadow .2s;
}
.bouton-rdv i {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--violet-nuit); color: #fff;
  display: grid; place-items: center;
  transition: transform .24s cubic-bezier(.34, 1.4, .64, 1);
}
.bouton-rdv i svg { width: 22px; height: 22px; }
.bouton-rdv:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 46px -16px rgba(236, 72, 153, 1); }
.bouton-rdv:hover i { transform: translateX(4px); }

/* Le rideau clair qui remonte sur la photo */
.rideau {
  position: relative; z-index: 5;
  margin-top: clamp(-140px, -11vw, -80px);
  height: clamp(80px, 10vw, 140px);
  background: var(--papier);
  border-radius: clamp(50px, 7vw, 100px) clamp(50px, 7vw, 100px) 0 0;
}

@media (max-width: 860px) {
  .hero { min-height: 0; padding: 44px 0 120px; }
  .hero::after { background: linear-gradient(180deg, rgba(24,12,48,.86) 0%, rgba(24,12,48,.72) 55%, rgba(24,12,48,.88) 100%); }
  .hero h1 { max-width: none; }
  .bouton-rdv { font-size: .94rem; padding-right: 24px; }
  .bouton-rdv i { width: 44px; height: 44px; }
}

/* ==========================================================================
   TITRES DE SECTION
   ========================================================================== */
.sec { padding: clamp(56px, 7vw, 92px) 0; }
.sec.lavande { background: var(--lavande); }

.chapeau { text-align: center; max-width: 62ch; margin: 0 auto clamp(38px, 4.5vw, 62px); }
.chapeau .surtitre { justify-content: center; }
.surtitre {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--titre); font-size: .8rem; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase; color: var(--violet-nuit);
  margin-bottom: 1rem;
}
.surtitre::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose); flex: none;
}
.chapeau h2 { margin-bottom: .3em; text-wrap: balance; }
.chapeau p { text-wrap: pretty; }

/* ==========================================================================
   RANGÉES DE SERVICES
   ========================================================================== */
.services { display: grid; gap: 20px; }
.service {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: stretch;
  text-decoration: none;
}
.service .tuile {
  width: 132px; border-radius: var(--r); flex: none;
  background: var(--rose); color: #fff;
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), filter .2s;
}
.service .tuile svg { width: 58px; height: 58px; }
.service:hover .tuile { transform: translateY(-3px); filter: brightness(1.06); }

.service .carte {
  background: var(--lavande); border-radius: var(--r);
  padding: 26px 32px; min-width: 0;
  display: flex; align-items: center;
  font-size: 1.08rem; color: var(--encre); line-height: 1.55;
  transition: background-color .2s;
}
.service:hover .carte { background: var(--lavande-2); }
.service .carte b, .service .carte strong { color: var(--violet); font-weight: 600; }

.service .fleche {
  width: 132px; border-radius: var(--r); flex: none;
  background: var(--violet-nuit); color: #fff;
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background-color .2s;
}
.service .fleche svg { width: 34px; height: 34px; }
.service:hover .fleche { background: var(--violet); transform: translateX(4px); }

@media (max-width: 900px) {
  .service { grid-template-columns: auto 1fr; gap: 14px; }
  .service .tuile { width: 84px; }
  .service .tuile svg { width: 40px; height: 40px; }
  .service .fleche { display: none; }
  .service .carte { padding: 18px 20px; font-size: 1rem; }
}
@media (max-width: 520px) {
  .service .tuile { width: 66px; }
  .service .tuile svg { width: 32px; height: 32px; }
}

/* ==========================================================================
   DEUX COLONNES : TEXTE + MÉDIA
   ========================================================================== */
.deux {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.deux > * { min-width: 0; }
.deux-inverse .deux-media { order: -1; }
@media (max-width: 900px) {
  .deux { grid-template-columns: 1fr; }
  .deux-inverse .deux-media { order: 0; }
}

.deux h2 { margin-bottom: .5em; }
.deux .intro { color: var(--gris); margin-bottom: 1.8rem; }

/* Liste à coches, badge carré arrondi */
.coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.coches li { display: flex; align-items: center; gap: 18px; }
.coches i {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  background: var(--rose); color: #fff;
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.34, 1.5, .64, 1);
}
.coches i svg { width: 21px; height: 21px; }
.coches li:hover i { transform: rotate(-8deg) scale(1.08); }
.coches span {
  font-family: var(--titre); font-size: 1.06rem; font-weight: 600;
  color: var(--violet-nuit); min-width: 0;
}
@media (max-width: 520px) {
  .coches i { width: 32px; height: 32px; border-radius: 10px; }
  .coches i svg { width: 18px; height: 18px; }
  .coches span { font-size: .98rem; }
}

/* Comparateur avant / après */
.compare {
  position: relative; aspect-ratio: 4 / 3.4;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--ombre);
  --pos: 52%;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .apres { clip-path: inset(0 0 0 var(--pos)); }
.compare .etiq {
  position: absolute; bottom: 16px; z-index: 3;
  background: rgba(42, 35, 64, .82); color: #fff;
  font-family: var(--titre); font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.compare .etiq.g { left: 16px; }
.compare .etiq.d { right: 16px; }
.compare .rail {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: ew-resize;
}
.compare .rail::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--rose);
  border: 5px solid #fff;
  box-shadow: 0 6px 20px -6px rgba(42, 35, 64, .6);
  cursor: ew-resize;
}
.compare .rail::-moz-range-thumb {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--rose); border: 5px solid #fff;
  box-shadow: 0 6px 20px -6px rgba(42, 35, 64, .6);
  cursor: ew-resize;
}
.compare::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 3px; margin-left: -1.5px; background: #fff; z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   BLOC ÉLIGIBILITÉ : ANNONCE + FORMULAIRE
   ========================================================================== */
.eligibilite {
  display: grid; grid-template-columns: .82fr 1.18fr;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--ombre-forte);
}
.eligibilite > * { min-width: 0; }

.annonce {
  background: var(--violet-nuit); color: #fff;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.2vw, 42px);
}
.annonce-titre {
  font-family: var(--titre); font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  font-weight: 700; line-height: 1.22; margin: 0 0 auto;
}
.annonce-titre span { color: var(--rose-clair); }
.annonce-chiffre { margin-top: clamp(26px, 3vw, 40px); }
.annonce-chiffre p {
  margin: 0; font-family: var(--titre); font-size: 1.02rem; font-weight: 700;
  color: rgba(255, 255, 255, .82);
}
.annonce-chiffre strong {
  display: block; font-family: var(--titre);
  font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 800; line-height: 1.1;
  color: var(--rose-clair);
}
.annonce-chiffre em {
  display: block; font-style: normal; font-family: var(--titre);
  font-size: clamp(3.6rem, 7vw, 5.6rem); font-weight: 800; line-height: .95;
  letter-spacing: -.03em; color: var(--rose-clair); margin: 2px 0 12px;
}
.annonce-chiffre em sup { font-size: .32em; vertical-align: super; }
.annonce-chiffre small {
  display: block; font-size: .78rem; line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.annonce > img {
  width: 100%; border-radius: var(--r); margin-top: 24px;
  height: clamp(150px, 16vw, 210px); object-fit: cover; object-position: 50% 62%;
}

.formulaire { background: var(--lavande); padding: clamp(24px, 2.8vw, 38px); }
.etape {
  display: block; text-align: center;
  background: var(--rose); color: #fff;
  font-family: var(--titre); font-size: 1.02rem; font-weight: 700;
  padding: 15px 22px; border-radius: 999px; margin-bottom: 24px;
}

@media (max-width: 900px) {
  .eligibilite { grid-template-columns: 1fr; }
  .annonce > img { height: 180px; }
}

/* ==========================================================================
   CHAMPS DE FORMULAIRE
   ========================================================================== */
.champs { display: grid; gap: 14px; }
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paire > * { min-width: 0; }
@media (max-width: 560px) { .paire { grid-template-columns: 1fr; } }

.champ { display: grid; gap: 6px; }
.champ > label {
  font-family: var(--titre); font-size: .84rem; font-weight: 700;
  color: var(--violet-nuit);
}
.champ input, .champ select, .champ textarea {
  width: 100%; font-family: var(--texte); font-size: 1rem; color: var(--encre);
  background: var(--papier);
  border: 1.5px solid var(--trait); border-radius: 14px;
  padding: 14px 16px;
  transition: border-color .18s, box-shadow .18s;
}
.champ select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 42px; text-overflow: ellipsis;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 0; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(109, 40, 217, .12);
}
.champ .aide { font-size: .82rem; color: var(--gris-clair); }

.bouton-suite {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; border: 0; cursor: pointer;
  background: var(--violet-nuit); color: #fff;
  font-family: var(--titre); font-size: 1.06rem; font-weight: 700;
  padding: 17px 24px; border-radius: 14px;
  transition: background-color .18s, transform .18s;
}
.bouton-suite svg { width: 22px; height: 22px; color: var(--rose-clair); transition: transform .2s; }
.bouton-suite:hover { background: var(--violet); transform: translateY(-1px); }
.bouton-suite:hover svg { transform: translateX(4px); }
.bouton-suite[disabled] { opacity: .6; cursor: default; transform: none; }

.mention { font-size: .78rem; color: var(--gris-clair); line-height: 1.55; margin: 14px 0 0; }
.mention a { color: var(--violet); }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message { display: none; border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; font-size: .95rem; }
.message.visible { display: block; }
.message.ok { background: #ecfdf5; color: #065f46; }
.message.ko { background: #fef2f2; color: #991b1b; }

/* ==========================================================================
   BANDEAUX D'AIDES
   ========================================================================== */
.aides { display: grid; gap: 14px; }
.aide-ligne {
  display: flex; align-items: center; gap: 16px;
  background: var(--rose); color: #fff;
  border-radius: 14px; padding: 16px 24px;
  font-size: 1.04rem;
  transition: transform .2s;
}
.aide-ligne:hover { transform: translateX(5px); }
.aide-ligne svg { width: 24px; height: 24px; flex: none; }
.aide-ligne b { font-weight: 700; }

.encadre {
  margin-top: 20px;
  background: var(--violet-nuit); color: rgba(255, 255, 255, .84);
  border-radius: var(--r); padding: clamp(24px, 3vw, 34px);
}
.encadre b {
  display: block; color: var(--rose-clair);
  font-family: var(--titre); font-size: 1.1rem; font-weight: 700; margin-bottom: 12px;
}
.encadre p { font-size: .98rem; line-height: 1.62; margin-bottom: .9em; }
.encadre p:last-child { margin-bottom: 0; }
.encadre strong { color: #fff; }

@media (max-width: 620px) {
  .aide-ligne { align-items: flex-start; padding: 14px 18px; font-size: .96rem; gap: 12px; }
}

/* ==========================================================================
   ÉTAPES NUMÉROTÉES
   ========================================================================== */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.etapes li { display: flex; align-items: center; gap: 22px; }
.etapes .n {
  width: 66px; height: 66px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--titre); font-size: 1.5rem; font-weight: 800; color: #fff;
  transition: transform .25s cubic-bezier(.34, 1.5, .64, 1);
}
.etapes li:nth-child(odd) .n { background: var(--violet-nuit); }
.etapes li:nth-child(even) .n { background: var(--rose); }
.etapes li:hover .n { transform: scale(1.08); }
.etapes p { margin: 0; font-size: 1.04rem; line-height: 1.55; min-width: 0; }
.etapes strong { color: var(--violet-nuit); }
@media (max-width: 520px) {
  .etapes .n { width: 52px; height: 52px; font-size: 1.2rem; }
  .etapes li { gap: 16px; }
}

.rond-photo {
  border-radius: 50%; overflow: hidden; aspect-ratio: 1;
  max-width: 420px; margin-inline: auto; box-shadow: var(--ombre-forte);
}
.rond-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   COMPARAISON MAÇON / POSEUR
   ========================================================================== */
.face { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.face > div { border-radius: var(--r); padding: clamp(24px, 3vw, 34px); min-width: 0; }
.face .eux { background: var(--lavande); }
.face .nous { background: var(--violet-nuit); color: rgba(255, 255, 255, .86); }
.face h3 { margin-bottom: 1.2rem; }
.face .nous h3 { color: #fff; }
.face ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.face li { display: flex; gap: 13px; align-items: flex-start; font-size: 1rem; line-height: 1.5; }
.face svg { width: 21px; height: 21px; flex: none; margin-top: 3px; }
.face .eux svg { color: var(--gris-clair); }
.face .nous svg { color: var(--rose-clair); }
.face .nous strong { color: #fff; }
@media (max-width: 800px) { .face { grid-template-columns: 1fr; } }

/* ==========================================================================
   PORTRAIT DU GÉRANT
   ========================================================================== */
.gerant { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 4vw, 60px); align-items: center; }
.gerant > * { min-width: 0; }
.gerant-photo img { border-radius: var(--r-lg); box-shadow: var(--ombre-forte); aspect-ratio: 1 / 1.1; object-fit: cover; width: 100%; }
.gerant blockquote { margin: 0; }
.gerant blockquote p { font-size: 1.06rem; }
.gerant blockquote p:first-of-type { font-size: 1.16rem; color: var(--encre); }
.signature { display: flex; align-items: center; gap: 22px; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--trait); }
.signature img { height: 60px; width: auto; opacity: .9; }
.signature span { font-family: var(--titre); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); }
.signature span b { display: block; color: var(--violet-nuit); font-size: .88rem; }
.labels { display: flex; align-items: center; gap: 26px; margin-top: 1.6rem; }
.labels img { height: 82px; width: auto; opacity: .92; }
@media (max-width: 800px) { .gerant { grid-template-columns: 1fr; } }

/* ==========================================================================
   QUESTIONS
   ========================================================================== */
.questions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px); }
.questions > div { min-width: 0; }
.questions h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.questions p { font-size: .99rem; margin: 0; }
@media (max-width: 800px) { .questions { grid-template-columns: 1fr; } }

/* ==========================================================================
   BANDEAU FINAL
   ========================================================================== */
.bandeau {
  background: var(--violet-nuit); color: rgba(255, 255, 255, .84);
  text-align: center; padding: clamp(52px, 7vw, 86px) 0;
}
.bandeau h2 { color: #fff; }
.bandeau p { max-width: 60ch; margin-inline: auto; font-size: 1.06rem; }
.bandeau-boutons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--titre); font-size: .96rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .18s, filter .18s, background-color .18s, color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-rose { background: var(--rose); color: #fff; }
.btn-rose:hover { color: #fff; filter: brightness(1.07); }
.btn-clair { background: #fff; color: var(--violet-nuit); }
.btn-clair:hover { color: var(--violet-nuit); }
.btn-contour { background: transparent; color: var(--violet-nuit); box-shadow: inset 0 0 0 2px var(--trait); }
.btn-contour:hover { box-shadow: inset 0 0 0 2px var(--rose); color: var(--rose); }

/* ==========================================================================
   BARRE FLOTTANTE D'ÉLIGIBILITÉ + RETOUR EN HAUT
   ========================================================================== */
.haut {
  position: fixed; right: 24px; bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 89; width: 60px; height: 60px; border: 0; border-radius: 50%;
  background: var(--rose); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px -10px rgba(236, 72, 153, .8);
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.haut svg { width: 24px; height: 24px; }
.haut.visible { opacity: 1; pointer-events: auto; }
.haut:hover { transform: translateY(-3px); }

@media (max-width: 620px) {
  .haut { width: 46px; height: 46px; right: 12px; }
}

body { padding-bottom: 96px; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.pied { background: var(--violet-nuit); color: rgba(255, 255, 255, .72); padding: clamp(48px, 6vw, 76px) 0 30px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(26px, 3.4vw, 50px); }
.pied-grille > div { min-width: 0; }
.pied img.logo { height: 62px; width: auto; margin-bottom: 16px; }
.pied .devise { font-family: var(--titre); font-size: 1.06rem; font-weight: 700; color: #fff; line-height: 1.35; }
.pied h4 { color: #fff; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied li, .pied a { font-size: .96rem; color: rgba(255, 255, 255, .72); text-decoration: none; }
.pied a:hover { color: var(--rose-clair); }
.pied-bas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: clamp(32px, 4vw, 52px); padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .86rem;
}
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied-grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   APPARITIONS
   ========================================================================== */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1); }
.rv.in { opacity: 1; transform: none; }
.rv-1 { transition-delay: .09s; }
.rv-2 { transition-delay: .18s; }
.cascade > * { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.22,.8,.3,1), transform .5s cubic-bezier(.22,.8,.3,1); }
.cascade.in > * { opacity: 1; transform: none; }
.cascade.in > *:nth-child(1) { transition-delay: .04s; }
.cascade.in > *:nth-child(2) { transition-delay: .11s; }
.cascade.in > *:nth-child(3) { transition-delay: .18s; }
.cascade.in > *:nth-child(4) { transition-delay: .25s; }
.cascade.in > *:nth-child(5) { transition-delay: .32s; }
.cascade.in > *:nth-child(6) { transition-delay: .39s; }
@media (prefers-reduced-motion: reduce) {
  .rv, .cascade > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   RÉSULTATS DU SIMULATEUR
   ========================================================================== */
.resultats {
  margin-top: 24px;
  background: var(--violet-nuit); color: rgba(255, 255, 255, .82);
  border-radius: var(--r); padding: clamp(22px, 2.6vw, 32px);
}
.verdict {
  border-radius: 14px; padding: 15px 18px; margin-bottom: 18px;
  background: rgba(255, 255, 255, .09);
  font-size: .95rem; line-height: 1.5;
}
.verdict b {
  display: block; font-family: var(--titre); font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rose-clair); margin-bottom: 5px;
}
.verdict.warn { background: rgba(236, 72, 153, .18); }

.lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lignes li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; font-size: .96rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.lignes li:last-child { border-bottom: 0; }
.lignes li b { font-family: var(--titre); font-weight: 700; color: #fff; white-space: nowrap; }
.lignes li.plus b { color: var(--rose-clair); }
#sBonus { margin-top: 12px; }

.totaux { margin-top: 18px; padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, .16); }
.total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 8px 0;
}
.total span { font-family: var(--titre); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.total b { font-family: var(--titre); font-size: 1.5rem; font-weight: 800; color: var(--rose-clair); white-space: nowrap; }
.total.rac b { font-size: 2rem; color: #fff; }

.note { font-size: .78rem; line-height: 1.55; color: rgba(255, 255, 255, .58); margin: 14px 0 0; }

.envoi { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 12px; }
.envoi > b { font-family: var(--titre); font-size: 1.02rem; font-weight: 700; color: #fff; }
.envoi .champ input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.envoi .champ input::placeholder { color: rgba(255, 255, 255, .5); }
.envoi .champ input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(236, 72, 153, .2); }
.envoi .bouton-suite { background: var(--rose); }
.envoi .bouton-suite:hover { background: var(--magenta); }
.envoi .bouton-suite svg { color: #fff; }
.envoi .mention { color: rgba(255, 255, 255, .55); }

.resultat {
  background: rgba(236, 72, 153, .12); border-radius: 14px; padding: 14px 18px;
  font-size: .93rem; color: var(--encre); margin-top: 4px;
}
.resultat b { display: block; font-family: var(--titre); font-weight: 700; color: var(--rose); margin-bottom: 3px; }

/* Le contenu de la carte est un seul élément : sinon la boîte flex mange
   les espaces autour des mots en gras. */
.service .carte > span { min-width: 0; }
/* Le mot mis en avant ne se coupe pas en deux lignes */
.hero h1 .cle { white-space: nowrap; }
.hero h1 { max-width: 16ch; }

/* Sous 420 px, la barre haute doit se replier proprement */


/* La signature et son libellé passent à la ligne sur les petits écrans */
.signature { flex-wrap: wrap; }
.signature img { max-width: 100%; }
@media (max-width: 520px) {
  .signature { gap: 14px; }
  .signature img { height: 48px; }
  .signature span { font-size: .72rem; letter-spacing: .06em; }
}

/* ==========================================================================
   HAUT DE PAGE — la photo court d'un bord à l'autre, et la carte blanche
   de l'en-tête flotte dessus, ses deux coins bas arrondis.
   ========================================================================== */
.tete {
  position: relative;
  background: #1c1230;
  overflow: hidden;
  padding-bottom: clamp(96px, 12vw, 170px);
}
.tete-fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% center;
}
.tete::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(20, 14, 30, .9) 0%, rgba(20, 14, 30, .82) 28%,
    rgba(20, 14, 30, .5) 50%, rgba(20, 14, 30, .12) 72%, rgba(20, 14, 30, 0) 100%);
}

psa-header { display: block; position: relative; z-index: 20; }
.carte-entete {
  width: min(100% - 56px, 1860px);
  margin-inline: auto;
  background: var(--papier);
  border-radius: 0 0 clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px);
  padding-inline: clamp(14px, 2.6vw, 44px);
}
.entete { background: transparent; }

/* Le texte du hero passe au-dessus du voile */
.tete .hero {
  position: relative; z-index: 5;
  min-height: 0; background: transparent; overflow: visible;
  padding: clamp(52px, 6.5vw, 92px) 0 0;
}
.tete .hero::after { content: none; }
.tete .hero > .wrap { position: relative; }

/* Un titre plus aéré, comme sur les sites du secteur */
.hero h1 { line-height: 1.42; margin-bottom: 1.7rem; }

@media (max-width: 860px) {
  .tete { padding-bottom: 110px; }
  .tete::after {
    background: linear-gradient(180deg, rgba(20,14,30,.82) 0%, rgba(20,14,30,.66) 45%, rgba(20,14,30,.88) 100%);
  }
  .carte-entete { width: calc(100% - 24px); }
}

/* ==========================================================================
   DENSITÉ — le site paraissait interminable parce que chaque bloc respirait
   trop, pas parce qu'il y avait trop de contenu. On resserre partout.
   ========================================================================== */
.sec { padding: clamp(40px, 4.4vw, 64px) 0; }
.chapeau { margin-bottom: clamp(22px, 2.6vw, 36px); }
.chapeau h2 { margin-bottom: .2em; }
.surtitre { margin-bottom: .6rem; }

/* Haut de page */
.tete { padding-bottom: clamp(66px, 7.5vw, 112px); }
.tete .hero { padding-top: clamp(36px, 4.4vw, 62px); }
.hero h1 { line-height: 1.26; margin-bottom: 1.1rem; font-size: clamp(2rem, 3.7vw, 2.95rem); }
.hero p.chapo { margin-bottom: 1.5rem; font-size: 1.06rem; }
.rideau { height: clamp(52px, 5.6vw, 88px); margin-top: clamp(-92px, -8vw, -56px); }

/* Services : des rangées moins hautes */
.services { gap: 12px; }
.service { gap: 16px; }
.service .tuile, .service .fleche { width: 106px; }
.service .tuile svg { width: 46px; height: 46px; }
.service .fleche svg { width: 28px; height: 28px; }
.service .carte { padding: 18px 24px; font-size: 1.03rem; line-height: 1.5; }

/* Listes et étapes */
.coches { gap: 11px; }
.coches i { width: 34px; height: 34px; }
.deux .intro { margin-bottom: 1.3rem; }
.etapes { gap: 15px; }
.etapes .n { width: 56px; height: 56px; font-size: 1.3rem; }
.etapes p { font-size: 1.01rem; line-height: 1.5; }
.aides { gap: 10px; }
.aide-ligne { padding: 13px 22px; font-size: 1.01rem; }
.encadre { margin-top: 16px; padding: clamp(20px, 2.4vw, 28px); }
.encadre p { font-size: .95rem; line-height: 1.55; margin-bottom: .7em; }

/* Portraits et photos rondes : ils mangeaient une pleine hauteur d'écran */
.rond-photo { max-width: 330px; }
.gerant-photo img { aspect-ratio: 1 / .96; }
.gerant blockquote p { font-size: 1.02rem; margin-bottom: .8em; }
.gerant blockquote p:first-of-type { font-size: 1.1rem; }
.signature { margin-top: 1.1rem; padding-top: 1rem; }
.signature img { height: 50px; }
.labels { margin-top: 1.1rem; }
.labels img { height: 64px; }

/* Comparateur : moins haut */
.compare { aspect-ratio: 4 / 3; }

/* Questions et faces */
.questions { gap: clamp(18px, 2.2vw, 30px); }
.questions h3 { margin-bottom: .35rem; }
.questions p { font-size: .97rem; line-height: 1.55; }
.face { gap: 16px; }
.face > div { padding: clamp(20px, 2.4vw, 28px); }
.face h3 { margin-bottom: .9rem; }
.face ul { gap: 11px; }
.face li { font-size: .98rem; line-height: 1.45; }

/* Bloc éligibilité et formulaire */
.annonce { padding: clamp(24px, 2.6vw, 34px); }
.annonce > img { margin-top: 18px; height: clamp(130px, 13vw, 175px); }
.formulaire { padding: clamp(20px, 2.4vw, 30px); }
.etape { padding: 13px 20px; margin-bottom: 18px; }
.champs { gap: 11px; }
.champ input, .champ select, .champ textarea { padding: 12px 15px; }
.resultats { margin-top: 18px; padding: clamp(18px, 2.2vw, 26px); }
.lignes li { padding: 9px 0; }

/* Bandeau final et pied de page */
.bandeau { padding: clamp(38px, 4.6vw, 62px) 0; }
.bandeau-boutons { margin-top: 1.4rem; }
.pied { padding: clamp(36px, 4.4vw, 56px) 0 24px; }
.pied img.logo { height: 52px; margin-bottom: 12px; }
.pied-bas { margin-top: clamp(24px, 2.8vw, 36px); padding-top: 18px; }

/* En-tête */
.entete .wrap { padding: 16px 0 18px; margin-top: 12px; }
.marque img { height: 48px; }
.barre-haute { padding-top: 14px; }

/* Le rideau doit couvrir exactement le bas de la photo : même valeur des
   deux côtés, sinon un liseré d'image réapparaît en dessous. */
:root { --h-rideau: clamp(52px, 5.6vw, 88px); }
.tete { padding-bottom: var(--h-rideau); }
.rideau { height: var(--h-rideau); margin-top: calc(-1 * var(--h-rideau)); }

/* Le portrait de Philippe : on montre la photo entière, pas un gros plan
   recadré à l'aveugle. */
.gerant-photo img { aspect-ratio: auto; height: auto; }

/* La photo ronde de l'accompagnement mérite d'être plus large : la scène
   a besoin de place pour se lire. */
.rond-photo { max-width: 400px; }

/* La photo est plus haute que le cadre : on cadre vers le haut, sinon les
   têtes passent hors champ. */
.tete-fond { object-position: 66% 14%; }
@media (max-width: 860px) { .tete-fond { object-position: 70% 12%; } }

/* Le bloc de tête doit être assez haut pour que le couple tienne en entier
   dans le cadre, têtes comprises. */
.tete { min-height: min(78svh, 690px); }
.tete-fond { object-position: 66% 4%; }
@media (max-width: 860px) { .tete { min-height: 0; } .tete-fond { object-position: 72% 6%; } }
/* Le haut de la photo est le bord du cadre : aucun rognage au-dessus des têtes */
.tete-fond { object-position: 66% top; }
@media (max-width: 860px) { .tete-fond { object-position: 72% top; } }

/* La photo a désormais du vide en haut : on cadre au centre, les têtes
   tombent juste sous la carte de l'en-tête. */
.tete-fond { object-position: 60% center; }
@media (max-width: 860px) { .tete-fond { object-position: 74% center; } }

/* Le haut de la photo est calé sur le haut du cadre. Comme le tiers
   supérieur de l'image est vide par construction, c'est lui qui passe
   sous la carte de l'en-tête, et les visages restent toujours visibles,
   quelle que soit la largeur de la fenêtre. */
.tete { min-height: 0; }
.tete-fond { object-position: 60% top; }
@media (max-width: 860px) { .tete-fond { object-position: 72% top; } }
/* Sur les grands écrans, la photo grandit : on donne au cadre la hauteur
   qui va avec, sinon on ne voit plus que le plafond. */
.tete { min-height: clamp(520px, 41vw, 800px); }
@media (max-width: 860px) { .tete { min-height: 0; } }
/* La nouvelle photo a beaucoup d'air en haut : on peut cadrer un peu plus
   à droite pour que le couple et l'embrasure de pierre restent dans le champ. */
.tete-fond { object-position: 66% top; }
@media (max-width: 860px) { .tete-fond { object-position: 74% top; } }

/* On remonte le couple dans le cadre : on rogne un peu plus par le haut.
   La valeur suit la largeur de la fenêtre, bornée pour que les visages
   restent toujours sous la carte de l'en-tête. */
.tete-fond { object-position: 66% clamp(-150px, -8.5vw, -55px); }
@media (max-width: 860px) { .tete-fond { object-position: 74% clamp(-70px, -7vw, -20px); } }
/* Nouvelle photo : le couple est un peu plus haut dans l'image, on rogne
   donc un peu moins par le haut. */
.tete-fond { object-position: 62% clamp(-120px, -7vw, -40px); }
@media (max-width: 860px) { .tete-fond { object-position: 72% clamp(-60px, -6vw, -16px); } }

/* Le voile était si dense qu'il effaçait la douche, c'est-à-dire le sujet.
   On le garde assez sombre à gauche pour que le titre reste lisible, et on
   le fait retomber vite pour que l'ouvrage se voie. */
.tete::after {
  background:
    linear-gradient(94deg,
      rgba(26, 16, 42, .82) 0%,
      rgba(26, 16, 42, .70) 22%,
      rgba(26, 16, 42, .42) 40%,
      rgba(26, 16, 42, .14) 58%,
      rgba(26, 16, 42, .02) 74%,
      rgba(26, 16, 42, 0) 100%);
}
/* Aucun rognage horizontal à ces largeurs : on cadre sur l'ensemble */
.tete-fond { object-position: 50% clamp(-120px, -7vw, -40px); }
@media (max-width: 860px) {
  .tete-fond { object-position: 64% clamp(-60px, -6vw, -16px); }
  .tete::after {
    background: linear-gradient(180deg, rgba(26,16,42,.8) 0%, rgba(26,16,42,.62) 45%, rgba(26,16,42,.86) 100%);
  }
}

/* Nouvelle composition : mur nu à gauche, douche au centre, couple à droite.
   La photo est calée par le haut, sans décalage : le vide du plafond passe
   sous la carte et la douche reste entière. Le voile ne mord plus que le
   mur nu, jamais l'ouvrage. */
.tete-fond { object-position: 50% top; }
.tete::after {
  background:
    linear-gradient(94deg,
      rgba(26, 16, 42, .84) 0%,
      rgba(26, 16, 42, .74) 20%,
      rgba(26, 16, 42, .46) 33%,
      rgba(26, 16, 42, .16) 46%,
      rgba(26, 16, 42, .04) 60%,
      rgba(26, 16, 42, 0) 100%);
}
@media (max-width: 860px) {
  .tete-fond { object-position: 58% top; }
  .tete::after {
    background: linear-gradient(180deg, rgba(26,16,42,.8) 0%, rgba(26,16,42,.6) 45%, rgba(26,16,42,.86) 100%);
  }
}

/* Avec une hauteur fixe, plus l'écran est large, moins on voit de la photo.
   On donne au cadre un rapport constant : on voit toujours la même part de
   l'image, sol compris, à toutes les largeurs. */
.tete { min-height: 0; aspect-ratio: 1.86; }
@media (max-width: 860px) { .tete { aspect-ratio: auto; } }

/* Le titre tenait sur cinq lignes et poussait le cadre plus haut que son
   rapport : la photo était donc rognée par le bas, sol compris. Trois
   lignes suffisent, et le cadre peut alors respecter son rapport. */
.hero h1 { max-width: 23ch; font-size: clamp(1.9rem, 3.3vw, 2.7rem); }
.tete { aspect-ratio: 1.7; max-height: 1000px; }
@media (max-width: 860px) { .tete { aspect-ratio: auto; max-height: none; } .hero h1 { max-width: none; } }

/* ==========================================================================
   LA BARRE D'ACTION — posée en bas de l'écran, elle suit le visiteur :
   être rappelé, appeler, et le bouton qui engage.
   ========================================================================== */
.dock {
  position: fixed; z-index: 95;
  left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: stretch; gap: 4px;
  background: var(--violet-nuit);
  border-radius: 22px; padding: 9px;
  box-shadow: 0 12px 44px -14px rgba(28, 12, 60, .6), 0 2px 8px rgba(28, 12, 60, .25);
}
.dock-act {
  display: grid; justify-items: center; align-content: center; gap: 5px;
  padding: 10px 22px; border-radius: 15px;
  color: rgba(255, 255, 255, .8); text-decoration: none;
  transition: color .2s, background-color .2s;
}
.dock-act svg { width: 22px; height: 22px; }
.dock-act span {
  font-family: var(--titre); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.dock-act:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.dock-sep { width: 1px; background: rgba(255, 255, 255, .18); margin: 10px 2px; flex: none; }
.dock-cta {
  display: flex; align-items: center; gap: 16px;
  margin-left: 6px; padding: 12px 22px;
  background: var(--rose); color: #fff;
  border-radius: 15px; text-decoration: none;
  transition: filter .2s, transform .2s;
}
.dock-cta b {
  font-family: var(--titre); font-size: .92rem; font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase; line-height: 1.2;
}
.dock-cta svg { width: 20px; height: 20px; flex: none; transition: transform .2s cubic-bezier(.34,1.4,.64,1); }
.dock-cta:hover { color: #fff; filter: brightness(1.07); }
.dock-cta:hover svg { transform: translateX(4px); }

@media (max-width: 760px) {
  .dock {
    left: 10px; right: 10px; transform: none;
    bottom: calc(10px + env(safe-area-inset-bottom));
    border-radius: 18px; padding: 7px; gap: 2px;
  }
  .dock-act { padding: 8px 12px; }
  .dock-act span { font-size: .62rem; letter-spacing: .06em; }
  .dock-act svg { width: 19px; height: 19px; }
  .dock-cta { margin-left: 4px; flex: 1; justify-content: center; padding: 10px 12px; gap: 9px; }
  .dock-cta b { font-size: .74rem; }
  .dock-cta svg { width: 17px; height: 17px; }
}
@media (max-width: 400px) { .dock-cta b { font-size: .68rem; } .dock-act { padding: 8px 9px; } }

/* Le bouton de retour en haut se pose au-dessus de la barre */
.haut { bottom: calc(108px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) { .haut { bottom: calc(88px + env(safe-area-inset-bottom)); } }
body { padding-bottom: 112px; }
@media (max-width: 760px) { body { padding-bottom: 92px; } }

/* ==========================================================================
   TAILLE DU TEXTE — la seule commande gardée de l'ancienne barre haute,
   posée au bout de la navigation. C'est la plus utile pour ce public.
   ========================================================================== */
.taille {
  display: inline-flex; align-items: center; flex: none;
  background: var(--rose); border-radius: 999px; padding: 4px;
  margin-left: clamp(14px, 2vw, 30px);
}
.taille button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--titre); font-weight: 700; color: #fff;
  padding: 6px 12px; border-radius: 999px; line-height: 1;
  transition: background-color .18s, color .18s;
}
.taille button:last-child { font-size: 1.02rem; }
.taille button[aria-pressed="true"] { background: #fff; color: var(--violet-nuit); }
.taille span { padding: 0 2px; color: rgba(255, 255, 255, .7); }

/* Sans barre haute, la carte d'en-tête n'a plus de filet ni de retrait */
.carte-entete { padding-top: 6px; }
.entete .wrap { border-top: 0; margin-top: 0; padding: 20px 0 22px; }

@media (max-width: 1080px) {
  /* Le menu passe en tiroir : la commande de taille reste à côté du burger */
  .entete .wrap { gap: 12px; }
  .menu { margin-left: 0; }
  .burger { margin-left: auto; order: 3; }
  .taille { order: 2; margin-left: auto; }
}
@media (max-width: 420px) {
  .taille { margin-left: auto; }
  .taille button { padding: 5px 10px; font-size: .94rem; }
}

/* ==========================================================================
   BARRE HAUTE — l'étage qui donne son rythme à l'en-tête. À gauche un atout
   qui se relaie, à droite le numéro en clair.
   ========================================================================== */
.barre-haute { padding-top: 14px; }
.barre-haute .wrap { display: flex; align-items: center; gap: 14px; }

.atout {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--rose); color: #fff;
  padding: 7px 24px 7px 7px; border-radius: 999px;
  font-family: var(--titre); font-size: .84rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  min-width: 0;
}
.atout i {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--violet-nuit); color: #fff;
  display: grid; place-items: center;
  transition: transform .34s cubic-bezier(.34, 1.5, .64, 1);
}
.atout i svg { width: 19px; height: 19px; }
.atout b { min-width: 0; font-weight: 700; }
.atout b span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .3s, transform .3s;
}
/* Le relais : l'ancien argument s'efface vers le haut, le suivant arrive */
.atout.change b span { opacity: 0; transform: translateY(-8px); }
.atout.change i { transform: rotate(-12deg) scale(1.1); }

.bh-tel {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--violet-nuit); color: #fff;
  padding: 6px 24px 6px 6px; border-radius: 999px;
  text-decoration: none;
  transition: transform .18s, filter .18s;
}
.bh-tel:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.12); }
.bh-tel i {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--rose); color: #fff;
  display: grid; place-items: center;
}
.bh-tel i svg { width: 19px; height: 19px; }
.bh-tel em {
  display: block; font-style: normal; font-family: var(--titre);
  font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.bh-tel b { display: block; font-family: var(--titre); font-size: 1.06rem; font-weight: 700; }

/* L'étage du bas retrouve son filet de séparation */
.entete .wrap { border-top: 1px solid var(--trait); margin-top: 14px; padding: 16px 0 18px; }
.carte-entete { padding-top: 0; }

@media (max-width: 900px) {
  .atout b { display: none; }
  .atout { padding: 7px; }
}
@media (max-width: 620px) {
  .barre-haute { padding-top: 10px; }
  .bh-tel { padding: 5px 16px 5px 5px; gap: 9px; }
  .bh-tel i, .atout i { width: 30px; height: 30px; }
  .bh-tel b { font-size: .96rem; }
  .bh-tel em { font-size: .58rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .atout b span, .atout i { transition: none; }
}

/* ==========================================================================
   LA COULEUR QUI DÉBORDE — un pan plein qui sort du cadre, à gauche ou à
   droite en alternance. C'est ce qui fait basculer la page du côté du
   dépliant plutôt que de la page web.
   ========================================================================== */
.sec { position: relative; overflow: hidden; }
.sec > .wrap { position: relative; z-index: 2; }

.pan {
  position: absolute; top: 0; bottom: 0; z-index: 0;
  width: clamp(140px, 22vw, 340px);
  background: linear-gradient(120deg, var(--violet) 0%, var(--violet-vif) 45%, var(--rose) 100%);
  opacity: .14; pointer-events: none;
}
.pan-g { left: 0; border-radius: 0 var(--r-pan, 120px) var(--r-pan, 120px) 0; }
.pan-d { right: 0; border-radius: var(--r-pan, 120px) 0 0 var(--r-pan, 120px); }
.lavande .pan { opacity: .2; }

@media (max-width: 720px) {
  .pan { width: 90px; --r-pan: 64px; opacity: .12; }
}

/* La photo de la signature : un carré à bords arrondis, pas un rond qui
   mange les trois quarts de la scène. */
.rond-photo {
  border-radius: 34px; aspect-ratio: 1;
  max-width: 460px; margin-inline: auto;
  box-shadow: var(--ombre-forte); overflow: hidden;
}

/* La pilule change de largeur en glissant, au lieu de sauter d'un cran */
.atout b {
  display: block; overflow: hidden;
  transition: width .5s cubic-bezier(.22, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .atout b { transition: none; } }

/* La réserve du bas appartient au pied de page, pas au corps : sinon une
   bande blanche apparaît sous le violet. */
body { padding-bottom: 0; }
.pied { padding-bottom: calc(24px + 112px); }
@media (max-width: 760px) { .pied { padding-bottom: calc(24px + 92px); } }


/* ==========================================================================
   LE TUYAU DE DOUCHE — dessin au trait posé dans le panneau d'annonce, il
   occupe la hauteur libre et conduit l'œil jusqu'au chiffre.
   ========================================================================== */
.annonce .tuyau {
  flex: 1; width: auto; height: auto;
  max-width: 150px; min-height: 180px;
  margin: 20px auto 8px;
  object-fit: contain; object-position: center top;
  opacity: .9;
}
@media (max-width: 900px) { .annonce .tuyau { min-height: 140px; margin: 14px auto 4px; } }

/* Le crédit de l'agence, discret, au bout du pied de page */
.pied-bas .credit { color: rgba(255, 255, 255, .5); font-size: .82rem; }
.pied-bas .credit a { color: rgba(255, 255, 255, .72); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.pied-bas .credit a:hover { color: var(--rose-clair); border-bottom-color: var(--rose-clair); }
@media (min-width: 861px) { .pied-bas { flex-wrap: nowrap; } .pied-bas .credit { margin-left: auto; } }

/* Corrigé : avec `aspect-ratio` ET `max-height`, le navigateur rétrécit la
   LARGEUR pour tenir le rapport. Au-delà de 1700 px de fenêtre, le haut de
   page ne faisait donc plus toute la largeur. On impose la largeur, le
   rapport ne pilote plus que la hauteur. */
.tete { width: 100%; }
/* Le dessin de la douchette : il tient toute la hauteur libre du panneau */
.annonce .tuyau { max-width: 170px; opacity: .95; }
/* Le flexible descend sur toute la hauteur libre du panneau */
.annonce .tuyau { max-width: 210px; min-height: 230px; margin: 14px auto 10px; }
@media (max-width: 900px) { .annonce .tuyau { max-width: 150px; min-height: 150px; } }
/* Le flexible prend toute la place disponible dans le panneau */
.annonce .tuyau { max-width: 100%; min-height: 300px; margin: 6px auto 12px; }
@media (max-width: 900px) { .annonce .tuyau { max-width: 210px; min-height: 190px; } }
/* Le dessin déborde dans les marges du panneau pour gagner de la place */
.annonce { padding-bottom: clamp(18px, 2vw, 26px); }
.annonce .tuyau {
  width: calc(100% + 2 * clamp(24px, 2.6vw, 34px));
  max-width: none;
  margin-inline: calc(-1 * clamp(24px, 2.6vw, 34px));
  margin-block: 0 -8px;
  min-height: 340px;
}
@media (max-width: 900px) { .annonce .tuyau { min-height: 200px; } }

/* ==========================================================================
   LA GOUTTE — elle se forme au bec du flexible, tombe, et s'écrase sur le
   mot « travaux ». Les coordonnées sont posées par le script.
   ========================================================================== */
.annonce { position: relative; }
.annonce .cible { position: relative; }

.goutte {
  position: absolute; left: 0; top: 0;
  transform: translate(var(--x, 0), var(--y, 0));
  pointer-events: none; opacity: 0;
}
.goutte.prete { opacity: 1; }

/* La goutte elle-même : une larme, pointe en haut */
.goutte i {
  position: absolute; left: -5px; top: -6px;
  width: 10px; height: 13px;
  background: #fff;
  border-radius: 50% 50% 50% 50% / 68% 68% 32% 32%;
  transform-origin: 50% 100%;
  animation: chute 3.8s cubic-bezier(.5, 0, .85, .55) infinite;
}
@keyframes chute {
  0%        { opacity: 0; transform: translate(0, -6px) scale(.2, .3); }
  7%        { opacity: 1; transform: translate(0, 0) scale(1, 1); }
  10%       { transform: translate(0, 6px) scale(.86, 1.2); }
  52%       { opacity: 1; transform: translate(calc(var(--derive, 0px) * .96), calc(var(--chute, 200px) - 6px)) scale(.8, 1.35); }
  57%       { opacity: 1; transform: translate(var(--derive, 0px), var(--chute, 200px)) scale(1.9, .32); }
  63%       { opacity: 0; transform: translate(var(--derive, 0px), var(--chute, 200px)) scale(2.4, .18); }
  100%      { opacity: 0; transform: translate(var(--derive, 0px), var(--chute, 200px)) scale(2.4, .18); }
}

/* L'éclaboussure au point d'impact */
.goutte b {
  position: absolute; left: -14px; top: -14px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  opacity: 0;
  animation: eclat 3.8s linear infinite;
}
@keyframes eclat {
  0%, 54%   { opacity: 0; transform: translate(var(--derive, 0px), var(--chute, 200px)) scale(.15, .1); }
  58%       { opacity: .9; transform: translate(var(--derive, 0px), var(--chute, 200px)) scale(.6, .3); }
  70%       { opacity: 0;  transform: translate(var(--derive, 0px), var(--chute, 200px)) scale(1.5, .55); }
  100%      { opacity: 0;  transform: translate(var(--derive, 0px), var(--chute, 200px)) scale(1.5, .55); }
}

@media (prefers-reduced-motion: reduce) { .goutte { display: none; } }

/* Retour à la taille précédente du dessin : l'agrandissement collait le bec
   au texte et ne laissait plus de hauteur de chute à la goutte. */
.annonce { padding-bottom: clamp(24px, 2.6vw, 34px); }
.annonce .tuyau {
  width: auto; max-width: 210px;
  margin: 14px auto 10px; min-height: 230px;
}
@media (max-width: 900px) { .annonce .tuyau { max-width: 150px; min-height: 150px; } }
/* Une goutte un peu plus grosse, sinon on ne la voit pas tomber */
.goutte i { width: 13px; height: 17px; left: -6.5px; top: -8px; }
.goutte b { width: 34px; height: 34px; left: -17px; top: -17px; }
/* Une goutte plus fine */
.goutte i { width: 9px; height: 12px; left: -4.5px; top: -6px; }
.goutte b { width: 24px; height: 24px; left: -12px; top: -12px; border-width: 1.6px; }

/* ==========================================================================
   PAGES INTÉRIEURES
   ========================================================================== */

/* Un haut de page plus court : la carte blanche, une photo, un titre */
.tete.court { aspect-ratio: auto; max-height: none; min-height: 0; }
.tete.court .hero { padding: clamp(30px, 3.6vw, 54px) 0 clamp(34px, 4vw, 58px); }
.tete.court h1 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); max-width: 20ch; margin-bottom: .7rem; }
.tete.court .chapo { font-size: 1.04rem; max-width: 56ch; margin-bottom: 0; }

/* Le fil d'Ariane */
.fil { font-size: .84rem; color: rgba(255, 255, 255, .58); margin-bottom: .8rem; }
.fil a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.fil a:hover { color: #fff; }

/* Trois colonnes de listes */
.colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.colonnes > div { min-width: 0; }
.colonnes h3 { font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); margin-bottom: .9rem; }
.colonnes ul { list-style: none; margin: 0; padding: 0; }
.colonnes li { padding: 8px 0; font-size: .99rem; border-bottom: 1px solid var(--trait); }
.colonnes li:last-child { border-bottom: 0; }
@media (max-width: 800px) { .colonnes { grid-template-columns: 1fr; } }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.chiffres > li { list-style: none; background: var(--lavande); border-radius: var(--r); padding: 22px 24px; min-width: 0; }
.chiffres b { display: block; font-family: var(--titre); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; color: var(--violet-nuit); line-height: 1.1; }
.chiffres span { display: block; font-size: .92rem; color: var(--gris); margin-top: 4px; }
@media (max-width: 900px) { .chiffres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .chiffres { grid-template-columns: 1fr; } }

/* Tableau des plafonds */
.tableau { background: var(--papier); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; }
.tableau table { width: 100%; border-collapse: collapse; }
.tableau caption { text-align: left; font-family: var(--titre); font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-nuit); padding: 20px 24px 14px; }
.tableau th, .tableau td { padding: 13px 24px; text-align: right; font-size: .97rem; }
.tableau thead th { background: var(--violet-nuit); color: #fff; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.tableau thead th:first-child, .tableau tbody th { text-align: left; }
.tableau tbody th { font-weight: 600; color: var(--encre); }
.tableau tbody tr + tr th, .tableau tbody tr + tr td { border-top: 1px solid var(--trait); }
.tableau .note { font-size: .84rem; color: var(--gris-clair); margin: 0; padding: 14px 24px 20px; background: var(--lavande); }
@media (max-width: 620px) {
  .tableau table { display: block; overflow-x: auto; white-space: nowrap; }
  .tableau th, .tableau td { padding-inline: 15px; }
  .tableau caption { white-space: normal; }
}

/* Texte long : mentions légales */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin-top: 2.2rem; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--violet); }

/* Page contact : formulaire et coordonnées */
.contact-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(26px, 3.4vw, 52px); align-items: start; }
.contact-grille > * { min-width: 0; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }

.carte-form { background: var(--lavande); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); }
.carte-form h2 { font-size: 1.3rem; margin-bottom: .2em; }
.carte-form > p { color: var(--gris); font-size: .95rem; margin-bottom: 1.4rem; }

.coordonnees { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.coordonnees li { display: flex; gap: 15px; align-items: flex-start; }
.coordonnees svg { width: 22px; height: 22px; flex: none; color: var(--rose); margin-top: 3px; }
.coordonnees b { display: block; font-family: var(--titre); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); }
.coordonnees a, .coordonnees span { color: var(--violet-nuit); font-weight: 600; text-decoration: none; }
.coordonnees a:hover { color: var(--rose); }

.filet { height: 1px; background: var(--trait); margin: 2rem 0; }
.communes { font-size: 1.02rem; }
.communes b { font-weight: 700; color: var(--violet-nuit); white-space: nowrap; }

/* Encart d'appel dans une colonne */
.encart { background: var(--lavande); border-radius: var(--r); padding: 26px 28px; }
.encart h3 { font-size: 1.06rem; margin-bottom: .4em; }
.encart p { font-size: .94rem; margin-bottom: 1.1rem; }

/* L'emblème des Compagnons */
.emblem img { height: 130px; width: auto; }

/* Une liste d'étapes seule dans la page ne doit pas courir sur 1240 px :
   au-delà de 90 caractères la ligne devient pénible à suivre. */
.sec > .wrap > .etapes { max-width: 92ch; margin-inline: auto; }

/* ==========================================================================
   CORRECTIONS D'AUDIT
   ========================================================================== */

/* La coche sans son écrin : les pages intérieures posent le SVG directement
   dans le <li>. Sans règle, il s'étirait à 150 px, en gris. */
.coches li > svg {
  width: 26px; height: 26px; flex: none; margin-top: 2px;
  color: var(--rose); stroke-width: 3;
  transition: transform .25s cubic-bezier(.34, 1.5, .64, 1);
}
.coches li:hover > svg { transform: rotate(-8deg) scale(1.1); }
.coches li > span { font-family: var(--texte); font-size: 1rem; font-weight: 400; color: var(--gris); line-height: 1.55; }
.coches li > span strong { font-family: var(--titre); font-weight: 700; color: var(--violet-nuit); }
.coches li { align-items: flex-start; }

/* Les chiffres clés dans une colonne : deux de front, jamais quatre */
.deux .chiffres { grid-template-columns: 1fr; }
.chiffres b { overflow-wrap: anywhere; }

/* Les trois valeurs P, S, A */
.valeurs { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.valeurs > div {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--lavande); border-radius: var(--r); padding: 22px 24px;
}
.valeurs > div > b {
  font-family: var(--titre); font-size: 1.9rem; font-weight: 800; line-height: 1;
  color: var(--rose); flex: none;
}
.valeurs i {
  display: block; font-style: normal; font-family: var(--titre);
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet-nuit); margin-bottom: 4px;
}
.valeurs span { font-size: .95rem; color: var(--gris); line-height: 1.5; }
@media (max-width: 800px) { .valeurs { grid-template-columns: 1fr; } }

/* La citation ne doit pas garder le retrait par défaut du navigateur */
blockquote { margin-inline: 0; }

/* Rien sous 12 px : ce public lit mal les petits corps */
.bh-tel em { font-size: .76rem; }
.compare .etiq { font-size: .78rem; }
.mention, .note, .pied-bas, .pied-bas .credit, .champ .aide { font-size: .84rem; }

/* Cibles tactiles : au moins 34 px de haut partout où l'on clique */
.taille button { padding: 8px 14px; min-height: 34px; }
.fil a { display: inline-block; padding: 4px 0; }
.pied li a, .pied-bas a { display: inline-block; padding: 4px 0; }
.coordonnees a { display: inline-block; padding: 2px 0; }

/* La tuile du service ne doit pas devenir une dalle sur mobile */
@media (max-width: 900px) {
  .service { align-items: start; }
  .service .tuile { height: 84px; }
}
@media (max-width: 520px) { .service .tuile { height: 66px; } }

/* La pilule d'atout disparaît sous 900 px : cette règle doit passer après
   celle qui anime sa largeur, sinon elle est écrasée. */
@media (max-width: 900px) {
  .atout b { display: none; }
  .atout { padding: 7px; }
}
/* Les derniers corps sous 12 px */
.dock-act span { font-size: .78rem; }
@media (max-width: 520px) { .signature span { font-size: .76rem; } }
/* Les dernières cibles trop basses : fil d'Ariane et liens dans le texte long */
.fil a { padding: 6px 0; }
.prose a { display: inline-block; padding: 4px 0; }

/* ==========================================================================
   IMAGES DES PAGES INTÉRIEURES
   ========================================================================== */

/* Le défaut classique : avec des attributs width et height dans le HTML et
   seulement `max-width` en CSS, l'image garde sa hauteur d'origine pendant
   que sa largeur se réduit. Elle s'étire. */
img { height: auto; }

.deux-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--ombre);
}

/* Ces pages respiraient beaucoup trop : deux blocs texte-image se suivaient
   avec l'écart d'une section entière entre eux. */
.deux + .deux { margin-top: clamp(30px, 3.6vw, 52px); }
.sec > .wrap > .deux { align-items: center; }
.deux .intro:last-child, .deux p:last-child { margin-bottom: 0; }

/* Page contact : le formulaire doit être visible sans faire défiler. On
   réduit le bandeau de tête au strict nécessaire et on remonte la section. */
.tete.mince .hero { padding: clamp(20px, 2.2vw, 32px) 0 clamp(22px, 2.4vw, 34px); }
.tete.mince h1 { font-size: clamp(1.7rem, 2.7vw, 2.3rem); margin-bottom: 0; max-width: none; }
.tete.mince + .rideau { --h-rideau: clamp(34px, 3.4vw, 52px); }
.tete.mince ~ main > .sec:first-child { padding-top: clamp(20px, 2.4vw, 34px); }

/* ==========================================================================
   PAS DE SAUT AU CHARGEMENT
   L'en-tête et le pied de page sont injectés par le script : la page
   s'affichait d'abord sans eux, puis tout descendait d'un coup. On réserve
   leur hauteur en CSS pour que rien ne bouge.
   ========================================================================== */
psa-header { display: block; min-height: 171px; }
psa-footer { display: block; min-height: 483px; }

@media (max-width: 1150px) and (min-width: 1041px) { psa-header { min-height: 190px; } }
@media (max-width: 620px) { psa-header { min-height: 162px; } }
@media (max-width: 860px) { psa-footer { min-height: 700px; } }
@media (max-width: 520px) { psa-footer { min-height: 1126px; } }

/* Le fond est posé tout de suite : sans lui, l'écran passe par un aplat
   blanc avant que la photo n'arrive, ce qui donne le flash entre deux pages. */
html { background: var(--papier); }
.tete { background: #241546; }

/* L'emblème des Compagnons : c'est la caution du métier, il mérite d'être lu
   de loin. Le fichier fourni était un JPEG détouré, plein de halos ; il a été
   nettoyé par démultiplié sur blanc puis agrandi. */
.emblem { text-align: center; }
.emblem img { height: auto; width: min(100%, 340px); }
@media (max-width: 800px) { .emblem img { width: min(100%, 240px); } }

/* Sur la page d'accueil, dans le bloc du gérant */
.labels img { height: auto; width: 128px; }

/* ==========================================================================
   DESSINS AU TRAIT — la douchette du panneau d'éligibilité n'était pas seule.
   Chaque aplat violet du site porte maintenant un objet du métier, tracé au
   même trait blanc, posé en fond et assez discret pour ne rien gêner.
   ========================================================================== */

/* Le mètre ruban dans le bandeau final : on vient prendre les mesures. */
.bandeau { position: relative; overflow: hidden; }
.bandeau .wrap { position: relative; z-index: 1; }
.bandeau::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: clamp(-70px, -3vw, -20px); bottom: -30px;
  width: clamp(190px, 22vw, 320px); aspect-ratio: 700 / 517;
  background: url("dessin-metre.png") center/contain no-repeat;
  opacity: .17; transform: rotate(-8deg);
}

/* Le sablier dans l'encadré « à noter » : l'instruction dure des mois. */
.encadre { position: relative; overflow: hidden; }
.encadre > * { position: relative; z-index: 1; }
.encadre::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-24px, -1vw, -8px); top: 50%; transform: translateY(-50%) rotate(6deg);
  width: clamp(96px, 11vw, 160px); aspect-ratio: 389 / 700;
  background: url("dessin-sablier.png") center/contain no-repeat;
  opacity: .16;
}

/* La truelle dans le bloc du maçon, en face du poseur. */
.face .nous { position: relative; overflow: hidden; }
.face .nous > * { position: relative; z-index: 1; }
.face .nous::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -34px; bottom: -26px;
  width: clamp(150px, 17vw, 240px); aspect-ratio: 700 / 519;
  background: url("dessin-truelle.png") center/contain no-repeat;
  opacity: .15; transform: rotate(-6deg);
}

/* Sous 720 px les blocs sont étroits : les dessins s'effacent pour ne pas
   passer sous le texte. */
@media (max-width: 720px) {
  .encadre::after { opacity: .1; width: 88px; }
  .face .nous::after { opacity: .1; }
}
/* Le sablier est un objet vertical dans un bloc large : on le cale sur la
   hauteur du bloc, sinon il déborde et on n'en voit qu'un morceau. */
.encadre::after {
  width: auto; height: 74%; right: clamp(14px, 2vw, 34px);
  transform: translateY(-50%) rotate(4deg);
}
@media (max-width: 720px) { .encadre::after { height: 60%; right: 8px; } }
/* La truelle se loge dans le vide en haut à droite du bloc, entière, plutôt
   que rognée dans le coin bas où elle passait pour une bavure. */
.face .nous::after {
  top: 12px; bottom: auto; right: 16px;
  width: clamp(110px, 13vw, 165px);
  opacity: .22; transform: rotate(-8deg);
}
@media (max-width: 800px) { .face .nous::after { width: 100px; opacity: .16; } }
/* Les dessins étaient si discrets qu'on ne les voyait pas. On monte le trait
   sans jamais gêner la lecture : ils restent derrière le texte. */
.bandeau::before { opacity: .34; width: clamp(220px, 26vw, 380px); }
.encadre::after { opacity: .3; }
.face .nous::after { opacity: .36; }
@media (max-width: 720px) {
  .encadre::after { opacity: .2; }
  .face .nous::after { opacity: .22; }
  .bandeau::before { opacity: .22; }
}
/* Le mètre ruban ne doit déborder que par la gauche : calé sur la hauteur du
   bandeau, il n'est plus tranché en bas. */
.bandeau::before {
  top: 50%; bottom: auto;
  height: 72%; width: auto; aspect-ratio: 700 / 517;
  transform: translateY(-50%) rotate(-8deg);
  left: clamp(-56px, -3vw, -18px);
}
@media (max-width: 720px) { .bandeau::before { height: 46%; left: -34px; } }

/* ==========================================================================
   LE GABARIT D'ATTENTE
   Réserver la hauteur ne suffisait pas : l'espace restait TRANSPARENT, donc
   la photo et son voile sombre le traversaient jusqu'à ce que le script pose
   la carte blanche. D'où le voile noir d'une image entre deux pages. On peint
   donc la carte à l'avance, à la bonne forme, et elle disparaît d'elle-même
   dès que le composant est rempli.
   ========================================================================== */
psa-header:empty::before {
  content: ""; display: block; height: 100%;
  width: min(100% - 56px, 1860px); margin-inline: auto;
  background: var(--papier);
  border-radius: 0 0 clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px);
}
@media (max-width: 860px) { psa-header:empty::before { width: calc(100% - 24px); } }

psa-footer:empty { background: var(--violet-nuit); }
/* `height: 100%` ne se résout pas contre un parent qui n'a qu'un min-height :
   le gabarit faisait 0 px de haut. En grille, l'élément s'étire tout seul. */
psa-header:empty { display: grid; }
psa-header:empty::before { height: auto; align-self: stretch; }

/* ==========================================================================
   TÉLÉPHONE — la page d'accueil se resserre (27/08/2026)
   Sur un écran de 390 px, la page faisait quinze écrans de haut. Le dessin du
   flexible et la goutte ne tiennent pas dans une colonne : ils disparaissent,
   le panneau d'annonce devient un bandeau. Les questions se replient, les
   vignettes de service rapetissent, le pied de page se range sur deux colonnes.
   ========================================================================== */
@media (max-width: 760px) {
  /* Les retours à la ligne qu'on efface sur téléphone */
  .saut br { display: none; }
  .saut::after { content: " "; }
  .saut.point::after { content: " · "; }

  /* Le rythme vertical */
  .sec { padding: 34px 0; }
  .chapeau { margin-bottom: 20px; }
  .chapeau p { font-size: .98rem; }
  h2 { font-size: 1.5rem; line-height: 1.25; }

  /* Les services : une vignette, un texte, plus de flèche */
  .services { gap: 10px; }
  .service { gap: 10px; align-items: stretch; }
  .service .tuile { width: 54px; min-width: 54px; border-radius: 14px; }
  .service .tuile svg { width: 26px; height: 26px; }
  .service .fleche { display: none; }
  .service .carte { padding: 13px 15px; font-size: .95rem; line-height: 1.45; border-radius: 14px; }

  /* Le panneau d'annonce : un bandeau, sans flexible ni goutte */
  .annonce .tuyau, .goutte { display: none !important; }
  .annonce { padding: 22px 22px 20px; }
  .annonce-titre { font-size: 1.25rem; line-height: 1.2; margin: 0 0 14px; }
  .annonce-chiffre { margin-top: 0; }
  .annonce-chiffre p { font-size: .92rem; }
  .annonce-chiffre strong { font-size: 1.2rem; }
  .annonce-chiffre em { font-size: 3rem; margin: 0 0 6px; }
  .annonce-chiffre small { font-size: .74rem; }

  /* Le formulaire */
  .formulaire { padding: 18px 16px 20px; }
  .etape { padding: 12px 18px; font-size: .95rem; margin-bottom: 16px; }
  .champs { gap: 10px; }

  /* Les aides et l'encadré */
  .aides { gap: 8px; }
  .encadre { padding: 18px; }
  .encadre p { font-size: .92rem; }

  /* Les étapes */
  .etapes { gap: 10px; }
  .etapes li { gap: 12px; align-items: flex-start; }
  .etapes .n { width: 36px; height: 36px; min-width: 36px; font-size: 1rem; }
  .etapes p { font-size: .95rem; line-height: 1.45; }
  .rond-photo { max-width: 220px; }

  /* Maçon ou poseur */
  .face { gap: 10px; }

  /* Les questions se replient : on lit le titre, on ouvre ce qui intéresse */
  .questions:not(.engagements) { grid-template-columns: 1fr; gap: 0; }
  .questions:not(.engagements) > div { border-bottom: 1px solid rgba(76, 29, 149, .14); padding: 0; }
  .questions:not(.engagements) h3 {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0; padding: 13px 0; font-size: 1rem; cursor: pointer;
  }
  .questions:not(.engagements) h3::after {
    content: ""; flex: none; width: 9px; height: 9px;
    border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet);
    transform: rotate(45deg); transition: transform .2s; margin-right: 4px;
  }
  .questions:not(.engagements) > div.ouverte h3::after { transform: rotate(-135deg); }
  .questions:not(.engagements) p { display: none; padding: 0 0 14px; font-size: .95rem; line-height: 1.5; }
  .questions:not(.engagements) > div.ouverte p { display: block; }

  /* Le pied de page, rangé */
  .pied { padding-top: 30px; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .pied-grille > div:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
  .pied img.logo { height: 40px; margin: 0; }
  .pied .devise { font-size: .92rem; margin: 0; }
  .pied h4 { font-size: .72rem; margin-bottom: .5rem; }
  .pied ul { gap: 2px; }
  .pied li, .pied a { font-size: .88rem; }
  .pied li a { padding: 3px 0; }
  .pied-grille > div:last-child { grid-column: 1 / -1; }
  .pied-grille > div:last-child ul { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .pied-bas { margin-top: 16px; padding-top: 12px; gap: 4px 12px; }
  .pied-bas, .pied-bas .credit { font-size: .76rem; }
  .pied-bas a { padding: 2px 0; }
}

/* ==========================================================================
   TÉLÉPHONE — l'en-tête sur une ligne, la barre du bas plus basse (27/08)
   Les deux étages faisaient 320 px : la barre haute disparaît (le numéro est
   déjà dans la barre du bas), et la pilule A/A+ poussait le bouton menu hors
   de l'écran. Il reste : le logo, A/A+, le menu.
   ========================================================================== */
@media (max-width: 760px) {
  .barre-haute { display: none; }
  .carte-entete { width: calc(100% - 24px); padding-inline: 12px; border-radius: 0 0 22px 22px; padding-top: 0; }
  .entete .wrap { padding: 10px 0 12px; margin-top: 0; border-top: 0; gap: 8px; }
  .marque { gap: 8px; }
  .marque img { height: 42px; }
  .marque span { display: none; }
  .taille { margin-left: auto; padding: 3px; }
  .taille button { padding: 5px 10px; font-size: .92rem; }
  .taille button:last-child { font-size: .96rem; }
  .burger { width: 42px; height: 42px; margin-left: 0; flex: none; }
  .burger span, .burger::before, .burger::after { left: 11px; }
  .burger span { top: 20px; }
  .burger::before { top: 13px; }
  .burger::after { top: 27px; }
  .menu { left: 12px; right: 12px; }

  /* La barre du bas */
  .dock { padding: 6px; gap: 2px; border-radius: 16px; }
  .dock-act { padding: 6px 10px; gap: 3px; border-radius: 11px; }
  .dock-act svg { width: 18px; height: 18px; }
  .dock-act span { font-size: .58rem; letter-spacing: .05em; }
  .dock-sep { margin: 8px 1px; }
  .dock-cta { padding: 6px 12px; gap: 8px; border-radius: 11px; }
  .dock-cta b { font-size: .7rem; line-height: 1.15; }
  .dock-cta svg { width: 15px; height: 15px; }
  body { padding-bottom: 76px; }
  .pied { padding-bottom: calc(20px + 76px); }
  .haut { bottom: calc(74px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) {
  .dock-act { padding: 6px 8px; }
  .dock-cta { padding: 6px 10px; }
  .dock-cta b { font-size: .66rem; }
}

/* Le bouton du haut de page ne touche plus le rideau blanc */
@media (max-width: 760px) { .tete .hero { padding-bottom: 30px; } }