/* ============================================================
   Pharmacie du Pont-Neuf.
   Le sujet impose la lisibilité avant tout : une partie des visiteurs a plus
   de soixante-dix ans ou lit mal de près. D'où Atkinson Hyperlegible, dessinée
   pour les malvoyants, un corps de texte à 19 px au lieu de 17, un interlignage
   large, et des écarts de contraste très au-delà du minimum.

   Blanc franc, vert d'officine, et rien d'autre : pas de fond coloré derrière
   du texte, pas de gris clair. C'est le seul des neuf sites où la typographie
   est choisie pour une contrainte d'usage et non pour un effet.

   Contrastes mesurés (WCAG AA, et AAA pour le texte courant) :
     encre #14312a sur blanc        : 13,9:1
     gris  #4a5a54 sur blanc        :  7,4:1
     vert  #0e4f3f sur blanc        :  8,5:1
     blanc sur vert                 :  8,5:1
   ============================================================ */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/src/fonts/AtkinsonHyperlegibleNext-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --creme: #ffffff;
  --creme-fonce: #eef5f2;
  --marine: #14312a;
  --marine-clair: #1d453b;
  --cedre: #0e4f3f;
  --gris: #4a5a54;
  --trait: #d4e3dd;

  --mesure: 62ch;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --rythme: clamp(3.5rem, 8vw, 7rem);
  --ecart: clamp(1rem, 2.4vw, 1.75rem);

  --titre: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texte: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--marine);
  font-family: var(--texte);
  font-size: 1.1875rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0 0 0.6em;
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; }

p { margin: 0 0 1.2em; }

.conteneur { width: min(100%, 74rem); margin-inline: auto; padding-inline: var(--gouttiere); }
.mesure > * { max-width: var(--mesure); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saut { position: absolute; left: -9999px; }
.saut:focus { left: var(--gouttiere); top: 0.5rem; z-index: 60; padding: 0.6rem 1rem; background: var(--marine); color: var(--creme); }

:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--cedre); outline-offset: 3px; }

/* --- Bandeau « ce site est à vendre » --- */

.bande-vente { position: sticky; top: 0; z-index: 50; background: #0b1016; }

.bande-vente__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 1.25rem; padding-block: 0.6rem; font-size: 0.93rem;
}

.bande-vente p { margin: 0; }
.bande-vente__titre { font-weight: 700; color: #fff; }
.bande-vente__accroche { color: #b9c4cd; }

.bande-vente__cta {
  padding: 0.45rem 1rem; border-radius: 0.4rem;
  background: #00d4d6; color: #10232b; font-weight: 700; text-decoration: none;
}

.bande-vente__cta:hover, .bande-vente__cta:focus-visible { background: #2ae4e6; }

@media (max-width: 47.99em) { .bande-vente__accroche { display: none; } }

/* --- En-tête : marine plein, pour asseoir la marque --- */

.entete { position: relative; z-index: 40; background: var(--cedre); color: #fff; }

.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }

.marque { text-decoration: none; line-height: 1.15; }
.marque__nom { display: block; font-family: var(--titre); font-size: 1.35rem; font-weight: 600; }
.marque__baseline { display: block; margin-top: 0.1rem; color: #c7ded5; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; }

.nav ul { display: flex; gap: clamp(1rem, 2.2vw, 1.9rem); margin: 0; padding: 0; list-style: none; }
.nav a { padding-block: 0.4rem; font-size: 0.95rem; text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a:focus-visible, .nav [aria-current='page'] { border-bottom-color: var(--creme); }

.entete__bouton { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid rgba(255,255,255,0.4); border-radius: 0.3rem; color: inherit; cursor: pointer; }
.entete__barres, .entete__barres::before, .entete__barres::after { display: block; width: 18px; height: 2px; margin-inline: auto; background: currentColor; content: ''; }
.entete__barres::before { transform: translateY(-6px); }
.entete__barres::after { transform: translateY(4px); }

@media (max-width: 55.99em) {
  .entete__bouton { display: block; }
  .entete__inner { flex-wrap: wrap; }
  .nav { display: none; flex-basis: 100%; }
  .nav[data-ouvert] { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding-block: 0.5rem; }
  .nav a { display: block; padding-block: 0.8rem; border-bottom: 1px solid rgba(247,245,241,0.18); }
}

/* --- Ouverture : texte à gauche, image à droite, sans superposition --- */

.ouverture { background: var(--creme-fonce); color: var(--marine); }

.ouverture .conteneur,
.ouverture__texte { position: relative; }

.ouverture__image img { width: 100%; height: clamp(14rem, 34vw, 24rem); object-fit: cover; }

.ouverture__texte { padding-block: var(--rythme); }
.ouverture__texte > * { max-width: 44rem; }
.ouverture h1 { color: var(--marine); }

.surtitre { margin-bottom: 0.9rem; color: var(--cedre); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.chapo { color: var(--gris); font-size: 1.25rem; }
.ouverture .chapo { max-width: 42rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }

/* --- Boutons --- */

.bouton {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0.75rem 1.5rem;
  background: var(--cedre); color: var(--creme);
  border: 0; border-radius: 0.5rem;
  font-family: var(--texte); font-size: 1rem; font-weight: 650;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease;
}

.bouton:hover, .bouton:focus-visible { background: #0a3b2f; }
.bouton--clair { background: var(--creme); color: var(--marine); }
.bouton--clair:hover, .bouton--clair:focus-visible { background: #fff; }

.lien-fleche { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; text-underline-offset: 5px; }
.lien-fleche::after { content: '\2192'; }
.ouverture .lien-fleche { color: var(--cedre); }

/* --- Sections --- */

.section { padding-block: var(--rythme); }
.section--sombre { background: var(--creme-fonce); }

.section:not(.section--sombre) + .section:not(.section--sombre),
.section--sombre + .section--sombre { padding-top: 0; }

.tete-section { max-width: 46rem; margin-bottom: clamp(2rem, 4.5vw, 3rem); }
.tete-section p { color: var(--gris); }
.tete-section__titre { margin-bottom: clamp(2rem, 4.5vw, 3rem); }
.tete-section__lien { margin-top: 2rem; margin-bottom: 0; }

.entete-page { padding-block: clamp(2.5rem, 6vw, 5rem) var(--rythme); background: var(--creme-fonce); color: var(--marine); }
.entete-page h1 { color: var(--marine); }
.entete-page__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.entete-page--image .entete-page__inner { grid-template-columns: 1.4fr 1fr; align-items: center; }
.entete-page__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.5rem; }

@media (max-width: 55.99em) { .entete-page--image .entete-page__inner { grid-template-columns: 1fr; } }

/* --- Rangées --- */

.grille-photos, .cartes, .etapes, .formules {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--ecart); margin: 0; padding: 0; list-style: none;
}

.grille-photos > li { flex: 1 1 20rem; max-width: 32rem; }
.cartes > li, .etapes > li { flex: 1 1 18rem; max-width: 26rem; }
.formules > li { flex: 1 1 17rem; max-width: 24rem; }

.grille-photos figure { margin: 0; }
.grille-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; }
.grille-photos figcaption { margin-top: 0.6rem; color: var(--gris); font-size: 0.88rem; }

.carte { padding: clamp(1.4rem, 3vw, 1.9rem); background: var(--creme); border: 1px solid var(--trait); border-radius: 0.5rem; }
.section--sombre .carte { background: #fff; }
.carte p, .etapes p { margin-bottom: 0; color: var(--gris); }
.carte h3 a { text-decoration-color: var(--cedre); text-underline-offset: 4px; }

.etapes__num { display: block; margin-bottom: 0.5rem; color: var(--cedre); font-family: var(--titre); font-size: 2.2rem; font-weight: 600; line-height: 1; }

/* --- Listes --- */

.coches { margin: 1.3rem 0 0; padding: 0; list-style: none; }
.coches li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; color: var(--gris); }
.coches li::before { position: absolute; left: 0; color: var(--cedre); font-weight: 700; content: '\2713'; }

/* --- Formules --- */

.formule { display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2rem); background: #fff; border: 1px solid var(--trait); border-radius: 0.5rem; }
.formule--vedette { border-color: var(--cedre); box-shadow: 0 0 0 1px var(--cedre); }
.formule__prix { margin: 0.2rem 0 0.4rem; font-family: var(--titre); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; line-height: 1; }
.formule__prix span { display: block; margin-top: 0.45rem; color: var(--gris); font-family: var(--texte); font-size: 0.85rem; font-weight: 400; }
.formule__pour { color: var(--gris); font-size: 0.95rem; }
.formule .coches { margin-top: auto; padding-top: 1rem; }

/* --- Questions fréquentes --- */

.faq details { border-top: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.05rem; }
.faq summary::after { color: var(--cedre); content: '+'; font-size: 1.4rem; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 1.2rem; color: var(--gris); max-width: var(--mesure); }

/* --- Contact --- */

.contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 55.99em) { .contact { grid-template-columns: 1fr; } }

.champ { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; }
.champ label { font-size: 0.9rem; font-weight: 600; }
.champ input, .champ select, .champ textarea { min-height: 56px; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--trait); border-radius: 0.5rem; color: var(--marine); font: inherit; }
.champ textarea { min-height: 9rem; resize: vertical; }
.mention { color: var(--gris); font-size: 0.86rem; }

.contact__infos dl { margin: 0; }
.contact__infos dt { margin-top: 1.1rem; color: var(--gris); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.contact__infos dd { margin: 0.2rem 0 0; }

/* --- Maillage --- */

.maillage { padding-block: 0 var(--rythme); }
.maillage__titre { font-family: var(--texte); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.maillage ul { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.maillage a { text-decoration-color: var(--cedre); text-underline-offset: 5px; }

/* --- Bandeau d'appel : marine plein, en contrepoint du fond clair --- */

.bande-cta { padding-block: clamp(3rem, 7vw, 5rem); background: var(--cedre); color: #fff; text-align: center; }
.bande-cta h2 { color: #fff; margin-bottom: 0.4em; }
.bande-cta p { max-width: 42rem; margin-inline: auto; color: #cfe4dc; }

/* --- Pied de page --- */

.pied { padding-block: var(--rythme) 2rem; background: var(--creme-fonce); border-top: 1px solid var(--trait); }
.pied__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
@media (max-width: 47.99em) { .pied__grille { grid-template-columns: 1fr; } }

.pied__marque { font-family: var(--titre); font-size: 1.25rem; font-weight: 600; }
.pied__titre { margin-bottom: 0.9rem; color: var(--gris); font-family: var(--texte); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.pied__texte { color: var(--gris); font-size: 0.95rem; }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: 0.5rem; }
.pied li a, .pied__texte a { color: var(--gris); text-underline-offset: 4px; }
.pied li a:hover, .pied__texte a:hover { color: var(--marine); }

.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--trait); color: var(--gris); font-size: 0.86rem; }
.pied__bas p { margin: 0; }
.pied__credit a { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Rangées symétriques : le gabarit pose le modificateur d'après le nombre
   d'éléments. Placé en fin de feuille pour l'emporter sur les composants. */
@media (min-width: 56em) {
  .rangee--2 > li { flex-basis: calc((100% - var(--ecart)) / 2); max-width: none; }
  .rangee--3 > li { flex-basis: calc((100% - 2 * var(--ecart)) / 3); max-width: none; }
}