/* Lisibilité et photos entières — chargé en dernier sur les pages revues. */

html:root body .rv,
html:root body h1,
html:root body .ph-h1,
html:root body .h1,
html:root body .stag,
html:root body .hero-content,
html:root body .ph-content,
html:root body .ph-desc,
html:root body .hero-spec,
html:root body .hero-eyebrow,
html:root body .ph-eyebrow,
html:root body .scroll-cue {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

html:root body img {
  object-fit: contain !important;
}
html:root body .nav-logo img,
html:root body .ft-logo img {
  object-fit: cover !important;
}

/* Les règles communes forcent 320×210 en cover. Ici la photo entière, même cadre. */
html:root body .si figure img,
html:root body .container figure img,
html:root body .intro-text figure img,
html:root body .article-body figure img,
html:root body .art-body figure img,
html:root body .main-article figure img,
html:root body .section-gs figure img,
html:root body section.section figure img,
html:root body > figure img,
html:root body figure.photo-fig img,
html:root body .fw-photo img,
html:root body .inline-img-full img,
html:root body .inline-img-grid img,
html:root body .split-photo img,
html:root body .photo-gallery img,
html:root body .lib-card figure img,
html:root body .spec-card figure img,
html:root body .alire-card figure img,
html:root body .concernee-text figure img,
html:root body img[src*="mammographe-amulet"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

html:root body .photo-cell,
html:root body .photo-fig,
html:root body .photo-strip,
html:root body figure {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
html:root body .photo-cell img,
html:root body .photo-fig img,
html:root body .photo-strip img,
html:root body figure img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: none !important;
}

html:root body header.page-hero .ph-bg img,
html:root body section.hero .hero-photo-bg img,
html:root body section.hero .hero-right img,
html:root body img[data-photo-hero] {
  filter: none !important;
  opacity: 1 !important;
  object-fit: cover !important;
  animation: none !important;
}

/* Texte gris trop pâle sur fond marine (styles en ligne). */
html:root body [style*="rgba(255,255,255,.3"],
html:root body [style*="rgba(255,255,255,.4"],
html:root body [style*="rgba(255,255,255,.5"],
html:root body [style*="rgba(255,255,255,0.3"],
html:root body [style*="rgba(255,255,255,0.4"],
html:root body [style*="rgba(255,255,255,0.5"] {
  color: #f7f4f0 !important;
}

/* Bouton plein : cuivre un cran plus foncé que le blush, pour que le blanc passe AA. */
html:root body a.cta-primary,
html:root body a.btn-primary,
html:root body a.btn-r,
html:root body a.rdv-btn-main,
html:root body a.m-btn-doctolib,
html:root body a.nav-rdv-doctolib,
html:root body a.acc-cta-fiche,
html:root body .samuel-cta-band .cta-primary {
  background: #956c56 !important;
  background-color: #956c56 !important;
  border-color: #956c56 !important;
  color: #ffffff !important;
}
html:root body a.cta-primary:hover,
html:root body a.btn-primary:hover,
html:root body a.rdv-btn-main:hover,
html:root body a.nav-rdv-doctolib:hover,
html:root body .samuel-cta-band .cta-primary:hover {
  background: #7d5846 !important;
  color: #ffffff !important;
}

/* Liens : pêche claire sur marine, cuivre foncé sur fond blanc. */
html:root body .main-article p a,
html:root body .main-article li a,
html:root body .s-navy p a,
html:root body .s-navy li a,
html:root body .s-navy2 p a,
html:root body .s-navy2 li a {
  color: #f6e4d6 !important;
}
html:root body section[style*="f9f8f6"] p a,
html:root body section[style*="f9f8f6"] li a,
html:root body section[style*="#fff"] p a,
html:root body section[style*="#fff"] li a {
  color: #956c56 !important;
}
html:root body .spec-card-meta,
html:root body .spec-card-meta span,
html:root body .alire-tag {
  color: #956c56 !important;
}
html:root body .main-article p a:hover,
html:root body .main-article li a:hover,
html:root body .s-navy p a:hover,
html:root body .s-navy li a:hover,
html:root body .s-navy2 p a:hover,
html:root body .s-navy2 li a:hover {
  color: #ffffff !important;
}
html:root body .faq-a a,
html:root body .spec-card a,
html:root body .crit-card a,
html:root body .alire-card a,
html:root body .triage-box a,
html:root body .spec-intro a,
html:root body .main-article .faq-a a,
html:root body .main-article .spec-card a,
html:root body .main-article .crit-card a,
html:root body .main-article .alire-card a,
html:root body .main-article .triage-box a,
html:root body .s-white a,
html:root body .article-body a,
html:root body .photo-fig a {
  color: #6b4030 !important;
}
html:root body .faq-a a:hover,
html:root body .spec-card a:hover,
html:root body .crit-card a:hover,
html:root body .alire-card a:hover,
html:root body .triage-box a:hover,
html:root body .spec-intro a:hover,
html:root body .main-article .faq-a a:hover,
html:root body .main-article .spec-card a:hover,
html:root body .main-article .crit-card a:hover,
html:root body .main-article .alire-card a:hover,
html:root body .s-white a:hover,
html:root body .article-body a:hover {
  color: #3d2418 !important;
}

html:root body .samuel-cta-band .cta-primary,
html:root body .samuel-cta-band .cta-primary:hover,
html:root body .samuel-cta-band .cta-secondary,
html:root body .samuel-cta-band .cta-secondary:hover {
  color: #ffffff !important;
}

html:root body .qc-grid:hover {
  background: #ffffff !important;
}
html:root body .qc-grid:hover p,
html:root body .qc-grid:hover li,
html:root body .qc-grid:hover strong {
  color: #0d1f35 !important;
}


/* Cartes claires : le texte reste foncé, y compris au survol. */
html:root body .spec-intro,
html:root body .spec-card,
html:root body .crit-card,
html:root body .alire-card,
html:root body .faq-a,
html:root body .triage-box,
html:root body .spec-intro:hover,
html:root body .spec-card:hover,
html:root body .crit-card:hover,
html:root body .alire-card:hover,
html:root body .faq-a:hover,
html:root body .triage-box:hover {
  background-color: #ffffff !important;
  color: #1a2538 !important;
}
html:root body .spec-intro p,
html:root body .spec-intro strong,
html:root body .spec-intro:hover p,
html:root body .spec-intro:hover strong,
html:root body .spec-card p,
html:root body .spec-card li,
html:root body .spec-card h3,
html:root body .spec-card:hover p,
html:root body .spec-card:hover span,
html:root body .alire-card p,
html:root body .alire-card h3,
html:root body .alire-card h4,
html:root body .faq-a,
html:root body .faq-a p {
  color: #1a2538 !important;
}
html:root body .spec-card a,
html:root body .spec-intro a,
html:root body .alire-card a,
html:root body .faq-a a,
html:root body .crit-card a,
html:root body section[style*="f9f8f6"] a,
html:root body section[style*="f9f8f6"] a:hover {
  color: #7d5342 !important;
}
html:root body .spec-card-meta span,
html:root body .alire-tag,
html:root body .spec-card:hover .spec-card-meta span,
html:root body .alire-card:hover .alire-tag {
  color: #7d5342 !important;
  background: rgba(125, 83, 66, .1) !important;
}
html:root body .main-article .spec-intro,
html:root body .main-article .spec-card,
html:root body .main-article .spec-intro:hover,
html:root body .main-article .spec-card:hover {
  background-color: #ffffff !important;
}
html:root body .main-article .spec-intro p,
html:root body .main-article .spec-intro strong,
html:root body .main-article .spec-intro:hover p,
html:root body .main-article .spec-intro:hover strong,
html:root body .main-article .spec-card p,
html:root body .main-article .spec-card strong {
  color: #1a2538 !important;
}
html:root body .table-scroll-wrap a,
html:root body table a,
html:root body td a,
html:root body .main-article .spec-card a,
html:root body .main-article .spec-intro a,
html:root body .main-article .spec-card-meta span,
html:root body .main-article .alire-tag,
html:root body .main-article .alire-card .alire-tag {
  color: #7d5342 !important;
}
html:root body a.cta-primary,
html:root body section a.cta-primary,
html:root body .samuel-cta-band a.cta-primary,
html:root body .samuel-cta-band a.cta-primary span,
html:root body a.rdv-btn-main,
html:root body section a.rdv-btn-main,
html:root body a.btn-r,
html:root body section a.btn-r,
html:root body a.btn-primary,
html:root body a.acc-cta-fiche,
html:root body section a.acc-cta-fiche,
html:root body a.avis-strip-btn,
html:root body .cta-option-card a,
html:root body section .cta-option-card a,
html:root body a.nav-rdv-doctolib,
html:root body a.m-btn-doctolib {
  background-color: #7d5342 !important;
  border-color: #7d5342 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html:root body section.main-article p a,
html:root body section.main-article li a {
  color: #f6e4d6 !important;
}
html:root body section[style*="f9f8f6"].main-article a,
html:root body section.main-article .spec-card a,
html:root body section.main-article .spec-intro a,
html:root body section.main-article table a,
html:root body section.main-article .alire-card a,
html:root body section.main-article .faq-a a {
  color: #7d5342 !important;
}

/* Passe 2 — textes lisibles sur marine, encarts, à lire aussi */
html:root body .mc-desc,
html:root body .motif-card:hover .mc-desc,
html:root body section.s-navy .motif-card .mc-desc,
html:root body section.s-navy .motif-card:hover .mc-desc,
html:root body section.s-navy2 .motif-card .mc-desc,
html:root body section.s-navy2 .motif-card:hover .mc-desc,
html:root body .bio-desc,
html:root body .bio-label,
html:root body .bio-card:hover .bio-desc,
html:root body .bio-card:hover .bio-label,
html:root body section.s-navy .bio-card .bio-desc,
html:root body section.s-navy .bio-card:hover .bio-desc,
html:root body section.s-navy2 .bio-card .bio-desc,
html:root body section.s-navy2 .bio-card:hover .bio-desc,
html:root body .bio-action,
html:root body .step-desc,
html:root body .step-card:hover .step-desc,
html:root body .acc-item .acc-subtitle,
html:root body .acc-item:hover .acc-subtitle,
html:root body .acc-item.open .acc-subtitle,
html:root body .acc-item.open:hover .acc-subtitle,
html:root body section.s-navy .acc-item .acc-subtitle,
html:root body section.s-navy .acc-item:hover .acc-subtitle,
html:root body section.s-navy2 .acc-item .acc-subtitle,
html:root body section.s-navy2 .acc-item:hover .acc-subtitle,
html:root body .pp-desc,
html:root body .cr-text,
html:root body .cr-text strong,
html:root body .tuile-k,
html:root body .tuile-d,
html:root body .tuile-d strong {
  color: #f7f4f0 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html:root body section[aria-label="Informations pratiques"] p,
html:root body section[aria-label="Informations pratiques"] strong,
html:root body section[aria-label="Practical information"] p,
html:root body section[aria-label="Practical information"] strong,
html:root body .med-note,
html:root body .med-note strong {
  color: #f7f4f0 !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}
html:root body section[aria-label="Informations pratiques"] a,
html:root body section[aria-label="Practical information"] a,
html:root body .med-note a {
  color: #f6e4d6 !important;
  font-size: 1.05rem !important;
}
html:root body section.s-navy .motif-card:hover,
html:root body section.s-navy2 .motif-card:hover,
html:root body section.s-navy .bio-card:hover,
html:root body section.s-navy2 .bio-card:hover,
html:root body section.s-navy .acc-item:hover,
html:root body section.s-navy2 .acc-item:hover,
html:root body section.s-navy .step-card:hover,
html:root body section.s-navy2 .step-card:hover {
  background-color: #162844 !important;
  color: #f7f4f0 !important;
}
html:root body section.alire-bande,
html:root body section.jz-alire {
  background: #0d1f35 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 48px 24px 56px !important;
}
html:root body .jz-alire-c p,
html:root body .alire-bande a div {
  color: #f4f1ec !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}
html:root body .jz-alire-t,
html:root body .alire-bande > div > div:first-child {
  color: #f6e4d6 !important;
  font-size: 1rem !important;
  letter-spacing: .08em !important;
}
html:root body .jz-alire-c h4,
html:root body .alire-bande a div[style*="font-family"] {
  color: #ffffff !important;
  font-size: 1.35rem !important;
}

/* Expertise intime : texte clair sur marine. */
html:root body .pt-body,
html:root body .pt-body p,
html:root body .pt-quote,
html:root body .tech-sources {
  color: #f7f4f0 !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  opacity: 1 !important;
}
html:root body .pt-body strong {
  color: #ffffff !important;
}
html:root body .pt-quote {
  font-size: 1.12rem !important;
}

/* Tableau des techniques : cartes empilées au téléphone, aucun débordement. */
html:root body .tech-cards {
  display: none;
}
@media (max-width: 700px) {
  html:root body .tech-table-wrap {
    display: none !important;
  }
  html:root body .tech-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 8px !important;
    max-width: 100% !important;
  }
  html:root body .tech-card {
    background: #162844 !important;
    border-left: 3px solid #b8856a !important;
    padding: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html:root body .tech-card h3 {
    color: #ffffff !important;
    font-size: 1.12rem !important;
    line-height: 1.35 !important;
    margin: 0 0 10px !important;
    font-weight: 500 !important;
  }
  html:root body .tech-card p {
    color: #f7f4f0 !important;
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
    margin: 0 0 8px !important;
  }
  html:root body .tech-card p span {
    display: block !important;
    color: #f6e4d6 !important;
    font-size: .78rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }
}

/* Bande photo lésions bénignes : format charte, sujet entier. */
html:root body .photo-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  height: auto !important;
  max-width: 760px !important;
  margin: 24px auto !important;
  overflow: visible !important;
}
html:root body .photo-strip .photo-cell {
  flex: 0 0 350px !important;
  width: 350px !important;
  max-width: 350px !important;
  height: 232px !important;
  max-height: 232px !important;
  overflow: hidden !important;
  margin: 0 !important;
}
html:root body .photo-strip .photo-cell img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}
@media (max-width: 700px) {
  html:root body .photo-strip .photo-cell {
    flex-basis: 305px !important;
    width: 305px !important;
    max-width: 305px !important;
    height: 202px !important;
    max-height: 202px !important;
  }
}

/* Photos du texte, ordinateur : 350 px, sujet entier. */
@media (min-width: 901px) {
  html:root body .photo-charte {
    width: 350px !important;
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html:root body .photo-charte img {
    width: 350px !important;
    max-width: 350px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* Légendes centrées sous les deux photos du haut. */
html:root body .photo-strip .photo-cell {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
}
html:root body .photo-strip figcaption {
  display: block !important;
  text-align: center !important;
  color: #1c2e4a !important;
  background: #faf6f0 !important;
  font-size: 1rem !important;
  line-height: 1.45 !important;
  margin: 8px 0 0 !important;
  padding: 8px 10px 10px !important;
}
html:root body .photo-strip .photo-cell img {
  width: 350px !important;
  max-width: 350px !important;
  height: 232px !important;
  max-height: 232px !important;
  object-fit: contain !important;
}
@media (max-width: 700px) {
  html:root body .photo-strip .photo-cell {
    flex-basis: 305px !important;
    width: 305px !important;
    max-width: 305px !important;
  }
  html:root body .photo-strip .photo-cell img {
    width: 305px !important;
    max-width: 305px !important;
    height: 202px !important;
    max-height: 202px !important;
  }
}

/* À lire aussi et intro des deux situations : texte clair, au moins 14 px. */
html:root body .la-desc,
html:root body .la-arrow,
html:root body section.cta-final > p {
  color: #f7f4f0 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
}
html:root body .la-arrow {
  color: #f6e4d6 !important;
}

/* Photos du corps, ordinateur : 350 px, sujet entier, bloc centré.
   articles-regles.css impose 520×340 ; cette feuille est chargée après. */
@media (min-width: 901px) {
  html:root body figure.photo-fig,
  html:root body .si figure.photo-fig,
  html:root body section figure.photo-fig {
    float: none !important;
    clear: both !important;
    box-sizing: content-box !important;
    width: 350px !important;
    max-width: 350px !important;
    height: auto !important;
    margin: 28px auto !important;
  }
  html:root body figure.photo-fig img,
  html:root body .si figure.photo-fig img,
  html:root body section figure.photo-fig img {
    display: block !important;
    width: 350px !important;
    max-width: 350px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html:root body [data-photo-grid] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  html:root body [data-photo-grid] > div:has(img) {
    flex: 0 0 350px !important;
    width: 350px !important;
    max-width: 350px !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
    overflow: visible !important;
  }
  html:root body [data-photo-grid] > div:not(:has(img)) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  html:root body [data-photo-grid] img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 350px !important;
    max-width: 350px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* Téléphone : photos de contenu dans le cadre 305 × 202, sujet entier.
   L'implant et le schéma carré gardent leur hauteur naturelle. */
@media (max-width: 700px) {
  html:root body section.section-gs {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  html:root body section.section-gs .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  html:root body .photo-charte,
  html:root body section.section-gs .container > .photo-charte,
  html:root body header.page-hero ~ section .photo-charte {
    width: 305px !important;
    max-width: 305px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  html:root body header.page-hero ~ section .photo-charte img,
  html:root body .photo-charte img {
    display: block !important;
    width: 305px !important;
    max-width: 305px !important;
    height: 202px !important;
    max-height: 202px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html:root body figure.photo-fig {
    float: none !important;
    clear: both !important;
    box-sizing: content-box !important;
    width: 305px !important;
    max-width: 305px !important;
    height: auto !important;
    margin: 16px auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:root body figure.photo-fig img {
    display: block !important;
    width: 305px !important;
    max-width: 305px !important;
    height: 202px !important;
    max-height: 202px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html:root body figure.photo-fig img[src*="prothese-implant-transparence"] {
    height: auto !important;
    max-height: none !important;
  }
  html:root body img[src*="preparer-bloc"],
  html:root body img[src*="anatomie-vulve-schema"] {
    width: 305px !important;
    max-width: 305px !important;
    height: 202px !important;
    max-height: 202px !important;
    object-fit: contain !important;
  }
  html:root body [data-photo-grid] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html:root body [data-photo-grid] > div:has(img) {
    width: 305px !important;
    max-width: 305px !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    overflow: visible !important;
  }
  html:root body [data-photo-grid] img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 305px !important;
    max-width: 305px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  html:root body [data-photo-grid] img[src*="brca-consultation"],
  html:root body [data-photo-grid] img[src*="prothese-vie-apres"] {
    height: 202px !important;
    max-height: 202px !important;
  }
  /* Prothèse, téléphone : trois photos au cadre 305 × 202, sujet gardé. */
  html:root body figure.photo-fig img[src*="prothese-implant-transparence"],
  html:root body figure.photo-fig img[src*="onco-post-op-pansement"] {
    width: 305px !important;
    max-width: 305px !important;
    height: 202px !important;
    max-height: 202px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  html:root body figure.photo-fig:has(img[src*="preparer-bloc"]) {
    box-sizing: content-box !important;
    width: 305px !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html:root body figure.photo-fig img[src*="preparer-bloc"],
  html:root body [data-photo-grid] img[src*="preparer-bloc"],
  html:root body picture img[src*="preparer-bloc"] {
    width: 305px !important;
    max-width: 305px !important;
    height: 202px !important;
    max-height: 202px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* Une seule grille « À lire aussi » : une colonne au téléphone. */
@media (max-width: 700px) {
  html:root body .alire-bande .alire-grille {
    grid-template-columns: 1fr !important;
  }
}

/* Menu du haut et barre d'onglets : toujours lisibles, collés comme sur cancer-sein.
   La photo du bandeau ne doit plus passer devant ni pousser le sommaire hors de l'écran. */
html:root body nav.nav {
  background: #0d1f35 !important;
  background-color: #0d1f35 !important;
  z-index: 9999 !important;
}
html:root body nav.nav .nn,
html:root body nav.nav .ns,
html:root body nav.nav .m-label,
html:root body nav.nav .nav-menu > li > a,
html:root body nav.nav .hamburger,
html:root body nav.nav .hamburger .m-arrow {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
html:root body nav.nav .hamburger .bar {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
html:root body nav.sec-nav,
html:root body .sec-nav {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #0d1f35 !important;
  background-color: #0d1f35 !important;
}
html:root body .sn-a {
  color: #f7f4f0 !important;
  -webkit-text-fill-color: #f7f4f0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Texte sous le titre : encre claire sur le voile marine (plus de 0,52 ni d'encre #111827). */
html:root body header.page-hero h1.ph-h1,
html:root body header.page-hero p.ph-desc,
html:root body header.page-hero .ph-eyebrow,
html:root body section.hero h1.h1,
html:root body section.hero h1.h1 .name-white,
html:root body section.hero p.hero-spec,
html:root body section.hero p.hero-spec strong,
html:root body section.hero .hero-eyebrow {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Encart de rendez-vous : même gabarit que cancer-sein, texte blanc forcé
   (une feuille en cache laissait l'encre du corps #111827 sur le marine). */
html:root body section.samuel-cta-band {
  background: #0d1f35 !important;
  background-color: #0d1f35 !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(184, 133, 106, .35) !important;
  padding: 40px 20px !important;
}
html:root body section.samuel-cta-band .samuel-cta-inner {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
html:root body section.samuel-cta-band p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: transparent !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin: 0 auto 18px !important;
  max-width: 640px !important;
  opacity: 1 !important;
}
html:root body section.samuel-cta-band .samuel-cta-btns {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
html:root body section.samuel-cta-band a.cta-primary,
html:root body section.samuel-cta-band a.cta-primary span {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .73rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  background: #7d5342 !important;
  background-color: #7d5342 !important;
  border: 1px solid #7d5342 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  opacity: 1 !important;
}
html:root body section.samuel-cta-band a.cta-secondary,
html:root body section.samuel-cta-band a.cta-secondary span {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .69rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 12px 28px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  opacity: 1 !important;
}
@media (max-width: 1100px) {
  html:root body section.samuel-cta-band .samuel-cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  html:root body section.samuel-cta-band .samuel-cta-btns a {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* charte.css impose 100dvh : le sommaire partait sous l'écran.
     Le bandeau reprend la hauteur du texte, la barre d'onglets suit. */
  html:root body header.page-hero,
  html:root body section.hero {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Contraste AA : le blush #b8856a échoue sur le blanc et sur le marine.
   Encre foncée sur fond clair, pêche claire sur fond marine. */
html:root body a.msb-rdv,
html:root body .mobile-sticky-bar a.msb-rdv {
  background: #7d5342 !important;
  background-color: #7d5342 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html:root body .scroll-txt {
  color: #f7f4f0 !important;
  -webkit-text-fill-color: #f7f4f0 !important;
  opacity: 1 !important;
}
html:root body .crit-num,
html:root body .step-num,
html:root body .rec-time,
html:root body .acc-badge {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #7d5342 !important;
  background-color: #7d5342 !important;
}
html:root body .gs-eyebrow,
html:root body .sp-eyebrow,
html:root body .stag {
  color: #6b4030 !important;
  -webkit-text-fill-color: #6b4030 !important;
}
html:root body section.s-navy .gs-eyebrow,
html:root body section.s-navy2 .gs-eyebrow,
html:root body section.s-navy3 .gs-eyebrow,
html:root body section.s-navy .sp-eyebrow,
html:root body section.s-navy2 .sp-eyebrow,
html:root body section.s-navy3 .sp-eyebrow,
html:root body section.main-article a,
html:root body section.section-gs a,
html:root body section.s-navy a,
html:root body section.s-navy2 a,
html:root body section.s-navy3 a {
  color: #f6e4d6 !important;
  -webkit-text-fill-color: #f6e4d6 !important;
}
html:root body section.main-article .triage-box .gs-eyebrow,
html:root body section[style*="f9f8f6"] .gs-eyebrow,
html:root body section[style*="f9f8f6"] .sp-eyebrow,
html:root body section[style*="#fff"] .gs-eyebrow,
html:root body .triage-box .gs-eyebrow,
html:root body .spec-intro .gs-eyebrow,
html:root body .crit-card .gs-eyebrow,
html:root body section.main-article .spec-card a,
html:root body section.main-article .crit-card a,
html:root body section.main-article .triage-box a,
html:root body section.main-article .faq-a a,
html:root body section.main-article .alire-card a,
html:root body section.main-article .spec-intro a,
html:root body section.section-gs .spec-card a,
html:root body section.section-gs .crit-card a,
html:root body section.section-gs .triage-box a,
html:root body section.section-gs .faq-a a,
html:root body section.section-gs .alire-card a,
html:root body section.section-gs .spec-intro a,
html:root body figure.photo-fig a,
html:root body .photo-fig a,
html:root body section.main-article .triage-box a,
html:root body section.main-article table a,
html:root body section.main-article td a,
html:root body section.section-gs table a,
html:root body section.section-gs td a,
html:root body section[style*="f9f8f6"] a,
html:root body section[style*="#fff"] a,
html:root body .table-scroll-wrap a {
  color: #6b4030 !important;
  -webkit-text-fill-color: #6b4030 !important;
  background: transparent !important;
}
html:root body section.s-navy .stag,
html:root body section.s-navy2 .stag,
html:root body section.s-navy3 .stag,
html:root body section.s-navy h2 em,
html:root body section.s-navy2 h2 em,
html:root body section.s-navy3 h2 em,
html:root body section.s-navy .sh-w em,
html:root body section.s-navy2 .sh-w em,
html:root body section.s-navy3 .sh-w em,
html:root body .pp-num,
html:root body .stat-label,
html:root body .stat-cell {
  color: #f7f4f0 !important;
  -webkit-text-fill-color: #f7f4f0 !important;
  opacity: 1 !important;
}
html:root body section.s-navy .acc-tag,
html:root body section.s-navy2 .acc-tag,
html:root body section.s-navy span.rec,
html:root body section.s-navy2 span.rec,
html:root body .acc-tag,
html:root body span.rec {
  color: #3d2418 !important;
  -webkit-text-fill-color: #3d2418 !important;
  background: #faf6f0 !important;
  background-color: #faf6f0 !important;
}
html:root body a[style*="background:#b8856a"],
html:root body a[style*="background:var(--r)"],
html:root body a[style*="background: var(--r)"] {
  background: #7d5342 !important;
  background-color: #7d5342 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html:root body a[style*="color:#b8856a"],
html:root body a[style*="color: #b8856a"],
html:root body a[style*="color:var(--r)"] {
  color: #f6e4d6 !important;
  -webkit-text-fill-color: #f6e4d6 !important;
}
html:root body section.main-article p a,
html:root body section.section-gs p a,
html:root body section.main-article li a,
html:root body section.section-gs li a,
html:root body section.main-article .gs-eyebrow,
html:root body section.section-gs .gs-eyebrow,
html:root body section.main-article .sp-eyebrow,
html:root body section.section-gs .sp-eyebrow {
  color: #f6e4d6 !important;
  -webkit-text-fill-color: #f6e4d6 !important;
}
html:root body section.geo-answer a,
html:root body section.geo-answer .gs-eyebrow,
html:root body section.geo-answer .sp-eyebrow,
html:root body section[style*="f9f8f6"] a,
html:root body section[style*="f9f8f6"] .gs-eyebrow,
html:root body section[style*="f9f8f6"] .sp-eyebrow,
html:root body .triage-box a,
html:root body .triage-box .gs-eyebrow,
html:root body .faq-answer a,
html:root body .faq-a a,
html:root body section.main-article table a,
html:root body section.main-article td a {
  color: #6b4030 !important;
  -webkit-text-fill-color: #6b4030 !important;
}
html:root body a.acc-cta-fiche,
html:root body section .acc-item a.acc-cta-fiche {
  background: #7d5342 !important;
  background-color: #7d5342 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html:root body .avis-strip,
html:root body .avis-strip-t,
html:root body .avis-strip-d {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html:root body .avis-strip {
  background: #0d1f35 !important;
  background-color: #0d1f35 !important;
}
html:root body .avis-strip a {
  color: #f6e4d6 !important;
  -webkit-text-fill-color: #f6e4d6 !important;
}
/* Sections écrites sur fond clair : le CSS de page forçait le marine par-dessus.
   On rend le fond demandé, et l'encre sombre qui va avec. */
html:root body section[style*="f9f8f6"],
html:root body section[style*="f6f3ef"],
html:root body section[style*="fdfcfa"],
html:root body section[style*="#fff"] {
  background-color: #f7f4f0 !important;
  color: #1a2538 !important;
}
html:root body section[style*="f9f8f6"] .gs-eyebrow,
html:root body section[style*="f6f3ef"] .gs-eyebrow,
html:root body section[style*="fdfcfa"] .gs-eyebrow,
html:root body section[style*="f9f8f6"] .sp-eyebrow,
html:root body section[style*="f6f3ef"] .sp-eyebrow,
html:root body section[style*="fdfcfa"] .sp-eyebrow,
html:root body section[style*="f9f8f6"] h2,
html:root body section[style*="f6f3ef"] h2,
html:root body section[style*="fdfcfa"] h2,
html:root body section[style*="f9f8f6"] h3,
html:root body section[style*="f6f3ef"] h3,
html:root body section[style*="fdfcfa"] h3,
html:root body section[style*="f9f8f6"] p,
html:root body section[style*="f6f3ef"] p,
html:root body section[style*="fdfcfa"] p,
html:root body section[style*="f9f8f6"] li,
html:root body section[style*="f6f3ef"] li,
html:root body section[style*="fdfcfa"] li,
html:root body section[style*="f9f8f6"] a,
html:root body section[style*="f6f3ef"] a,
html:root body section[style*="fdfcfa"] a,
html:root body section[style*="f9f8f6"] p a,
html:root body section[style*="f6f3ef"] p a,
html:root body section[style*="fdfcfa"] p a,
html:root body section[style*="f9f8f6"] li a,
html:root body section[style*="f6f3ef"] li a,
html:root body section[style*="fdfcfa"] li a {
  color: #1a2538 !important;
  -webkit-text-fill-color: #1a2538 !important;
}
/* Italique blush sur section claire : #b8856a reste sous 4,5:1. */
html:root body section.s-off h2 em,
html:root body section.s-off h3 em,
html:root body section.s-off .sh-d em,
html:root body section.s-off .sh-w em,
html:root body section.s-white h2 em,
html:root body section.s-white h3 em {
  color: #6b4030 !important;
  -webkit-text-fill-color: #6b4030 !important;
}
/* Intro sur fond blanc (la classe bg-white). Paget FR réécrit ces liens :
   sa feuille force cette section en marine. */
html:root body section.bg-white.main-article .intro-text a {
  color: #6b4030 !important;
  -webkit-text-fill-color: #6b4030 !important;
}
/* Les cartes « À lire aussi » sont des liens. Une règle de liens
   leur mettait un fond transparent : le texte foncé tombait sur le marine. */
html:root body a.alire-card,
html:root body a.lire-aussi-card,
html:root body section.main-article a.alire-card,
html:root body section[style*="f9f8f6"] a.alire-card,
html:root body section[style*="fdfcfa"] a.alire-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a2538 !important;
  -webkit-text-fill-color: #1a2538 !important;
}
html:root body a.alire-card h3,
html:root body a.alire-card h4,
html:root body a.alire-card p,
html:root body a.lire-aussi-card h3,
html:root body a.lire-aussi-card h4,
html:root body a.lire-aussi-card p {
  color: #1a2538 !important;
  -webkit-text-fill-color: #1a2538 !important;
  background: transparent !important;
  background-color: transparent !important;
}
html:root body a.alire-card .alire-tag,
html:root body a.lire-aussi-card .alire-tag {
  color: #6b4030 !important;
  -webkit-text-fill-color: #6b4030 !important;
  background: #f3e6dc !important;
  background-color: #f3e6dc !important;
}

/* Menu collé comme cancer-sein.
   articles-regles.css (max-width:900px) remet overflow-x:hidden sur html
   et overflow-x:clip sur body. Sur iPhone, ce clip devient le bloc
   englobant de position:fixed : le menu sort de l'écran en défilant.
   Le viewport doit défiler, sans transform ni clip sur html/body. */
html:root,
html:root body {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
html:root body nav.nav,
html:root body #nav,
html:root body nav.nav.up,
html:root body #nav.up,
html:root body .nav.nav-hidden,
html:root body .nav.msb-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
  z-index: 9999 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html:root body nav.sec-nav,
html:root body .sec-nav {
  position: sticky !important;
  z-index: 398 !important;
  overflow: visible !important;
  transform: none !important;
}
/* Intime : le sommaire est dans main, et main a overflow-x:clip.
   Le clip limite le collage à main : en bas de page la barre part.
   display:contents rend le collage au corps, comme sur cancer-sein. */
html:root body main#main-content {
  display: contents !important;
}
html:root body main {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
@media (max-width: 1100px) {
  html:root body nav.nav,
  html:root body #nav,
  html:root body nav.nav.up,
  html:root body #nav.up {
    height: auto !important;
    min-height: 88px !important;
  }
  html:root body nav.sec-nav,
  html:root body .sec-nav,
  html:root body:has(.nav.up) nav.sec-nav,
  html:root body:has(.nav.up) .sec-nav {
    top: 88px !important;
  }
}
@media (min-width: 1101px) {
  html:root body nav.nav.up,
  html:root body #nav.up {
    height: 76px !important;
    min-height: 76px !important;
  }
  html:root body nav.sec-nav,
  html:root body .sec-nav {
    top: 72px !important;
  }
  html:root body:has(.nav.up) nav.sec-nav,
  html:root body:has(.nav.up) .sec-nav {
    top: 76px !important;
  }
}

/* Le bandeau cookies (z-index 2147483000) passait devant la derniere
   entree du sous-menu : la souris sortait du survol et le menu se fermait.
   La barre et le menu telephone restent au-dessus de ce bandeau. */
html:root body nav.nav,
html:root body #nav,
html:root body nav.nav.up,
html:root body #nav.up,
html:root body .nav.nav-hidden,
html:root body .nav.msb-active,
html:root body .mobile-menu.open {
  z-index: 2147483600 !important;
}