/* ═══════════════════════════════════════════════════════════════
   SOCARA — styles globaux
   Les mises en page sont écrites en styles « inline » dans les gabarits
   (comme dans la maquette) ; les règles responsive ci-dessous ciblent ces
   styles inline (sélecteurs [style*="…"]). Règles propres à une page :
   assets/css/pages/{page}.css
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   POLICE MONT (charte SOCARA) — fichiers dans assets/fonts/
   ───────────────────────────────────────────────────── */
/* Fichiers fournis par SOCARA (dossier « Polices Mont Socara ») : Light, Book, Bold + italiques */
@font-face { font-family: "Mont"; src: url("../fonts/Mont-Light.otf") format("opentype"); font-weight: 100 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont"; src: url("../fonts/Mont-Book.otf") format("opentype"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont"; src: url("../fonts/Mont-BookItalic.otf") format("opentype"); font-weight: 100 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Mont"; src: url("../fonts/Mont-Bold.otf") format("opentype"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont"; src: url("../fonts/Mont-BoldItalic.otf") format("opentype"); font-weight: 600 900; font-style: italic; font-display: swap; }

/* ─────────────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Mont", "Barlow", sans-serif;
  color: #141414;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }
/* Ancres internes : ne pas passer sous l'en-tête fixe */
[id] { scroll-margin-top: 100px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* ─────────────────────────────────────────────────────
   RESPONSIVE — the site uses inline styles, so we override
   the most layout-critical inline rules at small widths.
   ───────────────────────────────────────────────────── */

/* ── HORIZONTAL OVERFLOW GUARD (header is position:fixed, safe) ─ */
@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* ── TABLET & MOBILE (≤ 860px) : layout ───────────────────────── */
@media (max-width: 860px) {
  /* Every multi-column grid collapses to a single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Fixed-width blocks (projects map) go full width */
  [style*="0 0 460px"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* The tall home hero stops forcing 780px */
  [style*="min-height: 780px"] {
    min-height: 78vh !important;
  }
  /* Tame oversized gaps once content is stacked */
  [style*="gap: 130px"],
  [style*="gap: 110px"],
  [style*="gap: 100px"],
  [style*="gap: 90px"],
  [style*="gap: 80px"],
  [style*="gap: 72px"],
  [style*="gap: 64px"],
  [style*="gap: 56px"],
  [style*="gap: 48px"] {
    gap: 32px !important;
  }
  /* Images never overflow their column */
  img {
    max-width: 100%;
  }
}

/* ── PHONES (≤ 600px) : spacing & typography ──────────────────── */
@media (max-width: 600px) {
  /* Tighten the generous desktop side padding */
  [style*="padding: 0px 48px"],
  [style*="padding: 0 48px"],
  [style*="padding: 0px 40px"],
  [style*="padding: 0 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Compact the huge vertical section paddings */
  [style*="padding: 160px 0"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  [style*="padding: 140px 0"],
  [style*="padding: 130px 0"],
  [style*="padding: 120px 0"],
  [style*="padding: 110px 0"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  [style*="padding: 100px 0"],
  [style*="padding: 96px 0"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  [style*="padding: 64px 0"],
  [style*="padding: 56px 0"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  /* Tighten gaps further on phones */
  [style*="gap: 40px"],
  [style*="gap: 48px"] {
    gap: 24px !important;
  }
  /* Scale down large fixed headings (heroes use clamp(), untouched) */
  [style*="font-size: 56px"] { font-size: 32px !important; }
  [style*="font-size: 48px"] { font-size: 29px !important; }
  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size: 42px"] { font-size: 27px !important; }
  [style*="font-size: 40px"] { font-size: 26px !important; }
  [style*="font-size: 38px"] { font-size: 25px !important; }
  [style*="font-size: 36px"] { font-size: 24px !important; }
  [style*="font-size: 34px"] { font-size: 23px !important; }
  [style*="font-size: 32px"] { font-size: 22px !important; }
}


/* ─────────────────────────────────────────────────────
   EN-TÊTE
   ───────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.5s cubic-bezier(.16,1,.3,1);
}
/* Barre d'admin WordPress (connecté) : décaler l'en-tête fixe sous elle */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header.is-scrolled {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(0,0,0,0.06);
}
.site-header__inner { height: 96px; transition: height 0.5s; }
.site-header.is-compact .site-header__inner { height: 76px; }
.site-header .site-logo { height: 68px !important; transition: height 0.5s; }
.site-header.is-compact .site-logo { height: 54px !important; }
.site-nav__link { font-size: 15px !important; }
.site-nav .btn-red { font-size: 12.5px !important; padding: 12px 26px !important; }
@media (max-width: 899.98px) {
  .site-header__inner { height: 80px; }
  .site-header.is-compact .site-header__inner { height: 68px; }
  .site-header .site-logo { height: 56px !important; }
  .site-header.is-compact .site-logo { height: 46px !important; }
}
.site-nav__link { color: #fff; }
.site-header.is-scrolled .site-nav__link { color: #141414; }
.site-nav__link.is-active, .site-header.is-scrolled .site-nav__link.is-active { color: #e30713; }
.site-burger span {
  display: block; height: 2px; width: 24px; background: #fff; border-radius: 2px;
  transition: transform .3s, opacity .3s, background .3s;
}
.site-header.is-scrolled .site-burger span, .menu-open .site-burger span { background: #141414; }
.menu-open .site-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .site-burger span:nth-child(2) { opacity: 0; }
.menu-open .site-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────────────────
   PIED DE PAGE
   ───────────────────────────────────────────────────── */
.site-footer__link { color: rgba(255,255,255,.8); font-size: 16px !important; transition: color .2s; }
.site-footer h2 { font-size: 13px !important; }
.site-footer p { font-size: 15.5px !important; line-height: 1.75 !important; }
.site-footer [style*="opacity: 0.6"] { font-size: 14px !important; opacity: .8 !important; }
.site-footer .site-logo { height: 64px !important; }
.site-footer__link:hover { color: #e30713; }
/* Logo en filigrane, à droite du pied de page, légèrement coupé par le bas */
.site-footer { position: relative; overflow: hidden; }
.site-footer__contenu { position: relative; z-index: 1; }
.site-footer__filigrane {
  position: absolute; z-index: 0; right: -40px; bottom: -70px;
  width: 400px; height: auto; opacity: .07; pointer-events: none; user-select: none;
}
@media (max-width: 860px) { .site-footer__filigrane { width: 260px; right: -30px; bottom: -40px; } }

/* ─────────────────────────────────────────────────────
   UTILITAIRES (survols de la maquette)
   ───────────────────────────────────────────────────── */
.btn-red:hover { background: #b8050f !important; }
.hover-lift { transition: transform .4s; }
.hover-lift:hover { transform: translateY(-6px) !important; }
.hover-red:hover { color: #e30713 !important; }

/* Affichage selon la largeur d'écran (seuil de la maquette : 900px) */
@media (min-width: 900px) { .only-mobile { display: none !important; } }
@media (max-width: 899.98px) { .only-desktop { display: none !important; } }

/* ─────────────────────────────────────────────────────
   ANIMATIONS
   .reveal  : apparition au défilement (équivalent de <Reveal>)
   .intro   : apparition au chargement (titres de haut de page)
   .intro-fade : idem, en fondu seul
   Sans JavaScript, tout reste visible.
   ───────────────────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s), transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js .intro {
  opacity: 0;
  transform: translateY(var(--intro-y, 30px));
  transition: all .9s cubic-bezier(.16,1,.3,1) var(--intro-delay, 0s);
}
.js .intro-fade { opacity: 0; transition: opacity .9s cubic-bezier(.16,1,.3,1) var(--intro-delay, 0s); }
.js.is-loaded .intro { opacity: 1; transform: translateY(0); }
.js.is-loaded .intro-fade { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .intro, .js .intro-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Indicateur de défilement du haut de page d'accueil */
@keyframes sb {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Contenu riche saisi dans l'éditeur (articles, pages légales) */
.wysiwyg > *:first-child { margin-top: 0; }
.wysiwyg > *:last-child { margin-bottom: 0; }
.wysiwyg a { color: #e30713; font-weight: 600; text-decoration: none; }
.wysiwyg img { max-width: 100%; height: auto; }


/* ─────────────────────────────────────────────────────
   LISIBILITÉ (tout le site)
   Les tailles et couleurs de la maquette sont écrites en ligne ;
   on agrandit ici les petits textes et on renforce leur contraste.
   ───────────────────────────────────────────────────── */
[style*="font-size: 9px"]  { font-size: 11px !important; }
[style*="font-size: 10px"] { font-size: 12.5px !important; }
[style*="font-size: 11px"] { font-size: 14px !important; }   /* surtitres (« Qui sommes-nous »…) */
[style*="font-size: 12px"] { font-size: 15px !important; }   /* liens fléchés (« Découvrir notre histoire »…) */
[style*="font-size: 13px"] { font-size: 17px !important; }
[style*="font-size: 14px"] { font-size: 20px !important; }
[style*="font-size: 15px"] { font-size: 20px !important; }
[style*="font-size: 16px"] { font-size: 20px !important; }
[style*="font-size: 17px"] { font-size: 20px !important; }
/* Sur téléphone, les textes courants restent un peu plus compacts */
@media (max-width: 600px) {
  [style*="font-size: 13px"] { font-size: 16px !important; }
  [style*="font-size: 14px"], [style*="font-size: 15px"],
  [style*="font-size: 16px"], [style*="font-size: 17px"] { font-size: 18px !important; }
}

/* Gris trop clairs sur fond blanc → gris plus soutenus (contraste AA) */
[style^="color: #999"], [style*="; color: #999"] { color: #6b6b6b !important; }
[style^="color: #777"], [style*="; color: #777"] { color: #5c5c5c !important; }
[style^="color: #bbb"], [style*="; color: #bbb"] { color: #767676 !important; }

/* Textes clairs sur fond sombre → plus opaques */
[style*="color: rgba(255,255,255,.35)"], [style*="color: rgba(255,255,255,.4)"], [style*="color: rgba(255,255,255,.45)"],
[style*="color: rgba(255,255,255,0.35)"], [style*="color: rgba(255,255,255,0.4)"], [style*="color: rgba(255,255,255,0.45)"],
[style*="color: rgba(255,255,255,.5)"], [style*="color: rgba(255,255,255,0.5)"] { color: rgba(255,255,255,.72) !important; }
[style*="color: rgba(255,255,255,.55)"], [style*="color: rgba(255,255,255,0.55)"],
[style*="color: rgba(255,255,255,.6)"], [style*="color: rgba(255,255,255,0.6)"] { color: rgba(255,255,255,.8) !important; }
[style*="color: rgba(255,255,255,.7)"], [style*="color: rgba(255,255,255,0.7)"],
[style*="color: rgba(255,255,255,.72)"] { color: rgba(255,255,255,.86) !important; }

/* ─────────────────────────────────────────────────────
   BOUTONS : coins arrondis
   (les boutons déjà arrondis dans la maquette, ex. filtres en pastille, gardent leur forme)
   ───────────────────────────────────────────────────── */
a[style*="text-transform: uppercase"][style*="padding: 1"],
a[style*="text-transform: uppercase"][style*="padding:1"],
button[style*="padding: 1"],
input[type="submit"],
.btn-red,
.cta-band a {
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────
   KEYFRAMES
   ───────────────────────────────────────────────────── */

/* Mega menu dropdown animation */
@keyframes sd {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Expertise tab fade-up animation */
@keyframes fu {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Carrousel infini (réalisations de l'accueil, témoignages de Notre entreprise) — moteur : main.js
   3 cartes entièrement visibles au centre + 1 de chaque côté, effacée par le voile.
   Le voile commence exactement au bord des 3 cartes du centre
   (--rail-card = largeur d'une carte, 24px = espace entre deux cartes). */
.rail-infini::-webkit-scrollbar { display: none; }
.rail-infini .rail-card[hidden] { display: none !important; }
.rail-infini {
  --rail-card: 360px;
  --rail-zone: calc(1.5 * var(--rail-card) + 24px + 4px);
  max-width: 1760px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.2) calc(50% - var(--rail-zone) - 120px), #000 calc(50% - var(--rail-zone)), #000 calc(50% + var(--rail-zone)), rgba(0,0,0,.2) calc(50% + var(--rail-zone) + 120px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.2) calc(50% - var(--rail-zone) - 120px), #000 calc(50% - var(--rail-zone)), #000 calc(50% + var(--rail-zone)), rgba(0,0,0,.2) calc(50% + var(--rail-zone) + 120px), transparent 100%);
  overscroll-behavior-x: contain;
}
/* Tablette : cartes plus étroites pour que 3 tiennent entièrement */
@media (min-width: 601px) and (max-width: 1300px) {
  .rail-infini { --rail-card: calc((100vw - 160px) / 3); }
  .rail-infini .rail-card { min-width: var(--rail-card) !important; max-width: var(--rail-card) !important; }
}
.rail-infini .rail-card { scroll-snap-align: center !important; }
@media (max-width: 600px) {
  .rail-infini {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}

/* Variante « coupée » (réalisations de l'accueil) : pas de voile, 3 cartes entières au centre
   et une demi-carte coupée net à chaque bord. Largeur d'une carte = (largeur du rail − 4 espaces) / 4.
   On peut faire glisser le rail à la souris (main.js, data-rail-drag). */
.rail-infini.rail-infini--coupe {
  /* Même largeur que le contenu au-dessus : du bouton « Tous » à la flèche « > » */
  width: calc(100% - 96px);
  max-width: 1224px;
  margin-left: auto;
  margin-right: auto;
  container-type: inline-size;
  --rail-card: calc((100vw - 96px) / 4);
  --rail-card: calc((100cqw - 96px) / 4);
  -webkit-mask-image: none;
          mask-image: none;
  cursor: grab;
}
.rail-infini.rail-infini--coupe .rail-card {
  min-width: var(--rail-card) !important;
  max-width: var(--rail-card) !important;
}
.rail-infini--coupe.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.rail-infini--coupe.is-dragging .rail-card { pointer-events: none; }
.rail-infini--coupe img { -webkit-user-drag: none; user-select: none; }
/* Téléphone : une grande carte au centre, les voisines dépassent de chaque côté
   (des demi-cartes rendraient les cartes trop petites pour être lisibles) */
@media (max-width: 600px) {
  .rail-infini.rail-infini--coupe {
    width: calc(100% - 40px);
    --rail-card: calc(100vw - 96px);
    --rail-card: calc(100cqw - 96px);
  }
}

/* Bandeau des logos partenaires (parts/logos-partenaires.php) : défilement continu.
   Sans JavaScript : animation scrollLogos ; avec : distance exacte calculée par main.js */
.logos-partenaires { overflow: hidden; }
.logos-partenaires__piste {
  display: flex; gap: 80px; align-items: center; width: fit-content;
  animation: scrollLogos 50s linear infinite;
}
.logos-partenaires__item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logos-partenaires__item a { display: flex; align-items: center; }
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}
.logos-partenaires__piste.is-marquee {
  animation: logos-marquee var(--marquee-duration, 50s) linear infinite !important;
  will-change: transform;
}

/* Partner logos infinite horizontal scroll */
@keyframes scrollLogos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ─────────────────────────────────────────────────────
   MENU DESKTOP — animation roll-up au survol
   ───────────────────────────────────────────────────── */
.nav-roll {
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25em;
  vertical-align: middle;
}
.nav-roll span {
  display: block;
  white-space: nowrap;
  transition: transform 0.28s ease;
}
.nav-roll:hover span {
  transform: translateY(-1.25em);
}

/* ─────────────────────────────────────────────────────
   HOME — réglages mobiles ciblés
   ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Chiffres : 3 en haut, 2 en bas */
  [style*="grid-template-columns"].chiffres-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Expertises : plus d'air entre les blocs */
  .expertise-grid {
    gap: 40px !important;
  }
}
@media (max-width: 600px) {
  .chiffres-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Réalisations : cartes un peu plus étroites */
  .rail-card {
    min-width: 280px !important;
    max-width: 280px !important;
  }
}

/* ─────────────────────────────────────────────────────
   PHONES — corps & intros (pages textuelles)
   ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  [style*="font-size: 26px"] { font-size: 19px !important; }
  [style*="font-size: 24px"] { font-size: 18px !important; }
  [style*="font-size: 22px"] { font-size: 17px !important; }
  [style*="font-size: 21px"] { font-size: 17px !important; }
  [style*="font-size: 20px"] { font-size: 16px !important; }
  [style*="font-size: 19px"] { font-size: 16px !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }
}
/* Bandeau cookies compact sur téléphone */
@media (max-width: 600px) {
  .cookie-banner > div:last-child { padding: 16px 20px !important; gap: 14px !important; }
  .cookie-banner p { font-size: 14px !important; line-height: 1.5 !important; }
  .cookie-banner button { flex: 1; padding: 11px 16px !important; }
  .cookie-banner > div:last-child > div { width: 100%; }
}

/* ─────────────────────────────────────────────────────
   HIÉRARCHIE : les petits titres (18–22px) restent plus grands
   que le texte courant agrandi à 20px.
   (en fin de fichier pour passer après les règles mobiles de la maquette)
   ───────────────────────────────────────────────────── */
[style*="font-size: 18px"], [style*="font-size: 19px"] { font-size: 23px !important; }
[style*="font-size: 20px"], [style*="font-size: 21px"] { font-size: 24px !important; }
[style*="font-size: 22px"] { font-size: 26px !important; }
@media (max-width: 600px) {
  [style*="font-size: 18px"], [style*="font-size: 19px"],
  [style*="font-size: 20px"], [style*="font-size: 21px"] { font-size: 20px !important; }
  [style*="font-size: 22px"] { font-size: 21px !important; }
}

/* Pied de page : tailles harmonisées */
.site-footer .site-footer__link { font-size: 15px !important; padding: 5px 0 !important; }
.site-footer p { font-size: 15px !important; line-height: 1.7 !important; }
.site-footer h2 { font-size: 12px !important; }
.site-footer [style*="opacity: 0.6"] { font-size: 13px !important; }