/* THIS RESIDENCE'S LOOK: Crest-Voland, the default (residences/README.md). One of a residence's
   own files (residences/FILES): every other stylesheet takes its accent and brand roles from the
   variables below and names no colour of a residence. The base greys stay in styles.css / theme.css.
   --accent-rgb is --accent as r,g,b, for the tints (rgba(var(--accent-rgb),.12)).
   The brand roles keep the names of the palette they were first drawn for (forest, gold, clay,
   ivory); here they map onto the warm ink, the red and white.

   Legendre Immobilier's graphic chart (« Déclinaison graphique Legendre Immobilier », CJ/ATD,
   23 April 2026, crest-voland issue #63): the group's shapes kept, WARM colours, the red as a
   touch only, titles in Rubik always in lower case, text in Calibri, premium but sober.
   Palette, from page 4 of the chart:
     Rouge Legendre  R229 G36 B54   #e52436   the touch (the link with the group)
     Gris taupe      R148 G130 B130 #948282   decoration, never small text (3.6:1 on white)
     Beige fonce     R235 G215 B200 #ebd7c8
     Blanc casse     R244 G236 B230 #f4ece6
   The shared stylesheets read the --warm-* roles below with the old cold grey as the fallback
   (var(--warm-bg,#e8e8e8)), so a residence that does not define them keeps its look.
   Contrast (WCAG, measured 2026-10-22): text #6b5d5d 6.3:1 on white, 5.4:1 on #f4ece6; the red
   4.5:1 on white but 3.9:1 on #f4ece6, so small red text uses --accent-strong (5.2:1 there). */
:root{
  --accent:#e52436;--accent-strong:#c01d2d;--accent-rgb:229,36,54;
  --brand-ink:#231f1e;--brand-ivory:#ffffff;--brand-forest:#231f1e;--brand-gold:var(--accent);--brand-clay:var(--accent);
  --warm-ink:#231f1e;--warm-ink-2:#4a403f;--warm-muted:#6b5d5d;--warm-taupe:#948282;
  --warm-paper:#f8f3ef;--warm-bg:#f4ece6;--warm-sand:#ebd7c8;--warm-line:#e3d6cc;
}
/* The seasons on the whole site (crest-voland issue #80; main.js writes <html data-current-season>,
   season-theme.js animates the switch). Summer is the chart's warm palette above. Winter takes the
   same roles in snow and glacier greys; the red touch, the type and the shapes do not change.
   Contrast (WCAG, computed 2026-10-23): ink 14:1 on the bg, muted #56606b 5.7:1 on the bg and 4.9:1
   on the sand, --accent-strong 5.4:1 on the bg; every pair at least as high as the summer one. */
html[data-current-season="winter"]{
  --warm-ink:#1f2329;--warm-ink-2:#3d4550;--warm-muted:#56606b;--warm-taupe:#8b96a1;
  --warm-paper:#f7f9fa;--warm-bg:#eef2f5;--warm-sand:#d8e2ea;--warm-line:#dbe2e8;
}

/* Legendre Immobilier type. Titles: Rubik, in lower case (the chart: "toujours en bas de casse"),
   which text-transform does, so no string is rewritten and the catalogue stays readable.
   Text: Calibri where the visitor has it, else Carlito, its metric-compatible twin. Calibri is
   Microsoft's and cannot be self-hosted; Rubik and Carlito are SIL Open Font License 1.1
   (./fonts/OFL-*.txt, from @fontsource 5.3.0, 2026-10-22), served from ./fonts rather than from
   Google because the sales office must work offline. Latin only (French and English); other glyphs
   fall through to the system face. */
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/rubik-500-latin.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:700;font-display:swap;src:url("./fonts/rubik-700-latin.woff2") format("woff2")}
@font-face{font-family:"Carlito";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/carlito-400-latin.woff2") format("woff2")}
@font-face{font-family:"Carlito";font-style:normal;font-weight:700;font-display:swap;src:url("./fonts/carlito-700-latin.woff2") format("woff2")}
:root{
  --brand-font:Calibri,"Carlito","Helvetica Neue",Helvetica,Arial,sans-serif;
  --brand-title-font:"Rubik","Helvetica Neue",Helvetica,Arial,sans-serif;
}
html,body,#app{font-family:var(--brand-font)}
/* The title roles. The chart is a rule, not a default, so it wins over the uppercase and the wide
   tracking the shared sheets give these roles (hence !important: those sheets load after this one). */
h1,h2,h3,h4,.primary,.cta-ghost,.construction-card button,.guide-hero-copy h1{
  font-family:var(--brand-title-font)!important;text-transform:lowercase!important}
/* « Tous les titres » (crest-voland issue #73): the names the visitor navigates by are titles too, the scales in
   the header, the residence's sections (sidebar, rail, chooser), the camera presets, the header's Contact, and the
   name at the head of each list card (a place, a destination, an apartment, a path; the time or price beside it in
   a <b> is a value and keeps the text face). The RAVEL wordmark is a logo and keeps its own case. */
header nav button,.sec-label,.tool-preset span,#contactBtn .label,.menu-contact,.menu-ticket,#panel .card strong{
  font-family:var(--brand-title-font)!important;text-transform:lowercase!important;letter-spacing:0!important}
#panel .card strong{font-weight:500}
h1,h2{font-weight:500;letter-spacing:-.015em}
h3,h4{font-weight:500}
/* Lower-case Rubik at the old 9px kicker size is too small to read. */
:root #panel .eyebrow{font-size:11px}
/* The small kickers and labels were upper case with wide tracking ("artificial codes"): they keep the
   catalogue's own case, in the text face, and the red ones the stronger red for contrast. */
.eyebrow,.cmp-kicker,.cmp-rowlabel,.viewpoint small,.guide-card-cat,.fact small,.media-kind,.pending,.apt-eyebrow,.cmp-ref-badge,.guide-block h2{
  text-transform:none!important;letter-spacing:.02em!important}
.eyebrow,.guide-card-cat{font-family:var(--brand-title-font)!important;text-transform:lowercase!important;font-weight:500}
.eyebrow,.guide-card-cat,.construction-card>span{color:var(--accent-strong)}

/* Legendre's SHAPES (« Conservation des formes », page 3 of the chart; pages 1, 6 and 9 show them in
   use): a panel is a quadrilateral, not a rectangle. One or two edges lean a few pixels (« dessin »),
   every corner stays round (« angles »), and shapes set side by side keep a slanted gap of constant
   width between them (« agencement »). Flat fills, no outline: a border would vanish along a cut edge.
   One shape() for every element below, steered per element by eight corner offsets (each corner
   moved INTO the box by x / y) and a radius. The corners are quadratic curves with the control point
   on the corner, so they stay round whatever the angle; --q-r is therefore larger than the
   border-radius it replaces. Offsets carry a unit: calc(0 + 12px) is invalid, calc(0px + 12px) is not.
   shape() is Chrome 135, Firefox 148, Safari 18.4 (MDN browser-compat-data, read 2026-10-23); an older
   browser skips the block and keeps the rounded rectangles. A clip also cuts box-shadow and the focus
   outline, so the shaped controls draw their focus ring inside. */
@supports (clip-path:shape(from 0 0,line to 100% 0,line to 0 100%,close)){
  #panel,.card,.fact,.spec,.viewpoint,.contact,.primary,.contact-actions .cta-solid,.enq-primary,.guide-primary,.media-tile img,.media-tile video,.guide-card,
  .guide-hero,.guide-gallery button,.guide-entry-photo,
  .enq-form,.construction-card,.cmp-bar{
    --q-r:14px;--q-tlx:0px;--q-tly:0px;--q-trx:0px;--q-try:0px;--q-brx:0px;--q-bry:0px;--q-blx:0px;--q-bly:0px;
    clip-path:shape(from calc(var(--q-tlx) + var(--q-r)) var(--q-tly),
      line to calc(100% - var(--q-trx) - var(--q-r)) var(--q-try),
      curve to calc(100% - var(--q-trx)) calc(var(--q-try) + var(--q-r)) with calc(100% - var(--q-trx)) var(--q-try),
      line to calc(100% - var(--q-brx)) calc(100% - var(--q-bry) - var(--q-r)),
      curve to calc(100% - var(--q-brx) - var(--q-r)) calc(100% - var(--q-bry)) with calc(100% - var(--q-brx)) calc(100% - var(--q-bry)),
      line to calc(var(--q-blx) + var(--q-r)) calc(100% - var(--q-bly)),
      curve to var(--q-blx) calc(100% - var(--q-bly) - var(--q-r)) with var(--q-blx) calc(100% - var(--q-bly)),
      line to var(--q-tlx) calc(var(--q-tly) + var(--q-r)),
      curve to calc(var(--q-tlx) + var(--q-r)) var(--q-tly) with var(--q-tlx) var(--q-tly),
      close);
    border-radius:0!important}

  /* « Dessin »: the big shape of page 3. The left edge leans in towards the bottom, the bottom edge
     rises to the right, the top stays straight (the size buttons hang off its top-left corner). */
  #panel{--q-r:34px;--q-blx:18px;--q-brx:5px;--q-bry:18px;border:0!important}
  .enq-form,.construction-card{--q-r:30px;--q-blx:14px;--q-brx:4px;--q-bry:16px}
  .cmp-bar{--q-r:20px;--q-blx:6px;--q-bry:6px;border:0!important}

  /* The cards of a list: the same drawing, small, filled with the warm off-white instead of outlined. */
  .card{--q-r:16px;--q-blx:5px;--q-brx:1px;--q-bry:6px;border-color:transparent!important;
    background:var(--warm-bg)!important;box-shadow:none!important}
  .card:hover{background:color-mix(in srgb,var(--warm-bg),var(--warm-sand) 45%)!important}
  /* Muted text on the sand is 4.505:1 (measured 2026-10-23), too close to 4.5: a selected card's small
     lines take the darker ink. */
  .card.selected{background:var(--warm-sand)!important}
  .card.selected small{color:var(--warm-ink-2)}
  /* The favourite / compare toggles beside a list card: the same fill, so the row reads as one group. */
  .row-actions .act-btn.compact:not([aria-pressed="true"]){border-color:transparent;background:var(--warm-bg)}
  .row-actions .act-btn.compact:not([aria-pressed="true"]):hover{background:var(--warm-sand)}
  .guide-card{--q-r:22px;--q-blx:6px;--q-bry:9px}
  .guide-card:hover{box-shadow:none}
  .viewpoint,.contact{--q-r:14px;--q-bry:5px}

  /* « Agencement »: boxes in a row are parallelograms leaning the same way, so the gap between two
     neighbours is slanted and of constant width (page 3, bottom right). */
  .fact{--q-r:12px;--q-tlx:5px;--q-brx:5px;background:var(--warm-bg)!important}
  .spec{--q-r:13px;--q-tlx:6px;--q-brx:6px;background:var(--warm-bg)!important}

  /* The red call to action of page 9: its right edge leans, its bottom rises a little. */
  .primary,.contact-actions .cta-solid,.enq-primary,.guide-primary{--q-r:12px;--q-brx:7px;--q-bly:3px;box-shadow:none!important}

  /* « Angles »: a photograph is cut like page 6, the left edge leaning, the bottom rising. */
  .media-tile img,.media-tile video,.guide-gallery button{--q-r:12px;--q-tlx:7px;--q-bry:7px}
  .guide-hero{--q-r:30px;--q-tlx:16px;--q-bry:18px}
  .guide-entry-photo{--q-r:12px;--q-tlx:4px;--q-bry:4px}

  .card:focus-visible,.primary:focus-visible,.contact-actions .cta-solid:focus-visible,.enq-primary:focus-visible,.guide-primary:focus-visible,.guide-card:focus-visible{outline:2px solid var(--warm-ink);outline-offset:-4px}
  .primary:focus-visible,.contact-actions .cta-solid:focus-visible,.enq-primary:focus-visible,.guide-primary:focus-visible{outline-color:#fff}

  /* The side panel's last line (« Mesure d'audience ») clears the rising bottom edge. */
  @media (min-width:721px),(max-height:500px){#panel{padding-bottom:calc(24px + var(--q-bry))}}

  /* A phone held upright: the panel is a bottom sheet, so the cut moves to its TOP edge, which rises to
     the right like the top of page 3's small shape. Its last call to action is the sheet's own bottom
     edge (responsive.css) and stays a plain band. */
  @media (max-width:720px) and (min-height:501px){
    #panel{--q-r:26px;--q-blx:0px;--q-brx:0px;--q-bry:0px;--q-tly:12px}
    #panel > .primary:last-child,#panel .tab-body > .primary:last-child{clip-path:none}
  }
  /* A phone on its side: the side panel again, smaller cuts. */
  @media (max-height:500px){
    #panel{--q-r:22px;--q-blx:10px;--q-brx:3px;--q-bry:10px}
  }
}

/* #66 picture viewer (lightbox.js, lightbox.css): the chart's lower case on the viewer's words, as the
   reference draws them (« masquer », « diaporama », « ravel · crest-voland », « un été à crest-voland »).
   The modes' label and the list's heading keep their small capitals: the reference sets them so. */
.lightbox.pv .pv-kicker,.lightbox.pv .pv-season,.lightbox.pv .ann-tools button,.lightbox.pv .pv-actions button span{text-transform:lowercase}
.lightbox.pv .lightbox-title{font-family:var(--brand-title-font)!important;text-transform:lowercase!important}