/*
Theme Name: Urgence Toiture 911
Theme URI: https://toiture911.com/
Author: Fred
Description: Block theme for Urgence Toiture 911.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ut911
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks
*/

/* ── Poppins, the only family (Figma maquettes 2026-11) ─────────────
   The maquettes set headings in DELIRIUM NCV; until a licensed web font is
   supplied, headings use Poppins Bold uppercase (--ut-font-display). */
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/Poppins-Regular.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-style:italic;font-display:swap;src:url(assets/fonts/Poppins-Italic.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(assets/fonts/Poppins-SemiBold.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/Poppins-Bold.woff2) format("woff2")}

/* ── Design tokens ─────────────────────────────────────────────────
   The only place a colour value may be written. */
:root {
  --ut-red: #de2516; --ut-red-hover: #c91100; --ut-red-deep: #710000;
  --ut-ink: #171717; --ut-text: #414141; --ut-muted: #6b6b6b;
  --ut-paper: #ffffff; --ut-sand: #f2f2f2; --ut-line: #d9d9d9;
  --ut-red-grad: linear-gradient(90deg, var(--ut-red-deep) 0%, var(--ut-red) 100%);
  --ut-red-grad-band: linear-gradient(100deg, #9d0000 0%, var(--ut-red) 100%);

  --ut-font: Poppins, system-ui, sans-serif;
  --ut-font-display: Poppins, system-ui, sans-serif;
  --ut-fs-xs: 14px; --ut-fs-base: 16px; --ut-fs-md: 20px; --ut-fs-lg: 24px;
  --ut-fs-xl: clamp(30px, 3.6vw, 48px);
  --ut-fs-2xl: clamp(38px, 5.4vw, 72px);

  --ut-s1: 8px; --ut-s2: 16px; --ut-s3: 24px; --ut-s4: 32px;
  --ut-s5: 48px; --ut-s6: 64px; --ut-s7: 96px; --ut-s8: 120px;
  --ut-section: clamp(64px, 7vw, 110px);
  --ut-container: 1320px; --ut-gutter: clamp(20px, 4.2vw, 60px);
  --ut-radius: 6px; --ut-pill: 999px;
  --ut-shadow: 0 10px 30px rgb(23 23 23 / .08); --ut-shadow-lg: 0 16px 40px rgb(23 23 23 / .14);
  --ut-rule-dark: rgb(255 255 255 / .14); /* hairline on ink */
  --ut-rule-dark-strong: rgb(255 255 255 / .35); --ut-tint-dark: rgb(255 255 255 / .08); /* outline / hover wash on ink */
  --ut-shadow-up: 0 -10px 30px rgb(0 0 0 / .25); /* bars pinned to the bottom of the window */
  --ut-scrim-1: rgb(0 0 0 / .78); --ut-scrim-2: rgb(0 0 0 / .45);
  --ut-scrim-3: rgb(0 0 0 / .5); --ut-scrim-4: rgb(0 0 0 / .82); /* photo overlay stops */
  --ut-watermark: rgb(222 37 22 / .1);
}
@media (max-width: 599px) { :root { --ut-fs-base: 15px; } }

/* Read by apigoat plugins. */
:root {
  --brand-primary: var(--ut-ink); --brand-primary-dark: var(--ut-ink);
  --brand-base: var(--ut-paper); --brand-contrast: var(--ut-text);
  --brand-gray-100: var(--ut-sand); --brand-radius: var(--ut-radius);
}

html {
  scroll-behavior: smooth;
  /* clip instead of hidden: prevents horizontal scroll without creating a
     new scroll container, which would break position:sticky on the header */
  overflow-x: clip;
}

body {
  background: var(--ut-paper);
  font-family: var(--ut-font);
  font-size: var(--ut-fs-base);
  line-height: 1.6;
  color: var(--ut-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Headings: uppercase display type, as in the maquettes. */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--ut-font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ut-ink);
  text-wrap: balance;
}
h1 { font-size: var(--ut-fs-2xl); }
h2 { font-size: var(--ut-fs-xl); }
h3 { font-size: var(--ut-fs-lg); }
h4 { font-size: var(--ut-fs-md); }
/* Small headings (h3 and below inside components) read better in sentence case. */
:where(.ut-prose, .ut-steps, .ut-trio, .ut-tile, .ut-entry) :is(h3,h4) { text-transform: none; }

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

:where(.wp-site-blocks) > * { margin-block-start: 0; }
:root :where(.is-layout-constrained) > * { margin-block-start: 0; }
/* Same for flow layouts: every band this theme ships brings its own vertical
   padding, so the block editor's default gap between them is dead space. */
:root :where(.is-layout-flow) > * { margin-block-start: 0; }
/* The overlay header is taken out of flow, so its containing block has to be
   the page wrapper rather than the viewport. */
.wp-site-blocks { position: relative; }

:where(.wp-site-blocks *:focus) { outline: none; }
:where(.wp-site-blocks *:focus-visible) {
  outline: 2px solid var(--ut-red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Header ──────────────────────────────────────────────────────
   Ink bar; on pages with a .ut-cover (body.has-photo-hero) it is lifted out
   of flow and the cover's own top gradient keeps it readable. */
header.wp-block-template-part{position:relative;z-index:100}
body.has-photo-hero header.wp-block-template-part{position:absolute;top:0;left:0;right:0}
.site-header{padding:0 var(--ut-gutter);background:var(--ut-ink)}
body.has-photo-hero .site-header{background:transparent}
.site-header .site-header-row{min-height:120px;gap:var(--ut-s3);max-width:var(--ut-container);margin-inline:auto}
.site-header .wp-block-site-logo img{width:240px;height:auto}
.site-header-end{gap:var(--ut-s4)}
.site-header .wp-block-navigation{color:var(--ut-paper);font:700 14px/1.2 var(--ut-font);text-transform:uppercase;letter-spacing:.02em}
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation a.wp-block-navigation-item__content{color:var(--ut-paper);text-decoration:none;padding:12px 10px;display:inline-block}
.site-header .wp-block-navigation a:hover{color:var(--ut-paper);text-decoration:underline;text-decoration-color:var(--ut-red);text-decoration-thickness:2px;text-underline-offset:.5em}
.site-header .wp-block-navigation__submenu-icon{color:var(--ut-red)}
.site-header .wp-block-navigation__container{gap:var(--ut-s2)}
.site-header .wp-block-navigation__responsive-container-open{color:var(--ut-paper)}
.site-header .wp-block-navigation__responsive-container-close{color:var(--ut-ink)}
.site-header .is-cta-duplicate{display:none}
/* Visible only inside the OPEN overlay, as the primary red call button. */
.site-header .is-menu-open .is-cta-duplicate{display:block;align-self:stretch;width:100%;margin-top:var(--ut-s2)}
.site-header .wp-block-navigation__responsive-container.is-menu-open .is-cta-duplicate a.wp-block-navigation-item__content{display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;min-height:52px;padding:0 var(--ut-s3);border-radius:var(--ut-pill);background:var(--ut-red);color:var(--ut-paper);font:700 15px/1.2 var(--ut-font);text-transform:uppercase;text-decoration:none;white-space:nowrap}
.site-header .wp-block-navigation__responsive-container.is-menu-open .is-cta-duplicate a.wp-block-navigation-item__content:hover{background:var(--ut-red-hover);text-decoration:none}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container{border:0;border-top:3px solid var(--ut-red);border-radius:0 0 var(--ut-radius) var(--ut-radius);padding:var(--ut-s1);box-shadow:var(--ut-shadow-lg)}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a,
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content{color:var(--ut-ink);font-size:14px}
.site-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--ut-paper);padding:var(--ut-s4) var(--ut-gutter)}
.site-header .wp-block-navigation__responsive-container.is-menu-open a,
.site-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content{color:var(--ut-ink);font-size:var(--ut-fs-md);padding:10px 0}
.site-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content,.wp-block-navigation__container,.wp-block-navigation-item,.wp-block-navigation__submenu-container){align-items:flex-start;text-align:left}
.ut-header-cta{white-space:nowrap}
.ut-header-cta__short{display:none}
@media(max-width:1100px){
  .site-header .wp-block-site-logo img{width:190px}
  .site-header-end{gap:var(--ut-s2)}
}
@media(max-width:900px){
  .site-header .site-header-row{min-height:76px}
  .site-header .wp-block-site-logo img{width:150px}
  .site-header-end{gap:var(--ut-s1);flex-direction:row-reverse}
  .ut-header-cta{min-height:44px;padding:0 var(--ut-s2)}
  .ut-header-cta__long{display:none}
  .ut-header-cta__short{display:inline}
  /* Core only collapses the nav under 600px; the CTA swaps at 900px, so match it. */
  .site-header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}
}

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer{background:var(--ut-ink);color:var(--ut-line);font-size:15px;line-height:1.6;padding:var(--ut-s6) var(--ut-gutter) 0}
.site-footer a{color:var(--ut-paper);text-decoration:none}
.site-footer a:hover,.site-footer .current-menu-item a{text-decoration:underline;text-decoration-color:var(--ut-red);text-underline-offset:.25em}
.site-footer h2{font-size:18px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--ut-paper);margin:0 0 var(--ut-s2)}
.ut-footer-grid{display:grid;gap:var(--ut-s5);grid-template-columns:1fr;max-width:var(--ut-container);margin:0 auto;padding:var(--ut-s5) 0;align-items:start}
@media(min-width:900px){.ut-footer-grid{grid-template-columns:1.4fr 1.4fr 1fr}}
.ut-footer-logo img{width:100%;max-width:300px;height:auto}
.site-footer .ut-footer-col,.site-footer .ut-footer-col a{color:var(--ut-paper)}
.ut-footer-line{display:flex;align-items:center;gap:12px;margin:0 0 var(--ut-s1)}
.ut-footer-line svg{flex:0 0 26px;width:26px;height:26px}
.ut-footer-line svg .ut-footer-ico{fill:var(--ut-red)}
.ut-footer-nav .wp-block-navigation__container{gap:4px}
.site-footer-bottom{border-top:1px solid var(--ut-rule-dark);max-width:var(--ut-container);margin:0 auto;padding:var(--ut-s3) 0;text-align:center;font-size:var(--ut-fs-xs);color:var(--ut-line)}
.ut-footer-copy{margin:0}

/* Same story as above for the boilerplate language switcher: pin both states
   explicitly rather than relying on source order (WCAG 1.4.3). */
.site-footer .brand-lang-switcher__item{color:var(--ut-paper);opacity:.85}
.site-footer .brand-lang-switcher__item--active{color:var(--ut-ink);opacity:1}