/* Conteneurs */

.conteneur {
  width: min(100% - 2.5rem, var(--conteneur));
  margin-inline: auto;
}

/* Le cadre .conteneur--etroit garde la même largeur et le même bord gauche
   que .conteneur : c'est la prose qu'il contient, pas le cadre lui-même,
   qui est resserrée à une mesure confortable. Sans cela, un bloc de texte
   étroit et un bloc de cartes large se retrouvent centrés chacun sur sa
   propre largeur, et leurs titres décrochent l'un de l'autre au lieu de
   partager un bord gauche unique. */
.conteneur--etroit > * {
  max-width: 48rem;
}

/* Seul le bloc d'appel à l'action est centré par choix éditorial : ses
   enfants (titre, texte, boutons) gardent donc leur marge automatique. */
.bloc--cta .conteneur--etroit > * {
  margin-inline: auto;
}

/* Grain et arches : les deux motifs de décor de la maquette, en classes
   réutilisables pour que les blocs (chantier B) les posent sans dupliquer
   la règle. Le grain est un ::before, le contenu du bloc doit donc passer
   au premier plan : tout enfant direct d'un porteur de .grain est relevé
   au-dessus de la texture. */

.grain {
  position: relative;
}

.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: var(--grain);
}

.grain > * {
  position: relative;
  z-index: 2;
}

.arche {
  border-radius: var(--arche);
  overflow: hidden;
}

.arche--petite {
  border-radius: var(--arche-petite);
  overflow: hidden;
}

/* En-tête

   Fond plein dès le départ (var(--creme)), filet bas discret : c'est l'état
   de la maquette. Le défilement n'ajoute qu'une ombre portée, posée par
   nav.js via .entete--defile sur la mesure du scroll ; rien ici ne dépend
   de JavaScript pour rester lisible. */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--creme);
  border-bottom: 1px solid var(--bord);
  transition: box-shadow 0.2s ease;
}

.entete--defile {
  box-shadow: var(--ombre-douce);
}

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

.entete__marque {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  text-decoration: none;
  color: var(--texte);
  line-height: 1.2;
}

.entete__nom {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

/* Petites capitales espacées, comme les surtitres de la maquette.
   --libelle mesure 5,26:1 sur --creme : lisible même à cette taille. */
.entete__metier {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--libelle);
}

.entete__bascule {
  position: relative;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.entete__burger,
.entete__burger::before,
.entete__burger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--texte);
  border-radius: 2px;
}

.entete__burger {
  position: relative;
}

.entete__burger::before,
.entete__burger::after {
  content: '';
  position: absolute;
  left: 0;
}

.entete__burger::before { top: -7px; }
.entete__burger::after { top: 7px; }

/* Menu sous 900 pixels : liste simple par défaut, panneau latéral quand le
   script a pu se brancher (classe .js-nav posée par nav.js une fois les
   éléments trouvés et les évènements attachés). Sans JavaScript, aucun
   élément du menu ne doit dépendre d'un bouton qui ne fera jamais rien. */

@media (max-width: 899.98px) {
  .entete__interieur {
    flex-wrap: wrap;
  }

  .entete__bascule {
    display: none;
  }

  .menu {
    order: 3;
    flex-basis: 100%;
  }

  .menu__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .menu__lien {
    display: flex;
    align-items: center;
    min-height: 48px;
    text-decoration: none;
    color: var(--texte);
    font-weight: 600;
  }

  .menu__item--cta {
    margin-top: 1rem;
  }

  .menu__item--cta .bouton {
    width: 100%;
  }

  /* Avec JavaScript : le menu devient un panneau latéral escamotable, sorti
     de l'ordre de tabulation quand il est fermé (visibility, pas seulement
     la translation) pour ne jamais piéger le focus clavier hors écran.
     Le panneau reprend le vert profond et le grain de la maquette : c'est
     le seul endroit où la navigation elle-même porte la texture. */

  html.js-nav .entete__bascule {
    display: inline-flex;
  }

  html.js-nav .menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 24;
    width: min(85vw, 22rem);
    height: 100vh;
    overflow-y: auto;
    background: var(--vert);
    box-shadow: var(--ombre-douce);
    padding: 5rem 1.75rem 2rem;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  html.js-nav body.menu-ouvert .menu {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }

  html.js-nav body.menu-ouvert {
    overflow: hidden;
  }

  /* Sur le fond vert du panneau, les liens reprennent le serif de la
     maquette, en crème (8,65:1). Une bordure basse translucide sépare les
     entrées, comme dans la maquette. */
  html.js-nav .menu__lien {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--creme);
    border-bottom: 1px solid rgb(250 246 240 / 15%);
  }

  html.js-nav .menu__item:last-of-type .menu__lien {
    border-bottom: none;
  }

  /* Ordre visuel du panneau : les pages, puis l'appel à l'action, puis le
     téléphone en dernier, comme dans la maquette (le document reste dans
     l'ordre pages/téléphone/action pour que la barre d'action mobile et le
     survol clavier terminent naturellement sur « Prendre rendez-vous »). */
  html.js-nav .menu__liste {
    display: flex;
    flex-direction: column;
  }

  html.js-nav .menu__item--cta {
    order: 2;
  }

  /* Le bouton principal est vert, le panneau escamotable aussi : posé
     dessus, il disparaissait. Il reprend l'ocre de la barre d'action du bas,
     avec laquelle il fait la paire. */
  html.js-nav .menu__item--cta .bouton--principal {
    background: var(--accent-fonce);
    border-color: var(--accent-fonce);
    color: var(--creme);
  }

  /* Le bouton de bascule se change en croix quand le panneau est ouvert :
     purement une lecture de l'état déjà posé par nav.js (aria-expanded),
     aucun script supplémentaire n'est nécessaire. */
  html.js-nav .entete__bascule[aria-expanded="true"] .entete__burger {
    background: transparent;
  }

  html.js-nav .entete__bascule[aria-expanded="true"] .entete__burger::before,
  html.js-nav .entete__bascule[aria-expanded="true"] .entete__burger::after {
    top: 0;
    background: var(--creme);
  }

  html.js-nav .entete__bascule[aria-expanded="true"] .entete__burger::before {
    transform: rotate(45deg);
  }

  html.js-nav .entete__bascule[aria-expanded="true"] .entete__burger::after {
    transform: rotate(-45deg);
  }
}

/* Grand écran : le menu est visible en permanence, sans dépendre du script */

@media (min-width: 900px) {
  .entete__bascule {
    display: none;
  }

  .menu {
    position: static;
    height: auto;
    width: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    padding: 0;
    transform: none;
  }

  .menu__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 1.25rem;
  }

  .menu__item,
  .menu__lien {
    white-space: nowrap;
  }

  .menu__lien {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    text-decoration: none;
    color: var(--texte);
    font-weight: 400;
    font-size: 0.875rem;
  }

  /* Soulignement animé (le « .ul » de la maquette) : un filet de 1px qui
     grandit de zéro au survol et au focus clavier. --accent est autorisé
     ici, c'est un filet décoratif, jamais du texte. */
  .menu__lien::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--accent);
    transition: width 320ms ease;
  }

  .menu__lien:hover::after,
  .menu__lien:focus-visible::after {
    width: 100%;
  }

  /* Page courante : le filet est déjà déployé, comme dans la maquette.
     aria-current est posé par le générateur, donc l'information est aussi
     annoncée aux lecteurs d'écran et ne repose pas sur la seule couleur. */
  .menu__lien--courant::after {
    width: 100%;
  }

  .menu__lien--courant {
    color: var(--texte);
  }

  /* Le bouton d'appel à l'action se place après les entrées de navigation
     dans le document (pour rester en fin de panneau mobile), mais avant elles
     à l'écran large, comme dans la maquette. */
  .menu__item--cta {
    order: 2;
    margin-inline-start: 0.5rem;
  }

  .menu__item--cta .bouton {
    white-space: nowrap;
  }
}

.menu__lien:hover {
  color: var(--accent-fonce);
}

/* Barre d'action mobile */

@media (max-width: 899.98px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

.barre-action {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 30;
  display: flex;
  background: var(--fond);
  box-shadow: var(--ombre-douce);
  padding-bottom: env(safe-area-inset-bottom);
}

.barre-action__lien {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  text-decoration: none;
  font-weight: 600;
  color: var(--texte);
  border-top: 1px solid var(--fond-2);
}

.barre-action__lien--principal {
  background: var(--accent-fonce);
  color: var(--fond);
  border-top-color: var(--accent-fonce);
}

@media (min-width: 900px) {
  .barre-action {
    display: none;
  }
}

/* Boutons : surcouche de la maquette sur .bouton/.bouton--principal/
   .bouton--secondaire (posés dans base.css, hors du périmètre de ce
   chantier). L'ordre de chargement des feuilles (base.css puis
   layout.css) suffit à faire gagner ces règles sans !important.

   La maquette remplit son bouton principal de --accent (#B26B4A) avec un
   texte clair : la paire ne mesure que 3,83:1, sous le seuil de 4,5:1
   pour un texte de cette taille. C'est la même erreur que --accent en
   texte direct, déjà corrigée dans les jetons — mais ici côté fond. Les
   deux remplissages qui se voient ailleurs dans la maquette (vert plein,
   texte crème, 8,65:1) sont donc repris pour .bouton--principal, et
   --accent redescend à son rôle de filet pour le bouton contouré. */

.bouton {
  border-radius: var(--rayon-net);
  letter-spacing: 0.02em;
}

.bouton--principal {
  background: var(--vert);
  color: var(--creme);
}

.bouton--principal:hover {
  background: var(--texte);
  color: var(--creme);
}

.bouton--secondaire {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-fonce);
}

.bouton--secondaire:hover {
  background: var(--peche);
  color: var(--accent-fonce);
  border-color: var(--accent);
}

/* Pied de page

   La maquette pose ce bloc sur un quasi-noir, #2A2724 : exactement --texte,
   déjà un jeton (défini pour le texte, jamais encore posé comme fond).
   Il est repris tel quel ici plutôt que défini une deuxième fois : pas de
   nouveau jeton, et le pied retrouve la teinte de la maquette au lieu du
   vert qui y avait été substitué par erreur. */

.pied {
  padding-block: var(--rythme);
  background: var(--texte);
  color: var(--creme);
}

.pied a {
  color: var(--creme);
}

.pied a:hover {
  color: var(--peche);
}

.pied__interieur {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}

.pied__marque {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.375rem;
  margin: 0 0 0.5rem;
}

.pied__description {
  color: var(--sable);
  font-size: 0.9375rem;
  max-width: 26rem;
}

/* Petites capitales espacées, comme les surtitres de la maquette.
   --sable mesure 7,16:1 sur --vert : net, même en 11px. */
.pied__titre {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sable);
  margin: 0 0 0.75rem;
}

.pied__liens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.9375rem;
}

.pied__colonne address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(250 246 240 / 15%);
  font-size: 0.8125rem;
  color: var(--sable);
}

.pied__bas p {
  margin: 0;
}

.pied__bas__legal {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pied__avertissement {
  max-width: 32rem;
}

@media (max-width: 900px) {
  .pied__interieur {
    grid-template-columns: 1fr 1fr;
  }

  .pied__colonne--identite {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .pied__interieur {
    grid-template-columns: 1fr;
  }
}



/* Le fil de la lignée
   ───────────────────
   Un filet continu descend dans la marge gauche des pages et s'interrompt
   d'un nœud au niveau de chaque section. C'est la seule audace graphique du
   site, et elle dit quelque chose de vrai sur le métier d'Aline : le travail
   émotionnel transgénérationnel consiste à remonter un fil de génération en
   génération, à repérer les nœuds et à défaire ceux qui ne nous appartiennent
   pas. Les fioritures qu'il remplace n'étaient que de l'ornement.

   Chaque section porte son propre segment sur toute sa hauteur : mis bout à
   bout, ils forment un fil ininterrompu de l'en-tête au pied de page, sans
   qu'aucun élément n'ait à connaître la hauteur des autres. */

:root {
  --fil: color-mix(in srgb, var(--accent) 55%, transparent);
  --fil-noeud: var(--accent);
}

.bloc,
.hero {
  position: relative;
}

/* La marge n'existe qu'au-delà de la largeur du conteneur : sous ce seuil,
   le fil viendrait se poser sur le texte. Il disparaît alors entièrement,
   ce qu'un ornement peut se permettre. */
@media (min-width: 82rem) {
  .bloc::before,
  .hero::before {
    content: "";
    position: absolute;
    left: calc(50% - var(--conteneur) / 2 - 2rem);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--fil);
    pointer-events: none;
  }

  /* Le nœud se pose à hauteur du premier titre de la section, c'est-à-dire
     au bord haut du contenu, une fois le rythme vertical franchi. */
  .bloc::after,
  .hero::after {
    content: "";
    position: absolute;
    left: calc(50% - var(--conteneur) / 2 - 2rem - 3px);
    top: calc(var(--rythme) + 0.55em);
    width: 7px;
    height: 7px;
    border: 1px solid var(--fil-noeud);
    border-radius: 50%;
    background: var(--fond);
    pointer-events: none;
  }

  /* Sur les sections alternées et sur les fonds soutenus, le nœud reprend le
     fond qu'il perce, sans quoi il apparaîtrait posé sur une pastille claire. */
  .bloc:nth-of-type(even)::after {
    background: var(--fond-2);
  }

  .bloc--citation::after,
  .bloc--texte-vert::after {
    background: var(--vert);
  }

  /* Le fil traverse aussi les sections sombres : il y passe en clair, à la
     même discrétion. */
  .bloc--citation,
  .bloc--texte-vert {
    --fil: color-mix(in srgb, var(--sable) 40%, transparent);
    --fil-noeud: var(--sable);
  }
}

/* En-tête posé sur l'ouverture plein écran
   ───────────────────────────────────────
   Quand la page ouvre sur une photographie pleine hauteur, l'en-tête se pose
   dessus, transparent, et reprend son fond crème dès les premiers pixels de
   défilement — nav.js pose déjà .entete--defile à 40 px. Le sélecteur :has()
   évite d'avoir à marquer la page : c'est la présence du bandeau plein écran
   qui décide, et rien d'autre.

   Repli : un navigateur sans :has() garde l'en-tête crème opaque au-dessus
   de la photographie. Moins beau, parfaitement utilisable. */

body:has(.hero--plein) .entete {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom-color: transparent;
}

body:has(.hero--plein) .entete:not(.entete--defile) .entete__nom,
body:has(.hero--plein) .entete:not(.entete--defile) .entete__metier,
body:has(.hero--plein) .entete:not(.entete--defile) .menu__lien {
  color: var(--creme);
}

body:has(.hero--plein) .entete--defile {
  background: var(--creme);
  border-bottom-color: var(--bord);
}

/* Sans défilement, l'en-tête n'a pas d'ombre : sur la photographie, elle
   dessinerait une barre là où l'on veut justement ne rien voir. */
body:has(.hero--plein) .entete:not(.entete--defile) {
  box-shadow: none;
}