/*
Theme Name: Groupe Protech
Theme URI: https://www.groupeprotech.fr
Author: Groupe Protech
Description: Vitrine theme for Groupe PROTECH - one screenful, the group signature and the two entity sites (Protech Clim, Protech Energy). Single stylesheet, no build step, no dependencies.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: groupe-protech
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Two blocks to edit: the colours, and the size scale. Every size in the
   stylesheet comes from a token here, and section 8 restates the same tokens
   in vh units so that on a desktop-shaped screen the whole vitrine lands
   inside one viewport.
   ========================================================================== */

:root {
  /* ---- GROUP COLOURS (the brochure: grey cap, gold field) ---- */
  --grey: #4B4644;          /* masthead and the cap above the arc */
  --grey-deep: #3A3634;     /* footer */
  --gold: #FEC70D;          /* gold field, logo accents, gold discs */
  --gold-deep: #F5A11E;     /* warm end of the gold gradient */
  --gold-light: #FFE81A;    /* bright end of the gold gradient */
  --ink: #332F2C;           /* text on gold and on the white cards */
  --ink-soft: rgba(51, 47, 44, .74);
  --white: #ffffff;

  /* ---- ENTITY COLOURS (taken from each entity's own theme) ---- */
  --clim: #1B61AC;
  --clim-deep: #17457F;
  --energy: #A0C02C;
  --energy-deep: #53650D;

  /* ---- PAGE GRID ---- */
  --shell-max: 1360px;
  --card-max: 900px;        /* the two cards plus the gap between them */
  --gutter: 26px;
  --radius-card: 22px;

  /* ---- SIZE SCALE ----
     These are the narrow-screen values, where six trades and two stacked
     cards cannot fit a phone screen and the page simply scrolls. Section 8
     restates them against the viewport height for the one-screen layout. */
  /* The signature is one proportional system, as on the brochure: only
     --logo-h varies with the viewport (section 8), and the two type sizes and
     every gap in the masthead are fractions of it. The fractions are measured
     off the brochure and off a render - see section 3. */
  --logo-h: 118px;          /* mark + wordmark, the stacked lockup */
  --brand-drop: 0;          /* how far the lockup sits below the motto */
  --mast-pt: 26px;
  --mast-pb: 20px;
  --fs-activities: calc(var(--logo-h) * .129);
  --fs-tagline: calc(var(--logo-h) * .142);
  /* The motto's line spacing is set as a length, not a ratio of its type size:
     it started as the distance between the lockup's own two baselines (.2114
     of --logo-h, measured off a render) and is opened a hair past it. */
  --motto-lh: calc(var(--logo-h) * .225);

  --arc-h: 140px;           /* height of the arc box */
  --arc-w: 9px;             /* weight of the white band */
  --badge: 60px;            /* diameter of a trade disc */
  --fs-label: 12px;

  --brands-pt: 40px;
  --brands-pb: 34px;
  --card-pad: 24px;
  --card-logo-h: 38px;
  --fs-card: 15px;

  --foot-pad: 20px;
  --foot-logo-h: 44px;
  --fs-foot-activities: calc(var(--foot-logo-h) * .1906);
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* min-height, not height: the vitrine is sized to fit one screen, but a
   viewport too short for it scrolls rather than losing the bottom of the page */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--ink);
  background: var(--grey);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: inherit; }

h1, h2, h3, p, ul { margin: 0; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
}

/* the three bands share out the height: the gold field takes the slack */
.site-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.screen-reader-text:focus {
  width: auto; height: auto;
  margin: 0; padding: 12px 20px;
  clip-path: none;
  z-index: 10;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ==========================================================================
   3. MASTHEAD - the grey field with the group signature
   ========================================================================== */

.masthead {
  flex: none;
  background: var(--grey);
  padding: var(--mast-pt) var(--gutter) calc(var(--mast-pb) + var(--brand-drop));
}

/* On the brochure the signature is a single centred axis: the mark over the
   wordmark, the activities line directly under the wordmark and as wide as
   it, then the motto below. Every measurement below is a fraction of
   --logo-h, taken off the brochure cover:

     activities   gap .081, cap height .116, width 1.00 of the lockup's width
     motto        gap .30 (the cover's .48 is a poster proportion and does not
                  survive a screen-high band), width .94 of the lockup's

   The lockup is 611 x 299, i.e. 2.043 wide for 1 high, and its lowest ink is
   the wordmark's baseline - so "under the lockup" is already "under the
   wordmark", with nothing to clear. */
.masthead-inner {
  max-width: 1720px;
  margin: 0 auto;
  /* The lockup and the motto face each other across the centre; the gap is the
     same fraction of --logo-h that separated them vertically.
     flex-end puts the motto's last line on the activities line - the last line
     of the lockup. Aligning the boxes rather than the baselines leaves the two
     baselines within a pixel of each other, because the space a line box keeps
     below its baseline is .35 of the activities size against .275 of the
     motto's, and the two sizes are close. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--logo-h) * .28);
  text-align: center;
}

.masthead-brand {
  min-width: 0;
  /* Offset rather than a margin: with align-items: flex-end a margin would
     resize the flex line and carry the motto along with it. Shifting the
     lockup leaves the line - and so the motto - untouched. */
  position: relative;
  top: var(--brand-drop);
}

.masthead-logo { margin: 0; }

.masthead-logo img {
  display: block;
  height: var(--logo-h);
  width: auto;
  margin: 0 auto;
}

/* The three activities, in the masthead and again in the footer: gold words,
   white separators. Printed by groupe_protech_activities(). */
.activities {
  margin: 0;
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.activities-slash {
  color: var(--white);
}

.masthead-activities {
  /* .081 of the lockup down to the capitals, less the line box's own top
     leading, which is .29 of the 1.3 line-height */
  margin-top: calc(var(--logo-h) * .116 - var(--fs-activities) * .377);
  font-size: var(--fs-activities);
}

/* The motto, over two lines. Column 1 holds the lead-ins, right-aligned;
   column 3 holds the two key words, left-aligned, so "Groupe" sits directly
   above "Service". Column 2 is one gold rule spanning both rows - a single
   element, so the divider cannot read as two segments meeting. */
.tagline {
  display: grid;
  grid-template-columns: auto 1.5px auto;
  column-gap: .5em;
  justify-content: center;
  flex: none;
  /* flex-end aligns the boxes, and a line box keeps half its leading below the
     last baseline - which grew with --motto-lh. The negative bottom margin
     hands that back, so the last baseline lands on the activities line rather
     than .023 of the lockup above it. Measured off a render. */
  margin: 0 0 calc(var(--logo-h) * -.03);
  color: var(--white);
  font-size: var(--fs-tagline);
  font-weight: 300;
  letter-spacing: .1em;
  line-height: var(--motto-lh);
  text-transform: uppercase;
}

.tagline-lead {
  grid-column: 1;
  /* letter-spacing leaves a trailing gap after the last letter; pulling it
     back keeps the rule optically centred between the two columns */
  margin-right: -.1em;
  text-align: right;
  white-space: nowrap;
}

.tagline-key {
  grid-column: 3;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: left;
  white-space: nowrap;
}

.tagline-rule {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  /* The two rows are taller than the letters, so the rule is inset back to the
     ink - the two rows less the one row plus one cap height the letters
     actually occupy, halved - then let out by .16em at each end so it reaches
     a little past the first capital and the last baseline. */
  margin-block: calc((var(--motto-lh) - var(--fs-tagline) * .72) / 2
                     - var(--fs-tagline) * .16);
  /* The letters do not sit centred in those two rows - a line box keeps more
     room under the baseline than over the capitals - so a rule centred on the
     rows overshoots more at the top. This puts the two ends even. */
  position: relative;
  top: calc(var(--fs-tagline) * .04);
  background: var(--gold);
}

/* ==========================================================================
   4. THE GOLD FIELD, THE ARC AND THE TRADE DISCS
   ========================================================================== */

.gold {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(115deg,
    var(--gold-deep) 0%,
    var(--gold) 44%,
    var(--gold-light) 100%);
}

/* the polygon network, laid over the gradient only */
.gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/img/mesh.svg) center / cover no-repeat;
  opacity: .5;
  pointer-events: none;
}

/* positioned children paint above the mesh */
.gold > * { position: relative; }

/* -- the arc ---------------------------------------------------------------
   The white band is the quadratic Bezier (0,44) (800,364) (1600,44) in a
   1600x300 viewBox drawn with preserveAspectRatio="none", and the discs are
   placed in percentages of the same box by groupe_protech_arc_y(). Because
   both are proportional to the box, the discs sit on the band whatever height
   the box is given - which is what lets --arc-h shrink with the viewport.
   The stroke is the one thing that would distort, hence non-scaling-stroke. */
.arc {
  flex: none;
  position: relative;
  height: var(--arc-h);
  /* The masthead's height is fractional, so its bottom edge lands mid-pixel
     and a subpixel row of the gold used to show through at the seam. The
     negative margin closes it onto the grey strip - the cap is 44/300 deep at
     its shallowest, so a 12% band always stays hidden under it. */
  margin-top: -1px;
  background: linear-gradient(var(--grey), var(--grey)) top / 100% 12% no-repeat;
}

.arc-shape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.arc-cap { fill: var(--grey); }

.arc-line,
.arc-node {
  fill: none;
  stroke: var(--white);
  vector-effect: non-scaling-stroke;
}

.arc-line { stroke-width: var(--arc-w); }

/* the two dots capping the band: a hair-length segment with a round cap, so
   they stay circular however the box is proportioned */
.arc-node {
  stroke-width: calc(var(--arc-w) * 1.9);
  stroke-linecap: round;
}

.trades {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* zero-sized anchor: the disc is centred on the curve point, the label hangs
   below it, and neither one shifts the other */
.trade {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}

.trade-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 max(3px, .26vw) rgba(255, 255, 255, .95),
    0 8px 20px rgba(66, 48, 8, .3);
}

.trade--dark .trade-disc {
  background: linear-gradient(158deg, #5C5652 0%, #37322F 100%);
  color: var(--white);
}

.trade--gold .trade-disc {
  background: linear-gradient(158deg, #FFDB55 0%, #EFA10F 100%);
  color: #4A3803;
}

.trade-icon {
  width: calc(var(--badge) * .46);
  height: auto;
  stroke-width: 1.7;
}

.trade-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  margin-top: calc(var(--badge) / 2 + .7em);
  width: max-content;
  max-width: 11em;
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
}

/* ==========================================================================
   5. THE TWO ENTITY CARDS
   ========================================================================== */

.brands {
  /* the top padding clears the labels of the two lowest discs, which hang
     past the bottom of the arc box */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--brands-pt) var(--gutter) var(--brands-pb);
}

.brand-grid {
  max-width: var(--card-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.6vw, 60px);
}

.brand-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  border-top: 5px solid var(--brand);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    0 18px 40px rgba(88, 62, 6, .18),
    0 2px 6px rgba(88, 62, 6, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.brand-card:hover,
.brand-card:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 26px 54px rgba(88, 62, 6, .26),
    0 2px 6px rgba(88, 62, 6, .08);
}

.brand-logo {
  height: var(--card-logo-h);
  width: auto;
}

.brand-kicker {
  margin-top: 1.1em;
  color: var(--brand-deep);
  font-size: calc(var(--fs-card) * .82);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.brand-list {
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45em;
  font-size: var(--fs-card);
  font-weight: 600;
}

.brand-list li {
  display: flex;
  align-items: flex-start;
  gap: .7em;
}

.brand-list .icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  /* centred on the first line: half the difference between the line box and
     the icon, so a wrapped item keeps its tick beside the first line */
  margin-top: .125em;
  color: var(--brand);
}

/* A stack, not a row: side by side the button and the address only just fit,
   and since the card's width is fixed while the type follows the viewport
   height, one card would wrap and the other would not - the two would stop
   matching. Stacked, the button fills the card and nothing can wrap. */
.brand-foot {
  margin-top: 1.3em;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: .7em;
}

.brand-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .8em 1.5em;
  border-radius: 999px;
  background: var(--brand-deep);
  color: var(--white);
  font-size: var(--fs-card);
  font-weight: 700;
}

.brand-cta .icon {
  width: 1.15em;
  height: 1.15em;
  transition: transform .25s ease;
}

.brand-card:hover .brand-cta .icon { transform: translateX(4px); }

.brand-url {
  color: rgba(51, 47, 44, .66);
  font-size: calc(var(--fs-card) * .84);
  letter-spacing: .04em;
}

/* ==========================================================================
   6. A PLAIN PAGE (mentions légales, confidentialité, ...)
   ========================================================================== */

.page-body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 46em;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) var(--gutter);
  background: var(--white);
}

.page-body h1 {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -.015em;
}

.page-body > * + * { margin-top: 1em; }

.page-body a { color: var(--clim-deep); }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-footer {
  flex: none;
  background: var(--grey-deep);
  color: rgba(255, 255, 255, .84);
  padding: var(--foot-pad) var(--gutter);
}

/* One row: the lockup, the contact details, the notice. flex-wrap is only a
   safety net for a window too narrow to hold them. */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9em 1.7em;
}

.footer-brand { flex: none; }

.footer-logo {
  display: block;
  height: var(--foot-logo-h);
  width: auto;
}

/* Part of the lockup, not a line under the picture: in the wide artwork the
   wordmark starts 1.578 of the logo's height in from the left edge and runs
   3.157 of that height wide, and its baseline is at .497 from the top - so the
   line is indented past the mark, sized to the wordmark's width (.1993, since
   the line runs 15.84 times its own size) and pulled up under its baseline.
   All measured off the artwork; see the table in README. */
.footer-activities {
  margin-left: calc(var(--foot-logo-h) * 1.578);
  /* up from the box bottom to .139 below the wordmark's baseline - .503 of the
     height, less that gap - then less the line box's own top leading */
  margin-top: calc(var(--foot-logo-h) * -.293 - var(--fs-foot-activities) * .377);
  font-size: var(--fs-foot-activities);
}

.footer-contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7em 1.4em;
  font-size: var(--fs-card);
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: .6em;
}

.footer-contact .icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--gold);
}

.footer-contact a { text-decoration: none; }

.footer-contact a:hover { text-decoration: underline; }

.footer-note {
  margin: 0;
  color: rgba(255, 255, 255, .52);
  font-size: calc(var(--fs-card) * .86);
}

/* ==========================================================================
   8. ONE-SCREEN LAYOUT
   From 901px up the page is laid out against the viewport height: the same
   tokens as section 1, restated in vh so the masthead, the arc, the two cards
   and the footer add up to less than a screen on every common desktop ratio.
   ========================================================================== */

@media (min-width: 901px) {
  :root {
    /* the stacked lockup is only 2.04 wide for 1 high, so the viewport height
       is what bounds it - the pair of columns below no longer competes for the
       same line */
    --logo-h: clamp(80px, 12.5vh, 158px);
    /* The grey does not end at the masthead: the arc's cap carries it down over
       half the arc's height on average, so the signature reads high in the
       band unless the space above it is the larger of the two. */
    --mast-pt: clamp(20px, 5vh, 60px);
    --mast-pb: clamp(12px, 2.2vh, 30px);
    --brand-drop: calc(var(--logo-h) * .06);

    --arc-h: clamp(74px, 14vh, 158px);
    --arc-w: clamp(6px, 1.1vh, 13px);
    --badge: clamp(42px, 7.4vh, 84px);
    --fs-label: clamp(9.5px, 1.35vh, 14px);

    /* The two lowest discs sit at .663 of the arc box and their labels hang
       below it: half a disc, then .7em of gap and two 1.22 lines of label,
       less the .337 of the box still below the discs. Derived, so a change to
       --arc-h, --badge or --fs-label cannot make the labels collide with the
       heading below. The 1.6vh at the end is the breathing room. */
    --brands-pt: calc(var(--badge) / 2 + var(--fs-label) * 3.14
                      - var(--arc-h) * .337 + 1.6vh);
    --brands-pb: clamp(18px, 3vh, 40px);
    --card-pad: clamp(18px, 2.8vh, 40px);
    --card-logo-h: clamp(30px, 4.6vh, 60px);
    --fs-card: clamp(13px, 1.8vh, 19px);

    --foot-pad: clamp(14px, 2.4vh, 32px);
    --foot-logo-h: clamp(42px, 5.4vh, 62px);
  }
}

/* ==========================================================================
   9. TABLET AND PHONE
   Below 901px the one-screen layout is off and the page scrolls: six trades
   and two cards cannot share a phone screen. The signature stacks, the arc
   flattens into a band with the discs in a plain grid under it, the two cards
   become one column and the footer's three blocks stack.
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    /* One column, so the card is sized to what it holds rather than to the
       screen: at full width a single card left its content in the middle
       third and the rest read as empty white. */
    --card-max: 480px;
    /* the lockup carries the activities line inside its own height, so it has
       to be big enough for that line to stay legible */
    --foot-logo-h: 52px;
  }

  /* The signature stacks. align-items has to be re-stated: once the direction
     is a column, flex-end means the right-hand edge, not the baseline. */
  .masthead-inner {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--logo-h) * .2);
  }

  .arc {
    height: auto;
    /* the box is now much taller than the band inside it, so the strip that
       closes the seam is a fixed few pixels rather than a share of the box */
    background: linear-gradient(var(--grey), var(--grey)) top / 100% 3px no-repeat;
  }

  .arc-shape { height: clamp(44px, 9vw, 74px); }

  /* the end dots would turn into ellipses in a box this shallow */
  .arc-node { display: none; }

  .trades {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(18px, 4vw, 30px) clamp(6px, 2.5vw, 22px);
    padding: clamp(56px, 11vw, 96px) clamp(6px, 3vw, 20px) 0;
  }

  .trade {
    position: static;
    width: 100px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7em;
  }

  .trade-disc,
  .trade-label {
    position: static;
    transform: none;
    margin: 0;
  }

  .trade-label {
    width: 100%;
    max-width: none;
  }

  .brands { --brands-pt: clamp(30px, 6vw, 52px); }

  .brand-grid { grid-template-columns: 1fr; }

  /* stacked rather than wrapped: at these widths neither the three blocks nor
     the three contact items fit one row, and both broke unevenly */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2em;
  }

  .footer-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: .8em;
  }

  /* the address runs to two lines on a phone, so its icon sits on the first of
     them rather than beside the middle */
  .footer-contact li { align-items: flex-start; }

  .footer-contact .icon { margin-top: .2em; }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
    /* both lockups are bounded by the screen as well: 2.043 wide for 1 high
       for the stacked one, 4.741 for the wide one in the footer */
    --logo-h: min(118px, 33vw);
    --foot-logo-h: min(52px, 15vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-card,
  .brand-cta .icon { transition: none; }

  .brand-card:hover,
  .brand-card:focus-visible { transform: none; }

  .brand-card:hover .brand-cta .icon { transform: none; }
}

@media print {
  .gold::before { display: none; }

  .brand-card { box-shadow: none; border: 1px solid #ccc; }
}