/* ============================================================
   Agence Perret & Vallon — agence immobilière.
   Parti pris inverse du site de photographe : fond clair, titres en serif,
   beaucoup de blanc. Une agence vend de la confiance et des chiffres, pas une
   ambiance. Marine pour la structure, cèdre pour ce sur quoi on clique, et
   rien d'autre : un site d'agence encombré de couleurs se lit comme un tract.

   Contrastes mesurés (WCAG AA, seuil 4,5:1 pour du texte) :
     marine #16314f sur crème #f7f5f1 : 12,2:1
     gris   #5b6670 sur crème         :  5,4:1
     cèdre  #2a6052 sur crème         :  6,7:1
     crème sur marine                 : 12,2:1
     crème sur cèdre                  :  6,7:1
   Le cèdre ne tombe qu'à 1,8:1 sur le marine : sur fond sombre, les accents
   passent en crème, jamais en cèdre.
   ============================================================ */

@font-face {
  font-family: 'Spectral';
  src: url('/src/fonts/Spectral-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('/src/fonts/Spectral-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('/src/fonts/SourceSans3-Variable.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --creme: #f7f5f1;
  --creme-fonce: #efebe4;
  --marine: #16314f;
  --marine-clair: #22456b;
  --cedre: #2a6052;
  --gris: #5b6670;
  --trait: #e2ddd4;

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

  --titre: 'Spectral', Georgia, 'Times New Roman', serif;
  --texte: 'Source Sans 3', 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.0625rem;
  line-height: 1.68;
  -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: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  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.1rem, 1.9vw, 1.3rem); font-weight: 600; font-family: var(--texte); }

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(--marine); color: var(--creme); }

.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: #b6c2d1; font-size: 0.7rem; 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(247,245,241,0.35); 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(--marine); color: var(--creme); }

.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(--creme); }

.surtitre { margin-bottom: 0.9rem; color: #9fb4cb; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.chapo { color: #cdd8e4; font-size: 1.12rem; }
.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.25rem;
  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: #1f4e42; }
.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(--creme); }

/* --- 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(--marine); color: var(--creme); }
.entete-page h1 { color: var(--creme); }
.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.25rem; }

@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.25rem; }
.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.25rem; }
.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.25rem; }
.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: 48px; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--trait); border-radius: 0.25rem; 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(--marine); color: var(--creme); text-align: center; }
.bande-cta h2 { color: var(--creme); margin-bottom: 0.4em; }
.bande-cta p { max-width: 42rem; margin-inline: auto; color: #cdd8e4; }

/* --- 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; }
}