/*
Theme Name: OXYL — Impreza Child
Theme URI:
Author: OXYL
Description: Thème enfant Impreza pour OXYL Conseil & Coaching. Applique l'identité visuelle complète : Montserrat + Source Sans 3, palette navy/petrol/gold.
Version: 1.0.0
Template: Impreza
Text Domain: oxyl-child
*/

/* =========================================================
   OXYL — Identité visuelle
   Surcharge des CSS custom properties d'Impreza 8.x
   + composants spécifiques alignés sur la charte HTML
   ========================================================= */

/* ── 1. CSS VARIABLES OXYL ─────────────────────────────── */
:root {
  /* Palette OXYL */
  --oxyl-navy:       #0C2D3D;
  --oxyl-petrol:     #024154;
  --oxyl-petrol-deep:#013545;
  --oxyl-gold:       #b5a669;
  --oxyl-gold-soft:  rgba(181,166,105,.14);
  --oxyl-dark:       #333333;
  --oxyl-muted:      #5d6770;
  --oxyl-off:        #FAFAF7;
  --oxyl-off-warm:   #f3f1ea;
  --oxyl-line:       rgba(2,65,84,.09);
  --oxyl-line-soft:  rgba(2,65,84,.05);

  /* ── Surcharges des variables Impreza ── */

  /* Typographie corps */
  --font-family:          'Source Sans 3', 'Source Sans Pro', sans-serif;
  --font-size:            16px;
  --font-weight:          400;
  --line-height:          1.7;
  --letter-spacing:       0;
  --bold-font-weight:     700;

  /* Typographie H1 */
  --h1-font-family:       'Montserrat', sans-serif;
  --h1-font-size:         clamp(1.6rem, 1.5vw, 2.2rem);
  --h1-font-weight:       600;
  --h1-line-height:       1.3;
  --h1-letter-spacing:    -0.04rem;
  --h1-text-transform:    none;

  /* Typographie H2-H6 héritent Montserrat via h1 */
  --h2-font-family:       var(--h1-font-family);
  --h2-font-size:         clamp(1.3rem, 1.3vw, 1.55rem);
  --h2-font-weight:       600;
  --h2-letter-spacing:    -0.03rem;
  --h2-line-height:       1.32;
  --h3-font-family:       var(--h1-font-family);
  --h3-font-weight:       600;
  --h4-font-family:       var(--h1-font-family);
  --h4-font-weight:       700;
  --h5-font-family:       var(--h1-font-family);
  --h6-font-family:       var(--h1-font-family);

  /* Couleurs de contenu Impreza */
  --color-content-bg:         var(--oxyl-off);
  --color-content-bg-alt:     var(--oxyl-off-warm);
  --color-content-heading:    var(--oxyl-navy);
  --color-content-text:       var(--oxyl-dark);
  --color-content-faded:      var(--oxyl-muted);
  --color-content-border:     var(--oxyl-line);
  --color-content-primary:    var(--oxyl-petrol);
  --color-content-secondary:  var(--oxyl-gold);
  --color-content-primary-faded: rgba(181,166,105,.2);

  /* Couleurs header Impreza */
  --color-header-middle-bg:   var(--oxyl-navy);
  --color-header-middle-text: rgba(255,255,255,.65);
  --color-header-middle-hover-bg:   rgba(255,255,255,.07);
  --color-header-middle-hover-text: #fff;

  /* Couleurs footer */
  --color-footer-top-bg:    var(--oxyl-navy);
  --color-footer-top-text:  rgba(255,255,255,.6);
  --color-footer-bottom-bg: var(--oxyl-petrol-deep);
  --color-footer-bottom-text: rgba(255,255,255,.35);

  /* Layout */
  --site-max-width: 1280px;
}

/* ── 2. FOND DE PAGE (layout boxed) ───────────────────── */
body {
  background: #d8d8d3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Canvas = zone de contenu */
.l-canvas {
  background: var(--oxyl-off);
}

/* ── 3. TYPOGRAPHIE GLOBALE ───────────────────────────── */
html,
.l-header .widget,
.menu-item-object-us_page_block {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--oxyl-navy);
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: -.4px;
}
h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: -.3px;
}
h3 { font-family: 'Montserrat', sans-serif; font-weight: 600; }
h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; }

/* Liens */
a { color: var(--oxyl-petrol); }
a:hover { color: var(--oxyl-gold); }

/* ── 4. EN-TÊTE NAVIGATION ────────────────────────────── */
.l-header {
  box-shadow: none;
  border-bottom: none;
}

/* Barre principale de header */
.l-subheader.at_middle,
.l-header .l-subheader.at_middle .w-dropdown-list,
.l-subheader.at_middle .type_mobile .w-nav-list.level_1 {
  background: var(--oxyl-navy) !important;
  color: rgba(255,255,255,.65);
}

/* Ligne décorative gold en bas du header */
.l-subheader.at_middle::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,166,105,.25), transparent);
  pointer-events: none;
}

/* Logo OXYL */
.w-logo a,
.w-logo .w-logo-img,
.l-subheader .w-logo {
  color: #fff !important;
}

/* Navigation niveau 1 */
.l-subheader.at_middle .w-nav-anchor.level_1,
.l-subheader.at_middle .w-nav > .w-nav-list > .menu-item > a {
  color: rgba(255,255,255,.65) !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .3px;
  padding: 7px 13px;
  border-radius: 3px;
  transition: all .2s ease;
}

.l-subheader.at_middle .w-nav-anchor.level_1:hover,
.no-touch .l-subheader.at_middle a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}

/* Item actif dans la nav */
.l-subheader.at_middle .menu-item.level_1.current-menu-item > .w-nav-anchor,
.l-subheader.at_middle .menu-item.level_1.current-menu-ancestor > .w-nav-anchor,
.l-subheader.at_middle .menu-item.level_1.current-menu-parent > .w-nav-anchor {
  color: #fff !important;
  background: rgba(181,166,105,.18) !important;
}

/* Indicateur nav (underline) */
.w-nav-title::after { background: var(--oxyl-gold); }

/* Nav item "Contact" = CTA */
.l-subheader.at_middle .menu-item.menu-item-contact > .w-nav-anchor,
.l-subheader.at_middle .w-nav .menu-item.btn > a {
  color: var(--oxyl-gold) !important;
  border: 1px solid rgba(181,166,105,.45) !important;
  border-radius: 3px;
  margin-left: 8px;
}
.l-subheader.at_middle .menu-item.menu-item-contact > .w-nav-anchor:hover {
  background: rgba(181,166,105,.1) !important;
  border-color: var(--oxyl-gold) !important;
}

/* ── 5. FOOTER ────────────────────────────────────────── */
.l-footer {
  background: var(--oxyl-navy);
  border-top: 1px solid rgba(181,166,105,.2);
}

.color_footer-top,
.l-footer .color_footer-top {
  background: var(--oxyl-navy) !important;
  color: rgba(255,255,255,.6) !important;
}

.color_footer-top a,
.l-footer .color_footer-top a {
  color: rgba(255,255,255,.55) !important;
}
.no-touch .color_footer-top a:hover,
.l-footer .color_footer-top a:hover {
  color: var(--oxyl-gold) !important;
}

.color_footer-bottom,
.l-footer .color_footer-bottom {
  background: var(--oxyl-petrol-deep) !important;
  color: rgba(255,255,255,.3) !important;
}

/* ── 6. SECTIONS WP / IMPREZA ─────────────────────────── */

/* Section alt (fond chaud) */
.l-section.color_alternate,
.vc_row.color_alternate {
  background: var(--oxyl-off-warm) !important;
}

/* Section dark (CTA navy) */
.l-section.color_dark,
.l-section[class*="color_dark"],
.vc_row.oxyl-section-dark {
  background: var(--oxyl-navy) !important;
}

/* ── 7. BOUTONS ───────────────────────────────────────── */

/* Style primaire OXYL : fond petrol + bordure gauche gold */
.us-btn-style_1,
.w-btn.us-btn-style_1,
button.us-btn-style_1,
.w-form-row button {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  background: var(--oxyl-petrol) !important;
  color: #fff !important;
  border: none !important;
  border-left: 3px solid var(--oxyl-gold) !important;
  border-radius: 3px !important;
  padding: 13px 24px 13px 22px !important;
  box-shadow: none !important;
  transition: all .25s ease !important;
}
.no-touch .us-btn-style_1:hover {
  background: var(--oxyl-navy) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(12,45,61,.22) !important;
}

/* Style secondaire OXYL : fond blanc + bordure gauche gold */
.us-btn-style_2,
.w-btn.us-btn-style_2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  background: #fff !important;
  color: var(--oxyl-navy) !important;
  border: none !important;
  border-left: 3px solid var(--oxyl-gold) !important;
  border-radius: 3px !important;
  padding: 13px 24px 13px 22px !important;
  box-shadow: none !important;
  transition: all .25s ease !important;
}
.no-touch .us-btn-style_2:hover {
  background: var(--oxyl-off) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
}

/* Style outline OXYL : fond transparent + bordure blanche */
.us-btn-style_3,
.w-btn.us-btn-style_3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 3px !important;
  padding: 12px 24px !important;
  box-shadow: none !important;
  transition: all .25s ease !important;
}
.no-touch .us-btn-style_3:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.7) !important;
  transform: translateY(-1px) !important;
}

/* ── 8. COMPOSANTS OXYL SPÉCIFIQUES ──────────────────── */

/* Balise de section (STAG) */
.oxyl-stag {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--oxyl-gold);
  margin-bottom: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.oxyl-stag::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--oxyl-gold);
  margin-right: 12px;
  opacity: .85;
}

/* Hero tag */
.oxyl-htag {
  color: var(--oxyl-gold);
  font-size: 9.5px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 26px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.oxyl-htag::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--oxyl-gold);
  margin-right: 12px;
  opacity: .8;
}

/* ── HERO SECTION ── */
.oxyl-hero {
  padding: 84px 48px 72px;
  position: relative;
  overflow: hidden;
}
.oxyl-hero-pet {
  background: linear-gradient(155deg, var(--oxyl-petrol) 0%, var(--oxyl-petrol-deep) 60%, var(--oxyl-navy) 100%);
}
.oxyl-hero-nvy {
  background: linear-gradient(155deg, var(--oxyl-navy) 0%, #0a3a50 55%, var(--oxyl-petrol) 100%);
}

/* Lignes courbes SVG en filigrane */
.oxyl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 600' preserveAspectRatio='none'><path d='M -50 80 Q 280 -30 520 180 T 1010 220' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1' fill='none'/><path d='M -80 220 Q 360 80 600 320 T 1020 380' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/><path d='M -50 420 Q 240 280 580 460 T 1010 540' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/></svg>");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Filigrane X en bas-droite */
.oxyl-xmark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  pointer-events: none;
  opacity: .04;
  background-image: url("https://www.oxyl-impact.com/wp-content/uploads/2026/06/Symbol-blanc-200.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.oxyl-hero h1 {
  color: #fff;
  /*font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);*/
  font-weight: 600;
  line-height: 1.3;
  max-width: 600px;
  margin-bottom: 24px;
  letter-spacing: -.4px;
  position: relative;
  z-index: 1;
}
.oxyl-hero h1::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  background: var(--oxyl-gold);
  opacity: .85;
  margin-top: 22px;
  border-radius: 2px;
}
.oxyl-hero p {
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.85;
  max-width: 560px;
  margin-bottom: 34px;
  font-weight: 300;
  position: relative;
  z-index: 1;
}
.oxyl-hero .oxyl-htag { position: relative; z-index: 1; }

/* ── BANDEAU CITATION ── */
.oxyl-bqs {
  background: rgba(12,45,61,.04);
  padding: 32px 48px;
  border-left: 3px solid var(--oxyl-gold);
}
.oxyl-bqs p {
  font-size: 16px;
  font-style: italic;
  color: var(--oxyl-navy);
  line-height: 1.85;
  max-width: 760px;
}

/* ── CARTES 3 COLONNES ── */
.oxyl-c3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 22px;
}
.oxyl-card {
  background: #fff;
  border: 1px solid var(--oxyl-line);
  border-radius: 4px;
  padding: 26px 22px;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.oxyl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--oxyl-petrol);
  opacity: 0;
  transition: opacity .25s;
}
.oxyl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(2,65,84,.09);
  border-color: rgba(2,65,84,.18);
}
.oxyl-card:hover::before { opacity: .8; }
.oxyl-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 22px; right: 22px;
  height: 2px;
  background: var(--oxyl-gold);
  opacity: 0;
  transition: opacity .25s;
}
.oxyl-card:hover::after { opacity: .6; }
.oxyl-ct {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--oxyl-navy);
  margin-bottom: 10px;
}
.oxyl-cb {
  font-size: 15.5px;
  color: var(--oxyl-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.oxyl-cl {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--oxyl-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
}
.oxyl-cl:hover { color: var(--oxyl-petrol); }

/* ── CITATIONS ── */
.oxyl-qt {
  border-left: 3px solid var(--oxyl-gold);
  padding: 20px 24px;
  background: var(--oxyl-gold-soft);
  margin: 22px 0;
  border-radius: 0 4px 4px 0;
}
.oxyl-qt p {
  font-size: 16px;
  font-style: italic;
  color: var(--oxyl-navy);
  margin: 0;
  line-height: 1.75;
}

/* ── TÉMOIGNAGES ── */
.oxyl-tgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 22px 0;
}
.oxyl-tc {
  background: #fff;
  border: 1px solid var(--oxyl-line);
  border-radius: 4px;
  padding: 28px 26px 22px;
  position: relative;
  transition: box-shadow .25s, border-color .2s;
}
.oxyl-tc:hover {
  box-shadow: 0 6px 20px rgba(2,65,84,.07);
  border-color: rgba(2,65,84,.18);
}
.oxyl-tc::before {
  content: '\201C';
  position: absolute;
  top: 16px; left: 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  color: var(--oxyl-gold);
  opacity: .25;
  line-height: 1;
}
.oxyl-tct {
  font-size: 16px;
  font-style: italic;
  color: var(--oxyl-dark);
  line-height: 1.75;
  margin-bottom: 14px;
  padding-top: 14px;
}
.oxyl-tca {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--oxyl-gold);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ── CTA DARK ── */
.oxyl-ctad {
  background: var(--oxyl-navy);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.oxyl-ctad::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 300' preserveAspectRatio='none'><path d='M -50 60 Q 280 -20 520 140 T 1010 180' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/><path d='M -50 240 Q 280 120 520 280 T 1010 320' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/></svg>");
  background-size: cover;
  pointer-events: none;
}
.oxyl-ctad h2 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: -.3px;
  position: relative;
  z-index: 1;
}
.oxyl-ctad p {
  color: rgba(255,255,255,.65);
  font-size: 16px !important;
  margin: 0 auto 26px;
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

/* ── CTA DOUBLE (2 colonnes dark) ── */
.oxyl-ctadb {
  /*display: grid;
  grid-template-columns: 1fr 1fr;*/
  background: var(--oxyl-navy);
}
.oxyl-ch {
  padding: 44px 32px;
  text-align: center;
  position: relative;
}
.oxyl-ch:first-child { background: var(--oxyl-petrol); }
.oxyl-ch:last-child  { background: var(--oxyl-navy); }
.oxyl-ch::before {
  content: '';
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 1px;
  background: rgba(181,166,105,.25);
}
.oxyl-ch h3 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.oxyl-ch p {
  color: rgba(255,255,255,.65);
  font-size: 16px;
  margin-bottom: 18px;
  line-height: 1.65;
}

/* ── ACCORDÉON ── */
.oxyl-acc-item {
  border: 1px solid var(--oxyl-line);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .2s;
  background: #fff;
  margin-bottom: 12px;
}
.oxyl-acc-item:hover {
  box-shadow: 0 2px 12px rgba(2,65,84,.07);
  border-color: rgba(2,65,84,.15);
}
.oxyl-acc-p {
  color: #555;
}
.oxyl-acc-btn {
  width: 100%;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  gap: 16px;
  text-align: left;
  transition: all .2s ease;
}
.oxyl-acc-btn:hover { background: rgba(2,65,84,.025); }
.oxyl-acc-btn.open  { background: var(--oxyl-petrol); }
.oxyl-acc-btn.open .oxyl-albl { color: #fff; }
.oxyl-acc-btn.open .oxyl-aico { color: var(--oxyl-gold); transform: rotate(45deg); }
.oxyl-albl {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--oxyl-navy);
  line-height: 1.45;
}
.oxyl-aico {
  font-size: 22px;
  font-weight: 200;
  color: var(--oxyl-petrol);
  flex-shrink: 0;
  transition: transform .3s ease, color .2s;
  width: 22px;
  text-align: center;
}
.oxyl-acc-body {
  background: rgba(2,65,84,.025);
  border-top: 1px solid var(--oxyl-line);
  padding: 22px 24px;
  display: none;
}
.oxyl-acc-body.open { display: block; }

/* ── CARTES BESOINS (nc) ── */
.oxyl-nc {
  border: 1px solid var(--oxyl-line);
  border-radius: 4px;
  padding: 28px 26px;
  margin-bottom: 16px;
  background: #fff;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.oxyl-nc:hover {
  box-shadow: 0 6px 22px rgba(2,65,84,.08);
  transform: translateY(-2px);
  border-color: rgba(2,65,84,.18);
}
.oxyl-nc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--oxyl-petrol);
  opacity: .65;
}
.oxyl-nc.gd::before { background: var(--oxyl-gold); opacity: 1; }
.oxyl-ntag {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oxyl-gold);
  margin-bottom: 10px;
  font-weight: 700;
}
.oxyl-nc h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--oxyl-navy);
  margin-bottom: 12px;
}
.oxyl-nc p {
  font-size: 16px;
  color: var(--oxyl-muted);
  line-height: 1.7;
  margin-bottom: 12px;
}

/* ── CARTES SOLUTIONS (sc) ── */
.oxyl-sc {
  background: #fff;
  border: 1px solid var(--oxyl-line);
  border-radius: 4px;
  padding: 28px 24px;
  margin-bottom: 16px;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.oxyl-sc:hover {
  box-shadow: 0 6px 22px rgba(2,65,84,.08);
  border-color: rgba(2,65,84,.18);
  transform: translateY(-2px);
}
.oxyl-sc::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--oxyl-petrol);
}
.oxyl-sc.gd::before { background: var(--oxyl-gold); width: 4px; }
.oxyl-sc h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--oxyl-navy);
  margin-bottom: 6px;
}
.oxyl-ssub {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  color: var(--oxyl-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 700;
}
.oxyl-sc p { font-size: 13px; color: var(--oxyl-muted); line-height: 1.75; }

/* ── DISPOSITIFS COLLECTIFS (ci) ── */
.oxyl-ci {
  border-left: 3px solid var(--oxyl-petrol);
  padding: 20px 24px;
  background: #fff;
  border-radius: 0 4px 4px 0;
  border-top: 1px solid var(--oxyl-line);
  border-right: 1px solid var(--oxyl-line);
  border-bottom: 1px solid var(--oxyl-line);
  transition: all .25s ease;
}
.oxyl-ci:hover {
  box-shadow: 0 4px 16px rgba(2,65,84,.07);
  transform: translateX(4px);
  border-left-color: var(--oxyl-gold);
}
.oxyl-ci p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.oxyl-ciit {
  font-size: 15px;
  color: #999;
  font-style: italic;
}
.oxyl-ci h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: -.2px;
}

/* ── CONVICTION / APPROCHE ── */
.oxyl-cvc {
  border-left: 3px solid var(--oxyl-petrol);
  padding: 20px 24px;
  background: #fff;
  border-radius: 0 4px 4px 0;
  border-top: 1px solid var(--oxyl-line);
  border-right: 1px solid var(--oxyl-line);
  border-bottom: 1px solid var(--oxyl-line);
  margin-bottom: 14px;
  transition: all .25s ease;
}
.oxyl-cvc:hover { box-shadow: 0 4px 16px rgba(2,65,84,.07); transform: translateX(4px); }
.oxyl-cvc.gd { border-left-color: var(--oxyl-gold); }
.oxyl-cvc h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--oxyl-navy);
  margin-bottom: 8px;
}
.oxyl-cvc p {
	font-size: 16px; color: var(--oxyl-muted); line-height: 1.7; margin: 0;
}

/* ── GRILLES 2×2 ── */
.oxyl-g22 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.oxyl-g22i {
  background: #fff;
  border: 1px solid var(--oxyl-line);
  border-radius: 4px;
  padding: 20px;
  transition: all .25s ease;
}
.oxyl-g22i:hover {
  background: rgba(2,65,84,.03);
  border-color: rgba(2,65,84,.18);
  box-shadow: 0 4px 16px rgba(2,65,84,.06);
}
.oxyl-g22i h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--oxyl-navy); margin-bottom: 8px;
}
.oxyl-g22i p { font-size: 16px; color: var(--oxyl-muted); line-height: 1.7; margin: 0; }
.oxyl-g22i.s2 { grid-column: span 2; background: rgba(2,65,84,.05); }

/* ── APPROCHE GRID ── */
.oxyl-agc:not(:last-child) { 
  border-right: 1px solid var(--oxyl-line);
}
.oxyl-ain {
  background: #fff;
  border-top: 1px solid var(--oxyl-line);
  border-right: 1px solid #fff;
  border-radius: 0;
  padding: 22px;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  font-size: 11px; font-weight: 700;
}
.oxyl-ain h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--oxyl-navy); margin-bottom: 8px;
}
.oxyl-ain p { font-size: 16px; color: var(--oxyl-muted); line-height: 1.7; margin: 0; font-weight: 400; }

.oxyl-ag { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.oxyl-ai {
  background: #fff;
  border: 1px solid var(--oxyl-line);
  border-radius: 4px;
  padding: 22px;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.oxyl-ai:hover {
  background: rgba(2,65,84,.03);
  transform: translateY(-2px);
  border-color: rgba(2,65,84,.18);
  box-shadow: 0 4px 16px rgba(2,65,84,.06);
}
.oxyl-anum {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px; font-weight: 700;
  color: var(--oxyl-petrol); opacity: .2;
  line-height: 1; margin-bottom: 10px;
}
.oxyl-ai h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--oxyl-navy); margin-bottom: 8px;
}
.oxyl-ai p {
	font-size: 16px; color: var(--oxyl-muted); line-height: 1.7; margin: 0;
}

/* ── REPERES ── */
.oxyl-repere {
  margin: 8px 0;
  padding: 20px 24px; 
  background: rgba(2,65,84,.03); 
  border-left: 3px solid var(--oxyl-navy); 
  border-radius: 4px;
}
.oxyl-repere p {
  font-size: 16px; 
  color: var(--oxyl-dark); 
  line-height: 1.75; 
  margin: 0 0 10px;
}
.oxyl-repere span {
  font-family: 'Montserrat',sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: var(--oxyl-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
/* ── GRILLE 3 ÉTAPES (numérotée) ── */
.oxyl-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
  border-top: 1px solid var(--oxyl-line);
}
.oxyl-step { padding: 24px; }
.oxyl-step:not(:last-child) { border-right: 1px solid var(--oxyl-line); }
.oxyl-step-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px; font-weight: 700;
  color: var(--oxyl-petrol); opacity: .2;
  line-height: 1; margin-bottom: 12px;
}
.oxyl-step h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--oxyl-navy); margin-bottom: 8px;
}
.oxyl-step p { font-size: 16px; color: var(--oxyl-muted); line-height: 1.7; }

/* ── GRILLE 4 COLONNES (résultats) ── */
.oxyl-g4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
  border-top: 1px solid var(--oxyl-line);
}
.oxyl-g4i { padding: 22px; }
.oxyl-g4i:not(:last-child) { border-right: 1px solid var(--oxyl-line); }
.oxyl-g4i h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--oxyl-navy); margin-bottom: 8px; line-height: 1.4;
}
.oxyl-g4i.gold h4 { color: var(--oxyl-gold); }
.oxyl-g4i p { font-size: 12.5px; color: var(--oxyl-muted); line-height: 1.65; }

/* ── GRILLE 3 SERVICES ── */
.oxyl-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0;
}
.oxyl-svc {
  background: #fff;
  border: 1px solid var(--oxyl-line);
  border-top: 3px solid var(--oxyl-petrol);
  border-radius: 3px;
  padding: 20px 18px;
}
.oxyl-svc h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--oxyl-navy); margin-bottom: 8px;
}
.oxyl-svc p { font-size: 16px; color: var(--oxyl-muted); line-height: 1.7; }
.oxyl-svc-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--oxyl-line);
  font-size: 14px;
  color: var(--oxyl-petrol);
  font-style: italic;
}

/* ── CONTACT OPTIONS ── */
.oxyl-copts { display: flex; flex-direction: column; gap: 12px; max-width: 540px; }
.oxyl-co {
  background: #fff;
  border: 1px solid var(--oxyl-line);
  border-radius: 4px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all .25s ease;
}
.oxyl-co:hover {
  box-shadow: 0 4px 16px rgba(2,65,84,.07);
  transform: translateY(-2px);
  border-color: rgba(2,65,84,.18);
}
.oxyl-coico {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.oxyl-coico.t { background: #376e82; }
.oxyl-coico.p { background: var(--oxyl-petrol); }
.oxyl-coico.g { background: var(--oxyl-gold); }
.oxyl-coico.n { background: var(--oxyl-navy); }
.oxyl-coico::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #fff;
  font-size: 18px;
}
.oxyl-coico.t::before { content: '\f095'; } /* fa-phone */
.oxyl-coico.p::before { content: '\f0e0'; } /* fa-envelope */
.oxyl-coico.g::before { font-family: 'Font Awesome 6 Brands'; content: '\f08c'; } /* fa-linkedin */
.oxyl-coico.n::before { content: '\f3c5'; } /* fa-location-dot */
.oxyl-co h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--oxyl-navy); margin-bottom: 3px;
}
.oxyl-co p { font-size: 16px; color: var(--oxyl-muted); margin: 0; }

/* ── BADGE ── */
.oxyl-photo {
  border: 1px solid rgba(181,166,105,.25);
}
.oxyl-bdg {
  display: inline-block;
  background: var(--oxyl-gold-soft);
  color: var(--oxyl-gold);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  padding: 5px 12px;
  border-radius: 2px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid rgba(181,166,105,.25);
}

/* ── SECTION WRAPPER ── */
.oxyl-sec {
  padding: 64px 48px 56px;
  border-bottom: 1px solid var(--oxyl-line-soft);
  background: #f3f1ea;
}

/* ── LISTE AVEC BORDURE GAUCHE ── */
.oxyl-rlist { list-style: none; }
.oxyl-rlist li {
  padding: 11px 0 11px 18px;
  border-left: 2px solid var(--oxyl-petrol);
  font-size: 16px;
  color: var(--oxyl-dark);
  line-height: 1.65;
  margin-bottom: 7px;
  transition: border-color .2s, padding-left .2s;
}
.oxyl-rlist li:hover { border-left-color: var(--oxyl-gold); padding-left: 22px; }

/* ── ACCORDÉON JS ── */
.oxyl-acc-item .oxyl-acc-body { animation: oxylFadeIn .3s ease; }
@keyframes oxylFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.oxyl-copy {
	color: rgba(255,255,255,.3);
	font-size: 12px; 
	font-family: Montserrat,sans-serif; 
	letter-spacing: .5px; 
	margin: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .oxyl-c3    { grid-template-columns: 1fr; }
  .oxyl-tgrid { grid-template-columns: 1fr; }
  .oxyl-ctadb { grid-template-columns: 1fr; }
  .oxyl-g22   { grid-template-columns: 1fr; }
  .oxyl-ag    { grid-template-columns: 1fr; }
  .oxyl-svc-grid { grid-template-columns: 1fr; }
  .oxyl-steps { grid-template-columns: 1fr; }
  .oxyl-g4    { grid-template-columns: 1fr 1fr; }
  .oxyl-hero  { padding: 56px 24px 48px; }
  .oxyl-sec   { padding: 48px 24px 40px; }
}
@media (max-width: 600px) {
  .oxyl-g4    { grid-template-columns: 1fr; }
  .oxyl-g22i.s2 { grid-column: span 1; }
}