/* ============================================================
   Studio Névé — photographe.
   Parti pris : le site d'un photographe ne doit pas avoir de couleur. Les
   images en ont, et tout ce qui les entoure se tait. Fond anthracite, texte
   ivoire, un seul accent laiton réservé aux filets et aux surtitres.
   Titres en Archivo à chasse élargie, qui tient de l'affiche d'exposition ;
   texte en Source Sans 3, plus étroite, pour les longs paragraphes.

   Contrastes mesurés (WCAG AA, seuil 4,5:1 pour du texte) :
     ivoire #ede8e1 sur anthracite #121214 : 13,8:1
     gris   #a8a29b sur anthracite         :  6,4:1
     encre  #1b1b1e sur ivoire             : 14,6:1
     laiton #c2a878 sur anthracite         :  7,5:1
   Le laiton tombe à 2,0:1 sur ivoire : jamais de texte laiton sur fond clair.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('/src/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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 {
  --anthracite: #121214;
  --anthracite-clair: #1c1c20;
  --ivoire: #ede8e1;
  --gris: #a8a29b;
  --encre: #1b1b1e;
  --laiton: #c2a878;
  --trait: rgba(237, 232, 225, 0.16);

  --mesure: 64ch;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --rythme: clamp(4rem, 9vw, 8rem);
  /* Écart commun à toutes les rangées : les largeurs de .rangee--N s'y réfèrent,
     sinon trois cartes plus deux écarts dépassent 100 % et la troisième saute. */
  --ecart: clamp(1rem, 2.4vw, 1.75rem);

  --titre: 'Archivo', 'Helvetica Neue', Arial, sans-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(--anthracite);
  color: var(--ivoire);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -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;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-stretch: 100%; font-weight: 600; }

p { margin: 0 0 1.2em; }

.conteneur {
  width: min(100%, 76rem);
  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(--ivoire);
  color: var(--encre);
}

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

/* --- Bandeau « ce site est à vendre » --------------------------------- */
/* Volontairement aux couleurs de SiteVite et non à celles du site : il doit
   se lire comme une annonce posée par-dessus, pas comme un élément du studio. */

.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-family: var(--texte);
  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 ----------------------------------------------------------- */

.entete {
  position: relative;
  z-index: 40;
  border-bottom: 1px solid var(--trait);
}

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

.marque { text-decoration: none; line-height: 1.1; }

.marque__nom {
  display: block;
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.01em;
}

.marque__baseline {
  display: block;
  margin-top: 0.15rem;
  color: var(--gris);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav ul {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin: 0; padding: 0;
  list-style: none;
}

.nav a {
  padding-block: 0.4rem;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav a:hover, .nav a:focus-visible, .nav [aria-current='page'] { border-bottom-color: var(--laiton); }

.entete__bouton {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--trait);
  border-radius: 0.35rem;
  color: inherit;
  cursor: pointer;
}

.entete__barres, .entete__barres::before, .entete__barres::after {
  display: block;
  width: 18px; height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  content: '';
}

.entete__barres::before { transform: translateY(-6px); }
.entete__barres::after { transform: translateY(4.5px); }

@media (max-width: 55.99em) {
  .entete__bouton { display: block; }

  .nav {
    display: none;
    flex-basis: 100%;
  }

  .entete__inner { flex-wrap: wrap; }

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

/* --- Ouverture de l'accueil -------------------------------------------- */

.ouverture { position: relative; }

.ouverture__image img {
  width: 100%;
  height: clamp(20rem, 68vh, 40rem);
  object-fit: cover;
}

.ouverture__texte {
  position: relative;
  margin-top: -6rem;
  padding-bottom: var(--rythme);
}

.ouverture__texte > * { max-width: 46rem; }

.ouverture h1 {
  /* Le titre mord sur l'image : un fond plein garantit le contraste quelle que
     soit la photographie derrière. `display: inline` plus box-decoration-break
     donne un fond par ligne, au lieu d'un rectangle aussi large que la colonne. */
  display: inline;
  padding: 0.08em 0.28em 0.16em;
  background: var(--anthracite);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 1.3;
}

.ouverture h1 + * { margin-top: 1.4rem; }

.surtitre {
  margin-bottom: 0.8rem;
  color: var(--laiton);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.chapo { color: var(--gris); font-size: 1.15rem; }

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

/* --- Boutons et liens --------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  background: var(--ivoire);
  color: var(--encre);
  border: 0;
  border-radius: 0;
  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: var(--laiton); }

.bouton--clair { background: var(--anthracite); color: var(--ivoire); }
.bouton--clair:hover, .bouton--clair--focus-visible { background: var(--encre); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 600;
  text-decoration-color: var(--laiton);
  text-underline-offset: 5px;
}

.lien-fleche::after { content: '\2192'; }

/* --- Sections ----------------------------------------------------------- */

.section { padding-block: var(--rythme); }
.section--sombre { background: var(--anthracite-clair); }

/* Deux sections de même fond à la suite : un seul espace, jamais deux.
   La règle se lit sur la classe présente, jamais sur son absence. */
.section:not(.section--sombre) + .section:not(.section--sombre),
.section--sombre + .section--sombre { padding-top: 0; }

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

.entete-page { padding-block: clamp(3rem, 7vw, 6rem) var(--rythme); }

.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; }

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

/* --- Grille de photographies -------------------------------------------- */
/* Rangée en flex et non en grille : une série de deux, trois ou quatre images
   se centre d'elle-même, sans jamais laisser une photographie seule. */

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

.grille-photos > li { flex: 1 1 22rem; max-width: 34rem; }


.grille-photos figure { margin: 0; }

.grille-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.grille-photos figcaption {
  margin-top: 0.6rem;
  color: var(--gris);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* --- Cartes et étapes ---------------------------------------------------- */

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

.cartes > li, .etapes > li { flex: 1 1 18rem; max-width: 26rem; }

.carte {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--trait);
}

.carte p, .etapes p { margin-bottom: 0; color: var(--gris); }
.carte h3 a { text-decoration-color: var(--laiton); text-underline-offset: 4px; }

.etapes__num {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--laiton);
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 500;
}

/* --- Listes cochées ------------------------------------------------------ */

.coches { margin: 1.4rem 0 0; padding: 0; list-style: none; }

.coches li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  color: var(--gris);
}

.coches li::before {
  position: absolute;
  left: 0;
  color: var(--laiton);
  content: '\2014';
}

/* --- Formules de tarif --------------------------------------------------- */

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

.formules > li { flex: 1 1 17rem; max-width: 24rem; }

.formule {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--trait);
}

.formule--vedette { border-color: var(--laiton); }

.formule__prix {
  margin: 0.2rem 0 0.4rem;
  font-family: var(--titre);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
}

.formule__prix span {
  display: block;
  margin-top: 0.5rem;
  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(--laiton); 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: var(--anthracite-clair);
  border: 1px solid var(--trait);
  border-radius: 0;
  color: var(--ivoire);
  font: inherit;
}

.champ textarea { min-height: 9rem; resize: vertical; }

.mention { color: var(--gris); font-size: 0.85rem; }

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

/* --- Maillage interne ------------------------------------------------------ */

.maillage { padding-block: 0 var(--rythme); }
.maillage__titre { font-size: 1.1rem; font-stretch: 100%; }

.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(--laiton); text-underline-offset: 5px; }

/* --- Bandeau d'appel -------------------------------------------------------- */

.bande-cta {
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--ivoire);
  color: var(--encre);
  text-align: center;
}

.bande-cta h2 { margin-bottom: 0.4em; }
.bande-cta p { max-width: 42rem; margin-inline: auto; color: #4a4a4f; }

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

.pied { padding-block: var(--rythme) 2rem; 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.2rem; font-weight: 600; font-stretch: 112%; }
.pied__titre { margin-bottom: 0.9rem; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris); font-family: var(--texte); font-weight: 600; }
.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(--ivoire); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  color: var(--gris);
  font-size: 0.85rem;
}

.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.
   Une rangée en flex à largeur libre se répartit comme elle peut : quatre
   cartes dans une largeur qui en accepte trois donnent 3 + 1, et la dernière
   reste seule. Le gabarit pose donc `rangee--2` ou `rangee--3` d'après le
   nombre d'éléments, et le compte tombe juste. Vaut pour toutes les rangées
   du site : photographies, cartes, étapes, formules. */
@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; }
}