/* LES PAGES INTÉRIEURES (scripts/pages.mjs) : La maison Adélice, Témoignages, Nous joindre, Suivre ma commande,
   Prendre rendez-vous, la page introuvable, Nos saveurs, puis les documents (scripts/textes.mjs). Noir et blanc,
   filets var(--line). Les h2 suivent l'échelle d'identite.css : aucun ne dépasse le h1 de la page. */
/* Le haut des pages intérieures, près du menu (demande d'Hakim, 10 oct.). */
.inside-hero,
.document-hero {
  max-width: 980px;
  padding-top: 28px;
  padding-bottom: 36px;
  text-align: center;
}

.inside-hero h1,
.document-hero h1 {
  margin: 12px auto 18px;
  font-size: clamp(3rem, 4.8vw, 4.85rem);
  line-height: .98;
  text-wrap: balance;
}

.inside-hero > p:not(.eyebrow),
.document-hero > p:not(.eyebrow) {
  max-width: 720px;
  margin-inline: auto;
  color: var(--muted);
  line-height: 1.75;
  text-wrap: balance;
}

.inside-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 476px);
  gap: 12px;
  margin-top: 27px;
}

.inside-hero .inside-actions {
  margin-inline: auto;
}

.inside-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding-inline: 12px;
}

/* La maison */
.about-heading {
  padding-bottom: 24px;
}

.about-story {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(46px, 7vw, 92px);
  align-items: center;
  max-width: 1160px;
  padding-bottom: 76px;
}

.about-portrait {
  margin: 0;
}

/* Le portrait d'Amal, entier : il garde sa forme (4/3). */
.about-portrait img {
  width: 100%;
  height: auto;
}

.about-portrait figcaption {
  padding-top: 11px;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.about-story-copy h2 {
  max-width: 520px;
  margin: 16px 0 22px;
}

.about-story-copy > p:not(.eyebrow):not(.about-signature) {
  margin-bottom: 15px;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.78;
}

/* L'OUVERTURE DE LA MAISON ADÉLICE, « Mon histoire » (choix A d'Hakim) : comme « Mon approche », le surtitre, le titre
   et le portrait d'Amal entier à gauche ; sa lettre à droite, qui commence à la hauteur du surtitre (dessous au
   téléphone), avec sa signature. */
.maison-ouverture {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1160px;
  padding: 36px 0 48px;
}

.maison-ouverture-tete h2 {
  margin: 17px 0 24px;
}

@media (min-width: 900px) {
  .maison-ouverture {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 88px);
  }
}

.maison-lettre {
  min-width: 0;
  max-width: 560px;
}

.maison-lettre p {
  margin: 0 0 16px;
  color: #222;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.maison-lettre .maison-lettre-fin {
  margin-top: 28px;
  color: #000;
}

/* La signature d'Amal, à la main : son prénom en italique, dans la police des titres. */
.maison-lettre .maison-lettre-signature {
  margin: 18px 0 0;
}

.maison-lettre-signature span {
  display: block;
  color: #000;
  font: italic 400 2.4rem/1 var(--serif);
}

.maison-lettre-signature small {
  display: block;
  margin-top: 8px;
  color: var(--doux);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-signature {
  margin-top: 24px;
  color: var(--cocoa);
  font: 400 1rem/1.7 var(--sans);
}

.about-signature span {
  display: inline-block;
  margin-top: 5px;
  font-size: 1.65rem;
}

/* Beau à regarder… : en bandeau noir pleine largeur (comme « Derrière les créations » à l'accueil), le titre à gauche,
   les trois engagements à droite entre des filets discrets. */
.about-values {
  padding: 48px 0 52px;
  background: #000;
  color: #fff;
}

.about-values .eyebrow {
  color: #c9c9c9;
}

.about-values h2,
.about-values h3 {
  color: #fff;
}

.about-values > .content-width {
  display: grid;
  grid-template-columns: .85fr 1.65fr;
  gap: clamp(52px, 8vw, 112px);
  max-width: 1160px;
}

.about-values-heading h2 {
  margin-top: 17px;
}

.about-values-grid {
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.about-values-grid article {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 18px;
  padding: 26px 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.about-values-grid article > span {
  grid-row: 1 / 3;
  color: #9a9a9a;
  font: italic 1.35rem var(--serif);
}

.about-values-grid h3 {
  font-size: 1.8rem;
  line-height: 1.1;
}

.about-values-grid p {
  max-width: 600px;
  margin-top: 8px;
  color: #d6d6d6;
  font-size: .92rem;
  line-height: 1.67;
}

/* Sous « Le goût au cœur de la création », le bouton blanc « Découvrez les saveurs », dans la colonne du texte. */
.about-values-grid .button {
  grid-column: 2;
  justify-self: start;
  min-width: 240px;
  margin-top: 16px;
}

.about-values a:focus-visible {
  outline-color: #fff;
}

/* Le soin du détail : la vue de détail de trois gâteaux, entière (chacune garde sa forme). Au téléphone, deux par
   rangée, la troisième centrée dessous ; en trois colonnes à partir de 760 px. Le nom du gâteau mène à lui dans la
   galerie. */
.about-details {
  max-width: 1160px;
  padding: 44px 0 36px;
  text-align: center;
}

.about-details h2 {
  margin: 10px 0 28px;
}

.about-details-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 14px;
  align-items: flex-start;
}

.about-details figure {
  flex: 0 0 calc(50% - 7px);
  margin: 0;
}

.about-details img {
  width: 100%;
  height: auto;
}

/* La photo mène aussi à la page du gâteau (pour la souris ; le clavier passe par le nom). */
.about-details figure > a {
  display: block;
}

.about-details figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
}

.about-details figcaption span {
  color: var(--doux);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-details figcaption a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #000;
  font: 400 1.45rem/1.2 var(--serif);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color .15s ease;
}

.about-details figure:hover figcaption a,
.about-details figcaption a:focus-visible {
  text-decoration-color: currentColor;
}

.about-details figure > a img {
  transition: opacity .2s ease;
}

.about-details figure > a:hover img {
  opacity: .9;
}

/* Votre projet : comme « Comment se passe une commande » à l'accueil — le titre et le paragraphe centrés, puis les
   cinq temps (parcours() de scripts/parcours.mjs, en frise à partir de 1000 px, styles dans complements.css), puis le
   bouton centré. */
.about-process {
  display: flex;
  flex-direction: column;
  max-width: 1160px;
  padding: 36px 0 52px;
}

.about-process-copy {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.about-process-copy h2 {
  margin: 12px 0 16px;
}

.about-process-copy > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.75;
  text-wrap: pretty;
}

.about-process .parcours {
  margin-top: 28px;
}

.about-process > .button {
  align-self: center;
  margin-top: 32px;
}

/* L'invitation finale, comme à l'accueil (demande d'Hakim, 10 oct.) : sous le séparateur au petit gâteau, sur fond
   blanc, sans l'icône seule ni le filet. */
body[data-page=about] .closing {
  padding-bottom: 52px;
  background: #fff;
  border-top: 0;
  border-bottom: 0;
}

body[data-page=about] .closing-mark {
  display: none;
}

/* Témoignages : l'avis depuis l'espace client, puis le partage, à côté de la photo entière d'un gâteau. */
.review-espace {
  display: grid;
  gap: 16px 64px;
  align-items: center;
  max-width: 1120px;
  margin-bottom: 64px;
  padding: 32px 0;
  border-block: 1px solid var(--line);
}

.review-espace h2 {
  margin-top: 12px;
}

.review-espace p:not(.eyebrow) {
  color: var(--doux);
  line-height: 1.7;
}

.review-espace .button {
  margin-top: 18px;
}

.review-invitation {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(55px, 8vw, 105px);
  align-items: center;
  max-width: 1120px;
  padding-bottom: 72px;
}

.review-photo img {
  width: 100%;
  height: auto;
}

.review-copy h2 {
  margin: 16px 0 20px;
}

.review-copy > p:not(.eyebrow) {
  margin-bottom: 15px;
  color: var(--muted);
  line-height: 1.75;
}

.review-copy > p.review-prompts-titre {
  margin: 22px 0 4px;
  color: #000;
  font-size: .9375rem;
}

/* Les idées de témoignage : une liste à tirets. */
.review-prompts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-prompts li {
  position: relative;
  padding: 4px 0 4px 22px;
  color: var(--texte);
  font-size: .9375rem;
}

.review-prompts li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--doux);
}

/* NOUS CONTACTER (textes d'Hakim, 10 oct.) : à gauche, trois cartes blanches l'une sous l'autre selon le besoin,
   l'icône à côté du titre, chacune avec son bouton (la soumission en noir, les autres à contour, l'adresse courriel
   sur le troisième) ; à droite, le formulaire dans son cadre (dessous avant
   1000 px) ; puis le suivi d'une commande. Chaque lien et chaque champ offrent au moins
   44 px au doigt. */
.contact-heading {
  padding-bottom: 44px;
}

.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1160px;
}

.contact-grille > * {
  min-width: 0;
}

.contact-choix {
  display: grid;
  gap: 14px;
}

.contact-choix article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.contact-choix article > :not(.contact-icone) {
  grid-column: 2;
}

.contact-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  grid-row: 1 / span 3;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #000;
}

.contact-icone img {
  width: 22px;
  height: 22px;
}

.contact-choix h3 {
  margin: 4px 0 8px;
  font-size: 1.5rem;
  line-height: 1.15;
}

.contact-choix p {
  margin: 0;
  color: var(--doux);
  font-size: .9375rem;
  line-height: 1.7;
}

/* L'adresse courriel, sur son bouton : jamais soulignée, coupée proprement si l'écran est étroit. */
.contact-choix .contact-courriel {
  overflow-wrap: anywhere;
  text-decoration: none;
}

/* L'adresse courriel et, à côté, l'icône pour la copier (même hauteur que les boutons, carrée). « Adresse copiée » :
   le bouton se remplit d'ivoire et l'icône devient ✓, le temps de l'annonce. */
.contact-choix article > .contact-courriel-rangee {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  margin-top: 16px;
}

.contact-choix .contact-courriel-rangee .button {
  flex: 1;
  width: auto;
  margin-top: 0;
  padding-inline: 12px;
  white-space: nowrap;
}

.contact-copier {
  display: grid;
  place-items: center;
  flex: none;
  width: 51px;
  min-height: 51px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 2px;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: background-color .18s ease;
}

.contact-copier:hover,
.contact-copier:focus-visible,
.contact-courriel-rangee.copie .contact-courriel,
.contact-courriel-rangee.copie .contact-copier {
  background: var(--ivory);
}

.contact-copier .icone-copie,
.contact-courriel-rangee.copie .icone-copier {
  display: none;
}

.contact-courriel-rangee.copie .icone-copie {
  display: block;
}

@media (max-width: 599.98px) {
  .contact-choix .contact-courriel-rangee .button {
    font-size: .875rem;
  }
}

/* Les boutons des cartes et du suivi : ceux du site (noir pour la soumission, à contour pour le reste), tous de la
   même taille. */
.contact-choix .button,
.contact-suivi .button {
  width: 100%;
  min-width: 0;
  min-height: 51px;
  margin-top: 16px;
}

.contact-suivi .button {
  width: auto;
  min-width: 240px;
}

/* Le bouton de chaque carte sur toute sa largeur, sur une seule ligne : tous de la même taille. Au téléphone, le texte
   aussi prend toute la largeur ; l'icône reste à côté du titre. */
.contact-choix article > .button {
  grid-column: 1 / -1;
  white-space: nowrap;
}

@media (max-width: 599.98px) {
  .contact-choix article > p:not(.contact-icone) {
    grid-column: 1 / -1;
    margin-top: 6px;
  }
}

.contact-grille .contact-form-wrap > h2 {
  margin: 0 0 20px;
}

@media (min-width: 1000px) {
  .contact-grille {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 40px;
  }
}

/* Le suivi d'une commande déjà passée, au centre. */
.contact-suivi {
  max-width: 760px;
  padding-bottom: 56px;
  text-align: center;
}

.contact-suivi h2 {
  margin: 0 0 10px;
}

.contact-suivi p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--doux);
  line-height: 1.7;
}



/* Le formulaire, dans son cadre : champs nets, bord noir au focus, bouton noir sur toute la largeur. */
.contact-form-wrap {
  padding: 32px 24px;
  border: 1px solid var(--line);
  background: #fff;
}

.contact-form-wrap > h2 {
  margin: 10px 0 24px;
}

#contact-form .field label {
  margin-bottom: 6px;
  color: #000;
  font-size: .875rem;
  font-weight: 500;
}

#contact-form .field input,
#contact-form .field select,
#contact-form .field textarea {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: #000;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#contact-form .field textarea {
  min-height: 150px;
  resize: vertical;
}

#contact-form .field input:focus,
#contact-form .field select:focus,
#contact-form .field textarea:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 1px #000;
}

#contact-form .field [aria-invalid="true"] {
  border-color: var(--erreur);
}

.contact-form-wrap .button {
  width: 100%;
  min-height: 52px;
}

@media (prefers-reduced-motion: reduce) {
  #contact-form .field input,
  #contact-form .field select,
  #contact-form .field textarea {
    transition: none;
  }
}

/* La case de consentement : 22 px, dans une zone de 44 px au moins. */
#contact-form .consent {
  min-height: 44px;
  margin: 22px 0 16px;
  font-size: .875rem;
}

#contact-form .consent input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
}

/* Suivre ma commande et Prendre rendez-vous : le formulaire (ou la réservation) dans la colonne large, les encadrés
   dessous, puis à droite à partir de 1100 px. min-width:0 : une rangée de jours qui défile ne pousse jamais la page
   de côté. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  max-width: 1120px;
  padding: 12px 0 72px;
}

.contact-layout > * {
  min-width: 0;
}

.contact-details {
  display: grid;
  gap: 16px;
}

.contact-encadre {
  padding: 26px 24px;
  border: 1px solid var(--line);
  background: #fff;
}

.contact-encadre h3 {
  margin: 10px 0 0;
  font-size: 1.6rem;
  line-height: 1.15;
}

.contact-encadre p:not(.eyebrow) {
  margin: 10px 0 18px;
  color: var(--doux);
  font-size: .9375rem;
  line-height: 1.65;
}

.contact-encadre .button {
  width: 100%;
}

/* La page introuvable : sous les boutons, les occasions du menu, puis le contact. */
.introuvable-occasions ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 28px;
  margin: 36px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.introuvable-occasions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #000;
  font: 400 1.4rem/1.2 var(--serif);
}

.introuvable-occasions a:hover,
.introuvable-occasions a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.inside-hero > .introuvable-contact {
  margin-top: 14px;
  font-size: .9375rem;
}

.introuvable-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* NOS SAVEURS, LA PAGE (cahier d'Hakim, 11 oct.) : le contenu de la petite fenêtre (complements.css), un peu plus
   grand, sur une colonne de lecture ; en bas, « Demander une soumission », centré. */
.saveurs {
  max-width: 880px;
  padding-bottom: 64px;
}

.saveurs .saveurs-bloc > h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
}

.saveurs .saveurs-cartes img {
  width: 68px;
  height: 68px;
}

.saveurs .saveurs-cartes--bases img {
  width: 88px;
  height: 88px;
}

.saveurs .saveurs-allergenes > h2 {
  font-size: 1.35rem;
}

.saveurs .saveurs-actions {
  margin: 36px auto 0;
}

@media (max-width: 620px) {
  .saveurs {
    padding-bottom: 48px;
  }

  .saveurs .saveurs-cartes img {
    width: 54px;
    height: 54px;
  }

  .saveurs .saveurs-cartes--bases img {
    width: 66px;
    height: 66px;
  }
}

/* LES DOCUMENTS (scripts/textes.mjs) : conditions générales, confidentialité, transport et conservation. Le texte en
   1.0625rem, #222, sur une colonne de lecture. Le sommaire « Sur cette page » vient d'abord, entre deux filets, replié
   au téléphone et à la tablette (son <details>, que l'on ouvre d'un geste) ; à partir de 1000 px, il est ouvert
   (app.js), passe à gauche du texte et reste en vue sous l'en-tête collant (72 px à la tablette, 64 px compacté), avec
   son propre défilement s'il est plus haut que l'écran, sur une barre fine et grise. */
.document-hero {
  padding-bottom: 48px;
}

.document-layout {
  max-width: 760px;
  padding-bottom: 82px;
}

.document-aside {
  margin-bottom: 40px;
  padding: 0 0 6px;
  border-block: 1px solid var(--line);
}

/* « Sur cette page », en surtitre, et son signe + à droite, sur une ligne qu'on touche facilement. */
.document-sommaire summary {
  min-height: 52px;
  padding: 8px 0;
}

/* Le signe, sans l'interlettrage du surtitre : il tourne sur lui-même (+ devient ×) sans se décaler. */
.document-sommaire summary span {
  letter-spacing: 0;
}

/* Ouvert, le sommaire finit sur les filets de ses liens : pas de second filet dessous. */
.document-sommaire[open] {
  border-bottom: 0;
}

.document-aside nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0 0 8px;
}

.document-aside nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--doux);
  font-size: .875rem;
  line-height: 1.35;
}

.document-aside nav a:hover,
.document-aside nav a:focus-visible {
  color: #000;
}

.document-aside .button {
  width: 100%;
  min-width: 0;
  margin-top: 16px;
  padding-inline: 10px;
  font-size: .875rem;
  white-space: nowrap;
}

.document-content {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.document-content > p {
  margin: 0 0 18px;
  color: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.document-content > p.discret {
  margin-top: 32px;
  color: var(--doux);
  font-size: .875rem;
}

.document-content > h2 {
  scroll-margin-top: 24px;
  margin: 44px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.85rem, 2.8vw, 2.35rem);
  line-height: 1.12;
}

/* L'essentiel avant de commander (conditions générales) : cinq phrases, chacune sur sa ligne, marquée d'un trait. */
.document-essentiel {
  margin-bottom: 36px;
}

.document-essentiel h2 {
  margin: 0 0 14px;
  font-size: clamp(1.85rem, 2.8vw, 2.35rem);
  line-height: 1.12;
}

.document-essentiel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.document-essentiel li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--line);
  color: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.document-essentiel li::before {
  content: "";
  position: absolute;
  top: calc(12px + .8em);
  left: 2px;
  width: 14px;
  height: 1px;
  background: #000;
}

/* « À retenir », « Vos photos », « Avant le trajet » : un encadré blanc à filet noir. */
.document-highlight {
  margin-bottom: 36px;
  padding: 30px 32px 32px;
  border: 1px solid #000;
  background: #fff;
}

.document-highlight .eyebrow {
  margin: 0;
  color: var(--doux);
}

.document-highlight h2 {
  margin: 10px 0 13px;
  padding: 0;
  border: 0;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.05;
}

.document-highlight p:not(.eyebrow) {
  margin: 0;
  color: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* L'encadré de fin (transport et conservation) : la question ou le problème, puis l'appel. */
.document-contact {
  margin-top: 48px;
  padding: 28px 28px 30px;
  border: 1px solid var(--line);
}

.document-contact h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  line-height: 1.15;
}

.document-contact p {
  margin: 0 0 22px;
  color: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.document-contact p a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.document-contact .button {
  margin: 0;
}

@media (max-width: 620px) {
  .document-layout {
    padding-bottom: 58px;
  }

  .document-highlight,
  .document-contact {
    padding: 26px 22px 28px;
  }

  .document-contact .button {
    width: 100%;
  }
}

@media (min-width: 760px) {
  .document-aside nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .document-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 760px);
    justify-content: center;
    gap: clamp(55px, 6vw, 96px);
    align-items: start;
    max-width: 1120px;
  }

  /* Défilement vertical seulement : le signe du sommaire, en tournant (+ devient ×), n'ajoute pas de barre en bas. */
  .document-aside {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 104px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #dedede transparent;
    margin: 0;
    padding: 0 0 4px;
    border: 0;
  }

  .document-sommaire summary {
    min-height: 40px;
    padding: 0;
  }

  /* Des marges serrées : les treize titres des conditions tiennent sans défiler à 1280 × 800 ; plus bas, la barre
     fine et grise prend le relais. Chaque lien garde ses 44 px. */
  .document-aside nav {
    display: flex;
    flex-direction: column;
    margin: 0 0 16px;
    border-top: 1px solid var(--line);
  }
}

/* À l'impression, le document seul : ni barre utilitaire, ni en-tête, ni menu, ni pied de page, ni barre du bas, ni
   sommaire, ni bandeau des témoins. */
@media print {
  .skip,
  .barre-utile,
  .entete,
  .entete-repere,
  .menu-panneau,
  .site-footer,
  .mobile-order,
  .back-to-top,
  .temoins,
  .document-aside,
  .document-contact .button {
    display: none !important;
  }

  body {
    padding: 0 !important;
    background: #fff;
  }

  .document-hero,
  .document-layout {
    width: 100%;
    max-width: none;
    padding: 0;
    text-align: left;
  }

  .document-hero h1 {
    margin: 8pt 0 10pt;
    font-size: 26pt;
  }

  .document-layout {
    display: block;
    margin-top: 18pt;
  }

  .document-content > p,
  .document-essentiel li,
  .document-highlight p:not(.eyebrow),
  .document-contact p {
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  .document-content > h2 {
    margin-top: 18pt;
    padding-top: 10pt;
    font-size: 16pt;
    break-after: avoid;
  }

  .document-essentiel,
  .document-highlight,
  .document-contact {
    break-inside: avoid;
  }
}

@media (min-width: 760px) {
  .review-espace {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .about-details-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* Le soin du détail, à partir de 760 px : chaque vue occupe deux rangées de la grille, la photo puis sa légende,
   qu'elle partage avec ses voisines (subgrid). Les photos, entières et chacune dans sa forme, se posent sur une même
   ligne ; les légendes partent de la même hauteur. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 760px) {
    .about-details figure {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .about-details figure > a {
      align-self: end;
    }
  }
}

@media (min-width: 1000px) {
  .contact-form-wrap {
    padding: 40px 44px 44px;
  }
}

/* À la tablette, les encadrés de Suivre ma commande côte à côte, sous le formulaire. */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .contact-details {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1100px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 320px);
    gap: clamp(56px, 6vw, 96px);
  }
}

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

  .about-story-copy {
    max-width: 680px;
  }

  .about-values > .content-width {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .about-values-heading {
    max-width: 650px;
  }

  .review-invitation {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .review-photo {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .inside-hero,
  .document-hero {
    padding-top: 20px;
    padding-bottom: 24px;
    text-align: left;
  }

  .inside-hero h1,
  .document-hero h1 {
    margin-top: 14px;
    font-size: clamp(2.65rem, 12vw, 3.45rem);
    line-height: 1;
  }

  .inside-hero > p:not(.eyebrow),
  .document-hero > p:not(.eyebrow) {
    font-size: .95rem;
    line-height: 1.65;
  }

  .inside-hero .inside-actions {
    margin-inline: 0;
  }

  .inside-actions {
    grid-template-columns: 1fr;
  }

  .about-story {
    gap: 32px;
    padding-bottom: 50px;
  }

  .about-values {
    padding: 36px 0 40px;
  }

  .maison-ouverture {
    padding: 24px 0 36px;
  }

  .about-values > .content-width {
    gap: 29px;
  }

  .about-values-grid article {
    grid-template-columns: 38px 1fr;
    gap: 12px;
  }

  .about-values-grid h3 {
    font-size: 1.55rem;
  }

  .about-details {
    padding: 32px 0 28px;
    text-align: left;
  }

  .about-details figcaption a {
    font-size: 1.2rem;
  }

  .about-process {
    padding: 28px 0 40px;
  }

  .about-process-copy {
    text-align: left;
  }

  .about-process > .button {
    align-self: stretch;
  }

  .review-espace {
    margin-bottom: 48px;
    padding: 28px 0;
  }

  .review-invitation {
    gap: 34px;
    padding-bottom: 48px;
  }

  .contact-heading {
    padding-bottom: 32px;
  }

  .contact-layout {
    padding-bottom: 48px;
  }

  .contact-suivi {
    padding-bottom: 44px;
  }

  .contact-layout {
    gap: 32px;
  }

  .contact-form-wrap .button {
    width: 100%;
  }

  .introuvable-occasions ul {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Le contact, comme les occasions au-dessus : ses deux liens l'un sous l'autre, sans le point qui les sépare. */
  .inside-hero > .introuvable-contact {
    display: grid;
    gap: 8px;
    justify-items: start;
  }

  .introuvable-contact .sep {
    display: none;
  }
}

/* Les avis publiés depuis l'application (vitrine.js), centrés, une carte par avis ; au téléphone, alignés à gauche
   comme le reste de la page. */
.reviews-list{max-width:1120px;margin-top:8px;margin-bottom:56px;text-align:center}
@media(max-width:620px){.reviews-list{text-align:left}}
.reviews-list[hidden]{display:none}
.reviews-list h2{margin:12px 0 26px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),360px));justify-content:center;gap:22px}
.review-card{margin:0;padding:26px 24px;border:1px solid var(--line);background:#fff;text-align:left}
.review-card blockquote{margin:0 0 16px;font-family:var(--sans);font-size:1.0625rem;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere}
.review-card figcaption{color:var(--muted);font-size:.9rem}
.review-card figcaption strong{color:#000;font-weight:500}

/* Suivre ma commande : le message une fois le lien demandé. */
.suivi-envoye{padding:22px 0}
.suivi-envoye h3{margin:0 0 10px;font-size:1.6rem}
.suivi-envoye a{text-decoration:underline}