/* ==========================================================================
   JustiComm · page « Conseils en propriété industrielle » (/professions/conseils-en-propriete-industrielle/)
   v1, 25/10/2026 : texte v4 validé par Raoudha. Même esprit que les pages déjà en ligne : bandeau photo
   bord à bord avec un téléphone animé, deux clients en photo, vrais écrans (Google, Maps, Aperçu IA),
   courrier de prospection annoté, extrait de rapport d'audit, Côte d'Azur de nuit (Nice et Sophia Antipolis).
   Le cabinet de démonstration « Velorne » a sa propre identité (indigo, bleu, brume, Public Sans),
   jamais les couleurs ni les polices de JustiComm. Animations courtes, jouées une fois ; état final fixe
   avec « moins d'animations » ou sans JavaScript.
   Préfixe : cpi-
   ========================================================================== */

@font-face { font-family: "Public Sans"; src: url("../polices/public-sans-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

.cpi {
  --vel-indigo: #24346B;   /* cabinet de démonstration : indigo */
  --vel-bleu: #2E62A8;     /* bleu, 6:1 sur blanc */
  --vel-brume: #EEF2F8;
  --vel-gris: #586379;     /* 6:1 sur blanc */
  --vel-ligne: #D6DDE8;
  --f-vel: "Public Sans", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
.cpi.section, .cpi-bande { padding-block: clamp(3rem, 1.8rem + 3.6vw, 5rem); }
.cpi .titre-section { max-width: none; font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.5rem); line-height: 1.1; color: var(--titre); text-wrap: pretty; }
.cpi h3, .cpi h4 { text-wrap: pretty; }
.cpi-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .cpi-or, .surface-nuit .cpi-or { color: var(--or-clair); }
.cpi-tete { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.cpi-tete .surtitre { margin-bottom: var(--e-4); }
.cpi-chapo { margin-top: var(--e-4); max-width: none; font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.45 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.surface-nuit .cpi-chapo, .surface-sombre .cpi-chapo { color: var(--creme); }
.cpi-texte { margin-top: var(--e-4); max-width: none; font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.surface-nuit .cpi-texte, .surface-sombre .cpi-texte { color: var(--creme-doux); }
.cpi-h3 { margin: 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem) / 1.2 var(--f-titre); color: var(--titre); }
.cpi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.cpi-actions--centre { justify-content: center; }
.cpi .btn-plaque.btn--grand { max-width: 100%; }

.cpi .lien-suite.cpi-lien { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--e-4); padding: 0; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; color: var(--petrole); text-decoration: underline; text-decoration-color: var(--or-400); text-underline-offset: 5px; }
.cpi .lien-suite.cpi-lien:hover { color: var(--or-texte); }
.surface-nuit .lien-suite.cpi-lien, .surface-sombre .lien-suite.cpi-lien { color: var(--or-clair); text-decoration-color: rgba(224, 189, 142, 0.5); }
.surface-nuit .lien-suite.cpi-lien:hover, .surface-sombre .lien-suite.cpi-lien:hover { color: var(--creme); }
.cpi-liens { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 2rem; margin-top: var(--e-5); }
.cpi-liens .cpi-lien { margin-top: 0; }
.cpi-liens__question { flex-basis: 100%; font-size: 1.0625rem; color: var(--texte); }

/* Encadré fort entre deux filets, centré, pleine largeur (comme Réseaux sociaux) */
.cpi-exergue { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-block: var(--e-5); border-block: 1px solid var(--filet-couleur); text-align: center; font: 500 clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem) / 1.35 var(--f-titre); color: var(--titre); text-wrap: pretty; }

@keyframes cpi-monte { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes cpi-disparait { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes cpi-glisse { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
@keyframes cpi-pastille { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes cpi-frappe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cpi-anneau { 0% { box-shadow: 0 0 0 2px var(--or), 0 0 0 0 rgba(224, 189, 142, 0.7); } 100% { box-shadow: 0 0 0 2px var(--or), 0 0 0 16px rgba(224, 189, 142, 0); } }
@keyframes cpi-deroule { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cpi-tombe { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
@keyframes cpi-glisse-droite { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes cpi-surligne { from { background-size: 0 100%; } to { background-size: 100% 100%; } }

/* --------------------------------------------------------------------------
   1. Premier écran : bandeau photo bord à bord, téléphone animé posé dessus
   -------------------------------------------------------------------------- */
body:has(.cpi-haut) .entete__fond { opacity: 1; }
.cpi-haut { position: relative; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
.cpi-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding-block: 0.9rem; font-size: 0.875rem; color: var(--taupe); }
.cpi-ariane a { color: inherit; text-underline-offset: 3px; }
.cpi-ariane [aria-current] { color: var(--encre); }

.cpi-haut__bandeau { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1920 / 860; max-height: 46rem; background: linear-gradient(135deg, var(--petrole), var(--petrole-900)); }
.cpi-haut__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; }
.cpi-haut__bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 48%, rgba(2, 24, 24, 0.35) 72%, rgba(2, 24, 24, 0.6) 100%); pointer-events: none; }
.cpi-haut__tel { position: absolute; z-index: 1; top: 50%; right: max(var(--marge), calc((100vw - var(--conteneur)) / 2)); translate: 0 -50%; }

@media (max-width: 47.99em) {
  .cpi-haut__bandeau { aspect-ratio: 4 / 5; max-height: none; }
  .cpi-haut__photo { object-position: 18% 35%; }
  .cpi-haut__bandeau::after { background: linear-gradient(180deg, transparent 50%, rgba(2, 24, 24, 0.5) 100%); }
  .cpi-haut__tel { top: auto; bottom: 1rem; right: 12px; translate: none; scale: 0.52; transform-origin: bottom right; }
}
@media (min-width: 48em) and (max-width: 63.99em) { .cpi-haut__tel { scale: 0.64; } }
@media (min-width: 64em) and (max-width: 79.99em) { .cpi-haut__tel { scale: 0.85; } }

/* Téléphone animé : recherche → page du cabinet → demande envoyée */
.cpi-tel { width: 17rem; padding: 10px; border-radius: 34px; background: linear-gradient(160deg, #2A3B3B, #0E1A1A); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cpi-tel__ecran { position: relative; height: 30rem; overflow: hidden; border-radius: 26px; background: #fff; font-family: var(--f-vel); color: #1F2A3D; }
.cpi-tel__encoche { position: absolute; top: 8px; left: 50%; width: 76px; height: 20px; margin: 0 0 0 -38px; border-radius: 12px; background: #0E1A1A; z-index: 3; }
.cpi-tel__etape { position: absolute; inset: 0; padding: 40px 16px 16px; }
.cpi-tel__etape p { margin: 0; }
.cpi-tel__barre { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #DADCE0; border-radius: 999px; font-size: 0.8125rem; box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1); }
.cpi-tel__barre svg { flex: none; width: 14px; height: 14px; fill: none; stroke: #5F6368; stroke-width: 2.4; stroke-linecap: round; }
.cpi-tape { white-space: nowrap; overflow: hidden; }
.cpi-tel__resultat { margin-top: 16px; padding: 12px; border: 1.5px solid var(--or); border-radius: 12px; box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.2); }
.cpi-tel__site { display: flex; align-items: center; gap: 7px; font-size: 0.6875rem; color: #4D5156; }
.cpi-tel__favicon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--vel-indigo); font-size: 0.625rem; font-weight: 700; color: #fff; }
.cpi-tel__lien { margin-top: 6px !important; font-size: 0.9375rem; line-height: 1.3; font-weight: 500; color: #1A0DAB; }
.cpi-tel__extrait { margin-top: 4px !important; font-size: 0.75rem; line-height: 1.45; color: #4D5156; }
.cpi-tel__gris { display: grid; gap: 6px; margin-top: 16px; }
.cpi-tel__gris i { display: block; height: 7px; border-radius: 4px; background: #ECEDEF; }
.cpi-tel__gris i:nth-child(1) { width: 40%; } .cpi-tel__gris i:nth-child(2) { width: 85%; } .cpi-tel__gris i:nth-child(3) { width: 65%; }
.cpi-tel__etape--page { background: linear-gradient(180deg, var(--vel-brume), #fff 55%); }
.cpi-tel__marque { display: flex; align-items: center; gap: 8px; margin: 0 -16px !important; padding: 0 16px 10px; border-bottom: 1px solid var(--vel-ligne); font-size: 0.8125rem; font-weight: 700; color: var(--vel-indigo); }
.cpi-tel__marque span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vel-indigo); font-size: 0.75rem; color: #fff; }
.cpi-tel__titre { margin-top: 14px !important; font-size: 1.1875rem; line-height: 1.2; font-weight: 700; color: var(--vel-indigo); }
.cpi-tel__lignes { display: grid; gap: 6px; margin-top: 10px !important; }
.cpi-tel__lignes i { display: block; height: 6px; border-radius: 3px; background: #DCE2EC; }
.cpi-tel__lignes i:nth-child(2) { width: 88%; } .cpi-tel__lignes i:nth-child(3) { width: 60%; }
.cpi-tel__champ { display: grid; gap: 2px; margin-top: 10px !important; padding: 7px 11px; border: 1px solid #C9D2E0; border-radius: 6px; background: #fff; font-size: 0.75rem; color: var(--vel-gris); }
.cpi-tel__champ b { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vel-bleu); }
.cpi-tel__note { margin-top: 10px !important; padding: 7px 9px; border-left: 3px solid var(--vel-bleu); border-radius: 4px; background: var(--vel-brume); font-size: 0.6875rem; line-height: 1.4; color: var(--vel-indigo); }
.cpi-tel__bouton { margin-top: 12px !important; padding: 11px; border-radius: 6px; background: var(--vel-bleu); text-align: center; font-size: 0.8125rem; font-weight: 600; color: #fff; }
.cpi-tel__etape--envoi { inset: auto 12px 14px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; border-radius: 12px; background: var(--vel-indigo); color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); }
.cpi-tel__coche { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.cpi-tel__coche svg { width: 18px; height: 18px; fill: none; stroke: var(--vel-indigo); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cpi-tel__merci { font-size: 0.875rem; font-weight: 600; }
.cpi-tel__suite { font-size: 0.75rem; opacity: 0.85; }

/* État par défaut (sans JavaScript, moins d'animations, fin d'animation) : la page et l'envoi */
.cpi-tel__etape--recherche { visibility: hidden; }
/* Avec JavaScript : on part de la recherche, puis l'animation se joue une fois (4 s) */
.js .cpi-haut__tel:not(.est-fini) .cpi-tel__etape--recherche { visibility: visible; }
.js .cpi-haut__tel:not(.est-fini) .cpi-tel__etape--page,
.js .cpi-haut__tel:not(.est-fini) .cpi-tel__etape--envoi { opacity: 0; }
.js .cpi-haut__tel.est-anime .cpi-tape { animation: cpi-frappe 1.1s steps(30) 0.3s both; }
.js .cpi-haut__tel.est-anime .cpi-tel__resultat { animation: cpi-monte 0.5s var(--ease-sortie) 1.3s both; }
.js .cpi-haut__tel.est-anime .cpi-tel__etape--recherche { animation: cpi-disparait 0.3s ease 2.4s both; }
.js .cpi-haut__tel.est-anime .cpi-tel__etape--page { animation: cpi-glisse 0.6s var(--ease-sortie) 2.3s both; }
.js .cpi-haut__tel.est-anime .cpi-tel__etape--envoi { animation: cpi-pastille 0.45s var(--ease-sortie) 3.4s both; }

.cpi-haut__texte { margin-top: clamp(2rem, 4vw, 3rem); }
.cpi-haut__sur { margin-bottom: var(--e-4); }
.cpi-haut__titre { margin: 0; font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.06 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
@media (min-width: 30em) { .cpi-haut__titre .cpi-or { white-space: nowrap; } }
.cpi-haut__accroche { margin-top: var(--e-4); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.38 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.cpi-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.cpi-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--encre); }
.cpi-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.cpi-engagements li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or); }
@media (max-width: 29.99em) { .cpi-haut .btn-plaque.btn--grand { width: 100%; white-space: normal; text-align: center; line-height: 1.35; } }

/* --------------------------------------------------------------------------
   2. Vos enjeux : deux clients en photo, leurs quatre questions
   -------------------------------------------------------------------------- */
.cpi-enjeux__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60em) { .cpi-enjeux__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.cpi-portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); margin: 0; padding: 0; list-style: none; }
.cpi-portrait { display: flex; flex-direction: column; }
.cpi-portrait:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3rem); }
.cpi-portrait__photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: linear-gradient(160deg, var(--petrole-600), var(--petrole)); box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(0, 0, 0, 0.6); }
.cpi-portrait__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease-sortie); }
.cpi-portrait:hover .cpi-portrait__photo img { scale: 1.04; }
.cpi-portrait__recherche { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.96); font: 400 0.8125rem / 1.3 var(--f-vel); color: #1F2A3D; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
.cpi-portrait__recherche svg { flex: none; width: 14px; height: 14px; fill: none; stroke: #5F6368; stroke-width: 2.4; stroke-linecap: round; }
.cpi-portrait__qui { margin: var(--e-4) 0 0; padding-top: var(--e-3); border-top: 1px solid rgba(224, 189, 142, 0.45); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-clair); }
.cpi-portrait__quoi { margin: var(--e-2) 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--creme-doux); }
.cpi-portraits.est-visible .cpi-portrait { animation: cpi-monte 0.8s var(--ease-sortie) both; }
.cpi-portraits.est-visible .cpi-portrait:nth-child(2) { animation-delay: 0.15s; }
@media (max-width: 29.99em) {
  .cpi-portrait__recherche { left: 6px; right: 6px; bottom: 6px; padding: 6px 9px; font-size: 0.6875rem; }
  .cpi-portrait__quoi { font-size: 1rem; }
}

.cpi-enjeux__intro { margin: 0 0 var(--e-4); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.35 var(--f-titre); color: var(--creme); }
.cpi-questions { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; counter-reset: cpi-q; }
.cpi-questions li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: start; padding: var(--e-4) var(--e-5); border-left: 2px solid var(--or-400); border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, 0.05); }
.cpi-questions__picto { width: 30px; height: 30px; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cpi-questions p { margin: 0; font-size: var(--t-corps); line-height: 1.5; color: var(--creme); }
.cpi-enjeux__questions.est-visible .cpi-questions li { animation: cpi-monte 0.6s var(--ease-sortie) both; }
.cpi-enjeux__questions.est-visible .cpi-questions li:nth-child(2) { animation-delay: 0.1s; }
.cpi-enjeux__questions.est-visible .cpi-questions li:nth-child(3) { animation-delay: 0.2s; }
.cpi-enjeux__questions.est-visible .cpi-questions li:nth-child(4) { animation-delay: 0.3s; }
.cpi-enjeux__texte { margin-top: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   3. Nos services : quatre bandes
   -------------------------------------------------------------------------- */

/* 3.1 Site : texte et maquette annotée */
.cpi-site__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 72em) { .cpi-site__grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.cpi-exemple { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: 6px; background: var(--creme); }
.cpi-navig { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 28px 50px -26px rgba(2, 24, 24, 0.5); }
.cpi-navig__barre { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: #E7EAF0; }
.cpi-navig__points { display: inline-flex; gap: 5px; }
.cpi-navig__points i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.cpi-navig__points i:nth-child(2) { background: #FEBC2E; } .cpi-navig__points i:nth-child(3) { background: #28C840; }
.cpi-navig__adresse { flex: 1; min-width: 0; overflow: hidden; padding: 4px 10px; border-radius: 6px; background: #fff; font-size: 0.75rem; white-space: nowrap; text-overflow: ellipsis; color: #555; }
.cpi-maquette { font-family: var(--f-vel); color: #1F2A3D; }
.cpi-maquette p { margin: 0; }
.cpi-maquette__entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--vel-ligne); }
.cpi-maquette__logo { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; font-size: 0.875rem; font-weight: 700; color: var(--vel-indigo); }
.cpi-maquette__logo b { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vel-indigo); font-size: 0.9375rem; color: #fff; }
.cpi-maquette__logo small { font-size: 0.6875rem; font-weight: 400; color: var(--vel-gris); }
.cpi-maquette__menu { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; font-size: 0.75rem; color: var(--vel-gris); }
.cpi-maquette__menu span:first-child { color: var(--vel-bleu); font-weight: 600; box-shadow: inset 0 -2px 0 var(--vel-bleu); }
@media (max-width: 39.99em) { .cpi-maquette__menu { display: none; } }
.cpi-maquette__corps { display: grid; gap: 40px 18px; padding: 36px 18px 22px; background: linear-gradient(180deg, var(--vel-brume), #fff 70%); }
@media (min-width: 40em) { .cpi-maquette__corps { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } .cpi-maquette__formulaire { grid-column: 1 / -1; } }
.cpi-maquette__principal, .cpi-maquette__conseil, .cpi-maquette__formulaire { position: relative; }
.cpi-maquette__fil { font-size: 0.6875rem; color: var(--vel-gris); }
.cpi-maquette__titre { margin-top: 6px !important; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.22; font-weight: 700; color: var(--vel-indigo); }
.cpi-maquette__texte { margin-top: 10px !important; font-size: 0.875rem; line-height: 1.55; color: #3A4660; }
.cpi-maquette__etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.cpi-maquette__etiquettes span { padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--vel-ligne); font-size: 0.6875rem; color: var(--vel-indigo); }
.cpi-maquette__etiquettes span:last-child { background: var(--vel-bleu); box-shadow: none; color: #fff; }
.cpi-maquette__conseil { padding: 14px; border: 1px solid var(--vel-ligne); border-top: 3px solid var(--vel-bleu); border-radius: 6px; background: #fff; }
.cpi-maquette__personne { display: flex; align-items: center; gap: 10px; }
.cpi-maquette__avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, var(--vel-bleu), var(--vel-indigo)); font-size: 0.75rem; font-weight: 700; color: #fff; }
.cpi-maquette__personne span:last-child { display: grid; line-height: 1.3; }
.cpi-maquette__personne b { font-size: 0.875rem; color: var(--vel-indigo); }
.cpi-maquette__personne small { font-size: 0.6875rem; color: var(--vel-gris); }
.cpi-maquette__parcours { margin-top: 10px !important; font-size: 0.8125rem; line-height: 1.5; color: #3A4660; }
.cpi-maquette__formulaire { display: grid; gap: 8px; padding: 14px; border-radius: 8px; background: var(--vel-indigo); color: #fff; }
@media (min-width: 40em) { .cpi-maquette__formulaire { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; } .cpi-maquette__avis { grid-column: 1 / -1; } }
.cpi-maquette__form-titre { font-size: 0.9375rem; font-weight: 700; }
.cpi-maquette__champs { display: flex; flex-wrap: wrap; gap: 6px; }
.cpi-maquette__champs span { flex: 1 1 6rem; padding: 7px 10px; border-radius: 5px; background: #fff; font-size: 0.75rem; color: var(--vel-gris); }
.cpi-maquette__champs span:first-child { color: var(--vel-indigo); font-weight: 600; }
.cpi-maquette__avis { padding: 7px 10px; border-left: 3px solid #9DB9E2; border-radius: 4px; background: rgba(255, 255, 255, 0.1); font-size: 0.75rem; line-height: 1.4; }
.cpi-repere { position: absolute; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--petrole); box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.55); font: 600 0.8125rem / 1 var(--f-texte); color: var(--or); }
.cpi-repere--1 { top: -32px; left: 0; }
.cpi-repere--2 { top: -14px; right: -10px; }
.cpi-repere--3 { top: -14px; right: -10px; }
.cpi-exemple.est-visible .cpi-repere { animation: cpi-pastille 0.45s var(--ease-sortie) both; }
.cpi-exemple.est-visible .cpi-repere--2 { animation-delay: 0.25s; }
.cpi-exemple.est-visible .cpi-repere--3 { animation-delay: 0.5s; }
.cpi-legendes { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .cpi-legendes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cpi-legendes li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
.cpi-legendes__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--petrole); font: 600 0.8125rem / 1 var(--f-texte); color: var(--or); }
.cpi-legendes p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre); }
.cpi-legendes b { font-weight: 500; color: var(--petrole); }

/* 3.2 Google, la carte et les IA : trois vrais écrans, en alternance */
.cpi-vue { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.cpi-vue + .cpi-vue { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (min-width: 60em) {
  .cpi-vue { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .cpi-vue--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .cpi-vue--inverse .cpi-vue__ecran { order: 2; }
}
.cpi-vue__ecran { position: relative; }
.cpi-vue__num { display: block; font: italic 300 2.5rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: var(--or); }
.cpi-vue__titre { margin: var(--e-3) 0 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem) / 1.2 var(--f-titre); color: var(--creme); }
.cpi-vue__texte p { margin: var(--e-3) 0 0; font-size: var(--t-corps); line-height: 1.65; color: var(--creme-doux); }
.cpi-vue__texte::after { content: ""; display: block; width: 48px; height: 1px; margin-top: var(--e-5); background: var(--or-400); }

/* Navigateur */
.cpi-nav { overflow: hidden; border-radius: 12px; background: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #202124; box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.cpi-nav p { margin: 0; }
.cpi-nav__barre { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #ECEFF1; }
.cpi-nav__points { display: inline-flex; gap: 6px; }
.cpi-nav__points i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.cpi-nav__points i:nth-child(2) { background: #FEBC2E; } .cpi-nav__points i:nth-child(3) { background: #28C840; }
.cpi-nav__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 0.8125rem; color: #5F6368; white-space: nowrap; overflow: hidden; }
.cpi-nav__url svg { flex: none; width: 13px; height: 13px; fill: none; stroke: #5F6368; stroke-width: 2; }

/* Page de résultats */
.cpi-g { padding: 16px 20px 20px; min-height: 22rem; }
.cpi-g__tete { display: flex; align-items: center; gap: 18px; }
.cpi-g__logo { flex: none; font: 400 1.75rem / 1 "Product Sans", Arial, sans-serif; letter-spacing: -0.02em; }
.cpi-g__logo span:nth-child(1), .cpi-g__logo span:nth-child(4) { color: #4285F4; }
.cpi-g__logo span:nth-child(2), .cpi-g__logo span:nth-child(6) { color: #EA4335; }
.cpi-g__logo span:nth-child(3) { color: #FBBC05; }
.cpi-g__logo span:nth-child(5) { color: #34A853; }
.cpi-g__recherche { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); font-size: 0.9375rem; color: #202124; }
.cpi-g__requete { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpi-g__recherche svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #4285F4; stroke-width: 2.4; stroke-linecap: round; }
.cpi-g__onglets { display: flex; gap: 18px; margin-top: 14px !important; padding-bottom: 8px; border-bottom: 1px solid #EBEBEB; font-size: 0.8125rem; color: #5F6368; white-space: nowrap; overflow: hidden; }
.cpi-g__onglets span { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 6px; }
.cpi-g__onglets .est-actif { color: #1A73E8; box-shadow: inset 0 -3px 0 #1A73E8; }
.cpi-g__onglets svg { width: 13px; height: 13px; fill: #5F6368; }
.cpi-g__resultats { margin-top: 16px; }
.cpi-g__resultat { padding: 10px 12px; margin: 0 -12px; border-radius: 10px; }
.cpi-g__resultat--vous { box-shadow: 0 0 0 2px var(--or), 0 0 0 7px rgba(224, 189, 142, 0.25); background: #FFFDF8; }
.cpi-g__site { display: flex; align-items: center; gap: 10px; }
.cpi-g__site span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.cpi-g__site b { font-size: 0.875rem; font-weight: 400; color: #202124; }
.cpi-g__site small { font-size: 0.75rem; color: #4D5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpi-g__favicon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vel-indigo); box-shadow: 0 0 0 1px #E8EAED; font: 700 0.75rem / 1 var(--f-vel); color: #fff; }
.cpi-g__titre { margin-top: 6px !important; font-size: 1.1875rem; line-height: 1.3; color: #1A0DAB; }
.cpi-g__extrait { margin-top: 4px !important; font-size: 0.875rem; line-height: 1.55; color: #4D5156; }
.cpi-g__liens { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px !important; font-size: 0.875rem; color: #1A0DAB; }
.cpi-g__questions { margin-top: 18px; }
.cpi-g__questions-titre { margin-bottom: 6px !important; font-size: 1.0625rem; color: #202124; }
.cpi-g__question { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid #EBEBEB; font-size: 0.875rem; color: #202124; }
.cpi-g__question i { width: 8px; height: 8px; border-right: 2px solid #5F6368; border-bottom: 2px solid #5F6368; rotate: 45deg; translate: 0 -3px; }
.cpi-g__resultat--gris { margin-top: 14px; }
.cpi-g__resultat--gris p { display: flex; gap: 8px; margin-top: 7px !important; }
.cpi-g__resultat--gris i { display: block; height: 8px; border-radius: 4px; background: #ECEDEF; }
.cpi-g__resultat--gris p:first-child i:first-child { width: 22px; height: 22px; border-radius: 50%; } .cpi-g__resultat--gris p:first-child i:last-child { width: 40%; height: 10px; align-self: center; }
.cpi-g__resultat--gris p:nth-child(2) i { width: 70%; height: 11px; background: #DCE4F4; }
.cpi-g__resultat--gris p:nth-child(3) i:first-child { width: 90%; } .cpi-g__resultat--gris p:nth-child(3) i:last-child { width: 50%; }

/* Aperçu IA */
.cpi-apercu { margin-top: 16px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, #EEF3FD, #F6F1FB); }
.cpi-apercu__titre { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; color: #202124; }
.cpi-apercu__titre svg { width: 20px; height: 20px; fill: #4285F4; }
.cpi-apercu__corps { display: grid; gap: 14px; margin-top: 12px; }
@media (min-width: 40em) { .cpi-apercu__corps { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.cpi-apercu__phrase { margin-bottom: 10px !important; font-size: 0.9375rem; line-height: 1.6; color: #202124; }
.cpi-apercu__phrase b { font-weight: 700; }
.cpi-apercu__phrase mark { padding: 1px 3px; border-radius: 3px; background: rgba(224, 189, 142, 0.45); color: #202124; }
.cpi-apercu__renvoi { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; border-radius: 50%; background: var(--vel-indigo); font: 700 0.625rem / 1 var(--f-vel); color: #fff; vertical-align: 2px; }
.cpi-apercu__lignes { display: grid; gap: 7px; }
.cpi-apercu__lignes i { display: block; height: 8px; border-radius: 4px; background: rgba(32, 33, 36, 0.09); }
.cpi-apercu__lignes i:last-child { width: 60%; }
.cpi-apercu__avertissement { margin-top: 10px !important; font-size: 0.6875rem; color: #5F6368; }
.cpi-apercu__sources { display: grid; gap: 8px; align-content: start; }
.cpi-apercu__source { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 10px; background: #fff; font-size: 0.75rem; color: #4D5156; }
.cpi-apercu__source span:last-child { display: grid; gap: 4px; min-width: 0; line-height: 1.3; flex: 1; }
.cpi-apercu__source b { font-weight: 400; color: #1A0DAB; }
.cpi-apercu__source > i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #ECEDEF; }
.cpi-apercu__source span i { display: block; height: 7px; border-radius: 4px; background: #ECEDEF; }
.cpi-apercu__source span i:last-child { width: 60%; }
.cpi-apercu__source--vous { box-shadow: 0 0 0 2px var(--or), 0 0 0 6px rgba(224, 189, 142, 0.25); }

/* Google Maps */
.cpi-maps { position: relative; display: grid; min-height: 22rem; }
@media (min-width: 40em) { .cpi-maps { grid-template-columns: minmax(0, 1fr) 15.5rem; } }
.cpi-maps__plan { position: relative; min-height: 14rem; overflow: hidden; }
.cpi-maps__fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.cpi-maps__epingle { position: absolute; left: var(--x); top: var(--y); width: 20px; height: 20px; margin: -20px 0 0 -10px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #9AA0A6; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); }
.cpi-maps__epingle--vous { width: 34px; height: 34px; margin: -36px 0 0 -17px; background: #EA4335; display: grid; place-items: center; z-index: 1; }
.cpi-maps__epingle--vous b { rotate: 45deg; font: 700 0.875rem / 1 var(--f-vel); color: #fff; }
.cpi-maps__etiquette { position: absolute; left: var(--x); top: var(--y); margin: 6px 0 0 -46px !important; padding: 3px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.92); font-size: 0.75rem; font-weight: 700; color: #B31412; white-space: nowrap; }
.cpi-maps__fiche { border-left: 1px solid #EBEBEB; background: #fff; }
@media (max-width: 39.99em) { .cpi-maps__fiche { border-left: 0; border-top: 1px solid #EBEBEB; } }
.cpi-maps__fiche img { display: block; width: 100%; height: 7.5rem; object-fit: cover; object-position: 60% 40%; background: linear-gradient(135deg, #C9D4E6, #8FA3C4); }
.cpi-maps__infos { padding: 12px 14px 14px; }
.cpi-maps__nom { font-size: 1.125rem; color: #202124; }
.cpi-maps__type, .cpi-maps__horaire { margin-top: 3px !important; font-size: 0.8125rem; color: #5F6368; }
.cpi-maps__horaire b { font-weight: 400; color: #188038; }
.cpi-maps__boutons { display: flex; justify-content: space-between; gap: 4px; margin-top: 12px !important; padding-bottom: 12px; border-bottom: 1px solid #EBEBEB; }
.cpi-maps__boutons span { display: grid; justify-items: center; gap: 4px; font-size: 0.6875rem; color: #1A73E8; }
.cpi-maps__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E8F0FE; }
.cpi-maps__ico svg { width: 17px; height: 17px; fill: none; stroke: #1A73E8; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cpi-maps__ico--itin { background: #1A73E8; } .cpi-maps__ico--itin svg { stroke: #fff; }
.cpi-maps__ligne { display: flex; align-items: center; gap: 8px; margin-top: 10px !important; font-size: 0.8125rem; color: #3C4043; }
.cpi-maps__ligne svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #1A73E8; stroke-width: 2; stroke-linecap: round; }

/* Animations des écrans (une fois, à l'arrivée ; moins de 5 s) */
.js .cpi-vue .cpi-g__requete { clip-path: inset(0 100% 0 0); }
.js .cpi-vue.est-visible .cpi-g__requete { animation: cpi-frappe 1s steps(30) 0.3s both; }
.js .cpi-vue:not(.est-visible) .cpi-g__resultats > *, .js .cpi-vue:not(.est-visible) .cpi-apercu,
.js .cpi-vue:not(.est-visible) .cpi-maps__epingle, .js .cpi-vue:not(.est-visible) .cpi-maps__etiquette,
.js .cpi-vue:not(.est-visible) .cpi-maps__fiche { opacity: 0; }
.js .cpi-vue.est-visible .cpi-g__resultats > * { animation: cpi-monte 0.6s var(--ease-sortie) both; animation-delay: 1.3s; }
.js .cpi-vue.est-visible .cpi-g__resultats > :nth-child(2) { animation-delay: 1.5s; }
.js .cpi-vue.est-visible .cpi-g__resultats > :nth-child(3) { animation-delay: 1.7s; }
.js .cpi-vue.est-visible .cpi-g__resultat--vous { animation: cpi-monte 0.6s var(--ease-sortie) 1.3s both, cpi-anneau 1.4s ease-out 2.1s 1; }
.js .cpi-vue.est-visible .cpi-apercu { animation: cpi-monte 0.6s var(--ease-sortie) 1.3s both; }
.js .cpi-vue .cpi-apercu__phrase, .js .cpi-vue .cpi-apercu__lignes { clip-path: inset(0 0 100% 0); }
.js .cpi-vue.est-visible .cpi-apercu__phrase { animation: cpi-deroule 0.9s ease-out 1.8s both; }
.js .cpi-vue.est-visible .cpi-apercu__phrase + .cpi-apercu__phrase { animation-delay: 2.6s; }
.js .cpi-vue.est-visible .cpi-apercu__lignes { animation: cpi-deroule 0.6s ease-out 3.4s both; }
.js .cpi-vue.est-visible .cpi-apercu__source--vous { animation: cpi-anneau 1.4s ease-out 3.3s 1; }
.js .cpi-vue.est-visible .cpi-maps__epingle { animation: cpi-tombe 0.5s var(--ease-sortie) both; animation-delay: 0.4s; }
.js .cpi-vue.est-visible .cpi-maps__epingle:nth-child(3) { animation-delay: 0.55s; }
.js .cpi-vue.est-visible .cpi-maps__epingle--vous { animation-delay: 1s; }
.js .cpi-vue.est-visible .cpi-maps__etiquette { animation: cpi-monte 0.4s var(--ease-sortie) 1.4s both; }
.js .cpi-vue.est-visible .cpi-maps__fiche { animation: cpi-glisse-droite 0.7s var(--ease-sortie) 1.6s both; }
.js .cpi-vue.est-visible .cpi-maps__appel .cpi-maps__ico { animation: cpi-anneau 1.4s ease-out 2.6s 1; }

@media (max-width: 29.99em) {
  .cpi-g { padding: 12px 14px 16px; min-height: 0; }
  .cpi-g__tete { gap: 10px; }
  .cpi-g__logo { font-size: 1.25rem; }
  .cpi-g__recherche { padding: 7px 12px; font-size: 0.8125rem; }
  .cpi-g__titre { font-size: 1rem; }
  .cpi-g__onglets { gap: 12px; }
}

/* 3.3 Contenus et LinkedIn : texte à gauche, supports réunis à droite */
.cpi-contenus__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 72em) { .cpi-contenus__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.cpi-bloc + .cpi-bloc { margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--lin); }

.cpi-table { position: relative; min-height: 31rem; margin: 0; border-radius: 6px; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, 0.7), transparent 70%), linear-gradient(160deg, #E9EDF3, #D5DCE6); font-family: var(--f-vel); color: #1F2A3D; overflow: hidden; }
.cpi-table > div { position: absolute; transition: translate var(--d) var(--ease-sortie); }
.cpi-table > div:hover { translate: 0 -4px; }
.cpi-table p { margin: 0; }
/* Le courrier de prospection, au centre, annoté */
.cpi-courrier { top: 8%; left: 24%; z-index: 2; width: 17rem; padding: 18px 18px 14px; border-radius: 3px; background: #fff; box-shadow: 0 24px 40px -18px rgba(2, 24, 24, 0.55); rotate: -1.5deg; }
.cpi-courrier__tete { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding-bottom: 9px; border-bottom: 2px solid var(--vel-bleu); font-size: 0.8125rem; font-weight: 700; line-height: 1.2; color: var(--vel-indigo); }
.cpi-courrier__tete b { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vel-indigo); font-size: 0.75rem; color: #fff; }
.cpi-courrier__tete small { font-size: 0.625rem; font-weight: 400; color: var(--vel-gris); }
.cpi-courrier__objet { margin-top: 10px !important; font-size: 0.75rem; font-weight: 700; color: var(--vel-indigo); }
.cpi-courrier__lignes { display: grid; gap: 5px; margin-top: 8px !important; }
.cpi-courrier__lignes i { display: block; height: 4px; border-radius: 2px; background: #E1E6EE; }
.cpi-courrier__lignes i:nth-child(3) { width: 70%; }
.cpi-courrier__bloc { position: relative; margin-top: 10px !important; padding: 7px 9px 7px 30px; border-radius: 4px; font-size: 0.6875rem; line-height: 1.4; color: var(--vel-indigo); background: linear-gradient(rgba(224, 189, 142, 0.38), rgba(224, 189, 142, 0.38)) 0 0 / 100% 100% no-repeat; }
.cpi-courrier__pastille { position: absolute; left: 6px; top: 7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--petrole); box-shadow: 0 0 0 3px rgba(224, 189, 142, 0.55); font: 600 0.625rem / 1 var(--f-texte); color: var(--or); }
.cpi-courrier__signe { margin-top: 12px !important; padding-top: 7px; border-top: 1px solid #E8ECF2; font-size: 0.625rem; color: var(--vel-gris); }
.js .cpi-table:not(.est-visible) .cpi-courrier__bloc { background-size: 0 100%; }
.js .cpi-table.est-visible .cpi-courrier__bloc--a { animation: cpi-surligne 0.8s ease-out 0.6s both; }
.js .cpi-table.est-visible .cpi-courrier__bloc--b { animation: cpi-surligne 0.8s ease-out 1.3s both; }
.cpi-guide { top: 5%; left: 4%; width: 9.5rem; padding: 14px 12px; border-radius: 3px; background: #fff; box-shadow: 0 16px 30px -16px rgba(2, 24, 24, 0.5); rotate: -6deg; }
.cpi-guide__sur { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vel-bleu); }
.cpi-guide__titre { margin-top: 4px !important; font-size: 0.875rem; line-height: 1.2; font-weight: 700; color: var(--vel-indigo); }
.cpi-guide__lignes { display: grid; gap: 5px; margin-top: 10px !important; }
.cpi-guide__lignes i { display: block; height: 4px; border-radius: 2px; background: #E1E6EE; }
.cpi-guide__lignes i:nth-child(even) { width: 78%; }
.cpi-guide__pied { margin-top: 12px !important; padding-top: 6px; border-top: 1px solid #E8ECF2; font-size: 0.5625rem; color: var(--vel-gris); }
.cpi-post { right: 4%; bottom: 7%; width: 12.5rem; padding: 10px; border-radius: 8px; background: #fff; box-shadow: 0 16px 30px -16px rgba(2, 24, 24, 0.5); rotate: 4deg; }
.cpi-post__tete { display: flex; align-items: center; gap: 7px; }
.cpi-post__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--vel-indigo); font-size: 0.6875rem; font-weight: 700; color: #fff; }
.cpi-post__tete span:last-child { display: grid; line-height: 1.2; font-size: 0.6875rem; font-weight: 600; }
.cpi-post__tete small { font-size: 0.5625rem; font-weight: 400; color: var(--vel-gris); }
.cpi-post__lignes { display: grid; gap: 4px; margin-top: 8px !important; }
.cpi-post__lignes i { display: block; height: 4px; border-radius: 2px; background: #E1E6EE; }
.cpi-post__lignes i:nth-child(2) { width: 70%; }
.cpi-post__visuel { display: grid; place-items: end start; height: 5rem; margin-top: 8px; padding: 8px; border-radius: 5px; background: linear-gradient(135deg, var(--vel-indigo), var(--vel-bleu)); }
.cpi-post__visuel span { font-size: 0.75rem; font-weight: 600; line-height: 1.25; color: #fff; }
.cpi-post__actions { display: flex; gap: 10px; margin-top: 8px !important; }
.cpi-post__actions i { width: 26px; height: 5px; border-radius: 3px; background: #E1E6EE; }
.cpi-signature { left: 5%; bottom: 9%; width: 13rem; padding: 12px; border-radius: 6px; background: #fff; box-shadow: 0 16px 30px -16px rgba(2, 24, 24, 0.5); rotate: 2deg; }
.cpi-signature p:first-child { padding-left: 9px; border-left: 2px solid var(--vel-bleu); font-size: 0.625rem; line-height: 1.4; color: var(--vel-gris); }
.cpi-signature p:first-child b { display: block; font-size: 0.75rem; color: var(--vel-indigo); }
.cpi-signature__cabinet { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; font-size: 0.625rem; font-weight: 600; color: var(--vel-indigo); }
.cpi-signature__cabinet span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--vel-indigo); font-size: 0.5625rem; color: #fff; }
@media (max-width: 71.99em) {
  .cpi-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; min-height: 0; padding: clamp(14px, 3vw, 28px); }
  .cpi-table > div { position: static; width: auto; rotate: none; }
  .cpi-courrier { grid-column: 1 / -1; justify-self: center; width: min(100%, 24rem); }
}
@media (max-width: 39.99em) {
  .cpi-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpi-signature { grid-column: 1 / -1; }
}

/* 3.4 Et pour compléter : quatre cartes */
.cpi-complements__titre { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cpi-complements { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .cpi-complements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cpi-complements { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cpi-complement { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); border-top: 2px solid var(--or-400); border-radius: 0 0 8px 8px; background: #FBF8F2; box-shadow: 0 1rem 2rem -1.5rem rgba(2, 24, 24, 0.25); transition: translate var(--d) var(--ease-sortie), box-shadow var(--d) var(--ease-sortie); }
.cpi-complement:hover { translate: 0 -4px; box-shadow: 0 1.25rem 2rem -1.25rem rgba(2, 24, 24, 0.35); }
.cpi-complement__picto { width: 34px; height: 34px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cpi-complement__titre { margin: 0; font: 500 1.375rem / 1.2 var(--f-titre); }
.cpi-complement__titre a { color: var(--petrole); text-decoration: none; background: linear-gradient(var(--or-400), var(--or-400)) 0 100% / 0 1px no-repeat; transition: background-size var(--d) var(--ease-sortie); }
.cpi-complement__titre a::after { content: " →"; color: var(--or-texte); }
.cpi-complement__titre a:hover, .cpi-complement__titre a:focus-visible { background-size: 100% 1px; }
.cpi-complement p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--encre); }
.cpi-complements.est-visible .cpi-complement { animation: cpi-monte 0.7s var(--ease-sortie) both; }
.cpi-complements.est-visible .cpi-complement:nth-child(2) { animation-delay: 0.08s; }
.cpi-complements.est-visible .cpi-complement:nth-child(3) { animation-delay: 0.16s; }
.cpi-complements.est-visible .cpi-complement:nth-child(4) { animation-delay: 0.24s; }

/* --------------------------------------------------------------------------
   4. L'audit offert : texte à gauche, extrait de rapport à droite
   -------------------------------------------------------------------------- */
.cpi-audit__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60em) { .cpi-audit__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.cpi-audit .cpi-texte:first-of-type { margin-top: 0; }
.cpi-points { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.cpi-points li { position: relative; padding-left: 1.5rem; font-size: var(--t-corps); line-height: 1.55; color: var(--creme-doux); }
.cpi-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--or); }
.cpi-points b { font-weight: 500; color: var(--creme); }

.cpi-rapport { position: relative; margin: 0; }
.cpi-rapport__legende { margin-bottom: var(--e-4); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.3 var(--f-titre); color: var(--or-clair); }
.cpi-rapport__page { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 4px; background: var(--papier); color: var(--encre); box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.8), 14px 14px 0 -2px rgba(246, 242, 234, 0.12); rotate: 1deg; }
.cpi-rapport__page p { margin: 0; }
.cpi-rapport__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; padding-bottom: var(--e-3); border-bottom: 1px solid var(--or-400); }
.cpi-rapport__marque { display: grid; font: 500 1.25rem / 1.1 var(--f-titre); color: var(--petrole); }
.cpi-rapport__marque small, .cpi-rapport__client small { font: 500 0.6875rem / 1.4 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.cpi-rapport__client { display: grid; text-align: right; font-size: 0.9375rem; font-weight: 500; color: var(--encre); }
.cpi-rapport__constats { display: grid; gap: var(--e-3); margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.cpi-rapport__constat { position: relative; padding: 10px 12px 10px 16px; border-radius: 4px; background: #fff; box-shadow: inset 3px 0 0 var(--teinte); }
.cpi-rapport__constat--fort { --teinte: var(--succes); }
.cpi-rapport__constat--manque { --teinte: var(--attention); }
.cpi-rapport__constat--obstacle { --teinte: var(--erreur); }
.cpi-rapport__etiquette { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teinte); }
.cpi-rapport__etiquette::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teinte); }
.cpi-rapport__constat p { margin-top: 4px !important; font-size: 0.9375rem; line-height: 1.5; color: var(--encre); }
.cpi-rapport__priorites { display: grid; gap: var(--e-2); margin: var(--e-4) 0 0; padding: var(--e-3) 0 0; list-style: none; border-top: 1px dashed var(--lin); }
.cpi-rapport__priorites li { display: grid; grid-template-columns: 6.25rem 1fr; gap: var(--e-3); align-items: baseline; }
.cpi-rapport__num { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--petrole); text-align: center; font-size: 0.75rem; font-weight: 500; color: var(--or-clair); }
.cpi-rapport__priorites p { font-size: 0.9375rem; line-height: 1.5; color: var(--encre); }
.cpi-rapport.est-visible .cpi-rapport__constat { animation: cpi-monte 0.6s var(--ease-sortie) both; }
.cpi-rapport.est-visible .cpi-rapport__constat:nth-child(1) { animation-delay: 0.3s; }
.cpi-rapport.est-visible .cpi-rapport__constat:nth-child(2) { animation-delay: 0.6s; }
.cpi-rapport.est-visible .cpi-rapport__constat:nth-child(3) { animation-delay: 0.9s; }
.cpi-rapport.est-visible .cpi-rapport__priorites li { animation: cpi-monte 0.6s var(--ease-sortie) 1.3s both; }
.cpi-rapport.est-visible .cpi-rapport__priorites li + li { animation-delay: 1.55s; }
@media (max-width: 29.99em) {
  .cpi-rapport__page { rotate: none; }
  .cpi-rapport__priorites li { grid-template-columns: 1fr; gap: 4px; }
  .cpi-rapport__num { justify-self: start; }
}

/* --------------------------------------------------------------------------
   5. Vos règles, notre méthode : deux colonnes cochées, encadré pétrole à double filet
   -------------------------------------------------------------------------- */
.cpi-regles__grille { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60em) { .cpi-regles__grille { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.cpi-regles__titre { margin: 0 0 var(--e-3); font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.cpi-regles__colonne--methode { padding: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 2px solid var(--or-400); border-radius: 0 0 8px 8px; background: #FBF8F2; box-shadow: 0 1rem 2rem -1.5rem rgba(2, 24, 24, 0.25); }
.cpi-regles__liste { display: grid; margin: 0; padding: 0; list-style: none; }
.cpi-regles__liste li { position: relative; padding: var(--e-4) 0 var(--e-4) 2rem; border-bottom: 1px solid #D6CFC1; font-size: 1.0625rem; line-height: 1.5; color: var(--encre); }
.cpi-regles__liste li:last-child { border-bottom: 0; }
.cpi-regles__liste li::before { content: ""; position: absolute; left: 0; top: calc(var(--e-4) + 0.2em); width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--petrole) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0BD8E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 70% no-repeat; }
.cpi-regles__liste--methode li::before { background-color: var(--cuivre); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E"); }
.cpi-regles__liste b { font-weight: 500; color: var(--petrole); }
.cpi-cadre { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 4px; background: var(--petrole); outline: 1px solid rgba(224, 189, 142, 0.6); outline-offset: -8px; text-align: center; }
.cpi-cadre__texte { margin: 0; font: 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.35 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.cpi-cadre .cpi-or { color: var(--or-clair); }

/* --------------------------------------------------------------------------
   6. Méthode et prix : quatre étapes en colonnes, puis la promesse et les tarifs
   -------------------------------------------------------------------------- */
.cpi-etapes { display: grid; gap: var(--e-5); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(224, 189, 142, 0.22); }
@media (min-width: 40em) { .cpi-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cpi-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.cpi-etapes li { padding-top: var(--e-5); }
@media (min-width: 64em) { .cpi-etapes li { padding: var(--e-6) var(--e-5) 0; border-left: 1px solid rgba(224, 189, 142, 0.22); } .cpi-etapes li:first-child { padding-left: 0; border-left: 0; } }
.cpi-etapes__num { display: block; font: 300 2.5rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: var(--or); }
.cpi-etapes p { margin: var(--e-3) 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--creme-doux); }
.cpi-etapes b { font-weight: 500; color: var(--creme); }
.cpi-methode__grille { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 60em) { .cpi-methode__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.cpi-promesse { margin: 0; padding: var(--e-4) var(--e-5); border-left: 2px solid var(--or); background: rgba(255, 255, 255, 0.05); font-size: 1.0625rem; line-height: 1.55; color: var(--creme); }
.cpi-budget { --focus: var(--petrole); padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: 6px; background: var(--papier); color: var(--encre); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.cpi-budget__titre { margin: 0 0 var(--e-4); font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.cpi-budget__titre .cpi-or { color: var(--or-texte); }
.cpi-budget__table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cpi-budget__table th, .cpi-budget__table td { padding: 0.7rem 0; border-bottom: 1px solid var(--lin); text-align: left; vertical-align: top; }
.cpi-budget__table thead th { padding-top: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.cpi-budget__table tbody th { padding-right: var(--e-4); font-weight: 400; color: var(--encre); }
.cpi-budget__table tbody th a { color: var(--petrole); text-decoration-color: var(--or-400); text-underline-offset: 3px; }
.cpi-budget__table td { white-space: nowrap; text-align: right; font-weight: 500; font-variant-numeric: lining-nums; color: var(--petrole); }
.cpi-budget__table thead th:last-child { text-align: right; }
.cpi-budget__offert td { color: var(--or-texte); }
.cpi-budget__note { margin: var(--e-4) 0 0; font-size: 0.9375rem; color: var(--taupe); }

/* --------------------------------------------------------------------------
   7. Nice, Sophia Antipolis et toute la France : la Côte d'Azur de nuit.
   Le rivage se dessine, la route Nice → Sophia Antipolis se trace, les villes s'allument ;
   Nice bat doucement en continu (bouton pause).
   -------------------------------------------------------------------------- */
.cpi-lieu__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60em) { .cpi-lieu__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.cpi-lieu .cpi-texte { margin-top: 0; }
.cpi-lieu__cartes { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .cpi-lieu__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cpi-lieu__carte { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); border-top: 2px solid var(--or-400); border-radius: 0 0 8px 8px; background: #FBF8F2; box-shadow: 0 1rem 2rem -1.5rem rgba(2, 24, 24, 0.25); }
.cpi-lieu__carte svg { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cpi-lieu__carte p { display: grid; margin: 0; line-height: 1.35; }
.cpi-lieu__carte b { font: 500 1.25rem / 1.2 var(--f-titre); color: var(--petrole); }
.cpi-lieu__carte span { font-size: 0.9375rem; color: var(--taupe); }

.cpi-cote { position: relative; margin: 0; padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.75rem) clamp(0.75rem, 2vw, 1.25rem); border-radius: 12px; background: radial-gradient(ellipse 45% 40% at 68% 62%, rgba(176, 99, 57, 0.25), transparent 70%), radial-gradient(ellipse 80% 70% at 40% 30%, rgba(224, 189, 142, 0.1), transparent 70%), linear-gradient(160deg, var(--petrole), var(--petrole-900)); box-shadow: 0 2.5rem 4rem -2rem rgba(2, 24, 24, 0.6); overflow: hidden; }
.cpi-cote__svg { display: block; width: 100%; height: auto; overflow: visible; }
#cpi-vagues path { stroke: var(--or); opacity: 0.22; }
.cpi-cote__terre { fill: rgba(224, 189, 142, 0.05); }
.cpi-cote__mer { fill: rgba(2, 24, 24, 0.55); }
.cpi-cote__encart { fill: rgba(2, 24, 24, 0.55); stroke: rgba(224, 189, 142, 0.35); stroke-width: 4; }
#cpi-trame circle { fill: var(--or); opacity: 0.3; }
.cpi-cote__fr { fill: none; stroke: var(--or); stroke-width: 5; stroke-linejoin: round; opacity: 0.8; }
.cpi-cote__fr-ville { fill: var(--or-clair); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 10px rgba(242, 217, 172, 0.8)); }
.cpi-cote__zoom { fill: rgba(176, 99, 57, 0.18); stroke: var(--or-clair); stroke-width: 5; stroke-dasharray: 16 10; }
.cpi-cote__fr-nice { fill: var(--cuivre); stroke: var(--or-clair); stroke-width: 5; }
.cpi-cote__rivage { fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cpi-cote__relief { fill: none; stroke: rgba(224, 189, 142, 0.22); stroke-width: 1; stroke-dasharray: 3 6; }
.cpi-cote__relief--2 { stroke: rgba(224, 189, 142, 0.15); }
.cpi-cote__route { fill: none; stroke: var(--or-clair); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
.cpi-cote__ville { fill: var(--or); transform-box: fill-box; transform-origin: center; }
.cpi-cote__nom { fill: var(--creme); font: 400 15px / 1 var(--f-texte); letter-spacing: 0.02em; opacity: 0.92; }
.cpi-cote__nom--france { fill: var(--creme-doux); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; }
.cpi-cote__nom--sophia { fill: var(--or-clair); font: italic 500 22px / 1 var(--f-titre); opacity: 1; }
.cpi-cote__nom--nice { fill: var(--or-clair); font: italic 500 30px / 1 var(--f-titre); opacity: 1; }
.cpi-cote__mer-nom { fill: rgba(238, 234, 225, 0.62); font: italic 400 15px / 1 var(--f-titre); letter-spacing: 0.3em; }
.cpi-cote__techno { fill: rgba(224, 189, 142, 0.18); stroke: var(--or-clair); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.cpi-cote__nice { fill: var(--cuivre); stroke: var(--or-clair); stroke-width: 2; }
.cpi-cote__onde { fill: none; stroke: var(--or-clair); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cpi-cote__legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: var(--e-3) 0 0; font-size: 0.875rem; color: var(--creme-doux); }
.cpi-cote__legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.cpi-cote__puce { width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 3px rgba(176, 99, 57, 0.3); }
.cpi-cote__puce--techno { width: 11px; height: 11px; border-radius: 2px; background: rgba(224, 189, 142, 0.25); box-shadow: inset 0 0 0 1.5px var(--or-clair); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.cpi-cote__puce--france { width: 7px; height: 7px; background: var(--or-clair); box-shadow: 0 0 6px rgba(242, 217, 172, 0.8); }
.cpi-cote__pause { position: absolute; top: 0.75rem; right: 0.75rem; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(224, 189, 142, 0.55); border-radius: 50%; background: rgba(2, 24, 24, 0.55); color: var(--or-clair); cursor: pointer; }
.js .cpi-cote__pause { display: grid; }
.cpi-cote__pause svg { width: 18px; height: 18px; fill: currentColor; }
.cpi-cote__lire { display: none; }
.cpi-cote.est-en-pause .cpi-cote__lire { display: block; }
.cpi-cote.est-en-pause .cpi-cote__arret { display: none; }
.cpi-cote__pause:hover { background: var(--petrole); }
.cpi-cote__pause:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* Avant l'arrivée à l'écran (avec JavaScript) */
.js .cpi-cote:not(.est-visible) .cpi-cote__rivage, .js .cpi-cote:not(.est-visible) .cpi-cote__route { stroke-dashoffset: 1; }
.js .cpi-cote:not(.est-visible) .cpi-cote__mer-motif, .js .cpi-cote:not(.est-visible) .cpi-cote__villes, .js .cpi-cote:not(.est-visible) .cpi-cote__sophia { opacity: 0; }
.js .cpi-cote:not(.est-visible) .cpi-cote__fr-ville { opacity: 0; }
/* À l'arrivée : le rivage (1,4 s), les vagues, la route vers Sophia Antipolis, puis les villes (jusqu'à 2,5 s) */
.js .cpi-cote.est-visible .cpi-cote__rivage { animation: cpi-trace 1.4s ease-in-out both; }
.js .cpi-cote.est-visible .cpi-cote__mer-motif { animation: cpi-apparait 1.2s ease 0.6s both; }
.js .cpi-cote.est-visible .cpi-cote__route { animation: cpi-trace 1s ease-out 1.1s both; }
.js .cpi-cote.est-visible .cpi-cote__sophia { animation: cpi-apparait 0.6s ease 1.9s both; }
.js .cpi-cote.est-visible .cpi-cote__villes { animation: cpi-apparait 0.6s ease 1.5s both; }
.js .cpi-cote.est-visible .cpi-cote__ville { animation: cpi-allume 0.5s ease-out var(--d) both; }
/* L'encart de la France : les grandes villes s'allument une fois (jusqu'à 2,3 s) */
.js .cpi-cote.est-visible .cpi-cote__fr-ville { animation: cpi-allume 0.5s ease-out var(--d) both; }
/* Nice bat en continu (bouton pause) */
.js .cpi-cote .cpi-cote__onde { animation: cpi-pulse 2.4s ease-out infinite; }
.js .cpi-cote .cpi-cote__onde--2 { animation-delay: 1.2s; }
.js .cpi-cote .cpi-cote__nice { animation: cpi-battement 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cpi-cote.est-en-pause .cpi-cote__onde, .cpi-cote.est-en-pause .cpi-cote__nice { animation-play-state: paused; }
@media (max-width: 39.99em) {
  .cpi-cote__nom { font-size: 26px; } .cpi-cote__nom--sophia { font-size: 30px; } .cpi-cote__nom--nice { font-size: 40px; }
  .cpi-cote__villes circle:nth-of-type(1), .cpi-cote__villes text:nth-of-type(1), .cpi-cote__mer-nom, .cpi-cote__nom--france { display: none; }
  .cpi-cote__villes text:nth-of-type(3) { translate: 0 -40px; }
}
@keyframes cpi-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cpi-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes cpi-allume { 0% { opacity: 0.15; scale: 0.4; } 60% { opacity: 1; scale: 1.8; } 100% { opacity: 1; scale: 1; } }
@keyframes cpi-pulse { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 4.2; } }
@keyframes cpi-battement { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }

/* --------------------------------------------------------------------------
   8. FAQ (composant commun faq5) et 9. Votre interlocutrice
   -------------------------------------------------------------------------- */
.cpi.faq5 .faq5__titre { max-width: none; text-align: left; }
.cpi-fondatrice.section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.cpi-fondatrice__contenu { padding-left: clamp(1.25rem, 3vw, 2rem); border-left: 2px solid var(--or-400); }
.cpi-fondatrice__titre { margin: 0; font: 500 0.875rem / 1.4 var(--f-texte); letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe); }
.cpi-fondatrice__texte { margin: var(--e-3) 0 0; font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.45 var(--f-titre); color: var(--petrole); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Appel final sur photo assombrie, texte à gauche
   -------------------------------------------------------------------------- */
.cpi-final { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 7rem); background: var(--petrole-profond); }
.cpi-final__fond { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.cpi-final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(2, 24, 24, 0.96) 0%, rgba(2, 24, 24, 0.88) 32%, rgba(2, 24, 24, 0.35) 58%, rgba(2, 24, 24, 0.1) 80%); }
@media (max-width: 59.99em) { .cpi-final::before { background: rgba(2, 24, 24, 0.84); } }
.cpi-final__contenu { position: relative; z-index: 2; }
@media (min-width: 60em) { .cpi-final__contenu > * { max-width: 36rem; } .cpi-final .titre-section { max-width: 30rem; } }
.cpi-final__repere { display: block; width: 14px; height: 14px; margin: 0 0 var(--e-5); border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 7px rgba(176, 99, 57, 0.2), 0 0 32px rgba(224, 189, 142, 0.55); }
.cpi-final .titre-section { color: var(--creme); }
.cpi-final__texte { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
.cpi-final__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: var(--e-5); font-size: 1rem; color: var(--creme-doux); }
.cpi-final__contact a { color: var(--creme); text-underline-offset: 3px; }
.cpi-final__contact a:hover { color: var(--or-clair); }

/* --------------------------------------------------------------------------
   Moins d'animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cpi *, .cpi *::before, .cpi *::after { animation: none !important; transition: none !important; }
  .cpi-complement:hover, .cpi-table > div:hover { translate: none; }
  .cpi-portrait:hover .cpi-portrait__photo img { scale: none; }
  .cpi-g__requete, .cpi-apercu__phrase, .cpi-apercu__lignes { clip-path: none !important; }
  .cpi-courrier__bloc { background-size: 100% 100% !important; }
  .cpi-cote__pause { display: none !important; }
  .cpi-cote__onde { opacity: 0 !important; }
}

/* --------------------------------------------------------------------------
   Téléphone (≤ 480 px)
   -------------------------------------------------------------------------- */
@media (max-width: 29.99em) {
  .cpi-budget__table { font-size: 0.9375rem; }
  .cpi-questions li { padding: var(--e-3) var(--e-4); gap: var(--e-3); }
  .cpi-haut__sur { font-size: 0.875rem; letter-spacing: 0.12em; gap: 0.75rem; }
  .cpi-haut__sur::before { width: 1.5rem; }
  .cpi .cpi-liens .lien-suite.cpi-lien { display: block; }
  .cpi .cpi-liens .lien-suite.cpi-lien .lien-suite__fleche { display: inline-block; margin-left: 8px; vertical-align: -0.15em; }
  .cpi-final__contact span[aria-hidden] { display: none; }
  .cpi-final__contact { gap: 0.5rem 1.25rem; }
  .cpi-rapport__client { text-align: left; }
}