/* Sous-titres déclarés h2 pour Google (audit 15.11.2026) : h2.t3 / h2.t4 gardent l'apparence des anciens h3 / h4 */
h2.t3 { font-size: 1.17em; }
h2.t4 { font-size: 1em; }
  :root {
    --rose: #D6BCC6;
    --rose-texte: #8A4560;
    --rose-light: #E7DED4;
    --rose-pale: #F3EDE6;
    --bordeaux: #7A2E45;
    --or: #B5915F;
    --blanc: #FBF8F4;
    --texte: #2B2226;
    --gris: #685C62;
    --transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* Force light mode always */
  :root { color-scheme: light only; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Jost', sans-serif;
    background: var(--blanc);
    color: var(--texte);
    font-weight: 300;
    overflow-x: hidden;
  }

  /* NAV */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px clamp(20px, 2.4vw, 56px);
    background: rgba(251,248,244,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(176,154,135,0.2);
    transition: padding var(--transition);
  }

  .nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--bordeaux);
  }

  .nav-logo span {
    display: block;
    white-space: nowrap;
    font-size: 0.78rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--gris);
    margin-top: 2px;
  }

  .nav-links {
    display: flex;
    gap: clamp(12px, 1.5vw, 34px);
    list-style: none;
    align-items: center;
  }

  .nav-links a {
    text-decoration: none;
    color: var(--texte);
    font-size: clamp(0.62rem, 0.42rem + 0.55vw, 0.75rem);
    letter-spacing: 0.01em ;
    text-transform: none;
    font-weight: 400;
    white-space: nowrap;
    transition: color 0.3s;
  }

  .nav-links a:hover { color: var(--bordeaux); }

  .nav-cta {
    background: var(--bordeaux);
    color: white !important;
    padding: 10px clamp(12px, 1.5vw, 24px);
    border-radius: 10px;
  }

  .nav-cta:hover { background: var(--rose) !important; color: white !important; }

  /* HERO */
  #accueil {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #FBF8F4;
    text-align: center;
    padding: 120px 40px 80px;
  }

  .hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 800px;
  }

  .hero-left::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(176,154,135,0.12) 0%, transparent 70%);
    pointer-events: none;
  }

  .hero-tag {
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--rose-texte);
    margin-bottom: 24px;
    font-weight: 400;
    opacity: 0;
    animation: fadeUp 0.8s 0.3s forwards;
  }

  .hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--texte);
    margin-bottom: 8px;
    opacity: 0;
    animation: fadeUp 0.8s 0.5s forwards;
  }

  .hero-title em {
    font-style: italic;
    color: var(--bordeaux);
  }

  .hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    color: var(--gris);
    font-style: italic;
    margin-bottom: 40px;
    line-height: 1.7;
    opacity: 0;
    animation: fadeUp 0.8s 0.7s forwards;
  }

  .hero-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 48px;
    opacity: 0;
    animation: fadeUp 0.8s 0.9s forwards;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    color: var(--gris);
    text-transform: none;
    justify-content: center;
  }

  .badge::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--rose);
    flex-shrink: 0;
  }

  .hero-btn {
    display: inline-block;
    background: var(--bordeaux);
    color: white;
    padding: 16px 40px;
    text-decoration: none;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    font-weight: 400;
    border-radius: 10px;
    transition: all 0.3s;
    width: fit-content;
    opacity: 0;
    animation: fadeUp 0.8s 1.1s forwards;
    margin: 0 auto;
  }

  .hero-btn:hover {
    background: var(--rose);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(122,46,69,0.2);
  }

  /* --- Accueil : bloc identite (logo + titres) --- */
  .hero-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    text-align: left;
    width: 100%;
    background: white;
    padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 60px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(90,60,70, 0.18);
  }

  .hero-logo {
    width: auto;
    height: clamp(88px, 12vw, 150px);
    flex-shrink: 0;
    align-self: center;
  }

  .hero-identity-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
    min-width: 0;
  }

  .hero-rule {
    width: 40px;
    height: 1px;
    background: var(--rose);
    margin-bottom: 20px;
  }

  .hero-credentials {
    font-family: 'Cormorant Garamond', serif;
    color: var(--bordeaux);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.85;
    text-align: left;
  }

  .hero-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(32px, 6vw, 72px);
  }

  .hero-right {
    display: none;
  }

  .hero-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
      radial-gradient(ellipse at 60% 30%, rgba(176,154,135,0.12) 0%, transparent 60%),
      radial-gradient(ellipse at 30% 80%, rgba(196,168,130,0.06) 0%, transparent 50%);
  }

  .hero-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-emblem {
    width: 280px;
    height: 280px;
    position: relative;
    opacity: 0;
    animation: fadeIn 1.2s 0.8s forwards;
  }

  .hero-emblem svg {
    width: 100%;
    height: 100%;
  }

  .hero-institution {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    animation: fadeUp 0.8s 1.3s forwards;
  }

  .hero-institution p {
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--bordeaux);
    font-weight: 400;
  }

  .hero-institution strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--texte);
    margin-top: 4px;
    letter-spacing: 0.05em;
  }

  /* SECTION BASE */
  section { 
    padding: 100px 80px;
    scroll-margin-top: 110px;
  }

  .section-tag {
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--rose-texte);
    font-weight: 400;
    margin-bottom: 16px;
  }

  .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--texte);
  }

  .section-title em { font-style: italic; color: var(--bordeaux); }

  .divider {
    width: 40px;
    height: 1px;
    background: var(--rose);
    margin-bottom: 40px;
  }

  /* À PROPOS */
  .apropos-photo {
    width: 100%;
    max-width: 380px;
    margin: 0 auto 40px;
    position: relative;
  }

  .apropos-photo img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
    display: block;
  }

  .apropos-photo::after {
    content: '';
    position: absolute;
    bottom: -12px;
    right: -12px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--rose);
    border-radius: 12px;
    z-index: -1;
  }

  .apropos-right {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #apropos {
    background: white;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 56px;
    align-items: start;
  }

  .apropos-text p {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #3F3238;
    margin-bottom: 24px;
    max-width: 33em;   /* environ 72 caracteres par ligne */
  }

  .apropos-credentials {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .credential-card {
    background: var(--rose-pale);
    padding: 32px 28px;
    border-radius: 16px;
  }

  .credential-card .label {
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--rose-texte);
    margin-bottom: 8px;
  }

  .credential-card .value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--texte);
    line-height: 1.5;
  }

  /* SPÉCIALITÉS */
  #specialites { background: var(--rose-pale); }

  .specialites-intro {
    max-width: 600px;
    margin-bottom: 64px;
  }

  .specialites-intro p {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #3F3238;
  }

  .specialites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
  }

  .specialite-card {
    background: white;
    border: 1px solid var(--rose-light);
    border-radius: 16px;
    padding: 40px 34px;
    transition: all var(--transition);
    cursor: default;
  }

  .specialite-card:hover {
    background: var(--bordeaux);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(122,46,69,0.2);
    z-index: 1;
  }

  .specialite-card:hover .spec-title,
  .specialite-card:hover .spec-text,
  .specialite-card:hover .spec-num { color: white; }

  .spec-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    color: var(--rose-light);
    font-weight: 300;
    line-height: 1;
    margin-bottom: 24px;
    transition: color 0.3s;
  }

  .spec-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: var(--texte);
    margin-bottom: 16px;
    font-weight: 400;
    transition: color 0.3s;
  }

  .spec-text {
    font-size: 0.82rem;
    line-height: 1.8;
    color: var(--gris);
    transition: color 0.3s;
  }

  /* CANCER & TRAITEMENTS */
  #cancers { 
    background: white;
    min-height: 100vh;
  }

  .cancers-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--rose-light);
  }

  .tab-btn {
    padding: 16px 32px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--gris);
    font-weight: 400;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.3s;
  }

  .tab-btn.active {
    color: var(--bordeaux);
    border-bottom-color: var(--bordeaux);
  }

  .tab-btn:hover { color: var(--bordeaux); }

  .tab-content { display: none; }
  .tab-content.active { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .info-card {
    border: 1px solid var(--rose-light);
    padding: 36px 28px;
    border-radius: 16px;
    transition: all var(--transition);
  }

  .info-card:hover {
    border-color: var(--rose);
    box-shadow: 0 8px 40px rgba(176,154,135,0.15);
  }

  .info-card h3, .info-card h2.t3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--bordeaux);
    margin-bottom: 12px;
  }

  .info-card p {
    font-size: 0.85rem;
    line-height: 1.85;
    color: #3F3238;
  }

  .info-card ul {
    margin-top: 12px;
    padding-left: 0;
    list-style: none;
  }

  .info-card ul li {
    font-size: 0.82rem;
    line-height: 1.8;
    color: #3F3238;
    padding-left: 16px;
    position: relative;
  }

  .info-card ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--rose-texte);
  }

  /* DÉPISTAGE */
  #depistage {
    background: var(--bordeaux);
    color: white;
    text-align: center;
    padding: 120px 80px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* MÉNOPAUSE */
  #menopause {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  #menopause > div {
    width: 100%;
  }

  #depistage .section-tag { color: var(--rose-light); }
  #depistage .section-title { color: white; }
  #depistage .section-title em { color: var(--rose-light); }
  #depistage .divider { background: var(--rose-light); margin: 0 auto 40px; }

  #depistage p {
    font-size: 0.95rem;
    line-height: 1.9;
    color: rgba(255,255,255,0.8);
    max-width: 700px;
    margin: 0 auto 60px;
  }

  .depistage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
  }

  .depistage-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 36px 28px;
    border-radius: 16px;
    text-align: center;
  }

  .depistage-item .icon {
    font-size: 2rem;
    margin-bottom: 16px;
  }

  .depistage-item h3, .depistage-item h2.t3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: white;
    margin-bottom: 12px;
  }

  .depistage-item p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    margin: 0;
  }

  /* CENTRE */
  /* Une seule colonne : la grille à deux colonnes n'avait qu'un enfant
     et laissait la moitié droite vide sur ordinateur. */
  #centre {
    background: var(--rose-pale);
  }

  .centre-text p {
    font-size: 0.92rem;
    line-height: 1.9;
    color: #3F3238;
    margin-bottom: 20px;
  }

  .centre-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
  }

  .feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .feature-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(176,154,135,0.2);
  }

  .feature-text h4, .feature-text h2.t4 {
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--bordeaux);
    margin-bottom: 4px;
    font-weight: 500;
  }

  .feature-text p {
    font-size: 0.82rem;
    color: var(--gris);
    margin: 0;
  }

  .centre-visual {
    background: white;
    padding: 48px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(176,154,135,0.15);
  }

  .centre-visual .logo-hirslanden {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: var(--bordeaux);
    font-weight: 300;
    margin-bottom: 8px;
  }

  .centre-visual .logo-sub {
    font-size: 0.78rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--gris);
    margin-bottom: 32px;
  }

  .centre-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  .stat {
    text-align: center;
    padding: 24px;
    background: var(--rose-pale);
    border-radius: 16px;
  }

  .stat .number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    color: var(--bordeaux);
    font-weight: 300;
    line-height: 1;
    margin-bottom: 4px;
  }

  .stat .label {
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--gris);
  }

  /* CONTACT */
  #contact {
    background: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-group label {
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--gris);
    font-weight: 400;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    border: 1px solid var(--rose-light);
    padding: 14px 18px;
    font-family: 'Jost', sans-serif;
    font-size: 0.88rem;
    color: var(--texte);
    background: var(--blanc);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.3s;
    font-weight: 300;
  }

  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    border-color: var(--rose);
  }

  .form-group textarea { height: 120px; resize: vertical; }

  .form-submit {
    background: var(--bordeaux);
    color: white;
    border: none;
    padding: 16px 40px;
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s;
    font-weight: 400;
    width: fit-content;
  }

  .form-submit:hover {
    background: var(--rose);
    transform: translateY(-2px);
  }

  .contact-info { padding-top: 8px; }

  .contact-info p {
    font-size: 0.92rem;
    line-height: 1.9;
    color: #3F3238;
    margin-bottom: 40px;
  }

  .contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .contact-detail {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .detail-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .detail-text .label {
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--rose-texte);
    margin-bottom: 2px;
  }

  .detail-text p {
    font-size: 0.88rem;
    color: var(--texte);
    margin: 0;
    line-height: 1.6;
  }

  /* FOOTER */
  footer {
    background: var(--texte);
    color: rgba(255,255,255,0.5);
    padding: 40px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  footer .footer-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: white;
    font-weight: 300;
  }

  footer p {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  /* ANIMATIONS */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Scroll animations */
  /* Blocs révélés au défilement : cachés seulement si le script tourne
     (classe « js » posée en tête de page) ; sinon ils restent visibles. */
  /* Apparitions douces (11 octobre 2026) : le bloc reste masqué le temps que le
     script prépare ses éléments, puis chaque élément arrive à son tour. */
  .js .reveal:not(.reveal-pret) { opacity: 0; }
  .js .reveal-piece {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 800ms cubic-bezier(0.23, 1, 0.32, 1), transform 800ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .js .reveal-piece.visible { opacity: 1; transform: none; }

  /* RESPONSIVE */
  @media (max-width: 1080px) {
    nav { padding: 20px 24px; }
    section { padding: 60px 24px; }
    #depistage { min-height: auto; padding: 60px 24px; }
    #menopause { min-height: auto; }
    #cancers { min-height: auto; }
    #accueil { grid-template-columns: 1fr; }
    .hero-left { padding: 100px 24px 60px; }
    .hero-right { height: 300px; }
    #apropos, #centre, #contact { grid-template-columns: 1fr; gap: 40px; }
    .specialites-grid { grid-template-columns: 1fr; }
    .tab-content.active { grid-template-columns: 1fr; }
    .depistage-grid { grid-template-columns: 1fr; gap: 16px; }
    footer { flex-direction: column; gap: 16px; text-align: center; padding: 32px 24px; }
    .cancers-tabs { overflow-x: auto; }
  }

  /* --- Petits ecrans : le bloc identite passe en colonne --- */
  @media (max-width: 640px) {
    #accueil { padding: 110px 20px 60px; }

    .hero-identity {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
      padding: 36px 24px;
      box-shadow: 0 12px 36px rgba(90,60,70, 0.16);
    }

    .hero-logo { height: 104px; }

    .hero-identity-text {
      align-items: center;
      text-align: center;
      width: 100%;
    }

    .hero-title { text-align: center; }
    .hero-subtitle { text-align: center; margin-bottom: 20px !important; }
    .hero-rule { margin-left: auto; margin-right: auto; }
    .hero-credentials { text-align: center; font-size: 1rem; line-height: 1.7; }
    .hero-credentials br { display: none; }
    .hero-cta-wrap { margin-top: 36px; }
  }

  /* ============================================================
     ACCUEIL REFONDU — bandeau a menu, photo + phrase, trois portes
     ============================================================ */

  .nav-rdv-top {
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: white;
    background: var(--bordeaux);
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    margin-right: 14px;
    white-space: nowrap;
    transition: background 0.3s;
  }
  .nav-rdv-top:hover { background: #5A2236; }

  #hamburger-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--rose);
    border-radius: 10px;
    cursor: pointer;
    padding: 7px 14px;
    margin-left: 12px;
  }
  .hamburger-label {
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--bordeaux);
  }

  #accueil { min-height: auto; padding: 130px clamp(20px, 5vw, 80px) 80px; }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
    width: 100%;
    max-width: 1180px;
    text-align: left;
  }

  .hero-words { display: flex; flex-direction: column; align-items: flex-start; }

  .hero-claim {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.14;
    font-weight: 300;
    color: var(--bordeaux);
    margin: 0 0 20px 0;
    opacity: 0;
    animation: fadeUp 0.8s 0.2s forwards;
  }

  .hero-claim em { color: var(--rose-texte); font-style: italic; }

  .hero-lead {
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.98rem, 1.25vw, 1.12rem);
    line-height: 1.65;
    color: var(--texte);
    margin: 0 0 22px 0;
    max-width: 26em;
    opacity: 0;
    animation: fadeUp 0.8s 0.35s forwards;
  }

  .hero-credo {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    color: var(--texte);
    margin: 0 0 14px 0;
    max-width: 30em;
    opacity: 0;
    animation: fadeUp 0.8s 0.45s forwards;
  }

  .hero-signature {
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--rose-texte);
    margin: 0 0 26px 0;
    opacity: 0;
    animation: fadeUp 0.8s 0.6s forwards;
  }

  .hero-grid .hero-rule { margin-bottom: 18px; }

  .hero-grid .hero-credentials {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 34px;
    opacity: 0;
    animation: fadeUp 0.8s 0.75s forwards;
  }

  .hero-grid .hero-btn { opacity: 0; animation: fadeUp 0.8s 0.9s forwards; }

  .hero-portrait {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(90,60,70, 0.28);
    opacity: 0;
    animation: fadeIn 1.2s 0.5s forwards;
  }
  .hero-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 716 / 920;
  }

  /* --- Les trois portes --- */
  #portes {
    background: #FBF8F4;
    padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 80px);
    min-height: 0;
  }

  .portes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.2vw, 32px);
    max-width: 1180px;
    margin: 0 auto;
  }

  .porte {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--rose-light);
    border-radius: 16px;
    padding: clamp(26px, 3vw, 38px);
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  }
  .porte:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(90,60,70, 0.16);
    border-color: var(--rose);
  }

  .porte-q {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    line-height: 1.25;
    color: var(--bordeaux);
    margin-bottom: 14px;
  }
  .porte-a {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gris);
    flex: 1;
    margin-bottom: 22px;
  }
  .porte-go {
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--rose-texte);
  }
  .porte-go::after { content: ' \2192'; }

  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-portrait { max-width: 340px; align-self: center; }
    .portes-grid { grid-template-columns: 1fr; }
    .nav-rdv-top { display: none; }
  }

  @media (max-width: 640px) {
    #accueil { padding: 120px 20px 70px; }
    .hamburger-label { display: none; }
    #hamburger-btn { padding: 7px 10px; }
  }

  /* ============================================================
     ACCUEIL — mise en page reprise de Lovable, palette maison
     ============================================================ */

  /* Le bandeau devient une barre flottante arrondie */
  nav {
    top: 14px;
    left: clamp(12px, 2vw, 28px);
    right: clamp(12px, 2vw, 28px);
    padding: 14px clamp(16px, 1.8vw, 30px);
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(176,154,135,0.28);
    border-bottom: 1px solid rgba(176,154,135,0.28);
    border-radius: 22px;
    box-shadow: 0 10px 34px rgba(90,60,70,0.13);
  }

  #accueil { padding: 150px clamp(20px, 5vw, 80px) 90px; }

  .hero-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: #6A2A40;
    margin: 0 0 22px 0;
    opacity: 0;
    animation: fadeUp 0.8s 0.15s forwards;
  }

  .hero-lead {
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.98rem, 1.25vw, 1.1rem);
    line-height: 1.75;
    color: var(--gris);
    margin: 0 0 34px 0;
    max-width: 30em;
    opacity: 0;
    animation: fadeUp 0.8s 0.4s forwards;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 30px;
  }

  .hero-grid .hero-btn { margin: 0; animation: fadeUp 0.8s 0.55s forwards; }

  .hero-btn-2 {
    display: inline-block;
    background: white;
    color: var(--bordeaux);
    border: 1px solid var(--rose);
    padding: 15px 34px;
    text-decoration: none;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    border-radius: 10px;
    transition: all 0.3s;
    opacity: 0;
    animation: fadeUp 0.8s 0.65s forwards;
  }
  .hero-btn-2:hover {
    border-color: var(--bordeaux);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(122,46,69,0.14);
  }

  .hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    animation: fadeUp 0.8s 0.8s forwards;
  }
  .hero-points li {
    font-family: 'Jost', sans-serif;
    font-size: 0.82rem;
    color: var(--gris);
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .hero-points li::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--rose);
    flex-shrink: 0;
  }

  .hero-portrait { border-radius: 20px; }

  /* Les trois portes : un titre, et un numero par carte */
  .portes-titre {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 300;
    color: var(--bordeaux);
    max-width: 1180px;
    margin: 0 auto clamp(24px, 3vw, 40px) auto;
  }
  .porte-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--rose);
    letter-spacing: 0.06em;
    margin-bottom: 18px;
  }

  @media (max-width: 980px) {
    .hero-points { justify-content: flex-start; }
    .hero-actions { width: 100%; }
    .hero-btn-2, .hero-grid .hero-btn { flex: 1 1 auto; text-align: center; }
  }

  /* Sur petit ecran, une regle `section { padding !important }` du bloc en
     ligne ecrasait le retrait du haut : le chapeau passait sous le bandeau. */
  @media (max-width: 640px) {
    #accueil { padding: 124px 20px 72px !important; }
    #portes  { padding: 56px 20px !important; }
  }

  /* ============================================================
     Le menu se deploie dans le bandeau des qu'il y a la place,
     et le bouton Menu reste a droite, comme elle l'a demande.
     ============================================================ */
  @media (min-width: 1180px) {
    nav .nav-links {
      position: static !important;
      height: auto !important;
      width: auto !important;
      max-width: none !important;
      background: none !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      gap: 14px !important;
      box-shadow: none !important;
      transform: none !important;
      z-index: auto !important;
      flex: 1;
    }
    nav .nav-links li { width: auto !important; }
    nav .nav-links li a {
      font-family: 'Cormorant Garamond', serif !important;
      font-size: 0.95rem !important;
      font-weight: 400 !important;
      text-transform: none !important;
      letter-spacing: 0.015em !important;
      color: var(--bordeaux) !important;
      border-bottom: none !important;
      padding: 0 !important;
      white-space: nowrap;
    }
    nav .nav-links li a:hover { color: var(--bordeaux) !important; }
    /* Rendez-vous est deja la pastille de droite : pas deux fois */
    nav .nav-links li:has(> a.nav-cta) { display: none; }
  }

  /* Le bandeau deploye demande de la place : on la trouve en resserrant. */
  @media (min-width: 1180px) {
    nav .nav-links { gap: 14px !important; margin: 0 18px !important; }
    .nav-logo span[data-lk="nav-logo-name"] { font-size: 0.95rem !important; }
    nav { padding: 14px 20px; }
    .nav-logo span[data-lk="nav-logo-sub"] { font-size: 0.62rem !important; letter-spacing: 0.08em !important; }
    .nav-rdv-top { margin-right: 8px; padding: 9px 16px; }
    #lang-btn { padding: 7px 11px !important; }
    #hamburger-btn { padding: 7px 9px; margin-left: 8px; }
    #hamburger-btn .hamburger-label { display: none; }
  }

  /* Sur grand ecran le bouton Menu doit rester actif : quand il est ouvert,
     la liste redevient le panneau lateral, comme sur telephone. */
  @media (min-width: 1180px) {
    nav .nav-links.open {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      height: 100vh !important;
      width: 340px !important;
      max-width: 340px !important;
      background: white !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: flex-start !important;
      padding: 80px 32px 32px 32px !important;
      gap: 20px !important;
      margin: 0 !important;
      box-shadow: -8px 0 30px rgba(122,46,69,0.15);
      transform: translateX(0) !important;
      z-index: 999 !important;
      flex: none;
    }
    nav .nav-links.open li { width: 100% !important; }
    nav .nav-links.open li a {
      font-family: 'Cormorant Garamond', serif !important;
      font-size: 1.3rem !important;
      color: var(--bordeaux) !important;
      border-bottom: 1px solid rgba(176,154,135, 0.2) !important;
      padding: 8px 0 !important;
      display: block;
    }
    nav .nav-links.open li:has(> a.nav-cta) { display: block; }
    nav .nav-links.open li a.nav-cta {
      color: white !important;
      text-align: center;
      padding: 16px 24px !important;
      margin-top: 16px;
      border-bottom: none !important;
      font-family: 'Jost', sans-serif !important;
      font-size: 0.85rem !important;
    }
  }

  /* Mention informative, en pied de chaque page */
  .footer-disclaimer {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--gris);
    text-align: center;
    margin: 0 auto;
    padding: 28px 20px 32px;
    max-width: 44em;
  }

  footer .footer-disclaimer {
    color: rgba(255,255,255,0.62);
    padding: 18px 20px 0;
  }

  /* Portrait d'accueil : composition entière, sur sa décision du
     16 septembre 2026 — le tableau et le modèle anatomique restent. */
  .hero-portrait {
    position: static;
    overflow: hidden;
    aspect-ratio: 960 / 1103;
  }
  .hero-portrait img {
    position: static;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto;
    object-fit: fill;
  }

  /* Photo de consultation, dans « Deuxième avis », entre l'introduction et les cartes */
  .bande-consultation {
    margin: 0 0 40px;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 8px 30px rgba(122,46,69,0.15);
  }
  .bande-consultation img {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 640px) {
    .bande-consultation img { height: 190px; object-fit: cover; object-position: 70% center; } /* photo recadrée le 11.10.2026 : centrée sur l'échange */
  }

  /* Portrait de « Qui je suis » : composition entière, même décision. */
  .apropos-photo {
    position: relative;
    overflow: visible;
    aspect-ratio: auto;
  }
  .apropos-photo img {
    position: static;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px;
  }

  /* ============================================================
     Qui je suis — frise du parcours, sous le texte, pleine largeur
     ============================================================ */
  .frise {
    grid-column: 1 / -1;
    margin-top: clamp(24px, 3vw, 48px);
    padding-top: clamp(32px, 4vw, 56px);
    border-top: 1px solid var(--rose-light);
  }
  .frise .section-tag { margin-bottom: 36px; }

  .frise-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(16px, 2vw, 32px);
    position: relative;
  }
  .frise-liste::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    right: 0;
    height: 1px;
    background: var(--rose);
  }
  .frise-liste li {
    position: relative;
    padding-top: 34px;
  }
  .frise-liste li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--rose);
    box-sizing: border-box;
  }
  .frise-liste li:last-child::before {
    background: var(--bordeaux);
    border-color: var(--bordeaux);
  }

  .frise-date {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--bordeaux);
    margin-bottom: 8px;
    white-space: nowrap;
  }
  .frise-lieu {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    line-height: 1.55;
    color: var(--rose-texte);
    margin-bottom: 8px;
  }
  .frise-role {
    display: block;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--texte);
  }

  @media (max-width: 900px) {
    .frise-liste {
      grid-template-columns: 1fr;
      gap: 28px;
      padding-left: 34px;
    }
    .frise-liste::before {
      top: 4px;
      bottom: 4px;
      left: 7px;
      right: auto;
      width: 1px;
      height: auto;
    }
    .frise-liste li { padding-top: 0; }
    .frise-liste li::before { left: -34px; top: 6px; }
  }

  /* Onglet bénin : la liste des lésions pouvant donner un résultat B3 */
  .b3-liste {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rose-light);
    font-style: italic;
    color: var(--gris);
  }

  /* Lien de renvoi dans une carte d'information */
  .carte-lien {
    display: inline-block;
    margin-top: 14px;
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--rose-texte);
    text-decoration: none;
    border-bottom: 1px solid var(--rose-light);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
  }
  .carte-lien:hover { color: var(--bordeaux); border-color: var(--bordeaux); }

  /* FAQ : intertitres de groupe */
  .faq-groupe {
    font-family: 'Jost', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.01em ;
    text-transform: none;
    color: var(--rose-texte);
    margin: 28px 0 4px 4px;
  }
  .faq-groupe:first-child { margin-top: 0; }

  /* Contact : lien vers le plan (remplace la carte intégrée) et mention du formulaire médecin */
  .plan-lien-bloc { margin-top: 24px; }
  .form-note {
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--gris);
    margin: 4px 0 12px;
  }

  /* Chirurgie du sein : les interventions, en accordéon sous les cartes */
  .interventions {
    max-width: 900px;
    margin: clamp(48px, 6vw, 80px) auto 0;
  }
  .interv-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .interv-contenu { padding: 0 28px 22px; }
  .interv-contenu p {
    font-size: 0.9rem;
    line-height: 1.85;
    color: #3F3238;
    margin: 0 0 10px;
  }
  .interv-contenu p:last-child { margin-bottom: 0; }
  .interv-contenu em { font-style: normal; color: var(--rose-texte); }
  .interv-note {
    margin-top: 22px;
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--gris);
    font-style: italic;
  }
  .specialite-card:hover .carte-lien { color: white; border-color: rgba(255,255,255,0.5); }

  /* À propos en rangées : titre et credo | portrait ; biographie | qualifications ; frise */
  #apropos { align-items: center; row-gap: 40px; }
  #apropos .apropos-text { grid-column: 1; grid-row: 1; }
  #apropos .apropos-portrait { grid-column: 2; grid-row: 1; }
  #apropos .apropos-portrait .apropos-photo { margin: 0 auto; max-width: 340px; }
  #apropos .apropos-bio { grid-column: 1; grid-row: 2; align-self: start; }
  #apropos .apropos-credentials { grid-column: 2; grid-row: 2; align-self: start; }
  #apropos .apropos-bio p { font-size: 0.95rem; line-height: 1.9; color: #3F3238; margin-bottom: 24px; max-width: 33em; }
  #apropos .frise { grid-row: 3; }
  @media (max-width: 1080px) {
    #apropos .apropos-text, #apropos .apropos-portrait, #apropos .apropos-bio, #apropos .apropos-credentials { grid-column: 1; grid-row: auto; }
    #apropos .apropos-portrait { order: -1; }
    #apropos .frise { grid-row: auto; }
  }

  /* Parcours : même règle que Pathologies et Dépistage — au moins un écran
     sur ordinateur, contenu centré ; sinon, sur grand écran, le début de
     « Deuxième avis » apparaissait sous Parcours. */
  @media (min-width: 1081px) {
    #parcours {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #parcours > .reveal { width: 100%; }
  }

  /* Contact : icônes au trait (SVG), coordonnées sémantiques, liens d'appel */
  .detail-icon { color: var(--bordeaux); line-height: 0; margin-top: 1px; }
  .detail-icon svg { display: block; }
  address.coordonnees { font-style: normal; display: contents; }
  .lien-contact { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rose-light); }
  .lien-contact:hover { color: var(--bordeaux); border-color: var(--bordeaux); }
  .banniere-icone { display: inline-flex; line-height: 0; color: white; }

  /* Réglage « Réduire les animations » de l'appareil : plus de mouvement,
     tout le contenu est affiché immédiatement. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }
    .js .reveal, .js .reveal-piece { opacity: 1 !important; transform: none !important; }
    .porte:hover, .specialite-card:hover, .hero-btn:hover, .hero-btn-2:hover { transform: none !important; }
  }


  /* ============================================================
     Critique du 7 octobre 2026
     ============================================================ */

  /* Téléphone : le sous-titre du bandeau passait sous le bouton EN. */
  @media (max-width: 420px) {
    .nav-logo span[data-lk="nav-logo-sub"] { letter-spacing: 0.06em !important; }
  }

  /* Menu fermé : le panneau dépassait de 13 px sur le bord droit (le bandeau
     flottant sert de référence au position: fixed). On le pousse plus loin et
     on le rend invisible — il sort aussi de l'ordre de tabulation. */
  @media (max-width: 1179.98px) {
    nav .nav-links:not(.open) {
      transform: translateX(calc(100% + 48px));
      visibility: hidden;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
    }
    nav .nav-links.open {
      visibility: visible;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
  }

  /* Lisibilité : Jost en 400 pour le texte courant (300 était trop fin pour
     un public de 50 ans et plus), et texte des cartes à 0,95 rem. */
  body,
  .form-group input, .form-group select, .form-group textarea { font-weight: 400; }
  .spec-text,
  .interv-contenu p, .interv-note,
  .info-card p, .info-card li,
  #centre .reveal div[style*="grid-template-columns"] p,
  .parcours-step p,
  .avis-carte p,
  .faq-answer p,
  .detail-text { font-size: 0.95rem !important; }

  /* Dépistage : texte des cartes à 4,18:1, sous le seuil de 4,5:1. */
  #depistage .depistage-item p { color: rgba(255,255,255,0.93); }
  #depistage .depistage-item p[data-lk="dep-auto-source"] { color: rgba(255,255,255,0.88) !important; }

  /* Très petits écrans (≤ 360 px) : nom et sous-titre chevauchaient le
     bouton EN. Logo, nom et boutons resserrés, rien n'est masqué. */
  @media (max-width: 360px) {
    nav { padding-left: 12px !important; padding-right: 12px !important; }
    nav .nav-logo { gap: 8px !important; }
    nav .nav-logo img { height: 28px !important; }
    nav .nav-logo span[data-lk="nav-logo-name"] { font-size: 0.85rem !important; letter-spacing: 0.02em !important; }
    nav .nav-logo span[data-lk="nav-logo-sub"] { letter-spacing: 0.02em !important; }
    nav #lang-btn { padding: 6px 8px !important; letter-spacing: 0.1em !important; }
    nav #hamburger-btn { margin-left: 6px !important; }
  }

  /* Pied de page sur ordinateur : cinq blocs sur une seule ligne se
     repliaient les uns sur les autres. Deux rangées : nom et titres,
     puis copyright, liens et mention. */
  @media (min-width: 1081px) {
    footer {
      display: grid;
      grid-template-columns: auto 1fr auto;
      column-gap: 56px;
      row-gap: 18px;
      align-items: baseline;
    }
    footer .footer-logo { grid-column: 1; grid-row: 1; white-space: nowrap; }
    footer p[data-lk="footer-txt"] { grid-column: 2 / 4; grid-row: 1; margin: 0; }
    footer p[data-lk="copyright"] { grid-column: 1; grid-row: 2; margin: 0; white-space: nowrap; }
    footer > div { grid-column: 2; grid-row: 2; margin-top: 0 !important; white-space: nowrap; }
    footer .footer-disclaimer { grid-column: 3; grid-row: 2; margin: 0; padding-right: 110px; text-align: right; }
  }

  /* Contact : le formulaire patiente est ouvert d'emblée ; deux onglets
     remplacent le choix « Vous êtes » qui le cachait. */
  .profil-question {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--bordeaux);
    margin: 0 0 10px;
  }
  .profil-onglets {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 32px;
    background: var(--rose-pale);
    border-radius: 12px;
  }
  .profil-onglet {
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    color: var(--texte);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .profil-onglet[aria-pressed="true"] {
    background: white;
    color: var(--bordeaux);
    font-weight: 500;
    box-shadow: 0 1px 6px rgba(122,46,69, 0.12);
  }
  @media (hover: hover) and (pointer: fine) {
    .profil-onglet[aria-pressed="false"]:hover { color: var(--bordeaux); }
  }
  /* Les choix Oui / Non / Je ne sais pas ne se coupent plus en colonne. */
  .contact-form .form-group label:has(> input[type="radio"]) { white-space: nowrap; }
  .profil-onglet:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }

  /* Téléphone et tablette : le formulaire vient juste après l'introduction,
     les coordonnées et l'accès ensuite. */
  @media (max-width: 1080px) {
    #contact { display: flex !important; flex-direction: column; gap: 0 !important; }
    #contact .contact-info { display: contents; }
    #contact .contact-form-wrapper { order: 1; margin-bottom: 56px; }
    #contact .contact-details { order: 2; }
    .profil-onglets { display: flex; }
    .profil-onglet { flex: 1; padding: 10px 12px; }
  }

  /* ============================================================
     Accessibilité — 7 octobre 2026
     ============================================================ */

  /* Lien d'évitement : invisible jusqu'à la touche Tab. */
  .lien-evitement {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 2000;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--bordeaux);
    color: white;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    text-decoration: none;
  }
  .lien-evitement:focus { top: 16px; }
  main:focus { outline: none; }

  /* Anneau de focus visible partout, au clavier seulement (pas au clic). */
  :focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
  #depistage :focus-visible, footer :focus-visible, #clinical-banner :focus-visible { outline-color: white; }
  .form-group input:focus-visible,
  .form-group select:focus-visible,
  .form-group textarea:focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
    border-color: var(--bordeaux);
  }
  .faq-item > div:first-child:focus-visible { outline-offset: -3px; border-radius: 16px; }

  /* Surfaces du navigateur aux couleurs du site. */
  ::selection { background: var(--rose-light); color: var(--texte); }
  input, textarea { caret-color: var(--bordeaux); }

  /* Cibles tactiles d'au moins 44 px de haut, sans rien changer à l'œil :
     la zone cliquable déborde du texte de façon invisible. */
  .carte-lien, .lien-contact, footer a, #lang-btn,
  .contact-form .form-group label:has(> input[type="radio"]) { position: relative; }
  .carte-lien::before, .lien-contact::before, footer a::before, #lang-btn::before,
  .contact-form .form-group label:has(> input[type="radio"])::before {
    content: '';
    position: absolute;
    inset: 50% -6px auto -6px;
    height: 44px;
    transform: translateY(-50%);
  }

  /* ============================================================
     Menu — 7 octobre 2026
     ============================================================ */

  /* Le flou du bandeau (backdrop-filter) faisait du bandeau la boîte de
     référence du panneau : le panneau se logeait dans le bandeau au lieu
     de l'écran, et recouvrait le bouton. Le flou passe sur un calque
     ::before ; le panneau se cale de nouveau sur le bord de l'écran. */
  nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
  }
  @media (prefers-reduced-transparency: reduce) {
    nav::before { background: white; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* Menu ouvert : le bandeau passe au-dessus du voile, et le bouton
     reste visible au-dessus du panneau, transformé en croix. */
  body.menu-ouvert nav { z-index: 1000; }
  #hamburger-btn { position: relative; z-index: 1001; }
  #hamburger-btn .icone-fermer { display: none; }
  #hamburger-btn[aria-expanded="true"] .icone-menu { display: none; }
  #hamburger-btn[aria-expanded="true"] .icone-fermer { display: inline; }
  .nav-links { height: 100dvh !important; }

  /* Dépistage : prune profond au lieu du grand aplat d'accent */
  #depistage { background: #5A2236; }

  /* ============================================================
     Bandeau anglais et longueur des lignes — 7 octobre 2026
     ============================================================ */

  /* Bandeau « International & Clinical Patients » (anglais) : il était
     caché sous la barre flottante (entièrement sur ordinateur). Il est
     maintenant le premier élément de l'accueil, sur son fond, à la
     largeur du contenu. */
  body #clinical-banner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto clamp(28px, 4vw, 48px);
    padding: 14px clamp(16px, 1.8vw, 30px) !important;
    border-radius: 16px;
    text-align: left;
  }
  @media (max-width: 600px) {
    body #clinical-banner {
      flex-direction: column;
      align-items: flex-start !important;
      gap: 12px !important;
      font-size: 0.8rem !important;
    }
  }


  /* Longueur des lignes : 130 à 140 caractères dans la FAQ et les
     interventions, plus de 100 dans plusieurs introductions. Le texte
     est borné à environ 70 caractères ; les cadres ne changent pas. */
  .faq-answer p,
  .interv-contenu p,
  .interv-note,
  p[data-lk="centre-intro"],
  p[data-lk="av-intro"],
  p[data-lk="av-note"],
  p[data-lk="contact-intro"] { max-width: 31em !important; }
  #depistage p[data-lk="dep-intro"] { max-width: 31em; margin-left: auto; margin-right: auto; }

  /* ============================================================
     Impression — 7 octobre 2026
     Une patiente qui imprime l'accès ou la FAQ : fond blanc, texte
     noir d'encre, accordéons et onglets ouverts, ni menu ni formulaire,
     ni photos (encre), nom et titre en tête.
     ============================================================ */
  @media print {
    @page { margin: 16mm 16mm 18mm; }
    html, body { background: #fff !important; color: #2B2226 !important; font-size: 10.5pt; }
    *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }

    /* En tête : le logo et le nom du bandeau, le reste masqué */
    nav { position: static !important; background: none !important; border: 0 !important;
          border-bottom: 0.3mm solid #B5915F !important; border-radius: 0 !important;
          padding: 0 0 4mm !important; margin: 0 0 6mm !important; }
    nav::before { display: none !important; }
    nav .nav-links, nav .nav-rdv-top, #lang-btn, #hamburger-btn,
    #menu-overlay, .lien-evitement, #clinical-banner,
    .hero-actions, .hero-btn, .hero-btn-2, .hero-portrait, .hero-points,
    .contact-form-wrapper, .cancers-tabs, .cancers-pastilles, .rubrique-suivante, .anim-etapes, .anim-recon,
    .faq-icon, #centre img, #avis img, .apropos-portrait,
    #parcours > img, footer > img, .porte-go, .carte-lien,
    a[data-lk="av-cta"], #dep-auto-link, .plan-lien-bloc { display: none !important; }

    /* Tout le contenu visible, sans animation */
    .reveal, .js .reveal, .js .reveal-piece { opacity: 1 !important; transform: none !important; filter: none !important; }
    section, #accueil, #depistage, #parcours, #cancers { min-height: 0 !important; background: none !important;
          padding: 6mm 0 !important; color: #2B2226 !important; }
    #accueil { padding-top: 0 !important; }
    section *, footer * { color: #2B2226 !important; }
    section h2 em, section h1 em { color: #7A2E45 !important; }
    .section-tag, .faq-groupe { color: #685C62 !important; }

    /* Accordéons et onglets ouverts */
    .faq-answer { max-height: none !important; overflow: visible !important; }
    .faq-item, .info-card, .specialite-card, .parcours-step, .avis-carte, .depistage-item,
    .porte, .credential-card { break-inside: avoid; background: none !important;
          border: 0.25mm solid #E7DED4 !important; }
    .tab-content { display: block !important; }
    .tab-content[data-titre]::before { content: attr(data-titre); display: block;
          font-family: 'Cormorant Garamond', serif; font-size: 14pt; color: #7A2E45;
          margin: 5mm 0 3mm; }
    h1, h2, h3, h4, h2.t3, h2.t4 { break-after: avoid; }

    /* Grilles plus serrées sur papier */
    .specialites-grid, .depistage-grid, .avis-grid, .parcours-grid { gap: 3mm !important; }

    /* Pied de page : la mention, sobre */
    footer { display: block !important; background: none !important; padding: 6mm 0 0 !important;
             border-top: 0.3mm solid #E7DED4; }
    footer > div { display: none !important; }
    a { text-decoration: none !important; border: 0 !important; }

    /* Les animations d'entrée ne jouent pas sur papier : tout visible */
    *, *::before, *::after { animation: none !important; transition: none !important; }
    #accueil * { opacity: 1 !important; transform: none !important; }
    nav #hamburger-btn { display: none !important; }

    /* La feuille A4 déclenche la mise en page « téléphone » (une colonne) :
       on rétablit les grilles et on resserre, pour un document compact. */
    html, body { font-size: 9.5pt; }
    p, li { line-height: 1.5 !important; }
    .specialites-grid, .tab-content, .parcours-grid, .avis-grid, .depistage-grid, .portes-grid {
      display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 3mm !important; }
    .tab-content[data-titre]::before { grid-column: 1 / -1; }
    .faq-item, .info-card, .specialite-card, .parcours-step, .avis-carte, .depistage-item,
    .porte, .credential-card { padding: 3mm 4mm !important; border-radius: 3mm !important; }
    .faq-item > div:first-child { padding: 0 !important; }
    .faq-answer p, .interv-contenu p { padding: 1.5mm 0 0 !important; margin: 0 !important; }
    .section-title { font-size: 17pt !important; margin-bottom: 2mm !important; }
    .divider { margin: 2mm 0 4mm !important; }
    #accueil .hero-grid { display: block !important; }
    .hero-claim { font-size: 20pt !important; }
    #apropos { display: block !important; }
    /* « Venir au cabinet » : jamais coupé entre deux pages */
    #contact .contact-details > div { break-inside: avoid; background: none !important;
          border: 0.25mm solid #E7DED4 !important; padding: 3mm 4mm !important; }
  }

  /* Dépistage : le texte des trois cartes, centré sur sept lignes, se
     lisait mal ; aligné à gauche (7 octobre 2026). */
  .depistage-item { text-align: left; }
  /* Bouton du guide : lie-de-vin sur prune, il se voyait à peine. */
  #dep-auto-link { background: white !important; color: #7A2E45 !important; }

/* ============================================================
   Site en 8 pages — 8 octobre 2026
   ============================================================ */

/* Bandeau : le logo ramène à l'accueil ; la page en cours est marquée */
.nav-logo-lien { text-decoration: none; color: inherit; }
nav .nav-links a[aria-current="page"] { color: var(--bordeaux) !important; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }

/* ---------- Accueil : ouverture pleine hauteur ---------- */
.m-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100dvh;
  background: linear-gradient(180deg, #F8F4EF 0%, #F3EDE6 100%);
}
section.m-hero { padding: 0 !important; }
.m-hero-mots {
  align-self: center;
  padding: 150px clamp(24px, 6vw, 110px) 90px;
  max-width: 44rem;
}
.m-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 4.4vw, 4.4rem);
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--bordeaux);
  text-wrap: balance;
}
.m-hero h1 em { font-style: italic; }
.m-hero-lead { font-size: 1.15rem; line-height: 1.65; color: var(--texte); margin: 28px 0 40px; max-width: 30em; }
.m-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.m-hero-actions .hero-btn, .m-hero-actions .hero-btn-2 { animation: none; opacity: 1; margin: 0; }
.m-hero-photo { position: relative; overflow: hidden; }
.m-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 15%; }

/* Moment signature de l'accueil : le portrait se dévoile de bas en haut, une fois */
.js .m-hero-photo img { animation: m-devoile 1100ms cubic-bezier(0.23, 1, 0.32, 1) 150ms both; }
@keyframes m-devoile { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Accueil : qui elle est ---------- */
.m-qui { padding: clamp(4rem, 9vw, 7rem) clamp(20px, 6vw, 80px); background: white; }
.m-qui-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.m-qui-texte { font-size: 1.05rem; line-height: 1.75; max-width: 31em; margin-bottom: 8px; }
.m-faits { list-style: none; margin: 0; padding: 0; }
.m-faits li { padding: 20px 0; border-top: 1px solid var(--rose-light); font-size: 0.95rem; line-height: 1.55; color: var(--texte); }
.m-faits li:last-child { border-bottom: 1px solid var(--rose-light); }
.m-faits span { display: block; font-size: 0.875rem; letter-spacing: 0.01em ; text-transform: none; color: var(--bordeaux); margin-bottom: 6px; }

/* ---------- Appel au rendez-vous, en fin de page ---------- */
.m-appel { background: var(--rose-pale); padding: clamp(4rem, 9vw, 7rem) 20px; text-align: center; }
.m-appel-in { max-width: 40rem; margin: 0 auto; }
.m-appel .section-title { margin-bottom: 18px; }
.m-appel p { font-size: 1.05rem; color: var(--texte); }
.m-tel { margin: 14px 0 30px; }
.m-tel a { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: 0.03em; color: var(--bordeaux); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.m-appel .hero-btn { animation: none; opacity: 1; }

/* ---------- Votre parcours : tête de page ---------- */
.m-tete { padding: 150px clamp(20px, 6vw, 80px) clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, #F8F4EF 0%, #FBF8F4 100%); }
.m-tete-in { max-width: 1000px; margin: 0 auto; }
.m-tete h1.section-title { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.m-accueil-phrase {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.45;
  color: var(--texte);
  max-width: 30em;
  text-wrap: pretty;
}
.m-tete-photo { max-width: 1180px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.m-tete-photo img { display: block; width: 100%; height: auto; /* sinon height="1333" écrase le format */ aspect-ratio: 21 / 9; object-fit: cover; object-position: 60% 25%; border-radius: 20px; }
.m-tete-photo figcaption { font-size: 0.75rem; color: var(--gris); margin-top: 10px; }
/* La photo se dévoile au défilement */
.js .m-tete-photo img, .js .m-tete-photo .m-profondeur { clip-path: inset(0 0 100% 0 round 20px); transition: clip-path 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .m-tete-photo.visible img, .js .m-tete-photo.visible .m-profondeur { clip-path: inset(0 0 0 0 round 20px); }
.js .m-tete-photo .m-profondeur img { clip-path: none; }

/* ---------- Votre parcours : les quatre temps, en frise qui se dessine ---------- */
.m-etapes { padding: clamp(3rem, 7vw, 6rem) clamp(20px, 6vw, 80px); background: #FBF8F4; }
.m-frise { list-style: none; max-width: 760px; margin: 0 auto; padding: 0; counter-reset: none; }
.m-etape { position: relative; padding: 0 0 clamp(2.4rem, 5vw, 3.4rem) 92px; }
.m-etape:last-child { padding-bottom: 0; }
.m-etape::before { /* le trait vertical */
  content: ''; position: absolute; left: 27px; top: 58px; bottom: 6px; width: 1px; background: var(--rose);
  transform-origin: top; }
.m-etape:last-child::before { display: none; }
.m-etape-num {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: white; border: 1px solid var(--rose);
  font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: var(--bordeaux);
  font-variant-numeric: lining-nums;
}
.m-etape h3, .m-etape h2.t3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.6rem; color: var(--texte); margin: 10px 0 8px; }
.m-etape p { font-size: 1.02rem; line-height: 1.7; max-width: 31em; }
/* Moment signature de la page : chaque étape s'allume et le trait descend */
.js .m-etape { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1), transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .m-etape::before { transform: scaleY(0); transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 250ms; }
.js .m-etape .m-etape-num { transition: background-color 400ms ease, color 400ms ease; }
.js .m-etape.visible { opacity: 1; transform: none; }
.js .m-etape.visible::before { transform: scaleY(1); }
.js .m-etape.visible .m-etape-num { background: var(--bordeaux); color: white; border-color: var(--bordeaux); }


/* ---------- Téléphone et tablette ---------- */
@media (max-width: 900px) {
  .m-hero { grid-template-columns: 1fr; min-height: 0; }
  .m-hero-mots { padding: 124px 20px 40px; }
  .m-hero-photo { height: 72vh; }
  .m-qui-in { grid-template-columns: 1fr; }
  .m-tete { padding-top: 124px; }
  .m-tete-photo img { aspect-ratio: 4 / 3; }
  .m-etape { padding-left: 76px; }
  .m-etape-num { width: 48px; height: 48px; font-size: 1.2rem; }
  .m-etape::before { left: 23px; top: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .m-hero-photo img { animation: none; }
  .js .m-tete-photo img, .js .m-tete-photo .m-profondeur { clip-path: none; transition: none; }
  .js .m-etape, .js .m-etape::before { opacity: 1; transform: none; transition: none; }
  .js .m-etape .m-etape-num { background: var(--bordeaux); color: white; }
}

@media print {
  .m-hero-photo, .m-tete-photo { display: none !important; }
  .js .m-etape, .js .m-etape::before { opacity: 1 !important; transform: none !important; }
}

/* ---------- Pages intérieures ---------- */
/* La première section passe sous la barre flottante : on lui laisse la place */
.page-int main > section:first-child { padding-top: 150px !important; }
@media (max-width: 900px) { .page-int main > section:first-child { padding-top: 120px !important; } }

/* Phrase d'accueil, quelle que soit la section qui la porte */
.m-accueil-phrase {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  line-height: 1.45 !important;
  color: var(--texte) !important;
  max-width: 30em !important;
  margin: 0 0 clamp(2rem, 4vw, 3rem) !important;
}
#depistage .m-accueil-phrase { color: #fff !important; margin-left: auto !important; margin-right: auto !important; }
section .m-tete-photo { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }

/* Sept entrées de menu : entre 1180 et 1300 px, on resserre pour que le bouton Menu reste dans la barre */
@media (min-width: 1180px) and (max-width: 1300px) {
  nav .nav-links { gap: 10px !important; margin: 0 10px !important; }
}

.credit-photo { font-size: 0.75rem; color: var(--gris); margin: -36px auto 48px; max-width: 800px; text-align: right; }
.m-faits .m-fait { display: block; font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--texte); margin: 0; }

/* Neuf entrées de menu (Contact compris) : entre 1180 et 1300 px, libellés
   et bouton un peu plus petits pour que tout tienne dans la barre, aussi
   en anglais (« Book appointment » est plus long). */
@media (min-width: 1180px) and (max-width: 1300px) {
  nav .nav-links li a { font-size: 0.86rem !important; }
  nav .nav-links { gap: 8px !important; margin: 0 8px !important; }
  nav .nav-rdv-top { padding: 9px 12px !important; letter-spacing: 0.1em !important; }
}

  /* Dépistage : la consultation dédiée, mise en évidence (10 octobre 2026) */
  .dep-consult {
    max-width: 760px;
    margin: 0 auto 56px;
    padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 48px);
    background: rgba(255, 255, 255, 0.97);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(30, 10, 20, 0.25);
  }
  .dep-consult h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    color: var(--bordeaux);
    margin: 0 0 12px;
  }
  #depistage .dep-consult p {
    color: var(--texte);
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 34em;
    margin: 0 auto 26px;
  }
  .dep-consult .hero-btn { animation: none; opacity: 1; margin: 0; }
  @media print {
    .dep-consult { box-shadow: none !important; border: 0.25mm solid #E7DED4 !important; }
    .dep-consult .hero-btn { display: none !important; }
  }

  /* ============================================================
     Accueil : le héron en ouverture — 11 octobre 2026
     L'image occupe toute la largeur ; le titre, le texte et les boutons
     sont posés dans le ciel, à gauche, sur un léger voile crème.
     Sur téléphone : le texte en haut sur fond crème, le héron dessous.
     ============================================================ */
  .m-hero--fond { position: relative; display: block; min-height: 100dvh; background: #EFD9D6; overflow: hidden; }
  .m-hero--fond .m-hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .m-hero--fond .m-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
  .js .m-hero--fond .m-hero-photo img { animation: none; }
  .m-hero--fond::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(251,248,244,0.82) 0%, rgba(251,248,244,0.6) 32%, rgba(251,248,244,0) 58%); }
  .m-hero--fond .m-hero-mots { position: relative; z-index: 2; min-height: 100dvh; display: flex; flex-direction: column;
    justify-content: center; padding: 120px clamp(24px, 6vw, 110px) 80px; max-width: 46rem; }
  @media (max-width: 767px) {
    .m-hero--fond { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, #F8F4EF, #F3EDE6); }
    .m-hero--fond::after { display: none; }
    .m-hero--fond .m-hero-mots { min-height: 0; padding: 116px 20px 36px; }
    .m-hero--fond .m-hero-photo { position: relative; inset: auto; height: 62vh; order: 2; }
    .m-hero--fond .m-hero-photo img { object-position: 50% 55%; }
  }

  /* La brume se lève une seule fois à l'arrivée (2 s environ), puis tout
     reste immobile. Une seule fois par visite (marqueur brume-vue, posé
     dans le <head> de l'accueil) ; jamais si « réduire les animations ». */
  .m-brume { position: absolute; inset: -10%; pointer-events: none; z-index: 1; }
  .m-brume span { position: absolute; inset: 0; opacity: 0; }
  .m-brume span:first-child {
    background: radial-gradient(60% 45% at 55% 55%, rgba(251,248,244,0.95), rgba(251,248,244,0.75) 55%, rgba(251,248,244,0.55) 100%);
    filter: blur(18px); }
  .m-brume span:last-child {
    background: radial-gradient(40% 25% at 30% 60%, rgba(255,255,255,0.8), transparent 70%),
                radial-gradient(45% 22% at 75% 52%, rgba(255,255,255,0.75), transparent 70%);
    filter: blur(24px); }
  .js .m-brume span:first-child { animation: m-brume-leve 2000ms cubic-bezier(0.4, 0, 0.2, 1) 150ms both; }
  .js .m-brume span:last-child { animation: m-brume-glisse 2600ms cubic-bezier(0.4, 0, 0.2, 1) 150ms both; }
  @keyframes m-brume-leve { 0% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes m-brume-glisse { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(6%); } }
  .brume-vue .m-brume { display: none; }
  @media (prefers-reduced-motion: reduce) { .m-brume { display: none; } }
  @media print { .m-brume { display: none !important; } }

  /* Accueil : petit portrait rond, point de contact humain de la présentation */
  .m-qui-portrait { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 50%; /* portrait-medaillon.jpg : recadré centré sur le visage */
    display: block; margin-bottom: 22px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--rose-light); }
  @media print { .m-qui-portrait { display: none !important; } }

  /* ============================================================
     Profondeur légère — 11 octobre 2026
     Sur trois grandes photos (héron, mer du parcours, clinique), l'image
     défile un peu moins vite que la page. Ordinateur seulement (souris,
     ≥ 768 px) ; jamais sur téléphone ni si « réduire les animations ».
     L'image est agrandie juste assez pour que son bord ne se voie jamais.
     ============================================================ */
  .m-profondeur { display: block; overflow: hidden; border-radius: 20px; }
  @media (hover: hover) and (pointer: fine) and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .js [data-profondeur] { transform: translate3d(0, var(--profondeur, 0px), 0) scale(1.15); will-change: transform; }
  }
  @media print { [data-profondeur] { transform: none !important; } }

  /* Contact : adresse postale sous l'adresse du cabinet, et itinéraire en deux
     photos (le chemin, puis la porte) — 11 octobre 2026. Deux photos sur cette
     page par exception : elles servent à trouver le cabinet. */
  address p.adr-postale { font-size: 0.8rem; color: #685C62; margin-top: 8px; line-height: 1.6; }
  /* Plan d'accès (page Contact) : emprises OpenStreetMap, généré par outils/plan-acces/generer.py */
  .acces-plan { margin: 0 0 22px; max-width: 580px; }
  .acces-plan .pl-svg { display: block; width: 100%; height: auto; border-radius: 12px; background: #FBF6F4;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .acces-plan .pl-nom { paint-order: stroke; stroke: #FBF6F4; stroke-width: 5px; stroke-linejoin: round; }
  .acces-plan figcaption { font-size: 0.78rem; color: #3F3238; line-height: 1.5; margin-top: 8px; }
  .acces-plan figcaption a { color: inherit; }
  @media (max-width: 600px) { .acces-plan { margin-left: -32px; margin-right: -32px; } .acces-plan .pl-svg { border-radius: 0; } .acces-plan figcaption { margin-left: 32px; margin-right: 32px; } }
  .acces-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; }
  .acces-photos figure { margin: 0; }
  .acces-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
  .acces-photos figcaption { font-size: 0.78rem; color: #3F3238; line-height: 1.5; margin-top: 8px; }
  @media print { .acces-photos { display: none !important; } }

  /* Dépistage sur fond clair (11 octobre 2026) : la page reprend le lin
     des autres pages ; seule la consultation dédiée garde le prune profond. */
  #depistage { background: var(--rose-pale); color: var(--texte); }
  #depistage .section-tag { color: var(--bordeaux); }
  #depistage .section-title { color: var(--texte); }
  #depistage .section-title em { color: var(--bordeaux); }
  #depistage .divider { background: var(--bordeaux); opacity: 0.35; }
  #depistage p { color: #3F3238; }
  #depistage .m-accueil-phrase { color: var(--texte) !important; }
  #depistage :focus-visible { outline-color: var(--bordeaux); }
  .dep-consult { background: #5A2236; box-shadow: 0 18px 50px rgba(90, 34, 54, 0.22); }
  .dep-consult h2 { color: #fff; }
  #depistage .dep-consult p { color: rgba(255, 255, 255, 0.92); }
  .dep-consult .hero-btn { background: #fff; color: #5A2236; border-color: #fff; }
  #depistage .dep-consult :focus-visible { outline-color: #fff; }
  .depistage-item { background: #fff; border: 0; box-shadow: 0 4px 20px rgba(176, 154, 135, 0.1); text-align: left; }
  .depistage-item h3, .depistage-item h2.t3 { color: var(--bordeaux); font-size: 1.3rem; font-weight: 500; }
  #depistage .depistage-item p { color: #3F3238; font-size: 0.9rem; line-height: 1.75; }
  #depistage .depistage-item p[data-lk="dep-auto-source"] { color: #685C62 !important; }
  #depistage #dep-auto-link { background: var(--bordeaux) !important; color: #fff !important; }

  /* Retour au toucher (11 octobre 2026) : à l'appui, le bouton s'enfonce
     de 3 % en 0,12 s — on sent que le site a « entendu » le clic. */
  .hero-btn:active, .hero-btn-2:active, .nav-cta:active, #hamburger-btn:active, #lang-btn:active,
  .porte:active, .tab-btn:active, #dep-auto-link:active, form button:active, .profil-onglet:active {
    transform: scale(0.97) !important;
    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }

  /* Menu : l'icône ☰ pivote et devient une croix ; les rubriques arrivent
     l'une après l'autre (35 ms d'écart). */
  #hamburger-btn .icone-menu, #hamburger-btn .icone-fermer {
    display: inline !important; transform-box: fill-box; transform-origin: center;
    transition: opacity 200ms ease, transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #hamburger-btn .icone-fermer { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  #hamburger-btn[aria-expanded="true"] .icone-menu { opacity: 0; transform: rotate(90deg) scale(0.6); }
  #hamburger-btn[aria-expanded="true"] .icone-fermer { opacity: 1; transform: none; }
  nav .nav-links.open li { animation: m-menu-li 260ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  nav .nav-links.open li:nth-child(2) { animation-delay: 35ms; }
  nav .nav-links.open li:nth-child(3) { animation-delay: 70ms; }
  nav .nav-links.open li:nth-child(4) { animation-delay: 105ms; }
  nav .nav-links.open li:nth-child(5) { animation-delay: 140ms; }
  nav .nav-links.open li:nth-child(6) { animation-delay: 175ms; }
  nav .nav-links.open li:nth-child(7) { animation-delay: 210ms; }
  nav .nav-links.open li:nth-child(8) { animation-delay: 245ms; }
  nav .nav-links.open li:nth-child(n+9) { animation-delay: 280ms; }
  @keyframes m-menu-li { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

  /* Survol des boutons pleins : prune profond au lieu du rose poudré
     (texte blanc sur rose poudré : contraste 1,9:1, illisible) — 11 octobre 2026. */
  .hero-btn:hover, .form-submit:hover { background: #5A2236; }
  .nav-cta:hover { background: #5A2236 !important; color: #fff !important; }

  /* À propos — la frise « le voyage » (11 octobre 2026) : le chemin est tracé
     en rose pâle ; un point lie-de-vin part de 2006, s'arrête un instant à
     chaque étape, qui apparaît alors (point, date, lieu, fonction), puis repart, en laissant un trait
     lie-de-vin derrière lui ; il se pose sur « Depuis 2016 ». Sur téléphone,
     il descend. Rien si « réduire les animations » ; tout visible à l'impression. */
  .frise-liste::after { content: ''; position: absolute; top: 7px; left: 7px; width: var(--fin-x, 0px); height: 2px; margin-top: -0.5px;
    background: var(--bordeaux); transform: scaleX(var(--ratio, 0)); transform-origin: left center; pointer-events: none;
    transition: transform var(--seg, 0ms) cubic-bezier(0.65, 0, 0.35, 1); }
  .frise-voyageur { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--bordeaux); box-shadow: 0 0 0 5px rgba(122, 46, 69, 0.14); opacity: 0; pointer-events: none; z-index: 2;
    transform: translate(var(--pos-x, 0px), var(--pos-y, 0px));
    transition: opacity 300ms ease, transform var(--seg, 0ms) cubic-bezier(0.65, 0, 0.35, 1); }
  .js .frise.voyage .frise-liste li > span { opacity: 0; transform: translateY(10px);
    transition: opacity 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .js .frise.voyage .frise-liste li > span:nth-child(2) { transition-delay: 80ms; }
  .js .frise.voyage .frise-liste li > span:nth-child(3) { transition-delay: 160ms; }
  .js .frise.voyage .frise-liste li::before { opacity: 0; transform: scale(0.3);
    transition: opacity 300ms ease, transform 450ms cubic-bezier(0.23, 1, 0.32, 1), background-color 400ms ease, border-color 400ms ease, box-shadow 500ms ease; }
  .js .frise.voyage .frise-liste li.atteint::before { opacity: 1; transform: none; }
  .js .frise.voyage .frise-liste li:last-child::before { background: #fff; border-color: var(--rose); }
  .js .frise.voyage.joue .frise-voyageur { opacity: 1; }
  .js .frise.voyage.arrive .frise-voyageur { opacity: 0; transition: opacity 500ms ease; }
  .js .frise.voyage .frise-liste li.atteint > span { opacity: 1; transform: none; }
  .js .frise.voyage .frise-liste li.atteint::before { border-color: var(--bordeaux); background: var(--rose-pale); }
  .js .frise.voyage .frise-liste li:last-child.atteint::before { background: var(--bordeaux); box-shadow: 0 0 0 6px rgba(122, 46, 69, 0.12); }
  @media (max-width: 900px) {
    .frise-liste::after { top: 6px; left: 7px; width: 2px; height: var(--fin-y, 0px); margin: 0 0 0 -0.5px;
      transform: scaleY(var(--ratio, 0)); transform-origin: center top; }
    .frise-voyageur { top: 4px; left: 2px; }
  }
  @media print { .frise-voyageur, .frise-liste::after { display: none !important; } .frise-liste li > span, .frise-liste li::before { opacity: 1 !important; transform: none !important; } }

  /* Frise : les cercles sont posés sur le trait, il ne les traverse plus */
  .frise-liste::after { z-index: 0; }
  .frise-liste li::before { z-index: 1; }

  /* À propos — la carte du parcours (11 octobre 2026), au-dessus de la frise :
     Genève → San Francisco → Paris → Genève. Les arcs se tracent au rythme du
     point de la frise ; survol étape ↔ ville. Dessinée sur place (aucun service
     extérieur). Masquée sur téléphone, où seule la frise reste. */
  .frise-carte { margin: 0 0 28px; }
  .frise-carte svg { display: block; width: 100%; height: auto; overflow: visible;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-composite: intersect; }
  .frise-carte { max-width: 620px; margin: 0 auto 26px; }
  .carte-terre { fill: #EFE6DF; }
  .carte-arc { fill: none; stroke: var(--bordeaux); stroke-width: 3; stroke-linecap: round; opacity: 0.9; }
  .carte-ville circle { fill: #fff; stroke: var(--rose); stroke-width: 2; transition: fill 400ms ease, stroke 400ms ease, r 400ms ease; }
  .carte-ville text { font-family: 'Jost', sans-serif; font-size: 22px; letter-spacing: 0.01em ; text-transform: none; fill: #685C62; transition: fill 400ms ease; }
  .carte-ville.allumee circle { fill: var(--bordeaux); stroke: var(--bordeaux); }
  .carte-ville.allumee text { fill: var(--bordeaux); }
  .carte-ville.survol circle { r: 10; }
  .frise-liste li.survol .frise-date { color: var(--texte); }
  .frise-liste li { cursor: default; }
  .carte-ville { cursor: default; }
  @media (max-width: 900px) { .frise-carte { display: none; } }
  @media print { .carte-arc { stroke-dashoffset: 0 !important; } .frise-carte { display: none !important; } }

  /* À propos — mise en page resserrée (11 octobre 2026) :
     ordinateur : la biographie remonte juste sous le credo, le portrait occupe
     la hauteur des deux, les qualifications passent sous le portrait ;
     téléphone : le nom et le credo d'abord, la photo ensuite ;
     credo sans retour à la ligne forcé sur téléphone ;
     précisions des qualifications plus lisibles. */
  @media (min-width: 1081px) {
    #apropos { align-items: start; row-gap: 28px; }
    #apropos .apropos-text { grid-row: 1; align-self: end; }
    #apropos .apropos-text .divider { margin-bottom: 0; }
    #apropos .apropos-portrait { grid-row: 1 / span 2; align-self: start; }
    #apropos .apropos-bio { grid-row: 2 / span 2; }
    #apropos .apropos-credentials { grid-column: 2; grid-row: 3; }
    #apropos .frise { grid-row: 4; }
  }
  @media (max-width: 1080px) {
    #apropos .apropos-portrait { order: 0; }
  }
  @media (max-width: 600px) {
    #apropos blockquote br { display: none; }
  }
  .credential-card .value em { font-family: 'Jost', sans-serif; font-style: normal; font-size: 0.8rem !important; color: #685C62 !important; letter-spacing: 0.01em; }

  /* Typographie — plus de contraste (11 octobre 2026) :
     titres de page nettement plus grands, texte courant un peu plus grand,
     sur-titres de haut de page retirés du HTML (ils répétaient le menu et le titre). */
  main h1.section-title, .m-tete h1.section-title {
    font-size: clamp(2.4rem, 5vw, 4.4rem) !important; line-height: 1.06; letter-spacing: -0.012em; margin-bottom: 28px; }
  main h2.section-title { font-size: clamp(1.9rem, 3.4vw, 3rem) !important; line-height: 1.12; letter-spacing: -0.008em; }
  .m-accueil-phrase { font-size: clamp(1.45rem, 2.4vw, 1.9rem) !important; }
  .spec-text, .interv-contenu p, .interv-note, .info-card p, .info-card li,
  #centre .reveal div[style*="grid-template-columns"] p, .parcours-step p, .avis-carte p, .faq-answer p, .detail-text,
  #apropos .apropos-bio p, .depistage-item p, .m-etape p { font-size: 1.02rem !important; line-height: 1.8 !important; }
  main section > p:not([class]), main .reveal > p:not([class]), main p[style*="font-size:0.95rem"], main p[style*="font-size:0.92rem"], main p[style*="font-size:0.9rem"], main p[style*="font-size:0.88rem"] { font-size: 1.04rem !important; }
  #centre div[style*="border-radius:16px"] p[style*="font-size:0.8rem"] { font-size: 0.92rem !important; }
  .spec-title, .info-card h3, .avis-carte h3, .depistage-item h3, .m-etape h3, .info-card h2.t3, .avis-carte h2.t3, .depistage-item h2.t3, .m-etape h2.t3 { font-size: 1.45rem !important; }
  /* Le centre : le titre passait sous la barre de menu (marge haute 100 px) */
  /* (sélecteur renforcé : un style mobile dans l'en-tête des pages imposait 60 px) */
  main section#centre { padding-top: 150px !important; }
  @media (max-width: 900px) { main section#centre { padding-top: 130px !important; } }

  /* Apparitions : décalage entre voisins porté par une classe (voir script.js) */
  .rv-d1 { transition-delay: 80ms !important; } .rv-d2 { transition-delay: 160ms !important; } .rv-d3 { transition-delay: 240ms !important; }
  .rv-d4 { transition-delay: 320ms !important; } .rv-d5 { transition-delay: 400ms !important; }

  /* ============================================================
     Mise en page éditoriale — 11 octobre 2026
     Deuxième avis et Le centre quittent le gabarit « titre + rangée de
     cartes » : lignes éditoriales, grande photo, titres en Cormorant.
     ============================================================ */
  /* --- Deuxième avis : les trois temps deviennent des lignes numérotées --- */
  #avis > .reveal { max-width: 1120px !important; counter-reset: temps; }
  #avis .avis-grid { display: block !important; margin: 8px 0 48px !important; }
  #avis .avis-carte { counter-increment: temps; display: grid; grid-template-columns: minmax(240px, 0.9fr) 2fr; gap: 24px 56px;
    align-items: start; background: none !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 40px 0 !important; border-top: 1px solid rgba(122, 46, 69, 0.18); }
  #avis .avis-carte:last-child { border-bottom: 1px solid rgba(122, 46, 69, 0.18); }
  #avis .avis-carte h3, #avis .avis-carte h2.t3 { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(1.7rem, 2.4vw, 2.2rem) !important;
    letter-spacing: -0.005em !important; text-transform: none !important; font-weight: 400 !important; color: var(--texte) !important;
    line-height: 1.15; margin: 0 !important; }
  #avis .avis-carte h3::before, #avis .avis-carte h2.t3::before { content: counter(temps, decimal-leading-zero); display: block; font-family: 'Jost', sans-serif;
    font-size: 0.78rem; letter-spacing: 0.2em; color: var(--bordeaux); margin-bottom: 10px; }
  #avis .avis-carte p { font-size: 1.04rem !important; line-height: 1.85 !important; max-width: 36em; }
  #avis .bande-consultation { margin: 0 0 56px !important; }
  @media (max-width: 767px) {
    #avis .avis-carte { grid-template-columns: 1fr; gap: 12px; padding: 30px 0 !important; }
  }

  /* --- Le centre : titre et texte côte à côte, grande photo, trois repères sans cartes --- */
  #centre > .reveal { max-width: 1180px !important; display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 72px; align-items: start; }
  #centre > .reveal > h1 { grid-column: 1; grid-row: 1; }
  #centre > .reveal > .divider { grid-column: 1; grid-row: 2; }
  #centre > .reveal > p[data-lk="centre-intro"] { grid-column: 2; grid-row: 1 / span 2; margin: 8px 0 0 !important; max-width: none !important; }
  #centre .centre-photo { grid-column: 1 / -1; grid-row: 3; max-width: none !important; margin: 64px 0 10px !important; border-radius: 20px !important; }
  #centre > .reveal > .credit-photo { grid-column: 1 / -1; grid-row: 4; }
  #centre .centre-reperes { grid-column: 1 / -1; grid-row: 5; gap: 48px !important; margin-top: 56px; }
  #centre .centre-repere { background: none !important; box-shadow: none !important; border-radius: 0 !important;
    padding: 26px 0 0 !important; border-top: 1px solid rgba(122, 46, 69, 0.25); }
  #centre .centre-repere h4, #centre .centre-repere h2.t4 { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(1.5rem, 2vw, 1.8rem) !important;
    text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; color: var(--texte) !important; margin-bottom: 10px !important; line-height: 1.2; }
  #centre .centre-repere p { font-size: 1rem !important; color: #3F3238 !important; }
  @media (max-width: 900px) {
    #centre > .reveal { display: block; }
    #centre > .reveal > p[data-lk="centre-intro"] { margin: 0 0 8px !important; }
    #centre .centre-photo { margin: 36px 0 10px !important; }
    #centre .centre-reperes { grid-template-columns: 1fr !important; gap: 28px !important; margin-top: 36px; }
  }

  /* ============================================================
     Accueil — 11 octobre 2026 : invitation à descendre, trois grandes entrées,
     fin dans la lumière d'aube (le credo reste sur À propos, à sa demande)
     ============================================================ */
  /* 1. Invitation à descendre, au bas de l'ouverture : un trait qui respire trois fois puis se tait */
  .m-descendre { position: absolute; left: 50%; bottom: 28px; z-index: 3; width: 44px; height: 56px; margin-left: -22px; display: block; }
  .m-descendre span { position: absolute; left: 50%; top: 6px; width: 1px; height: 40px; background: var(--bordeaux); opacity: 0.55; transform-origin: top; }
  .js .m-descendre span { animation: m-respire 2400ms cubic-bezier(0.45, 0, 0.55, 1) 2400ms 3 both; }
  @keyframes m-respire { 0% { transform: scaleY(0.25); opacity: 0.2; } 50% { transform: scaleY(1); opacity: 0.6; } 100% { transform: scaleY(0.25); opacity: 0.2; } }
  @media (max-width: 767px) { .m-descendre { display: none; } }

  /* 3. Par où commencer : trois grandes entrées */
  #portes { padding: clamp(4rem, 9vw, 7rem) clamp(20px, 6vw, 80px) !important; }
  #portes .portes-titre { max-width: 1180px; margin: 0 auto 28px; }
  #portes .portes-grid { display: block !important; max-width: 1180px; margin: 0 auto; }
  #portes .porte { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 250px; align-items: baseline; column-gap: 40px; row-gap: 8px;
    background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
    border-top: 1px solid rgba(122, 46, 69, 0.2) !important; padding: 34px 18px !important; margin: 0 !important;
    transition: background-color 400ms ease !important; }
  #portes .porte:last-child { border-bottom: 1px solid rgba(122, 46, 69, 0.2) !important; }
  #portes .porte-q { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.7rem, 2.7vw, 2.4rem) !important; line-height: 1.15; color: var(--texte) !important; margin: 0 !important; }
  #portes .porte-a { font-size: 1.02rem !important; line-height: 1.7; color: #3F3238 !important; margin: 0 !important; }
  #portes .porte-go { justify-self: end; white-space: nowrap; margin: 0 !important; }
  #portes .porte-go::after { display: inline-block; transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
  @media (hover: hover) and (pointer: fine) {
    #portes .porte:hover { background-color: rgba(243, 237, 230, 0.75) !important; transform: none !important; }
    #portes .porte:hover .porte-go::after { transform: translateX(6px); }
  }
  @media (max-width: 900px) {
    #portes .porte { grid-template-columns: 1fr; gap: 8px; padding: 28px 4px !important; }
    #portes .porte-go { justify-self: start; margin-top: 6px !important; }
  }

  /* 5. La fin dans la lumière d'aube du héron */
  .page-accueil .m-appel { background: linear-gradient(180deg, #FBF5F2 0%, #F3E1DC 55%, #EFD6CF 100%); }

  /* ============================================================
     Chirurgie du sein — mise en page éditoriale (11 octobre 2026)
     En-tête en deux colonnes ; les sept domaines en lignes (titre à
     gauche, texte à droite) ; les interventions en liste dépliable
     sans boîtes. Sélecteurs par classes uniquement (le script des
     accordéons réécrit les styles en ligne).
     ============================================================ */
  #specialites .specialites-intro { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 72px; align-items: start; max-width: 1180px; margin: 0 auto; }
  #specialites .specialites-intro h1 { grid-column: 1; grid-row: 1; }
  #specialites .specialites-intro .divider { grid-column: 1; grid-row: 2; }
  #specialites .specialites-intro p[data-lk="spec-intro"] { grid-column: 2; grid-row: 1 / span 2; margin-top: 10px;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.35rem, 2vw, 1.7rem) !important; line-height: 1.5 !important; color: var(--texte); max-width: 26em; }
  #specialites .specialites-grid { display: block !important; max-width: 1180px; margin: clamp(48px, 6vw, 80px) auto 0; }
  #specialites .specialite-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); column-gap: 56px; row-gap: 6px;
    background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; transform: none !important;
    border-top: 1px solid rgba(122, 46, 69, 0.18) !important; padding: 34px 0 !important; }
  #specialites .specialite-card:last-child { border-bottom: 1px solid rgba(122, 46, 69, 0.18) !important; }
  #specialites .specialite-card .spec-title { grid-column: 1; grid-row: 1 / span 2; font-size: clamp(1.55rem, 2.2vw, 2rem) !important; line-height: 1.15; color: var(--texte) !important; margin: 0; }
  #specialites .specialite-card .spec-text { grid-column: 2; margin: 0; color: #3F3238 !important; max-width: 38em; }
  #specialites .specialite-card .carte-lien { grid-column: 2; justify-self: start; margin-top: 10px; color: var(--bordeaux) !important; border-color: rgba(122, 46, 69, 0.4) !important; }
  #specialites .specialite-card:hover { background: none !important; box-shadow: none !important; }
  #specialites .specialite-card:hover .spec-title, #specialites .specialite-card:hover .spec-text { color: inherit; }
  #specialites .specialite-card:hover .spec-title { color: var(--texte) !important; }

  #specialites .interventions { max-width: 1180px; margin: clamp(64px, 8vw, 110px) auto 0; }
  #specialites .interventions > .section-tag { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3.2vw, 2.8rem); letter-spacing: -0.005em;
    text-transform: none; color: var(--texte); margin-bottom: 8px; }
  #specialites .interv-liste { gap: 0 !important; margin-top: 24px; }
  #specialites .interv-liste .faq-item { background: none !important; border: 0 !important; border-radius: 0 !important;
    border-top: 1px solid rgba(122, 46, 69, 0.18) !important; }
  #specialites .interv-liste .faq-item:last-child { border-bottom: 1px solid rgba(122, 46, 69, 0.18) !important; }
  #specialites .interv-liste .faq-item > div:first-child { background: none !important; padding: 24px 4px !important; }
  #specialites .interv-liste .faq-item h3, #specialites .interv-liste .faq-item h2.t3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem) !important; }
  #specialites .interv-liste .faq-icon { color: var(--bordeaux) !important; font-weight: 300; }
  #specialites .interv-contenu { padding: 0 4px 28px !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
  @media (hover: hover) and (pointer: fine) {
    #specialites .interv-liste .faq-item:hover > div:first-child h3, #specialites .interv-liste .faq-item:hover > div:first-child h2.t3 { color: var(--bordeaux) !important; }
  }
  @media (max-width: 900px) {
    #specialites .specialites-intro { display: block; }
    #specialites .specialites-intro p[data-lk="spec-intro"] { margin-top: 0; }
    #specialites .specialite-card { grid-template-columns: 1fr; padding: 28px 0 !important; }
    #specialites .specialite-card .spec-title, #specialites .specialite-card .spec-text, #specialites .specialite-card .carte-lien { grid-column: 1; grid-row: auto; }
    #specialites .interv-contenu { grid-template-columns: 1fr; }
  }
  /* Compromis : chaque domaine en ligne, sur un fond blanc doux arrondi */
  #specialites .specialites-grid { display: flex !important; flex-direction: column; gap: 14px; }
  #specialites .specialite-card { background: #fff !important; border: 0 !important; border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(176, 154, 135, 0.10) !important; padding: 30px 36px !important; }
  #specialites .specialite-card:last-child { border-bottom: 0 !important; }
  @media (max-width: 900px) { #specialites .specialite-card { padding: 24px 22px !important; } }

  /* Navigation (11 octobre 2026, revue le 15 novembre 2026) : sur ordinateur,
     sept entrées visibles, dont Pathologies (destination de « Un symptôme
     m'inquiète ») ; Dépistage et FAQ passent dans le bouton Menu, qui affiche
     « Menu » en toutes lettres à toutes les largeurs. La page en cours reste
     toujours visible, même si c'est Dépistage ou FAQ. */
  @media (min-width: 1180px) {
    nav .nav-links:not(.open) li:has(> a[href^="depistage.html"]:not([aria-current])),
    nav .nav-links:not(.open) li:has(> a[href^="questions-frequentes.html"]:not([aria-current])) { display: none !important; }
    nav .nav-links:not(.open) { gap: 34px !important; }
    nav .nav-links:not(.open) li a { font-size: 1.04rem !important; }
    #hamburger-btn .hamburger-label { display: inline-block !important; line-height: 1; margin-top: 1px; }
    nav .nav-right #hamburger-btn { display: inline-flex !important; align-items: center !important; gap: 8px; }
  }
  @media (min-width: 1180px) and (max-width: 1400px) {
    nav .nav-links:not(.open) { gap: 18px !important; margin: 0 12px !important; }
    nav .nav-links:not(.open) li a { font-size: 0.98rem !important; }
    /* « Menu » reste écrit à toutes les largeurs (audit 15.11.2026) */
  }

  /* Bande « Prendre rendez-vous » allégée sur les pages d'information
     (11 octobre 2026) : une seule ligne, titre et horaires à gauche,
     téléphone et bouton à droite. La grande version reste sur l'accueil,
     Parcours et Deuxième avis. */
  :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-appel {
    background: #FBF8F4; padding: 44px clamp(20px, 6vw, 80px); text-align: left; border-top: 1px solid rgba(122, 46, 69, 0.14); }
  :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-appel-in {
    max-width: 1180px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 40px; row-gap: 4px; }
  :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-appel .section-title {
    grid-column: 1; grid-row: 1; font-size: clamp(1.6rem, 2.2vw, 2rem) !important; margin: 0 !important; }
  :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-appel p[data-lk="appel-p"] {
    grid-column: 1; grid-row: 2; font-size: 0.95rem !important; color: #685C62; margin: 0; }
  :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-tel {
    grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; }
  :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-tel a { font-size: 1.35rem !important; }
  :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-appel .hero-btn {
    grid-column: 3; grid-row: 1 / span 2; }
  @media (max-width: 767px) {
    :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-appel-in { grid-template-columns: 1fr; row-gap: 10px; }
    :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) :is(.m-appel .section-title, .m-appel p[data-lk="appel-p"], .m-tel, .m-appel .hero-btn) { grid-column: 1; grid-row: auto; }
    :is(body[data-page="apropos"], body[data-page="chirurgie"], body[data-page="pathologies"], body[data-page="centre"], body[data-page="depistage"], body[data-page="questions"]) .m-appel .hero-btn { justify-self: start; margin-top: 6px; }
  }
  /* La grande bande prend toujours la lumière d'aube de l'accueil : elle se
     détache de n'importe quel fond de page (lin, crème ou blanc). */
  :is(body[data-page="parcours"], body[data-page="avis"]) .m-appel { background: linear-gradient(180deg, #FBF5F2 0%, #F3E1DC 55%, #EFD6CF 100%); }

  /* ============================================================
     Dépistage et FAQ dans le style des autres pages (11 octobre 2026)
     ============================================================ */
  /* --- Dépistage : en-tête en deux colonnes, consultation en bandeau, trois lignes sur fond blanc doux --- */
  #depistage { text-align: left !important; display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 72px; align-content: start; padding-left: max(clamp(20px, 6vw, 80px), calc((100% - 1180px) / 2)) !important;
    padding-right: max(clamp(20px, 6vw, 80px), calc((100% - 1180px) / 2)) !important; }
  #depistage > h1 { grid-column: 1; grid-row: 1; }
  #depistage > .divider { grid-column: 1; grid-row: 2; margin: 0 0 28px !important; }
  #depistage > .m-accueil-phrase { grid-column: 1; grid-row: 3; margin: 0 !important; text-align: left; }
  #depistage > p[data-lk="dep-intro"] { grid-column: 2; grid-row: 1 / span 3; margin: 10px 0 0 !important; max-width: none !important; text-align: left; }
  #depistage > .dep-consult { grid-column: 1 / -1; grid-row: 4; max-width: none !important; margin: 56px 0 40px !important; text-align: left;
    display: grid; grid-template-columns: 1fr auto; column-gap: 48px; align-items: center; padding: 36px 44px !important; }
  #depistage .dep-consult h2 { grid-column: 1; margin: 0 0 8px; }
  #depistage .dep-consult p { grid-column: 1; margin: 0 !important; max-width: 40em; }
  #depistage .dep-consult .hero-btn { grid-column: 2; grid-row: 1 / span 2; }
  #depistage > .depistage-grid { grid-column: 1 / -1; grid-row: 5; display: flex !important; flex-direction: column; gap: 14px; max-width: none !important; margin: 0 !important; }
  #depistage .depistage-item { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); column-gap: 56px; row-gap: 6px; align-items: start;
    background: #fff !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 4px 20px rgba(176, 154, 135, 0.10) !important; padding: 30px 36px !important; }
  #depistage .depistage-item h3, #depistage .depistage-item h2.t3 { grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; font-size: clamp(1.55rem, 2.2vw, 2rem) !important; color: var(--texte) !important; }
  #depistage .depistage-item > p, #depistage .depistage-item > a { grid-column: 2; }
  #depistage .depistage-item > a { justify-self: start; }
  #depistage .depistage-item { min-height: 0 !important; height: auto !important; align-self: start; }
  #depistage .depistage-item > p { text-align: left !important; margin: 0 !important; }
  #depistage .depistage-item > p[data-lk="dep-auto-source"] { margin-top: 10px !important; }
  @media (max-width: 900px) {
    #depistage { display: block !important; }
    #depistage > .dep-consult { display: block; padding: 28px 24px !important; }
    #depistage .dep-consult .hero-btn { margin-top: 18px !important; }
    #depistage .depistage-item { grid-template-columns: 1fr; padding: 24px 22px !important; }
    #depistage .depistage-item h3, #depistage .depistage-item > p, #depistage .depistage-item > a, #depistage .depistage-item h2.t3 { grid-column: 1; grid-row: auto; }
  }

  /* --- FAQ : les questions en liste à traits fins, comme les interventions --- */
  #faq .faq-item { background: none !important; border: 0 !important; border-radius: 0 !important; border-top: 1px solid rgba(122, 46, 69, 0.18) !important; }
  #faq .faq-item:has(+ .faq-groupe), #faq .faq-item:last-child { border-bottom: 1px solid rgba(122, 46, 69, 0.18) !important; }
  #faq div:has(> .faq-item) { gap: 0 !important; }
  #faq .faq-groupe { margin: 44px 0 10px !important; }
  #faq .faq-groupe:first-child { margin-top: 8px !important; }
  #faq .faq-item > div:first-child { background: none !important; padding: 22px 4px !important; }
  #faq .faq-item h3, #faq .faq-item h2.t3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem) !important; }
  #faq .faq-icon { color: var(--bordeaux) !important; }
  #faq .faq-answer p { padding: 0 4px 26px !important; font-size: 1.02rem !important; max-width: 46em; }
  @media (hover: hover) and (pointer: fine) { #faq .faq-item:hover > div:first-child h3, #faq .faq-item:hover > div:first-child h2.t3 { color: var(--bordeaux) !important; } }

  /* Patientes internationales (version anglaise de l'accueil) — 12 octobre 2026 :
     déplacé sous « Par où commencer », en bande calme au lieu de l'encadré
     prune posé sur le héron. */
  body section#clinical-banner.m-international { display: block; max-width: none; margin: 0; border-radius: 0;
    background: #fff; padding: clamp(3rem, 6vw, 4.5rem) clamp(20px, 6vw, 80px) 0 !important; color: var(--texte); }
  .m-international-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; column-gap: 32px; align-items: center;
    border-top: 1px solid rgba(122, 46, 69, 0.18); border-bottom: 1px solid rgba(122, 46, 69, 0.18); padding: 34px 0; }
  .m-international .banniere-icone { color: var(--bordeaux); }
  .m-international h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--texte); margin: 0 0 6px; }
  .m-international h2 em { color: var(--bordeaux); }
  .m-international p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: #3F3238; max-width: 40em; }
  .m-international .hero-btn-2 { animation: none; opacity: 1; margin: 0; white-space: nowrap; }
  @media (max-width: 767px) {
    .m-international-in { grid-template-columns: 1fr; row-gap: 14px; }
    .m-international .hero-btn-2 { justify-self: start; }
  }

  /* ============================================================
     Pathologies dans le style des autres pages (12 octobre 2026) :
     en-tête en deux colonnes, onglets en Cormorant au lieu de petites
     capitales, cartes sur fond blanc doux (comme Chirurgie du sein).
     ============================================================ */
  #cancers > .reveal:first-child { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 64px; align-items: start; max-width: 1180px; margin: 0 auto; }
  #cancers > .reveal:first-child > h1 { grid-column: 1; grid-row: 1; }
  #cancers > .reveal:first-child > .divider { grid-column: 1; grid-row: 2; }
  #cancers > .reveal:first-child > .m-accueil-phrase { grid-column: 2; grid-row: 1 / span 2; margin: 12px 0 0 !important; }
  #cancers .cancers-tabs { max-width: 1180px; margin: clamp(40px, 5vw, 64px) auto 28px; gap: 6px 34px; flex-wrap: wrap; border-bottom: 1px solid rgba(122, 46, 69, 0.18); }
  #cancers .tab-btn { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: 0; text-transform: none;
    color: #685C62; padding: 12px 0; border-bottom-width: 2px; }
  #cancers .tab-btn.active { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
  #cancers { background: var(--rose-pale) !important; }
  #cancers .tab-content { max-width: 1180px; margin: 0 auto; }
  #cancers .tab-content.active { gap: 14px; }
  #cancers .info-card { background: #fff; border: 0 !important; border-radius: 16px; box-shadow: 0 4px 20px rgba(176, 154, 135, 0.10); padding: 30px 32px; }
  #cancers .info-card:hover { box-shadow: 0 6px 26px rgba(176, 154, 135, 0.16); }
  #cancers .info-card h3, #cancers .info-card h2.t3 { color: var(--texte) !important; font-weight: 500; margin-bottom: 10px; }
  @media (max-width: 900px) {
    #cancers > .reveal:first-child { display: block; }
    #cancers > .reveal:first-child > .m-accueil-phrase { margin-top: 0 !important; }
  }

  /* Titres des cartes, lignes et questions en lie-de-vin, épaisseur normale (12 octobre 2026, son choix : le noir était trop dur) */
  #specialites .specialite-card .spec-title, #cancers .info-card h3, #depistage .depistage-item h3,
  #avis .avis-carte h3, #centre .centre-repere h4, #portes .porte-q, .interv-liste .faq-item h3, #faq .faq-item h3, #cancers .info-card h2.t3, #depistage .depistage-item h2.t3, #avis .avis-carte h2.t3, #centre .centre-repere h2.t4, .interv-liste .faq-item h2.t3, #faq .faq-item h2.t3 {
    color: var(--bordeaux) !important; font-weight: 400 !important; }

  /* Formulaire : boutons radio dessinés (12 octobre 2026). Sur iPhone, le
     rembourrage des champs texte s'appliquait aussi aux boutons radio, qui
     devenaient de grands cercles posés sur « Oui » / « Non ». */
  .form-group input[type="radio"] {
    -webkit-appearance: none; appearance: none; flex: 0 0 auto;
    width: 20px !important; height: 20px !important; padding: 0 !important; margin: 0;
    border: 1.5px solid var(--rose) !important; border-radius: 50% !important; background: #fff;
    display: inline-grid; place-content: center; cursor: pointer; transition: border-color 0.2s;
  }
  .form-group input[type="radio"]::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--bordeaux);
    transform: scale(0); transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .form-group input[type="radio"]:checked { border-color: var(--bordeaux) !important; }
  .form-group input[type="radio"]:checked::before { transform: scale(1); }
  .form-group input[type="radio"]:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
  .form-group [role="radiogroup"] { gap: 10px 26px !important; }
  .contact-form .form-group label:has(> input[type="radio"]) { font-size: 0.95rem !important; gap: 10px !important; }

  /* Accueil sur téléphone (12 octobre 2026, son choix) : la phrase posée sur le héron, dans le ciel, comme sur ordinateur — avant, le héron arrivait sous la phrase et le lien se perdait. */
  @media (max-width: 767px) {
    .m-hero--fond { display: block; min-height: 100svh; background: #EFD9D6; }
    .m-hero--fond .m-hero-photo { position: absolute; inset: 0; height: auto; order: 0; }
    .m-hero--fond .m-hero-photo img { object-position: 60% 50%; transform: none !important; }
    .m-hero--fond::after { display: block; background: linear-gradient(180deg, rgba(251,248,244,0.92) 0%, rgba(251,248,244,0.78) 34%, rgba(251,248,244,0.25) 56%, rgba(251,248,244,0) 70%); }
    .m-hero--fond .m-hero-mots { min-height: 100svh; justify-content: flex-start; padding: 118px 22px 40px; }
    .m-hero--fond .m-hero-actions { margin-top: auto; }
  }

  /* 13 octobre 2026 : crédits © des photos des Grangettes ; liens Centre ↔ Parcours et vers Hirslanden */
  .credit-avis { max-width: none; margin: -48px 0 48px; text-align: right; }
  #centre .centre-liens { grid-column: 1 / -1; grid-row: 6; display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 48px;
    padding-top: 26px; border-top: 1px solid rgba(122, 46, 69, 0.18); }
  .parcours-lien { max-width: 760px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding-left: 92px; }
  @media (max-width: 900px) { .parcours-lien { padding-left: 76px; } #centre .centre-liens { flex-direction: column; } }

  /* Crédit © posé sur la photo (13 octobre 2026, sa demande) */
  #centre .centre-photo, .bande-consultation { position: relative; }
  .credit-sur-photo { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-size: 0.7rem; line-height: 1; letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); pointer-events: none; }
  @media print { .credit-sur-photo { position: static; color: #685C62; text-shadow: none; } }
  /* Le © reste lisible sur fond clair (mur blanc de la consultation) : petite pastille sombre translucide */
  .credit-sur-photo { background: rgba(43, 34, 38, 0.42); padding: 4px 8px; border-radius: 999px; text-shadow: none; }

/* Pied de page (31.10.2026) : sur téléphone, « Médecins : adresser une patiente »
   passe seul à la ligne, sans point séparateur laissé en bout de ligne. */
@media (max-width: 700px) {
  .sep-medecin { display: none; }
  #link-medecin { display: table; margin: 12px auto 0; }
}


/* Formulaire lisible sur iPhone (31.10.2026, audit) : bords des champs et des
   boutons radio visibles (3:1 au moins, contre 1,26:1 avant), texte indicatif
   plus foncé, et 16 px sur téléphone pour que Safari ne zoome plus à chaque champ. */
.form-group input:not([type="radio"]), .form-group textarea, .form-group select { border-color: #8F8288; }
.form-group input:not([type="radio"]):focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--bordeaux); }
.form-group input[type="radio"] { border-color: #8F8288 !important; }
.form-group input[type="radio"]:checked { border-color: var(--bordeaux) !important; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--gris); opacity: 1; }
@media (max-width: 768px) {
  .form-group input:not([type="radio"]), .form-group textarea, .form-group select { font-size: 16px; }
}

/* Parcours (31.10.2026, audit) : « Pour aller plus loin » sous la frise, pour que
   la page de la femme qui vient d'être diagnostiquée ne finisse pas en impasse. */
.parcours-suite-h { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; color: var(--bordeaux); margin: 0 0 10px; }
.parcours-suite ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(122,46,69,.14); }
.parcours-suite li { border-bottom: 1px solid rgba(122,46,69,.14); padding: 15px 0; }
.parcours-suite .carte-lien { border-bottom: 0; }

/* Accordéons (31.10.2026) : le bouton est dans le titre ; l'anneau de focus reste
   dessiné autour de toute la ligne, comme avant. */
.faq-bouton { cursor: pointer; }
.faq-bouton:focus-visible { outline: none; }
.faq-item > div:first-child:has(.faq-bouton:focus-visible) { outline: 2px solid var(--bordeaux); outline-offset: -3px; border-radius: 16px; }

/* Mention © sur les photos (31.10.2026, audit) : pastille plus foncée et texte un
   peu plus grand — le contraste mesuré était d'environ 3:1 pour 4,5:1 demandé. */
.credit-sur-photo { background: rgba(43, 34, 38, 0.72) !important; font-size: 0.75rem !important; }

/* Téléphone (31.10.2026, audit) : plus aucun texte sous 12,5 px. Le sous-titre du
   bandeau passe de 9,9 à 11 px (place limitée). Ordinateur inchangé. */
@media (max-width: 700px) {
  /* « nav » en tête : plus précis que les règles recopiées dans l'en-tête des pages */
  nav .nav-logo span[data-lk="nav-logo-sub"] { font-size: 11px !important; }
  nav #lang-btn { font-size: 12.5px !important; }
  .section-tag, .porte-go, .carte-lien, .hero-btn, .hero-btn-2, .form-submit, .faq-groupe,
  .contact-detail .label, .frise-lieu, .contact-form .form-group label, [data-lk="cred-l5"],
  [data-lk^="fait"][data-lk$="-l"], [data-lk^="acces-"][data-lk$="-h"], [data-lk="dep-auto-btn"] { font-size: 12.5px !important; }
  footer p, footer a, footer span { font-size: 13px !important; }
  [data-lk="form-required"], [data-lk="form-required2"] { font-size: 13px !important; }
  [data-lk^="form-donnees"], [data-lk^="form-urgence"], [data-lk="form-assur-aide"], [data-lk="form-doc-note"],
  .adr-postale, .adr-postale span, .contact-form-wrapper figcaption, #contact figcaption { font-size: 13.5px !important; }
}

/* Téléphone dans le bandeau, sur téléphone et tablette (31.10.2026) : un geste
   pour appeler depuis n'importe quelle page (le bouton Rendez-vous y est masqué).
   Pour qu'il tienne à côté du nom : boutons de 40 px, 36 px sous 420 px, lettres
   du sous-titre moins espacées ; masqué sous 360 px (la bande du bas garde le numéro). */
.nav-tel { display: none; }
@media (max-width: 980px) {
  nav .nav-right { gap: 6px !important; }
  nav .nav-right .nav-tel { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 40px; height: 40px; border: 1px solid var(--rose); border-radius: 10px; color: var(--bordeaux); }
  nav .nav-right #lang-btn { padding: 6px 8px !important; height: 40px; margin: 0 !important; }
  nav .nav-right #hamburger-btn { width: 40px !important; height: 40px !important; padding: 0 !important; margin-left: 0 !important; justify-content: center !important; }
}
@media (max-width: 440px) {
  nav .nav-logo span[data-lk="nav-logo-sub"] { letter-spacing: 0.06em !important; }
  nav .nav-logo span[data-lk="nav-logo-name"] { letter-spacing: 0.02em !important; }
}
@media (max-width: 420px) {
  nav .nav-right .nav-tel, nav .nav-right #hamburger-btn { width: 36px !important; height: 36px !important; }
  nav .nav-right #lang-btn { height: 36px; }
}
@media (max-width: 380px) {
  nav .nav-logo img { height: 30px !important; }
  nav .nav-logo span[data-lk="nav-logo-name"] { font-size: 0.86rem !important; }
}
@media (max-width: 359px) { nav .nav-right .nav-tel { display: none; } }

/* Parcours sur un seul axe (31.10.2026) : la photo s'aligne sur le titre
   (elle était calée à gauche), moins de vide avant les étapes. */
body[data-page="parcours"] section .m-tete-photo { max-width: 1000px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
body[data-page="parcours"] .m-tete { padding-bottom: clamp(2rem, 4vw, 3rem); }
body[data-page="parcours"] .m-etapes { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Formulaires : erreur calme sous le champ (01.11.2026) */
.champ-erreur { display: flex; gap: 9px; align-items: baseline; margin: 2px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--bordeaux); text-transform: none; letter-spacing: 0; }
.champ-erreur::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bordeaux); transform: translateY(-2px); }
.form-group [aria-invalid="true"]:not([type="radio"]) { border-color: var(--bordeaux) !important; box-shadow: 0 0 0 1px var(--bordeaux); }

/* Pathologies : pastilles sur téléphone et « Rubrique suivante » (01.11.2026).
   Le bord droit s'estompe pour montrer qu'il y a d'autres rubriques. */
.cancers-pastilles { display: none; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 -20px 28px; padding: 4px 20px 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.cancers-pastilles::-webkit-scrollbar { display: none; }
.pastille { flex: none; scroll-snap-align: start; min-height: 44px; padding: 10px 18px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 0.92rem; font-weight: 400; color: #685C62; background: #fff; border: 1px solid rgba(122,46,69,.28);
  transition: background-color 150ms, color 150ms, border-color 150ms; }
.pastille.active { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.pastille:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.rubrique-suivante { grid-column: 1 / -1; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(122,46,69,.14); }
.rubrique-suivante button, .rubrique-suivante a { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: none; }
.rs-etiquette { display: block; font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.06em; color: #685C62; margin-bottom: 4px; }
.rs-titre { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; line-height: 1.25; color: var(--bordeaux); }
.rubrique-suivante button:focus-visible, .rubrique-suivante a:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 4px; border-radius: 6px; }

/* Animation « étape par étape » dans une intervention (01.11.2026) : dessin de base validé, cadré sur un sein */
.anim-etapes { grid-column: 1 / -1; margin: 22px 0 6px; padding: 18px 16px 14px; background: #FBF8F4; border-radius: 16px; cursor: default; }
.ae-intro { max-width: 460px; margin-left: auto !important; margin-right: auto !important; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--bordeaux); margin: 0 0 12px; }
.ae-fig { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; border-radius: 12px; touch-action: pan-y; }
.ae-fig text { font-family: 'Jost', sans-serif; font-size: 7px; fill: #685C62; letter-spacing: .02em; }
.ae-pistes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 460px; margin: 10px auto 0; }
.ae-piste { appearance: none; background: none; border: 0; padding: 10px 0 4px; min-height: 44px; display: grid; gap: 6px; text-align: left; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 0.8rem; color: #685C62; min-width: 0; }
@media (max-width: 520px) { .ae-pistes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; } }
.ae-piste::before { content: ""; height: 3px; border-radius: 2px; background: #EADCE2; transition: background-color 300ms; }
.ae-piste.fait::before, .ae-piste.active::before { background: var(--bordeaux); }
.ae-piste.active { color: var(--texte); }
.ae-piste:focus-visible, .ae-nav button:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; border-radius: 4px; }
.ae-textes { max-width: 460px; margin: 12px auto 0; min-height: 7.5em; }
.ae-titre { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--texte); margin: 0 0 4px !important; }
.ae-texte p:not(.ae-titre) { font-size: 0.95rem; line-height: 1.65; color: #3F3238; margin: 0; }
.ae-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 460px; margin: 10px auto 0; }
.ae-nav button { appearance: none; min-height: 44px; padding: 0 18px; border-radius: 999px; font-family: 'Jost', sans-serif; font-size: 0.85rem; cursor: pointer;
  border: 1px solid rgba(122,46,69,.3); background: #fff; color: var(--texte); white-space: nowrap; }
.ae-nav .ae-suiv { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.ae-nav button:disabled { opacity: .4; cursor: default; }
.ae-compte { font-size: 0.8rem; color: #685C62; white-space: nowrap; }
/* calques du schéma */
@media (prefers-reduced-motion: reduce) { .anim-etapes * { transition-duration: 0ms !important; transition-delay: 0ms !important; } }

/* Ganglion sentinelle (01.11.2026) : dessin de base « bras levé » */
.ae-gs .ae-pistes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px) { .ae-gs .ae-pistes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ae-fig .gs-lymphe, .ae-fig .gs-halo, .ae-fig .gs-sonde, .ae-fig .gs-analyse, .ae-fig .gs-seringue { opacity: 0; transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-fig .gs-injection circle { transition: opacity 600ms; }
.ae-fig .gs-ganglion { transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1), opacity 600ms; opacity: 0; }
.ae-fig .gs-incision { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 800ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms; }
.ae-gs[data-etape="1"] .gs-seringue { opacity: 1; }
.ae-gs:not([data-etape="1"]) .gs-lymphe { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .ae-gs:not([data-etape="1"]) .gs-lymphe { animation: gs-flux 1.6s linear infinite; } }
@keyframes gs-flux { to { stroke-dashoffset: -11; } }
.ae-gs:is([data-etape="3"],[data-etape="4"]) .gs-halo { opacity: 1; }
.ae-gs:not([data-etape="1"]):not([data-etape="2"]) .gs-ganglion { opacity: 1; }
.ae-gs[data-etape="4"] .gs-sonde { opacity: 1; }
.ae-gs[data-etape="5"] .gs-incision { stroke-dashoffset: 0; opacity: 1; }
.ae-gs[data-etape="5"] .gs-analyse { opacity: 1; }
.ae-gs .ae-fig text { font-size: 12.5px; }
.ae-fig .gs-ganglion { transform-box: fill-box; transform-origin: center; }
.ae-gs[data-etape="5"] .gs-ganglion { transform: translate(-102px, 90px) scale(1.8); }
.ae-fig .gs-neutre { transition: opacity 400ms; }
.ae-gs:not([data-etape="1"]):not([data-etape="2"]) .gs-neutre { opacity: 0; }

/* Oncoplastie par réduction (01.11.2026) : thorax entier, pour la symétrie */
.ae-oc .ae-pistes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px) { .ae-oc .ae-pistes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ae-oc .ae-fig text { font-size: 15px; }
.ae-oc .ae-fig > g { transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-oc .oc-g-apres, .ae-oc .oc-d-apres, .ae-oc .oc-cic-g, .ae-oc .oc-cic-d, .ae-oc .oc-analyse { opacity: 0; }
.ae-oc .oc-areole-in, .ae-oc .oc-piece { transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1), opacity 600ms; }
.ae-oc:not([data-etape="1"]) .oc-zone, .ae-oc:not([data-etape="1"]) .oc-dessin { opacity: 0; }
.ae-oc:not([data-etape="1"]) .oc-analyse { opacity: 1; }
.ae-oc:not([data-etape="1"]) .oc-piece { transform: translate(-98px, 34px); }
.ae-oc:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .oc-g-avant { opacity: 0; }
.ae-oc:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .oc-g-apres { opacity: 1; }
.ae-oc:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .oc-areole-in { transform: translate(0px, -28px); }
.ae-oc:is([data-etape="4"],[data-etape="5"]) .oc-cic-g { opacity: 1; }
.ae-oc[data-etape="5"] .oc-d-avant { opacity: 0; }
.ae-oc[data-etape="5"] .oc-d-apres, .ae-oc[data-etape="5"] .oc-cic-d { opacity: 1; }
.ae-oc:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .oc-analyse { opacity: .35; }


/* Mastectomie avec reconstruction immédiate (01.11.2026) : choix aréole conservée / retirée */
.ae-mr .ae-pistes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px) { .ae-mr .ae-pistes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mr-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 460px; margin: 0 auto 12px; font-size: 0.9rem; color: #3F3238; }
.mr-choix span { flex-basis: 100%; }
.mr-choix button { appearance: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(122,46,69,.3); background: #fff; color: var(--texte); font-family: 'Jost', sans-serif; font-size: 0.9rem; cursor: pointer; }
.mr-choix button[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.mr-choix button:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
/* l'aréole du dessin de base disparaît avec la glande quand elle est retirée */


/* Curage axillaire (01.11.2026) : bras levé + ses trois niveaux */
.ae-ca .ae-pistes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px) { .ae-ca .ae-pistes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ae-ca .ae-fig text { font-size: 12.5px; }
.ae-ca .ca-libelles text { fill: #685C62; }
.ae-ca .ae-fig > g, .ae-ca .ae-fig > path { transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-ca .ca-engourdi, .ae-ca .ca-veine, .ae-ca .ca-nerfs, .ae-ca .ca-libelles, .ae-ca .ca-drain, .ae-ca .ca-epaule, .ae-ca .ca-analyse { opacity: 0; }
.ae-ca .ca-pp, .ae-ca .ca-n3, .ae-ca .ca-n12, .ae-ca .ca-etiq { opacity: 0; }
.ae-ca .ca-etiq text { font-size: 10.5px; fill: #3F3238; }
.ae-ca .ca-n12 { transform-box: fill-box; transform-origin: center; transition: opacity 600ms, transform 1000ms cubic-bezier(0.77, 0, 0.175, 1); }
.ae-ca .ca-incision { opacity: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 800ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-ca[data-etape="2"] .ca-pp, .ae-ca[data-etape="2"] .ca-n3, .ae-ca[data-etape="2"] .ca-n12, .ae-ca[data-etape="2"] .ca-etiq, .ae-ca[data-etape="2"] .ca-veine { opacity: 1; }
.ae-ca[data-etape="3"] .ca-n3 { opacity: 1; }
.ae-ca:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .ca-n12 { opacity: 1; transform: translate(-102px, 84px) scale(.5); }
.ae-ca:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .ca-analyse { opacity: 1; }
.ae-ca[data-etape="3"] .ca-veine, .ae-ca[data-etape="3"] .ca-nerfs, .ae-ca[data-etape="3"] .ca-libelles { opacity: 1; }
.ae-ca:is([data-etape="4"],[data-etape="5"]) .ca-analyse, .ae-ca:is([data-etape="4"],[data-etape="5"]) .ca-n12 { opacity: .35; }
.ae-ca[data-etape="4"] .ca-drain { opacity: 1; }
.ae-ca[data-etape="5"] .ca-engourdi, .ae-ca[data-etape="5"] .ca-epaule { opacity: 1; }


/* Reconstruction : prothèse ou tissu autologue (01.11.2026) : dessin de base de profil */
.anim-recon { grid-column: 1 / -1; margin: 22px 0 6px; padding: 18px 16px 14px; background: #FBF8F4; border-radius: 16px; cursor: default; }
.anim-recon .ae-intro { max-width: 460px; margin: 0 auto 12px !important; }
.pr-choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 460px; margin: 0 auto 12px; }
@media (max-width: 520px) { .pr-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-choix button { appearance: none; min-height: 44px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(122,46,69,.3); background: #fff; color: var(--texte); font-family: 'Jost', sans-serif; font-size: 0.88rem; cursor: pointer; }
.pr-choix button[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.pr-choix button:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.pr-figs { max-width: 460px; margin: 0 auto; }
.pr-fig { animation: pr-entree 450ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes pr-entree { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pr-fig { animation: none; } }
.pr-svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: 12px; }
.pr-duo { display: grid; grid-template-columns: 2fr 3fr; gap: 8px; align-items: end; }
.pr-duo .pr-svg { max-width: none; }
.pr-textes { max-width: 460px; margin: 12px auto 0; min-height: 8em; }
.pr-texte p:not(.ae-titre) { font-size: 0.95rem; line-height: 1.65; color: #3F3238; margin: 0; }
.pr-note { max-width: 460px; margin: 10px auto 0 !important; font-size: 0.85rem !important; color: #685C62 !important; }


/* Mastectomie sans reconstruction (01.11.2026) */
.ae-ms .ae-pistes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px) { .ae-ms .ae-pistes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ae-ms + .ae-mr { margin-top: 18px; }


/* frontend-design (01.11.2026) — 5 : plus de petit trait décoratif sous les titres */
.divider { display: none !important; }

/* frontend-design (01.11.2026) — 6 : pied de page lin, filet lie-de-vin (au lieu du presque noir).
   Les couleurs blanches sont écrites en ligne dans chaque page : on les surclasse ici. */
footer { background: var(--rose-pale) !important; border-top: 1px solid rgba(122, 46, 69, 0.28) !important; }
footer, footer p, footer div, footer span { color: #3F3238 !important; }
footer a { color: var(--bordeaux) !important; border-bottom-color: rgba(122, 46, 69, 0.35) !important; }
footer .footer-logo { color: var(--bordeaux) !important; }
footer > img { filter: none !important; opacity: 0.16 !important; }

/* Sous-titre du logo en casse normale (01.11.2026) : 12,5 px minimum, sans interlettrage. */
nav .nav-logo span[data-lk="nav-logo-sub"] { font-size: 12.5px !important; letter-spacing: 0.01em !important; }

/* Boutons pleins en casse normale (01.11.2026) : un peu plus légers, le blanc sur lie-de-vin paraît plus gras. */
.hero-btn, .nav-rdv-top, .nav-cta, .form-submit { font-weight: 350 !important; letter-spacing: 0.02em !important; }

/* frontend-design 7 (01.11.2026) : Pathologies en liste éditoriale, comme les portes de l'accueil.
   Plus de cartes blanches : sur téléphone, le texte gagne 21 % de largeur et les onglets 17 à 36 % de hauteur. */
#cancers .tab-content.active { display: block !important; }
#cancers .info-card { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  border-top: 1px solid rgba(122, 46, 69, 0.2) !important; padding: 28px 4px !important; margin: 0 !important;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); column-gap: 56px; row-gap: 0; align-items: baseline; }
#cancers .info-card > :not(h3):not(h2.t3) + :not(h3):not(h2.t3) { margin-top: 14px; }
#cancers .info-card:hover { box-shadow: none !important; }
#cancers .tab-content > .info-card:last-of-type { border-bottom: 1px solid rgba(122, 46, 69, 0.2) !important; }
#cancers .info-card > h3, #cancers .info-card > h2.t3 { grid-column: 1; grid-row: 1 / span 9; margin: 0 !important; font-size: clamp(1.4rem, 2vw, 1.75rem) !important; line-height: 1.2; }
#cancers .info-card > :not(h3):not(h2.t3) { grid-column: 2; }
#cancers .rubrique-suivante { margin-top: 18px; }
@media (max-width: 900px) {
  #cancers .info-card { grid-template-columns: 1fr; padding: 24px 2px !important; }
  #cancers .info-card > h3, #cancers .info-card > h2.t3 { margin-bottom: 10px !important; }
  #cancers .info-card > h3, #cancers .info-card > h2.t3, #cancers .info-card > :not(h3):not(h2.t3) { grid-column: 1; grid-row: auto; }
}

/* À propos — le globe du parcours (14.11.2026), dessiné par globe.js dans .frise-carte.
   L'ancienne carte SVG reste dans la page pour qui n'a pas JavaScript. */
.frise-carte { display: block !important; width: min(340px, 78vw); max-width: none !important; margin: 0 auto 18px !important; }
.frise-carte canvas.globe { display: block; width: 100%; }
@media (max-width: 900px) {
  /* téléphone : le globe reste accroché sous le bandeau pendant qu'on fait défiler la frise */
  .frise.defile .frise-carte { position: sticky; top: 78px; z-index: 3; width: 100% !important; margin: 0 0 6px !important; padding: 6px 0 14px;
    background: linear-gradient(180deg, var(--fond-frise, #fff) 0, var(--fond-frise, #fff) 84%, rgba(255,255,255,0) 100%); }
  .frise.defile .frise-carte canvas.globe { width: min(190px, 52vw); margin: 0 auto; }
  /* « position: sticky » ne tient pas dans une section qui masque son débordement : on la coupe sans créer de zone de défilement */
  section:has(.frise.defile), body:has(.frise.defile) { overflow-x: clip !important; overflow-y: visible !important; }
  .frise.defile .frise-liste li:last-child:not(.actif)::before { background: #fff; border-color: var(--rose); box-shadow: none; }
  .frise.defile .frise-liste li.actif::before { background: var(--bordeaux); border-color: var(--bordeaux); box-shadow: 0 0 0 6px rgba(122, 46, 69, 0.12); }
  .frise.defile .frise-liste li.actif .frise-date { color: var(--bordeaux); }
}
@media print { .frise-carte { display: none !important; } }

/* Traitement conservateur redessiné (14 novembre 2026) : deux vues pour les mêmes six étapes.
   De face (.ae-face, calques .t-…) : sein au pli affiné, ombre portée, cadrage serré.
   En coupe (.ae-coupe, calques .k-…) : peau, graisse et glande distinctes, sans transparence. */
.ae-vue { display: flex; gap: 6px; max-width: 460px; margin: 0 auto 10px; }
.ae-vue button { appearance: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(122,46,69,.3); background: #fff; color: var(--texte); font-family: 'Jost', sans-serif; font-size: 0.9rem; cursor: pointer; transition: background-color 150ms, color 150ms; }
.ae-vue button[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.ae-vue button:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.ae-fig[hidden] { display: none; }
.ae-fig.ae-coupe { max-width: 380px; }
.anim-etapes .ae-fig.ae-face text { font-size: 14.5px; }
.anim-etapes .ae-fig.ae-coupe text { font-size: 12px; }
.ae-fig.ae-face, .ae-fig.ae-coupe { animation: ae-vue-entree 400ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes ae-vue-entree { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ae-fig.ae-face, .ae-fig.ae-coupe { animation: none; } }
.ae-cv2 .t-rayons, .ae-cv2 .t-loge, .ae-cv2 .t-clips, .ae-cv2 .t-coupelle { opacity: 0; transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-cv2 .t-marge { opacity: 0; transition: opacity 600ms; }
.ae-cv2 .t-piece { transition: transform 1200ms cubic-bezier(0.65, 0, 0.35, 1); }
.ae-cv2 .t-ombre { transition: opacity 600ms; }
.ae-cv2 .t-ext { transition: opacity 300ms; }
.ae-cv2 .t-loge { transform-box: fill-box; transform-origin: center; transition: opacity 500ms, transform 1000ms cubic-bezier(0.65, 0, 0.35, 1); }
.ae-cv2 .t-incision { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 900ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms; }
.ae-cv2 .t-ok { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 600ms 250ms; }
.ae-cv2:not([data-etape="1"]) .t-incision { stroke-dashoffset: 0; opacity: 1; }
.ae-cv2[data-etape="6"] .t-incision { opacity: .4; }
.ae-cv2:is([data-etape="3"],[data-etape="4"],[data-etape="5"],[data-etape="6"]) .t-marge,
.ae-cv2:is([data-etape="3"],[data-etape="4"],[data-etape="5"],[data-etape="6"]) .t-coupelle { opacity: 1; }
.ae-cv2:is([data-etape="3"],[data-etape="4"],[data-etape="5"],[data-etape="6"]) .t-piece { transform: translate(-100px, 92px); }
.ae-cv2:is([data-etape="3"],[data-etape="4"],[data-etape="5"],[data-etape="6"]) .t-ext { opacity: 0; }
.ae-cv2:is([data-etape="3"],[data-etape="4"]) .t-loge { opacity: 1; }
.ae-cv2:is([data-etape="5"],[data-etape="6"]) .t-loge { opacity: .7; transform: scale(.32); }
.ae-cv2:is([data-etape="4"],[data-etape="5"],[data-etape="6"]) .t-ok { stroke-dashoffset: 0; }
.ae-cv2:is([data-etape="5"],[data-etape="6"]) .t-clips { opacity: 1; }
.ae-cv2[data-etape="6"] .t-rayons { opacity: 1; }
.ae-cv2[data-etape="6"] .t-coupelle, .ae-cv2[data-etape="6"] .t-piece { opacity: .4; }
.ae-cvk .k-rayons, .ae-cvk .k-loge, .ae-cvk .k-clips, .ae-cvk .k-coupelle, .ae-cvk .k-suture { opacity: 0; transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-cvk .k-marge { opacity: 0; transition: opacity 600ms; }
.ae-cvk .k-piece { transition: transform 1300ms cubic-bezier(0.65, 0, 0.35, 1); }
.ae-cvk .k-ext { transition: opacity 300ms; }
.ae-cvk .k-loge { transform-box: fill-box; transform-origin: center; transition: opacity 500ms, transform 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
.ae-cvk .k-incision { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 800ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms, stroke-width 500ms; }
.ae-cvk .k-ok { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 600ms 250ms; }
.ae-cvk:not([data-etape="1"]) .k-incision { stroke-dashoffset: 0; opacity: 1; }
.ae-cvk:is([data-etape="5"],[data-etape="6"]) .k-incision { stroke-width: 1.6; opacity: .6; }
.ae-cvk:is([data-etape="3"],[data-etape="4"],[data-etape="5"],[data-etape="6"]) .k-marge,
.ae-cvk:is([data-etape="3"],[data-etape="4"],[data-etape="5"],[data-etape="6"]) .k-coupelle { opacity: 1; }
.ae-cvk:is([data-etape="3"],[data-etape="4"],[data-etape="5"],[data-etape="6"]) .k-piece { transform: translate(110px, -92px); }
.ae-cvk:is([data-etape="3"],[data-etape="4"],[data-etape="5"],[data-etape="6"]) .k-ext { opacity: 0; }
.ae-cvk:is([data-etape="3"],[data-etape="4"]) .k-loge { opacity: 1; }
.ae-cvk:is([data-etape="5"],[data-etape="6"]) .k-loge { opacity: 0; transform: scale(1, .08) rotate(26deg); }
.ae-cvk:is([data-etape="5"],[data-etape="6"]) .k-suture, .ae-cvk:is([data-etape="5"],[data-etape="6"]) .k-clips { opacity: 1; }
.ae-cvk[data-etape="6"] .k-suture { opacity: .45; }
.ae-cvk:is([data-etape="4"],[data-etape="5"],[data-etape="6"]) .k-ok { stroke-dashoffset: 0; }
.ae-cvk[data-etape="6"] .k-rayons { opacity: 1; }
.ae-cvk[data-etape="6"] .k-coupelle, .ae-cvk[data-etape="6"] .k-piece { opacity: .4; }

/* Mastectomie redessinée (14 novembre 2026) : vue de face et vue en coupe (calques m-… sans reconstruction, r-… avec) */
.ae-ms2 .ae-fig > *, .ae-mr2 .ae-fig > *, .ae-mr2 .q-sein > * { transition: opacity 650ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-ms2 .x-coupelle, .ae-mr2 .x-coupelle { opacity: 0; }
.ae-ms2 .x-ok, .ae-mr2 .x-ok { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 600ms 250ms; }
.ae-ms2 .m-piece, .ae-mr2 .r-glande { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 500ms, transform 1200ms cubic-bezier(0.65, 0, 0.35, 1); }
/* --- sans reconstruction --- */
.ae-ms2 .m-cic, .ae-ms2 .m-drain, .ae-ms2 .q-plat { opacity: 0; }
.ae-ms2 .m-fuseau { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(0.23, 1, 0.32, 1), opacity 400ms; }
.ae-ms2:not([data-etape="1"]) .b-sein, .ae-ms2:not([data-etape="1"]) .b-areole, .ae-ms2:not([data-etape="1"]) .m-fuseau,
.ae-ms2:not([data-etape="1"]) .q-sein, .ae-ms2:not([data-etape="1"]) .m-marques, .ae-ms2:not([data-etape="1"]) .q-noms, .ae-ms2:not([data-etape="1"]) .q-nom-gl { opacity: 0; }
.ae-ms2:not([data-etape="1"]) .q-plat, .ae-ms2:not([data-etape="1"]) .x-coupelle { opacity: 1; }
.ae-ms2:not([data-etape="1"]) .ae-face .m-piece { opacity: 1; transform: translate(-144px, 74px) scale(.3); }
.ae-ms2:not([data-etape="1"]) .ae-coupe .m-piece { opacity: 1; transform: translate(104px, -112px) scale(.3); }
.ae-ms2:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .x-ok { stroke-dashoffset: 0; }
.ae-ms2:is([data-etape="4"],[data-etape="5"]) .m-cic { opacity: 1; }
.ae-ms2[data-etape="4"] .m-drain { opacity: 1; }
.ae-ms2[data-etape="5"] .m-cic { opacity: .6; }
.ae-ms2:is([data-etape="4"],[data-etape="5"]) .x-coupelle, .ae-ms2:is([data-etape="4"],[data-etape="5"]) .m-piece { opacity: .4; }
/* --- avec reconstruction immédiate --- */
.ae-mr2 .r-vide, .ae-mr2 .r-volume, .ae-mr2 .r-cic-ssm, .ae-mr2 .r-retro, .ae-mr2 .r-inc-nsm, .ae-mr2 .r-inc-ssm, .ae-mr2 .r-pam { opacity: 0; }
.ae-mr2 .r-trace { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ae-mr2[data-variante="nsm"] .r-inc-nsm, .ae-mr2[data-variante="ssm"] .r-inc-ssm { opacity: 1; }
.ae-mr2[data-variante="nsm"]:not([data-etape="1"]) .r-inc-nsm { opacity: .45; }
.ae-mr2[data-variante="ssm"]:is([data-etape="2"],[data-etape="3"]) .r-inc-ssm { opacity: .6; }
.ae-mr2[data-variante="ssm"]:is([data-etape="4"],[data-etape="5"]) .r-inc-ssm { opacity: 0; }
.ae-mr2[data-variante="ssm"]:is([data-etape="4"],[data-etape="5"]) .r-cic-ssm { opacity: 1; }
.ae-mr2[data-variante="ssm"]:not([data-etape="1"]) .b-areole, .ae-mr2[data-variante="ssm"]:not([data-etape="1"]) .r-mam { opacity: 0; }
.ae-mr2[data-variante="ssm"] .r-pam { opacity: 1; }
.ae-mr2 .ae-coupe .r-glande { opacity: 1; }
.ae-mr2:not([data-etape="1"]) .ae-face .r-glande { opacity: 1; transform: translate(-144px, 74px) scale(.3); }
.ae-mr2:not([data-etape="1"]) .ae-coupe .r-glande { transform: translate(110px, -92px) scale(.34); }
.ae-mr2:not([data-etape="1"]) .q-nom-gl { opacity: 0; }
.ae-mr2:not([data-etape="1"]) .x-coupelle { opacity: 1; }
.ae-mr2:is([data-etape="2"],[data-etape="3"]) .ae-face .r-vide { opacity: .7; }
.ae-mr2:not([data-etape="1"]) .ae-coupe .r-vide { opacity: 1; }
.ae-mr2[data-etape="3"][data-variante="nsm"] .r-retro { opacity: 1; }
.ae-mr2:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .x-ok { stroke-dashoffset: 0; }
.ae-mr2[data-etape="4"] .r-volume { opacity: 1; }
.ae-mr2[data-etape="5"] .ae-coupe .r-volume { opacity: 1; }
.ae-mr2[data-etape="5"] .ae-face .b-sein { opacity: 1; }
.ae-mr2:is([data-etape="4"],[data-etape="5"]) .x-coupelle, .ae-mr2:is([data-etape="4"],[data-etape="5"]) .r-glande { opacity: .4 !important; }
@media (prefers-reduced-motion: reduce) { .ae-ms2 .ae-fig *, .ae-mr2 .ae-fig * { transition-duration: 0ms !important; transition-delay: 0ms !important; } }

/* Ganglion sentinelle redessiné (14 novembre 2026) : nouveau sein, canaux lymphatiques, nom du ganglion */
.ae-gs2 .gs-canaux, .ae-gs2 .gs-nom { opacity: 0; transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-gs2:not([data-etape="1"]) .gs-canaux { opacity: .7; }
.ae-gs2:is([data-etape="3"],[data-etape="4"]) .gs-nom { opacity: 1; }
.ae-gs2 .gs-nom text { fill: #7A2E45; }
.ae-gs2 .gs-lymphe { stroke-dasharray: 0.1 6; }
@media (prefers-reduced-motion: no-preference) { .ae-gs2:not([data-etape="1"]) .gs-lymphe { animation: gs2-flux 1.4s linear infinite; } }
@keyframes gs2-flux { to { stroke-dashoffset: -12.2; } }
.ae-gs2[data-etape="5"] .gs-ganglion { transform: translate(-102px, 92px) scale(1.7); }

/* Ganglion sentinelle : la fenêtre « sous la peau » (étapes 2 et 3), d'après son artefact « couche par couche » */
.ae-gs2 .gs-fenetre { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.94); transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-gs2:is([data-etape="2"],[data-etape="3"]) .gs-fenetre { opacity: 1; transform: none; }
.ae-gs2 .gs-autres { opacity: 0; transition: opacity 600ms; }
.ae-gs2:is([data-etape="2"],[data-etape="3"]) .gs-autres { opacity: 1; }
.ae-gs2[data-etape="5"] .gs-autres { opacity: .75; }
.ae-gs2 .gs-autres .gs-neutre { opacity: 1; }
.ae-gs2:not([data-etape="2"]) .gs-autres .gs-neutre { opacity: 0; }
.ae-gs2:is([data-etape="1"],[data-etape="4"],[data-etape="5"]) .gs-lymphe { opacity: 0; animation: none; }
.ae-gs2[data-etape="4"] .gs-ganglion { opacity: .3; }
.ae-gs2 .gs-nom, .ae-gs2 .gs-vxnom, .ae-gs2 .gs-signal { opacity: 0; transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-gs2[data-etape="3"] .gs-nom { opacity: 1; }
.ae-gs2[data-etape="4"] .gs-nom { opacity: 0; }
.ae-gs2[data-etape="2"] .gs-vxnom { opacity: 1; }
.ae-gs2[data-etape="4"] .gs-signal { opacity: 1; }
.ae-gs2 .gs-vxnom text { fill: #5F7088; }
.ae-gs2 .gs-signal text { fill: #7A2E45; }
.ae-gs2[data-etape="5"] .gs-ganglion { transform: translate(-98px, 96px) scale(1.5); }

/* Oncoplastie redessinée (14 novembre 2026) : nouveau sein, flèches du remodelage, deux repères nommés */
.ae-oc2 .ae-fig text { font-size: 17px; }
.ae-oc2 .oc-noms text { fill: #7A2E45; }
.ae-oc2 .oc-fleches, .ae-oc2 .oc-noms { opacity: 0; transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-oc2[data-etape="1"] .oc-noms { opacity: 1; }
.ae-oc2[data-etape="3"] .oc-fleches { opacity: 1; }
.ae-oc2:not([data-etape="1"]) .oc-piece { transform: translate(-98px, 37px); }

/* Curage axillaire redessiné (14 novembre 2026) : nouveau sein, niveaux vus dans une fenêtre « sous la peau » */
.ae-ca2 .ca-fenetre { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.94); transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-ca2:is([data-etape="2"],[data-etape="3"]) .ca-fenetre { opacity: 1; transform: none; }
.ae-ca2 .ca-veine { transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-ca2 .ca-etiq text { font-size: 12.3px; }
.ae-ca2[data-etape="3"] .ca-pp { opacity: 1; }

/* Traitement conservateur : flèches du remodelage (étape « Forme ») ; quatre clips sur les parois de la loge */
.ae-cv2 .t-fleches, .ae-cvk .k-fleches { opacity: 0; transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.ae-cv2[data-etape="5"] .t-fleches, .ae-cvk[data-etape="5"] .k-fleches { opacity: 1; }

/* Menu ouvert sur écran bas (iPhone SE avec les barres de Safari, téléphone à l'horizontale) :
   le panneau défile et part du haut, sinon « Rendez-vous » sortait de l'écran (audit 15.11.2026). */
@media (max-width: 1179px) {
  nav .nav-links { overflow-y: auto; overscroll-behavior: contain; }
  @supports (height: 100dvh) { nav .nav-links { height: 100dvh !important; } }
}
nav .nav-links.open { overflow-y: auto; overscroll-behavior: contain; }
@supports (height: 100dvh) { nav .nav-links.open { height: 100dvh !important; } }
@media (max-height: 700px) and (max-width: 1179px) {
  nav .nav-links { justify-content: flex-start !important; gap: 10px !important; padding-top: 72px !important; padding-bottom: 24px !important; }
}
@media (max-height: 700px) and (min-width: 1180px) {
  nav .nav-links.open { justify-content: flex-start !important; gap: 10px !important; padding-top: 72px !important; padding-bottom: 24px !important; }
}

/* Accès des médecins depuis le bloc « Prendre rendez-vous » (audit du 15.11.2026) */
.appel-medecin { margin: 18px 0 0; font-size: 0.85rem; color: var(--gris); }
.appel-medecin a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* Accueil sur téléphone : les deux boutons du héros sur toute la largeur, le principal n'est plus le plus petit (audit 15.11.2026) */
@media (max-width: 600px) {
  .m-hero-actions > a { flex: 1 1 100%; text-align: center; justify-content: center; }
}
/* Bouton « Télécharger le guide » (Dépistage) : style des boutons du site, sans l'animation d'entrée du héros */
.depistage-item .hero-btn { animation: none; opacity: 1; display: inline-flex; }