/* =============================================================================
   L'Institut d'Axelle : direction artistique « Herbier »
   -----------------------------------------------------------------------------
   Un herbier de fleurs séchées posé sur du lin : pampa, eucalyptus, gypsophile,
   immortelles, noués d'un ruban. Mise en page de magazine, formes en arche,
   papier et lin, une seule couleur de caractère (l'argile) et beaucoup d'air.

   Chargée APRÈS la feuille de la page (client.css, admin.css, theme.css).
   Lettres : Cormorant Garamond (titres, prix, heures ; SIL OFL, depuis le 2026-11-13) + Jost (texte et étiquettes ;
   SIL OFL), auto-hébergées dans /fonts. L'espace pro garde Instrument Sans pour
   le texte courant (outil de travail, chiffres serrés).
   Illustrations : /illus/herbier.svg (symboles <use>, couleurs en variables --i-*)
   et /illus/trait-*.svg (masques monochromes, couleur donnée ici).
   Aucune ressource extérieure, aucune animation en boucle.
   ============================================================================= */

@font-face { font-family: 'Cormorant Garamond'; src: url(/fonts/cormorant-garamond-latin.woff2) format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/fonts/cormorant-garamond-italic-latin.woff2) format('woff2'); font-style: italic; font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Jost'; src: url(/fonts/jost-latin.woff2) format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; }

/* =============================================================================
   1. Jetons
   ============================================================================= */
:root {
  /* Matières */
  --b-papier: #F5EFE4;      /* fond : lin écru */
  --b-lin: #EDE4D5;         /* aplats, sections, arches */
  --b-lin-2: #E4D8C5;       /* lin plus soutenu (fond d'arche) */
  --b-carton: #FFFCF6;      /* cartes : papier de coton */
  --b-filet: #E2D6C3;       /* filets décoratifs */
  --b-bord: #8B7E70;        /* limite de champ : 3,4:1 sur papier */
  /* Encres (contrastes mesurés sur papier / lin / carton) */
  --b-encre: #2A2124;       /* 13,7 / 12,4 / 15,3 */
  --b-encre-2: #584C4E;     /* 7,2 / 6,5 / 8,0 */
  --b-encre-3: #6B5F5F;     /* 5,4 / 4,9 / 6,0 */
  /* Caractère */
  --b-argile: #96452F;      /* accent : liens, italiques, prix d'appel. 5,8 / 5,2 / 6,4 */
  --b-argile-fonce: #7A3624;/* accent sur rose : 6,9 */
  --b-rose: #F1E0D6;        /* rose poudré, aplats */
  --b-sauge: #56654F;       /* étiquettes, coches : 5,4 / 4,9 / 6,1 */
  --b-sauge-fond: #E3E8DC;
  --b-ble: #C9A46A;         /* ornements seulement */
  --b-ble-clair: #E8CF9F;   /* texte sur prune : 9,1 */
  --b-prune: #3A2830;       /* billet, carte cadeau : texte crème 12:1 */
  --b-prune-2: #4A3640;
  --b-erreur: #A3201C; --b-erreur-fond: #F9E8E2;
  --b-ok: #2F6B4A; --b-ok-fond: #E3EEE5;

  /* L'herbier (variables lues par /illus/herbier.svg) */
  --i-trait: #5F5246; --i-tige: #7B6B57; --i-pampa: #EADCC2; --i-pampa-clair: #F1E7D3; --i-pampa-trait: #B39A72;
  --i-euc: #A9B7A4; --i-euc-2: #8FA190; --i-fleur: #DDB0A0; --i-fleur-2: #CB9280; --i-coeur: #A3664F; --i-coeur-clair: #B97A64;
  --i-ble: #D6B97F; --i-gypso: #FFFCF5; --i-gypso-trait: #A08B76; --i-ruban: #EBD5CA; --i-ruban-2: #DDBDAF;
  --i-mono: var(--b-encre); --i-mono-2: var(--b-argile);

  /* Formes */
  --b-r-carte: 22px;
  --b-r-tuile: 14px;
  --b-r-arche: 999px 999px 22px 22px;
  --b-sh-1: 0 0 0 1px rgb(90 70 50 / 9%), 0 1px 2px rgb(42 33 36 / 4%);
  --b-sh-2: 0 0 0 1px rgb(90 70 50 / 8%), 0 22px 40px -26px rgb(74 46 40 / 38%);
  --b-sh-3: 0 34px 70px -30px rgb(42 33 36 / 46%);
  /* Papier et lin : un grain très léger + une trame de lin à peine visible */
  --b-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .16 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
  --b-trame: repeating-linear-gradient(0deg, rgb(120 96 70 / 2.2%) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(120 96 70 / 1.8%) 0 1px, transparent 1px 4px);
  --ic-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");

  /* Lettres */
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --sans: 'Jost', 'Instrument Sans', -apple-system, system-ui, sans-serif;
  --b-label: 500 11.5px/1.3 'Jost', 'Instrument Sans', system-ui, sans-serif;

  /* --- Mappage des feuilles de la page (client.css, admin.css) --- */
  --bg: var(--b-papier);
  --bg-2: var(--b-lin);
  --surface: var(--b-carton);
  --ink: var(--b-encre);
  --ink-2: var(--b-encre-2);
  --ink-3: var(--b-encre-3);
  --line: rgb(90 70 50 / 12%);
  --line-2: rgb(90 70 50 / 22%);
  --clay: var(--b-argile);
  --clay-ink: var(--b-argile-fonce);
  --clay-soft: var(--b-rose);
  --cacao: var(--b-prune);
  --blush: var(--b-rose);
  --sand: #F2E6CF;
  --mist: #E8E2E2;
  --sage: var(--b-sauge-fond);
  --ok: var(--b-ok); --ok-soft: var(--b-ok-fond);
  --bad: var(--b-erreur); --bad-soft: var(--b-erreur-fond);
  --r-xl: 28px; --r-lg: var(--b-r-carte); --r-md: var(--b-r-tuile); --r-sm: 12px;
  --sh-1: var(--b-sh-1); --sh-2: var(--b-sh-2); --sh-3: var(--b-sh-3);
  --grain: var(--b-grain);

  /* --- Mappage de theme.css (mentions, confidentialité) --- */
  --nuit: var(--b-encre); --nuit-2: var(--b-prune-2); --ardoise: var(--b-encre-2);
  --papier: var(--b-papier); --carton: var(--b-carton); --brume: var(--b-lin);
  --filet: var(--b-filet); --bord: var(--b-bord); --cendre: var(--b-lin);
  --lampe: var(--b-ble); --grenat: var(--b-argile);
  --erreur: var(--b-erreur); --erreur-fond: var(--b-erreur-fond); --sapin: var(--b-ok); --sapin-fond: var(--b-ok-fond);
  --titre: var(--serif); --texte: var(--sans);
  --r-carton: var(--b-r-tuile); --r-btn: 999px; --r-champ: var(--b-r-tuile); --r-feuille: var(--b-r-carte);
}

/* =============================================================================
   2. Fond, lettres, hiérarchie (page cliente et pages légales)
   ============================================================================= */
body:has(> .shell), body:has(> main.shell) { background-color: var(--b-papier); }
.shell { background-color: var(--b-papier); background-image: var(--b-grain), var(--b-trame); }
@media (min-width: 760px) {
  body:has(> .shell) { background-color: #E7DDCC; background-image: var(--b-grain); }
  .shell { box-shadow: 0 0 0 1px rgb(90 70 50 / 10%), 0 40px 120px -50px rgb(74 46 40 / 35%); }
}
.shell, #layer { font-family: var(--sans); font-size: 16.5px; letter-spacing: .002em; font-feature-settings: normal; }
.shell button, .shell input, #layer button, #layer input { letter-spacing: inherit; }
::selection { background: var(--b-rose); color: var(--b-argile-fonce); }
.shell :focus-visible, #layer :focus-visible { outline-color: var(--b-argile); }

/* Titres : Cormorant Garamond, en 500-600 : la fonte est fine, elle demande un peu de corps */
.shell .display, .shell .h1, .shell .h2, #layer .h1, #layer .h2,
.topbar .brand, .footer .mark, .recap .when, .day-head h2, .group-title h2, .u-name, .ticket .time,
.sugg .t, .day .dn, .dk-when b, .dk-total b, .dk-big, .legal h1 {
  font-family: var(--serif); font-weight: 500; font-optical-sizing: auto; letter-spacing: -.015em;
}
.shell .display em, .shell .h1 em, .shell .h2 em, .u-name em { font-style: italic; font-weight: 500; color: var(--b-argile); }
.shell .display { font-size: 40px; font-weight: 500; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.shell .h1 { font-size: 36px; line-height: 1.06; letter-spacing: -.02em; }
.shell .h2 { font-size: 31px; line-height: 1.08; letter-spacing: -.018em; }
.shell .h3, #layer .h3 { font: 600 17px/1.3 var(--sans); letter-spacing: 0; }
.shell .eyebrow, #layer .eyebrow { font: var(--b-label); letter-spacing: .22em; text-transform: uppercase; color: var(--b-sauge); }
.shell .lede { font-size: 17.5px; line-height: 1.55; color: var(--b-encre-2); }
.shell .muted { color: var(--b-encre-2); }
@media (max-width: 380px) { .shell .display { font-size: 35px; } .shell .h1 { font-size: 32px; } .shell .h2 { font-size: 28px; } }
@media (min-width: 420px) { .shell .display { font-size: 44px; } }

/* =============================================================================
   3. Barre du haut
   ============================================================================= */
.topbar { background: color-mix(in srgb, var(--b-papier) 84%, transparent); }
.topbar.scrolled { box-shadow: 0 1px 0 var(--line); }
.topbar .brand { font-size: 21px; }
.topbar .brand small { font: var(--b-label); letter-spacing: .14em; text-transform: uppercase; color: var(--b-encre-3); margin-top: 5px; }
.iconbtn.soft { background: var(--b-carton); box-shadow: inset 0 0 0 1px var(--line-2); }
.iconbtn.soft:hover { box-shadow: inset 0 0 0 1px var(--b-encre-3); }
/* Monogramme, au centre des écrans sans étapes */
.topbar-mark { flex: 1; display: flex; justify-content: center; }
.topbar-mark svg { width: 30px; height: 39px; }
.topbar:has(.topbar-mark):not(:has([data-act="back"])) .topbar-mark { padding-left: 44px; }

/* Accueil : les deux adresses, en étiquettes d'herbier */
.topbar-home { height: auto; min-height: 64px; padding-top: 6px; padding-bottom: 6px; gap: 10px; }
.adresses { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0; }
.adr { flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: 12px; text-align: left; color: var(--b-encre); }
.adr + .adr { border-left: 1px solid var(--line-2); border-radius: 0 12px 12px 0; padding-left: 12px; }
.adr:hover { background: color-mix(in srgb, var(--b-lin) 70%, transparent); }
.adr > svg { flex: none; width: 17px; height: 17px; color: var(--b-argile); stroke-width: 1.6; }
.adr-t { display: grid; min-width: 0; line-height: 1.2; }
.adr-t b { font: 600 13.5px/1.2 var(--sans); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adr-t span { font-size: 12.5px; line-height: 1.25; color: var(--b-encre-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 359px) { .adr { gap: 6px; padding-right: 6px; } .adr + .adr { padding-left: 8px; } .adr > svg { width: 15px; height: 15px; } }

/* =============================================================================
   4. En-tête de l'accueil : l'arche, le bouquet, la promesse, l'appel
   ============================================================================= */
.shell .hero { position: relative; padding: 6px var(--gutter) 0; }
.hero-arche { position: relative; margin: 0 auto; width: min(100%, 420px); aspect-ratio: 520 / 470; }
/* L'arche : lin soutenu, filet d'argile en écho au monogramme */
.hero-arche::before, .hero-arche::after { content: ''; position: absolute; left: 15%; right: 15%; top: 9%; bottom: 0; border-radius: var(--b-r-arche); }
.hero-arche::before { background: linear-gradient(180deg, var(--b-lin) 0%, var(--b-lin-2) 100%); background-image: var(--b-grain), linear-gradient(180deg, var(--b-lin) 0%, var(--b-lin-2) 100%); }
.hero-arche::after { inset: calc(9% + 9px) calc(15% + 9px) 9px; border: 1px solid color-mix(in srgb, var(--b-argile) 34%, transparent); }
.hero-bouquet { position: absolute; left: 0; right: 0; bottom: -2%; width: 100%; height: auto; aspect-ratio: 520 / 500; z-index: 1; }
/* Le monogramme, posé comme une étiquette d'herbier dans l'angle de l'arche */
.hero-mono { position: absolute; z-index: 2; left: 4%; bottom: 7%; width: 54px; height: 70px; padding: 7px 7px 5px; border-radius: 999px 999px 8px 8px; background: var(--b-carton); box-shadow: var(--b-sh-2); }
.hero-txt { position: relative; z-index: 2; margin-top: 18px; }
.shell .hero .display { margin: 0; }
.shell .hero .display em { display: inline; }
.shell .hero-row { margin-top: 14px; }
.shell .hero .lede { max-width: 34ch; }
.hero-cta { margin-top: 22px; min-height: 54px; padding: 0 22px 0 26px; }
.hero-cta svg { width: 19px; height: 19px; transition: transform var(--t-3) var(--spring); }
.hero-cta:hover svg { transform: translateX(3px); }
.shell .next-free { margin-top: 16px; font-size: 14.5px; font-weight: 500; color: var(--b-encre-2); }
.shell .next-free .live { background: var(--b-sauge); box-shadow: 0 0 0 4px rgb(86 101 79 / 16%); }
.ref-banner { background: var(--b-rose); color: var(--b-argile-fonce); border-radius: var(--b-r-tuile); }
.ref-banner + .hero-row, .hero-txt .ref-banner { margin: 14px 0 0; }

/* =============================================================================
   5. Boutons, liens, puces
   ============================================================================= */
.shell .btn, #layer .btn { font-family: var(--sans); font-weight: 500; letter-spacing: .02em; }
.shell .btn-primary, #layer .btn-primary { background: var(--b-encre); color: var(--b-carton); box-shadow: 0 14px 26px -16px rgb(42 33 36 / 75%); }
.shell .btn-primary:hover, #layer .btn-primary:hover { background: var(--b-prune-2); }
.shell .btn-ghost, #layer .btn-ghost { background: transparent; color: var(--b-encre); box-shadow: inset 0 0 0 1px var(--line-2); }
.shell .btn-ghost:hover, #layer .btn-ghost:hover { background: var(--b-lin); }
.shell .link, #layer .link { color: var(--b-encre); text-decoration-color: var(--b-argile); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.shell .link:hover { color: var(--b-argile); }
.link-arrow svg { color: var(--b-argile); }

.chip, .filters .chip, .tip .chip, .tip .chip.q, .bk-semi .chip {
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: 500 14.5px/1 var(--sans); letter-spacing: .02em; background: var(--b-carton); color: var(--b-encre); box-shadow: inset 0 0 0 1px var(--line-2);
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--b-encre-3); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--b-encre); color: var(--b-carton); box-shadow: none; }
.tip .chip.ghost { background: transparent; box-shadow: none; color: var(--b-encre-2); }
.cats, .anchors, .picker { background: color-mix(in srgb, var(--b-papier) 88%, transparent); }
.cats { margin-top: 30px; }

/* =============================================================================
   6. Les univers et les cartes de soins
   ============================================================================= */
.univ-head { align-items: center; gap: 14px; }
.univ-head .vignette { flex: none; width: 54px; height: 72px; padding: 6px 4px 0; border-radius: 999px 999px 10px 10px; background: var(--b-lin); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-argile) 18%, transparent); }
.univ-head .h2 { font-size: 31px; }
.univ-head .from { display: inline-block; margin-left: 6px; font: italic 380 16px/1 var(--serif); color: var(--b-argile); letter-spacing: 0; vertical-align: 3px; }
.univ-head p { margin-top: 5px; font-size: 15.5px; line-height: 1.45; color: var(--b-encre-2); }

/* La carte : papier de coton, coin haut arrondi en arche douce, filet intérieur */
.top-list, .list, .basket, .recap, .bk-card, .reviews-empty, .card, #layer .sheet .list, .shell .choix, #layer .choix {
  border-radius: var(--b-r-carte); background: var(--b-carton); box-shadow: var(--b-sh-1);
}
.top-list { position: relative; margin-top: 16px; }
.svc-row, .row { padding: 17px 16px 17px 20px; gap: 14px; border-top: 0; position: relative; }
.svc-row + .svc-row::before, .row + .row::before { content: ''; position: absolute; top: 0; left: 20px; right: 16px; border-top: 1px solid var(--line); }
.svc-row .name, .row .name { font: 500 16.5px/1.3 var(--sans); letter-spacing: 0; color: var(--b-encre); }
.svc-row .meta, .row .meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; line-height: 1.3; color: var(--b-encre-3); letter-spacing: .02em; }
.svc-row .meta::before { content: ''; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--ic-horloge) center / contain no-repeat; mask: var(--ic-horloge) center / contain no-repeat; }
.row .meta svg { width: 13px; height: 13px; }
.svc-row .price, .row .price { font: 500 24px/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; min-width: 3.2ch; text-align: right; color: var(--b-encre); }
.svc-row .plus, .row .tog { width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--b-encre); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1); }
.svc-row .plus svg, .row .tog svg { width: 17px; height: 17px; }
.r-side { gap: 12px; }
.row .desc { color: var(--b-encre-2); }
.row.in-basket { background: color-mix(in srgb, var(--b-rose) 50%, var(--b-carton)); }
.row.in-basket .tog { background: var(--b-argile); color: var(--b-carton); box-shadow: none; }
@media (hover: hover) { .row:hover .tog, .svc-row:hover .plus { background: var(--b-encre); color: var(--b-carton); box-shadow: none; } }
@media (hover: none) { .row:not(.in-basket):hover .tog, .svc-row:hover .plus { background: transparent; color: var(--b-encre); } }
.svc-row:active { background: color-mix(in srgb, var(--b-lin) 50%, var(--b-carton)); }
.more { padding: 0; margin-top: 8px; font: 500 15px/1 var(--sans); letter-spacing: .02em; text-decoration: underline; text-decoration-color: var(--b-argile); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.more svg { color: var(--b-argile); }

/* Écran univers */
.u-name { font-weight: 500; }
.u-facts { border-color: var(--line); }
.u-facts dd { font-family: var(--serif); font-weight: 500; }
.group-title h2 { font-size: 28px; }

/* =============================================================================
   7. Sections : Axelle, infos pratiques, bon cadeau, pied de page
   ============================================================================= */
.shell .block { padding-top: 64px; }
/* Axelle : une arche de lin, un brin d'avoine, la parole à la première personne */
#axelle .axelle { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: center; margin: 0; padding: 22px 20px; border-radius: var(--b-r-carte); background: var(--b-lin); background-image: var(--b-grain); }
.axelle-arche { align-self: stretch; display: grid; place-items: end center; min-height: 128px; padding: 10px 6px 0; border-radius: 999px 999px 12px 12px; background: var(--b-papier); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-argile) 26%, transparent); }
.axelle-arche svg { width: 100%; height: auto; aspect-ratio: 120 / 160; }
.axelle-txt .h2 { margin-top: 8px; font-style: italic; font-weight: 500; color: var(--b-argile); }
.axelle-mot { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--b-encre); }
.axelle-txt .small { margin-top: 10px; }
@media (max-width: 380px) { #axelle .axelle { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 18px 16px; } }

/* Infos pratiques */
#infos .eyebrow + .h2 { margin-top: 10px; }
.shell .info { margin-top: 20px; border-radius: var(--b-r-carte); background: var(--b-carton); box-shadow: var(--b-sh-1); }
.shell .map { height: 140px; background: var(--b-lin); background-image: var(--b-grain); }
.shell .map svg { stroke: var(--b-carton); opacity: .9; }
.shell .map .parc { fill: var(--b-sauge-fond); stroke: none; }
.shell .map .pin { background: var(--b-argile); box-shadow: 0 10px 20px -8px rgb(150 69 47 / 60%); }
.shell .map .pin::after { background: var(--b-carton); }
.shell .info-row { border-top: 1px solid var(--line); padding: 16px 18px 16px 20px; }
.shell .info-row svg { color: var(--b-argile); }
.shell .info-row b { font-weight: 600; }
.shell .info-row .jours { font-size: 14px; color: var(--b-sauge); }
.shell .hours dt { color: var(--b-encre-2); }
.shell .hours .today { color: var(--b-encre); font-weight: 600; }
.reassure, .bk-semi, .bk-dup, .addon { border-radius: var(--b-r-tuile); }
.reassure { background: var(--b-sauge-fond); color: var(--b-sauge); font-weight: 500; }
.reassure svg { color: var(--b-sauge); }

/* Bon cadeau : un bon imprimé sur carton prune, filet doré, bouquet d'angle */
.gift-line { position: relative; overflow: hidden; isolation: isolate; display: block; min-height: 230px; padding: 28px 26px 26px; border-radius: var(--b-r-carte); background: var(--b-prune); background-image: var(--b-grain), radial-gradient(120% 90% at 100% 100%, var(--b-prune-2) 0%, var(--b-prune) 62%); color: var(--b-carton); box-shadow: var(--b-sh-3);
  --i-trait: #E3C38C; --i-tige: #CDAF85; --i-pampa: #5A424A; --i-pampa-clair: #5A424A; --i-pampa-trait: #D2B486; --i-euc: #56614F; --i-euc-2: #4C5649;
  --i-fleur: #8E5B52; --i-fleur-2: #7B4C46; --i-coeur: #C98A5C; --i-coeur-clair: #C98A5C; --i-ble: #B8935A; --i-gypso: #4F3C44; --i-gypso-trait: #E3C38C; }
.gift-line::before { content: ''; position: absolute; inset: 9px; z-index: -1; border: 1px dashed rgb(232 207 159 / 45%); border-radius: 16px; pointer-events: none; }
.cadeau-fond { position: absolute; z-index: -1; right: -10px; bottom: -6px; width: 72%; max-width: 380px; height: auto; aspect-ratio: 380 / 260; opacity: .95; pointer-events: none; }
.gift-line .grow { position: relative; max-width: 30ch; }
.gift-line .eyebrow { color: var(--b-ble-clair); }
.gift-line .h3 { margin-top: 10px; font: italic 360 32px/1.05 var(--serif); letter-spacing: -.015em; color: var(--b-carton); }
.gift-line p:not(.eyebrow) { margin-top: 10px; font-size: 15px; line-height: 1.5; color: #E7DCD6; max-width: 26ch; }
.gift-line .link { margin-top: 14px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--b-ble-clair); font-weight: 500; text-decoration: underline; text-decoration-color: rgb(232 207 159 / 55%); text-underline-offset: 5px; }
.gift-line .link svg { color: var(--b-ble-clair); }
.gift-line .link:hover { color: var(--b-carton); }

/* Pied de page : guirlande, monogramme, logotype */
.footer { padding-top: 64px; color: var(--b-encre-3); font-size: 13.5px; }
.footer-guirlande { display: block; width: min(300px, 80%); height: auto; aspect-ratio: 360 / 64; margin: 0 auto 28px; }
.footer-mono { display: block; width: 50px; height: 65px; margin: 0 auto 14px; }
.footer .mark { display: block; margin: 0 0 8px; font: italic 360 30px/1.05 var(--serif); color: var(--b-encre); letter-spacing: -.01em; }
.footer .mark-l { display: block; margin-bottom: 6px; font: 500 11.5px/1.2 var(--sans); font-style: normal; letter-spacing: .32em; text-transform: uppercase; color: var(--b-encre-2); padding-left: .32em; }
.footer-sub { display: block; letter-spacing: .02em; }
.foot-links a, .foot-links .link { color: var(--b-encre-3); text-decoration-color: var(--line-2); }

/* =============================================================================
   8. Réservation : étapes, suggestions, jours, heures, panneau
   ============================================================================= */
.steps i { background: var(--line-2); }
.steps i.on::after { background: var(--b-argile); }
.steps-txt { font: var(--b-label); letter-spacing: .14em; text-transform: uppercase; color: var(--b-encre-3); }
.shell .screen-title .h1 { font-weight: 500; }
.recap .when { font-size: 26px; }
.recap li { font-size: 15.5px; }
.sugg button, .day, .pill { background: var(--b-carton); box-shadow: var(--b-sh-1); }
.sugg button { border-radius: 18px; }
.sugg .l { font: var(--b-label); letter-spacing: .1em; text-transform: uppercase; color: var(--b-sauge); }
.sugg .t { font-size: 27px; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.sugg .d { font-weight: 500; }
.day { border-radius: 999px 999px 16px 16px; }
.day .wd { font-weight: 500; letter-spacing: .04em; }
.day .dot, .day .dots i { background: var(--b-argile); }
.pill { border-radius: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.day[aria-pressed="true"], .pill[aria-pressed="true"], .sugg button[aria-pressed="true"] { background: var(--b-encre); color: var(--b-carton); box-shadow: 0 14px 24px -14px rgb(42 33 36 / 80%); }
.sugg button[aria-pressed="true"] .l, .day[aria-pressed="true"] .wd { color: var(--b-ble-clair); }
.day[aria-pressed="true"] .dot, .day[aria-pressed="true"] .dots i { background: var(--b-ble-clair); }
.day.closed { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.day-head h2 { font-size: 27px; }
.dock-inner { background: var(--b-prune); }
.dock-inner .btn { background: var(--b-carton); color: var(--b-encre); }
.dk-when span { color: var(--b-argile-fonce); }
@media (min-width: 1024px) {
  .has-panel .dock { border-radius: 28px; background: var(--b-carton); background-image: var(--b-grain); box-shadow: var(--b-sh-2); }
  .has-panel .dock .btn { background: var(--b-encre); color: var(--b-carton); }
  .dk-hint { background: var(--b-lin); }
}

/* Formulaire */
.shell .field label { font-weight: 500; letter-spacing: .01em; }
.shell .field input { border-radius: var(--b-r-tuile); background: var(--b-carton); box-shadow: inset 0 0 0 1px var(--b-bord); }
.shell .field input:focus { box-shadow: inset 0 0 0 2px var(--b-encre), 0 0 0 5px rgb(150 69 47 / 12%); }
.shell .field input::placeholder { color: #9A8D84; }
.shell .field .help svg { color: var(--b-argile); }
.bk-semi { background: #F2E6CF; }
.bk-semi-acts, .tip-q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tip-q .grow { grid-column: 1 / -1; }
.bk-semi-acts .chip, .tip-q .chip { justify-content: center; padding: 6px 10px; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
.field-pair { margin-top: 18px; align-items: start; }
.bk .form .field-pair > .field, .field-pair > .field { margin-top: 0; }

/* =============================================================================
   9. Confirmation, rendez-vous, bandeaux
   ============================================================================= */
.done-mark { border-radius: var(--b-r-arche); background: var(--b-sauge); box-shadow: 0 16px 28px -16px rgb(86 101 79 / 85%); }
.ticket { border-radius: var(--b-r-carte); background: var(--b-prune); background-image: radial-gradient(110% 80% at 100% 0%, var(--b-prune-2) 0%, var(--b-prune) 60%); }
.ticket::after { content: ''; position: absolute; right: -18px; top: -10px; width: 210px; height: 144px; pointer-events: none; background: var(--b-ble-clair); opacity: .32; transform: scaleY(-1);
  -webkit-mask: url(/illus/trait-cadeau.svg) no-repeat right bottom / contain; mask: url(/illus/trait-cadeau.svg) no-repeat right bottom / contain; }
.ticket .date { color: var(--b-ble-clair); font-weight: 500; letter-spacing: .02em; }
.ticket .time { font-weight: 500; font-size: 84px; letter-spacing: -.035em; }
.ticket .svc, .ticket .addr { color: #E7DCD6; }
.sms-note .ok, .status .ok { background: var(--b-sauge); }
.quick a, .quick button { border-radius: var(--b-r-tuile); background: var(--b-carton); box-shadow: var(--b-sh-1); }
.quick svg { color: var(--b-argile); }
.ami-line { border-radius: var(--b-r-carte); background: var(--b-carton); box-shadow: var(--b-sh-1); }
.manage-line { justify-content: flex-start; }
.manage-line .link { padding: 0; }
.done .sms-note { gap: 14px; }
.rdv-banner { background: var(--b-prune); border-radius: 18px; }
.rdv-banner small { color: var(--b-ble-clair); letter-spacing: .04em; }
.rdv-banner .rb-ic { background: rgb(255 252 246 / 10%); color: var(--b-ble-clair); }
.demo-band { background: var(--b-prune); color: #F2E9E3; font-weight: 400; letter-spacing: .02em; }
.demo-band svg { color: var(--b-ble-clair); }
.next-slot .live { background: var(--b-sauge); }

/* Feuilles (itinéraire, agenda, ajout de soin) */
#layer .sheet { background: var(--b-papier); background-image: var(--b-grain); }
#layer .sheet-head h2 { font-family: var(--serif); font-weight: 500; }
.choix-l > svg:first-child { color: var(--b-argile); }

/* =============================================================================
   10. Écran ordinateur
   ============================================================================= */
@media (min-width: 1024px) {
  .shell .display { font-size: 78px; line-height: 1; }
  .shell .h1 { font-size: 50px; }
  .shell .h2 { font-size: 38px; }
  .topbar-home { min-height: 76px; }
  .adresses { flex: 0 1 auto; gap: 8px; }
  .adr { flex: 0 1 auto; padding-right: 16px; }
  .adr-t { display: flex; align-items: baseline; gap: 8px; }
  .adr-t b { font-size: 14px; }
  .adr-t span { font-size: 14px; display: block; white-space: nowrap; }
  .topbar-home .iconbtn { margin-left: auto; }

  .shell .hero, .shell .hero:has(.offer-line) { display: grid; grid-template-columns: minmax(0, 1fr) 500px; grid-template-rows: none; column-gap: 72px; align-items: center; max-width: none; padding: 40px var(--gutter) 0; }
  .hero-arche { grid-column: 2; grid-row: 1; width: 100%; }
  .hero-txt { grid-column: 1; grid-row: 1; margin: 0; padding-bottom: 24px; }
  .shell .hero .display { font-size: 80px; }
  .shell .hero .lede { font-size: 19px; }
  .shell .hero-row { margin-top: 26px; display: block; }
  .hero-cta { margin-top: 30px; min-height: 58px; padding: 0 26px 0 30px; font-size: 16.5px; }
  .hero-mono { width: 64px; height: 83px; padding: 8px 8px 6px; }
  .cats { margin-top: 56px; }

  .univs .univ-head p { min-height: 3em; }
  .cats + .univs > .univ:nth-child(2) { padding-top: 16px; }
  .univ-head .h2 { font-size: 34px; }

  .shell .block { padding-top: 88px; }
  #axelle .axelle { grid-template-columns: 180px minmax(0, 1fr); gap: 48px; max-width: none; padding: 36px 48px 36px 36px; }
  .axelle-arche { min-height: 230px; padding: 18px 16px 0; }
  .axelle-txt .h2 { font-size: 46px; }
  .axelle-mot { font-size: 19px; max-width: 46ch; }
  .pair-cols .block { padding-top: 88px; }
  .shell .map { height: 120px; }

  .bloc-cadeau .gift-line { max-width: none; min-height: 280px; padding: 44px 48px; }
  .cadeau-fond { width: 50%; max-width: 560px; right: -16px; bottom: -14px; }
  .gift-line .h3 { font-size: 44px; }
  .gift-line p:not(.eyebrow) { font-size: 16px; max-width: 38ch; }

  .footer { padding-top: 88px; }
  .sugg .t { font-size: 34px; }
  .ticket .time { font-size: 112px; }
  .ticket::after { width: 280px; height: 192px; }
}

/* =============================================================================
   11. Pages légales (theme.css)
   ============================================================================= */
.legal h1 { font-size: 40px; font-weight: 500; letter-spacing: -.02em; }
.legal a { color: var(--b-argile); }

/* =============================================================================
   12. Espace pro : les mêmes matières, plus sobre (outil de travail)
   ============================================================================= */
body:has(> #app) { --sans: 'Instrument Sans', -apple-system, system-ui, sans-serif; } /* admin.html : #app est enfant direct de body ; dans index.html il est dans .shell */
body:has(> #app > .layout), body:has(> #app > .login) { background: var(--b-papier); background-image: var(--b-grain); }
.layout .h1, .login h1, .sheet-head h2, .ask-corps h2, .jour-h, .tile b, .panel h2, .nav .brand, .marque, .chiffre b {
  font-family: var(--serif); font-weight: 500; font-optical-sizing: auto; letter-spacing: -.012em;
}
.layout .h1 { font-size: 32px; line-height: 1.06; font-weight: 500; }
@media (min-width: 640px) { .layout .h1 { font-size: 42px; } }
.layout .eyebrow, .eyebrow-s, dialog .eyebrow { font: var(--b-label); letter-spacing: .18em; text-transform: uppercase; color: var(--b-sauge); }
.tete .marque { font-size: 15px; font-style: italic; color: var(--b-argile); }
/* Connexion : le monogramme et un brin de gypsophile */
.login { background: var(--b-lin); background-image: var(--b-grain); }
.login form { position: relative; overflow: hidden; border-radius: 28px; background: var(--b-carton); box-shadow: var(--b-sh-2); }
.login form::before { content: ''; display: block; width: 46px; height: 60px; margin-bottom: 4px; background: url(/illus/monogramme.svg) no-repeat center / contain; }
.login form::after { content: ''; position: absolute; right: -14px; top: -8px; width: 120px; height: 82px; pointer-events: none; background: var(--b-sauge); opacity: .22; transform: scaleY(-1);
  -webkit-mask: url(/illus/trait-cadeau.svg) no-repeat right bottom / contain; mask: url(/illus/trait-cadeau.svg) no-repeat right bottom / contain; }
.login .marque { color: var(--b-argile); font-style: italic; }
/* Navigation */
.nav { background: rgb(245 239 228 / 94%); }
.nav button.on { color: var(--b-argile); }
.nav button i { background: var(--b-argile); }
@media (max-width: 899px) { .nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }
@media (min-width: 900px) {
  .nav { background: var(--b-lin); background-image: var(--b-grain); box-shadow: inset -1px 0 0 var(--line); }
  .nav .brand { font-size: 20px; letter-spacing: -.015em; }
  .nav .brand::before { content: ''; display: block; width: 34px; height: 44px; margin-bottom: 10px; background: url(/illus/monogramme.svg) no-repeat left center / contain; }
  .nav button.on { background: var(--b-carton); box-shadow: var(--b-sh-1); }
}
/* Surfaces */
.liste, .panel, .tile, .bon, .calendar, .histoire, .facts { border-radius: 18px; background: var(--b-carton); box-shadow: var(--b-sh-1); }
.bandeau { border-radius: 12px; background: #F2E6CF; }
.av { background: var(--b-rose); color: var(--b-argile-fonce); font-family: var(--serif); font-style: italic; }
.av.is-new::after { background: var(--b-argile); }
.sms-tag, .lien { color: var(--b-argile-fonce); }
.layout .btn-primary, dialog .btn-primary, .login .btn-primary { background: var(--b-encre); color: var(--b-carton); }
.layout .btn-ghost, dialog .btn-ghost { background: var(--b-carton); box-shadow: inset 0 0 0 1px var(--line-2); }
.envoyer.btn-primary, .sms-row .btn-primary { min-height: 44px; padding: 0 16px; font-size: 15px; background: transparent; color: var(--b-encre); box-shadow: inset 0 0 0 1.5px var(--b-encre); }
.envoyer.btn-primary:hover, .sms-row .btn-primary:hover { background: var(--b-encre); color: var(--b-carton); }
.puce { border-radius: 999px; background: var(--b-carton); box-shadow: inset 0 0 0 1px var(--line-2); }
.puce[aria-pressed="true"] { background: var(--b-encre); color: var(--b-carton); box-shadow: none; }
.jour-h { font-size: 19px; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.jour-ligne.en-cours, .jour-ligne.suivante { background: color-mix(in srgb, var(--b-rose) 65%, var(--b-carton)); box-shadow: inset 3px 0 0 var(--b-argile); }
.ev { border-radius: 8px; background: var(--b-rose); box-shadow: inset 3px 0 0 var(--b-argile); }
.ev.neuf { box-shadow: inset 3px 0 0 var(--b-argile), inset 0 0 0 1.5px var(--b-argile); }
.cal-now { background: var(--b-argile); }
.fab { background: var(--b-encre); }
dialog.sheet, dialog.ask { background: var(--b-papier); }

/* =============================================================================
   13. Préférences
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-cta svg, .more svg { transition: none; }
}
@media (forced-colors: active) {
  .hero-arche::before, .hero-arche::after, .ticket::after, .login form::after, .svc-row .meta::before, .gift-line::before { display: none; }
  .gift-line { border: 1px solid CanvasText; }
}
@media print {
  .hero-arche, .cadeau-fond, .footer-guirlande { display: none; }
}

/* ---- L'en-tête en photo (2026-11-13) : Axelle au travail, dans l'arche, à la place du bouquet ---- */
.hero-arche.photo { aspect-ratio: 4 / 5; width: min(100%, 440px); }
.hero-arche.photo::before { left: 7%; right: 7%; top: 0; }
.hero-arche.photo::after { inset: 9px calc(7% + 9px) 9px; z-index: 2; border-color: color-mix(in srgb, var(--b-carton) 70%, transparent); }
.hero-photo { position: absolute; left: 7%; right: 7%; top: 0; bottom: 0; z-index: 1; overflow: hidden; border-radius: var(--b-r-arche); background: var(--b-lin); box-shadow: var(--b-sh-2); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hero-arche.photo .hero-mono { left: 0; bottom: 6%; z-index: 3; }
@media (forced-colors: active) { .hero-arche.photo { display: block; } }
/* Téléphone : la photo laisse voir la promesse et le bouton dès l'ouverture. */
@media (max-width: 1023px) { .hero-arche.photo { width: min(76%, 330px); } }

/* ---- Où venez-vous ? (2026-11-13) : la cliente choisit le salon ou chez Axelle, n'importe quel jour ---- */
.lieux-choix { margin: 22px var(--gutter, 16px) 4px; }
.lieux-choix .eyebrow { margin: 0 0 10px; }
.lieux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lieu-c { display: grid; gap: 4px; align-content: start; min-height: 76px; padding: 14px 14px 12px; border: 0; border-radius: var(--b-r-tuile, 12px); background: var(--b-carton, #fffdf8); box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; color: var(--ink); font: inherit; }
.lieu-n { font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.lieu-a { font-size: 13px; line-height: 1.3; color: var(--ink-3); }
.lieu-c[aria-pressed="true"] { background: var(--ink); color: var(--b-carton, #fffdf8); box-shadow: none; }
.lieu-c[aria-pressed="true"] .lieu-a { color: color-mix(in srgb, var(--b-carton, #fffdf8) 78%, transparent); }
.lieu-c:disabled { opacity: .55; cursor: default; }
.lieu-avant p { color: var(--ink-3); }
@media (max-width: 340px) { .lieux { grid-template-columns: minmax(0, 1fr); } }


/* ---- Cormorant Garamond (2026-11-13) : plus grande, sans interlettrage serré, chiffres alignés ---- */
.shell .display, .shell .h1, .shell .h2, #layer .h1, #layer .h2, .topbar .brand, .footer .mark, .recap .when, .day-head h2,
.group-title h2, .u-name, .ticket .time, .sugg .t, .day .dn, .dk-when b, .dk-total b, .dk-big, .legal h1,
.layout .h1, .panel h2, #sheet .sheet-head h2, .ask-corps h2 { letter-spacing: 0; }
.shell .display { font-size: 46px; line-height: 1.02; }
.shell .h1 { font-size: 40px; line-height: 1.04; }
.shell .h2 { font-size: 34px; line-height: 1.06; }
.shell .display em, .shell .h1 em, .shell .h2 em { font-weight: 500; }
@media (max-width: 380px) { .shell .display { font-size: 40px; } .shell .h1 { font-size: 36px; } .shell .h2 { font-size: 31px; } }
@media (min-width: 420px) { .shell .display { font-size: 50px; } }
@media (min-width: 1024px) { .shell .display { font-size: 72px; } .shell .h1, .shell .screen-title .h1 { font-size: 56px; } }
.sugg .t, .day .dn, .ticket .time, .price, .dk-when b, .dk-total b, .dk-big, .tile b, .chiffre b, .focus-qui b, .tl-h, .jour-h,
.svc-row .price, .row .price, .b-item .p, .univ-head .from { font-variant-numeric: lining-nums tabular-nums; }
.svc-row .price, .row .price { font-weight: 600; }
/* Le nom de l'institut, en texte, au centre des écrans intérieurs (le monogramme est retiré). */
.topbar-mark { font: 500 21px/1.1 var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Accueil mobile, pensé pour réserver (2026-11-13) ----
   Tout tient dans le premier écran : Axelle au travail, la promesse, « Réserver un soin »,
   la prochaine heure libre, puis les univers. La photo devient une fenêtre en arche, moins haute. */
@media (max-width: 1023px) {
  .shell .hero { padding-top: 10px; }
  .hero-arche.photo { width: 100%; max-width: 560px; aspect-ratio: auto; height: clamp(200px, 30vh, 290px); margin: 0 auto; }
  .hero-arche.photo::before { display: none; }
  .hero-arche.photo::after { inset: 8px; border-radius: 170px 170px 12px 12px / 130px 130px 12px 12px; }
  .hero-photo { left: 0; right: 0; border-radius: 180px 180px 18px 18px / 140px 140px 18px 18px; }
  .hero-photo img { object-position: 50% 60%; }
  .hero-txt { margin-top: 16px; }
  .shell .hero .display { font-size: 38px; line-height: 1.02; }
  .shell .hero .lede { font-size: 16px; line-height: 1.45; max-width: none; }
  .shell .hero-row { margin-top: 10px; }
  .hero-cta { display: flex; width: 100%; justify-content: center; margin-top: 18px; min-height: 56px; font-size: 16.5px; }
  .shell .next-free { justify-content: center; margin-top: 12px; }
  .cats { margin-top: 14px; }
}
@media (max-width: 380px) { .shell .hero .display { font-size: 34px; } .hero-arche.photo { height: clamp(180px, 27vh, 240px); } }
/* iPad portrait : un peu plus d'air, la photo un peu plus haute. */
@media (min-width: 700px) and (max-width: 1023px) { .hero-arche.photo { height: clamp(260px, 32vh, 340px); } .shell .hero .display { font-size: 52px; } .hero-cta { width: auto; display: inline-flex; padding: 0 34px; } .shell .next-free { justify-content: flex-start; } }