/* ==========================================================================
   JustiComm · page « Contenus » (rédaction web juridique et supports de communication)
   v1, 23/10/2026 : texte v4.1 validé par Raoudha ; même esprit que les pages Réseaux sociaux,
   Référencement local et Publicité en ligne (fil d'Ariane, vidéo pleine largeur, texte clair dessous,
   titres pétrole à fin dorée en italique, encadrés centrés, appel final sombre).
   Visuels propres à la page : vidéo Remotion du haut (contenus/), vitrine des six formats,
   modèle de fiche pratique, table des supports (plaquette qui s'ouvre, carte qui se retourne),
   anatomie d'un contenu, relecture ✕ / ✓, rail de la méthode, quatre offres.
   Animations jouées une fois (moins de 5 s) ; état final fixe sans JavaScript ou avec « moins d'animations ».
   Préfixe : cn-
   ========================================================================== */

.cn-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .cn-or, .surface-nuit .cn-or { color: var(--or-clair, var(--or)); }
.cn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(2rem, 3.5vw, 3rem); }
.cn-actions--centre { justify-content: center; }
.cn-actions .lien-suite { margin-top: 0; }
.cn-actions .btn-cartouche { min-height: 60px; }
.cn-visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sections aérées, titres et textes sur toute la largeur (Raoudha : pas de coupure forcée) */
.cn-s { padding-block: clamp(4.5rem, 2.5rem + 5vw, 7.5rem); }
.cn-s .titre-section, .cn-final .titre-section, .faq5 .faq5__titre { max-width: none; text-wrap: pretty; font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.375rem); }
.cn-tete { text-align: left; }
.cn-chapo { margin-top: var(--e-5); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.cn-texte { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.cn-texte--centre { text-align: center; }
.surface-sombre .cn-texte, .surface-nuit .cn-texte { color: var(--creme-doux); }
.cn-fort { margin-top: var(--e-5); font: italic 500 clamp(1.375rem, 1.1rem + 1vw, 1.75rem) / 1.25 var(--f-titre); color: var(--or-clair); }

/* Encadré fort : centré, pleine largeur, 22 → 32 px */
.cn-encadre {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1rem, 4vw, 3rem);
  border-block: 1px solid var(--filet-couleur);
  text-align: center; text-wrap: balance;
  font: 500 clamp(1.375rem, 1.1rem + 1vw, 2rem) / 1.3 var(--f-titre); color: var(--titre);
}

.cn-renvoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); font-size: var(--t-legende); color: var(--texte-doux); }
.cn-renvoi .lien-suite { margin-top: 0; }
.cn-renvoi--centre { justify-content: center; text-align: center; }
.cn-renvoi--doux { margin-top: var(--e-4); font-style: italic; }
.surface-sombre .cn-renvoi, .surface-nuit .cn-renvoi { color: var(--creme-doux); }

.cn-pastille { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 999px; background: rgba(176, 99, 57, 0.12); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8A4A28; }

/* Lignes de texte simulées (maquettes) */
.cn-l { display: block; width: var(--l, 80%); height: 0.42em; margin-top: 0.45em; border-radius: 99px; background: var(--lin); }
.cn-l--or { background: #CDB48A; }
.cn-l--petrole { background: var(--petrole); opacity: 0.85; }
.cn-l--creme { background: rgba(238, 234, 225, 0.85); }
.cn-l--gros { height: 0.7em; }

@keyframes cn-apparait { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes cn-pop { 0% { opacity: 0; scale: 0.4; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }

/* --------------------------------------------------------------------------
   1. Haut de page : fil d'Ariane, vidéo pleine largeur, texte clair dessous
   -------------------------------------------------------------------------- */
body:has(.cn-haut) .entete__fond { opacity: 1; }
.cn-haut { position: relative; overflow: hidden; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
.cn-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); }
.cn-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 3px; }
.cn-ariane [aria-current] { color: var(--encre); }
.cn-video { position: relative; margin: 0; }
.cn-video__media { display: block; width: 100%; height: auto; background: var(--petrole-profond); }
.cn-video--bandeau { background: var(--petrole-profond); }
.cn-video--bandeau .cn-video__media { aspect-ratio: 1280 / 600; object-fit: cover; }
@media (max-width: 47.99em) { .cn-video--bandeau .cn-video__media { aspect-ratio: 720 / 900; object-fit: contain; } }
.cn-video__bouton {
  position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1rem 0 0.85rem; border: 1px solid rgba(224, 189, 142, 0.55); border-radius: 999px;
  background: rgba(6, 42, 43, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 0.875rem / 1 var(--f-texte); letter-spacing: 0.04em; color: var(--creme); cursor: pointer;
  transition: background var(--d) var(--ease-sortie);
}
.cn-video__bouton:hover { background: rgba(6, 42, 43, 0.95); }
.cn-video__bouton:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
@media (max-width: 47.99em) { .cn-video__bouton { top: auto; bottom: 0.75rem; right: auto; left: 0.75rem; } }
.cn-video__icone { position: relative; width: 12px; height: 12px; }
[data-etat="pause"] .cn-video__icone { width: 11px; border-left: 3.5px solid var(--or); border-right: 3.5px solid var(--or); }
[data-etat="lecture"] .cn-video__icone { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--or); }

.cn-haut__texte { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.cn-haut__titre { margin-top: var(--e-4); font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.08 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.cn-haut__accroche { margin-top: var(--e-5); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.38 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.cn-haut__intro { margin-top: var(--e-3); font-size: var(--t-legende); line-height: 1.65; color: var(--encre); }
.cn-haut .cn-actions { margin-top: var(--e-5); }
.cn-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: clamp(1.5rem, 3vw, 2rem) 0 0; font-size: 0.9375rem; color: var(--encre); }
.cn-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.cn-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); }

/* En bref : quatre réponses courtes (lisibles par les moteurs et les IA) */
.cn-bref { position: relative; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2rem); background: #FFFDF8; box-shadow: 0 0 0 1px var(--lin), 0 24px 50px -32px rgba(6, 42, 43, 0.35); clip-path: polygon(var(--pan) 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%, 0 var(--pan)); }
.cn-bref::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--or-400), var(--cuivre) 60%, transparent); }
.cn-bref__titre { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #8A4A28; }
.cn-bref__liste { display: grid; gap: var(--e-5); margin-top: var(--e-4); }
@media (min-width: 48em) { .cn-bref__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .cn-bref__liste { grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: 0; } .cn-bref__liste > div { padding: 0 1.5rem; border-left: 1px solid var(--lin); } .cn-bref__liste > div:first-child { padding-left: 0; border-left: 0; } }
.cn-bref dt { font: 500 1.25rem / 1.2 var(--f-titre); color: var(--petrole); }
.cn-bref dd { margin: 0.4rem 0 0; font-size: 0.9875rem; line-height: 1.55; color: var(--encre); }

.cn-professions { position: relative; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: var(--e-3); font-size: 0.9375rem; }
.cn-professions::before { content: ""; position: absolute; top: 0; left: var(--marge); right: var(--marge); height: 1px; background: var(--lin); }
.cn-professions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--taupe); text-decoration: none; }
.cn-professions a:hover, .cn-professions a:focus-visible { color: var(--petrole); }
@media (max-width: 30em) { .cn-haut .surtitre { font-size: 0.8125rem; letter-spacing: 0.12em; } }

/* --------------------------------------------------------------------------
   2. Vos clients cherchent d'abord une réponse : questions en bulles
   -------------------------------------------------------------------------- */
.cn-question__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60em) { .cn-question__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cn-bulles { display: grid; gap: 1rem; }
.cn-bulle { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.25rem 0.9rem; width: min(100%, 31rem); padding: 1rem 1.25rem; border-radius: 1.4rem 1.4rem 1.4rem 0.35rem; background: #FFFDF8; box-shadow: 0 0 0 1px rgba(224, 189, 142, 0.45), 0 18px 36px -22px rgba(6, 42, 43, 0.45); }
.cn-bulle--droite { justify-self: end; border-radius: 1.4rem 1.4rem 0.35rem 1.4rem; }
.cn-bulle q { quotes: "«\202F" "\202F»"; font: italic 500 clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem) / 1.25 var(--f-titre); color: var(--petrole); }
.cn-bulle q::before, .cn-bulle q::after { color: var(--or-texte); }
.cn-bulle__src { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--petrole); }
.cn-bulle__src::before { content: ""; width: 1.05rem; height: 1.05rem; background: var(--or); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.cn-bulle__src--recherche { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5'/%3E%3C/svg%3E"); }
.cn-bulle__src--ia { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.8L21 11l-6.8 2.2L12 20l-2.2-6.8L3 11l6.8-2.2z'/%3E%3C/svg%3E"); }
.cn-bulle__rep { display: grid; gap: 6px; padding-top: 0.35rem; }
.cn-bulle__rep i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #CDB48A, rgba(205, 180, 138, 0.35)); transform-origin: left; }
.cn-bulle__rep i:last-child { width: 62%; }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-bulles:not(.est-visible) .cn-bulle { opacity: 0; }
  .js .cn-bulles.est-visible .cn-bulle { animation: cn-bulle 0.6s var(--ease-sortie) calc(var(--i) * 0.45s) both; }
  .js .cn-bulles.est-visible .cn-bulle__rep i { animation: cn-trace 0.7s var(--ease-sortie) calc(0.4s + var(--i) * 0.45s) both; }
}
@keyframes cn-bulle { 0% { opacity: 0; translate: 0 18px; scale: 0.94; } 100% { opacity: 1; translate: none; scale: 1; } }
@keyframes cn-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   3. Ce que nous écrivons : six formats + vitrine qui change de maquette
   -------------------------------------------------------------------------- */
.cn-formats__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 64em) { .cn-formats__grille { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.cn-formats__liste { display: grid; gap: 0.25rem; }
.cn-format { position: relative; padding: 1.1rem 1.25rem 1.1rem 1.4rem; border-left: 2px solid var(--lin); cursor: default; transition: background var(--d) var(--ease-sortie), border-color var(--d) var(--ease-sortie); }
.js .cn-format { cursor: pointer; }
.cn-format.est-actif { border-left-color: var(--or); background: linear-gradient(90deg, rgba(224, 189, 142, 0.18), rgba(224, 189, 142, 0)); }
.cn-format:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 2px; }
.cn-format__titre { display: flex; align-items: baseline; gap: 0.75rem; font: 500 clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem) / 1.15 var(--f-titre); color: var(--petrole); }
.cn-format__titre::before { content: attr(data-num); content: attr(data-num) / ""; font: 500 0.875rem / 1 var(--f-texte); letter-spacing: 0.08em; color: #8A4A28; }
.cn-format p { margin-top: 0.45rem; font-size: var(--t-legende); line-height: 1.6; color: var(--texte); }

/* La vitrine : scène pétrole, une maquette visible à la fois */
.cn-vitrine { position: relative; container-type: inline-size; }
@media (min-width: 64em) { .cn-vitrine { position: sticky; top: calc(var(--h-entete) + 1.5rem); } }
@media (max-width: 63.99em) { .cn-vitrine { order: -1; } }   /* téléphone et tablette : la vitrine avant la liste, visible tout de suite */
.cn-vitrine__scene { position: relative; aspect-ratio: 1 / 0.92; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 35%, #17504E, var(--petrole) 55%, var(--petrole-profond)); clip-path: polygon(var(--pan) 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%, 0 var(--pan)); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.3); }
.cn-vitrine__scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 10%, rgba(242, 217, 172, 0.18), transparent 40%); pointer-events: none; }
.cn-maq { position: absolute; left: 7cqi; right: 7cqi; top: 50%; transform: translateY(-50%); font-size: 2.7cqi; color: var(--encre); opacity: 0; visibility: hidden; translate: 0 4cqi; scale: 0.97; transition: opacity 0.45s var(--ease-sortie), translate 0.6s var(--ease-sortie), scale 0.6s var(--ease-sortie), visibility 0s linear 0.45s; }
.cn-maq.est-active { opacity: 1; visibility: visible; translate: none; scale: 1; transition-delay: 0s; }
.cn-maq--page, .cn-maq--article { border-radius: 1.6cqi; overflow: hidden; background: #FFFDF8; box-shadow: 0 5cqi 9cqi -3cqi rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(224, 189, 142, 0.45); }
.cn-nav { display: flex; align-items: center; gap: 1.1cqi; height: 5.6cqi; padding: 0 2.2cqi; background: #EFE9DD; border-bottom: 1px solid var(--lin); }
.cn-nav i { width: 1.5cqi; height: 1.5cqi; border-radius: 50%; background: #D08A5E; }
.cn-nav i:nth-child(2) { background: var(--or); }
.cn-nav i:nth-child(3) { background: #A1BFB6; }
.cn-nav b { flex: 1; height: 3cqi; margin-left: 1.5cqi; border-radius: 99px; background: #FFFDF8; }

/* Page de site */
.cn-site__menu { display: flex; align-items: center; gap: 2cqi; padding: 2cqi 3cqi; font-size: 0.82em; color: var(--taupe); }
.cn-site__logo { width: 4cqi; height: 4cqi; margin-right: auto; border-radius: 50%; box-shadow: inset 0 0 0 0.35cqi var(--or); background: var(--petrole); }
.cn-site__contact { padding: 0.8cqi 2cqi; border-radius: 99px; background: var(--petrole); color: var(--or); }
.cn-site__hero { padding: 4cqi 4cqi 4.5cqi; background: linear-gradient(135deg, var(--petrole), var(--petrole-profond)); font-size: 1.6em; }
.cn-site__hero .cn-l--or { font-size: 0.5em; }
.cn-site__bouton, .cn-art__bouton, .cn-tri__bouton { display: inline-block; margin-top: 1.2em; padding: 0.65em 1.6em; border-radius: 99px; background: var(--or); font: 500 0.55em / 1 var(--f-texte); color: var(--petrole-profond); }
.cn-site__cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; padding: 3cqi 4cqi 4cqi; }
.cn-site__cartes span { padding: 2cqi; border: 1px solid var(--lin); border-radius: 1cqi; }
.cn-site__cartes b { display: block; width: 4.5cqi; height: 4.5cqi; margin-bottom: 1.4cqi; border-radius: 50%; background: rgba(224, 189, 142, 0.35); box-shadow: inset 0 0 0 0.3cqi var(--or); }

/* Article */
.cn-art { padding: 3.5cqi 5cqi 4cqi; }
.cn-art__sur { font: 500 0.78em / 1 var(--f-texte); letter-spacing: 0.18em; text-transform: uppercase; color: #8A4A28; }
.cn-art__titre { margin-top: 0.6em; font: 500 2.2em / 1.06 var(--f-titre); color: var(--petrole); }
.cn-art__meta { margin-top: 0.7em; font-size: 0.85em; color: var(--taupe); }
.cn-art__meta span { color: var(--or); }
.cn-art__reponse { margin: 1.1em 0 1.3em; padding: 0.6em 0.9em 0.9em; border-left: 0.8cqi solid var(--or); background: rgba(224, 189, 142, 0.2); }
.cn-art__pied { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4em; }
.cn-art .cn-art__bouton { margin-top: 0; font-size: 0.85em; background: var(--petrole); color: var(--or); }
.cn-puce { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.9em; border-radius: 99px; background: #F2EEE6; font-size: 0.82em; font-weight: 500; color: var(--petrole); }
.cn-puce::before { content: ""; width: 0.75em; height: 0.9em; border: 0.12em solid var(--or-texte); border-radius: 0.1em; }

/* FAQ */
.cn-faqm { padding: 4.5cqi 5cqi; border-radius: 1.6cqi; background: #FFFDF8; box-shadow: 0 5cqi 9cqi -3cqi rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(224, 189, 142, 0.45); }
.cn-faqm__titre { margin-top: 0.4em; font: 500 2.1em / 1.05 var(--f-titre); color: var(--petrole); }
.cn-faqm__q { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6em 1em; margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--lin); font-size: 1.05em; }
.cn-faqm__q b { position: relative; width: 1.6em; height: 1.6em; border-radius: 50%; background: #F2EEE6; }
.cn-faqm__q b::before, .cn-faqm__q b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75em; height: 0.12em; margin: -0.06em 0 0 -0.375em; background: var(--or-texte); }
.cn-faqm__q b::after { rotate: 90deg; }
.cn-faqm__q.est-ouverte b { background: var(--petrole); }
.cn-faqm__q.est-ouverte b::before { background: var(--or); }
.cn-faqm__q.est-ouverte b::after { display: none; }
.cn-faqm__r { grid-column: 1 / -1; }

/* Newsletter */
.cn-mail { border-radius: 1.6cqi; overflow: hidden; background: #FFFDF8; box-shadow: 0 5cqi 9cqi -3cqi rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(224, 189, 142, 0.45); }
.cn-mail__tete { display: flex; align-items: center; gap: 1.5cqi; padding: 2cqi 3cqi; background: #EFE9DD; }
.cn-mail__tete .cn-l { margin: 0; }
.cn-mail__icone { flex: none; width: 3.6cqi; height: 2.6cqi; border: 0.35cqi solid var(--or-texte); border-radius: 0.5cqi; background: linear-gradient(to bottom right, transparent 47%, var(--or-texte) 48% 52%, transparent 53%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 47%, var(--or-texte) 48% 52%, transparent 53%) right / 50% 100% no-repeat; }
.cn-mail__bandeau { padding: 3.5cqi 4cqi; background: linear-gradient(135deg, var(--petrole), var(--petrole-profond)); }
.cn-mail__bandeau p { font: italic 500 2.5em / 1 var(--f-titre); color: var(--or); }
.cn-mail__bandeau small { display: block; margin-top: 0.8em; font-size: 0.85em; color: var(--creme); }
.cn-mail__bloc { display: flex; gap: 2.5cqi; padding: 3cqi 4cqi 0; }
.cn-mail__bloc:last-child { padding-bottom: 4cqi; }
.cn-mail__bloc > span { flex: none; width: 11cqi; height: 9cqi; border-radius: 1cqi; background: linear-gradient(135deg, var(--or-clair), var(--bronze)); }
.cn-mail__bloc > div { flex: 1; }

/* Fiche et guide */
.cn-maq--fiche { left: 9cqi; right: 9cqi; }
.cn-guide { position: absolute; left: -2cqi; top: 4cqi; width: 40cqi; aspect-ratio: 1 / 1.35; rotate: -8deg; padding: 4cqi; background: linear-gradient(160deg, var(--petrole), var(--petrole-profond)); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.5), 0 4cqi 7cqi -2cqi rgba(0, 0, 0, 0.6); }
.cn-guide p { margin-top: 3cqi; font: italic 500 3em / 1 var(--f-titre); color: var(--or); }
.cn-guide__filet { display: block; width: 8cqi; height: 0.5cqi; background: var(--or); }
.cn-feuille { position: relative; margin-left: 26cqi; width: 50cqi; aspect-ratio: 1 / 1.414; padding: 4.5cqi 4cqi; rotate: 3deg; background: #FFFDF8; box-shadow: 0 5cqi 9cqi -3cqi rgba(0, 0, 0, 0.6); }
.cn-feuille__filet { display: block; width: 7cqi; height: 0.55cqi; margin-bottom: 2cqi; background: var(--or); }
.cn-feuille__titre { margin-top: 0.5em; font: 500 1.75em / 1.08 var(--f-titre); color: var(--petrole); }
.cn-feuille__etapes { display: grid; gap: 1.6cqi; margin-top: 3cqi; }
.cn-feuille__etapes li { display: flex; align-items: center; gap: 1.6cqi; }
.cn-feuille__etapes b { flex: none; display: grid; place-items: center; width: 3.6cqi; height: 3.6cqi; border-radius: 50%; background: var(--petrole); font: 500 0.8em / 1 var(--f-texte); color: var(--or); }
.cn-feuille__etapes .cn-l { margin: 0; }

/* Charte éditoriale */
.cn-charte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5cqi; padding: 4.5cqi 4cqi; border-radius: 1.6cqi; background: #FFFDF8; box-shadow: 0 5cqi 9cqi -3cqi rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(224, 189, 142, 0.45); }
.cn-charte > .cn-art__sur { grid-column: 1 / -1; }
.cn-charte__col { padding: 2.5cqi 2cqi; border-radius: 1cqi; background: #F6F2EA; }
.cn-charte__col p { margin-bottom: 1.6cqi; font: 500 1.35em / 1.1 var(--f-titre); color: var(--petrole); }
.cn-charte__mot { display: flex; align-items: center; gap: 1.2cqi; margin-top: 1.2cqi; }
.cn-charte__mot::before { content: "✓"; display: grid; place-items: center; flex: none; width: 3cqi; height: 3cqi; border-radius: 50%; background: var(--succes); font-size: 0.75em; color: #FFFFFF; }
.cn-charte__mot::after { content: ""; flex: 1; height: 0.42em; border-radius: 99px; background: var(--lin); }
.cn-charte__mot--non::before { content: "✕"; background: #B06339; }

/* Modèle de fiche pratique (preuve visible, texte réel) */
.cn-modele { margin: clamp(3.5rem, 7vw, 5rem) 0 0; text-align: center; }
.cn-modele__table { position: relative; max-width: 38rem; margin: var(--e-5) auto 0; padding: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 3vw, 2rem); }
.cn-modele__dessous { position: absolute; inset: 4% 10% 2% 0; rotate: -5deg; background: linear-gradient(160deg, var(--petrole), var(--petrole-profond)); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.5), 0 24px 40px -20px rgba(6, 42, 43, 0.6); }
.cn-modele__fiche { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem); text-align: left; background: #FFFDF8; rotate: 1.2deg; box-shadow: 0 30px 60px -28px rgba(6, 42, 43, 0.55), 0 0 0 1px rgba(224, 189, 142, 0.35); transition: rotate var(--d) var(--ease-sortie), translate var(--d) var(--ease-sortie); }
.cn-modele__fiche:hover { rotate: 0deg; translate: 0 -4px; }
.cn-modele__filet { display: block; width: 3.5rem; height: 3px; background: var(--or); }
.cn-modele__sur { margin-top: var(--e-4); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #8A4A28; }
.cn-modele__titre { margin-top: var(--e-2); font: 500 clamp(1.5rem, 1.25rem + 1vw, 2rem) / 1.12 var(--f-titre); color: var(--petrole); }
.cn-modele__etapes { counter-reset: etape; display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.cn-modele__etapes li { counter-increment: etape; display: grid; grid-template-columns: 2rem 1fr; gap: 0.9rem; align-items: start; font-size: 1.0625rem; line-height: 1.5; color: var(--encre); }
.cn-modele__etapes li::before { content: counter(etape); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--petrole); font-size: 0.9375rem; font-weight: 500; color: var(--or); }
.cn-modele__mention { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--lin); font: italic 500 1.0625rem / 1.4 var(--f-titre); color: var(--taupe); }
.cn-modele__legende { margin-top: var(--e-4); font-size: var(--t-legende); font-style: italic; color: var(--texte-doux); }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-modele:not(.est-visible) .cn-modele__fiche { opacity: 0; translate: 0 40px; rotate: 6deg; }
  .js .cn-modele.est-visible .cn-modele__fiche { transition: opacity 0.7s var(--ease-sortie), translate 1s var(--ease-sortie), rotate 1.2s var(--ease-sortie); }
  .js .cn-modele:not(.est-visible) .cn-modele__dessous { opacity: 0; rotate: 0deg; }
  .js .cn-modele.est-visible .cn-modele__dessous { transition: opacity 0.6s var(--ease-sortie) 0.3s, rotate 1s var(--ease-sortie) 0.3s; }
  .js .cn-modele.est-visible .cn-modele__etapes li { animation: cn-apparait 0.5s var(--ease-sortie) both; }
  .js .cn-modele.est-visible .cn-modele__etapes li:nth-child(1) { animation-delay: 0.6s; }
  .js .cn-modele.est-visible .cn-modele__etapes li:nth-child(2) { animation-delay: 0.8s; }
  .js .cn-modele.est-visible .cn-modele__etapes li:nth-child(3) { animation-delay: 1s; }
  .js .cn-modele.est-visible .cn-modele__etapes li:nth-child(4) { animation-delay: 1.2s; }
}

/* --------------------------------------------------------------------------
   4. Supports : table dessinée (plaquette qui s'ouvre, carte qui se retourne)
   -------------------------------------------------------------------------- */
.cn-supports__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64em) { .cn-supports__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.cn-supports .cn-chapo { color: var(--creme); }
.cn-supports__liste { display: grid; gap: 0.15rem; margin-top: var(--e-4); }
.cn-supports__liste li { position: relative; padding: 0.6rem 0.75rem 0.6rem 2.1rem; border-radius: 0.5rem; font-size: var(--t-legende); line-height: 1.5; color: var(--creme-doux); transition: background var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie); }
.cn-supports__liste li::before { content: ""; position: absolute; left: 0.75rem; top: 1.1rem; width: 0.55rem; height: 0.55rem; rotate: 45deg; background: var(--or); }
.cn-supports__liste strong { font-weight: 500; color: var(--creme); }
.cn-supports__liste li.est-actif { background: rgba(224, 189, 142, 0.1); color: var(--creme); }
.cn-supports .cn-texte--centre { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.cn-table { position: relative; container-type: inline-size; aspect-ratio: 1 / 0.82; perspective: 1400px; }
.cn-table::before { content: ""; position: absolute; inset: 10% 0 0; border-radius: 50%; background: radial-gradient(ellipse 60% 45% at 50% 60%, rgba(224, 189, 142, 0.16), transparent 70%); }
.cn-obj { position: absolute; transition: opacity 0.4s var(--ease-sortie), translate 0.4s var(--ease-sortie), filter 0.4s var(--ease-sortie); font-size: 2.2cqi; }
.cn-table[data-focus] .cn-obj { opacity: 0.35; filter: saturate(0.6); }
.cn-table[data-focus="presentation"] .cn-obj--presentation, .cn-table[data-focus="plaquette"] .cn-obj--plaquette, .cn-table[data-focus="kakemono"] .cn-obj--kakemono,
.cn-table[data-focus="depliant"] .cn-obj--depliant, .cn-table[data-focus="carte"] .cn-obj--carte, .cn-table[data-focus="signature"] .cn-obj--signature { opacity: 1; filter: none; translate: 0 -1.5cqi; z-index: 5; }

/* Présentation : écran sur pied */
.cn-obj--presentation { left: 1%; top: 2%; width: 44%; }
.cn-ecran { position: relative; aspect-ratio: 16 / 9; padding: 3.5cqi 3.5cqi; font-size: 2.2cqi; background: linear-gradient(135deg, var(--petrole), var(--petrole-profond)); border: 0.9cqi solid #0B1A1A; border-radius: 1cqi; box-shadow: 0 3cqi 6cqi -2cqi rgba(0, 0, 0, 0.7); }
.cn-ecran__marque { display: block; width: 4cqi; height: 4cqi; margin-bottom: 1cqi; border-radius: 50%; box-shadow: inset 0 0 0 0.35cqi var(--or); }
.cn-ecran__points { position: absolute; right: 3cqi; bottom: 3cqi; display: flex; gap: 0.8cqi; }
.cn-ecran__points b { width: 1.2cqi; height: 1.2cqi; border-radius: 50%; background: rgba(224, 189, 142, 0.4); }
.cn-ecran__points b:first-child { background: var(--or); }
.cn-ecran__pied { display: block; width: 14cqi; height: 7cqi; margin: 0 auto; background: linear-gradient(90deg, transparent 46%, #2B3B3B 46% 54%, transparent 54%), linear-gradient(#2B3B3B, #2B3B3B) bottom / 100% 1cqi no-repeat; }

/* Plaquette à trois volets : s'ouvre à l'arrivée */
.cn-obj--plaquette { left: 46%; top: 6%; width: 42%; transform-style: preserve-3d; }
.cn-tri { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); transform-style: preserve-3d; rotate: x 8deg; filter: drop-shadow(0 3cqi 3cqi rgba(0, 0, 0, 0.5)); }
.cn-tri__volet { position: relative; aspect-ratio: 1 / 1.5; transform-style: preserve-3d; transition: transform 1.3s var(--ease-douce); }
.cn-tri__volet--g { transform-origin: right center; }
.cn-tri__volet--d { transform-origin: left center; z-index: 2; }
.cn-tri__face, .cn-tri__dos { position: absolute; inset: 0; padding: 2cqi 1.6cqi; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cn-tri__face { background: #FFFDF8; box-shadow: inset 0 0 0 1px #E2DACB; font-size: 1.7cqi; }
.cn-tri__volet--m .cn-tri__face { background: #FBF8F2; }
.cn-tri__dos { transform: rotateY(180deg); background: var(--petrole-profond); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.35); }
.cn-tri__dos--couverture { display: grid; place-content: center; justify-items: center; gap: 1.2cqi; background: linear-gradient(160deg, var(--petrole), var(--petrole-profond)); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.55), inset 0 0 0 0.8cqi transparent, inset 0 0 0 0.95cqi rgba(224, 189, 142, 0.35); }
.cn-tri__dos--couverture p { font: italic 500 2.3cqi / 1.05 var(--f-titre); color: var(--or); text-align: center; }
.cn-tri__embleme { width: 5cqi; height: 5cqi; border-radius: 50%; box-shadow: inset 0 0 0 0.25cqi var(--or); background: radial-gradient(circle, transparent 38%, rgba(224, 189, 142, 0.5) 39% 42%, transparent 43%); }
.cn-tri__sur { font: 500 0.8em / 1 var(--f-texte); letter-spacing: 0.16em; text-transform: uppercase; color: #8A4A28; }
.cn-tri__titre { margin-top: 0.6em; font: 500 1.35em / 1.05 var(--f-titre); color: var(--petrole); }
.cn-tri__photo { display: block; height: 32%; border-radius: 0.4cqi; background: linear-gradient(135deg, var(--or-clair), var(--bronze)); }
.cn-tri__face .cn-tri__bouton { display: block; margin-top: 1.2em; padding: 0.6em 0; text-align: center; background: var(--petrole); color: var(--or); font-size: 0.8em; }
.cn-tri .cn-l { height: 0.35em; }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-table:not(.est-visible) .cn-tri__volet--d { transform: rotateY(-176deg) translateZ(1px); }
  .js .cn-table:not(.est-visible) .cn-tri__volet--g { transform: rotateY(176deg); }
  .js .cn-table.est-visible .cn-tri__volet--d { transition-delay: 0.5s; }
  .js .cn-table.est-visible .cn-tri__volet--g { transition-delay: 1.2s; }
}

/* Kakémono */
.cn-obj--kakemono { right: 0; top: 0; width: 13%; }
.cn-kak { display: flex; flex-direction: column; aspect-ratio: 1 / 3.6; background: #FFFDF8; box-shadow: inset 0 0 0 1px #E2DACB, 0 3cqi 5cqi -2cqi rgba(0, 0, 0, 0.6); }
.cn-kak__haut { display: grid; place-items: center; height: 44%; background: radial-gradient(circle at 50% 125%, var(--or-clair) 0 32%, transparent 33%), linear-gradient(170deg, var(--petrole), var(--petrole-profond)); }
.cn-kak__haut p { font: italic 500 1.9cqi / 1.05 var(--f-titre); color: var(--or); text-align: center; }
.cn-kak__bas { padding: 2cqi 1.4cqi; font-size: 1.6cqi; }
.cn-kak__bas .cn-tri__bouton { display: block; margin-top: 1.4em; padding: 0.6em 0; text-align: center; background: var(--petrole); color: var(--or); font-size: 0.8em; }
.cn-kak__pied { display: block; height: 1.6cqi; margin: 0 -1.2cqi; border-radius: 0.4cqi; background: linear-gradient(#C9CCCB, #8E9392); }

/* Invitation et enveloppe */
.cn-obj--depliant { left: 33%; top: 47%; width: 24%; }
.cn-enveloppe { position: absolute; left: -12%; top: 18%; width: 100%; aspect-ratio: 1.5; rotate: -9deg; background: linear-gradient(to bottom right, transparent 49.4%, rgba(6, 42, 43, 0.12) 50%, transparent 50.6%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 49.4%, rgba(6, 42, 43, 0.12) 50%, transparent 50.6%) right / 50% 100% no-repeat, #EDE5D6; box-shadow: 0 2cqi 4cqi -1.5cqi rgba(0, 0, 0, 0.6); }
.cn-invitation { position: relative; aspect-ratio: 1 / 1.25; padding: 2.6cqi 2.2cqi; rotate: 5deg; text-align: center; background: #FFFDF8; box-shadow: inset 0 0 0 0.6cqi #FFFDF8, inset 0 0 0 0.75cqi var(--or), 0 2.5cqi 4cqi -1.5cqi rgba(0, 0, 0, 0.6); font-size: 1.8cqi; }
.cn-invitation p { margin: 1em 0 0.6em; font: italic 500 1.6em / 1 var(--f-titre); color: var(--petrole); }
.cn-invitation__filet { display: block; width: 30%; height: 0.3cqi; margin: 0 auto; background: var(--or); }
.cn-invitation .cn-l { margin-inline: auto; }

/* Carte de visite : se retourne une fois à l'arrivée, puis au survol */
.cn-obj--carte { left: 3%; top: 53%; width: 32%; perspective: 900px; }
.cn-carte { position: relative; aspect-ratio: 85 / 55; transform-style: preserve-3d; rotate: z -6deg; transition: transform 1s var(--ease-douce); }
.cn-carte__recto, .cn-carte__verso { position: absolute; inset: 0; border-radius: 0.9cqi; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2.5cqi 4cqi -1.5cqi rgba(0, 0, 0, 0.65); }
.cn-carte__recto { display: grid; place-content: center; justify-items: center; gap: 1.2cqi; background: linear-gradient(150deg, var(--petrole), var(--petrole-profond)); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.55), inset 0 0 0 0.9cqi transparent, inset 0 0 0 1.05cqi rgba(224, 189, 142, 0.35), 0 2.5cqi 4cqi -1.5cqi rgba(0, 0, 0, 0.65); }
.cn-carte__recto p { font: italic 500 3.2cqi / 1 var(--f-titre); color: var(--or); }
.cn-carte__recto span { width: 6cqi; height: 0.2cqi; background: var(--or); }
.cn-carte__verso { transform: rotateY(180deg); padding: 2.6cqi 3cqi; background: #FFFDF8; font-size: 1.9cqi; }
.cn-carte__ligne { display: flex; align-items: center; gap: 1cqi; margin-top: 0.9cqi; }
.cn-carte__ligne b { flex: none; width: 1.5cqi; height: 1.5cqi; border-radius: 50%; box-shadow: inset 0 0 0 0.2cqi var(--or); }
.cn-carte__ligne .cn-l { margin: 0; }
.cn-obj--carte:hover .cn-carte { transform: rotateY(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-table.est-visible .cn-carte { animation: cn-retourne 2.4s var(--ease-douce) 2s backwards; }
}
@keyframes cn-retourne { 0% { transform: rotateY(0); } 40%, 60% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

/* Signature e-mail */
.cn-obj--signature { left: 54%; top: 60%; width: 40%; }
.cn-sig { padding: 2.4cqi 2.6cqi; border-radius: 1cqi; background: #FFFDF8; box-shadow: 0 2.5cqi 4cqi -1.5cqi rgba(0, 0, 0, 0.65); font-size: 1.9cqi; }
.cn-sig__sep { display: block; height: 1px; margin: 1.6cqi 0; background: var(--lin); }
.cn-sig__bloc { display: flex; gap: 1.8cqi; align-items: center; }
.cn-sig__bloc > div { flex: 1; }
.cn-sig__logo { flex: none; width: 6.5cqi; height: 6.5cqi; border-radius: 50%; background: radial-gradient(circle, var(--petrole) 0 55%, transparent 56%), var(--or); box-shadow: inset 0 0 0 0.3cqi var(--or); }

@media (prefers-reduced-motion: no-preference) {
  .js .cn-table:not(.est-visible) .cn-obj { opacity: 0; translate: 0 4cqi; }
  .js .cn-table.est-visible .cn-obj { transition: opacity 0.7s var(--ease-sortie), translate 0.9s var(--ease-sortie), filter 0.4s var(--ease-sortie); }
  .js .cn-table.est-visible .cn-obj--plaquette { transition-delay: 0.1s; }
  .js .cn-table.est-visible .cn-obj--carte { transition-delay: 0.25s; }
  .js .cn-table.est-visible .cn-obj--depliant { transition-delay: 0.4s; }
  .js .cn-table.est-visible .cn-obj--signature { transition-delay: 0.55s; }
  .js .cn-table.est-visible .cn-obj--kakemono { transition-delay: 0.7s; }
}

/* --------------------------------------------------------------------------
   5. Écrits pour être trouvés : anatomie d'un contenu
   -------------------------------------------------------------------------- */
.cn-trouves__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(1.5rem, 3vw, 2rem); align-items: center; }
@media (min-width: 64em) { .cn-trouves__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cn-points { display: grid; gap: 0.35rem; margin-top: var(--e-5); }
.cn-points li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.9rem; align-items: start; padding: 0.7rem 0.75rem; border-radius: 0.6rem; font-size: var(--t-legende); line-height: 1.55; color: var(--texte); transition: background var(--d) var(--ease-sortie); }
.cn-points li.est-actif { background: rgba(224, 189, 142, 0.18); }
.cn-points__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--petrole); font: 500 1rem / 1 var(--f-texte); color: var(--or); }
.cn-anatomie { position: relative; margin: 0; container-type: inline-size; border-radius: 1.2rem; overflow: visible; background: #FFFDF8; box-shadow: 0 40px 80px -40px rgba(6, 42, 43, 0.55), 0 0 0 1px rgba(224, 189, 142, 0.45); }
.cn-anatomie .cn-nav { border-radius: 1.2rem 1.2rem 0 0; }
.cn-anatomie__page { padding: 4cqi 5cqi 5cqi; font-size: 2.5cqi; }
.cn-zone { position: relative; margin-top: 3cqi; padding: 1.6cqi 2cqi; border-radius: 1cqi; outline: 0.35cqi dashed transparent; outline-offset: 0.4cqi; transition: outline-color var(--d) var(--ease-sortie), background var(--d) var(--ease-sortie); }
.cn-zone:first-child { margin-top: 0; }
.cn-zone .cn-art__titre { margin: 0; font-size: 2em; }
.cn-zone.cn-art__reponse { margin-block: 3cqi 0; border-radius: 0 1cqi 1cqi 0; }
.cn-liste { display: flex; align-items: center; gap: 1.2cqi; margin-top: 1cqi; }
.cn-liste b { flex: none; width: 1.2cqi; height: 1.2cqi; rotate: 45deg; background: var(--or); }
.cn-liste .cn-l { margin: 0; }
.cn-puce--petite { margin-top: 1.6cqi; font-size: 0.8em; }
.cn-zone[data-zone="4"] { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; }
.cn-lien-service { flex: 1; height: 0.45em; border-radius: 99px; background: linear-gradient(90deg, var(--petrole) 0 40%, var(--lin) 40%); box-shadow: 0 0.35em 0 -0.18em var(--or); }
.cn-zone[data-zone="4"] .cn-art__bouton { margin: 0; background: var(--petrole); color: var(--or); font-size: 0.85em; }
.cn-code code { display: block; padding: 1.4cqi 2cqi; border-radius: 0.8cqi; background: #0D2526; font: 400 0.85em / 1.3 ui-monospace, "SF Mono", Menlo, monospace; color: #CDE3DC; }
.cn-epingle { position: absolute; right: -3.5cqi; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 5.6cqi; height: 5.6cqi; border-radius: 50%; background: var(--petrole); box-shadow: 0 0 0 0.7cqi #FFFDF8, 0 1.6cqi 2.4cqi rgba(6, 42, 43, 0.35); font: 500 2.4cqi / 1 var(--f-texte); color: var(--or); }
.cn-anatomie[data-focus="1"] [data-zone="1"], .cn-anatomie[data-focus="2"] [data-zone="2"], .cn-anatomie[data-focus="3"] [data-zone="3"],
.cn-anatomie[data-focus="4"] [data-zone="4"], .cn-anatomie[data-focus="5"] [data-zone="5"] { outline-color: var(--or); }
.cn-anatomie[data-focus="1"] [data-zone="1"] .cn-epingle, .cn-anatomie[data-focus="2"] [data-zone="2"] .cn-epingle, .cn-anatomie[data-focus="3"] [data-zone="3"] .cn-epingle,
.cn-anatomie[data-focus="4"] [data-zone="4"] .cn-epingle, .cn-anatomie[data-focus="5"] [data-zone="5"] .cn-epingle { background: var(--or); color: var(--petrole-profond); scale: 1.12; }
.cn-epingle { transition: background var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie), scale var(--d) var(--ease-sortie); }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-anatomie:not(.est-visible) .cn-epingle { opacity: 0; }
  .js .cn-anatomie.est-visible .cn-epingle { animation: cn-pop 0.5s var(--ease-sortie) both; }
  .js .cn-anatomie.est-visible [data-zone="1"] .cn-epingle { animation-delay: 0.3s; }
  .js .cn-anatomie.est-visible [data-zone="2"] .cn-epingle { animation-delay: 0.6s; }
  .js .cn-anatomie.est-visible [data-zone="3"] .cn-epingle { animation-delay: 0.9s; }
  .js .cn-anatomie.est-visible [data-zone="4"] .cn-epingle { animation-delay: 1.2s; }
  .js .cn-anatomie.est-visible [data-zone="5"] .cn-epingle { animation-delay: 1.5s; }
}
@media (max-width: 47.99em) { .cn-epingle { right: -2cqi; } }

/* --------------------------------------------------------------------------
   6. Informer sans conseiller (fond nuit) : relecture ✕ / ✓, trois vérifications
   -------------------------------------------------------------------------- */
.cn-conseil__grille { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 60em) { .cn-conseil__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cn-relu { position: relative; margin: 0; padding: clamp(1.5rem, 3.5vw, 2.5rem); background: #FFFDF8; color: var(--encre); box-shadow: 0 0 0 1px rgba(224, 189, 142, 0.45), 0 50px 90px -30px rgba(0, 0, 0, 0.7); background-image: linear-gradient(90deg, transparent 2.6rem, rgba(176, 99, 57, 0.25) 2.6rem 2.7rem, transparent 2.7rem); }
.cn-relu__phrase { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; }
.cn-relu__phrase + .cn-relu__phrase { margin-top: var(--e-6); padding-top: var(--e-6); border-top: 1px dashed var(--lin); }
.cn-relu__phrase p { font: italic 500 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) / 1.35 var(--f-titre); color: var(--petrole); }
.cn-relu__phrase--non p { color: #6E6862; }
.cn-relu__signe { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font: 600 1rem / 1 var(--f-texte); color: #FFFFFF; }
.cn-relu__phrase--non .cn-relu__signe { background: #A55A33; }
.cn-relu__phrase--oui .cn-relu__signe { background: var(--succes); }
.cn-relu__barre { background: linear-gradient(#A55A33, #A55A33) left 55% / 100% 2px no-repeat; }
.cn-relu__souligne { background: linear-gradient(var(--or), var(--or)) left 100% / 100% 3px no-repeat; padding-bottom: 2px; }
.cn-relu__marque { position: absolute; width: 2.4rem; height: 1.2rem; border-bottom: 2px solid #A55A33; border-radius: 0 0 50% 50%; }
.cn-relu__marque--1 { right: 1.2rem; top: 1rem; rotate: -8deg; }
.cn-relu__marque--2 { right: 1.6rem; bottom: 1.2rem; width: 1.2rem; height: 1.2rem; border: 0; border-radius: 0; background: var(--succes); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-relu:not(.est-visible) .cn-relu__barre { background-size: 0 2px; }
  .js .cn-relu:not(.est-visible) .cn-relu__souligne { background-size: 0 3px; }
  .js .cn-relu:not(.est-visible) .cn-relu__phrase--oui, .js .cn-relu:not(.est-visible) .cn-relu__marque { opacity: 0; }
  .js .cn-relu.est-visible .cn-relu__barre { transition: background-size 0.9s var(--ease-douce) 0.5s; }
  .js .cn-relu.est-visible .cn-relu__phrase--oui { transition: opacity 0.7s var(--ease-sortie) 1.4s; }
  .js .cn-relu.est-visible .cn-relu__souligne { transition: background-size 0.9s var(--ease-douce) 2s; }
  .js .cn-relu.est-visible .cn-relu__marque { transition: opacity 0.5s var(--ease-sortie) 2.6s; }
}
.cn-verifs__titre { margin-top: clamp(3.5rem, 7vw, 5rem); text-align: center; font: 500 clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem) / 1.25 var(--f-titre); color: var(--creme); }
.cn-verifs { display: grid; gap: var(--gouttiere); margin-top: var(--e-6); counter-reset: verif; }
@media (min-width: 56em) { .cn-verifs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-verifs li { counter-increment: verif; position: relative; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid rgba(224, 189, 142, 0.3); background: linear-gradient(180deg, rgba(224, 189, 142, 0.08), rgba(224, 189, 142, 0)); }
.cn-verifs li::after { content: "0" counter(verif); position: absolute; right: 1.25rem; top: 1rem; font: 600 3.25rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: transparent; -webkit-text-stroke: 1px rgba(224, 189, 142, 0.55); }
.cn-verifs__picto { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--petrole); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.5); }
.cn-verifs__picto svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cn-verifs__nom { margin-top: var(--e-4); font: 500 var(--t-carte) / 1.15 var(--f-titre); color: var(--creme); }
.cn-verifs li p { margin-top: var(--e-3); font-size: var(--t-legende); line-height: 1.6; color: var(--creme-doux); }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-verifs:not(.est-visible) li { opacity: 0; }
  .js .cn-verifs.est-visible li { animation: cn-apparait 0.7s var(--ease-sortie) calc(var(--i) * 0.18s) both; }
}

/* --------------------------------------------------------------------------
   7. Pour chaque profession : six cartes
   -------------------------------------------------------------------------- */
.cn-metiers__grille { display: grid; gap: var(--gouttiere); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 44em) { .cn-metiers__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68em) { .cn-metiers__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-metier { position: relative; padding: clamp(1.5rem, 3vw, 2rem); background: #FFFDF8; border: 1px solid var(--lin); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%); box-shadow: 0 24px 48px -30px rgba(6, 42, 43, 0.35); transition: translate var(--d) var(--ease-sortie); }
.cn-metier::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--or-400), var(--cuivre)); transform: scaleX(0.25); transform-origin: left; transition: transform 0.6s var(--ease-sortie); }
.cn-metier:hover { translate: 0 -6px; }
.cn-metier:hover::before, .cn-metier:focus-within::before { transform: scaleX(1); }
.cn-metier__picto { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--petrole); }
.cn-metier__picto svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cn-metier__titre { margin-top: var(--e-4); font: 500 var(--t-carte) / 1.15 var(--f-titre); color: var(--petrole); }
.cn-metier__titre a { color: inherit; text-decoration: none; background: linear-gradient(var(--or), var(--or)) left 100% / 0 1.5px no-repeat; transition: background-size var(--d) var(--ease-sortie); }
.cn-metier__titre a::after { content: ""; position: absolute; inset: 0; }
.cn-metier__titre a:hover, .cn-metier__titre a:focus-visible { background-size: 100% 1.5px; }
.cn-metier__titre a:focus-visible { outline: none; }
.cn-metier:has(a:focus-visible) { outline: 2px solid var(--or-texte); outline-offset: 3px; }
.cn-metier p { margin-top: var(--e-3); font-size: var(--t-legende); line-height: 1.6; color: var(--texte); }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-metiers__grille:not(.est-visible) .cn-metier { opacity: 0; }
  .js .cn-metiers__grille.est-visible .cn-metier { animation: cn-apparait 0.7s var(--ease-sortie) calc(var(--i) * 0.12s) both; }
}
@media (prefers-reduced-motion: reduce) { .cn-metier, .cn-metier::before { transition: none; } .cn-metier:hover { translate: none; } }

/* --------------------------------------------------------------------------
   8. Méthode : un document parcourt le rail et allume chaque étape
   -------------------------------------------------------------------------- */
.cn-rail { position: relative; margin-top: clamp(3rem, 6vw, 4.5rem); }
.cn-etapes { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.cn-etape { position: relative; display: grid; gap: var(--e-3); align-content: start; padding-left: 4.5rem; font-size: var(--t-legende); line-height: 1.6; color: var(--texte); }
.cn-etape__rond { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--or); transition: background 0.4s var(--ease-sortie); }
.cn-etape__rond svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--petrole); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s var(--ease-sortie); }
.cn-etape__titre { font: 500 clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem) / 1.15 var(--f-titre); color: var(--petrole); }
.cn-rail::before { content: ""; position: absolute; left: 1.6rem; top: 1.6rem; bottom: 1.6rem; width: 2px; background: var(--lin); }
.cn-rail::after { content: ""; position: absolute; left: 1.6rem; top: 1.6rem; bottom: 1.6rem; width: 2px; background: linear-gradient(180deg, var(--or), var(--cuivre)); transform-origin: top; }
.cn-rail__doc { display: none; }
@media (min-width: 64em) {
  .cn-etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gouttiere); }
  .cn-etape { padding-left: 0; padding-top: 5rem; }
  .cn-etape__rond { left: 0; }
  .cn-rail::before, .cn-rail::after { left: 1.6rem; right: 1.6rem; top: 1.6rem; bottom: auto; width: auto; height: 2px; }
  .cn-rail::after { background: linear-gradient(90deg, var(--or), var(--cuivre)); transform-origin: left; }
  .cn-rail__doc { position: absolute; left: 0; top: -2.4rem; z-index: 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 0.4rem; background: #FFFDF8; box-shadow: 0 0 0 1px var(--or), 0 10px 18px -8px rgba(6, 42, 43, 0.5); }
  .cn-rail__doc svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--petrole); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
}
.cn-rail.est-visible .cn-etape__rond, :root:not(.js) .cn-etape__rond { background: var(--petrole); }
.cn-rail.est-visible .cn-etape__rond svg, :root:not(.js) .cn-etape__rond svg { stroke: var(--or); }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-rail:not(.est-visible)::after { transform: scale(1, 0); }
  @media (min-width: 64em) { .js .cn-rail:not(.est-visible)::after { transform: scale(0, 1); } }
  .js .cn-rail.est-visible::after { transform: none; transition: transform 3s var(--ease-douce) 0.2s; }
  .js .cn-rail.est-visible .cn-etape__rond { transition-delay: calc(0.4s + var(--i) * 0.65s); }
  .js .cn-rail.est-visible .cn-etape__rond svg { transition-delay: calc(0.4s + var(--i) * 0.65s); }
  .js .cn-rail:not(.est-visible) .cn-etape { opacity: 0; }
  .js .cn-rail.est-visible .cn-etape { animation: cn-apparait 0.6s var(--ease-sortie) calc(0.3s + var(--i) * 0.65s) both; }
  .js .cn-rail.est-visible .cn-rail__doc { animation: cn-voyage 3s var(--ease-douce) 0.2s both; }
}
@keyframes cn-voyage { from { left: 0.5rem; } to { left: calc(100% - 2.7rem); } }
@media (min-width: 64em) { :root:not(.js) .cn-rail__doc, .cn-rail.est-visible .cn-rail__doc { left: calc(100% - 2.7rem); } }
.cn-encadre--trois span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-encadre--trois:not(.est-visible) span { opacity: 0; }
  .js .cn-encadre--trois.est-visible span { animation: cn-apparait 0.6s var(--ease-sortie) both; }
  .js .cn-encadre--trois.est-visible span:nth-child(2) { animation-delay: 0.5s; }
  .js .cn-encadre--trois.est-visible span:nth-child(3) { animation-delay: 1s; }
}

/* --------------------------------------------------------------------------
   9. Tarifs : quatre offres comparables (fond pétrole)
   -------------------------------------------------------------------------- */
.cn-offres { display: grid; gap: var(--gouttiere); margin-top: clamp(2.5rem, 5vw, 3.5rem); align-items: stretch; }
@media (min-width: 48em) { .cn-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .cn-offres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cn-offre { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); background: rgba(6, 42, 43, 0.45); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.3); clip-path: polygon(var(--pan) 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%, 0 var(--pan)); }
.cn-offre--forte { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(224, 189, 142, 0.2), transparent 70%), rgba(6, 42, 43, 0.65); box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.7), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(224, 189, 142, 0.3); }
.cn-offre--ponctuelle { background: transparent; box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.3); border: 1px dashed rgba(224, 189, 142, 0.35); clip-path: none; }
.cn-offre__nom { font: 500 var(--t-carte) / 1.15 var(--f-titre); color: var(--creme); }
.cn-offre__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin-top: var(--e-4); padding-bottom: var(--e-4); border-bottom: 1px solid rgba(224, 189, 142, 0.25); color: var(--creme-doux); }
.cn-offre__prix small { font-size: 0.9375rem; }
.cn-offre__prix b { font: 500 clamp(2rem, 1.6rem + 1.2vw, 2.75rem) / 1 var(--f-titre); color: var(--or-clair); }
.cn-offre__liste { display: grid; gap: 0.6rem; margin-top: var(--e-4); }
.cn-offre__liste li { position: relative; padding-left: 1.6rem; font-size: 0.98rem; line-height: 1.55; color: var(--creme-doux); }
.cn-offre__liste li::before { content: "✓"; position: absolute; left: 0; top: 0.1rem; font-size: 0.85rem; color: var(--or); }
.cn-offre__texte { margin-top: var(--e-4); font-size: 0.98rem; line-height: 1.6; color: var(--creme-doux); }
.cn-tarifs__note { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.4 var(--f-titre); color: var(--creme); }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-offres:not(.est-visible) .cn-offre { opacity: 0; }
  .js .cn-offres.est-visible .cn-offre { animation: cn-apparait 0.7s var(--ease-sortie) calc(var(--i) * 0.15s) both; }
}

/* --------------------------------------------------------------------------
   10. Une agence qui parle droit
   -------------------------------------------------------------------------- */
.cn-agence__boite { position: relative; padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem); text-align: center; background: #FFFDF8; box-shadow: 0 0 0 1px var(--lin), 0 30px 60px -40px rgba(6, 42, 43, 0.4); clip-path: polygon(var(--pan) 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%, 0 var(--pan)); }
.cn-agence__plume { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--petrole); }
.cn-agence__plume svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cn-agence .titre-section { margin-top: var(--e-4); }
.cn-agence .cn-texte { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Respiration photo entre les formats et les supports (image ChatGPT de Raoudha, 23/10/2026)
   -------------------------------------------------------------------------- */
.cn-respiration { position: relative; margin: 0; overflow: hidden; height: clamp(16rem, 42vw, 36rem); background: var(--petrole-profond); }
.cn-respiration img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.cn-respiration::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(2, 24, 24, 0.55)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .cn-respiration:not(.est-visible) img { scale: 1.08; }
  .js .cn-respiration.est-visible img { scale: 1; transition: scale 2.4s var(--ease-sortie); }
}

/* --------------------------------------------------------------------------
   11. Appel final : photo en fond (avocate qui remet une fiche à un client), texte à gauche sur la partie sombre
   -------------------------------------------------------------------------- */
.cn-final { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(6rem, 12vw, 10rem); background: var(--petrole-profond); }
.cn-final__fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.cn-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 42, 43, 0.94) 0%, rgba(6, 42, 43, 0.84) 36%, rgba(6, 42, 43, 0.25) 66%, rgba(6, 42, 43, 0) 100%); }
.cn-final__contenu { text-align: left; }
.cn-final .titre-section { max-width: 16em; color: var(--creme); }
.cn-final__texte { margin-top: var(--e-4); max-width: 32rem; font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.45 var(--f-titre); color: var(--creme-doux); }
@media (min-width: 68em) {
  .cn-final > .cn-final__contenu { max-width: none; margin-inline: 0; padding-inline: max(var(--marge), min(calc((100vw - var(--conteneur)) / 2), 88px)); }
}
@media (max-width: 67.99em) {
  .cn-final { padding-block: clamp(14rem, 62vw, 20rem) clamp(3rem, 8vw, 4rem); }
  .cn-final__fond { height: 62%; object-position: 72% 40%; }
  .cn-final::before { background: linear-gradient(180deg, rgba(6, 42, 43, 0) 0%, rgba(6, 42, 43, 0.35) 38%, var(--petrole-profond) 60%); }
}

/* Téléphone : boutons pleine largeur */
@media (max-width: 30em) {
  .cn-actions .btn--grand, .cn-actions .btn-cartouche, .cn-renvoi .lien-suite { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .cn-bulle { width: 100%; }
}

/* ==========================================================================
   Corrections après le contrôle des agents (23/10/2026 : Octave, Pauline, Marius, Hélène)
   ========================================================================== */
/* Appel final, téléphone et tablette : voile plus sombre sous le titre (contraste ≥ 4,5:1, Pauline) */
@media (max-width: 67.99em) {
  .cn-final::before { background: linear-gradient(180deg, rgba(6, 42, 43, 0) 0%, rgba(6, 42, 43, 0.3) 25%, rgba(6, 42, 43, 0.85) 34%, var(--petrole-profond) 45%); }
}
/* Bouton Pause : en bas au centre (zone libre de la vidéo) ; au téléphone, sous la vidéo */
@media (min-width: 48em) { .cn-video__bouton { top: auto; bottom: 1rem; right: auto; left: 50%; translate: -50% 0; } }
@media (max-width: 47.99em) { .cn-video--bandeau .cn-video__bouton { position: static; margin: 0.5rem 0 0.5rem 0.75rem; } }
/* Méthode : pas de fil vertical au téléphone (trop proche du fil doré de l'accueil) ; fil arrêté à la 5e étape sur ordinateur */
@media (max-width: 63.99em) { .cn-rail::before, .cn-rail::after { display: none; } }
@media (min-width: 64em) {
  .cn-rail::before, .cn-rail::after { right: calc((100% - 4 * var(--gouttiere)) / 5 - 1.6rem); }
  :root:not(.js) .cn-rail__doc, .cn-rail.est-visible .cn-rail__doc { left: calc(100% - (100% - 4 * var(--gouttiere)) / 5 + 0.5rem); }
}
@keyframes cn-voyage { from { left: 0.5rem; } to { left: calc(100% - (100% - 4 * var(--gouttiere)) / 5 + 0.5rem); } }
/* Offres : chiffres alignés et lisibles (« 1 690 », pas « I 690 ») ; prix à la même hauteur */
.cn-offre__prix b { font-variant-numeric: lining-nums; }
@media (min-width: 72em) { .cn-offre__nom { min-height: 2.3em; } }
/* Table des supports : le kakémono ne recouvre plus la plaquette */
.cn-obj--plaquette { left: 46%; width: 39%; }
.cn-tri__titre { font-size: 1.1em; }
/* Anatomie, téléphone : l'épingle 4 ne couvre plus le bouton */
@media (max-width: 47.99em) { .cn-zone { padding-right: 5cqi; } }
/* Corps de texte à 18 px, comme la page Réseaux sociaux */
.cn-haut__intro, .cn-format p, .cn-supports__liste li, .cn-points li, .cn-etape, .cn-metier p, .cn-verifs li p { font-size: var(--t-corps); }
/* Maquette « Charte éditoriale » plus pleine */
.cn-charte { padding-block: 7cqi; font-size: 1.15em; }
.cn-charte__col { padding-block: 4cqi; }
/* Couleurs de la charte seulement (cuivre au lieu de #A55A33) */
.cn-relu__phrase--non .cn-relu__signe { background: var(--cuivre); }
.cn-relu__barre { background-image: linear-gradient(var(--cuivre), var(--cuivre)); }
.cn-relu__marque--1 { border-bottom-color: var(--cuivre); }
/* Bandeau photo : la baie de Nice reste visible */
.cn-respiration img { object-position: 50% 32%; }   /* nouvelle photo (23/10, 12 h 49) : la baie de Nice et la plaquette restent visibles */
/* « Moins d'animations » : la carte ne se retourne plus au survol */
@media (prefers-reduced-motion: reduce) { .cn-obj--carte:hover .cn-carte { transform: none; } }
.cn-tarifs__seo { margin-top: var(--e-3); text-align: center; font-size: var(--t-legende); line-height: 1.55; color: var(--creme-doux); }