/* ==========================================================================
   JustiComm · page « Commissaires de justice » (/professions/commissaires-de-justice/)
   v3, 25/10/2026 : vrais écrans Google (résultats, Maps, Aperçu IA, lien sponsorisé), carte de France animée,
   mentions « Exemple fictif » retirées (demande de Raoudha).
   v2, 25/10/2026 : réalignée sur Réseaux sociaux et Identité visuelle (retour de Raoudha : « on a perdu
   un peu notre mise en page habituelle ») : bandeau photo bord à bord avec le téléphone animé posé dessus,
   portraits des quatre publics, photo de la salle des ventes, appel final sur photo, moins de cartes et
   de surtitres. Texte v3.1 validé, inchangé.
   L'étude fictive « Aubépine » a sa propre identité (ardoise, terre cuite, 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 : cdj-
   ========================================================================== */

@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; }

.cdj {
  --aub-ardoise: #22384D;   /* étude fictive : bleu ardoise */
  --aub-terre: #A44A2A;     /* étude fictive : terre cuite, 5,6:1 sur blanc */
  --aub-sable: #F4EEE6;
  --aub-gris: #5A6571;      /* 5,9:1 sur blanc */
  --aub-ligne: #DCD5CB;
  --f-aub: "Public Sans", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
.cdj.section { padding-block: clamp(3rem, 1.8rem + 3.6vw, 5rem); }
.cdj .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; }
.cdj h3 { text-wrap: pretty; }
.cdj-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .cdj-or, .surface-nuit .cdj-or { color: var(--or-clair); }
.cdj-tete, .cdj-titre { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.cdj-tete .surtitre { margin-bottom: var(--e-4); }
.cdj-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 .cdj-chapo, .surface-sombre .cdj-chapo { color: var(--creme); }
.cdj-texte { margin-top: var(--e-5); max-width: none; font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.cdj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.cdj-actions--centre { justify-content: center; }
.cdj .btn-plaque.btn--grand { max-width: 100%; }

.cdj .lien-suite.cdj-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; }
.cdj .lien-suite.cdj-lien:hover { color: var(--or-texte); }
.surface-nuit .lien-suite.cdj-lien, .surface-sombre .lien-suite.cdj-lien { color: var(--or-clair); text-decoration-color: rgba(224, 189, 142, 0.5); }
.surface-nuit .lien-suite.cdj-lien:hover, .surface-sombre .lien-suite.cdj-lien:hover { color: var(--creme); }
.cdj-liens { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; margin-top: var(--e-4); }
.cdj-liens .cdj-lien { margin-top: 0; }

/* Encadré fort entre deux filets, centré, pleine largeur (comme Réseaux sociaux) */
.cdj-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 cdj-monte { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes cdj-disparait { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes cdj-glisse { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
@keyframes cdj-pastille { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes cdj-frappe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cdj-onde { 0%, 100% { scale: 1 0.35; } 50% { scale: 1 1; } }

/* --------------------------------------------------------------------------
   1. Premier écran : bandeau photo bord à bord, téléphone animé posé dessus
   -------------------------------------------------------------------------- */
body:has(.cdj-haut) .entete__fond { opacity: 1; }
.cdj-haut { position: relative; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
.cdj-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); }
.cdj-ariane a { color: inherit; text-underline-offset: 3px; }
.cdj-ariane [aria-current] { color: var(--encre); }

.cdj-haut__bandeau { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1920 / 860; max-height: 46rem; background: var(--petrole-900); }
.cdj-haut__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.cdj-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; }
.cdj-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) {
  .cdj-haut__bandeau { aspect-ratio: 4 / 5; max-height: none; }
  .cdj-haut__photo { object-position: 5% 30%; }
  .cdj-haut__bandeau::after { background: linear-gradient(180deg, transparent 50%, rgba(2, 24, 24, 0.5) 100%); }
  .cdj-haut__tel { top: auto; bottom: 2.5rem; right: 12px; translate: none; scale: 0.6; transform-origin: bottom right; }
}

@media (min-width: 48em) and (max-width: 63.99em) { .cdj-haut__tel { scale: 0.7; } }
@media (min-width: 64em) and (max-width: 79.99em) { .cdj-haut__tel { scale: 0.85; } }

/* Téléphone animé : recherche → page de la mission → demande envoyée */
.cdj-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); }
.cdj-tel__ecran { position: relative; height: 27rem; overflow: hidden; border-radius: 26px; background: #fff; font-family: var(--f-aub); color: #1F2A33; }
.cdj-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; }
.cdj-tel__etape { position: absolute; inset: 0; padding: 40px 16px 16px; }
.cdj-tel__barre { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border: 1px solid #DADCE0; border-radius: 999px; font-size: 0.8125rem; color: #1F2A33; box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1); }
.cdj-tel__barre svg { flex: none; width: 14px; height: 14px; fill: none; stroke: #5F6368; stroke-width: 2.4; stroke-linecap: round; }
.cdj-tape { white-space: nowrap; overflow: hidden; }
.cdj-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); }
.cdj-tel__site { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 0.6875rem; color: #4D5156; }
.cdj-tel__favicon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--aub-ardoise); font-size: 0.625rem; font-weight: 700; color: #fff; }
.cdj-tel__lien { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.3; font-weight: 500; color: #1A0DAB; }
.cdj-tel__extrait { margin: 4px 0 0; font-size: 0.75rem; line-height: 1.45; color: #4D5156; }
.cdj-tel__gris { display: grid; gap: 6px; margin-top: 16px; }
.cdj-tel__gris i { display: block; height: 7px; border-radius: 4px; background: #ECEDEF; }
.cdj-tel__gris i:nth-child(1) { width: 40%; } .cdj-tel__gris i:nth-child(2) { width: 85%; } .cdj-tel__gris i:nth-child(3) { width: 65%; }
.cdj-tel__etape--page { background: var(--aub-sable); }
.cdj-tel__marque { display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 0 16px 10px; border-bottom: 1px solid var(--aub-ligne); font-size: 0.8125rem; font-weight: 600; color: var(--aub-ardoise); }
.cdj-tel__marque span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--aub-ardoise); font-size: 0.75rem; color: #fff; }
.cdj-tel__titre { margin: 16px 0 0; font-size: 1.25rem; line-height: 1.2; font-weight: 700; color: var(--aub-ardoise); }
.cdj-tel__lignes { display: grid; gap: 6px; margin: 12px 0 0; }
.cdj-tel__lignes i { display: block; height: 6px; border-radius: 3px; background: #DDD5CA; }
.cdj-tel__lignes i:nth-child(2) { width: 88%; } .cdj-tel__lignes i:nth-child(3) { width: 60%; }
.cdj-tel__champ { margin: 12px 0 0; padding: 9px 11px; border: 1px solid #CFC6BA; border-radius: 6px; background: #fff; font-size: 0.75rem; color: var(--aub-gris); }
.cdj-tel__bouton { margin: 14px 0 0; padding: 11px; border-radius: 6px; background: var(--aub-terre); text-align: center; font-size: 0.8125rem; font-weight: 600; color: #fff; }
.cdj-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(--aub-ardoise); color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); }
.cdj-tel__coche { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: 50%; background: #fff; }
.cdj-tel__coche svg { width: 18px; height: 18px; fill: none; stroke: var(--aub-ardoise); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cdj-tel__merci { margin: 0; font-size: 0.875rem; font-weight: 600; }
.cdj-tel__suite { margin: 0; font-size: 0.75rem; opacity: 0.85; }

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

.cdj-haut__texte { margin-top: clamp(2rem, 4vw, 3rem); }
.cdj-haut__sur { margin-bottom: var(--e-4); }
.cdj-haut__titre { margin: 0; font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.06 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.cdj-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; }
.cdj-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.cdj-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); }
.cdj-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.cdj-engagements li::before { content: "✓"; 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) { .cdj-haut .btn-plaque.btn--grand { width: 100%; white-space: normal; text-align: center; line-height: 1.35; } }

/* --------------------------------------------------------------------------
   2. Vos objectifs : quatre questions en cartes (comme les cartes des réseaux)
   -------------------------------------------------------------------------- */
.cdj-questions { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .cdj-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cdj-questions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cdj-question { display: flex; flex-direction: column; gap: var(--e-4); 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); }
.cdj-question:hover { translate: 0 -4px; box-shadow: 0 1.25rem 2rem -1.25rem rgba(2, 24, 24, 0.35); }
.cdj-question__picto { width: 34px; height: 34px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cdj-question p { margin: 0; font: 500 1.3125rem / 1.3 var(--f-titre); color: var(--petrole); }
.cdj-questions.est-visible .cdj-question { animation: cdj-monte 0.7s var(--ease-sortie) both; }
.cdj-questions.est-visible .cdj-question:nth-child(2) { animation-delay: 0.08s; }
.cdj-questions.est-visible .cdj-question:nth-child(3) { animation-delay: 0.16s; }
.cdj-questions.est-visible .cdj-question:nth-child(4) { animation-delay: 0.24s; }

/* --------------------------------------------------------------------------
   3. Vos publics : quatre portraits, chacun avec sa recherche ; trois étapes en colonnes
   -------------------------------------------------------------------------- */
.cdj-portraits { display: grid; gap: var(--e-6) var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (max-width: 39.99em) { .cdj-portraits { grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--e-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-3); scrollbar-color: rgba(224, 189, 142, 0.5) transparent; } .cdj-portrait { scroll-snap-align: start; } }
.cdj-portraits:focus-visible { outline: 2px solid var(--or); outline-offset: 6px; }
@media (min-width: 40em) { .cdj-portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cdj-portraits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); } }
.cdj-portrait { display: flex; flex-direction: column; }
.cdj-portrait__photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--petrole); box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(0, 0, 0, 0.6); }
.cdj-portrait__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease-sortie); }
.cdj-portrait:hover .cdj-portrait__photo img { scale: 1.04; }
.cdj-portrait__recherche { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); font: 400 0.8125rem / 1.2 var(--f-aub); color: #1F2A33; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdj-portrait__recherche svg { flex: none; width: 14px; height: 14px; fill: none; stroke: #5F6368; stroke-width: 2.4; stroke-linecap: round; }
.cdj-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); }
.cdj-portrait__quoi { margin: var(--e-2) 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--creme-doux); }
.cdj-portraits.est-visible .cdj-portrait { animation: cdj-monte 0.8s var(--ease-sortie) both; }
.cdj-portraits.est-visible .cdj-portrait:nth-child(2) { animation-delay: 0.1s; }
.cdj-portraits.est-visible .cdj-portrait:nth-child(3) { animation-delay: 0.2s; }
.cdj-portraits.est-visible .cdj-portrait:nth-child(4) { animation-delay: 0.3s; }

/* Les trois étapes : un panneau clair qui ressort sur le fond sombre, gros numéros, petits écrans, flèches entre les étapes */
.cdj-trois { counter-reset: none; display: grid; gap: 3.25rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 3.25rem clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem); list-style: none; border-radius: 10px; background: var(--papier); box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.7); }
@media (min-width: 56em) { .cdj-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } }
.cdj-trois__etape { position: relative; display: flex; flex-direction: column; padding: 2.75rem var(--e-5) var(--e-5); border-top: 3px solid var(--or-400); border-radius: 0 0 8px 8px; background: #FBF8F2; box-shadow: 0 1.25rem 2rem -1.5rem rgba(2, 24, 24, 0.35); }
@media (min-width: 56em) {
  .cdj-trois { gap: clamp(2rem, 4vw, 3.5rem); }
  .cdj-trois__etape:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(2rem, 4vw, 3.5rem) / 2 - 11px); width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--petrole) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23E0BD8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10h10M11 6l4 4-4 4'/%3E%3C/svg%3E") center / 70% no-repeat; z-index: 1; }
}
.cdj-trois__visuel { display: grid; align-content: center; gap: 8px; min-height: 7.5rem; margin-bottom: var(--e-2); padding: 14px; border-radius: 8px; background: linear-gradient(160deg, #EFE9DF, #E4DCCF); font-family: var(--f-aub); color: #1F2A33; }
.cdj-trois__recherche { display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 5px rgba(32, 33, 36, 0.2); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; }
.cdj-trois__recherche svg { flex: none; width: 13px; height: 13px; fill: none; stroke: #4285F4; stroke-width: 2.4; stroke-linecap: round; }
.cdj-trois__resultat { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 2px var(--or); }
.cdj-trois__resultat span, .cdj-trois__repere span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--aub-ardoise); font-size: 0.6875rem; font-weight: 700; color: #fff; }
.cdj-trois__resultat b { font-size: 0.875rem; font-weight: 500; color: #1A0DAB; }
.cdj-trois__resultat i { flex: 1; height: 6px; border-radius: 3px; background: #ECEDEF; }
.cdj-trois__page { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--aub-sable); border-left: 3px solid var(--aub-terre); }
.cdj-trois__page b { font-size: 0.9375rem; font-weight: 700; color: var(--aub-ardoise); }
.cdj-trois__page i { display: block; height: 5px; border-radius: 3px; background: #DDD5CA; }
.cdj-trois__page i:last-child { width: 70%; }
.cdj-trois__repere { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8125rem; color: var(--aub-ardoise); }
.cdj-trois__repere span { background: #188038; }
.cdj-trois__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.cdj-trois__boutons span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 1px solid #C9BFB2; border-radius: 999px; background: #fff; font-size: 0.875rem; font-weight: 600; color: var(--aub-ardoise); }
.cdj-trois__boutons .cdj-trois__appel { border-color: var(--aub-terre); background: var(--aub-terre); color: #fff; }
.cdj-trois__appel svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cdj-trois__num { position: absolute; z-index: 1; top: -32px; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; background: var(--petrole); box-shadow: 0 0 0 5px var(--papier), 0 0 0 6px var(--or-400), 0 12px 24px -10px rgba(2, 24, 24, 0.6); font: 500 2.125rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: var(--or-clair); }
.cdj-trois__titre { margin: var(--e-3) 0 0; text-align: center; font: 500 clamp(1.625rem, 1.4rem + 0.7vw, 2rem) / 1.15 var(--f-titre); color: var(--petrole); }
.cdj-trois__etape > p { margin: var(--e-2) 0 0; text-align: center; font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }
.cdj-trois.est-visible .cdj-trois__etape { animation: cdj-monte 0.7s var(--ease-sortie) both; }
.cdj-trois.est-visible .cdj-trois__etape:nth-child(2) { animation-delay: 0.35s; }
.cdj-trois.est-visible .cdj-trois__etape:nth-child(3) { animation-delay: 0.7s; }
.cdj-trois.est-visible .cdj-trois__num { animation: cdj-pastille 0.5s var(--ease-sortie) both; animation-delay: 0.4s; }
.cdj-trois.est-visible .cdj-trois__etape:nth-child(2) .cdj-trois__num { animation-delay: 0.75s; }
.cdj-trois.est-visible .cdj-trois__etape:nth-child(3) .cdj-trois__num { animation-delay: 1.1s; }

/* --------------------------------------------------------------------------
   4. Site internet : liste et maquette fictive annotée
   -------------------------------------------------------------------------- */
.cdj-site__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 64em) { .cdj-site__grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.cdj-coches { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.cdj-coches li { position: relative; padding-left: 2rem; font-size: var(--t-corps); line-height: 1.5; color: var(--encre); }
.cdj-coches li::before, .cdj-regles__liste li::before { content: ""; position: absolute; left: 0; top: 0.32em; 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; }
.cdj-exemple { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: 6px; background: var(--creme); }
.cdj-exemple__titre { margin: 0 0 var(--e-5); font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.25 var(--f-titre); color: var(--petrole); }
.cdj-navig { margin: 0; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 28px 50px -26px rgba(2, 24, 24, 0.5); }
.cdj-navig__barre { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: #ECE8E1; }
.cdj-navig__points { display: inline-flex; gap: 5px; }
.cdj-navig__points i { width: 9px; height: 9px; border-radius: 50%; background: #C9C2B6; }
.cdj-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; }
.cdj-maquette { font-family: var(--f-aub); color: #1F2A33; }
.cdj-maquette__entete { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--aub-ligne); }
.cdj-maquette__logo { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; font-size: 0.875rem; font-weight: 700; color: var(--aub-ardoise); }
.cdj-maquette__logo b { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; background: var(--aub-ardoise); font-size: 0.9375rem; color: #fff; }
.cdj-maquette__logo small { font-size: 0.6875rem; font-weight: 400; color: var(--aub-gris); }
.cdj-maquette__menu { display: inline-flex; gap: 14px; }
.cdj-maquette__menu i { width: 34px; height: 5px; border-radius: 3px; background: #DDD5CA; }
.cdj-maquette__corps { display: grid; gap: 42px 16px; padding: 36px 18px 24px; background: linear-gradient(180deg, var(--aub-sable), #fff 70%); }
@media (min-width: 40em) { .cdj-maquette__corps { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.cdj-maquette__principal, .cdj-maquette__encadre { position: relative; }
.cdj-maquette__titre { margin: 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.22; font-weight: 700; color: var(--aub-ardoise); }
.cdj-maquette__texte { margin: 10px 0 0; font-size: 0.875rem; line-height: 1.55; color: #3A4652; }
.cdj-maquette__bouton { position: relative; display: inline-block; margin: 14px 0 0; padding: 10px 16px; border-radius: 6px; background: var(--aub-terre); font-size: 0.875rem; font-weight: 600; color: #fff; }
.cdj-maquette__encadre { padding: 14px; border: 1px solid var(--aub-ligne); border-left: 3px solid var(--aub-terre); border-radius: 6px; background: #fff; }
.cdj-maquette__encadre p { margin: 0; padding: 7px 0; border-bottom: 1px solid #EEE8DF; font-size: 0.8125rem; color: var(--aub-ardoise); }
.cdj-maquette__encadre p:last-child { border-bottom: 0; }
.cdj-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); }
.cdj-repere--1 { top: -32px; left: 0; }
.cdj-repere--2 { top: -32px; left: 0; }
.cdj-repere--3 { top: -14px; right: -14px; }
.cdj-exemple.est-visible .cdj-repere { animation: cdj-pastille 0.45s var(--ease-sortie) both; }
.cdj-exemple.est-visible .cdj-repere--2 { animation-delay: 0.25s; }
.cdj-exemple.est-visible .cdj-repere--3 { animation-delay: 0.5s; }
.cdj-legendes { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .cdj-legendes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cdj-legendes li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
.cdj-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); }
.cdj-legendes p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre); }
.cdj-legendes b { font-weight: 500; color: var(--petrole); }

/* --------------------------------------------------------------------------
   5. Google et les IA : quatre vrais écrans (résultats, Maps, Aperçu IA, lien sponsorisé), en alternance.
   Chaque écran s'anime une fois quand il arrive à l'écran (moins de 5 s).
   -------------------------------------------------------------------------- */
.cdj-vue { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.cdj-vue + .cdj-vue { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (min-width: 60em) {
  .cdj-vue { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .cdj-vue--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .cdj-vue--inverse .cdj-vue__ecran { order: 2; }
}
.cdj-vue__ecran { position: relative; }
.cdj-vue__num { display: block; font: italic 300 2.5rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: var(--or); }
.cdj-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); }
.cdj-vue__texte p { margin: var(--e-3) 0 0; font-size: var(--t-corps); line-height: 1.65; color: var(--creme-doux); }
.cdj-vue__texte::after { content: ""; display: block; width: 48px; height: 1px; margin-top: var(--e-5); background: var(--or-400); }

/* Navigateur */
.cdj-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); }
.cdj-nav__barre { display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 14px; background: #ECEFF1; }
.cdj-nav__points { display: inline-flex; gap: 6px; }
.cdj-nav__points i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.cdj-nav__points i:nth-child(2) { background: #FEBC2E; } .cdj-nav__points i:nth-child(3) { background: #28C840; }
.cdj-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; }
.cdj-nav__url svg { flex: none; width: 13px; height: 13px; fill: none; stroke: #5F6368; stroke-width: 2; }

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

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

/* Google Maps */
.cdj-maps { position: relative; display: grid; min-height: 22rem; }
@media (min-width: 40em) { .cdj-maps { grid-template-columns: minmax(0, 1fr) 15.5rem; } }
.cdj-maps__plan { position: relative; min-height: 14rem; overflow: hidden; }
.cdj-maps__fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.cdj-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); }
.cdj-maps__epingle--vous { width: 34px; height: 34px; margin: -36px 0 0 -17px; background: #EA4335; display: grid; place-items: center; z-index: 1; }
.cdj-maps__epingle--vous b { rotate: 45deg; font: 700 0.875rem / 1 var(--f-aub); color: #fff; }
.cdj-maps__etiquette { position: absolute; left: var(--x); top: var(--y); margin: 6px 0 0 -40px; 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; }
.cdj-maps__fiche { border-left: 1px solid #EBEBEB; background: #fff; }
@media (max-width: 39.99em) { .cdj-maps__fiche { border-left: 0; border-top: 1px solid #EBEBEB; } }
.cdj-maps__fiche img { display: block; width: 100%; height: 7.5rem; object-fit: cover; object-position: 70% 40%; }
.cdj-maps__infos { padding: 12px 14px 14px; }
.cdj-maps__nom { margin: 0; font-size: 1.125rem; color: #202124; }
.cdj-maps__type { margin: 3px 0 0; font-size: 0.8125rem; color: #5F6368; }
.cdj-maps__horaire { margin: 3px 0 0; font-size: 0.8125rem; color: #5F6368; }
.cdj-maps__horaire b { font-weight: 400; color: #188038; }
.cdj-maps__boutons { display: flex; justify-content: space-between; gap: 4px; margin: 12px 0 0; padding-bottom: 12px; border-bottom: 1px solid #EBEBEB; }
.cdj-maps__boutons span { display: grid; justify-items: center; gap: 4px; font-size: 0.6875rem; color: #1A73E8; }
.cdj-maps__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E8F0FE; }
.cdj-maps__ico svg { width: 17px; height: 17px; fill: none; stroke: #1A73E8; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cdj-maps__ico--itin { background: #1A73E8; } .cdj-maps__ico--itin svg { stroke: #fff; }
.cdj-maps__ligne { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 0.8125rem; color: #3C4043; }
.cdj-maps__ligne svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #1A73E8; stroke-width: 2; }

/* Votre campagne (repère JustiComm, aux couleurs de la charte) */
.cdj-campagne { position: absolute; right: -0.75rem; bottom: -1.5rem; width: 15rem; padding: 14px 16px; border-radius: 8px; background: var(--papier); box-shadow: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, 0.7); }
.cdj-campagne__titre { margin: 0 0 8px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-texte); }
.cdj-campagne__mots { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cdj-campagne__mots li { position: relative; padding-left: 1.5rem; font-size: 0.875rem; color: var(--encre); }
.cdj-campagne__mots li::before { content: "✓"; position: absolute; left: 0; top: 0.1em; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--petrole); font-size: 0.625rem; color: var(--or); }
.cdj-campagne__mots .cdj-campagne__non { color: var(--taupe); text-decoration: line-through; }
.cdj-campagne__mots .cdj-campagne__non::before { content: "×"; background: #8E2A1E; color: #fff; font-size: 0.75rem; }
@media (max-width: 39.99em) { .cdj-campagne { position: relative; right: auto; bottom: auto; width: auto; margin: -1rem 0.75rem 0; } }

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

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

/* --------------------------------------------------------------------------
   6. Contenus, réseaux, identité, supports : liste à gauche, supports réunis sur une table à droite
   -------------------------------------------------------------------------- */
.cdj-convaincre__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60em) { .cdj-convaincre__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.cdj-services { display: grid; margin: 0; padding: 0; list-style: none; }
.cdj-services li { padding: var(--e-4) 0; border-top: 1px solid var(--lin); }
.cdj-services li:last-child { border-bottom: 1px solid var(--lin); }
.cdj-services__titre { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); }
.cdj-services__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); }
.cdj-services__titre a::after { content: " →"; color: var(--or-texte); }
.cdj-services__titre a:hover, .cdj-services__titre a:focus-visible { background-size: 100% 1px; }
.cdj-services p { margin: var(--e-2) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }

.cdj-table { position: relative; min-height: 27rem; 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, #EDE6DA, #DCD2C2); font-family: var(--f-aub); color: #1F2A33; overflow: hidden; }
.cdj-table > div { position: absolute; transition: translate var(--d) var(--ease-sortie); }
.cdj-table > div:hover { translate: 0 -4px; }
.cdj-table p { margin: 0; }
.cdj-doc { top: 9%; left: 8%; width: 10.5rem; padding: 16px 14px; border-radius: 3px; background: #fff; box-shadow: 0 16px 30px -16px rgba(2, 24, 24, 0.5); rotate: -4deg; }
.cdj-doc__sur { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aub-terre); }
.cdj-doc__titre { margin-top: 4px !important; font-size: 0.9375rem; line-height: 1.2; font-weight: 700; color: var(--aub-ardoise); }
.cdj-doc__lignes { display: grid; gap: 5px; margin-top: 10px !important; }
.cdj-doc__lignes i { display: block; height: 4px; border-radius: 2px; background: #E2DBD0; }
.cdj-doc__lignes i:nth-child(even) { width: 78%; }
.cdj-doc__pied { margin-top: 12px !important; padding-top: 6px; border-top: 1px solid #EEE8DF; font-size: 0.5625rem; color: var(--aub-gris); }
.cdj-post { top: 7%; right: 7%; width: 13rem; padding: 10px; border-radius: 8px; background: #fff; box-shadow: 0 16px 30px -16px rgba(2, 24, 24, 0.5); rotate: 3deg; }
.cdj-post__tete { display: flex; align-items: center; gap: 7px; }
.cdj-post__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: var(--aub-ardoise); font-size: 0.6875rem; font-weight: 700; color: #fff; }
.cdj-post__tete span:last-child { display: grid; line-height: 1.2; font-size: 0.6875rem; }
.cdj-post__tete small { font-size: 0.5625rem; color: var(--aub-gris); }
.cdj-post__lignes { display: grid; gap: 4px; margin-top: 8px !important; }
.cdj-post__lignes i { display: block; height: 4px; border-radius: 2px; background: #E2DBD0; }
.cdj-post__lignes i:nth-child(2) { width: 70%; }
.cdj-post__visuel { display: grid; place-items: end start; height: 5rem; margin-top: 8px; padding: 8px; border-radius: 5px; background: linear-gradient(135deg, var(--aub-ardoise), #34506B); }
.cdj-post__visuel span { font-size: 0.75rem; font-weight: 600; color: #fff; }
.cdj-post__actions { display: flex; gap: 10px; margin-top: 8px !important; }
.cdj-post__actions i { width: 26px; height: 5px; border-radius: 3px; background: #E2DBD0; }
.cdj-charte { bottom: 12%; left: 12%; width: 12rem; padding: 12px; border-radius: 8px; background: #fff; box-shadow: 0 16px 30px -16px rgba(2, 24, 24, 0.5); rotate: 2deg; }
.cdj-charte__logo { display: flex; align-items: center; gap: 8px; }
.cdj-charte__logo b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--aub-ardoise); font-size: 1.0625rem; color: #fff; }
.cdj-charte__logo span { display: grid; line-height: 1.2; font-size: 0.8125rem; font-weight: 700; color: var(--aub-ardoise); }
.cdj-charte__logo small { font-size: 0.5625rem; font-weight: 400; color: var(--aub-gris); }
.cdj-charte__teintes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px !important; }
.cdj-charte__teintes i { display: block; aspect-ratio: 1; border-radius: 50%; }
.cdj-charte__teintes i:nth-child(1) { background: var(--aub-ardoise); }
.cdj-charte__teintes i:nth-child(2) { background: var(--aub-terre); }
.cdj-charte__teintes i:nth-child(3) { background: var(--aub-sable); box-shadow: inset 0 0 0 1px var(--aub-ligne); }
.cdj-charte__teintes i:nth-child(4) { background: var(--aub-gris); }
.cdj-charte__police { margin-top: 10px !important; font-size: 0.75rem; color: var(--aub-gris); }
.cdj-papier { bottom: 9%; right: 9%; width: 11.5rem; padding: 12px; border-radius: 3px; background: #fff; box-shadow: 0 16px 30px -16px rgba(2, 24, 24, 0.5); rotate: -3deg; }
.cdj-papier__tete { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; border-bottom: 2px solid var(--aub-terre); font-size: 0.6875rem; font-weight: 700; color: var(--aub-ardoise); }
.cdj-papier__tete b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--aub-ardoise); font-size: 0.5625rem; color: #fff; }
.cdj-papier__lignes { display: grid; gap: 5px; margin-top: 10px !important; }
.cdj-papier__lignes i { display: block; height: 4px; border-radius: 2px; background: #E2DBD0; }
.cdj-papier__lignes i:nth-child(3) { width: 60%; }
.cdj-papier__signature { margin-top: 12px; padding: 7px; border-left: 2px solid var(--aub-terre); background: var(--aub-sable); font-size: 0.5625rem; line-height: 1.4; color: var(--aub-gris); }
.cdj-papier__signature b { display: block; font-size: 0.6875rem; color: var(--aub-ardoise); }
@media (max-width: 29.99em) {
  .cdj-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-height: 0; padding: 18px 14px; }
  .cdj-table > div { position: static; width: auto; rotate: none; }
}

/* --------------------------------------------------------------------------
   7. Ventes aux enchères : photo de la salle, catalogue fictif posé dessus
   -------------------------------------------------------------------------- */
.cdj-ventes__grille { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 60em) { .cdj-ventes__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; } }
.cdj-salle { position: relative; margin: 0 0 3rem; }
.cdj-salle__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; box-shadow: 0 2rem 3rem -1.5rem rgba(0, 0, 0, 0.6); }
.cdj-catalogue { position: absolute; right: -1rem; bottom: -3rem; width: min(19rem, 70%); padding: 16px; border-radius: 6px; background: var(--aub-sable); font-family: var(--f-aub); color: #1F2A33; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7); }
.cdj-catalogue p { margin: 0; }
.cdj-catalogue__entete { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--aub-ligne); font-size: 0.6875rem; color: var(--aub-gris); }
.cdj-catalogue__logo { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--aub-ardoise); }
.cdj-catalogue__logo b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: var(--aub-ardoise); font-size: 0.625rem; color: #fff; }
.cdj-catalogue__vente { margin-top: 10px !important; font-size: 1rem; font-weight: 700; color: var(--aub-ardoise); }
.cdj-catalogue__expo { margin-top: 2px !important; font-size: 0.75rem; color: var(--aub-gris); }
.cdj-catalogue__lots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cdj-lot { padding: 8px 6px 6px; border-radius: 5px; background: #fff; text-align: center; box-shadow: 0 8px 18px -12px rgba(2, 24, 24, 0.4); }
.cdj-lot svg { width: 100%; height: 2.5rem; fill: none; stroke: var(--aub-ardoise); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cdj-lot p { margin-top: 4px !important; font-size: 0.625rem; color: var(--aub-gris); }
.cdj-catalogue__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px !important; font-size: 0.75rem; color: var(--aub-ardoise); }
.cdj-catalogue__bas span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.cdj-catalogue__bouton { padding: 7px 12px; border-radius: 6px; background: var(--aub-terre); font-weight: 600; color: #fff; }
@media (max-width: 39.99em) { .cdj-salle { margin-bottom: 0; } .cdj-catalogue { position: relative; right: auto; bottom: auto; width: auto; margin: -2.5rem 0.75rem 0; } }
.cdj-salle.est-visible .cdj-catalogue { animation: cdj-monte 0.7s var(--ease-sortie) 0.2s both; }

.cdj-points { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.cdj-points li { position: relative; padding-left: 1.5rem; font-size: var(--t-corps); line-height: 1.55; color: var(--creme-doux); }
.cdj-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--or); }
.cdj-points b { font-weight: 500; color: var(--creme); }
.cdj-points--clair li { color: var(--encre); }
.cdj-points--clair li::before { background: var(--cuivre); }
.cdj-points--clair b { color: var(--petrole); }
.cdj-ventes .cdj-texte { color: var(--creme-doux); }

/* --------------------------------------------------------------------------
   8. Assistant IA : appel et fiche d'appel
   -------------------------------------------------------------------------- */
.cdj-assistant__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60em) { .cdj-assistant__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; } }
.cdj-appel { margin: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: 14px; background: linear-gradient(160deg, #2B4560, var(--aub-ardoise)); font-family: var(--f-aub); box-shadow: 0 30px 60px -30px rgba(2, 24, 24, 0.7); }
.cdj-appel__ligne { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.cdj-appel__icone { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--aub-terre); }
.cdj-appel__icone svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.cdj-appel__ligne p { margin: 0; display: grid; line-height: 1.25; font-size: 0.9375rem; color: #fff; }
.cdj-appel__ligne small { font-size: 0.8125rem; color: #C9D3DD; }
.cdj-appel__onde { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; height: 22px; }
.cdj-appel__onde i { width: 3px; height: 100%; border-radius: 2px; background: #E7B9A6; transform-origin: center; scale: 1 0.5; }
.cdj-appel.est-visible .cdj-appel__onde i { animation: cdj-onde 0.9s ease-in-out 3 both; }
.cdj-appel.est-visible .cdj-appel__onde i:nth-child(2n) { animation-delay: 0.15s; }
.cdj-appel.est-visible .cdj-appel__onde i:nth-child(3n) { animation-delay: 0.3s; }
.cdj-appel__bulle { width: fit-content; max-width: 88%; margin: 14px 0 0 auto; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: rgba(255, 255, 255, 0.12); font-size: 0.9375rem; line-height: 1.45; color: #fff; }
.cdj-appel__bulle--ia { margin: 14px auto 0 0; border-radius: 14px 14px 14px 4px; background: rgba(164, 74, 42, 0.45); }
.cdj-appel__fiche { margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: #fff; }
.cdj-appel__fiche-titre { margin: 0 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aub-terre); }
.cdj-appel__fiche dl { display: grid; gap: 6px; margin: 0; }
.cdj-appel__fiche dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--aub-ligne); font-size: 0.875rem; }
.cdj-appel__fiche dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.cdj-appel__fiche dt { color: var(--aub-gris); }
.cdj-appel__fiche dd { margin: 0; text-align: right; font-weight: 600; color: var(--aub-ardoise); }
.cdj-appel.est-visible .cdj-appel__bulle { animation: cdj-monte 0.5s var(--ease-sortie) 0.3s both; }
.cdj-appel.est-visible .cdj-appel__bulle + .cdj-appel__bulle { animation-delay: 0.9s; }
.cdj-appel.est-visible .cdj-appel__fiche { animation: cdj-monte 0.6s var(--ease-sortie) 1.5s both; }

/* --------------------------------------------------------------------------
   9. Vos règles, notre savoir-faire : liste cochée, encadré pétrole à double filet
   -------------------------------------------------------------------------- */
.cdj-regles__liste { display: grid; gap: 0 var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (min-width: 52em) { .cdj-regles__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cdj-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); }
.cdj-regles__liste li::before { top: calc(var(--e-4) + 0.2em); }
.cdj-regles__liste b { font-weight: 500; color: var(--petrole); }
.cdj-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; }
.cdj-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; }
.cdj-cadre__note { margin: var(--e-3) 0 0; font-size: 1rem; color: var(--creme-doux); }

/* --------------------------------------------------------------------------
   10. Méthode et budget : quatre étapes en colonnes, puis rémunération et tarifs
   -------------------------------------------------------------------------- */
.cdj-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) { .cdj-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cdj-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.cdj-etapes li { padding-top: var(--e-5); }
@media (min-width: 64em) { .cdj-etapes li { padding: var(--e-6) var(--e-5) 0; border-left: 1px solid rgba(224, 189, 142, 0.22); } .cdj-etapes li:first-child { padding-left: 0; border-left: 0; } }
.cdj-etapes__num { display: block; font: 300 2.5rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: var(--or); }
.cdj-etapes p { margin: var(--e-3) 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--creme-doux); }
.cdj-etapes b { font-weight: 500; color: var(--creme); }
.cdj-methode__grille { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 60em) { .cdj-methode__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
@media (max-width: 59.99em) { .cdj-budget { order: -1; } }
.cdj-remuneration { 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); }
.cdj-budget { 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); }
.cdj-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); }
.cdj-budget__titre .cdj-or { color: var(--or-texte); }
.cdj-budget__table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cdj-budget__table th, .cdj-budget__table td { padding: 0.7rem 0; border-bottom: 1px solid var(--lin); text-align: left; vertical-align: top; }
.cdj-budget__table thead th { padding-top: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.cdj-budget__table tbody th { padding-right: var(--e-4); font-weight: 400; color: var(--encre); }
.cdj-budget__table tbody th a { color: var(--petrole); text-decoration-color: var(--or-400); text-underline-offset: 3px; }
.cdj-budget__table td { white-space: nowrap; text-align: right; font-weight: 500; color: var(--petrole); }
.cdj-budget__table thead th:last-child { text-align: right; }
.cdj-budget__offert td { color: var(--or-texte); }
.cdj-budget__note { margin: var(--e-4) 0 0; font-size: 0.9375rem; color: var(--taupe); }

/* --------------------------------------------------------------------------
   11. Nice et toute la France : carte de France de nuit. Le contour se dessine, les liens partent
   de Nice, les villes s'allument en vague ; Nice clignote (bouton pause).
   -------------------------------------------------------------------------- */
.cdj-lieu__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60em) { .cdj-lieu__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.cdj-lieu .cdj-texte { margin-top: 0; }
.cdj-lieu__cartes { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .cdj-lieu__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cdj-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); }
.cdj-lieu__carte svg { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cdj-lieu__carte p { display: grid; margin: 0; line-height: 1.35; }
.cdj-lieu__carte b { font: 500 1.25rem / 1.2 var(--f-titre); color: var(--petrole); }
.cdj-lieu__carte span { font-size: 0.9375rem; color: var(--taupe); }

.cdj-carte { position: relative; margin: 0; padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.25rem); border-radius: 12px; background: radial-gradient(ellipse 55% 45% at 82% 68%, rgba(176, 99, 57, 0.22), transparent 70%), radial-gradient(ellipse 80% 70% at 45% 40%, 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; }
.cdj-carte__svg { display: block; width: 100%; height: auto; overflow: visible; }
#cdj-points circle { fill: var(--or); opacity: 0.32; }
.cdj-carte__trame { fill: url(#cdj-points); }
.cdj-carte__contour { fill: none; stroke: var(--or); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
.cdj-carte__arc { fill: none; stroke: var(--or-clair); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.6; }
.cdj-carte__ville { fill: var(--or); transform-box: fill-box; transform-origin: center; }
.cdj-carte__ville--grande { fill: var(--or-clair); filter: drop-shadow(0 0 4px rgba(242, 217, 172, 0.7)); }
.cdj-carte__nom { fill: var(--creme); font: 400 13px / 1 var(--f-texte); letter-spacing: 0.02em; opacity: 0.9; }
.cdj-carte__nom--nice { fill: var(--or-clair); font: italic 500 22px / 1 var(--f-titre); opacity: 1; }
.cdj-carte__nice { fill: var(--cuivre); stroke: var(--or-clair); stroke-width: 2; }
.cdj-carte__onde { fill: none; stroke: var(--or-clair); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cdj-carte__halo { opacity: 0.9; }
.cdj-carte__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); }
.cdj-carte__legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.cdj-carte__puce { width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 3px rgba(176, 99, 57, 0.3); }
.cdj-carte__puce--ville { width: 7px; height: 7px; background: var(--or-clair); box-shadow: 0 0 6px rgba(242, 217, 172, 0.8); }
.cdj-carte__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 .cdj-carte__pause { display: grid; }
.cdj-carte__pause svg { width: 18px; height: 18px; fill: currentColor; }
.cdj-carte__lire { display: none; }
.cdj-carte.est-en-pause .cdj-carte__lire { display: block; }
.cdj-carte.est-en-pause .cdj-carte__arret { display: none; }
.cdj-carte__pause:hover { background: var(--petrole); }
.cdj-carte__pause:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* Avant l'arrivée à l'écran (avec JavaScript) */
.js .cdj-carte:not(.est-visible) .cdj-carte__contour { stroke-dashoffset: 1; }
.js .cdj-carte:not(.est-visible) .cdj-carte__arc { stroke-dashoffset: 1; }
.js .cdj-carte:not(.est-visible) .cdj-carte__trame, .js .cdj-carte:not(.est-visible) .cdj-carte__nom { opacity: 0; }
.js .cdj-carte:not(.est-visible) .cdj-carte__ville { opacity: 0.15; }
/* À l'arrivée : contour (1,4 s), trame, liens depuis Nice et villes qui s'allument en vague (jusqu'à 4,6 s) */
.js .cdj-carte.est-visible .cdj-carte__contour { animation: cdj-trace 1.4s ease-in-out both; }
.js .cdj-carte.est-visible .cdj-carte__trame { animation: cdj-apparait-trame 1.2s ease 0.6s both; }
.js .cdj-carte.est-visible .cdj-carte__arc { animation: cdj-trace 1.1s ease-out var(--d) both; }
.js .cdj-carte.est-visible .cdj-carte__ville { animation: cdj-allume 0.5s ease-out var(--d) both; }
.js .cdj-carte.est-visible .cdj-carte__ville--grande { animation: cdj-allume 0.5s ease-out var(--d) both, cdj-scintille 3.2s ease-in-out calc(var(--d) + 1.2s) infinite; }
.js .cdj-carte.est-visible.est-en-pause .cdj-carte__ville--grande { animation-play-state: paused; }
@keyframes cdj-scintille { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.js .cdj-carte.est-visible .cdj-carte__nom { animation: cdj-apparait-nom 0.5s ease var(--d) both; }
.js .cdj-carte.est-visible .cdj-carte__nom--nice { animation: none; }
/* Nice clignote en continu (bouton pause) */
.cdj-carte .cdj-carte__onde { animation: cdj-pulse 2.4s ease-out infinite; }
.cdj-carte .cdj-carte__onde--2 { animation-delay: 1.2s; }
.cdj-carte .cdj-carte__nice { animation: cdj-battement 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cdj-carte.est-en-pause .cdj-carte__onde, .cdj-carte.est-en-pause .cdj-carte__nice { animation-play-state: paused; }
@media (max-width: 39.99em) { .cdj-carte__nom { font-size: 20px; } .cdj-carte__nom--nice { font-size: 32px; } }
@keyframes cdj-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cdj-apparait-trame { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdj-apparait-nom { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes cdj-allume { 0% { opacity: 0.15; scale: 0.4; } 60% { opacity: 1; scale: 1.8; } 100% { opacity: 1; scale: 1; } }
@keyframes cdj-pulse { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 4.2; } }
@keyframes cdj-battement { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }

/* --------------------------------------------------------------------------
   12. FAQ (composant commun faq5)
   -------------------------------------------------------------------------- */
.cdj.faq5 .faq5__titre { max-width: none; text-align: left; }

/* --------------------------------------------------------------------------
   Appel final sur photo assombrie, texte à gauche
   -------------------------------------------------------------------------- */
.cdj-final { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 7rem); background: var(--petrole-profond); }
.cdj-final__fond { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.cdj-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) { .cdj-final::before { background: rgba(2, 24, 24, 0.84); } }
.cdj-final__contenu { position: relative; z-index: 2; }
@media (min-width: 60em) { .cdj-final__contenu > * { max-width: 36rem; } }
.cdj-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); }
.cdj-final .titre-section { color: var(--creme); }
.cdj-final__texte { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
.cdj-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); }
.cdj-final__contact a { color: var(--creme); text-underline-offset: 3px; }
.cdj-final__contact a:hover { color: var(--or-clair); }

/* --------------------------------------------------------------------------
   Moins d'animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cdj *, .cdj *::before, .cdj *::after { animation: none !important; transition: none !important; }
  .cdj-question:hover, .cdj-table > div:hover { translate: none; }
  .cdj-portrait:hover .cdj-portrait__photo img { scale: none; }
  .cdj-g__requete, .cdj-apercu__phrase, .cdj-apercu__lignes { clip-path: none !important; }
  .cdj-carte__pause { display: none !important; }
  .cdj-carte__onde { opacity: 0 !important; }
}

/* --------------------------------------------------------------------------
   Téléphone (≤ 480 px)
   -------------------------------------------------------------------------- */
@media (max-width: 29.99em) {
  .cdj-budget__table { font-size: 0.9375rem; }
}

/* 25/10/2026 (contrôle des agents) : au téléphone, « Marseille » passe à gauche de son point, loin de « Nice » */
@media (max-width: 39.99em) { .cdj-carte__nom[x="451.8"] { text-anchor: end; translate: -14px 0; } }

/* --------------------------------------------------------------------------
   Contrôle en ligne de Pauline (25/10/2026), défauts entre 960 et 1180 px
   -------------------------------------------------------------------------- */
/* Recherches dessinées sur les photos : sur deux lignes plutôt que coupées net */
@media (min-width: 64em) and (max-width: 79.99em) {
  .cdj-portrait__recherche, .cdj-trois__recherche { white-space: normal; line-height: 1.25; border-radius: 18px; }
}
/* Appel final : voile plus couvrant, la fin du titre ne passe plus sur la lampe claire de la photo */
@media (min-width: 60em) and (max-width: 79.99em) {
  .cdj-final::before { background: linear-gradient(90deg, rgba(2, 24, 24, 0.96) 0%, rgba(2, 24, 24, 0.9) 50%, rgba(2, 24, 24, 0.4) 72%, rgba(2, 24, 24, 0.1) 92%); }
}