/* Medileg Expert : feuille commune aux trois pages.
   Direction : thème clair, sobre, le produit montré tel qu'il est. Un seul bandeau sombre (sécurité).
   L'ambre est réservé au bouton principal ; la sarcelle aux liens et au focus.
   Mouvement : une entrée unique en haut de page, des retours de 100 à 200 ms, rien qui boucle. */

@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("polices/source-sans-3-regular.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("polices/source-sans-3-semibold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap; src: url("polices/source-sans-3-bold.woff2") format("woff2"); }

:root {
  /* Couleurs de l'application V2 */
  --petrole: #123E4A;
  --sarcelle: #0E6B70;
  --turquoise: #3FB8A9;
  --ambre: #F2B45A;
  --ambre-survol: #EBA646;

  /* Fonds : trois seulement */
  --fond: #F3F5F7;
  --surface: #FFFFFF;
  --sombre: #123E4A;

  /* Encres, teintées vers le pétrole */
  --encre: #14262C;
  --encre-douce: #45585F;
  --encre-sur-sombre: #FFFFFF;
  --encre-douce-sur-sombre: #B9D2D7;
  --trait: #DCE4E7;
  --trait-sur-sombre: rgba(255, 255, 255, .16);

  /* Typographie : Source Sans 3, échelle fixe */
  --police: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-corps: 1.0625rem;      /* 17 px */
  --t-chapeau: 1.25rem;      /* 20 px */
  --t-h3: 1.25rem;           /* 20 px */
  --t-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.375rem);  /* 28 → 38 px */
  --t-h1: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);     /* 36 → 52 px */
  --t-petit: .9375rem;       /* 15 px */

  /* Espacements, base 4 */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px; --e-8: 32px;
  --e-12: 48px; --e-16: 64px; --e-24: 96px; --e-32: 128px;

  --largeur: 1180px;
  --rayon: 10px;

  /* Mouvement */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-entree: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
  accent-color: var(--sarcelle);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(63, 184, 169, .28); color: var(--encre); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sarcelle); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sarcelle); outline-offset: 3px; border-radius: 4px; }
.sombre :focus-visible, .pied-sombre :focus-visible { outline-color: var(--turquoise); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, ul, ol, dl { margin: 0; }
p, li, dd { text-wrap: pretty; }
.chiffres { font-variant-numeric: tabular-nums; }

.cadre {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--petrole); color: #fff; padding: var(--e-3) var(--e-4); font-weight: 600;
}
.evitement:focus { left: var(--e-3); top: var(--e-3); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: var(--fond);
}
/* Le filet n'apparaît qu'une fois la page défilée : seule son opacité change. */
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--trait);
  opacity: 0; transition: opacity 200ms ease;
}
.entete.defile::after { opacity: 1; }
.entete .cadre { display: flex; align-items: center; gap: var(--e-8); min-height: 72px; }
.marque { display: flex; align-items: center; gap: var(--e-3); color: var(--encre); text-decoration: none; flex-shrink: 0; }
.marque img { width: 36px; height: 36px; }
.marque span { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; }
.marque small { font-size: .8125rem; font-weight: 600; color: var(--encre-douce); letter-spacing: .02em; margin-left: 2px; }
.menu { display: flex; align-items: center; gap: var(--e-6); margin-left: auto; }
.menu a:not(.bouton) { color: var(--encre-douce); text-decoration: none; font-weight: 600; font-size: 1rem; padding: var(--e-2) 0; transition: color 150ms ease; }
.menu a:not(.bouton):hover { color: var(--encre); }

/* ---------- Boutons : un seul style principal, un secondaire ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-6);
  background: var(--ambre); color: var(--petrole);
  font: inherit; font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  border: 0; border-radius: 8px; cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.bouton:hover { background: var(--ambre-survol); color: var(--petrole); }
.bouton:active { transform: scale(.97); }
.bouton.petit { min-height: 40px; padding: 0 var(--e-4); font-size: 1rem; }
.lien-fleche { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; }
.lien-fleche::after { content: "→"; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lien-fleche:hover::after { transform: translateX(3px); }
}

/* ---------- Haut de page : texte + produit ---------- */
.ouverture { padding-block: var(--e-12) var(--e-24); overflow-x: clip; }
.ouverture .cadre {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-12); align-items: center;
}
.ouverture h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.ouverture .chapeau { margin-top: var(--e-6); font-size: var(--t-chapeau); line-height: 1.5; color: var(--encre-douce); max-width: 36ch; }
.ouverture .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); margin-top: var(--e-8); }
.faits {
  list-style: none; padding: 0; margin-top: var(--e-12);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6);
  font-size: var(--t-petit); color: var(--encre-douce);
}
.faits li { display: flex; align-items: center; gap: var(--e-2); }
.faits li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--turquoise); flex-shrink: 0; }

/* Capture produit : une fenêtre, sans habillage factice */
.capture {
  margin: 0;
  border-radius: var(--rayon); overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--trait);
  box-shadow: 0 1px 2px rgba(18, 62, 74, .06), 0 28px 56px -20px rgba(18, 62, 74, .28);
}
.capture img { width: 100%; height: auto; aspect-ratio: 1664 / 981; }
.ouverture .capture { width: 118%; max-width: none; }

/* Entrée unique au chargement : texte puis capture. Visible sans script, opacité seule si mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  .ouverture .texte-ouverture { animation: monte 600ms var(--ease-entree) both; }
  .ouverture .capture { animation: monte-capture 900ms var(--ease-entree) 120ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .ouverture .texte-ouverture, .ouverture .capture { animation: fondu 300ms ease both; }
}
@keyframes monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes monte-capture { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--e-24); overflow-x: clip; }
.section.surface { background: var(--surface); }
.section h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.section .intro { max-width: 40rem; }
.section .intro p { margin-top: var(--e-4); font-size: var(--t-chapeau); line-height: 1.5; color: var(--encre-douce); }
.note { margin-top: var(--e-3) !important; font-size: var(--t-petit) !important; color: var(--encre-douce); }

/* Toute la largeur : la liste des expertises, coupée en bas par un fondu */
.plein { margin-top: var(--e-12); }
.plein .capture {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  box-shadow: 0 1px 2px rgba(18, 62, 74, .06);
}
.plein .capture img { aspect-ratio: 1664 / 760; object-fit: cover; object-position: top left; }

/* Texte et capture côte à côte ; la capture déborde vers l'extérieur */
.cote { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-16); align-items: center; }
.cote.inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cote.inverse .colonne-texte { order: 2; }
.cote .capture { width: 112%; max-width: none; }
.cote.inverse .capture { margin-left: -12%; }
.cote .capture.coupee {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.cote .capture.coupee img { aspect-ratio: 1664 / 820; object-fit: cover; object-position: top left; }
.cote.sans-capture { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
/* Gros plan sur une partie de l'écran (panneau Galien) */
.capture.panneau { margin-top: var(--e-8); max-width: 340px; }
.capture.panneau img { aspect-ratio: 379 / 582; }

/* Liste éditoriale : des faits séparés par des filets, sans puces ni cartes */
.liste { list-style: none; padding: 0; margin-top: var(--e-8); border-top: 1px solid var(--trait); }
.liste li { padding: var(--e-4) 0; border-bottom: 1px solid var(--trait); color: var(--encre-douce); max-width: 62ch; }
.liste li b { display: block; color: var(--encre); font-weight: 600; font-size: 1.0625rem; margin-bottom: 2px; }
.sans-capture .liste { margin-top: 0; }

/* Trois colonnes de texte, filet au-dessus */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-12); margin-top: var(--e-12); }
.trio > div { border-top: 2px solid var(--encre); padding-top: var(--e-4); }
.trio h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.trio p { margin-top: var(--e-2); color: var(--encre-douce); max-width: 40ch; }

/* Étapes numérotées (l'ordre compte) */
.etapes { list-style: none; padding: 0; counter-reset: etape; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-12); margin-top: var(--e-12); }
.etapes li { counter-increment: etape; }
.etapes li::before {
  content: counter(etape); display: block;
  font-size: 2.75rem; font-weight: 300; line-height: 1; color: var(--sarcelle);
  font-variant-numeric: tabular-nums; margin-bottom: var(--e-4);
}
.etapes h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.etapes p { margin-top: var(--e-2); color: var(--encre-douce); max-width: 38ch; }
.cabinet { margin-top: var(--e-12); padding-top: var(--e-6); border-top: 1px solid var(--trait); max-width: 66ch; color: var(--encre-douce); }
.cabinet b { color: var(--encre); font-weight: 600; }

/* ---------- Bandeau sombre : sécurité ---------- */
.sombre { background: var(--sombre); color: var(--encre-sur-sombre); }
.sombre .intro p { color: var(--encre-douce-sur-sombre); }
.quatre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-16); margin-top: var(--e-12); }
.quatre > div { padding: var(--e-6) 0; border-top: 1px solid var(--trait-sur-sombre); }
.quatre h3 { font-size: var(--t-h3); font-weight: 600; }
.quatre p { margin-top: var(--e-2); color: var(--encre-douce-sur-sombre); max-width: 46ch; }

/* ---------- Questions fréquentes ---------- */
.faq-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--e-16); align-items: start; }
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--e-4) var(--e-12) var(--e-4) 0; min-height: 56px; display: flex; align-items: center;
  font-weight: 600; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--sarcelle); border-bottom: 2px solid var(--sarcelle);
  transform: rotate(45deg); transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq details p { padding: 0 0 var(--e-6); color: var(--encre-douce); max-width: 62ch; }

/* ---------- Clôture ---------- */
.cloture { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-16); align-items: end; }
.cloture .intro p { max-width: 46ch; }
.cloture .actions { margin-top: var(--e-8); }
.coordonnees { display: grid; gap: var(--e-6); padding-left: var(--e-8); border-left: 1px solid var(--trait); }
.coordonnees dt { font-size: var(--t-petit); color: var(--encre-douce); }
.coordonnees dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.coordonnees dd a { color: var(--encre); text-decoration: none; }
.coordonnees dd a:hover { color: var(--sarcelle); }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--trait); font-size: var(--t-petit); color: var(--encre-douce); }
.pied .cadre { padding-block: var(--e-8) calc(var(--e-8) + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-8); align-items: center; justify-content: space-between; }
.pied a { color: var(--encre-douce); }
.pied a:hover { color: var(--encre); }
.pied nav { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); }

/* ---------- Pages de texte (mentions légales, page patient) ---------- */
.tete-page { padding-block: var(--e-16) var(--e-12); border-bottom: 1px solid var(--trait); }
.tete-page h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; max-width: 24ch; }
.tete-page .chapeau { margin-top: var(--e-4); font-size: var(--t-chapeau); line-height: 1.5; color: var(--encre-douce); max-width: 52ch; }
.texte { max-width: 44rem; padding-block: var(--e-12) var(--e-24); }
.texte h2 { font-size: 1.625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: var(--e-16) 0 var(--e-4); }
.texte h2:first-child, .texte .sommaire + h2 { margin-top: 0; }
.texte h3 { font-size: 1.1875rem; font-weight: 600; margin: var(--e-8) 0 var(--e-2); }
.texte p, .texte ul { margin: 0 0 var(--e-3); }
.texte ul { padding-left: 1.25em; }
.texte li { margin: var(--e-1) 0; }
.texte li::marker { color: var(--sarcelle); }
.texte .sommaire { padding: 0 0 var(--e-8); margin-bottom: var(--e-12); border-bottom: 1px solid var(--trait); }
.texte .sommaire strong { font-weight: 600; }
.texte .sommaire ul { margin: var(--e-2) 0 0; }
.texte dl { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--e-2) var(--e-6); margin: 0 0 var(--e-3); }
.texte dt { font-weight: 600; }
.texte dd { margin: 0; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.texte .a-completer { background: #FCEFD8; color: #6E4700; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.texte .en-anglais { color: var(--encre-douce); font-style: italic; }
.maj { color: var(--encre-douce); font-size: var(--t-petit); margin-top: var(--e-12) !important; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 980px) {
  .ouverture .cadre, .cote, .cote.inverse, .cote.sans-capture, .faq-grille, .cloture { grid-template-columns: minmax(0, 1fr); gap: var(--e-12); }
  .ouverture .capture, .cote .capture { width: 100%; }
  .cote.inverse .capture { margin-left: 0; }
  .cote.inverse .colonne-texte { order: 0; }
  .coordonnees { padding-left: 0; border-left: 0; padding-top: var(--e-6); border-top: 1px solid var(--trait); }
}
@media (max-width: 760px) {
  .menu a:not(.bouton) { display: none; }
  .section { padding-block: var(--e-16); }
  .ouverture { padding-block: var(--e-8) var(--e-16); }
  .trio, .etapes, .quatre { grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
  .quatre { gap: 0; }
  .texte dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .texte dd { margin-bottom: var(--e-3); }
  .marque small { display: none; }
}
@media (max-width: 420px) {
  .cadre { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .ouverture .actions .bouton { width: 100%; }
  .coordonnees dd { font-size: 1.25rem; }
}