.os-page{
  --os-font-primary:"Rubik", -apple-system, "Segoe UI", sans-serif;
  --os-font-secondary:"Rock Salt", cursive;

  --os-xxs:5px; --os-xs:10px; --os-s:15px; --os-sm:20px;
  --os-m:30px; --os-l:60px; --os-xl:120px; --os-xxl:240px;

  --os-black:#000; --os-white:#fff;
  --os-bg-black:#1c1c1c; --os-beige:#efede8;

  --os-header-w:290px;   /* aligné sur la largeur réelle du menu latéral */

  position:relative;
  font-family:var(--os-font-primary);
  font-size:1.125rem;
  line-height:1.25;
  color:var(--os-black);
  background:#000;
}
.os-page *{ box-sizing:border-box; }
.os-page a{ text-decoration:none !important; color:inherit; }
.os-page ul{ list-style:none; margin:0; padding:0; }
.os-page img{ max-width:100%; display:block; }

/* Astra (et beaucoup de thèmes) imposent une couleur de titre globale :
   on la neutralise explicitement pour tous les titres de ce bloc. */
.os-page h1,.os-page h2,.os-page h3,.os-page h4{
  margin:0; font-weight:400; font-family:var(--os-font-primary);
  color:var(--os-black) !important;
}

/* Une fois qu'on est passé sur fond blanc (header solide / sections
   claires), on assombrit légèrement le cadre pour rester lisible. */
@media screen and (max-width:1024px){
}


.os-header{
  width:var(--os-header-w);
  padding:var(--os-l);
  position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 70%, transparent 100%);
  z-index:1000;
  transition:background .3s ease;
}
.os-header.os-header--solid{ background:#000; }

.os-header > a.os-logo{
  display:block; max-width:170px;
  position:absolute; top:var(--os-l); left:var(--os-l);
}
.os-header > a.os-logo img{ width:100%; height:auto; }

.os-burger{
  display:none;
  width:40px; height:40px; padding:0; border:1px solid #fff; border-radius:50%;
  background:#fff; align-items:center; justify-content:center;
  position:fixed; bottom:var(--os-m); left:var(--os-m); z-index:1100;
  cursor:pointer; transition:all .25s ease-in-out;
}
.os-burger .os-burger-box{ width:20px; height:12px; position:relative; display:inline-block; }
.os-burger .os-burger-inner,
.os-burger .os-burger-inner:before,
.os-burger .os-burger-inner:after{
  width:20px; height:2px; background:#000; border-radius:4px;
  position:absolute; left:0; transition:transform .15s ease, opacity .15s ease;
}
.os-burger .os-burger-inner{ top:5px; }
.os-burger .os-burger-inner:before{ content:""; top:-5px; }
.os-burger .os-burger-inner:after{ content:""; top:5px; }
.os-header.is-open .os-burger{ background:#000; }
.os-header.is-open .os-burger .os-burger-inner,
.os-header.is-open .os-burger .os-burger-inner:before,
.os-header.is-open .os-burger .os-burger-inner:after{ background:#fff; }
.os-header.is-open .os-burger .os-burger-inner{ transform:translateY(0) rotate(45deg); }
.os-header.is-open .os-burger .os-burger-inner:before{ opacity:0; }
.os-header.is-open .os-burger .os-burger-inner:after{ transform:translateY(-10px) rotate(-90deg); }

/* nav-main : liste verticale ancrée en bas de la colonne (grâce au
   justify-content:flex-end du header), texte en majuscules, icône
   masquée révélée au survol — comportement identique au site d'origine */
.os-nav-main a{
  display:block; position:relative; overflow:visible;
  padding:var(--os-xxs) var(--os-xs);
  margin-top:var(--os-xxs);
  font-size:.875rem; font-weight:700; text-transform:uppercase;
  color:#fff !important; white-space:nowrap;
  transition:all .25s ease-in-out;
}
.os-nav-main a:after{
  content:""; height:1px; width:0; position:absolute; bottom:0; left:var(--os-xs);
  background:#fff; transition:width .25s ease-in-out;
}
.os-nav-main a:hover:after{ width:calc(100% - var(--os-xs) * 2); }
.os-nav-main .os-ic{
  width:20px; height:20px; position:absolute; top:calc(50% - 10px); left:-30px;
  opacity:0; transition:opacity .25s ease-in-out; pointer-events:none;
}
.os-nav-main .os-ic svg{ width:100%; height:100%; stroke:#fff; fill:none; stroke-width:1.5; }
.os-nav-main a:hover .os-ic{ opacity:1; }

.os-nav-footer{
  padding-top:var(--os-sm); padding-left:var(--os-xs); margin-top:var(--os-sm);
  position:relative;
}
.os-nav-footer:before{
  content:""; width:30px; height:1px; position:absolute; top:0; left:var(--os-xs);
  background:#fff;
}
.os-nav-footer ul{ display:flex; flex-direction:row; flex-wrap:wrap; }
.os-nav-footer li{ margin-right:var(--os-s); }
.os-nav-footer a{ font-size:.75rem; font-weight:600; color:#fff !important; white-space:nowrap; }
.os-nav-footer a:hover{ text-decoration:underline; }
.os-nav-footer span{ color:#fff; font-size:.625rem; opacity:.5; }
.os-nav-footer .os-copyright{ width:100%; margin-top:var(--os-xs); }

.os-mobile-overlay{ display:none; }

/* ---------------------------------------------------------------- hero -- */
/* Plein écran, PAS de marge de colonne : la photo passe sous le header,
   qui est transparent à cet endroit précis (voir .os-header ci-dessus). */
.os-hero{
  width:100%; height:100vh; height:100dvh;
  position:relative;
  /* Bloc descendu en bas de l'image, avec une marge de respiration. */
  display:flex; align-items:flex-end;
  padding-bottom:var(--os-l);
  overflow:hidden;
  background:#000;
}
.os-hero-img{
  position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;
  object-fit:cover; opacity:.9;
}
/* Voile renforcé en bas : le bloc de titre y est désormais posé, il lui
   faut un fond suffisamment sombre pour rester lisible sur une photo
   claire. */
.os-hero-scrim{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.08) 70%, rgba(0,0,0,0) 100%);
}
.os-intro-title{
  position:relative; z-index:1;
  width:100%;
  max-width:920px;          /* borne la rangée de boutons : sans elle, les
                               11 prestations s'étalent sur toute la largeur */
  margin-left:auto;
  padding-right:var(--os-xl);
  text-align:right;
}
/* Accroche manuscrite, comme la référence. */
.os-page .os-eyebrow{
  display:block;   /* même position sur les trois panneaux, au-dessus du titre */
  font-family:var(--os-font-secondary);
  font-size:1.05rem; font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:var(--os-s);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
/* Titre : même famille que le menu latéral, très grasse et blanche.
   Le sélecteur est renforcé et la couleur marquée !important car Astra
   applique aux H1 la couleur définie dans les Couleurs globales (#000),
   ce qui rendait le titre noir sur la photo. */
.os-page .os-hero-title{
  font-family:'Archivo','Rubik',-apple-system,'Segoe UI',sans-serif;
  font-size:4.5rem; font-weight:800; line-height:100%;
  letter-spacing:-.01em;
  text-transform:uppercase; color:#fff !important;
  margin-bottom:var(--os-sm);
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.os-hero-nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
/* Boutons pleins, sans liseré, comme la référence.
   Au survol : inversion noir/blanc -> blanc/noir. */
.os-page .os-hero-nav a{
  display:inline-block;
  padding:9px 16px;
  margin:0;
  font-family:'Archivo','Rubik',-apple-system,'Segoe UI',sans-serif;
  font-size:.8125rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; white-space:nowrap;
  color:#fff; background:#000; border:0;
  transition:background-color .22s ease, color .22s ease;
}
.os-page .os-hero-nav a:hover,
.os-page .os-hero-nav a:focus{ color:#000; background:#fff; }
.os-page .os-hero-nav a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ------------------------------------------------ flèche « panneau suivant » --
   Placée DANS le bloc de titre, juste sous les boutons, et non plus en
   position absolue : elle suit donc la rangée de boutons même quand
   celle-ci passe sur plusieurs lignes. */
.os-page .os-scroll-next{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  margin-top:var(--os-m);
  border-radius:50%;
  background:#000;
  box-shadow:0 2px 16px rgba(0,0,0,.35);
  transition:background-color .22s ease, transform .22s ease;
}
.os-page .os-scroll-next svg{
  width:22px; height:22px; display:block;
  stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  fill:none;
  transition:stroke .22s ease;
}
.os-page .os-scroll-next:hover{ background:#fff; transform:translateY(3px); }
.os-page .os-scroll-next:hover svg{ stroke:#000; }
.os-page .os-scroll-next:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Défilement doux vers l'ancre, sauf si la personne a demandé à
   limiter les animations. */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

/* ------------------------------------------------------------- sections -- */
.os-main{ margin-left:var(--os-header-w); background:#fff; }
.os-section{
  padding:var(--os-xl) var(--os-xl) var(--os-xl) var(--os-xxl);
  border-top:1px solid var(--os-beige);
  display:flex;
}
.os-section:nth-of-type(even){ background:var(--os-beige); }
.os-col-left{
  width:40%; padding-right:var(--os-xl);
  display:flex; flex-direction:column; justify-content:center;
}
.os-col-right{ width:60%; align-self:stretch; }
.os-col-right .os-figure{ position:relative; height:100%; min-height:420px; overflow:hidden; }
.os-col-right img{ width:100%; height:100%; object-fit:cover; }
.os-photo-credit{
  position:absolute; right:var(--os-xs); bottom:var(--os-xs);
  font-size:.625rem; color:#fff; background:rgba(0,0,0,.45);
  padding:2px 8px; letter-spacing:.02em;
}

.os-section h3{
  font-size:.875rem; font-weight:700; text-transform:uppercase;
  margin:0 0 var(--os-s) 0;
}
.os-section h2{ font-size:2.75rem; line-height:111%; margin:0 0 var(--os-m) 0; }
.os-section p{ margin:0 0 var(--os-m) 0; line-height:150%; color:#1c1c1c; }
.os-section p:last-of-type{ margin-bottom:0; }
.os-note{
  font-size:.75rem; opacity:.6; font-style:italic; margin-top:var(--os-s) !important;
}

/* -------------------------------------------------------------- closing -- */
.os-closing{
  padding:var(--os-xl) var(--os-xxl);
  background:#000; color:#fff; text-align:center;
}
.os-closing h2{ color:#fff !important; margin-bottom:var(--os-m); }
.os-closing a{
  display:inline-block; padding:var(--os-xs) var(--os-sm);
  font-size:1rem; font-weight:700; color:#fff; background:transparent;
  border:2px solid #fff; transition:all .25s ease-in-out;
}
.os-closing a:hover{ color:#000; background:#fff; }

/* ------------------------------------------------------------------ a11y -- */
.os-page a:focus-visible,
.os-page button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .os-page *{ transition:none !important; }
}

/* --------------------------------------------------------- 1920px step -- */
@media screen and (max-width:1920px){
  .os-page{ font-size:.875rem; }
  .os-header{ padding:var(--os-l); }
  .os-section{ padding:var(--os-l) var(--os-l) var(--os-l) var(--os-xl); }
  .os-section h2{ font-size:2.25rem; line-height:107%; }
}

/* --------------------------------------------------------- 1024px step -- */
@media screen and (max-width:1024px){
  .os-header{
    width:100%; height:76px; padding:0 var(--os-m);
    flex-direction:row; align-items:center; justify-content:space-between;
    bottom:auto;
    background:rgba(0,0,0,.6) !important; /* toujours lisible sur mobile, quel que soit le scroll */
  }
  .os-header > a.os-logo{
    max-width:110px; position:static; margin:0;
  }
  .os-burger{ display:flex; }

  .os-nav-main,.os-nav-footer{
    position:fixed; left:0; width:260px; max-width:85vw;
    top:0; bottom:0; z-index:1050;
    background:#000; padding:calc(var(--os-l) + 76px) var(--os-m) var(--os-m);
    transform:translateX(-100%); transition:transform .25s ease-in-out;
    overflow-y:auto;
  }
  .os-nav-main{ padding-bottom:0; }
  .os-nav-footer{ top:auto; padding-top:0; margin-top:0; }
  .os-header.is-open .os-nav-main,
  .os-header.is-open .os-nav-footer{ transform:translateX(0); }
  .os-nav-main .os-ic{ display:none; }
  .os-nav-footer ul{ flex-direction:column; }
  .os-nav-footer li{ margin-right:0; margin-bottom:var(--os-xs); }

  .os-mobile-overlay{
    display:block; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.5);
    opacity:0; pointer-events:none; transition:opacity .25s ease-in-out; z-index:1040;
  }
  .os-header.is-open ~ .os-mobile-overlay{ opacity:1; pointer-events:auto; }

  .os-hero{ height:100vh; padding-top:76px; align-items:flex-end; padding-bottom:var(--os-l); }
  .os-intro-title{ padding:0 var(--os-m); text-align:center; }
  .os-hero-title{ font-size:2.25rem; }
  .os-hero-nav{ justify-content:center; }
  .os-page .os-scroll-next{ width:44px; height:44px; }
  .os-page .os-scroll-next svg{ width:19px; height:19px; }

  .os-main{ margin-left:0; }
  .os-section{ flex-direction:column; padding:var(--os-m); }
  .os-col-left{ width:100%; padding-right:0; padding-bottom:var(--os-m); }
  .os-col-right{ width:100%; order:-1; margin:0 calc(var(--os-m) * -1) var(--os-m); }
  .os-col-right .os-figure{ min-height:260px; }
  .os-closing{ padding:var(--os-l) var(--os-m); }
}

@media screen and (max-width:480px){
  .os-hero-title{ font-size:1.75rem; }
  .os-hero-nav a{ margin-left:0; margin-right:var(--os-xxs); }
}

/* --------------------------------------------------- images cliquables -- */
/* Ajouté lors de la mise au format WordPress : le hero et chaque visuel de
   section sont désormais des liens vers les pages du site. */
.os-page .os-hero-link,
.os-page .os-figure a{ display:block; }
.os-page .os-figure a img{ transition:transform .5s ease, opacity .3s ease; }
.os-page .os-figure a:hover img{ transform:scale(1.03); }
.os-page .os-figure a:focus-visible{ outline:2px solid var(--os-black); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .os-page .os-figure a img{ transition:none; }
  .os-page .os-figure a:hover img{ transform:none; }
}


/* =========================================================================
   PANNEAUX 2 ET 3 — ajustements propres à la nouvelle structure
   ========================================================================= */

/* Les titres des panneaux 2 et 3 sont des h2 : ils doivent reprendre
   exactement la même allure que le h1 du premier panneau. */
.os-page h2.os-hero-title{
  font-family:'Archivo','Rubik',-apple-system,'Segoe UI',sans-serif;
  font-size:4.5rem; font-weight:800; line-height:100%;
  letter-spacing:-.01em;
  text-transform:uppercase; color:#fff !important;
  margin:0 0 var(--os-sm) 0;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}

/* Les titres deviennent cliquables : le lien ne doit rien changer à
   l'apparence, seulement réagir au survol. */
.os-page .os-hero-title a{
  color:#fff !important;
  text-decoration:none !important;
  transition:opacity .22s ease;
}
.os-page .os-hero-title a:hover{ opacity:.75; }
.os-page .os-hero-title a:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

/* Onze boutons sur le panneau Prestations : ils passent naturellement
   sur plusieurs lignes, en restant collés à droite. */
.os-page .os-hero-nav{ row-gap:6px; }

/* Chaque panneau occupe la hauteur de l'écran. Sur écran court, on
   laisse le contenu décider plutôt que de le comprimer ou de le
   couper — c'est le cas du panneau Prestations et de ses 11 boutons. */
.os-page .os-hero{ height:auto; min-height:100vh; min-height:100dvh; }

@media screen and (max-width:1024px){
  .os-page .os-hero{ min-height:100vh; min-height:100dvh; height:auto; }
  .os-page h2.os-hero-title{ font-size:2.25rem; }
  .os-page .os-intro-title{ max-width:none; margin-left:0; }
}
@media screen and (max-width:768px){
  .os-page h2.os-hero-title{ font-size:1.75rem; }
}


/* =========================================================================
   TRÈS PETITS ÉCRANS (jusqu'à 480 px)
   Mesure : « Diagnostic / expertise structurelle » réclame ~314 px alors
   qu'un écran de 320 px n'en offre que 260. Avec white-space:nowrap, le
   bouton débordait et provoquait un défilement horizontal — signalé comme
   défaut d'ergonomie mobile par les robots d'indexation. On autorise donc
   le retour à la ligne et on resserre le bouton.
   ========================================================================= */
@media screen and (max-width:480px){
  .os-page .os-hero-nav a{
    white-space:normal;
    padding:8px 12px;
    font-size:.75rem;
    line-height:1.25;
    max-width:100%;
  }
  .os-page .os-hero-nav{ justify-content:center; row-gap:5px; }
  .os-page .os-scroll-next{ width:40px; height:40px; margin-top:var(--os-sm); }
  .os-page .os-scroll-next svg{ width:17px; height:17px; }
}

/* Garde-fou : aucun défilement horizontal, quelle que soit la largeur.
   Restreint aux médias : appliqué à « * », il écrasait le max-width du
   bloc de titre (même spécificité, mais déclaré plus loin), qui reprenait
   alors toute la largeur et poussait ses boutons sous la colonne. */
.os-page{ overflow-x:hidden; }
.os-page img,
.os-page svg,
.os-page iframe{ max-width:100%; }


/* =========================================================================
   DÉGAGEMENT DE LA COLONNE LATÉRALE
   Le décalage est porté par le rembourrage du panneau, et non par une
   largeur maximale du bloc de titre : ainsi le contenu reste à droite de
   la colonne quelle que soit la taille de l'écran, y compris sur les
   largeurs intermédiaires où le bloc aurait débordé.
   ========================================================================= */
@media screen and (min-width:1025px){
  .os-page .os-hero{ padding-left:var(--os-header-w); }
}