:root{--bg:#ffffff;--surface:#f4f7fa;--ink:#141a22;--muted:#5b6472;--line:#e1e6ec;--accent:#1c4b89;--accent-deep:#123566;--accent-2:#eb5f1f;--indigo:#515686;--radius:8px;--rui:6px;--font:'Inter',system-ui,sans-serif;--disp:'Space Grotesk',sans-serif;--mono:'Space Mono',monospace;--maxw:1180px;--section-y:76px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
input,select,textarea,button{font-family:inherit;font-size:16px}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@media (max-width:980px){[data-desk]{display:none !important}[data-burger]{display:inline-flex !important}}
@media (min-width:981px){[data-mobile-panel]{display:none !important}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
/* ===== Feuille de reference. Chargee APRES Oxygen par le mu-plugin, donc elle gagne
   sur tout ce que le convertisseur normalise mal. C'EST ICI qu'on corrige. ===== */

/* --- reset de la maquette. Selecteurs de balise nue: specificite VOLONTAIREMENT
       basse pour que les classes .lc-* gardent la main. --- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
input,select,textarea,button{font-family:inherit;font-size:16px}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@keyframes spin{to{transform:rotate(360deg)}}
html,body{overflow-x:clip}

/* --- bascule bureau/mobile en CLASSES (Oxygen interdit les selecteurs d'attribut).
       Aucun display pose au bureau: la maquette n'en posait pas non plus. --- */
.lc-burger{align-items:center;justify-content:center}
.lc-mpanel:not(.is-open){display:none !important}
.lc-mpanel.is-open{display:block !important}
@media (max-width:980px){
  .lc-desk{display:none !important}
  .lc-burger{display:inline-flex !important}
}
@media (min-width:981px){
  .lc-mpanel{display:none !important}
}

/* --- Menu « Nos services »: il SURVOLE la page au lieu de la pousser, et s'ouvre
       en fondu + glissement. On n'anime PAS display (non animable): on anime
       opacity/transform et on neutralise les clics avec pointer-events. --- */
.lc-svcpanel{
  position:absolute;left:0;right:0;top:100%;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px);
  transition:opacity 240ms cubic-bezier(.23,1,.32,1),
             transform 240ms cubic-bezier(.23,1,.32,1),
             visibility 240ms linear;
  box-shadow:0 18px 40px rgba(20,26,34,.14);
}
.lc-svcpanel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* la fleche du bouton pivote quand le panneau est ouvert */
.lc-115 .lc-116{transition:transform 240ms cubic-bezier(.23,1,.32,1)}
.lc-115.is-open .lc-116{transform:rotate(180deg)}

/* --- Panneau « Nos services »: la PREMIERE RANGEE ne porte pas de filet au-dessus.
       Le filet de .lc-124 sert de separateur entre rangees; en haut il doublait le
       bord du panneau. `auto-fit` fait varier le nombre de colonnes et le CSS ne sait
       pas dire « premiere rangee », mais le panneau est masque sous 981px, donc il n'y
       a que deux cas possibles: 4 colonnes a partir de 1072px, 3 en dessous
       (4x230 + 3x32 = 1016px de contenu, soit 1072px de fenetre avec les 56px de marge). --- */
@media (min-width:1072px){ .lc-svcpanel .lc-124:nth-child(-n+4){border-top:0} }
@media (min-width:981px) and (max-width:1071px){ .lc-svcpanel .lc-124:nth-child(-n+3){border-top:0} }

/* --- Etats de survol des boutons. Le reset porte a:hover{color:var(--accent-2)},
       ce qui rendait le texte des boutons bleus orange, et celui du bouton orange
       invisible (orange sur orange). On reaffirme la couleur du texte. --- */
.lc-008:hover,.lc-030:hover,.lc-066:hover,.lc-079:hover,
.lc-119:hover,.lc-128:hover,.lc-143:hover{color:#fff}
.lc-008:hover,.lc-066:hover,.lc-079:hover,.lc-119:hover,.lc-128:hover{background:var(--accent-deep)}
.lc-034:hover{color:#fff;background:#c94d13}
.lc-008,.lc-034,.lc-066,.lc-079,.lc-128{transition:background 180ms ease,color 180ms ease}

/* --- Icones du pied. Oxygen pose .oxy-svg-icon>svg{stroke:var(--oxy-icon-fill);
       fill:var(--oxy-icon-stroke)} — les deux variables sont CROISEES et le CSS bat
       les attributs de presentation. On les neutralise et chaque <path> declare son fill. --- */
.lc-ico{--oxy-icon-stroke:none;--oxy-icon-fill:currentColor;
  display:inline-flex;align-items:center;width:16px;height:16px;flex:0 0 auto}
.lc-ico svg{width:16px;height:16px;display:block}
/* Facebook occupe sa PROPRE ligne dans la colonne de l'adresse. Le telephone
   (.lc-151) est un <a> sans display, donc inline: les deux partageaient la meme
   ligne. On passe le telephone en block et Facebook en flex de niveau bloc,
   avec width:fit-content pour que la zone cliquable reste serree. */
.lc-151{display:block}
.lc-fb{display:flex;align-items:center;gap:8px;width:fit-content;margin-top:12px}
/* adresse en bleu, demande client. Bleu CLAIR: le bleu de marque (#1c4b89) est
   illisible sur le fond du pied (#0f1720). */
.lc-150 a{color:#8ab4e8}
.lc-150 a:hover{color:#b7d2f2}
/* Facebook, sur sa PROPRE ligne dans la colonne de l'adresse.
   Deux pieges cumules:
   1. Oxygen enveloppe le contenu du lien dans un <div class="oxy-text">. Le <a>
      n'a donc qu'UN enfant: gap et align-items poses sur lui ne font rien.
      L'alignement doit viser cet enfant.
   2. `.lc-155{display:inline-flex}` venait APRES `.lc-fb{display:flex}` a
      specificite egale et annulait le passage en niveau bloc. Regle supprimee:
      les autres liens de la colonne Support n'ont pas d'icone et n'en ont pas besoin.
   Le gap remplace l'ancien margin-right, qui s'ajoutait a l'espace du texte. */
.lc-fb>div{display:flex;align-items:center;gap:8px;line-height:1.2}
.lc-fb .lc-ico{margin:0;width:16px;height:16px}
.lc-fb .lc-ico svg{width:16px;height:16px;display:block}

/* --- la nav ne doit pas passer sur deux lignes --- */
.lc-114 > a,.lc-115{white-space:nowrap}
.lc-111{gap:20px}

/* --- bascule de langue --- */
.lc-lang{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;
  padding:0 9px;border:1px solid var(--line);border-radius:var(--rui);
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:var(--ink);transition:background 160ms ease,color 160ms ease}
.lc-lang:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.lc-mpanel .lc-langhost{display:block;margin-top:16px}
.lc-mpanel .lc-lang{width:100%}

/* --- Icones. `.lc-svcico svg` est un selecteur de balise descendante: Oxygen le
       REFUSE, donc la taille du svg doit vivre ici. Sans cela le svg est ecrase
       a 16px de large par le flex du wrapper. --- */
.lc-svcico svg,.lc-ico svg{width:22px;height:22px;display:block;flex:0 0 auto}
.lc-ico svg{width:16px;height:16px}
.lc-svcico>svg{stroke-width:0}

/* --- ce qu'Oxygen jette et qu'il faut reaffirmer --- */
.lc-115{border-style:none;border-width:0}

/* --- Contact Form 7: aplatir les enveloppes que CF7 ajoute, sinon elles cassent
       les colonnes flex de la maquette (l'input n'est plus enfant direct du label) --- */
.lc-formhost{display:contents}
.lc-135 .wpcf7-form-control-wrap,
.lc-141 .wpcf7-form-control-wrap,
.lc-141 .wpcf7-acceptance,
.lc-141 .wpcf7-list-item{display:contents}
.lc-141 .wpcf7-list-item{margin:0}
.lc-135 .wpcf7-not-valid-tip,
.lc-141 .wpcf7-not-valid-tip{font-size:13px;color:#c0362c}
.lc-134 .wpcf7-response-output{margin:0;padding:14px 16px;background:#eef4fb;border:1px solid #cfe0f2;border-radius:var(--rui);font-size:14.5px;color:var(--accent-deep)}
.lc-143{width:100%;text-align:center;-webkit-appearance:none;appearance:none}
.lc-134 .wpcf7-spinner{width:16px;height:16px;margin:0 0 0 10px}
.lc-137,.lc-138,.lc-139{width:100%}
/* --- Formulaire: deux champs par ligne (demande client).
       Nom | Demande, puis Telephone | Courriel. Empile sous 620px. --- */
.lc-frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.lc-frow{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}