/* Compléments pour la page test /cancer-sein (forme V18) :
   habille, dans le vocabulaire graphique V18 (marine #0d1f35, cuivre #b8856a,
   Cormorant Garamond + Inter), les blocs de CONTENU ajoutés depuis l'été
   et qui n'existaient pas en V18. Chargé uniquement par cette page. */

/* 1. Bandeaux « Prendre rendez-vous » (ajoutés en octobre) : gabarit des sections marine V18 */
.samuel-cta-band{background:var(--n,#0d1f35);padding:44px 24px;border-top:1px solid rgba(184,133,106,.25);border-bottom:1px solid rgba(184,133,106,.12);}
.samuel-cta-inner{max-width:760px;margin:0 auto;text-align:center;}
.samuel-cta-band p{font-family:var(--sans,'Inter',sans-serif);color:rgba(255,255,255,.72);font-size:1rem;font-weight:300;line-height:1.75;margin:0 auto 22px;max-width:640px;}
.samuel-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.samuel-cta-band .cta-primary{font-family:var(--sans,'Inter',sans-serif);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:15px 30px;background:var(--r,#b8856a);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--r,#b8856a);transition:background .3s,border-color .3s;}
.samuel-cta-band .cta-primary:hover{background:#a06e55;border-color:#a06e55;}
.samuel-cta-band .cta-secondary{font-family:var(--sans,'Inter',sans-serif);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;padding:15px 30px;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);text-decoration:none;display:inline-flex;align-items:center;gap:10px;background:transparent;transition:border-color .3s,color .3s;}
.samuel-cta-band .cta-secondary:hover{border-color:var(--r,#b8856a);color:var(--r,#b8856a);}
@media (max-width:640px){.samuel-cta-btns{flex-direction:column;align-items:stretch}.samuel-cta-btns a{justify-content:center}}

/* 2. Nouveau sous-titre « Chirurgien du cancer du sein à Paris » dans la section marine Comprendre */
section#comprendre h2#ou-consulter{color:var(--w,#fff);}
section#comprendre h2#ou-consulter ~ p{color:rgba(255,255,255,.72);}
section#comprendre h2#ou-consulter ~ p a{color:var(--r,#b8856a);}

/* 3. Photos ajoutées à l'intérieur des cartes (bilan, parcours) : intégrées comme une seconde
      vignette de carte V18 (pas de cadre crème, même rognage 5/3 que l'image de carte) */
.lib-card .photo-fig,#parcours .photo-fig{margin:14px 0 6px !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;max-width:none !important;}
.lib-card .photo-fig img,#parcours .photo-fig img{aspect-ratio:5/3;object-fit:cover !important;height:auto !important;border-radius:0 !important;background:transparent !important;filter:brightness(.94) saturate(.96);}
.lib-card .photo-fig figcaption,#parcours .photo-fig figcaption{font-family:var(--sans,'Inter',sans-serif) !important;font-size:.78rem !important;font-style:italic;line-height:1.5 !important;color:#6b7785 !important;margin:8px 0 0 !important;}
.s-navy .lib-card .photo-fig figcaption{color:rgba(255,255,255,.5) !important;}
@media (min-width:901px){#parcours .photo-fig{max-width:420px !important;}}

/* 4. Nouvelles photos de cartes livrées avec un style en ligne « contain » : on remet le rognage V18 */
.lib-card-img img{width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important;border-radius:0 !important;background:transparent !important;}

/* 5. « À lire aussi » (ajouté en octobre) : cartes marine façon lib-card V18 */
.jz-alire{background:var(--n2,#162844);margin:0;padding:56px clamp(20px,5vw,80px);}
.jz-alire-t{font-family:var(--sans,'Inter',sans-serif);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--r,#b8856a);margin:0 auto 18px;max-width:1180px;}
.jz-alire-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1180px;margin:0 auto;}
.jz-alire-c{display:block;background:var(--n3,#1e3558);padding:24px 26px;border:1px solid rgba(184,133,106,.18);text-decoration:none;position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s;}
.jz-alire-c:hover{transform:translateY(-3px);border-color:rgba(184,133,106,.45);}
.jz-alire-c .tag{display:block;font-family:var(--sans,'Inter',sans-serif);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--r,#b8856a);margin-bottom:10px;}
.jz-alire-c h4{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.3rem;font-weight:300;color:#fff;line-height:1.25;margin:0 0 10px;}
.jz-alire-c p{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.5);margin:0;}

/* 6. Contrôles flottants sur téléphone (onglet TÉLÉCONSULTATION ajouté en octobre, bulle Sophie, FR/EN) :
      repris tels quels de charte.css (lignes 757-833 de main b676911) pour qu'ils ne se recouvrent pas
      et ne masquent pas le titre du héros. */
@media (max-width:900px){
  html:root{
    --jz-lang-gutter:54px;
    --jz-ctrl-edge:8px;
    --jz-sophie:56px;
    --jz-ctrl-gap:12px;
  }
  html:root body .lang-switcher{
    position:fixed !important;
    top:auto !important;
    right:auto !important;
    bottom:calc(var(--jz-ctrl-edge) + env(safe-area-inset-bottom, 0px)) !important;
    left:var(--jz-ctrl-edge) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    z-index:9000 !important;
    transform:none !important;
    width:36px !important;
    max-width:36px !important;
    margin:0 !important;
  }
  html:root body .lang-switcher .lang-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    flex:0 0 36px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    font-size:12px !important;
    letter-spacing:.02em !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  html:root body #zchat-bubble{
    position:fixed !important;
    top:auto !important;
    left:auto !important;
    right:var(--jz-ctrl-edge) !important;
    bottom:calc(var(--jz-ctrl-edge) + env(safe-area-inset-bottom, 0px)) !important;
    width:var(--jz-sophie) !important;
    height:var(--jz-sophie) !important;
    max-width:var(--jz-sophie) !important;
    margin:0 !important;
    transform:none !important;
  }
  html:root body [data-onglet-rdv-josamcha]{
    position:fixed !important;
    top:auto !important;
    left:auto !important;
    right:calc(var(--jz-ctrl-edge) + 8px) !important;
    bottom:calc(var(--jz-ctrl-edge) + var(--jz-sophie) + var(--jz-ctrl-gap) + env(safe-area-inset-bottom, 0px)) !important;
    width:max-content !important;
    max-width:calc(100vw - var(--jz-lang-gutter) - var(--jz-ctrl-edge)) !important;
    box-sizing:border-box !important;
    transform:none !important;
  }
  html:root body a.jz-teleconsult{
    padding:8px 12px !important;
    gap:8px !important;
    white-space:normal !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  html:root body [data-deux-josamcha] > a.jz-teleconsult{
    margin-left:var(--jz-lang-gutter) !important;
    max-width:calc(100% - var(--jz-lang-gutter)) !important;
  }
  html:root body [data-onglet-rdv-josamcha] a span,
  html:root body a.jz-teleconsult span{
    white-space:normal !important;
  }
}

/* 7. Grand écran (≥1000 px) : largeur du texte, des cartes et des grilles alignée sur la prod actuelle
      (valeurs de largeur max / marges reprises du bloc <style id="jz-grand-ecran-10"> de main b676911).
      Seules les règles de largeur et de marges sont reprises : pas les tailles de police (typo V18 conservée).
      Aucun effet sous 1000 px : le mobile reste inchangé. Demande du Dr, 19/10/2026. */
@media (min-width:1000px){
  html body .si,html body .s .si{max-width:1500px !important;margin-left:auto !important;margin-right:auto !important;float:none !important}
  html body .s{padding-left:56px !important;padding-right:56px !important}
  html body .intro-paragraphs,html body .s-navy .lead,html body .s-white .lead,html body .lib-intro,html body .lib-footer,html body .emphatic-intro{max-width:none !important;width:auto !important;margin-left:auto !important;margin-right:auto !important;float:none !important}
  html body .s p,html body .s ul,html body .s ol,html body .s h2,html body .s h3{max-width:none !important;margin-left:0 !important;margin-right:0 !important}
  html body .s .si > div:not([class*="grid"]):not([class*="card"]):not([class*="fig"]):not([class*="cta"]):not([class*="nav"]){max-width:none !important;width:auto !important;margin-left:auto !important;margin-right:auto !important;float:none !important}
  html body .s div[style*="grid"]:has(> .intro-paragraphs),html body .s div[style*="grid"]:has(> :only-child){grid-template-columns:1fr !important;gap:0 !important;display:block !important}
  html body .s div[style*="grid"] > .intro-paragraphs{grid-column:1 / -1 !important;width:auto !important;max-width:none !important}
  html body footer p,html body [class*="foot"] p,html body [class*="foot"] .desc{max-width:none !important}
  /* « À lire aussi » : même largeur de grille que la prod (1180 px moins 2 × 52 px de marge) */
  html body .jz-alire-t,html body .jz-alire-g{max-width:1076px !important}
}

/* ═══ 8. Correctifs Gardien PR #639 (19/10/2026) — couleurs, barre du haut, pied de page.
   Mise en page V18 inchangée. Règles reprises de la prod (charte.css, articles-regles.css)
   et contrastes portés à ≥ 4,5:1. Boutons : cuivre #b8856a + texte blanc. ═══ */

/* 8a. Barre du haut de la prod : marine opaque à toutes les largeurs (charte.css) */
html:root body nav.nav,html:root body #nav{background:rgba(13,31,53,.97) !important;}

/* 8b. Ordinateur ≥ 1101 px : barre de la prod (articles-regles.css + charte.css),
   les deux boutons restent dans l'écran et cliquables */
html body .nav-rdv-doctolib{font-family:'Inter',system-ui,sans-serif;font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;background:#b8856a;color:#fff;font-weight:500;transition:background .25s;white-space:nowrap;border:1px solid #b8856a;}
html body .nav-rdv-doctolib:hover{background:#a06e55;border-color:#a06e55;}
html body .nav-rdv-rappel{font-family:'Inter',system-ui,sans-serif;font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;background:transparent;color:rgba(255,255,255,.75);font-weight:500;transition:all .25s;white-space:nowrap;border:1px solid rgba(255,255,255,.25);}
html body .nav-rdv-rappel:hover{color:#b8856a;border-color:#b8856a;}
@media (min-width:1101px){
  html:root body nav.nav,html:root body #nav{padding:0 12px !important;gap:8px !important;max-width:100vw !important;box-sizing:border-box !important;overflow:visible !important;}
  html:root body .nav-l{min-width:0 !important;gap:8px !important;}
  html:root body .nav-id .nn{font-size:.76rem !important;}
  html:root body .nav-id .ns{font-size:.46rem !important;letter-spacing:.03em !important;}
  html:root body .nav-menu{min-width:min-content !important;flex:1 1 auto !important;margin-left:6px !important;overflow:visible !important;}
  html:root body .nav-menu > li > a{font-size:9.5px !important;letter-spacing:.01em !important;padding:0 3px !important;}
  html:root body .nav-menu > li.has-drop{position:relative !important;}
  html:root body .nav-menu > li.has-drop > ul.dropdown{top:calc(100% - 8px) !important;margin-top:0 !important;z-index:10002 !important;padding-top:8px !important;background-clip:padding-box !important;}
  html:root body .nav-menu > li.has-drop > ul.dropdown li{pointer-events:auto !important;}
  html:root body #nav .nav-menu > li:last-child > a,html:root body #nav .nav-menu > li:last-child > a:hover,html:root body #nav .nav-menu > li:last-child > a:focus{padding-left:3px !important;padding-right:8px !important;}
  html:root body #nav .nav-ctas{margin-left:22px !important;flex:0 0 auto !important;flex-shrink:0 !important;}
  html:root body .nav-rdv-rappel,html:root body .nav-rdv-doctolib{font-size:9px !important;letter-spacing:.04em !important;padding:8px 9px !important;}
  html:root body nav.nav.up,html:root body #nav.up{height:76px !important;min-height:76px !important;padding-top:6px !important;padding-bottom:6px !important;}
}

/* 8c. Mobile (et jusqu'à 1100 px, voir 8j) : bouton MENU de la prod, icône blanche sur pastille marine (charte.css, 16,6:1) ;
   menu ouvert sur fond marine opaque (articles-regles.css) */
html:root body .mobile-menu{background:#0d1f35 !important;background-color:#0d1f35 !important;}
@media (max-width:1100px){
  html:root body button.hamburger{position:relative !important;background:transparent !important;background-image:none !important;border-radius:0 !important;isolation:isolate !important;}
  html:root body button.hamburger::before{content:"" !important;position:absolute !important;inset:0 !important;border-radius:999px !important;background:#0d1f35 !important;z-index:-1 !important;pointer-events:none !important;}
  html:root body button.hamburger span{background:transparent !important;background-image:none !important;}
  html:root body button.hamburger span.bar{background:#ffffff !important;}
  html:root body button.hamburger .m-label,html:root body button.hamburger .m-arrow{color:#ffffff !important;}
}

/* 8d. Bouton de langue actif : marine sur cuivre, comme la prod (5,2:1) */
html:root body .lang-btn.active,html:root body .lang-btn.active:hover{background:#b8856a !important;border-color:#b8856a !important;color:#0d1f35 !important;}

/* 8e. Pied de page : couleurs de la prod (13:1) */
html:root body .ft-desc,html:root body footer .ft-ls a,html:root body .ft-cp,html:root body .ft-cp a,html:root body .ft-soc a,html:root body footer .footer-credentials,html:root body footer .footer-copy{color:rgba(255,255,255,.88) !important;}
html:root body footer .ft-ls a:hover{color:#b8856a !important;}
html:root body footer [data-relecture-medecin]{color:rgba(255,255,255,.92) !important;opacity:1 !important;}
html:root body .creds-line{color:rgba(255,255,255,.78) !important;}

/* 8f. Héros : accroche en blanc comme la prod (16,6:1), « Défiler » lisible */
html:root body .hero-spec,html:root body .hero-spec strong{color:#fff !important;}
html:root body .scroll-txt{color:rgba(255,255,255,.7) !important;}

/* 8g. Cuivre foncé de la prod (#8f5f47) pour les petits textes cuivre sur fond clair */
html:root body .s-white .lib-card-tag,html:root body .s-white .lib-card-arrow,
html:root body .s-off .stag,html:root body #faq h2 em{color:#8f5f47 !important;}
html:root body .s-off .stag::before{background:#8f5f47 !important;}

/* 8h. « À lire aussi » : étiquettes cuivre clair et textes de la prod */
html:root body .jz-alire-c .tag{color:#d4a88c !important;}
html:root body .jz-alire-c p{color:#9aaac4 !important;}

/* 8i. Légende de la photo de convalescence : couleur de la prod */
html:root body #parcours .photo-fig figcaption{color:#1c2e4a !important;}

/* 8j. Barre du haut. 1000–1100 px : la barre de la prod ne tient pas (menu replié, boutons coupés) :
   bouton MENU + les deux boutons à côté. 1101–1365 px : menu complet comme la prod, nom du Dr visible,
   sous-titre masqué, liens et boutons resserrés pour que « Être rappelée » et « Prendre RDV » tiennent. */
@media (min-width:1000px) and (max-width:1100px){
  html:root body #nav .nav-menu{display:none !important;}
  html:root body #nav .nav-ctas{display:flex !important;margin-left:auto !important;gap:6px !important;flex:0 0 auto !important;}
  html:root body #nav .nav-rdv-rappel,html:root body #nav .nav-rdv-doctolib{display:inline-block !important;font-size:9px !important;letter-spacing:.04em !important;padding:8px 9px !important;}
  html:root body #nav .hamburger{display:flex !important;margin-left:12px !important;flex-shrink:0 !important;}
}
@media (min-width:1101px) and (max-width:1365px){
  html:root body nav.nav,html:root body #nav{padding:0 10px !important;}
  html:root body #nav .nav-l{gap:6px !important;}
  html:root body #nav .nav-id .ns{display:none !important;}
  html:root body #nav .nav-menu{display:flex !important;margin-left:4px !important;}
  html:root body #nav .nav-menu > li > a{font-size:clamp(8px,calc(8px + (100vw - 1101px) * .00568),9.5px) !important;letter-spacing:0 !important;padding:0 1px !important;}
  html:root body #nav .nav-menu > li:last-child > a{padding-right:2px !important;}
  html:root body #nav .nav-ctas{display:flex !important;margin-left:10px !important;gap:4px !important;flex:0 0 auto !important;}
  html:root body #nav .nav-rdv-rappel,html:root body #nav .nav-rdv-doctolib{display:inline-block !important;font-size:8.5px !important;letter-spacing:.03em !important;padding:7px 7px !important;}
  html:root body #nav .hamburger{display:none !important;}
}

/* 8k. Pas de défilement horizontal entre 1101 et 1300 px (barre de sections trop large de 10 à 190 px) :
   barre de sections resserrée, défilable dans sa propre largeur, page bornée comme la prod (charte.css). */
@media (min-width:1101px) and (max-width:1300px){
  html:root body .sec-nav-inner{padding:0 12px !important;overflow-x:auto !important;overflow-y:hidden !important;scrollbar-width:none !important;}
  html:root body .sec-nav-inner::-webkit-scrollbar{display:none !important;}
  html:root body .sn-a{padding:16px 8px !important;flex:0 0 auto !important;}
}
@media (min-width:999px){html:root body{overflow-x:clip !important;}}

/* 8l. Flèche du bouton MENU : même mouvement, sans fondu (l'opacité descendait à 0,3 → 2,75:1) */
@keyframes jz-fleche-menu{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
@media (max-width:1100px){html:root body button.hamburger .m-arrow{animation:jz-fleche-menu .8s ease-in-out infinite !important;opacity:1 !important;}}

/* 8m. Boutons flottants : la pastille Téléconsultation repasse sous la recherche et sous le menu ouvert (articles-regles.css) */
html:root body [data-onglet-rdv-josamcha]{z-index:3000 !important;}
html:root body:has(.mobile-menu.open) [data-onglet-rdv-josamcha]{visibility:hidden !important;pointer-events:none !important;}

/* 8n. Héros sur ordinateur : la photo de fond est recadrée pour que le visage de la patiente
   ne passe plus sous le portrait (même photo, même voile, seul le cadrage horizontal change) */
@media (min-width:1101px){html:root body .hero-photo-bg img{object-position:72% 15% !important;}}

/* 8o. Portrait du Dr entre 431 et 1100 px : cadre centré presque carré, photo calée en haut,
   pour que tout le visage et les épaules restent visibles sous la barre du haut (au lieu d'un
   bandeau pleine largeur coupé sous le nez). Voile du bas allégé pour ne pas assombrir le menton. */
@media (min-width:431px) and (max-width:1100px){
  html:root body .hero-right{height:clamp(340px,50vh,480px) !important;max-height:480px !important;width:min(100%,calc(clamp(340px,50vh,480px) * 1.05)) !important;margin:0 auto !important;flex:0 0 auto !important;align-self:center !important;}
  html:root body .hero-right img{object-position:center top !important;}
  html:root body .hero-right-overlay{background:linear-gradient(180deg,rgba(13,31,53,0) 0%,rgba(13,31,53,0) 72%,rgba(13,31,53,.85) 100%) !important;}
}

/* Téléphones (≤ 430 px) : même cadre qu'avant, seule la photo est calée en haut pour que le haut
   de la tête ne passe plus sous la barre du haut. */
@media (max-width:430px){html:root body .hero-right img{object-position:center top !important;}}

/* 8p. Onglet mis en avant du sommaire (« Risque familial », cuivre sur marine, 4,3:1) :
   cuivre un peu plus clair pour son texte seulement (5,3:1) ; le trait et les états survol/actif ne changent pas. */
html:root body .sec-nav a.sn-a[style*="color:var(--r)"]:not(.active):not(:hover){color:#c9977b !important;}