/* ============================================================================
   VELA — le thème des professions où la confiance précède tout.
   ----------------------------------------------------------------------------
   Parti pris : la clarté. Beaucoup de blanc, une serif pour les titres, des
   angles arrondis, aucune bordure dure. Là où Établi affirme, Vela rassure.

   La différence avec les autres thèmes n'est pas cosmétique :
   — le bandeau est en DEUX COLONNES (texte à gauche, image à droite), pas
     en pleine largeur ;
   — les prestations sont des cartes flottantes, pas une liste à filets ;
   — les questions fréquentes sont un accordéon natif, sans JavaScript.

   ## Ce fichier ne décide plus des VALEURS

   Sept éditions habillent maintenant ce thème, du chantier au studio. Aucune
   couleur, aucun rayon, aucune épaisseur de filet n'est donc écrit en dur
   ici : tout passe par les variables posées dans `layout/theme.liquid`.
   Une règle qui écrirait `border-radius: 12px` serait un habillage qui
   refuse de changer — et l'édition « chantier » garderait des angles ronds
   sans que personne comprenne pourquoi.

   Ce qu'une variable ne sait PAS dire vit sous `[data-edition="…"]`, tout
   en bas : la forme d'une étiquette, une ombre supprimée, un filet doublé.
   Ce sont des RÈGLES, pas des valeurs.
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte, ui-sans-serif, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── Les deux gris de texte ──────────────────────────────────────────────
   Ils sont calculés depuis l'encre et non écrits : sur une édition sombre,
   un gris fixe devient soit invisible, soit un trait sale. Les taux ne sont
   pas décoratifs — en dessous de 70 %, le texte passe sous 4,5:1 sur les
   fonds crème, et l'audit de contraste le refuse.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --texte-doux: color-mix(in srgb, var(--encre) 80%, transparent);
  --texte-faible: color-mix(in srgb, var(--encre) 72%, transparent);
}

.saut { position: absolute; left: -9999px; }
.saut:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--encre); color: var(--papier); padding: 0.75rem 1rem;
  border-radius: var(--rayon);
}

.enveloppe {
  width: 90%;
  max-width: var(--largeur);
  margin-inline: auto;
}

/* La police des titres : c'est elle qu'on remarque en premier, et c'est la
   raison d'être du thème. Les corps de texte gardent la police de texte,
   parce qu'une page entière en serif se lit moins bien à l'écran — sauf
   édition « table », qui l'assume et le fait exprès. */
.titre {
  font-family: var(--f-titre);
  font-weight: 400;
  letter-spacing: var(--titre-espace, -0.015em);
  text-transform: var(--titre-casse, none);
  line-height: var(--interligne-titre);
  /* Les lignes se répartissent au lieu de se remplir. Sans cela, « Un
     accompagnement attentif et durable » laisse « Un » seul sur la
     première ligne dès que la police des titres est un peu large — et un
     mot de deux lettres suspendu au-dessus d'un titre de soixante pixels
     se voit de loin. Le calcul se fait au rendu, sans script. */
  text-wrap: balance;
  margin: 0;
}
.titre-geant { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.titre-section { font-size: clamp(1.75rem, 3vw, 2.5rem); }

.surtitre {
  display: inline-block;
  margin-bottom: 0.875rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--rayon-bouton);
  background: var(--accent-voile);
  color: var(--accent-lu);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bouton {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: var(--rayon-bouton);
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: var(--filet) solid transparent;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.bouton:hover {
  background: color-mix(in srgb, var(--accent) 85%, var(--encre));
  transform: translateY(-1px);
}

/* Le snippet `bouton` appelle `bouton-secondaire`, la feuille écrivait
   `bouton-clair` : le bouton secondaire rendait donc en bouton plein.
   Les deux noms cohabitent maintenant. */
.bouton-clair,
.bouton-secondaire {
  background: transparent;
  color: var(--encre);
  border-color: var(--voile);
}
.bouton-clair:hover,
.bouton-secondaire:hover {
  background: color-mix(in srgb, var(--encre) 8%, transparent);
  transform: none;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Presque opaque, et non à 88 % comme avant : sous une barre trop
     transparente, le texte de la section traversée reste LISIBLE derrière
     le nom du site, et l'on croit à un défaut de rendu. Le flou seul ne
     suffit pas à l'effacer — il l'étale. */
  background: color-mix(in srgb, var(--papier) 96%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--filet) solid var(--voile);
}
.entete-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1.125rem;
}

/* ── L'allure « pilule flottante » ───────────────────────────────────────
   La même rangée, détachée du bord. Le fond et le filet passent de la barre
   à la rangée elle-même : c'est ce qui fait la pilule. Le `top` non nul est
   ce qui la fait FLOTTER une fois la page défilée — collée à zéro, elle
   redeviendrait une barre à coins ronds.
   ──────────────────────────────────────────────────────────────────────── */
.entete[data-allure="pilule"] {
  top: 0.9rem;
  margin-top: 0.9rem;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}
.entete[data-allure="pilule"] .entete-inner {
  padding-inline: clamp(1rem, 2.5vw, 1.75rem);
  padding-block: 0.7rem;
  border-radius: 999px;
  border: var(--filet) solid var(--voile);
  /* OPAQUE, contrairement à la barre. La pilule passe au-dessus de tout —
     du bandeau clair, d'une bande pâle, du panneau inversé du rendez-vous.
     Translucide, elle prenait la couleur de ce qu'elle survolait et virait
     au gris sale au-dessus du panneau clair : une pilule qui change de
     teinte trois fois en défilant ne ressemble plus à un en-tête. */
  background: var(--papier);
  box-shadow: var(--ombre-carte);
}

.marque {
  font-family: var(--f-titre);
  font-size: 1.5rem;
  letter-spacing: var(--titre-espace, -0.02em);
  text-transform: var(--titre-casse, none);
  text-decoration: none;
}
.nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.9375rem;
}
.nav a { text-decoration: none; color: var(--texte-faible); }
.nav a:hover { color: var(--encre); }

@media (max-width: 52rem) {
  .nav { display: none; }
}

/* ── Bandeau en deux colonnes ────────────────────────────────────────── */

.bandeau { padding-block: calc(clamp(3rem, 7vw, 6rem) * var(--densite)); }
.bandeau-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.bandeau p {
  font-size: 1.125rem;
  max-width: 42ch;
  color: var(--texte-doux);
}
.bandeau-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.bandeau-image {
  border-radius: calc(var(--rayon) * 2);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--ombre-image);
}
.bandeau-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 56rem) {
  .bandeau-grille { grid-template-columns: 1fr; }
  .bandeau-image { aspect-ratio: 16 / 10; }
}

/* Les repères sous le bandeau : trois chiffres, sans encadré. */
.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: calc(3rem * var(--densite));
  padding-top: calc(2rem * var(--densite));
  border-top: var(--filet) solid var(--voile);
  list-style: none;
  padding-left: 0;
}
.reperes b {
  display: block;
  font-family: var(--f-titre);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}
.reperes span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--texte-faible);
}

/* ── Sections ────────────────────────────────────────────────────────── */

.section { padding-block: calc(clamp(3.5rem, 8vw, 6rem) * var(--densite)); }
.section-pale { background: var(--doux); }
.section-tete { max-width: 40rem; margin-bottom: calc(3rem * var(--densite)); }
.section-tete p {
  margin-top: 1rem;
  color: var(--texte-doux);
}
.section-centre { margin-inline: auto; text-align: center; }

/* ── Prestations en cartes ───────────────────────────────────────────── */

.cartes {
  display: grid;
  gap: calc(1.25rem * var(--densite));
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.carte {
  padding: calc(2rem * var(--densite)) 1.75rem;
  border-radius: calc(var(--rayon) * 1.5);
  background: var(--doux);
  border: var(--filet) solid var(--voile);
  /* Une ombre très douce plutôt qu'un trait franc : c'est ce qui donne au
     thème son côté posé. Les éditions dures la retirent, plus bas. */
  box-shadow: var(--ombre-carte);
}
.carte h3 {
  margin: 0 0 0.625rem;
  font-family: var(--f-titre);
  font-size: 1.3125rem;
  font-weight: 400;
  letter-spacing: var(--titre-espace, -0.01em);
  text-transform: var(--titre-casse, none);
}
.carte p { margin: 0; color: var(--texte-doux); }
.carte-prix {
  display: block;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--filet) solid var(--voile);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-lu);
}

/* ── Témoignage unique, en grand ─────────────────────────────────────── */

.temoignage { text-align: center; max-width: 48rem; margin-inline: auto; }
.temoignage blockquote {
  margin: 0;
  font-family: var(--f-titre);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.35;
}
/* La citation garde le bas-de-casse même quand les titres passent en
   capitales : trois lignes de capitales ne se lisent plus, elles se
   déchiffrent — et un témoignage qu'on déchiffre ne rassure personne. */
.temoignage blockquote { text-transform: none; letter-spacing: -0.005em; }
.temoignage cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--texte-faible);
}

/* ── Questions fréquentes ────────────────────────────────────────────── */

/* `<details>` natif : l'accordéon fonctionne sans une ligne de JavaScript,
   reste accessible au clavier, et s'imprime ouvert. */
.faq { max-width: 46rem; margin-inline: auto; }
.faq details {
  border-bottom: var(--filet) solid var(--voile);
  padding-block: 1.25rem;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.375rem;
  line-height: 1;
  color: var(--accent-lu);
}
.faq details[open] summary::after { content: "–"; }
.faq p {
  margin: 0.875rem 0 0;
  color: var(--texte-doux);
}

/* ── Rendez-vous ─────────────────────────────────────────────────────── */

/* Le bloc INVERSÉ : encre au fond, papier au texte. Sur une édition sombre
   il devient un panneau clair posé sur la nuit — l'inversion tient dans les
   deux sens, ce qui est précisément l'intérêt de ne pas écrire de couleur. */
.rdv {
  border-radius: calc(var(--rayon) * 2);
  background: var(--encre);
  color: var(--papier);
  padding: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 52rem) { .rdv { grid-template-columns: 1fr; } }
.rdv .titre { color: var(--papier); }
.rdv p { color: color-mix(in srgb, var(--papier) 82%, transparent); }
.rdv .bouton { background: var(--papier); color: var(--encre); border-color: transparent; }
.rdv .bouton:hover { background: color-mix(in srgb, var(--papier) 88%, var(--encre)); }

.champ { display: block; margin-bottom: 1rem; }
.champ span { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; }
.champ input,
.champ textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  border-radius: var(--rayon);
  border: var(--filet) solid var(--voile);
  background: var(--papier);
  color: var(--encre);
}
.champ textarea { min-height: 7rem; resize: vertical; }

/* ── Pied ────────────────────────────────────────────────────────────── */

.pied {
  border-top: var(--filet) solid var(--voile);
  padding-block: calc(3rem * var(--densite)) calc(2rem * var(--densite));
}
.pied-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.pied-liens { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.9375rem; }
.pied-liens a { text-decoration: none; color: var(--texte-doux); }
.pied-bas {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--texte-faible);
}

/* ============================================================================
   Les sections ajoutées — même grammaire : police de titre, grands blancs,
   filets réglables, angles réglables. Rien de lourd.
   ========================================================================= */

.chiffres-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: calc(2.5rem * var(--densite));
  margin: calc(3rem * var(--densite)) 0 0;
}
.chiffre dt {
  font-family: var(--f-titre);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: var(--titre-espace, -0.01em);
  color: var(--accent-lu);
}
.chiffre dd {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.etapes-liste {
  list-style: none;
  margin: calc(3rem * var(--densite)) 0 0;
  padding: 0;
  display: grid;
  gap: calc(2rem * var(--densite));
}
.etapes-liste li { display: flex; gap: 1.5rem; align-items: flex-start; }
.etape-rang {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rayon-bouton);
  border: var(--filet) solid var(--voile);
  display: grid;
  place-items: center;
  font-family: var(--f-titre);
  font-size: 1.05rem;
  color: var(--accent-lu);
}
.etapes-liste h3 {
  margin: 0.35rem 0 0.4rem;
  font-family: var(--f-titre);
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: var(--titre-casse, none);
}
.etapes-liste p { margin: 0; color: var(--texte-doux); }

.zone-liste {
  list-style: none;
  margin: calc(2.5rem * var(--densite)) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.zone-liste li {
  border: var(--filet) solid var(--voile);
  border-radius: var(--rayon-bouton);
  padding: 0.45rem 1.1rem;
  font-size: 0.92rem;
}
.zone-mention {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--texte-faible);
}

.journal-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: calc(2.5rem * var(--densite));
  margin-top: calc(3rem * var(--densite));
}
.journal-carte img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon);
}
.journal-carte h3 {
  margin: 1.1rem 0 0.4rem;
  font-family: var(--f-titre);
  font-size: 1.15rem;
  font-weight: 400;
  text-transform: var(--titre-casse, none);
}
.journal-carte a { text-decoration: none; }
.journal-carte a:hover { color: var(--accent-lu); }
.journal-carte p { margin: 0; color: var(--texte-doux); }
.journal-date {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--texte-faible);
}

.appel {
  background: color-mix(in srgb, var(--accent) 8%, var(--papier));
}
.appel-corps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: calc(4rem * var(--densite));
}
.appel-corps p { margin: 0.75rem 0 0; max-width: 48ch; color: var(--texte-doux); }

.texte-corps { max-width: 66ch; margin-top: 2rem; }
.texte-corps h3 {
  margin: 2.25rem 0 0.6rem;
  font-family: var(--f-titre);
  font-size: 1.3rem;
  font-weight: 400;
  text-transform: var(--titre-casse, none);
}
.texte-corps h3:first-child { margin-top: 0; }

.equipe-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(2.5rem * var(--densite));
  margin-top: calc(3rem * var(--densite));
}
.equipe-fiche { margin: 0; }
.equipe-fiche img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
}
.equipe-fiche figcaption { margin-top: 1rem; display: grid; gap: 0.25rem; }
.equipe-fiche strong {
  font-family: var(--f-titre);
  font-size: 1.1rem;
  font-weight: 400;
}
.equipe-fiche span {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-lu);
}
.equipe-fiche p {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

/* ============================================================================
   LES SEPT ÉDITIONS — ce qu'une variable ne sait pas dire.
   ----------------------------------------------------------------------------
   Tout ce qui est une VALEUR (couleur, rayon, filet, densité, casse, police,
   forme des boutons, allure de l'en-tête) est déjà posé par `config/theme.json`.
   Ne vivent ici que les RÈGLES : la forme de l'étiquette, une ombre retirée,
   un filet doublé du côté de l'accent.

   C'est peu de lignes, et c'est pourtant ce qui empêche les sept habillages
   de n'être que sept teintes du même dessin.
   ========================================================================= */

/* CABINET — le défaut. L'étiquette teintée, la carte posée sur son ombre.
   Rien à ajouter : c'est le thème tel qu'il a été dessiné. */

/* CHANTIER — l'aplat carré et la charpente.
   L'étiquette devient un aplat plein d'accent, les cartes prennent une
   règle épaisse à gauche, l'ombre disparaît : plus rien ne flotte. */
[data-edition="chantier"] .surtitre {
  background: var(--accent);
  color: var(--sur-accent);
  letter-spacing: 0.1em;
}
[data-edition="chantier"] .carte {
  box-shadow: none;
  border-left: calc(var(--filet) * 2) solid var(--accent);
}
[data-edition="chantier"] .bandeau-image { box-shadow: none; }
[data-edition="chantier"] .reperes { border-top-width: calc(var(--filet) * 2); }
[data-edition="chantier"] .pied { border-top-width: calc(var(--filet) * 2); }

/* ATELIER — le filet fin et l'étiquette cernée.
   L'étiquette n'est plus un aplat mais un contour : c'est le geste de
   l'établi, où l'on trace avant de couper. */
[data-edition="atelier"] .surtitre {
  background: transparent;
  border: var(--filet) solid var(--voile);
  padding: 0.28rem 0.7rem;
}
[data-edition="atelier"] .carte {
  box-shadow: none;
  background: var(--papier);
}
[data-edition="atelier"] .bandeau-image {
  box-shadow: none;
  border: var(--filet) solid var(--voile);
}

/* SALON — tout flotte. Aucun contour, une ombre longue et basse, et les
   cartes reprennent le fond de page pour que seule l'ombre les tienne. */
[data-edition="salon"] .carte {
  border-color: transparent;
  background: var(--papier);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 18px 44px rgba(0, 0, 0, 0.08);
}
[data-edition="salon"] .bandeau-image { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14); }
[data-edition="salon"] .etape-rang { border-color: var(--accent); }

/* RING — la nuit et l'aplat acide.
   Étiquette en aplat de lime, cartes sans ombre cernées d'un trait franc,
   image sans halo : dans le noir, une ombre ne dit plus rien, seul le
   filet sépare. */
[data-edition="ring"] .surtitre {
  background: var(--accent);
  color: var(--sur-accent);
  letter-spacing: 0.1em;
}
[data-edition="ring"] .carte {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--encre) 24%, transparent);
}
[data-edition="ring"] .bandeau-image,
[data-edition="ring"] .entete[data-allure="pilule"] .entete-inner { box-shadow: none; }
[data-edition="ring"] .reperes { border-top-width: calc(var(--filet) * 2); }
[data-edition="ring"] .etape-rang { border-color: var(--accent); }

/* TABLE — l'étiquette de menu.
   Ni pastille ni aplat : un mot en petites capitales souligné d'un filet
   d'accent, comme un intitulé de carte. Les cartes perdent leur contour et
   ne gardent que le fond crème. */
[data-edition="table"] .surtitre {
  background: transparent;
  border-radius: 0;
  border-bottom: calc(var(--filet) * 2) solid var(--accent);
  padding: 0 0 0.35rem;
  letter-spacing: 0.14em;
}
[data-edition="table"] .carte {
  border-color: transparent;
  box-shadow: none;
}
[data-edition="table"] .temoignage blockquote { font-style: italic; }

/* STUDIO — la nuit froide, rien qui cerne.
   Aucun contour nulle part, des fonds qui se distinguent par leur seule
   valeur, et une image sans ombre : c'est le mur d'accrochage. */
[data-edition="studio"] .carte {
  border-color: transparent;
  box-shadow: none;
}
[data-edition="studio"] .bandeau-image { box-shadow: none; }
[data-edition="studio"] .surtitre {
  background: transparent;
  border: var(--filet) solid color-mix(in srgb, var(--accent) 45%, transparent);
}
[data-edition="studio"] .entete[data-allure="pilule"] .entete-inner {
  box-shadow: none;
  background: var(--doux);
}