/* Cabinet infirmier Hamard, Legeay, Mettais · site B, la liste des soins */

@font-face {
  font-family: 'Marcellus';
  src: url('assets/fonts/marcellus-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('assets/fonts/atkinson-next-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* replis réglés pour que rien ne saute à l'arrivée */
@font-face { font-family: 'Marcellus repli'; src: local('Georgia'); size-adjust: 97%; ascent-override: 96%; }
@font-face { font-family: 'Atkinson repli'; src: local('Verdana'); size-adjust: 88%; }

:root {
  --vitre: #EEF2F0;
  --bleu-roi: #1F2F8F;
  --saumon: #F59E91;
  --rouge: #C2323B;
  --encre: #1B1D2A;
  --blanc-carte: #FBFAF8;
  --bleu-roi-fonce: #17236B;
  --rouge-fonce: #A2262E;
  --encre-douce: #4A4E5E;
  --filet: rgba(31, 47, 143, 0.16);
  --filet-clair: color-mix(in srgb, var(--blanc-carte) 22%, transparent);
  --ombre-soin: 0 10px 30px rgba(31, 47, 143, 0.12);

  --f-titre: 'Marcellus', 'Marcellus repli', Georgia, serif;
  --f-texte: 'Atkinson Hyperlegible Next', 'Atkinson repli', Verdana, sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 64px; --s-7: 104px; --s-8: 160px;
  --r-1: 6px;
  --r-2: 18px;
  --gout: 20px;
  --bande: 74px;            /* --s-6 + 15 % */
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);

  --vague-8: url('assets/img/vague-8.png');
  --vague-12: url('assets/img/vague-12.png');
  --t-body: 17px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--vitre);
  color: var(--encre);
  font: 400 var(--t-body)/1.6 var(--f-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--bleu-roi); outline-offset: 2px; border-radius: 2px; }
.zone :focus-visible { outline-color: var(--blanc-carte); }

.evitement {
  position: absolute; left: var(--gout); top: -60px; z-index: 30;
  background: var(--blanc-carte); color: var(--bleu-roi); padding: 10px 14px; border-radius: var(--r-1);
  font-weight: 600;
}
.evitement:focus { top: 8px; }

/* ---------- surfaces ---------- */
.bande-vitre { position: relative; isolation: isolate; background: var(--vitre); }
.bande-vitre::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--vitre) url('assets/img/vitre.webp') repeat 0 0 / 512px 512px;
  opacity: 0.3;
}
.bande-vitre::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 34% at 16% 10%, color-mix(in srgb, var(--blanc-carte) 60%, transparent), transparent 72%);
}

.photo { position: relative; overflow: hidden; border-radius: var(--r-2); background: var(--blanc-carte); }
.photo::before, .photo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; }
.photo::before { background: url('assets/img/vitre.webp') 0 0 / 512px 512px; mix-blend-mode: overlay; opacity: 0.08; }
.photo::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  opacity: 0.04;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- boutons et liens ---------- */
.bouton-appel {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  background: var(--rouge); color: var(--blanc-carte);
  border-radius: var(--r-1);
  font: 600 17px/1.2 var(--f-texte); text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease-out;
}
.bouton-appel__icone { flex: none; transition: transform 200ms ease-out; }
.bouton-appel:active { transform: translateY(1px); }
.bouton-appel--reduit { min-height: 40px; padding: 0 14px; gap: 6px; font-size: 15px; }

.bouton-contour {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 22px;
  border: 2px solid var(--bleu-roi); border-radius: var(--r-1);
  color: var(--bleu-roi); background: transparent;
  font: 600 17px/1.2 var(--f-texte); text-decoration: none;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.lien {
  color: var(--bleu-roi);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
  padding-bottom: 1px;
  transition: background-size 300ms var(--courbe), text-decoration-color 300ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .bouton-appel:hover { background: var(--rouge-fonce); }
  .bouton-appel:hover .bouton-appel__icone { transform: translateX(3px); }
  .bouton-contour:hover { background: var(--bleu-roi); color: var(--blanc-carte); }
  .lien:hover { text-decoration-color: transparent; background-size: 100% 2px; }
  .marque:hover { color: var(--bleu-roi-fonce); }
  .nom:hover { color: var(--bleu-roi); }
  .fiche { position: relative; transition: transform 400ms var(--courbe), box-shadow 400ms var(--courbe); }
  .fiche:hover { z-index: 2; transform: translateY(-3px); box-shadow: var(--ombre-soin); background: var(--blanc-carte); border-radius: var(--r-2); }
  .choix__cadre--large .vue { transition: opacity 200ms ease-out, transform 400ms var(--courbe); }
  .choix--soins:has(.fiche:hover) .choix__cadre--large .vue.actif { transform: scale(1.03); }
}

/* ---------- en-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: var(--vitre);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out;
}
.entete.defile { border-bottom-color: var(--filet); }
.entete__in {
  height: 56px; max-width: 1408px; margin: 0 auto; padding: 0 var(--gout);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marque {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--bleu-roi); text-decoration: none;
  font: 400 18px/1.05 var(--f-titre);
  transition: color 200ms ease-out;
}
.marque img { width: 32px; height: 32px; flex: none; }
.marque__noms { display: block; white-space: nowrap; }
@media (max-width: 419px) {
  .entete__in { gap: 8px; }
  .marque { gap: 8px; }
  .bouton-appel--reduit .bouton-appel__icone { display: none; }
}

/* ---------- le premier écran ---------- */
.hero__in { padding: 22px var(--gout) 36px; max-width: 1408px; margin: 0 auto; }
.hero__titre {
  font: 400 32px/1.1 var(--f-titre); color: var(--bleu-roi);
  max-width: 11em; text-wrap: balance;
  margin-bottom: 24px;
}

.choix { position: relative; }
.choix__noms { position: relative; }
.nom {
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  font-family: var(--f-titre); font-weight: 400; color: var(--encre);
  transition: color 250ms var(--courbe);
  -webkit-tap-highlight-color: transparent;
}
.nom.actif { color: var(--bleu-roi); }
.mot { position: relative; }

/* le surligneur : le film à vagues de leurs fenêtres, 8 px, à la largeur du mot */
.surligneur {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 0; height: 8px; pointer-events: none; opacity: 0;
  background: var(--vague-8) repeat-x 0 0 / 128px 8px;
  transform: translate(0, 0);
  transition: transform 250ms var(--courbe), width 250ms var(--courbe);
}
.js .surligneur.pose { opacity: 1; }
.surligneur.net { transition: none; }
html:not(.js) .nom.actif .mot { background: var(--vague-8) repeat-x 0 100% / 128px 8px; padding-bottom: 10px; }

.choix--hero { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: start; }
.choix--hero .nom { font-size: 22px; line-height: 36px; }
.choix__cadre { position: relative; width: 150px; height: 216px; }
.choix__cadre .vue {
  position: absolute; inset: 0; display: block;
  opacity: 0; transition: opacity 200ms ease-out;
}
.choix__cadre .vue.actif { opacity: 1; z-index: 1; }
.choix__cadre .vue img, .choix__cadre img.vue { width: 100%; height: 100%; object-fit: cover; }

.hero__permanence {
  font: 600 15px/1.45 var(--f-texte); color: var(--encre);
  margin: 24px 0 16px; max-width: 30em;
}
.hero__action .bouton-appel { width: 100%; }
.insecable { white-space: nowrap; }
.hero__preuve { margin-top: 14px; font: 400 15px/1.45 var(--f-texte); color: var(--encre-douce); }

/* ---------- titres de section : les questions ---------- */
.question {
  position: relative; display: block;
  font: 400 34px/1.12 var(--f-titre); color: var(--bleu-roi);
  padding-bottom: 22px; text-wrap: balance;
}
.question::after {
  content: ""; position: absolute; bottom: 0;
  left: var(--bx, 0px); width: var(--bw, 5.6em); height: 8px;
  background: var(--vague-8) repeat-x 0 0 / 128px 8px;
}
.question--clair { color: var(--blanc-carte); }
.chapeau { font: 400 19px/1.5 var(--f-texte); margin-top: 22px; max-width: 34em; }
.chapeau--clair { color: var(--blanc-carte); }

/* ---------- vous faites ce soin ? ---------- */
.soins { padding: var(--bande) 0; }
.soins__in { max-width: 1408px; margin: 0 auto; padding: 0 var(--gout); }
.fiches {
  position: relative; margin-top: 40px;
  background: var(--blanc-carte); border-radius: var(--r-2);
}
.fiche { padding: 24px 22px 26px; border-top: 1px solid var(--filet); }
.fiche:first-child { border-top: 0; }
.fiche .nom { font-size: 34px; line-height: 1.12; padding-bottom: 6px; text-wrap: balance; }
.fiche__detail { margin-top: 10px; max-width: 34em; }
.fiche__ou { margin-top: 8px; font: 600 15px/1.45 var(--f-texte); color: var(--bleu-roi); }
.fiche__photo { display: none; margin-top: 18px; aspect-ratio: 16 / 9; }
.fiche__photo.actif { display: block; animation: fondu 200ms ease-out both; }
.soins__vue { display: none; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---------- vous venez chez moi ? la zone ---------- */
.zone {
  position: relative; background: var(--bleu-roi); color: var(--blanc-carte);
  padding: calc(12px + var(--bande)) 0 var(--bande);
}
.zone::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: var(--vague-12) repeat-x 0 0 / 96px 12px;
}
.zone__in { max-width: 1408px; margin: 0 auto; padding: 0 var(--gout); }
.zone__note { margin-top: 18px; max-width: 30em; }
.communes {
  margin-top: 34px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
}
.communes li {
  font: 600 22px/1.25 var(--f-texte);
  padding: 14px 0; border-bottom: 1px solid var(--filet-clair);
}
.passage { margin-top: var(--bande); }
.passage__photo { aspect-ratio: 3 / 2; }
.passage__titre { margin-top: 28px; font: 600 22px/1.25 var(--f-texte); }
.etapes { margin-top: 20px; counter-reset: e; }
.etapes li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--filet-clair); }
.etapes__n { font: 400 34px/1 var(--f-titre); padding-top: 2px; }

/* ---------- je peux passer au cabinet ? la bande saumon ---------- */
.cabinet { position: relative; isolation: isolate; background: var(--saumon); padding: var(--bande) 0; color: var(--encre); }
.cabinet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('assets/img/papier.webp') repeat 0 0 / 512px 512px;
  mix-blend-mode: multiply; opacity: 0.2;
}
.cabinet__in { max-width: 1408px; margin: 0 auto; padding: 0 var(--gout); }
.cabinet__photo { aspect-ratio: 3 / 2; margin-bottom: 40px; background: var(--vitre); }
.cabinet .lien { color: var(--bleu-roi); }
.horaires { margin-top: 28px; max-width: 26em; border-top: 1px solid var(--filet); }
.horaires__jour { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.horaires dt { font-weight: 600; }
.horaires dd { font-variant-numeric: tabular-nums; }
.horaires dd span + span::before { content: " · "; }
.horaires__jour.aujourdhui { color: var(--bleu-roi); }
.horaires__jour.aujourdhui dt::after { content: " · aujourd'hui"; font-weight: 400; }
.cabinet__acces { margin-top: 20px; max-width: 34em; }
.cabinet__mot { margin-top: 34px; max-width: 30em; }
.cabinet__mot p { font: 400 22px/1.4 var(--f-titre); color: var(--bleu-roi); }
.cabinet__mot footer { margin-top: 10px; font: 600 15px/1.45 var(--f-texte); }
.cabinet__equipe { margin-top: 34px; display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; max-width: 34em; }
.carte { width: 132px; border-radius: var(--r-1); transform: rotate(-2deg); }
.cabinet .bouton-contour { margin-top: 32px; }

/* ---------- comment vous joindre ? ---------- */
.joindre { padding-top: var(--bande); }
.joindre__in { max-width: 1408px; margin: 0 auto; padding: 0 var(--gout); }
.joindre__numero { margin-top: 26px; }
.joindre__numero a {
  font: 400 46px/1.05 var(--f-titre); color: var(--bleu-roi); text-decoration: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.joindre__qui { margin-top: 16px; max-width: 30em; }
.joindre__boutons { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.joindre__boutons .bouton-appel, .joindre__boutons .bouton-contour { flex: 1 1 260px; }
.avis { margin-top: var(--bande); }
.avis__un { padding: 24px 0; border-top: 1px solid var(--filet); }
.avis__un:first-child { border-top: 0; padding-top: 0; }
.avis__un blockquote p { font: 400 26px/1.3 var(--f-titre); color: var(--encre); max-width: 20em; text-wrap: balance; }
.avis__un figcaption { margin-top: 12px; font: 600 15px/1.45 var(--f-texte); color: var(--encre-douce); }

.pied { margin-top: var(--bande); border-top: 1px solid var(--filet); }
.pied__in {
  max-width: 1408px; margin: 0 auto; padding: 32px var(--gout) 40px;
  display: grid; grid-template-columns: 56px 1fr; gap: 16px 18px; align-items: start;
  font-size: 15px; line-height: 1.6; color: var(--encre-douce);
}
.pied__nom { font: 400 18px/1.2 var(--f-titre); color: var(--bleu-roi); margin-bottom: 6px; }
.pied__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pied__legal a { color: var(--encre-douce); text-underline-offset: 3px; }

/* ---------- apparitions au défilement ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--courbe), transform 0.9s var(--courbe); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- tablette ---------- */
@media (min-width: 600px) {
  :root { --gout: 40px; }
  .hero__titre { font-size: 46px; max-width: 13em; }
  .choix--hero { grid-template-columns: minmax(0, 1fr) 280px; }
  .choix--hero .nom { font-size: 32px; line-height: 64px; }
  .choix--hero .choix__cadre { width: 280px; height: 403px; }
  .hero__action .bouton-appel { width: auto; }
  .fiche { padding: 28px 32px 30px; }
  .fiche .nom { font-size: 44px; }
  .communes { grid-template-columns: repeat(3, 1fr); }
  .joindre__numero a { font-size: 64px; }
  .question { font-size: 44px; }
}

/* ---------- bureau ---------- */
@media (min-width: 900px) {
  :root { --gout: 64px; --bande: 120px; --t-body: 18px; }
  .marque { font-size: 20px; }
  .marque img { width: 36px; height: 36px; }
  .marque__noms { display: inline; }

  .hero__in {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 44px;
    padding-top: 52px; padding-bottom: 88px;
  }
  .hero__titre { grid-column: 1 / span 8; grid-row: 1; font-size: 72px; line-height: 1.02; max-width: 12em; margin: 0; }
  .hero__action { grid-column: 9 / span 4; grid-row: 1; align-self: end; }
  .hero__permanence { margin-top: 0; font-size: 17px; }
  .hero__action .bouton-appel { width: 100%; }
  .choix--hero { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; align-items: center; }
  .choix--hero .nom { font-size: 44px; line-height: 66px; }
  .choix--hero .choix__cadre { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  .question { font-size: 52px; line-height: 1.1; padding-bottom: 26px; }
  .chapeau { font-size: 21px; }

  .soins__tete { max-width: 58%; }
  .choix--soins { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; }
  .fiches { margin-top: 56px; }
  .fiche { padding: 30px 40px 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .fiche .nom { grid-column: 1 / -1; font-size: 48px; line-height: 1.08; padding-bottom: 8px; }
  .fiche__ou { margin-top: 12px; text-align: right; white-space: nowrap; }
  .fiche__photo, .fiche__photo.actif { display: none; }
  .soins__vue { display: block; position: sticky; top: 104px; margin-top: 56px; }
  .choix__cadre--large { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  .zone__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .zone__tete { grid-column: 1 / span 6; }
  .communes { grid-column: 8 / span 5; margin-top: 8px; grid-template-columns: 1fr 1fr; align-self: start; }
  .communes li { font-size: 26px; padding: 18px 0; }
  .passage { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
  .passage__photo { grid-column: 1 / span 6; }
  .passage__texte { grid-column: 8 / span 5; }
  .passage__titre { margin-top: 0; font-size: 26px; }

  .cabinet__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .cabinet__photo { grid-column: 1 / span 6; margin: 0; position: sticky; top: 104px; }
  .cabinet__texte { grid-column: 8 / span 5; }
  .cabinet__mot p { font-size: 26px; }

  .joindre__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .joindre__appel { grid-column: 1 / span 6; }
  .joindre__numero a { font-size: 88px; }
  .joindre__boutons .bouton-appel, .joindre__boutons .bouton-contour { flex: 0 1 auto; }
  .avis { grid-column: 8 / span 5; margin-top: 8px; }
  .avis__un blockquote p { font-size: 28px; }
  .pied__in { grid-template-columns: 56px 1fr auto; align-items: center; }
  .pied__legal { grid-column: auto; }
}

@media (min-width: 1200px) {
  .fiche .nom { font-size: 56px; }
}

/* ---------- réduction des animations : l'état final, tout de suite ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .js .reveal { transform: none; transition: opacity 150ms ease-out !important; }
}