/* Paulo Coffre-fort, feuille de style unique. Prefixe pcf-, identite propre a ce site. */
/*  Direction de marque V26, validee par le gerant : maison francaise de haute securite.
    Bleu de nuit profond, un seul accent azur, papier chaud, serif de titrage a fort
    contraste comme le mot PAULO du logo. Aucune police telechargee : la pile s'appuie
    sur les Didone deja presentes sur chaque systeme, pour le caractere sans le poids.  */

:root {
  color-scheme: light dark;

  --pcf-nuit: #071E36;
  --pcf-nuit-2: #123049;
  --pcf-azur: #118FD3;
  --pcf-azur-vif: #2ba3e8;
  --pcf-azur-sombre: #0d5f97;
  --pcf-laiton: #b08b4f;

  --pcf-fond: #fbfaf7;
  --pcf-fond-2: #f3f1ec;
  --pcf-fond-3: #e8e5dd;
  --pcf-encre: #071E36;
  --pcf-encre-2: #5a6a7a;
  --pcf-bord: #ddd8cd;
  --pcf-ombre: 0 1px 2px rgba(11, 32, 54,.05), 0 14px 38px rgba(11, 32, 54,.09);
  --pcf-ombre-forte: 0 2px 4px rgba(11, 32, 54,.08), 0 30px 70px rgba(11, 32, 54,.18);

  --pcf-urgence: #c2273d;
  --pcf-ok: #2e7d5b;

  --pcf-rayon: 4px;
  --pcf-rayon-s: 2px;
  --pcf-large: 1220px;
  --pcf-gouttiere: clamp(20px, 4vw, 48px);

  --pcf-titre: clamp(2.4rem, 1.2rem + 4.4vw, 5rem);
  --pcf-titre-2: clamp(1.7rem, 1.1rem + 2.2vw, 2.9rem);
  --pcf-titre-3: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  --pcf-texte: clamp(1.02rem.98rem + .25vw, 1.15rem);

  --pcf-police: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pcf-police-titre: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
}

/*  Le site reste clair, toujours. Consigne du gerant, redite le 24/09/2026 devant
    un telephone en mode sombre : « horrible le cote foncer sur telephone », apres
    « pas sombre, le site doit etre joyeux et class ». Un visiteur dont le
    telephone est en mode sombre voit donc la meme page claire que les autres.
    color-scheme: light le dit aussi au navigateur, pour que les champs de
    formulaire et les barres du systeme restent clairs eux aussi.
    La palette sombre est conservee ci-dessous, mais elle ne s applique plus que
    si on ajoute data-pcf-theme="sombre" a la balise html : rien n est perdu, et
    rien ne se declenche tout seul.                                            */
:root { color-scheme: light; }

html[data-pcf-theme="sombre"] {
  --pcf-fond: #08131f;
  --pcf-fond-2: #0d1d2e;
  --pcf-fond-3: #14293e;
  --pcf-encre: #f2efe8;
  --pcf-encre-2: #9fb0c0;
  --pcf-bord: #1e344c;
  --pcf-azur: #3fb0ee;
  --pcf-azur-vif: #6cc8f7;
  --pcf-azur-sombre: #118FD3;
  --pcf-ombre: 0 1px 2px rgba(0, 0, 0,.5), 0 16px 40px rgba(0, 0, 0,.45);
  --pcf-ombre-forte: 0 2px 6px rgba(0, 0, 0,.6), 0 30px 70px rgba(0, 0, 0,.55);
  --pcf-urgence: #ff6b7e;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pcf-fond);
  color: var(--pcf-encre);
  font-family: var(--pcf-police);
  font-size: var(--pcf-texte);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--pcf-azur); }
:focus-visible { outline: 3px solid var(--pcf-azur-vif); outline-offset: 3px; border-radius: 6px; }

.pcf-large { width: min(100%, var(--pcf-large)); margin-inline: auto; padding-inline: var(--pcf-gouttiere); }
.pcf-saut { padding-block: clamp(48px, 8vw, 104px); }

/* ---------- En-tete ---------- */

.pcf-entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--pcf-fond) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--pcf-bord);
}
.pcf-entete__barre { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.pcf-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; font-weight: 800; letter-spacing: .2px; }
.pcf-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.pcf-nav a { color: var(--pcf-encre-2); text-decoration: none; font-weight: 600; font-size: .96rem; }
.pcf-nav a:hover { color: var(--pcf-azur); }
@media (max-width: 900px) { .pcf-nav { display: none; } }
/* Sur petit ecran, l en-tete garde l icone d appel et laisse tomber les chiffres :
   la barre du bas porte deja l appel en toutes lettres. */
@media (max-width: 560px) {
  .pcf-entete__barre { gap: 12px; min-height: 66px; }
  .pcf-entete .pcf-tel-long { display: none; }
  .pcf-entete .pcf-btn--tel { padding: 12px 14px; }
}

/* ---------- Boutons ---------- */

.pcf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pcf-btn--tel { background: var(--pcf-azur); color: #fff; box-shadow: var(--pcf-ombre); }
.pcf-btn--tel:hover { background: var(--pcf-azur-vif); transform: translateY(-2px); box-shadow: var(--pcf-ombre-forte); }
.pcf-btn--fantome { border-color: var(--pcf-bord); color: var(--pcf-encre); background: transparent; }
.pcf-btn--fantome:hover { border-color: var(--pcf-azur); color: var(--pcf-azur); transform: translateY(-2px); }
.pcf-btn--grand { padding: 18px 30px; font-size: 1.08rem; }

/* ---------- Heros ---------- */

.pcf-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 92px) clamp(40px, 6vw, 80px); }
.pcf-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--pcf-azur) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.pcf-hero__grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; position: relative; }
@media (max-width: 960px) { .pcf-hero__grille { grid-template-columns: 1fr; } }
.pcf-hero h1 { font-size: var(--pcf-titre); line-height: 1.05; letter-spacing: -.02em; margin: 14px 0 16px; }
.pcf-hero h1 em { font-style: normal; color: var(--pcf-azur); }
.pcf-hero__chapeau { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: var(--pcf-encre-2); margin-bottom: 26px; max-width: 46ch; }
.pcf-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pcf-etiquette {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--pcf-azur) 12%, transparent); color: var(--pcf-azur);
  font-weight: 700; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase;
}
.pcf-pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--pcf-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pcf-ok) 25%, transparent); }

/* Carte reponse : les deux questions qui bloquent l appel */
.pcf-reponse { background: var(--pcf-fond-2); border: 1px solid var(--pcf-bord); border-radius: var(--pcf-rayon); padding: 26px; box-shadow: var(--pcf-ombre); }
.pcf-reponse dl { display: grid; gap: 18px; margin: 0; }
.pcf-reponse dt { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pcf-encre-2); font-weight: 700; }
.pcf-reponse dd { margin: 4px 0 0; font-size: 1.24rem; font-weight: 700; }
.pcf-reponse dd small { display: block; font-size: .92rem; font-weight: 500; color: var(--pcf-encre-2); }

/* ---------- Bandeau de confiance ---------- */

.pcf-confiance { border-block: 1px solid var(--pcf-bord); background: var(--pcf-fond-2); }
.pcf-confiance ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px clamp(18px, 3vw, 40px); list-style: none; margin: 0; padding: 22px 0; }
.pcf-confiance li { display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--pcf-encre-2); font-size: .95rem; }
.pcf-confiance strong { color: var(--pcf-encre); }

/* ---------- Grille de situations ---------- */

.pcf-titre-section { font-size: var(--pcf-titre-2); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; }
.pcf-intro-section { color: var(--pcf-encre-2); max-width: 62ch; margin: 0 0 34px; }

.pcf-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.pcf-carte {
  display: flex; flex-direction: column; gap: 10px; padding: 26px;
  background: var(--pcf-fond); border: 1px solid var(--pcf-bord); border-radius: var(--pcf-rayon);
  text-decoration: none; color: inherit; box-shadow: var(--pcf-ombre);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcf-carte:hover { transform: translateY(-4px); box-shadow: var(--pcf-ombre-forte); border-color: color-mix(in srgb, var(--pcf-azur) 45%, var(--pcf-bord)); }
.pcf-carte h3 { margin: 0; font-size: var(--pcf-titre-3); }
.pcf-carte p { margin: 0; color: var(--pcf-encre-2); }
.pcf-carte__lien { margin-top: auto; font-weight: 700; color: var(--pcf-azur); }
.pcf-carte__icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--pcf-azur) 14%, transparent); color: var(--pcf-azur); }

/* ---------- Etapes ---------- */

.pcf-etapes { counter-reset: pcf-etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.pcf-etape { position: relative; padding: 26px; border-radius: var(--pcf-rayon); background: var(--pcf-fond-2); border: 1px solid var(--pcf-bord); }
.pcf-etape::before {
  counter-increment: pcf-etape; content: counter(pcf-etape);
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px;
  border-radius: 12px; background: var(--pcf-azur); color: #fff; font-weight: 800;
}
.pcf-etape h3 { margin: 0 0 6px; font-size: var(--pcf-titre-3); }
.pcf-etape p { margin: 0; color: var(--pcf-encre-2); }

/* ---------- Bloc final ---------- */

.pcf-final {
  border-radius: calc(var(--pcf-rayon) + 8px); padding: clamp(30px, 5vw, 60px);
  background: linear-gradient(135deg, var(--pcf-azur-sombre), var(--pcf-azur));
  color: #fff; display: grid; gap: 18px; justify-items: start;
}
.pcf-final h2 { font-size: var(--pcf-titre-2); margin: 0; letter-spacing: -.02em; }
.pcf-final p { margin: 0; opacity: .92; max-width: 58ch; }
.pcf-final .pcf-btn--tel { background: #fff; color: var(--pcf-azur-sombre); }
.pcf-final .pcf-btn--tel:hover { background: #eaf6ff; }

/* ---------- Pied ---------- */

.pcf-pied { border-top: 1px solid var(--pcf-bord); background: var(--pcf-fond-2); margin-top: clamp(48px, 8vw, 96px); }
.pcf-pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; padding-block: 44px; }
.pcf-pied h2 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pcf-encre-2); margin: 0 0 12px; }
.pcf-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pcf-pied a { color: var(--pcf-encre); text-decoration: none; }
.pcf-pied a:hover { color: var(--pcf-azur); text-decoration: underline; }
.pcf-pied__bas { border-top: 1px solid var(--pcf-bord); padding-block: 18px; font-size: .88rem; color: var(--pcf-encre-2); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---------- Barre mobile ---------- */

.pcf-barre-mobile {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--pcf-fond) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--pcf-bord);
}
.pcf-barre-mobile .pcf-btn { flex: 1; padding: 14px 10px; font-size: .96rem; }
@media (max-width: 900px) { .pcf-barre-mobile { display: flex; } body { padding-bottom: 82px; } }

/* ---------- Apparition au defilement ---------- */

/* Rien n'est cache au repos : le contenu reste visible sans JavaScript.
   L'apparition ne s'active que la ou les scripts tournent. */
@media (scripting: enabled) {
  .pcf-apparait { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .pcf-apparait.pcf-vu { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pcf-apparait { opacity: 1; transform: none; transition: none; }
  .pcf-btn.pcf-carte { transition: none; }
}

/* ---------- Formulaires ---------- */

.pcf-form { display: grid; gap: 18px; max-width: 620px; }
/* Un enfant de grille garde par defaut la largeur de son contenu le plus large. La bande
   de jours, defilante, poussait donc toute la page a plus de 1200 px sur telephone.
   min-width: 0 rend la colonne compressible et rend le defilement a la bande seule. */
.pcf-form > * { min-width: 0; }
.pcf-champ { display: grid; gap: 6px; }
.pcf-champ label { font-weight: 700; font-size: .95rem; }
.pcf-champ small { color: var(--pcf-encre-2); font-size: .88rem; }
.pcf-champ input.pcf-champ select.pcf-champ textarea {
  font: inherit; color: inherit; background: var(--pcf-fond);
  border: 1px solid var(--pcf-bord); border-radius: var(--pcf-rayon-s);
  padding: 13px 14px; width: 100%;
}
.pcf-champ textarea { min-height: 120px; resize: vertical; }
.pcf-champ input:focus.pcf-champ select:focus.pcf-champ textarea:focus { border-color: var(--pcf-azur); }
.pcf-champ--erreur input.pcf-champ--erreur textarea { border-color: var(--pcf-urgence); }
.pcf-erreur { color: var(--pcf-urgence); font-size: .9rem; font-weight: 600; }
.pcf-depot {
  display: grid; gap: 8px; place-items: center; text-align: center;
  padding: 26px; border: 2px dashed var(--pcf-bord); border-radius: var(--pcf-rayon);
  background: var(--pcf-fond-2); cursor: pointer;
}
.pcf-depot:hover { border-color: var(--pcf-azur); }
.pcf-depot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pcf-depot__apercu { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pcf-depot__apercu img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--pcf-rayon-s); border: 1px solid var(--pcf-bord); }
.pcf-note-rgpd { color: var(--pcf-encre-2); font-size: .9rem; }
.pcf-message { padding: 16px 18px; border-radius: var(--pcf-rayon-s); font-weight: 600; }
.pcf-message--info { background: color-mix(in srgb, var(--pcf-azur) 12%, transparent); color: var(--pcf-azur); }
/*  Un envoi qui n a pas abouti se voit du premier coup d oeil.               */
.pcf-message--erreur {
  background: color-mix(in srgb, #c0392b 10%, transparent); color: #a5291b;
  border: 1px solid color-mix(in srgb, #c0392b 32%, transparent);
}

/* ---------- Creneaux de rendez-vous ---------- */

.pcf-jours { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.pcf-jour {
  flex: 0 0 auto; min-width: 92px; text-align: center; padding: 12px 14px;
  border: 1px solid var(--pcf-bord); border-radius: var(--pcf-rayon-s); background: var(--pcf-fond);
  cursor: pointer; font: inherit; color: inherit;
}
.pcf-jour[aria-pressed="true"] { border-color: var(--pcf-azur); background: color-mix(in srgb, var(--pcf-azur) 12%, transparent); color: var(--pcf-azur); font-weight: 700; }
.pcf-jour strong { display: block; font-size: 1.1rem; }
.pcf-jour span { display: block; font-size: .8rem; color: var(--pcf-encre-2); text-transform: capitalize; }
.pcf-creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 18px; }
.pcf-creneau {
  padding: 12px 8px; border-radius: var(--pcf-rayon-s); border: 1px solid var(--pcf-bord);
  background: var(--pcf-fond); font: inherit; color: inherit; cursor: pointer; font-weight: 600;
}
.pcf-creneau:hover { border-color: var(--pcf-azur); color: var(--pcf-azur); }
.pcf-creneau[aria-pressed="true"] { background: var(--pcf-azur); border-color: var(--pcf-azur); color: #fff; }
.pcf-creneau[disabled] { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* ---------- Tableau du repertoire ---------- */

.pcf-table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--pcf-fond); border: 1px solid var(--pcf-bord); border-radius: var(--pcf-rayon); overflow: hidden; }
.pcf-table caption { caption-side: bottom; text-align: left; padding: 12px 4px; }
.pcf-table th.pcf-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--pcf-bord); }
.pcf-table thead th { background: var(--pcf-fond-3); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pcf-encre-2); }
.pcf-table tbody tr:hover { background: var(--pcf-fond-2); }
.pcf-table td:first-child { font-weight: 600; }
.pcf-a-documenter { color: var(--pcf-encre-2); font-size: .88rem; }

/* ---------- Appels a l action : vivants, jamais criards ---------- */

/* Halo respirant sur le bouton d appel. Transform et opacity seulement. */
.pcf-btn--tel { position: relative; isolation: isolate; }
.pcf-btn--tel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--pcf-azur); opacity: .45; transform: scale(1);
  animation: pcf-halo 2.8s ease-out infinite;
}
@keyframes pcf-halo {
  0%   { opacity: .40; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.22); }
  100% { opacity: 0;   transform: scale(1.22); }
}
.pcf-entete .pcf-btn--tel::after { animation-duration: 3.4s; }

/* Fleche qui avance au survol d une carte. */
.pcf-carte__lien { display: inline-flex; align-items: center; gap: 8px; }
.pcf-carte__lien::after { content: "→"; transition: transform .2s ease; }
.pcf-carte:hover .pcf-carte__lien::after { transform: translateX(5px); }

/* Bande d appel, posee entre deux sections. */
.pcf-bande {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  padding: 22px 26px; border-radius: var(--pcf-rayon);
  background: linear-gradient(120deg, color-mix(in srgb, var(--pcf-azur) 14%, transparent), color-mix(in srgb, var(--pcf-azur) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--pcf-azur) 30%, var(--pcf-bord));
}
.pcf-bande__texte { flex: 1 1 320px; }
.pcf-bande__texte strong { display: block; font-size: 1.12rem; }
.pcf-bande__texte span { color: var(--pcf-encre-2); font-size: .96rem; }
.pcf-bande .pcf-hero__actions { flex: 0 1 auto; min-width: 0; }
/* Sous 620 px, les deux boutons prennent toute la largeur : une bande qui ne se replie
   pas pousse la page et cree un defilement horizontal. */
@media (max-width: 620px) {
  .pcf-bande .pcf-hero__actions { flex: 1 1 100%; }
  .pcf-bande .pcf-hero__actions .pcf-btn { flex: 1 1 auto; }
}

/* Rassurances courtes sous les boutons. */
.pcf-rassurances { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding: 0; list-style: none; color: var(--pcf-encre-2); font-size: .92rem; }
.pcf-rassurances li { display: flex; align-items: center; gap: 7px; }
.pcf-rassurances li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pcf-ok); flex: 0 0 auto; }

/* Appel flottant, qui apparait quand la page a defile. */
.pcf-flottant {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.pcf-flottant.pcf-vu { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 900px) { .pcf-flottant { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .pcf-btn--tel::after { animation: none; opacity: 0; }
  .pcf-carte:hover .pcf-carte__lien::after { transform: none; }
  .pcf-flottant { transition: none; }
}

/* ---------- Fil d Ariane ---------- */

.pcf-fil { border-bottom: 1px solid var(--pcf-bord); background: var(--pcf-fond); font-size: .9rem; }
.pcf-fil .pcf-large { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 10px; color: var(--pcf-encre-2); }
.pcf-fil a { color: var(--pcf-encre-2); text-decoration: none; }
.pcf-fil a:hover { color: var(--pcf-azur); text-decoration: underline; }
.pcf-fil span[aria-current] { color: var(--pcf-encre); font-weight: 600; }
.pcf-fil span[aria-hidden] { opacity: .45; }

/* Sous-titre de l accroche : l accroche convertit, le sous-titre situe la page. */
.pcf-sous-titre { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); font-weight: 700; color: var(--pcf-encre-2); margin: -6px 0 14px; }

/* ---------- Logo valide ---------- */

.pcf-logo__image { height: 44px; width: auto; display: block; }
/* Le logo porte un texte bleu nuit : sur fond sombre, il se pose sur une plaque claire
   plutot que d etre filtre, ce qui abimerait le portrait et le coffre. */
html[data-pcf-theme="sombre"] .pcf-logo__image { background: #ffffff; border-radius: 12px; padding: 5px 10px; height: 40px; }
@media (max-width: 560px) {
  .pcf-logo__image { height: 34px; }
}

/* ---------- Frise laterale : l histoire se dessine au defilement ----------
   Zero script, zero poids : le remplissage du rail et l apparition des jalons
   sont pilotes par la position de la page (animation-timeline). La ou le
   navigateur ne connait pas encore cette regle, le rail s affiche plein et les
   jalons sont visibles : la page reste lisible et complete. */

.pcf-frise { position: relative; list-style: none; margin: 0; padding: 4px 0 4px 44px; }
.pcf-frise::before.pcf-frise::after { content: ""; position: absolute; left: 13px; width: 4px; border-radius: 2px; }
.pcf-frise::before { top: 10px; bottom: 10px; background: var(--pcf-fond-3); }
.pcf-frise::after { top: 10px; height: calc(100% - 20px); transform: scaleY(1); transform-origin: top center;
  background: linear-gradient(180deg, var(--pcf-azur-vif), var(--pcf-azur)); }

.pcf-frise__jalon { position: relative; padding-bottom: clamp(22px, 3vw, 34px); }
.pcf-frise__jalon:last-child { padding-bottom: 0; }
.pcf-frise__jalon::before { content: ""; position: absolute; left: -37px; top: 7px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--pcf-fond); border: 3px solid var(--pcf-azur); box-shadow: 0 0 0 4px var(--pcf-fond); }
.pcf-frise__an { display: inline-block; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; color: var(--pcf-azur-sombre); background: var(--pcf-fond-2); border: 1px solid var(--pcf-bord);
  border-radius: 999px; padding: 3px 11px; margin-bottom: 8px; }
.pcf-frise__jalon h3 { margin: 0 0 6px; font-size: var(--pcf-titre-3); }
.pcf-frise__jalon p { margin: 0; color: var(--pcf-encre-2); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pcf-frise::after { animation: pcf-remplir linear both; animation-timeline: view(); animation-range: entry 90% exit 10%; }
    .pcf-frise__jalon { animation: pcf-jalon linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
  }
}
@keyframes pcf-remplir { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pcf-jalon { from { opacity: .55; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ---------- Deux colonnes avec fiche d identite collante ---------- */

.pcf-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 320px);
  gap: clamp(22px, 4vw, 48px); align-items: start; }
.pcf-fiche { position: sticky; top: 96px; background: var(--pcf-fond-2); border: 1px solid var(--pcf-bord);
  border-radius: var(--pcf-rayon); padding: clamp(16px, 2.2vw, 22px); box-shadow: var(--pcf-ombre); }
.pcf-fiche h2 { margin: 0 0 12px; font-size: 1.05rem; letter-spacing: .01em; }
.pcf-fiche dl { margin: 0; display: grid; gap: 12px; }
.pcf-fiche dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pcf-encre-2); }
.pcf-fiche dd { margin: 2px 0 0; font-weight: 600; }
.pcf-fiche dd small { display: block; font-weight: 400; color: var(--pcf-encre-2); margin-top: 3px; }

@media (max-width: 900px) {
  .pcf-colonnes { grid-template-columns: 1fr; }
  .pcf-fiche { position: static; }
}

/* --- Preuve sociale : les compteurs TikTok et Instagram ------------------- */
/*  Les nombres entrent a la generation du site : aucun script tiers, aucun    */
/*  cookie, aucun appel depuis le navigateur du visiteur.                     */
.pcf-social { padding: clamp(36px, 5vw, 60px) 0; background: var(--pcf-fond-2); border-block: 1px solid var(--pcf-bord); }
.pcf-social__titre { font-size: var(--pcf-titre-3); margin: 0 0 22px; text-align: center; color: var(--pcf-encre-2); font-weight: 600; letter-spacing: .01em; }
.pcf-social__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.pcf-social__compteur {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 24px 18px; background: var(--pcf-fond); border: 1px solid var(--pcf-bord);
  border-radius: var(--pcf-rayon); text-decoration: none; color: inherit;
  transition: transform .22s cubic-bezier(.2.7.3, 1), box-shadow .22s, border-color .22s;
}
.pcf-social__compteur:hover.pcf-social__compteur:focus-visible { transform: translateY(-3px); box-shadow: var(--pcf-ombre); border-color: var(--pcf-azur); }
.pcf-social__nombre { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--pcf-azur); font-variant-numeric: tabular-nums; }
.pcf-social__libelle { font-size: .92rem; color: var(--pcf-encre-2); font-weight: 600; }
.pcf-social__note { margin: 18px 0 0; text-align: center; font-size: .86rem; color: var(--pcf-encre-2); }
@media (prefers-reduced-motion: reduce) { .pcf-social__compteur { transition: none; } }
/* ========================================================================== */
/*  V26, la maison, en pleine lumière.                                       */
/*  Direction validée : maison française de haute sécurité. La classe vient    */
/*  de la typographie et des proportions, la joie vient de la lumière : papier */
/*  chaud, ciel azur léger, or discret. Rien de sombre, rien de triste.        */
/* ========================================================================== */

h1, h2, h3.pcf-social__nombre {
  font-family: var(--pcf-police-titre);
  font-weight: 400;
  letter-spacing: -.012em;
}
h1 { letter-spacing: -.026em; }
h2 strong, h3 strong { font-weight: 600; }

/* L'œil de la maison : capitales très espacées, comme la signature du logo. */
.pcf-etiquette, .pcf-social__titre, .pcf-refs__titre {
  font-family: var(--pcf-police);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .7rem;
  font-weight: 700;
}

/* --- Le premier écran : lumière du matin sur du papier ------------------- */
.pcf-hero {
  background:
    radial-gradient(760px 420px at 88% 8%, rgba(43, 163, 232,.16) 0%, transparent 62%),
    radial-gradient(620px 400px at 4% 92%, rgba(176, 139, 79,.10) 0%, transparent 60%),
    linear-gradient(176deg, #ffffff 0%, var(--pcf-fond) 46%, #f4f1ea 100%);
  color: var(--pcf-encre);
  padding-block: clamp(52px, 8vw, 120px) clamp(48px, 7vw, 100px);
  border-bottom: 1px solid var(--pcf-bord);
}
.pcf-hero::before { display: none; }
.pcf-hero > * { position: relative; z-index: 1; }
.pcf-hero h1 { color: var(--pcf-encre); line-height: 1.02; margin: 18px 0 20px; }
.pcf-hero h1 em { color: var(--pcf-azur); font-style: italic; }
.pcf-hero__chapeau.pcf-hero .pcf-sous-titre { color: var(--pcf-encre-2); }
.pcf-hero .pcf-sous-titre { font-weight: 600; color: var(--pcf-encre); }
.pcf-hero .pcf-etiquette {
  color: var(--pcf-azur-sombre);
  background: rgba(43, 163, 232,.10);
  border-color: rgba(43, 163, 232,.26);
}

/* La carte de réponse : blanche, posée, un filet d'or sur la tranche. */
.pcf-hero .pcf-reponse {
  background: #fff;
  border: 1px solid var(--pcf-bord);
  border-top: 3px solid var(--pcf-laiton);
  box-shadow: var(--pcf-ombre);
  color: var(--pcf-encre);
}
.pcf-hero .pcf-reponse dt { color: var(--pcf-azur-sombre); }
.pcf-hero .pcf-reponse dd { color: var(--pcf-encre); }
.pcf-hero .pcf-reponse small { color: var(--pcf-encre-2); }

/* --- Les boutons : arête franche, geste net ----------------------------- */
.pcf-btn { border-radius: var(--pcf-rayon); letter-spacing: .02em; font-weight: 650; }
.pcf-btn--tel {
  background: var(--pcf-azur); color: #fff;
  box-shadow: 0 10px 28px rgba(17, 143, 211,.28);
}
.pcf-btn--tel:hover { background: var(--pcf-azur-vif); box-shadow: 0 16px 42px rgba(17, 143, 211,.36); }
.pcf-btn--fantome { border-color: var(--pcf-encre); color: var(--pcf-encre); }
.pcf-btn--fantome:hover { border-color: var(--pcf-azur); color: var(--pcf-azur); background: rgba(43, 163, 232,.06); }

/* --- Le bandeau de confiance : clair, filet d'or ------------------------- */
.pcf-confiance {
  background: var(--pcf-fond-2);
  border-block: 1px solid var(--pcf-bord);
  border-top-color: var(--pcf-laiton);
}
.pcf-confiance li { color: var(--pcf-encre-2); }
.pcf-confiance strong { color: var(--pcf-encre); font-weight: 600; letter-spacing: .01em; }
.pcf-confiance ul { padding: 26px 0; }

@media (max-width: 960px) {
  .pcf-hero { padding-block: clamp(38px, 8vw, 68px) clamp(34px, 7vw, 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .pcf-btn.pcf-btn:hover { transform: none; }
}

/* --- Les enseignes qui ont fait confiance -------------------------------- */
/*  Transfert d'autorité : une ambassade, un aéroport et un siège social      */
/*  disent en trois mots ce qu'un paragraphe de promesses ne dira jamais.     */
/*  Les noms paraissent dans la typographie de la maison : c'est ainsi que    */
/*  les maisons présentent leurs clients, et rien ne dépareille.              */
.pcf-refs { padding: clamp(42px, 6vw, 78px) 0; background: var(--pcf-fond); border-bottom: 1px solid var(--pcf-bord); }
.pcf-refs__titre { color: var(--pcf-encre-2); text-align: center; margin: 0 0 32px; }
.pcf-refs__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(22px, 3vw, 42px); align-items: start;
}
.pcf-refs__liste li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pcf-refs__nom {
  font-family: var(--pcf-police-titre); font-size: clamp(1.15rem, 1rem + .8vw, 1.62rem);
  letter-spacing: .04em; color: var(--pcf-encre); line-height: 1.12;
}
.pcf-refs__liste small { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--pcf-encre-2); }
.pcf-refs__liste img { max-width: 122px; max-height: 44px; width: auto; height: auto; filter: grayscale(1) contrast(.92); opacity: .72; transition: opacity .25s ease, filter .25s ease; }
.pcf-refs__liste li:hover img { filter: grayscale(0); opacity: 1; }
.pcf-refs__note { margin: 30px 0 0; text-align: center; font-size: .8rem; color: var(--pcf-encre-2); }

/* ========================================================================== */
/*  Le mécanisme : la signature vivante du site.                              */
/*  Tout est en CSS, rien en script : la molette cherche, le disque décode    */
/*  par à-coups, le bras pousse le pêne, les trois repères s'allument.        */
/*  C'est le geste du métier, pas une décoration qui tourne en rond.          */
/* ========================================================================== */
.pcf-meca { width: 100%; max-width: 460px; height: auto; display: block; margin-inline: auto; overflow: visible; }
.pcf-meca__couronne { transform-origin: 230px 230px; animation: pcf-couronne 26s cubic-bezier(.5, 0.5, 1) infinite; }
.pcf-meca__disque   { transform-origin: 230px 230px; animation: pcf-disque 13s cubic-bezier(.7, 0.3, 1) infinite; }
.pcf-meca__bras     { transform-origin: 230px 230px; animation: pcf-bras 13s cubic-bezier(.65, 0.35, 1) infinite; }
.pcf-meca__pene     { animation: pcf-pene 13s cubic-bezier(.65, 0.35, 1) infinite; }
.pcf-meca__temoins circle { opacity: .12; }
.pcf-meca__temoins .t1 { animation: pcf-temoin 13s linear infinite; }
.pcf-meca__temoins .t2 { animation: pcf-temoin 13s linear infinite .9s; }
.pcf-meca__temoins .t3 { animation: pcf-temoin 13s linear infinite 1.8s; }

/*  La molette cherche : elle avance, hésite, repart, jamais un tour régulier. */
@keyframes pcf-couronne {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(128deg); }
  30%  { transform: rotate(112deg); }
  55%  { transform: rotate(268deg); }
  64%  { transform: rotate(252deg); }
  88%  { transform: rotate(372deg); }
  100% { transform: rotate(360deg); }
}
/*  Le disque décode : trois crans francs, puis le repos porte ouverte. */
@keyframes pcf-disque {
  0%, 8%    { transform: rotate(0deg); }
  20%, 30%  { transform: rotate(96deg); }
  42%, 52%  { transform: rotate(-64deg); }
  64%, 78%  { transform: rotate(152deg); }
  92%, 100% { transform: rotate(0deg); }
}
/*  Le bras ne bouge qu'une fois le décodage fini : c'est l'ouverture. */
@keyframes pcf-bras {
  0%, 64%   { transform: rotate(0deg); }
  76%, 88%  { transform: rotate(-32deg); }
  96%, 100% { transform: rotate(0deg); }
}
@keyframes pcf-pene {
  0%, 66%   { transform: translateX(0); opacity: 1; }
  78%, 88%  { transform: translateX(-46px); opacity: .55; }
  96%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes pcf-temoin {
  0%, 60%   { opacity: .12; }
  70%, 86%  { opacity: 1; }
  94%, 100% { opacity: .12; }
}

/*  Le mouvement se coupe entièrement pour qui l'a demandé : le mécanisme
    reste alors à la position ouverte, lisible et juste.                      */
@media (prefers-reduced-motion: reduce) {
  .pcf-meca__couronne, .pcf-meca__disque, .pcf-meca__bras, .pcf-meca__pene, .pcf-meca__temoins circle { animation: none; }
  .pcf-meca__temoins circle { opacity: 1; }
}

/* --- Le premier écran, colonne de droite : le mécanisme puis la réponse --- */
.pcf-hero__visuel { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 30px); }
.pcf-hero__meca { position: relative; }
.pcf-hero__meca::after {
  content: ""; position: absolute; inset: 12% 12% -6%;
  background: radial-gradient(60% 40% at 50% 100%, rgba(11, 32, 54,.14), transparent 70%);
  filter: blur(18px); z-index: -1;
}
@media (max-width: 960px) {
  .pcf-hero__meca { max-width: 300px; margin-inline: auto; }
}

/* --- Le ruban des marques : l'étendue du métier, en un coup d'œil -------- */
/*  Défilement continu, en CSS seul. Il se fige pour qui a demandé moins de   */
/*  mouvement, et au survol pour qu'on puisse lire un nom.                    */
.pcf-ruban {
  overflow: hidden; padding: 20px 0; background: var(--pcf-nuit); color: #dfe7ee;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.pcf-ruban__piste { display: flex; width: max-content; gap: 46px; animation: pcf-ruban 56s linear infinite; }
.pcf-ruban__piste span {
  font-family: var(--pcf-police-titre); font-size: 1.28rem; letter-spacing: .05em;
  white-space: nowrap; opacity: .62; transition: opacity .25s ease, color .25s ease;
}
.pcf-ruban:hover .pcf-ruban__piste { animation-play-state: paused; }
.pcf-ruban__piste span:hover { opacity: 1; color: var(--pcf-azur-vif); }
@keyframes pcf-ruban { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pcf-ruban__piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 22px; }
}

/* --- L'en-tête : la marque se lit, jusqu'à « & Consorts » ---------------- */
.pcf-entete__barre { min-height: 96px; }
.pcf-logo__image { width: clamp(212px, 22vw, 310px); height: auto; display: block; }
.pcf-nav__fort {
  background: var(--pcf-encre); color: #fbfaf7 !important; padding: 10px 18px;
  border-radius: var(--pcf-rayon); font-weight: 650;
  transition: background .2s ease, transform .2s ease;
}
.pcf-nav__fort:hover { background: var(--pcf-azur); transform: translateY(-1px); }
@media (max-width: 1100px) {
  .pcf-entete__barre { min-height: 82px; }
  .pcf-logo__image { width: clamp(190px, 30vw, 240px); }
}
.pcf-nav a.pcf-entete .pcf-btn.pcf-nav__fort { white-space: nowrap; }
.pcf-entete .pcf-btn--tel { font-variant-numeric: tabular-nums; }
@media (max-width: 1240px) { .pcf-nav { gap: 18px; } }

/* ========================================================================== */
/*  Le bandeau d'action : la dernière chose que voit le visiteur.             */
/*  Trois portes, appeler, chiffrer, réserver, et les quatre raisons d'y     */
/*  aller. Il ferme chaque page, sans jamais couper la lecture.               */
/* ========================================================================== */
.pcf-action {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 420px at 82% 0%, rgba(43, 163, 232,.22) 0%, transparent 62%),
    linear-gradient(162deg, var(--pcf-nuit) 0%, #0e2a43 55%, #071827 100%);
  color: #f2efe8; padding: clamp(46px, 7vw, 92px) 0; margin-top: clamp(40px, 6vw, 80px);
}
.pcf-action::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
}
.pcf-action > * { position: relative; z-index: 1; }
.pcf-action__oeil {
  margin: 0 0 12px; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: var(--pcf-azur-vif);
}
.pcf-action h2 {
  margin: 0 0 14px; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1.08;
  color: #fbfaf7; letter-spacing: -.02em;
}
.pcf-action__chapeau { margin: 0 0 30px; max-width: 62ch; color: #bccbd8; font-size: clamp(1rem.97rem + .3vw, 1.14rem); }
.pcf-action__boutons { display: flex; flex-wrap: wrap; gap: 14px; }
.pcf-btn--clair { background: #fbfaf7; color: var(--pcf-nuit); box-shadow: 0 10px 30px rgba(0, 0, 0,.28); }
.pcf-btn--clair:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 42px rgba(0, 0, 0,.36); }
.pcf-btn--fantome-clair { border: 1px solid rgba(255, 255, 255,.34); color: #f2efe8; background: transparent; }
.pcf-btn--fantome-clair:hover { border-color: var(--pcf-azur-vif); color: var(--pcf-azur-vif); background: rgba(43, 163, 232,.09); }
.pcf-action__preuves {
  list-style: none; margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255, 255, 255,.14);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 30px;
}
.pcf-action__preuves li { display: flex; flex-direction: column; gap: 3px; }
.pcf-action__preuves strong { color: #fbfaf7; font-weight: 600; }
.pcf-action__preuves span { color: #9fb2c2; font-size: .9rem; }

/* --- La barre fixe du téléphone : sur mobile, l'appel reste sous le pouce - */
.pcf-barre-mobile { display: none; }
@media (max-width: 760px) {
  .pcf-barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; inset: auto 0 0 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(251, 250, 247,.93); backdrop-filter: blur(12px);
    border-top: 1px solid var(--pcf-bord);
  }
  .pcf-barre-mobile .pcf-btn { width: 100%; justify-content: center; padding: 14px 12px; }
  body { padding-bottom: 82px; }
}
@media (prefers-reduced-motion: reduce) { .pcf-btn--clair:hover { transform: none; } }
.pcf-aide { display: block; margin: 2px 0 8px; font-size: .84rem; color: var(--pcf-encre-2); font-weight: 400; }
.pcf-intervient { color: var(--pcf-encre-2); font-size: .88rem; }
.pcf-intervient::before { content: "●"; color: var(--pcf-ok); font-size: .6em; vertical-align: .25em; margin-right: 6px; }

/* --- La preuve sociale, en grand : nuit, chiffres qui montent ------------ */
/*  Le bloc devient une section à part entière : 15 800 abonnés et 202 600    */
/*  J'aime disent en deux nombres ce qu'aucun paragraphe ne dira.             */
.pcf-social {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 420px at 18% 0%, rgba(43, 163, 232,.20) 0%, transparent 62%),
    linear-gradient(168deg, #0d2438 0%, var(--pcf-nuit) 56%, #071827 100%);
  color: #f2efe8; padding: clamp(46px, 7vw, 92px) 0; border-block: 0;
}
.pcf-social__oeil {
  margin: 0 0 12px; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: var(--pcf-azur-vif);
}
.pcf-social h2 {
  margin: 0 0 12px; font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.9rem); line-height: 1.08;
  color: #fbfaf7; letter-spacing: -.02em;
}
.pcf-social__chapeau { margin: 0 0 34px; max-width: 58ch; color: #bccbd8; }
.pcf-social__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.pcf-social__compteur {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 18px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255,.05); border: 1px solid rgba(255, 255, 255,.13);
  border-radius: var(--pcf-rayon);
  transition: transform .24s cubic-bezier(.2.7.3, 1), border-color .24s, background .24s;
}
.pcf-social__compteur:hover.pcf-social__compteur:focus-visible {
  transform: translateY(-4px); border-color: var(--pcf-azur-vif); background: rgba(43, 163, 232,.12);
}
.pcf-social__nombre {
  font-family: var(--pcf-police-titre); font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1;
  letter-spacing: -.02em; color: var(--pcf-azur-vif); font-variant-numeric: tabular-nums;
}
.pcf-social__libelle { font-size: .88rem; color: #bccbd8; font-weight: 600; letter-spacing: .02em; }
.pcf-social__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pcf-social__note { margin: 24px 0 0; font-size: .84rem; color: #90a4b5; }
@media (prefers-reduced-motion: reduce) { .pcf-social__compteur:hover { transform: none; } }
/* Le temoin « en temps reel » : une pastille qui respire, discrete. */
.pcf-social__direct { display: inline-flex; align-items: center; gap: 7px; color: #bccbd8; font-weight: 600; }
.pcf-social__pouls {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128,.6); animation: pcf-pouls 2.4s ease-out infinite;
}
@keyframes pcf-pouls {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) { .pcf-social__pouls { animation: none; } }

/* ========================================================================== */
/*  Les appels à l'action, vivants.                                           */
/*  Un bouton qui ne bouge pas se confond avec le décor. Trois gestes lui      */
/*  donnent vie : un reflet qui traverse, une élévation au survol, et une      */
/*  flèche qui avance. Rien ne clignote, rien ne saute : le mouvement reste    */
/*  celui d'une maison, pas d'une bannière.                                    */
/* ========================================================================== */
.pcf-btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .24s cubic-bezier(.2.7.3, 1), box-shadow .24s ease, background .24s ease, border-color .24s ease;
}

/*  Le reflet : une bande de lumière traverse le bouton au survol, une fois.  */
.pcf-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255,.42) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .72s cubic-bezier(.3.8.3, 1);
}
.pcf-btn:hover::before.pcf-btn:focus-visible::before { transform: translateX(130%); }
.pcf-btn--fantome::before.pcf-btn--fantome-clair::before {
  background: linear-gradient(105deg, transparent 38%, rgba(17, 143, 211,.16) 50%, transparent 62%);
}

.pcf-btn:hover.pcf-btn:focus-visible { transform: translateY(-2px); }
.pcf-btn:active { transform: translateY(0); transition-duration: .06s; }

/*  Le bouton d'appel respire une fois toutes les six secondes : assez pour   */
/*  attirer l'œil, trop peu pour agacer. Il s'arrête dès qu'on le survole.    */
.pcf-btn--tel { animation: pcf-respire 6s ease-in-out 2s infinite; }
.pcf-btn--tel:hover.pcf-btn--tel:focus-visible { animation-play-state: paused; }
@keyframes pcf-respire {
  0%, 88%, 100% { box-shadow: 0 10px 28px rgba(17, 143, 211,.28); }
  93%           { box-shadow: 0 10px 28px rgba(17, 143, 211,.28), 0 0 0 10px rgba(43, 163, 232,.14); }
}

/*  La flèche des liens de carte avance quand la carte s'anime.              */
.pcf-carte__lien::after { transition: transform .26s cubic-bezier(.2.7.3, 1); }
.pcf-carte:hover .pcf-carte__lien::after.pcf-carte:focus-within .pcf-carte__lien::after { transform: translateX(6px); }

/*  Le clavier voit ce que la souris voit : même relief, contour net.         */
.pcf-btn:focus-visible { outline: 3px solid var(--pcf-azur-vif); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pcf-btn.pcf-btn::before.pcf-carte__lien::after { transition: none; }
  .pcf-btn:hover.pcf-btn:focus-visible.pcf-btn:active { transform: none; }
  .pcf-btn--tel { animation: none; }
  .pcf-btn:hover::before.pcf-btn:focus-visible::before { transform: translateX(-130%); }
}

/* ========================================================================== */
/*  Le module d'animation thematique.                                         */
/*  Une place reservee AVANT le chargement : aspect-ratio fixe la hauteur, donc */
/*  rien ne saute quand le media arrive. Sur ordinateur il vit dans la colonne  */
/*  laterale, calme, jamais au milieu du texte ; sur telephone il se glisse     */
/*  dans le flux, en pleine largeur, sous le chapeau.                          */
/* ========================================================================== */
.pcf-anim {
  --pcf-anim-ratio: 39 / 32;
  margin: 0 0 clamp(20px, 3vw, 32px);
  width: 100%;
  max-width: 390px;
}
.pcf-anim__cadre {
  aspect-ratio: var(--pcf-anim-ratio);
  width: 100%;
  background: #fbfaf7;
  border: 1px solid var(--pcf-bord);
  border-top: 3px solid var(--pcf-laiton);
  border-radius: var(--pcf-rayon);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 18px 54px rgba(10, 38, 60,.10);
}
.pcf-photo-technique {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: #081522; isolation: isolate;
}
.pcf-photo-technique__base.pcf-photo-technique__revelation {
  position: absolute; inset: 0; background-image: var(--pcf-photo);
  background-size: cover; background-position: 50% 50%;
  will-change: transform, filter, clip-path;
}
.pcf-photo-technique__base {
  transform: scale(1.055); filter: saturate(.78) contrast(1.04) brightness(.86);
  animation: pcf-photo-base 15s cubic-bezier(.2.65.25,1) forwards;
}
.pcf-photo-technique__revelation {
  z-index: 2; transform: scale(1.055); filter: saturate(.98) contrast(1.02) brightness(.98);
  clip-path: circle(0% at 58% 43%);
  animation: pcf-photo-revelation 15s cubic-bezier(.45,0.18,1) forwards;
}
.pcf-photo-technique__grille {
  position: absolute; z-index: 3; inset: 0; opacity: 0;
  background-image: linear-gradient(rgba(130,196,226,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(130,196,226,.10) 1px,transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(circle at 58% 43%,#000 0 18%,transparent 43%);
  animation: pcf-photo-grille 15s ease forwards;
}
.pcf-photo-technique__cible {
  position: absolute; z-index: 4; left: 58%; top: 43%; width: 84px; aspect-ratio: 1;
  translate: -50% -50%; border: 1px solid rgba(177,221,242,.78); border-radius: 50%;
  opacity: 0; transform: scale(.72); animation: pcf-photo-cible 15s cubic-bezier(.2.7.2,1) forwards;
}
.pcf-photo-technique__cible::before.pcf-photo-technique__cible::after { content:""; position:absolute; background:rgba(177,221,242,.78); }
.pcf-photo-technique__cible::before { left:50%; top:-16px; bottom:-16px; width:1px; }
.pcf-photo-technique__cible::after { top:50%; left:-16px; right:-16px; height:1px; }
.pcf-photo-technique__cible i { position:absolute; border:1px solid rgba(198,163,100,.74); border-radius:50%; inset:12px; }
.pcf-photo-technique__cible i + i { inset:27px; background:rgba(198,163,100,.22); }
.pcf-photo-technique__balayage {
  position:absolute; z-index:5; top:0; bottom:0; left:-18%; width:18%; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(184,225,244,.20),rgba(255,255,255,.32),transparent);
  transform:skewX(-8deg); animation:pcf-photo-balayage 15s ease-in-out forwards; mix-blend-mode:screen;
}
.pcf-photo-technique__jalons {
  position:absolute; z-index:6; right:18px; bottom:17px; display:flex; gap:7px;
}
.pcf-photo-technique__jalons i {
  width:24px; height:2px; background:rgba(255,255,255,.30); position:relative; overflow:hidden;
}
.pcf-photo-technique__jalons i::after {
  content:""; position:absolute; inset:0; background:#c6a364; transform:scaleX(0); transform-origin:left;
  animation:pcf-photo-jalon 2.6s ease forwards;
}
.pcf-photo-technique__jalons i:nth-child(2)::after { animation-delay:4.3s; }
.pcf-photo-technique__jalons i:nth-child(3)::after { animation-delay:9s; }
@keyframes pcf-photo-base { 0%{transform:scale(1.055);filter:saturate(.78) contrast(1.04) brightness(.86)} 100%{transform:scale(1.015);filter:saturate(.98) contrast(1.02) brightness(.98)} }
@keyframes pcf-photo-revelation { 0%,22%{clip-path:circle(0% at 58% 43%);transform:scale(1.055)} 58%{clip-path:circle(27% at 58% 43%)} 100%{clip-path:circle(140% at 58% 43%);transform:scale(1.015)} }
@keyframes pcf-photo-grille { 0%,20%,100%{opacity:0} 34%,68%{opacity:.62} }
@keyframes pcf-photo-cible { 0%,20%{opacity:0;transform:scale(.72)} 34%,66%{opacity:.82;transform:scale(1)} 84%,100%{opacity:0;transform:scale(1.16)} }
@keyframes pcf-photo-balayage { 0%,28%{left:-18%;opacity:0} 36%{opacity:1} 67%{left:104%;opacity:.75} 72%,100%{left:104%;opacity:0} }
@keyframes pcf-photo-jalon { to{transform:scaleX(1)} }
.pcf-cine { position: relative; width: 100%; height: 100%; overflow: hidden; background: #071827; isolation: isolate; }
.pcf-cine__plan { position: absolute; inset: 0; background-image: var(--pcf-sprite); background-repeat: no-repeat; background-size: 200% 200%; opacity: 0; transform: scale(1.025); will-change: opacity, transform; }
.pcf-cine__plan--1 { background-position: 0 0; opacity: 1; animation: pcf-plan-1 16s cubic-bezier(.4,0.2,1) forwards; }
.pcf-cine__plan--2 { background-position: 100% 0; animation: pcf-plan-2 16s cubic-bezier(.4,0.2,1) forwards; }
.pcf-cine__plan--3 { background-position: 0 100%; animation: pcf-plan-3 16s cubic-bezier(.4,0.2,1) forwards; }
.pcf-cine__plan--4 { background-position: 100% 100%; animation: pcf-plan-4 16s cubic-bezier(.4,0.2,1) forwards; }
.pcf-cine__lumiere { position: absolute; inset: -20%; z-index: 5; background: linear-gradient(104deg, transparent 38%, rgba(223,191,126,.22) 49%, rgba(255,255,255,.14) 52%, transparent 62%); transform: translateX(-75%) rotate(-2deg); animation: pcf-lumiere 16s ease-in-out forwards; mix-blend-mode: screen; pointer-events: none; }
.pcf-cine__progression { position: absolute; z-index: 7; left: 20px; right: 20px; bottom: 18px; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.pcf-cine__progression i { height: 2px; background: rgba(255,255,255,.28); overflow: hidden; position: relative; }
.pcf-cine__progression i::after { content:""; position:absolute; inset:0; background:#c6a364; transform:scaleX(0); transform-origin:left; animation: pcf-jalon 3.2s ease forwards; }
.pcf-cine__progression i:nth-child(2)::after { animation-delay: 3.4s; }.pcf-cine__progression i:nth-child(3)::after { animation-delay: 7.2s; }.pcf-cine__progression i:nth-child(4)::after { animation-delay: 11.2s; }
@keyframes pcf-plan-1 { 0%,19%{opacity:1;transform:scale(1.025)} 27%,100%{opacity:0;transform:scale(1.065)} }
@keyframes pcf-plan-2 { 0%,18%{opacity:0;transform:scale(1.06)} 27%,43%{opacity:1;transform:scale(1.025)} 51%,100%{opacity:0;transform:scale(1.055)} }
@keyframes pcf-plan-3 { 0%,42%{opacity:0;transform:scale(1.055)} 51%,67%{opacity:1;transform:scale(1.02)} 76%,100%{opacity:0;transform:scale(1.05)} }
@keyframes pcf-plan-4 { 0%,67%{opacity:0;transform:scale(1.05)} 77%,100%{opacity:1;transform:scale(1.015)} }
@keyframes pcf-lumiere { 0%,18%{opacity:0;transform:translateX(-75%) rotate(-2deg)} 23%{opacity:1} 43%{opacity:.85;transform:translateX(74%) rotate(-2deg)} 50%,100%{opacity:0;transform:translateX(74%) rotate(-2deg)} }
@keyframes pcf-jalon { to { transform:scaleX(1); } }
.pcf-cine--scroll .pcf-cine__plan {
  animation:none; opacity:0; transform:scale(1.055);
  transition:opacity 1.15s cubic-bezier(.4,0.2,1),transform 7s cubic-bezier(.2.65.25,1);
}
.pcf-cine--scroll .pcf-cine__lumiere { animation:none; opacity:0; transition:opacity .6s ease; }
.pcf-cine--scroll .pcf-cine__progression i::after { animation:none; transform:scaleX(0); transition:transform .9s ease; }
.pcf-cine--scroll.pcf-etape-1 .pcf-cine__plan--1, .pcf-cine--scroll.pcf-etape-2 .pcf-cine__plan--2, .pcf-cine--scroll.pcf-etape-3 .pcf-cine__plan--3, .pcf-cine--scroll.pcf-etape-4 .pcf-cine__plan--4 { opacity:1; transform:scale(1.012); }
.pcf-cine--scroll.pcf-etape-2 .pcf-cine__lumiere, .pcf-cine--scroll.pcf-etape-3 .pcf-cine__lumiere { opacity:.55; }
.pcf-cine--scroll.pcf-etape-1 .pcf-cine__progression i:nth-child(1)::after, .pcf-cine--scroll.pcf-etape-2 .pcf-cine__progression i:nth-child(-n+2)::after, .pcf-cine--scroll.pcf-etape-3 .pcf-cine__progression i:nth-child(-n+3)::after, .pcf-cine--scroll.pcf-etape-4 .pcf-cine__progression i::after { transform:scaleX(1); }
.pcf-cine--scroll.pcf-etape-4::after {
  content:""; position:absolute; z-index:6; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(198,163,100,.26),inset 0 -80px 90px rgba(2,12,21,.12);
  animation:pcf-ouverture-finale 1.4s ease both;
}
@keyframes pcf-ouverture-finale { from{opacity:0} to{opacity:1} }
.pcf-anim__media.pcf-anim__cadre > svg {
  width: 100%; height: 100%; display: block; object-fit: contain;
}
.pcf-anim__legende {
  margin: 10px 2px 0; font-size: .82rem; color: var(--pcf-encre-2);
  letter-spacing: .01em;
}

/*  Ordinateur : le module se cale en haut de la colonne et y reste pendant que
    le texte defile a cote. Il ne suit jamais le lecteur jusqu'en bas de page. */
@media (min-width: 961px) {
  .pcf-anim { position: sticky; top: 112px; }
  .pcf-hero__visuel .pcf-anim { position: static; }
  .pcf-hero__grille:has(> .pcf-anim) { align-items: start; }
  .pcf-hero__grille:has(> .pcf-anim) > :first-child { grid-row: 1 / span 2; }
  .pcf-hero__grille > .pcf-anim { grid-column: 2; grid-row: 1; justify-self: end; margin-bottom: 0; }
  .pcf-hero__grille > .pcf-anim + .pcf-reponse { grid-column: 2; grid-row: 2; }

  /* Les pages editoriales n'avaient pas de seconde colonne. Lorsqu'une scene
     existe, elle devient leur plan lateral, sans modifier la hierarchie HTML. */
  .pcf-hero > .pcf-large:has(> .pcf-anim) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
    gap: clamp(34px, 5vw, 72px);
    align-items: start;
  }
  .pcf-hero > .pcf-large:has(> .pcf-anim) > .pcf-hero__texte { grid-column: 1; grid-row: 1; align-self: center; }
  .pcf-hero > .pcf-large > .pcf-anim { grid-column: 2; grid-row: 1; justify-self: end; }

  /* Pages longues sans hero : le texte garde une largeur de lecture calme et
     la scene dispose de son propre rail. Elle ne couvre jamais le contenu. */
  .pcf-page-avec-animation > .pcf-large.pcf-page-avec-animation__grille {
    max-width: 1180px !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
    gap: clamp(34px, 5vw, 72px);
    align-items: start;
  }
  .pcf-page-avec-animation__intro { grid-column: 1; grid-row: 1; min-width: 0; }
  .pcf-page-avec-animation__suite { grid-column: 1; grid-row: 2; min-width: 0; }
  .pcf-page-avec-animation > .pcf-large > .pcf-anim {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }
}

/* Sur les grands ecrans, le plan technique reste dans le rail droit pendant
   la lecture. Il est dimensionne par la gouttiere disponible et ne recouvre
   jamais la colonne de contenu. Le script le retire avant l'appel final. */
@media (min-width: 1200px) {
  .pcf-anim.pcf-anim--dockee {
    position: fixed !important;
    top: 112px;
    right: 24px;
    width: clamp(190px, calc((100vw - 1160px) / 2 - 36px), 320px);
    margin: 0;
    z-index: 25;
    opacity: .97;
  }
  .pcf-anim.pcf-anim--dockee .pcf-anim__cadre { box-shadow: 0 24px 68px rgba(10, 38, 60,.16); }
  .pcf-anim-placeholder { width: min(100%, 410px); aspect-ratio: var(--pcf-anim-ratio, 39 / 32); grid-column: 2; grid-row: 1; justify-self: end; }
  .pcf-hero__grille > .pcf-anim-placeholder { grid-row: 1; }
  .pcf-page-avec-animation > .pcf-large > .pcf-anim-placeholder { grid-column: 2; grid-row: 1; }
}

/*  Telephone : dans le flux, largeur pleine, hauteur reduite pour ne pas
    repousser le texte hors de l'ecran. */
@media (max-width: 960px) {
  .pcf-anim { --pcf-anim-ratio: 39 / 32; max-width: none; margin-inline: 0; }
  .pcf-anim__legende { text-align: center; }
  .pcf-hero__texte { display: contents; }
  .pcf-page-avec-animation__grille { display: flex; flex-direction: column; }
  .pcf-page-avec-animation__intro.pcf-page-avec-animation__suite { min-width: 0; }
}

/*  Mouvement reduit : la scene s'arrete sur son etat final, celui qui porte le
    sens. Une video se fige sur sa derniere image via son poster. */
@media (prefers-reduced-motion: reduce) {
  .pcf-anim [class*="pcf-scene"] * { animation: none !important; transition: none !important; }
  .pcf-anim video { display: none; }
  .pcf-anim video + img { display: block; }
  .pcf-cine__plan, .pcf-cine__lumiere, .pcf-cine__progression i::after { animation: none !important; }
  .pcf-cine__plan { opacity: 0; transform: none; }
  .pcf-cine__plan--4 { opacity: 1; }
  .pcf-cine__progression i::after { transform: scaleX(1); }
  .pcf-cine--scroll .pcf-cine__plan { opacity:0; transform:none; transition:none; }
  .pcf-cine--scroll .pcf-cine__plan--4 { opacity:1; }
  .pcf-cine--scroll .pcf-cine__lumiere { display:none; }
  .pcf-photo-technique__base, .pcf-photo-technique__revelation, .pcf-photo-technique__grille, .pcf-photo-technique__cible, .pcf-photo-technique__balayage, .pcf-photo-technique__jalons i::after { animation: none !important; }
  .pcf-photo-technique__base { transform:none; filter:none; }
  .pcf-photo-technique__revelation { display:none; }
  .pcf-photo-technique__grille, .pcf-photo-technique__cible, .pcf-photo-technique__balayage { opacity:0; }
  .pcf-photo-technique__jalons i::after { transform:scaleX(1); }
}

/* --- Le premier écran tient dans l'écran ---------------------------------- */
/*  Les boutons doivent être visibles sans faire défiler : c'est là que se       */
/*  décide l'appel. On resserre le haut, on garde l'air en bas.                 */
.pcf-hero { padding-block: clamp(22px, 3vw, 44px) clamp(34px, 5vw, 64px); }
.pcf-hero h1 { margin: 12px 0 14px; }
.pcf-hero__chapeau { margin-bottom: 20px; }
.pcf-hero .pcf-sous-titre { margin-bottom: 12px; }
@media (min-width: 961px) {
  .pcf-hero__grille { align-items: start; }
}
@media (max-width: 960px) {
  .pcf-hero { padding-block: 18px 32px; }
}

/* --- Le prix, dit avant : trois cartes, aucune ambiguïté ----------------- */
.pcf-prix { padding: clamp(44px, 6vw, 80px) 0; background: var(--pcf-fond-2); border-block: 1px solid var(--pcf-bord); }
.pcf-prix h2 { margin: 0 0 26px; font-size: var(--pcf-titre-2); letter-spacing: -.02em; }
.pcf-prix__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.pcf-prix__carte {
  background: var(--pcf-fond); border: 1px solid var(--pcf-bord); border-radius: var(--pcf-rayon);
  padding: 24px 22px; display: flex; flex-direction: column; gap: 6px;
}
.pcf-prix__carte--fort { border-top: 3px solid var(--pcf-laiton); box-shadow: var(--pcf-ombre); }
.pcf-prix__montant {
  margin: 0; font-family: var(--pcf-police-titre); font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); line-height: 1; color: var(--pcf-azur);
  letter-spacing: -.02em;
}
.pcf-prix__carte h3 { margin: 4px 0 2px; font-size: 1.05rem; font-family: var(--pcf-police); font-weight: 650; }
.pcf-prix__carte p:last-child { margin: 0; color: var(--pcf-encre-2); font-size: .95rem; }
.pcf-prix__note { margin: 24px 0 0; font-size: .84rem; color: var(--pcf-encre-2); }

/* --- Le répertoire des constructeurs : un index, pas un tableau creux ---- */
/*  361 noms dans un tableau à quatre colonnes donnaient deux colonnes vides   */
/*  et « Nous intervenons » répété 361 fois. Un index dense se lit mieux, se   */
/*  parcourt d'un regard, et remplit la page au lieu de la vider.             */
.pcf-repertoire__intro { margin: 18px 0 14px; color: var(--pcf-encre-2); }
.pcf-repertoire__intro strong { color: var(--pcf-encre); }
.pcf-repertoire {
  list-style: none; margin: 0 0 18px; padding: 18px 20px;
  background: var(--pcf-fond); border: 1px solid var(--pcf-bord); border-radius: var(--pcf-rayon);
  columns: 220px 4; column-gap: 32px;
}
.pcf-repertoire li {
  break-inside: avoid; padding: 5px 0;
  border-bottom: 1px solid var(--pcf-fond-3);
  font-size: .94rem; line-height: 1.35;
}
.pcf-repertoire li[hidden] { display: none; }
.pcf-repertoire a { text-decoration: none; }
.pcf-repertoire a strong { color: var(--pcf-azur); font-weight: 650; }
.pcf-repertoire a:hover strong { text-decoration: underline; }
.pcf-repertoire span { color: var(--pcf-encre); }
.pcf-repertoire small { display: block; font-size: .76rem; color: var(--pcf-encre-2); letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 700px) { .pcf-repertoire { columns: 150px 2; padding: 14px 16px; } }

/* ========================================================================== */
/*  La promesse : le seul bloc qui transfère le risque de son épaule à la      */
/*  nôtre. Il vient tôt, juste après le premier écran, là où le visiteur       */
/*  hésite encore entre trois numéros.                                        */
/* ========================================================================== */
.pcf-promesse { padding: clamp(46px, 7vw, 88px) 0; background: var(--pcf-fond); }
.pcf-promesse__oeil {
  margin: 0 0 12px; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: var(--pcf-laiton);
}
.pcf-promesse h2 {
  margin: 0 0 16px; font-size: clamp(1.7rem, 1.15rem + 2.3vw, 3rem); line-height: 1.06;
  letter-spacing: -.02em;
}
.pcf-promesse h2 em { font-style: italic; color: var(--pcf-azur); }
.pcf-promesse__chapeau { margin: 0 0 38px; max-width: 68ch; color: var(--pcf-encre-2); font-size: clamp(1rem.97rem + .3vw, 1.14rem); }
.pcf-promesse__points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px 34px;
}
.pcf-promesse__points li {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 18px; border-top: 2px solid var(--pcf-encre);
}
.pcf-promesse__num {
  font-family: var(--pcf-police); font-size: .72rem; letter-spacing: .18em;
  font-weight: 800; color: var(--pcf-laiton);
}
.pcf-promesse__points strong {
  font-family: var(--pcf-police-titre); font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.72rem); line-height: 1.1; letter-spacing: -.01em;
}
.pcf-promesse__points span:last-child { color: var(--pcf-encre-2); font-size: .95rem; }
.pcf-promesse__signature {
  margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--pcf-bord);
  font-size: .9rem; color: var(--pcf-encre-2); letter-spacing: .02em;
}

/* --- Chaque marque s'ouvre sur place et dit ce qu'on en sait ------------- */
.pcf-repertoire details { border: 0; }
.pcf-repertoire summary {
  cursor: pointer; list-style: none; color: var(--pcf-encre);
  padding-right: 16px; position: relative;
}
.pcf-repertoire summary::-webkit-details-marker { display: none; }
.pcf-repertoire summary::after {
  content: "+"; position: absolute; right: 0; top: -1px;
  color: var(--pcf-azur); font-weight: 700; transition: transform .2s ease;
}
.pcf-repertoire details[open] summary::after { content: "−"; }
.pcf-repertoire summary:hover { color: var(--pcf-azur); }
.pcf-repertoire details p {
  margin: 8px 0 4px; font-size: .86rem; line-height: 1.45; color: var(--pcf-encre-2);
  padding: 10px 12px; background: var(--pcf-fond-2); border-radius: var(--pcf-rayon-s);
  border-left: 2px solid var(--pcf-laiton);
}
.pcf-repertoire details p strong { color: var(--pcf-encre); }
.pcf-repertoire details[open] { break-inside: avoid; }

/* --- Le module d'animation dans le premier écran ------------------------- */
/*  Quand l'animation et la carte de réponse cohabitent dans le premier écran,
    elles partagent la colonne de droite et s'empilent. Sans cette règle, le
    module collant passait par-dessus la carte et coupait le texte.          */
@media (min-width: 961px) {
  .pcf-hero__grille { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .pcf-hero__grille > .pcf-anim.pcf-hero__grille > .pcf-reponse { grid-column: 2; position: static; }
  .pcf-hero__grille > .pcf-anim { margin-bottom: 0; }
  .pcf-hero__grille > .pcf-reponse { margin-top: clamp(18px, 2.4vw, 28px); }
  .pcf-hero__grille > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
}
@media (max-width: 960px) {
  .pcf-hero__grille > .pcf-anim { order: -1; }
}
/*  La légende reste sous son cadre, jamais par-dessus ce qui suit. */
.pcf-anim { position: relative; }
.pcf-anim__legende { position: static; margin-bottom: 0; }

/* ========================================================================== */
/*  V27 — le telephone : un menu, et des boutons qui vivent                    */
/*                                                                            */
/*  Constat du 24/09 a 20 h 41, sur iPhone : en haut, le logo et rien d autre  */
/*  — toute la navigation de l ordinateur manquait. En bas, deux boutons       */
/*  immobiles. Corrige ici, et seulement en transform / opacity / box-shadow : */
/*  ces trois proprietes s animent sur le processeur graphique, donc sans      */
/*  saccade et sans reflow.                                                    */
/* ========================================================================== */

/* ---------- Le menu ---------------------------------------------------------
   Bati sur <details> : il s ouvre et se ferme sans une ligne de JavaScript.
   Si le script ne charge jamais, le menu fonctionne quand meme.             */
/*  Le panneau se place par rapport a l en-tete, pas par rapport au bouton : c est
    la seule facon d obtenir la meme marge a gauche et a droite sur tous les
    telephones. L en-tete est deja « sticky », donc deja positionne : il sert de
    repere sans rien ajouter.                                                   */
.pcf-menu { display: none; position: static; margin-left: 4px; }
@media (max-width: 900px) { .pcf-menu { display: block; } }

/*  Pas de trois barres : une pastille pleine qui dit le mot. A cote du bouton
    bleu du telephone, elle tient la meme hauteur et le meme galbe, et elle se
    lit sans decodage. Le mot change a l ouverture, « Menu », puis « Fermer ». */
.pcf-menu__declencheur {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 18px; border-radius: 14px;
  background: var(--pcf-encre); border: 1px solid var(--pcf-encre);
  box-shadow: 0 8px 22px rgba(7, 30, 54,.18);
  transition: background .2s ease, border-color .2s ease, transform .16s ease, box-shadow .2s ease;
}
.pcf-menu__declencheur::-webkit-details-marker { display: none; }
.pcf-menu__declencheur::marker { content: ""; }
.pcf-menu__declencheur:active { transform: scale(.96); }
.pcf-menu__declencheur:focus-visible { outline: 3px solid var(--pcf-azur-vif); outline-offset: 3px; }
.pcf-menu[open] .pcf-menu__declencheur {
  background: var(--pcf-azur); border-color: var(--pcf-azur);
  box-shadow: 0 8px 22px rgba(17, 143, 211,.32);
}

.pcf-menu__mot {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: #fbfaf7; line-height: 1; white-space: nowrap;
}
.pcf-menu__mot--fermer { display: none; }
.pcf-menu[open] .pcf-menu__mot--ouvrir { display: none; }
.pcf-menu[open] .pcf-menu__mot--fermer { display: inline; }

/*  Le panneau tombe sous l en-tete, avec la meme marge des deux cotes.        */
.pcf-menu__panneau {
  position: absolute; top: calc(100% + 10px); left: 12px; right: 12px;
  display: flex; flex-direction: column; z-index: 70;
  /*  Il s arrete au-dessus de la barre d appel : rien n est jamais coupe.
      dvh suit la barre d adresse qui se retracte sur telephone ; vh reste la
      valeur de secours pour les navigateurs qui l ignorent.                  */
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  border-radius: 22px; overflow: hidden;
  background: var(--pcf-fond); border: 1px solid var(--pcf-bord);
  box-shadow: 0 30px 80px rgba(7, 30, 54,.26);
  transform-origin: top center;
  animation: pcf-menu-entre .24s cubic-bezier(.2.8.3, 1) both;
}

/*  La liste defile ; les trois boutons restent visibles en bas, toujours.     */
.pcf-menu__liste {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 8px;
}
.pcf-menu__rubrique {
  margin: 12px 12px 6px; font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: var(--pcf-azur);
}
.pcf-menu__liste > a:first-of-type { margin-top: 0; }
.pcf-menu__liste a {
  display: flex; flex-direction: column; gap: 2px;
  position: relative; padding: 11px 38px 11px 12px;
}
/*  Un chevron discret dit que la ligne mene ailleurs.                         */
.pcf-menu__liste a::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; border-right: 2px solid var(--pcf-encre-2);
  border-bottom: 2px solid var(--pcf-encre-2); border-radius: 1px;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .18s ease, border-color .18s ease;
}
.pcf-menu__liste a:hover::after.pcf-menu__liste a:focus-visible::after {
  border-color: var(--pcf-azur); transform: translate(3px, -50%) rotate(-45deg);
}
.pcf-menu__liste a span { font-weight: 650; line-height: 1.25; }
.pcf-menu__liste a small { font-size: .8rem; color: var(--pcf-encre-2); font-weight: 500; line-height: 1.3; }

.pcf-menu__pied {
  flex: 0 0 auto; display: grid; gap: 8px; padding: 12px;
  border-top: 1px solid var(--pcf-bord); background: var(--pcf-fond-2);
}
.pcf-menu__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@keyframes pcf-menu-entre {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.pcf-menu__panneau a {
  border-radius: 12px; text-decoration: none; color: var(--pcf-encre);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.pcf-menu__liste a:hover.pcf-menu__liste a:focus-visible { background: var(--pcf-fond-2); }
.pcf-menu__liste a:active { transform: scale(.99); }

.pcf-menu__pied a {
  display: flex; align-items: center; justify-content: center;
  padding: 13px 12px; border-radius: 12px; text-decoration: none;
  font-weight: 700; font-size: .96rem; text-align: center;
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.pcf-menu__pied a:active { transform: scale(.98); }
.pcf-menu__tel {
  background: var(--pcf-azur); color: #fff !important; font-variant-numeric: tabular-nums;
}
.pcf-menu__tel:hover { background: var(--pcf-azur-vif) !important; }
.pcf-menu__devis { background: var(--pcf-encre); color: #fbfaf7 !important; }
.pcf-menu__rdv {
  border: 1px solid var(--pcf-bord); background: var(--pcf-fond); color: var(--pcf-encre) !important;
}
.pcf-menu__rdv:hover { border-color: var(--pcf-azur); color: var(--pcf-azur) !important; }

/*  Un voile derriere le panneau : un doigt pose a cote referme le menu.       */
.pcf-menu[open] .pcf-menu__declencheur::before {
  content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(7, 30, 54,.28);
  animation: pcf-voile .2s ease both;
}
@keyframes pcf-voile { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Les boutons vivent ----------------------------------------------
   Le bouton d appel bat comme un telephone qui sonne : deux pulsations
   rapprochees, puis un silence. Le bouton du devis respire plus lentement,
   pour qu il se voie sans jamais concurrencer l appel.                      */
@keyframes pcf-sonne {
  0%, 62%, 100% { box-shadow: 0 10px 28px rgba(17, 143, 211,.30), 0 0 0 0 rgba(43, 163, 232,.55); }
  68%           { box-shadow: 0 10px 28px rgba(17, 143, 211,.30), 0 0 0 12px rgba(43, 163, 232, 0); }
  74%           { box-shadow: 0 10px 28px rgba(17, 143, 211,.30), 0 0 0 0 rgba(43, 163, 232,.55); }
  80%           { box-shadow: 0 10px 28px rgba(17, 143, 211,.30), 0 0 0 12px rgba(43, 163, 232, 0); }
}
@keyframes pcf-souffle {
  0%, 100% { transform: translateY(0)     scale(1);    }
  50%      { transform: translateY(-1px)  scale(1.018); }
}
@keyframes pcf-devis-halo {
  0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(17, 143, 211,.30); border-color: var(--pcf-bord); }
  72%           { box-shadow: 0 0 0 9px rgba(17, 143, 211, 0);  border-color: var(--pcf-azur); }
}
/*  Le reflet traverse le bouton tout seul, sans attendre la souris — sur un
    telephone il n y a pas de survol, donc l effet d origine ne servait a rien. */
@keyframes pcf-reflet {
  0%, 58% { transform: translateX(-130%); }
  86%     { transform: translateX(130%);  }
  100%    { transform: translateX(130%);  }
}

.pcf-hero__actions .pcf-btn--tel.pcf-barre-mobile .pcf-btn--tel.pcf-menu__tel {
  animation: pcf-sonne 4.2s ease-out infinite;
}
.pcf-hero__actions .pcf-btn--tel::before.pcf-barre-mobile .pcf-btn--tel::before {
  animation: pcf-reflet 4.2s ease-in-out infinite;
}
.pcf-btn--devis {
  animation: pcf-devis-halo 4.2s ease-out .9s infinite, pcf-souffle 4.2s ease-in-out .9s infinite;
}
.pcf-btn--devis::before { animation: pcf-reflet 4.2s ease-in-out .9s infinite; }
/*  Le doigt pose sur le bouton arrete tout : on ne bouge pas sous la main.    */
.pcf-btn--tel:active.pcf-btn--devis:active.pcf-btn--tel:hover.pcf-btn--devis:hover { animation-play-state: paused; }

/*  Sur ordinateur, le souffle est inutile : la souris survole deja.          */
@media (min-width: 901px) { .pcf-btn--devis { animation-name: pcf-devis-halo; } }

/*  La barre du bas se pose au lieu d apparaitre d un coup.                   */
@media (max-width: 760px) {
  .pcf-barre-mobile { animation: pcf-barre-monte .45s cubic-bezier(.2.8.3, 1) .35s both; }
  .pcf-barre-mobile .pcf-btn { font-weight: 700; letter-spacing: .01em; }
  .pcf-barre-mobile .pcf-btn--devis { border-width: 1.5px; }
}
@keyframes pcf-barre-monte { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Le repos demande se respecte ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pcf-menu__panneau, .pcf-hero__actions .pcf-btn--tel, .pcf-barre-mobile .pcf-btn--tel, .pcf-menu__tel, .pcf-hero__actions .pcf-btn--tel::before, .pcf-barre-mobile .pcf-btn--tel::before, .pcf-btn--devis, .pcf-btn--devis::before, .pcf-barre-mobile { animation: none; }
  .pcf-menu__barres.pcf-menu__barres::before.pcf-menu__barres::after { transition: none; }
  .pcf-btn--devis { border-color: var(--pcf-azur); }
}
/* ========================================================================== */
/*  V28, l'en-tête reprend le style que le gérant a désigné, 24/09 à 21 h 20  */
/*                                                                            */
/*  Ses mots, devant l'écran : « le bouton un peu arrondi avec la police noire,*/
/*  c'est absolument magnifique, très classe, très pro, très parisien » pour   */
/*  Rendez-vous, et « un carré avec le logo téléphone, ça fait très cheap,    */
/*  très bas de gamme », puis « menu sur un fond gris : reprendre la même      */
/*  police que le PAULO, sur un fond blanc ».                                  */
/*                                                                            */
/*  La règle qui en sort : l'en-tête ne porte plus qu'une seule famille de     */
/*  boutons, rectangle à angles doux, encre de nuit ou papier. L'azur reste   */
/*  pour les appels à l'action dans la page, jamais dans l'en-tête.            */
/* ========================================================================== */

/*  Le téléphone : l'action forte, donc l'encre pleine. Même galbe, même       */
/*  graisse et même rayon que le bouton Rendez-vous, qui sert de référence.    */
.pcf-entete .pcf-btn--tel {
  background: var(--pcf-encre); color: #fbfaf7;
  border: 1px solid var(--pcf-encre); border-radius: var(--pcf-rayon);
  box-shadow: none; padding: 11px 18px; font-weight: 650; letter-spacing: .01em;
  animation: none;
}
.pcf-entete .pcf-btn--tel:hover.pcf-entete .pcf-btn--tel:focus-visible {
  background: var(--pcf-azur-sombre); border-color: var(--pcf-azur-sombre);
  transform: translateY(-1px); box-shadow: none;
}
/*  Le halo bleu du bouton d'appel ne vaut que dans la page, pas en en-tête.   */
.pcf-entete .pcf-btn--tel::after { content: none; }
.pcf-entete .pcf-btn--tel svg { opacity: .9; }

/*  Le menu : le papier, et la lettre du logo. Rien de gris, rien de lourd.    */
.pcf-menu__declencheur {
  background: var(--pcf-fond); border: 1px solid var(--pcf-encre);
  border-radius: var(--pcf-rayon); box-shadow: none;
  min-height: 0; padding: 11px 18px;
}
.pcf-menu__declencheur:hover { background: #fff; border-color: var(--pcf-azur-sombre); }
.pcf-menu[open] .pcf-menu__declencheur {
  background: var(--pcf-encre); border-color: var(--pcf-encre); box-shadow: none;
}
.pcf-menu__mot {
  font-family: var(--pcf-police-titre);
  font-size: .95rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--pcf-encre); line-height: 1;
  padding-left: .22em;   /* l'interlettrage laisse un vide à droite : on recentre */
}
.pcf-menu[open] .pcf-menu__mot { color: #fbfaf7; }

/*  Le bouton Rendez-vous garde son rôle, en contour : deux pleins côte à côte */
/*  se disputeraient l'œil, et c'est l'appel qui doit gagner.                  */
.pcf-nav__fort {
  background: transparent; color: var(--pcf-encre) !important;
  border: 1px solid var(--pcf-encre); border-radius: var(--pcf-rayon);
  padding: 10px 18px;
}
.pcf-nav__fort:hover {
  background: var(--pcf-encre); color: #fbfaf7 !important; transform: translateY(-1px);
}

/*  Sur téléphone, le numéro disparaissait au profit d'une icône seule : c'est */
/*  le « carré » que le gérant trouvait bas de gamme. L'icône reste, dans le   */
/*  même rectangle d'encre que sur ordinateur.                                 */
@media (max-width: 560px) {
  .pcf-entete .pcf-btn--tel { padding: 11px 14px; }
}

/* ---------- Lisibilité : le gris clair sur blanc, c'est fini -------------- */
/*  Mesuré au contraste : #5a6a7a sur #fbfaf7 donne 4,9:1, juste au-dessus du */
/*  minimum, mais illisible en plein soleil sur un téléphone. #4a5a6b monte à  */
/*  6,2:1, et le texte reste gris, pas noir.                                   */
:root { --pcf-encre-2: #4a5a6b; }

/*  La légende sous une animation passait en gris pâle sur papier : elle porte */
/*  du sens, elle se lit donc comme le reste.                                  */
.pcf-anim__legende { color: var(--pcf-encre-2); }

/* ========================================================================== */
/*  V29, le dégradé s'adoucit, et la photo répond au doigt                    */
/*                                                                            */
/*  Ses mots, 24/09 à 21 h 20 : « un dégradé blanc qui retombe vers le gris…   */
/*  garder, parce que ça fait très classe, mais diminuer un peu » et « on a    */
/*  envie de cliquer sur la photo, et là ça ne marche pas ».                   */
/* ========================================================================== */

/*  Le dégradé perd un tiers de sa force : la lumière reste, le gris part.     */
.pcf-hero {
  background:
    radial-gradient(760px 420px at 88% 8%, rgba(43, 163, 232,.10) 0%, transparent 62%),
    radial-gradient(620px 400px at 4% 92%, rgba(176, 139, 79,.06) 0%, transparent 60%),
    linear-gradient(176deg, #ffffff 0%, #fdfcfa 52%, var(--pcf-fond) 100%);
}

/*  La photo devient un bouton : elle s'agrandit au doigt comme au clic.       */
.pcf-anim__cadre { position: relative; cursor: zoom-in; }
.pcf-anim__cadre:focus-visible { outline: 3px solid var(--pcf-azur-vif); outline-offset: 4px; }
.pcf-anim__loupe {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(7, 30, 54,.72); color: #fbfaf7;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.pcf-anim__cadre:hover .pcf-anim__loupe.pcf-anim__cadre:focus-visible .pcf-anim__loupe { opacity: 1; transform: none; }
/*  Sur un écran tactile il n'y a pas de survol : la pastille reste visible.   */
@media (hover: none) {
  .pcf-anim__loupe { opacity: 1; transform: none; }
}

/*  La vue agrandie : fond de nuit, image au centre, fermeture au doigt.       */
.pcf-loupe {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 18px; border: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  background: rgba(4, 16, 29,.92);
  animation: pcf-loupe-entre .2s ease both;
}
.pcf-loupe::backdrop { background: rgba(4, 16, 29,.92); }
.pcf-loupe img.pcf-loupe video {
  max-width: min(96vw, 1100px); max-height: 82vh; width: auto; height: auto;
  border-radius: 6px; box-shadow: 0 40px 120px rgba(0, 0, 0,.6);
}
.pcf-loupe__legende {
  margin: 16px auto 0; max-width: 62ch; text-align: center;
  color: #d6e0e9; font-size: .95rem; line-height: 1.5;
}
.pcf-loupe__fermer {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255,.3); background: rgba(255, 255, 255,.08);
  color: #fff; font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
  transition: background .18s ease, transform .18s ease;
}
.pcf-loupe__fermer:hover { background: rgba(255, 255, 255,.18); transform: scale(1.06); }
@keyframes pcf-loupe-entre { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pcf-loupe { animation: none; }
  .pcf-anim__loupe { transition: none; }
}

/*  Le rebond d'iOS en fin de page tirait le fond crème sur tout l'écran et
    emportait la barre d'appel avec lui : c'est ce que le gérant a photographié
    le 24/09 à 21 h 24. Le rebond vertical se coupe, la page s'arrête net où
    elle finit. Le défilement interne du menu garde le sien, il est contenu.   */
html, body { overscroll-behavior-y: none; }

/* ========================================================================== */
/*  V30, le visuel se pilote : quatre vues, un glissement                     */
/*  Les quatre repères deviennent des boutons, deux flèches apparaissent, et   */
/*  le doigt fait défiler les plans sans toucher au défilement de la page.     */
/* ========================================================================== */

.pcf-anim__cadre { touch-action: pan-y; }
.pcf-anim__cadre:focus-visible { outline: 3px solid var(--pcf-azur-vif); outline-offset: 4px; }

/*  Les repères du bas : plus larges au doigt qu'à l'œil, comme il se doit.    */
.pcf-cine__progression { pointer-events: auto; }
.pcf-cine__progression i { position: relative; }
.pcf-cine__point {
  position: absolute; left: 0; right: 0; top: -13px; bottom: -13px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
}
.pcf-cine__point:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

/*  Les deux flèches : discrètes, et franchement cliquables.                   */
.pcf-cine__fleche {
  position: absolute; top: 50%; z-index: 8; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(255, 255, 255,.28); background: rgba(7, 24, 39,.52);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.pcf-cine__fleche--avant { left: 12px; }
.pcf-cine__fleche--apres { right: 12px; }
.pcf-cine__fleche span {
  width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.pcf-cine__fleche--avant span { transform: rotate(-135deg); margin-left: 3px; }
.pcf-cine__fleche--apres span { transform: rotate(45deg); margin-right: 3px; }
.pcf-anim__cadre:hover .pcf-cine__fleche.pcf-anim__cadre:focus-within .pcf-cine__fleche { opacity: 1; }
.pcf-cine__fleche:hover { background: rgba(7, 24, 39,.78); transform: translateY(-50%) scale(1.06); }
.pcf-cine__fleche:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/*  Sur un écran tactile il n'y a pas de survol : les flèches restent visibles,
    et les repères grossissent pour se voir de loin.                          */
@media (hover: none) {
  .pcf-cine__fleche { opacity: .85; }
  .pcf-cine__progression { left: 14px; right: 14px; bottom: 14px; gap: 6px; }
  .pcf-cine__progression i { height: 3px; border-radius: 2px; }
}

/*  Dès que la main pilote, la vue change franchement, sans traîner.           */
.pcf-cine--manuel .pcf-cine__plan { transition: opacity .32s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .pcf-cine--manuel .pcf-cine__plan { transition: none; }
  .pcf-cine__fleche { transition: none; }
}


/* ========================================================================== */
/*  V31, le Studio devient un studio                                         */
/*                                                                            */
/*  Constat du gérant, 25/09/2026 : « toujours le même rendu esthétique moche,*/
/*  il faut que ça prenne beaucoup plus de place, qu'on ait l'impression      */
/*  d'être dans un studio ». Le défaut était juste : une boîte blanche posée  */
/*  au milieu d'une page blanche ne fait pas un outil, elle fait un           */
/*  formulaire. Ce qui crée un studio, c'est une console, un cadre qui se    */
/*  distingue de la page, une barre d'état qui dit qu'on est en ligne, et de  */
/*  la hauteur. La page reste claire : seule la barre porte l'encre de nuit.  */
/* ========================================================================== */

.pcf-studio-scene {
  background:
    radial-gradient(1100px 560px at 80% -10%, rgba(43, 163, 232,.16) 0%, transparent 60%),
    radial-gradient(700px 400px at 0% 30%, rgba(176, 139, 79,.07) 0%, transparent 60%),
    linear-gradient(178deg, #ffffff 0%, #fdfcfa 45%, var(--pcf-fond) 100%);
  padding-block: clamp(26px, 3.5vw, 48px) clamp(44px, 6vw, 84px);
}

/* ---------- Le titre : il annonce la promesse, pas la page ---------------- */
.pcf-studio-tete { max-width: 800px; margin-bottom: clamp(22px, 3vw, 32px); }
.pcf-studio-tete h1 {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); line-height: 1.04;
  letter-spacing: -.025em;
}
.pcf-studio-tete h1 em {
  font-style: italic; color: var(--pcf-azur);
}
.pcf-studio-tete p {
  margin: 0; font-size: clamp(1.02rem.98rem + .35vw, 1.2rem);
  line-height: 1.58; color: var(--pcf-encre-2); max-width: 66ch;
}
.pcf-studio-tete strong { color: var(--pcf-encre); }

/* ---------- La console ---------------------------------------------------- */
.pcf-console {
  display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden;
  background: #fff;
  border: 1px solid var(--pcf-bord);
  box-shadow: 0 2px 6px rgba(11, 32, 54,.05), 0 34px 80px rgba(11, 32, 54,.16);
}

/*  La barre d'état : c'est elle qui transforme une boîte en appareil.        */
.pcf-console__barre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px clamp(16px, 2.2vw, 24px);
  background: var(--pcf-nuit); color: #dfe8f0;
  font-size: .8rem; letter-spacing: .04em;
}
.pcf-console__vivant { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: #fff; }
.pcf-console__vivant i {
  width: 8px; height: 8px; border-radius: 50%; background: #3fd07a;
  box-shadow: 0 0 0 0 rgba(63, 208, 122,.65);
  animation: pcf-vivant 2.6s ease-out infinite;
}
@keyframes pcf-vivant {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(63, 208, 122,.6); }
  35%           { box-shadow: 0 0 0 7px rgba(63, 208, 122, 0); }
}
.pcf-console__titre {
  font-family: var(--pcf-police-titre); font-size: .98rem; letter-spacing: .06em;
  color: #fff; margin-inline: auto;
}
.pcf-console__compte { color: #8ea8bd; font-variant-numeric: tabular-nums; }

/*  Le fil : de la hauteur. Un studio se voit avant de se lire.               */
.pcf-console__fil {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 3vw, 32px);
  min-height: min(52vh, 460px); max-height: min(64vh, 620px);
  overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(520px 260px at 90% 0%, rgba(43, 163, 232,.05) 0%, transparent 70%),
    var(--pcf-fond);
}

.pcf-bulle {
  max-width: 82%; padding: 17px 21px; border-radius: 18px;
  animation: pcf-bulle-pose .28s cubic-bezier(.2.8.3, 1) both;
}
@keyframes pcf-bulle-pose {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.pcf-bulle--studio {
  align-self: flex-start; background: #fff;
  border: 1px solid var(--pcf-bord); border-bottom-left-radius: 6px;
  box-shadow: 0 2px 10px rgba(11, 32, 54,.05);
}
.pcf-bulle--visiteur {
  align-self: flex-end; background: var(--pcf-azur); color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 18px rgba(17, 143, 211,.26);
}
.pcf-bulle--garde {
  border-left: 3px solid var(--pcf-laiton);
  background: linear-gradient(180deg, #fffdf8, #fff);
}
.pcf-bulle--conseils { max-width: 94%; }

.pcf-bulle p { margin: 0 0 10px; line-height: 1.6; font-size: 1.02rem; }
.pcf-bulle p:last-child { margin-bottom: 0; }
.pcf-bulle h3 {
  margin: 0 0 9px; font-family: var(--pcf-police-titre);
  font-size: 1.36rem; line-height: 1.18; letter-spacing: -.012em; color: var(--pcf-encre);
}
.pcf-bulle__note {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pcf-bord);
  font-size: .87rem; color: var(--pcf-encre-2);
}
.pcf-bulle__action { margin-top: 15px; }
.pcf-bulle__action .pcf-btn { animation: none; padding: 12px 20px; font-size: .96rem; }
.pcf-bulle__action .pcf-btn::after { content: none; }

/*  Le second bouton : le devis gratuit qui suit toute reponse de prix.
    Il reste en contour pour que le geste principal garde la priorite de
    l'oeil, deux boutons pleins cote a cote n'en font aucun.                */
.pcf-bulle__action--second { margin-top: 9px; }
.pcf-bulle__action--second .pcf-btn { border-width: 1.5px; }

/*  « Aller plus loin sur ce sujet » : la recherche interne.
    Pose le 25/09/2026 a la place d'un renvoi vers un moteur de recherche
    exterieur, qui aurait envoye le visiteur sur une page de concurrents.     */
.pcf-bulle__aussi {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--pcf-bord);
}
.pcf-bulle__aussi-oeil {
  margin: 0 0 9px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--pcf-encre-2);
}
.pcf-bulle__aussi ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pcf-bulle__aussi li { position: relative; padding-left: 17px; }
.pcf-bulle__aussi li::before {
  content: "›"; position: absolute; left: 3px; top: -1px;
  color: var(--pcf-azur); font-weight: 700;
}
.pcf-bulle__aussi a {
  color: var(--pcf-azur-sombre); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid transparent; transition: border-color .16s ease, color .16s ease;
}
.pcf-bulle__aussi a:hover { color: var(--pcf-azur); border-bottom-color: currentColor; }
.pcf-bulle__photo {
  display: block; max-width: 240px; width: 100%; height: auto;
  border-radius: 12px; margin-bottom: 10px;
}
.pcf-conseil { padding: 14px 0; border-top: 1px solid var(--pcf-bord); }
.pcf-conseil:first-child { border-top: 0; padding-top: 0; }
.pcf-conseil h3 { font-size: 1.12rem; }

/*  Les choix : de vraies pastilles, pas des liens maigres.                   */
.pcf-chat__choix {
  display: flex; flex-wrap: wrap; gap: 9px; align-self: flex-start; max-width: 94%;
  animation: pcf-bulle-pose .28s cubic-bezier(.2.8.3, 1) .07s both;
}
.pcf-chat__choix-bouton {
  font: inherit; font-size: .95rem; font-weight: 650; cursor: pointer;
  padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid var(--pcf-azur); background: #fff; color: var(--pcf-azur-sombre);
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pcf-chat__choix-bouton:hover {
  background: var(--pcf-azur); color: #fff;
  box-shadow: 0 6px 18px rgba(17, 143, 211,.28);
}
.pcf-chat__choix-bouton:active { transform: scale(.97); }

/* ---------- Le pied : la saisie, en grand -------------------------------- */
.pcf-console__pied {
  border-top: 1px solid var(--pcf-bord); background: #fff;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.2vw, 24px) clamp(12px, 1.6vw, 16px);
}
.pcf-chat__label { position: absolute; left: -9999px; }
.pcf-console__ligne { display: flex; align-items: stretch; gap: 10px; }

/*  Le bouton photo : agrandi le 25/09/2026, le gerant l'ayant trouve trop
    petit a l'ecran. C'est la porte d'entree de la fonction la plus utile du
    Studio, un visiteur qui ne la voit pas ne joint jamais de photo, et le
    diagnostic perd son meilleur element.                                    */
.pcf-console__photo {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; cursor: pointer; flex: 0 0 auto;
  min-width: 108px; padding: 0 22px; border-radius: 14px;
  border: 2px dashed var(--pcf-azur); background: color-mix(in srgb, var(--pcf-azur) 6%, #fff);
  color: var(--pcf-azur); font-size: .82rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.pcf-console__photo svg { width: 30px; height: 30px; }
.pcf-console__photo:hover {
  border-color: var(--pcf-azur-vif); color: var(--pcf-azur-vif);
  background: color-mix(in srgb, var(--pcf-azur) 12%, #fff); transform: translateY(-1px);
}
.pcf-console__photo:focus-within { outline: 3px solid var(--pcf-azur-vif); outline-offset: 2px; }

.pcf-console__ligne input[type="text"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1.08rem;
  padding: 17px 20px; border-radius: 14px;
  border: 1.5px solid var(--pcf-bord); background: var(--pcf-fond); color: var(--pcf-encre);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.pcf-console__ligne input[type="text"]::placeholder { color: var(--pcf-encre-2); opacity: .75; }
.pcf-console__ligne input[type="text"]:focus {
  outline: none; background: #fff; border-color: var(--pcf-azur);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pcf-azur) 14%, transparent);
}

.pcf-console__envoi {
  flex: 0 0 auto; width: 58px; border-radius: 14px; cursor: pointer; border: 0;
  background: var(--pcf-azur); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(17, 143, 211,.3);
  transition: background .16s ease, transform .16s ease;
}
.pcf-console__envoi:hover { background: var(--pcf-azur-vif); }
.pcf-console__envoi:active { transform: scale(.96); }
.pcf-console__envoi:focus-visible { outline: 3px solid var(--pcf-azur-vif); outline-offset: 3px; }

/*  L'aperçu de la photo, avec la promesse à côté : elle se lit au moment où
    la question se pose, pas en bas de page.                                 */
.pcf-console__apercu {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 13px; padding: 10px 16px 10px 10px;
  border-radius: 14px; background: var(--pcf-fond-2); border: 1px solid var(--pcf-bord);
}
.pcf-console__apercu img {
  display: block; height: 62px; width: 62px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--pcf-bord);
}
.pcf-console__apercu span { font-size: .84rem; color: var(--pcf-encre-2); font-weight: 600; }
.pcf-console__retirer {
  position: absolute; top: -9px; left: 52px;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid var(--pcf-bord); background: #fff; color: var(--pcf-encre);
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 3px 9px rgba(11, 32, 54,.2);
}
.pcf-console__retirer:hover { background: var(--pcf-urgence); color: #fff; border-color: var(--pcf-urgence); }

.pcf-console__promesse {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 13px 0 0; font-size: .82rem; line-height: 1.52; color: var(--pcf-encre-2);
}
.pcf-console__promesse svg { color: var(--pcf-ok); flex: 0 0 auto; margin-top: 2px; }
.pcf-console__promesse strong { color: var(--pcf-encre); font-weight: 650; }

/* ---------- Les exemples, sous la console -------------------------------- */
.pcf-studio-exemples { margin-top: clamp(22px, 3vw, 32px); }
.pcf-studio-exemples__oeil {
  margin: 0 0 12px; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--pcf-encre-2);
}
.pcf-studio-exemples__liste { display: flex; flex-wrap: wrap; gap: 10px; }
.pcf-studio-exemples__liste button {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--pcf-bord); background: #fff; color: var(--pcf-encre);
  transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pcf-studio-exemples__liste button:hover {
  border-color: var(--pcf-azur); color: var(--pcf-azur-sombre);
  box-shadow: 0 6px 16px rgba(11, 32, 54,.08);
}
.pcf-studio-exemples__liste button:active { transform: scale(.97); }

/* ---------- Téléphone ----------------------------------------------------- */
@media (max-width: 720px) {
  .pcf-console__barre { font-size: .72rem; gap: 10px; padding: 11px 14px; }
  .pcf-console__titre { display: none; }
  .pcf-console__compte { margin-inline-start: auto; }
  /*  Sur telephone, la conversation EST la page : on lui donne la hauteur.
      A 58vh le visiteur lisait une reponse de quatre cents pixels par une
      fente de quatre cent soixante-dix, d'ou l'impression de se perdre des la
      premiere reponse. Releve avec le gerant le 25/09/2026.                 */
  .pcf-console__fil { min-height: 56vh; max-height: 66vh; padding: 16px; }
  .pcf-console__promesse { font-size: .76rem; line-height: 1.45; margin-top: 10px; }
  .pcf-bulle { max-width: 93%; padding: 15px 17px; }
  .pcf-bulle h3 { font-size: 1.2rem; }
  .pcf-console__ligne { flex-wrap: wrap; }
  .pcf-console__ligne input[type="text"] { flex: 1 1 100%; order: 0; font-size: 1.02rem; padding: 15px 17px; }
  .pcf-console__photo { order: 1; flex: 1 1 auto; flex-direction: row; gap: 10px; padding: 16px; min-width: 0; }
  .pcf-console__photo svg { width: 26px; height: 26px; }
  .pcf-console__envoi { order: 2; flex: 0 0 82px; width: auto; padding: 16px; }
  .pcf-studio-exemples__liste button { font-size: .9rem; padding: 10px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcf-bulle.pcf-chat__choix { animation: none; }
  .pcf-console__vivant i { animation: none; }
  .pcf-chat__choix-bouton, .pcf-console__photo, .pcf-console__ligne input, .pcf-console__envoi, .pcf-studio-exemples__liste button { transition: none; }
}

/* ---------- Ce que le Studio sait ---------------------------------------- */
.pcf-studio-savoir { max-width: 980px; margin-top: clamp(38px, 5vw, 60px); }
.pcf-studio-savoir h2 {
  font-family: var(--pcf-police-titre);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.16;
  letter-spacing: -.015em; margin: 0 0 22px;
}
.pcf-studio-savoir__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 34px;
}
.pcf-studio-savoir h3 { margin: 0 0 7px; font-size: 1.06rem; letter-spacing: -.005em; }
.pcf-studio-savoir p { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--pcf-encre-2); }
.pcf-studio-savoir p strong { color: var(--pcf-encre); }
.pcf-studio-savoir .pcf-intervient { margin-top: 26px; font-size: .95rem; }

/*  [hidden] doit gagner sur display:flex, sinon la vignette vide reste a
    l ecran avec son image cassee. Defaut vu au controle du 25/09/2026.      */
[hidden] { display: none !important; }

/* ---------- V32 · la deuxieme ligne du Studio ---------------------------- */
/*  Le temps d'attente d'une reponse reflechie. Trois points qui respirent
    valent mieux qu'un texte fige : ils disent que quelque chose travaille,
    sans promettre un delai qu'on ne tient pas.                              */
.pcf-bulle__attente {
  display: flex; align-items: center; gap: 10px;
  margin: 0; color: var(--pcf-encre-2); font-style: italic;
}
.pcf-bulle__attente::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pcf-azur); animation: pcf-reflechit 1.1s ease-in-out infinite;
}
@keyframes pcf-reflechit {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .pcf-bulle__attente::before { animation: none; opacity: .8; }
}

/* ---------- V33 · le repertoire des constructeurs ------------------------ */
/*  Une maison sans fiche verifiee ne porte plus de volet : elle figure au
    repertoire, en clair. Un volet qui s'ouvre sur une phrase passe-partout
    dessert le visiteur et fait lire du contenu duplique a Google.
    Defaut releve par le gerant le 25/09/2026.                               */
.pcf-marque-simple {
  padding: 11px 2px; border-bottom: 1px solid var(--pcf-bord);
  color: var(--pcf-encre); font-weight: 600;
}
.pcf-marque-simple small {
  display: block; margin-top: 2px;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--pcf-encre-2);
}