/* ============================================================
   HARMONIE — 08/10/2026
   Les 92 pages appartiennent au même Zellij que la nouvelle accueil :
   papier blanc lumineux, en-tête flottante, ouverture en arche avec son
   cadre doré, boutons en pastille, pied de page en colonnes.
   Cette feuille est chargée APRÈS zellij-ui.css : elle reprend la main sur
   l'ancien hero plein cadre sur photo, sans toucher à styles.css ni aux
   feuilles de page. Elle ne dessine rien d'autre que des habits : aucun
   texte, aucun gabarit n'a changé.
   ============================================================ */

:root {
  --paper: #fcfaf6;                /* le papier de l'accueil : blanc lumineux, jamais beige */
  --h-pill: rgba(252, 250, 246, 0.82);
  --h-line: rgba(56, 43, 63, 0.09);
}

/* ------------------------------------------------------------
   1 · EN-TÊTE — la barre flottante de l'accueil, jamais collée au bord
   ------------------------------------------------------------ */
.site-header {
  top: 14px;
  left: 50%;
  width: min(1280px, calc(100% - 28px));
  max-width: none;
  height: 64px;
  padding: 0 10px 0 24px !important;   /* styles.css (prod) impose `padding: 18px … !important` */
  border: 1px solid var(--h-line);
  border-radius: 999px;
  background: var(--h-pill);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 40px -28px rgba(56, 43, 63, 0.4);
  translate: -50% 0;
  transition: translate 0.8s var(--ease), background 0.5s var(--ease);
}

.site-header.defile {
  background: rgba(252, 250, 246, 0.92);
  box-shadow: 0 18px 40px -28px rgba(56, 43, 63, 0.4);
}

/* Elle se retire quand on descend, revient quand on remonte ; jamais pendant la navigation au clavier. */
.site-header.est-cache:not(:focus-within) {
  translate: -50% -170%;
}

.site-header .brand img {
  height: 30px;
  width: auto;
}

.site-header .brand .l-color {
  opacity: 1 !important;
}

.site-header .brand .l-white {
  display: none !important;
}

.site-header:not(.defile) .site-nav a,
.site-header .site-nav a {
  color: var(--ink) !important;
  text-shadow: none;
}

.site-header:not(.defile) .site-nav a:hover,
.site-header:not(.defile) .site-nav a:focus-visible,
.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible {
  color: var(--bordeaux) !important;
  border-bottom-color: var(--bordeaux);
}

.site-header:not(.defile) .site-nav a[aria-current="page"],
.site-header .site-nav a[aria-current="page"] {
  color: var(--ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.42em;
  text-decoration-color: var(--bordeaux);
}

.site-header:not(.defile) .menu-toggle,
.site-header .menu-toggle {
  color: var(--ink);
  text-shadow: none;
}

.site-header:not(.defile) .nav-search-trigger,
.site-header:not(.defile) .lang-switch {
  color: var(--bordeaux-dark) !important;
  text-shadow: none;
}

.site-header:not(.defile) .nav-search-trigger:hover,
.site-header:not(.defile) .nav-search-trigger:focus-visible,
.site-header:not(.defile) .lang-switch:hover,
.site-header:not(.defile) .lang-switch:focus-visible {
  color: var(--olive) !important;
}

.site-header .header-cta {
  min-height: 44px;
  padding: 0 22px;
  font-size: 0.85rem;
}

@media (max-width: 1199px) {
  .site-header .brand img {
    height: 28px;
  }
}

/* Entre 1200 et 1279 px la barre n'a pas la place de tout porter : menu complet, comme sur téléphone. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }

  .site-nav,
  .header-cta {
    display: none;
  }
}

/* ------------------------------------------------------------
   2 · OUVERTURE — texte à gauche, la photo de la page dans une arche à droite.
   L'image reste celle de la page (`--hero-img`, `--hero-position`) : seul le cadre change.
   ------------------------------------------------------------ */
.page-hero,
.page-hero.blog-page,
.page-hero.blog-page.ressources-hero,
.page-hero.contenus-hero,
.page-hero.studio-hero,
.page-hero.portfolio-hero,
.page-hero.admin-hero,
.page-hero.kit-sales-hero,
.page-hero.ressources-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(24px, 5vw, 84px);
  min-height: 0;
  padding: calc(14px + 64px + clamp(34px, 7vh, 84px))
    max(clamp(20px, 4vw, 56px), calc((100% - var(--wrap)) / 2)) clamp(38px, 7vh, 80px);
  overflow: clip;
  background: var(--paper);
  color: var(--ink);
}

.page-hero::before {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 0 0;
  background-color: var(--wash, #edefe6);
  background-image: var(--hero-img, url("/assets/hero-kit-fondatrice-clean.jpg"));
  background-position: var(--hero-position, center);
  background-size: cover;
  outline: 1px solid var(--gold);
  outline-offset: 9px;
  transform: none;
  transition: none;
}

.page-hero::after,
.scrollcue {
  display: none;
}

.page-hero-inner {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  margin: 0;
  color: var(--ink);
}

.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-soft);
  text-shadow: none;
}

.page-hero .eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
}

.page-hero h1 {
  max-width: 17ch;
  margin-top: 20px;
  color: var(--plum);
  font-size: clamp(2.5rem, 5vw, 4.7rem);
  font-weight: 440;
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: none;
}

.page-hero h1 em {
  color: var(--bordeaux);
  font-style: italic;
  font-weight: 400;
}

.page-hero p:not(.eyebrow) {
  max-width: 48ch;
  margin-top: 24px;
  color: var(--ink-soft);
  text-shadow: none;
}

.page-hero p a {
  color: var(--bordeaux);
}

.page-hero .breadcrumb,
.page-hero .article-breadcrumb,
.breadcrumb,
.article-breadcrumb {
  top: calc(14px + 64px + 14px);
  color: var(--ink-soft);
  text-shadow: none;
}

.breadcrumb a,
.article-breadcrumb a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.22em;
}

/* Quand un fil d'Ariane est posé sur le hero, le texte descend d'une ligne. */
.page-hero:has(.breadcrumb, .article-breadcrumb) {
  padding-top: calc(14px + 64px + clamp(58px, 9vh, 104px));
}

@media (max-width: 900px) {
  .page-hero,
  .page-hero.blog-page,
  .page-hero.blog-page.ressources-hero,
  .page-hero.contenus-hero,
  .page-hero.studio-hero,
  .page-hero.portfolio-hero,
  .page-hero.admin-hero,
  .page-hero.kit-sales-hero,
  .page-hero.ressources-hero {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
    min-height: 0;
    padding: calc(14px + 64px + 30px) clamp(20px, 5vw, 36px) 36px;
  }

  .page-hero::before {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(66%, 280px);
    background-position: var(--hero-position-mobile, var(--hero-position, center));
  }

  .page-hero-inner {
    grid-row: 1;
  }

  .page-hero h1 {
    font-size: clamp(2.3rem, 9.4vw, 3.3rem);
  }

  .page-hero:has(.breadcrumb, .article-breadcrumb) {
    padding-top: calc(14px + 64px + 62px);
  }
}

/* ------------------------------------------------------------
   3 · BOUTONS — la pastille bordeaux de l'accueil, avec sa flèche dans l'ouverture
   ------------------------------------------------------------ */
.button {
  border-radius: 999px;
}

.button.primary {
  border-color: var(--bordeaux);
  background: var(--bordeaux);
  color: var(--paper);
  letter-spacing: 0.01em;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.button.primary:hover,
.button.primary:focus-visible {
  border-color: #6a2436;
  background: #6a2436;
}

.button.primary:active {
  transform: scale(0.98);
}

.page-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(18px, 2.4vw, 32px);
  margin-top: clamp(24px, 3.6vh, 38px);
}

.page-hero .hero-actions .button.primary {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 8px 8px 28px;
}

.page-hero .hero-actions .button.primary::after {
  content: "↗";
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(252, 250, 246, 0.16);
  font-size: 1.05rem;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease);
}

.page-hero .hero-actions .button.primary:hover::after {
  transform: translate(3px, -2px) scale(1.06);
  background: rgba(252, 250, 246, 0.26);
}

/* Le second bouton du hero devient un lien souligné, comme sur l'accueil. */
.page-hero .hero-actions .button.secondary {
  min-height: 0;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-weight: 500;
}

.page-hero .hero-actions .button.secondary:hover,
.page-hero .hero-actions .button.secondary:focus-visible {
  background: none;
  color: var(--bordeaux);
}

/* ------------------------------------------------------------
   4 · PIED DE PAGE — trois colonnes, le même sur l'accueil et sur toutes les pages
   (identité, plan du site, réseaux ; mentions en dessous).
   ------------------------------------------------------------ */
/* FOOTER:DEBUT */
footer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(120px, auto);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(28px, 5vw, 80px);
  align-items: start;
  justify-items: start;
  padding: clamp(56px, 8vh, 88px) max(clamp(20px, 4vw, 56px), calc((100% - var(--wrap, 1360px)) / 2)) clamp(30px, 4vh, 44px);
  background: var(--plum-deep, #221420);
  color: #cdbbc9;
  text-align: left;
}

footer a {
  color: #cdbbc9;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.3s var(--ease, ease);
}

footer a:hover,
footer a:focus-visible,
footer .footer-links a:hover,
footer .social-links a:hover,
footer .footer-links a:focus-visible,
footer .social-links a:focus-visible {
  color: #ffffff;
}

footer > img {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  height: 34px;
  width: auto;
  margin: 0;
}

footer > p {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  max-width: 30ch;
  margin: 18px 0 0;
  color: #e7ddef;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-style: italic;
  line-height: 1.4;
}

footer .footer-contact {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin-top: 18px;
  color: #e7ddef;
  text-decoration: underline;
  text-decoration-color: rgba(231, 221, 239, 0.46);
  text-underline-offset: 4px;
}

footer > .footer-links:not(.footer-legal) {
  grid-column: 2;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  gap: 4px 28px;
  margin: 0;
}

footer > .social-links {
  grid-column: 3;
  grid-row: 1 / 4;
  display: grid;
  gap: 4px;
  justify-content: start;
  margin: 0;
}

footer .footer-links a,
footer .social-links a {
  color: #cdbbc9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 400;
}

footer .social-links svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  opacity: 0.92;
}

footer .footer-legal {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: stretch;
  width: auto;
  max-width: none;
  margin-inline: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px clamp(16px, 2.4vw, 30px);
  margin-top: clamp(30px, 4vh, 46px);
  padding-top: 20px;
  border-top: 1px solid rgba(217, 169, 180, 0.16);
}

footer .footer-legal a {
  min-height: 30px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  opacity: 0.78;
}

@media (max-width: 860px) {
  footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 28px;
  }

  footer > img,
  footer > p,
  footer .footer-contact {
    grid-column: 1 / -1;
  }

  footer > img { grid-row: 1; }
  footer > p { grid-row: 2; margin-top: 0; }
  footer .footer-contact { grid-row: 3; margin-top: 0; }
  footer > .footer-links:not(.footer-legal) { grid-column: 1; grid-row: 4; grid-template-columns: 1fr; }
  footer > .social-links { grid-column: 2; grid-row: 4; }
  footer .footer-legal { grid-row: 5; margin-top: 4px; }
  footer { padding-bottom: 88px; }   /* le bouton « remonter » flotte en bas à droite : il ne couvre plus un lien */
}
/* au doigt, chaque lien du pied fait au moins 44 px de haut (le dessin ne change pas beaucoup, la zone qui répond si) */
@media (max-width: 860px), (pointer: coarse) {
  footer .footer-links a, footer .social-links a, footer .footer-legal a { min-height: 44px; }
  footer .footer-contact { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
}
/* FOOTER:FIN */

/* ------------------------------------------------------------
   5 · TITRES — la graisse de l'accueil (420 à 440) sur papier clair ; les articles gardent leur graisse de lecture
   ------------------------------------------------------------ */
main :is(section, .section) :is(h2, h3),
.studio-steps strong,
.studio-offer__price strong,
.portfolio-list h3 {
  font-weight: 440;
  letter-spacing: -0.025em;
}

main :is(section, .section) :is(h2, h3) em {
  color: var(--bordeaux);
  font-style: italic;
  font-weight: 400;
}

/* ------------------------------------------------------------
   6 · DÉTAILS COMMUNS
   ------------------------------------------------------------ */
/* L'eyebrow des sections garde le trait doré de l'accueil. */
.section-heading .eyebrow,
.section .eyebrow {
  letter-spacing: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* ------------------------------------------------------------
   7 · INDEX DES RESSOURCES — le parcours en six étapes, sur papier clair
   (il était écrit en blanc sur photo)
   ------------------------------------------------------------ */
.res-parcours {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  margin: 28px 0 0;
}

.res-parcours li {
  width: auto;
  max-width: none;
}

.res-parcours a {
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.res-parcours a:hover,
.res-parcours a:focus-visible {
  border-color: var(--c);
  background: #fff;
}

.res-parcours__num {
  color: var(--ink-soft);
}

.res-parcours__num::before {
  box-shadow: none;
}

.res-parcours__nom {
  color: var(--ink);
  font-weight: 440;
}

/* ------------------------------------------------------------
   8 · LISIBILITÉ — mesures axe-core du 09/10/2026, pages qui n'étaient pas encore passées au crible
   (l'accent de rubrique, sauge ou doré, ne tient pas le 4,5:1 en petit texte sur le papier clair)
   ------------------------------------------------------------ */
.fiche-liens a,
.gratuit-suite a {
  color: color-mix(in srgb, var(--accent, #7b2c3f) 55%, #241722);
}

.glossary-term-no {
  color: #8f7f87;
}

/* ------------------------------------------------------------
   9 · CASES DE CONSENTEMENT dans les formulaires de la fiche (avis) : case à gauche, texte à côté, texte courant
   ------------------------------------------------------------ */
.fiche-avis-form .fiche-avis-newsletter,
.fiche-avis-newsletter {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 2px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
}

.fiche-avis-form .fiche-avis-newsletter input,
.fiche-avis-newsletter input {
  flex: none;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  margin-top: 2px;
  accent-color: var(--bordeaux);
}

/* Les mêmes graisses que la barre de l'accueil */
.site-header .menu-toggle,
.site-header .header-cta {
  font-weight: 500;
}

.rub-entete {
  max-width: var(--wrap);
  margin: clamp(26px, 4vw, 44px) auto 0;
}

/* ------------------------------------------------------------
   10 · FORMULAIRES : une seule finition pour tous
   Constat du test d'envoi du 09/10 : la zone de texte du contact s'affichait en police
   à chasse fixe (le navigateur ne la fait pas hériter) et la case de consentement
   restait à 13 px, trop petite à côté d'un texte de 15 px.
   ------------------------------------------------------------ */
input,
textarea,
select {
  font-family: inherit;
}

.newsletter-form textarea,
.fiche-avis-form textarea {
  font: inherit;
  line-height: 1.5;
}

.consent-line {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  line-height: 1.5;
}

.consent-line input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--bordeaux);
}

.form-message {
  font-weight: 560;
}

.newsletter-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(68, 19, 29, 0.22);
  border-radius: 6px;
  color: var(--ink);
}

.newsletter-form textarea:focus,
.newsletter-form input:focus {
  border-color: var(--bordeaux);
  outline: 3px solid rgba(110, 36, 50, 0.12);
}

.field-label {
  font-weight: 600;
}

/* pages juridiques : le titre ne doit jamais dépasser l'écran (un mot de 15 lettres à 64 px débordait de 100 px sur téléphone et faisait glisser toute la page) */
.legal-page h1 { font-size: clamp(2.1rem, 9.2vw, 4rem); line-height: 1.04; overflow-wrap: break-word; hyphens: auto; }

/* cibles tactiles : la zone qui réagit au doigt dépasse le dessin (44 px au moins), sans rien déplacer */
.brand, .lang-switch, main a.button.secondary { position: relative; }
.brand::after, .lang-switch::after, main a.button.secondary::after { content: ""; position: absolute; inset: -9px -6px; }