/* =====================================================================
   R&S Réfrigération : couche du site, chargée après le design system
   (static/ds/styles.css, copie intégrale de l'export Claude Design).

   1. Styles des composants de l'export (blocs <style> des fichiers .dc.html)
   2. Conversion Hugo : variantes bureau / mobile rendues côte à côte
   3. Conversion Hugo : états animés pilotés par static/js/rs.js
   4. Pages ajoutées : avis légal, 404, formulaires
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Styles des composants de l'export
   --------------------------------------------------------------------- */

html:root { --layout-max: min(95vw, 170rem) !important; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; background: var(--rs-brume-glaciale); }

/* Orphelins : équilibrer les titres, conserver pretty sur les paragraphes (base.css) */
h1, h2, h3, h4, h5 { text-wrap: balance; }

a:not([data-rs-button]), a:not([data-rs-button]):link, a:not([data-rs-button]):visited { color: #0A2333; text-decoration: none; }
a:not([data-rs-button]):hover { color: #0E191E; }
[data-theme="dark"] a:not([data-rs-button]), [data-theme="dark"] a:not([data-rs-button]):link, [data-theme="dark"] a:not([data-rs-button]):visited { color: #FFFFFF; }

/* chrome-header : en-tête inversé sur fond sombre (page À propos) */
[data-rs-invert="on"] {
  --rs-minuit-polaire: #FFFFFF;
  --rs-blanc-pur: #0A2333;
  --rs-nuit-profonde: #E7F1F2;
  --rs-brume-glaciale: #0A2333;
  --rs-blanc-72: rgba(10,35,51,.72);
  --rs-blanc-24: rgba(10,35,51,.24);
  --rs-blanc-16: rgba(10,35,51,.16);
  --rs-minuit-56: rgba(255,255,255,.56);
  --rs-minuit-16: rgba(255,255,255,.16);
  --rs-minuit-08: rgba(255,255,255,.08);
}
[data-rs-invert="on"] header nav[data-theme="dark"] [data-rs-nav-plate] { background: #FFFFFF; }
[data-rs-invert="on"] header nav[data-theme="dark"] a[data-rs-navlink] { color: rgba(10,35,51,.72); }
[data-rs-invert="on"] header nav[data-theme="dark"] a[data-rs-navlink]:hover,
[data-rs-invert="on"] header nav[data-theme="dark"] a[data-rs-navlink][data-rs-current] { color: #0A2333; }
[data-rs-invert="on"] header > div[data-theme="dark"],
[data-rs-invert="on"] [role="dialog"] {
  --rs-minuit-polaire: #0A2333;
  --rs-blanc-pur: #FFFFFF;
  --rs-nuit-profonde: #0E191E;
  --rs-brume-glaciale: #E7F1F2;
  --rs-blanc-72: rgba(255,255,255,.72);
  --rs-blanc-24: rgba(255,255,255,.24);
  --rs-blanc-16: rgba(255,255,255,.16);
  --rs-minuit-56: rgba(10,35,51,.56);
  --rs-minuit-16: rgba(10,35,51,.16);
  --rs-minuit-08: rgba(10,35,51,.08);
}

/* accueil : logo qui glisse, grille des services, bandeau de logos clients */
[data-rs-scroll-logo] svg { shape-rendering: geometricPrecision; }
[data-rs-cell] [data-rs-more] { opacity: 1; transition: opacity 140ms var(--ease-brand); }
[data-rs-cell]:hover [data-rs-more], [data-rs-cell]:focus-within [data-rs-more] { text-decoration: underline; }
@media (max-width: 1023px) { [data-rs-row-sep] { display: none; } }
[data-rs-marquee] { --rs-slot: calc(var(--layout-max) / 6); }
@media (max-width: 1279px) { [data-rs-marquee] { --rs-slot: calc(var(--layout-max) / 4); } }
@media (max-width: 1023px) { [data-rs-marquee] { --rs-slot: calc(var(--layout-max) / 3); } }
@media (max-width: 639px) { [data-rs-marquee] { --rs-slot: calc(var(--layout-max) / 2); } }
@keyframes rs-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
[data-rs-marquee]:hover [data-rs-marquee-track] { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { [data-rs-marquee-track] { animation: none !important; } }

/* section-services-grid, secteurs */
@keyframes rs-band-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-rs-band] { animation: none !important; } }

/* section-processus */
[data-rs-tl] { margin-top: 0; }
@media (min-width: 1025px) { [data-rs-tl] { margin-top: 19rem; } }

/* avantages-integres */
[data-rs-adv-grid] { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 1025px) { [data-rs-adv-grid] { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1400px) { [data-rs-adv-grid] { grid-template-columns: repeat(5, minmax(0,1fr)); } }
[data-rs-adv-grid] p { overflow-wrap: break-word; hyphens: auto; }

/* section-secteurs-index */
[data-rs-secteurs] a, [data-rs-secteurs] a:link, [data-rs-secteurs] a:visited { color: inherit; text-decoration: none; }

/* section-sector-excerpt */
@media (max-width: 1023px) {
  [data-rs-excerpt], [data-rs-editorial] { grid-column: 1 / -1 !important; }
  [data-rs-editorial] { margin-top: var(--space-48) !important; }
  [data-rs-secondary-photo] { grid-column: 1 / -1 !important; margin-top: var(--space-48) !important; }
}

/* a-propos */
@media (max-width: 1024px) { [data-rs-tl-intro] { position: static !important; } }
@media (min-width: 1025px) { [data-rs-histoire-img] { height: calc(80vh - 14rem) !important; width: auto !important; justify-self: end; } }

/* carrieres : rangées de postes */
[data-rs-jobrow] { cursor: pointer; position: relative; }
[data-rs-jobrow]::before { content: ""; position: absolute; inset: 0; background: var(--rs-minuit-polaire); transform: scaleY(0); transform-origin: 50% 0; transition: transform 240ms cubic-bezier(.22,.61,.36,1); }
[data-rs-jobrow]:hover::before { transform: scaleY(1); }
[data-rs-jobrow] > * { position: relative; z-index: 1; transition: color 240ms cubic-bezier(.22,.61,.36,1); }
[data-rs-jobrow] [data-rs-button] { position: relative; z-index: 1; }
[data-rs-jobrow]:hover h3, [data-rs-jobrow]:hover h3 span { color: var(--rs-blanc-pur) !important; }
[data-rs-jobrow]:hover span:not([data-rs-button] span):not(h3 span) { color: rgba(255,255,255,.72) !important; }
[data-rs-jobrow]:hover [data-rs-button="outline"] { color: var(--rs-blanc-pur) !important; border-color: var(--rs-blanc-pur) !important; background: transparent !important; }
button[data-rs-button="solid"]:hover { background-color: var(--action-fill) !important; color: var(--action-fill-text) !important; border-color: var(--action-fill) !important; }
button[data-rs-button="outline"]:hover { background-color: transparent !important; color: var(--action-outline) !important; border-color: var(--action-outline) !important; }
[data-rs-jobrow] h3 { transition: transform 240ms cubic-bezier(.22,.61,.36,1); }
[data-rs-jobrow]:hover h3 { transform: translateX(0.75rem); }
[data-rs-jobrow]:hover [data-rs-navroll] { transform: translateY(-100%); }
@media (max-width: 1023px) {
  [data-rs-jobrow] { padding-left: 0 !important; padding-right: 0 !important; }
  [data-rs-jobrow-city] { text-align: left !important; margin-top: calc(var(--space-12) - var(--space-32)); }
}

/* contact : champs du formulaire (style-focus de l'export) */
.rs-field-focus:focus { border-bottom-color: var(--text-strong) !important; }

/* poste-frigoriste : colonne collante et champs */
[data-rs-sticky] { position: static; }
@media (min-width: 1025px) {
  /* overflow:hidden on the section makes sticky's top resolve against the
     section instead of the viewport, pushing the column down by 8.5rem. */
  section:has([data-rs-sticky]) { overflow: visible !important; }
  [data-rs-sticky] { position: sticky; top: 8.5rem; }
}
[data-rs-field] { transition: border-color 140ms cubic-bezier(.22,.61,.36,1); }
[data-rs-field]:hover { border-bottom-color: rgba(10,35,51,.4); }
[data-rs-field]:focus { border-bottom-color: var(--rs-minuit-polaire); box-shadow: 0 1px 0 0 var(--rs-minuit-polaire); }
[data-rs-field]::placeholder { color: rgba(10,35,51,.4); }


/* ---------------------------------------------------------------------
   2. Variantes bureau / mobile
   Dans l'export, React choisissait la variante au chargement
   (matchMedia "(max-width:1024px)"). Ici, les deux sont dans la page et
   la feuille affiche la bonne, au même seuil.
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  [data-rs-only="desktop"] { display: none !important; }
}
@media (min-width: 1025px) {
  [data-rs-only="mobile"] { display: none !important; }
}
/* L'en-tête (et l'accueil : logo glissant, héros) bascule en mobile à 1180 px,
   plus tôt que le reste du site (1024 px), car la navigation bureau ne tient
   pas plus étroit. */
@media (max-width: 1180px) {
  [data-rs-header="desktop"] { display: none !important; }
}
@media (min-width: 1181px) {
  [data-rs-header="mobile"] { display: none !important; }
}

/* En-tête bureau : sous-menu Services */
[data-rs-submenu].is-open { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; }
[data-rs-submenu].is-open [data-rs-subitem] { opacity: 1 !important; transform: translateY(0) !important; }
[data-rs-subitem]:hover, [data-rs-subitem]:focus-visible { color: var(--rs-minuit-polaire) !important; background: var(--rs-blanc-pur) !important; }
[data-rs-subitem]:hover [data-rs-pastille], [data-rs-subitem]:focus-visible [data-rs-pastille] { background: var(--rs-minuit-polaire) !important; }
[data-rs-subitem]:hover > svg { transform: rotate(-90deg) translateX(-2px) !important; }
[data-rs-submenu-link].is-open [data-rs-caret] { transform: rotate(180deg) !important; }

/* En-tête de l'accueil : fond qui apparaît au défilement */
[data-rs-logo-scroll].is-scrolled { background: var(--rs-brume-glaciale) !important; }

/* En-tête mobile : tiroir */
[data-rs-drawer].is-open { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }

/* Le logo qui glisse n'existe qu'en bureau (ScrollLogo) */
@media (max-width: 1180px) { [data-rs-scroll-logo-anchor] { display: none !important; } }
[data-rs-scroll-logo]:not([style*="translate3d"]) { visibility: hidden; }

/* ServiceHero (pages de service et de secteur) en mobile */
@media (max-width: 1024px) {
  [data-rs-shero-head] { padding: var(--space-64) var(--layout-gutter) var(--space-48) !important; }
  [data-rs-shero-grid] { grid-template-columns: minmax(0px, 1fr) !important; align-items: start !important; gap: var(--space-24) !important; }
  [data-rs-shero-side] { padding-bottom: 0px !important; }
  [data-rs-shero-img] { aspect-ratio: 4 / 3 !important; }
}

/* HomeProjets : ratio 3:2 conservé à toutes les largeurs (plus de hauteur forcée) */
[data-rs-projets] { height: auto !important; align-items: start; }
[data-rs-projets] [data-rs-tile-img] { aspect-ratio: 3 / 2; flex: 0 0 auto !important; }
[data-rs-projets] [data-rs-tile] { height: auto; }
/* Au-dessus de 1024 px (deux colonnes) : la tuile de gauche prend la hauteur de la
   colonne de droite, même si un titre de droite passe sur deux lignes. L'image de
   gauche absorbe l'écart (ratio 3:2 au minimum, recadrée par object-fit). */
@media (min-width: 1025px) {
  [data-rs-projets] { align-items: stretch !important; }
  [data-rs-projets] > [data-rs-tile] { height: auto; }
  [data-rs-projets] > [data-rs-tile] [data-rs-tile-img] { flex: 1 1 auto !important; }
  [data-rs-projets] > div { align-content: start; }
}

/* HomeHero (accueil) en mobile (1180 px et moins, comme l'en-tête) : pas de logo glissant, texte en colonne, image 4:3.
   Le texte et la vidéo gardent le conteneur centré du reste du site (mêmes marges latérales
   à gauche et à droite). */
@media (max-width: 1180px) {
  [data-rs-hhero-grid] { padding: var(--space-80) var(--layout-gutter) var(--space-40) !important; display: flex !important; flex-direction: column; align-items: stretch !important; gap: var(--space-24) !important; }
  [data-rs-hhero-logo] { display: none !important; }
  [data-rs-hhero-text], [data-rs-hhero-row] { display: contents !important; }
  [data-rs-hhero-text] h1, [data-rs-hhero-row] p { max-width: none !important; }
  [data-rs-hhero-row] [data-rs-button] { align-self: flex-start; }
  /* width: 100% explicite : sans lui, max-height réduit aussi la largeur (ratio) et la vidéo perd son alignement à droite. */
  [data-rs-hhero-img] { aspect-ratio: 4 / 3 !important; width: 100%; max-height: 600px; }
}

/* HomeHero vidéo : image fixe si prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-rs-hhero-video] { display: none !important; }
  [data-rs-hhero-poster] { display: block !important; }
}

/* HomePourquoi : défilement par étapes en bureau, liste ouverte en mobile */
@media (max-width: 1024px) {
  [data-rs-pourquoi-section] { padding-top: var(--section-pad-y) !important; padding-bottom: var(--section-pad-y) !important; overflow: hidden !important; }
  [data-rs-pourquoi] { height: auto !important; }
  [data-rs-pourquoi-stick] { position: static !important; display: block !important; min-height: 0 !important; padding: 0 !important; }
  [data-rs-pourquoi-grid] { display: flex !important; flex-direction: column; gap: var(--space-32) !important; }
  [data-rs-pourquoi-col] { display: contents !important; }
  [data-rs-pourquoi-col] > span { order: 1; }
  [data-rs-pourquoi-title] { order: 2; max-width: none !important; }
  [data-rs-pourquoi-img] { order: 3; width: 100% !important; margin-top: 0 !important; }
  /* Pleine largeur et paysage; le technicien est dans la moitié du bas (BugHerd #172) */
  [data-rs-pourquoi-img] > div { aspect-ratio: 3 / 2 !important; }
  [data-rs-pourquoi-img] img { object-position: 50% 78%; }
  [data-rs-pourquoi-rows] { order: 4; }
  [data-rs-pourquoi] [data-rs-disclosure-body] { grid-template-rows: 1fr !important; }
  [data-rs-pourquoi] [data-rs-disclosure-bar] { transform: scaleX(1) !important; }
}


/* ---------------------------------------------------------------------
   3. États animés (rs.js)
   Le HTML est livré dans son état final : sans JavaScript, tout reste
   visible. La classe rs-js, posée par rs.js, active les états de départ.
   --------------------------------------------------------------------- */

/* RevealLines : texte découpé en lignes qui montent */
html.rs-js [data-rs-reveal]:not([data-rs-ready]) { visibility: hidden; }
[data-rs-reveal] [data-rs-line] { display: block; overflow: clip; }
[data-rs-reveal] [data-rs-line] > span { display: block; transform: translateY(110%); opacity: 0; transition: transform 900ms cubic-bezier(.22,1,.36,1), opacity 900ms cubic-bezier(.22,1,.36,1); }
[data-rs-reveal].is-in [data-rs-line] > span { transform: translateY(0); opacity: 1; }

/* ImageWipe : volet vertical et léger zoom */
html.rs-js [data-rs-wipe]:not(.is-in) > div { clip-path: inset(0 0 100% 0) !important; }
html.rs-js [data-rs-wipe]:not(.is-in) > div > div { transform: scale(1.06) !important; }

/* Bouton qui attend les polices (ServiceHero) */
html.rs-js [data-rs-fonts-fade] { opacity: 0; }
html.rs-fonts [data-rs-fonts-fade] { opacity: 1; }

/* section-experience : volets horizontaux et textes qui montent */
html.rs-js [data-rs-exp]:not(.is-in) [data-rs-exp-wipe] { clip-path: inset(0 100% 0 0) !important; }
html.rs-js [data-rs-exp]:not(.is-in) [data-rs-exp-rise] { opacity: 0 !important; transform: translateY(110%) !important; }
[data-rs-exp-wipe] { clip-path: inset(0 0% 0 0); }

/* section-processus : étapes éteintes tant que la ligne ne les atteint pas */
html.rs-js [data-rs-tl-step]:not(.is-on) [data-rs-tl-body] { opacity: 0.18; transform: translateY(1.5rem); }
html.rs-js [data-rs-tl-step]:not(.is-on) [data-rs-tl-dot] { background: var(--rs-brume-glaciale) !important; }

@media (prefers-reduced-motion: reduce) {
  [data-rs-reveal] [data-rs-line] > span { transition: none; transform: none; opacity: 1; }
  html.rs-js [data-rs-wipe]:not(.is-in) > div,
  html.rs-js [data-rs-exp]:not(.is-in) [data-rs-exp-wipe] { clip-path: none !important; }
  html.rs-js [data-rs-wipe]:not(.is-in) > div > div { transform: none !important; }
  html.rs-js [data-rs-exp]:not(.is-in) [data-rs-exp-rise] { opacity: 1 !important; transform: none !important; }
}


/* ---------------------------------------------------------------------
   4. Pages et éléments ajoutés à la conversion
   --------------------------------------------------------------------- */

/* L'attribut hidden l'emporte sur les display en ligne (filtres) */
[hidden] { display: none !important; }

/* Accessibilité : lien d'évitement et focus clavier */
.rs-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--rs-minuit-polaire); color: var(--rs-blanc-pur) !important; padding: var(--space-16) var(--space-24); }
.rs-skip:focus { left: var(--layout-gutter); }

/* Formulaires : message de retour */
[data-rs-form-status] { margin: 0; font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-strong); }
[data-rs-form-status]:empty { display: none; }

/* Avis légal : onglets et texte */
.legal-page { max-width: 72ch; margin: 0 auto; padding: var(--space-64) var(--layout-gutter) var(--section-pad-y); }
.legal-page h1 { margin-bottom: var(--space-40); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-48); }
.legal-tab { font-family: var(--font-core); font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); text-transform: uppercase; padding: 0.875rem 1.5rem; border: var(--hairline) solid var(--rs-minuit-polaire); border-radius: var(--radius-control); background: transparent; color: var(--rs-minuit-polaire); cursor: pointer; }
.legal-tab.is-active { background: var(--rs-minuit-polaire); color: var(--rs-blanc-pur); }
.legal-block h2 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); margin: var(--space-48) 0 var(--space-16); }
.legal-block h3 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); margin: var(--space-32) 0 var(--space-16); }
.legal-block p, .legal-block li { font-size: var(--type-body-size); line-height: var(--type-body-lh); margin: 0 0 var(--space-16); }
.legal-block ul { padding-left: 1.25rem; margin: 0 0 var(--space-16); }
.legal-block a { text-decoration: underline !important; }

/* 404 */
.error-404 { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-96) var(--layout-gutter) var(--section-pad-y); display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; }

/* Pied de page : les liens ne prennent que la largeur de leur texte
   (sinon, en colonne flex, ils s'étirent et sont cliquables à côté du texte). */
footer [data-rs-navlink] { align-self: flex-start; }

/* ---------------------------------------------------------------------
   5. Mobile : sections texte + image, cartes, page À propos
   --------------------------------------------------------------------- */

/* Les paires texte + image (Secteurs desservis, Notre expérience, Pourquoi R&S,
   carrières) passent en une colonne sous 768 px. L'ordre du DOM est conservé :
   texte, puis image, puis les cartes qui suivent. Les paires marquées
   data-rs-keep-pair (compteurs, photos) gardent leurs deux colonnes. */
@media (max-width: 767px) {
  [data-rs-stack="pair"]:not([data-rs-keep-pair]) { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-32) !important; }
  /* Notre expérience : les photos passent sous le texte */
  [data-rs-exp-media] { order: 2; }
  /* Ce qui nous guide : pleine largeur, aligné à gauche */
  [data-rs-guide] { margin-left: 0 !important; }
  /* À propos : compteurs plus petits pour que « 3 500+ » tienne sur une ligne */
  [data-rs-count] { font-size: clamp(2.75rem, 5.5vw, 5.5rem) !important; white-space: nowrap; }
}

/* Cartes « Pourquoi » : une colonne sous 480 px; les longs mots se coupent au lieu de déborder */
[data-rs-adv-grid] h5 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 480px) {
  [data-rs-adv-grid] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* À propos : espacements réduits en mobile (≤ 1024 px, là où les colonnes s'empilent) */
@media (max-width: 1024px) {
  [data-rs-histoire-col] { gap: var(--space-24) !important; justify-content: flex-start !important; }
  [data-rs-croit] { gap: var(--space-32) !important; }
  [data-rs-croit-spacer] { display: none; }
}

/* Carrières, bandeau de photos du hero : deux colonnes (et non une) quand les colonnes s'empilent,
   pour arriver plus vite au texte. */
@media (max-width: 1024px) {
  [data-rs-hero-strip] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-16) !important; }
}

/* Formulaires (contact, carrières) : une colonne sous 520 px */
@media (max-width: 520px) {
  [data-rs-form] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Menu principal : graisse un cran au-dessus du texte courant (BugHerd #239). */
header a[data-rs-navlink] { font-weight: var(--fw-medium); }