: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)}

/* --- Bande reconduite sous une section image/texte: la carte laterale qui a cede
       sa colonne a l'image devient une liste horizontale pleine largeur. Selecteurs
       descendants, donc ici et pas dans le magasin Oxygen. --- */
.lc-strip-in > p:first-child{font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.lc-strip-in ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0 32px;margin:0;padding:0;list-style:none}
.lc-strip-in li{padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;
  color:var(--ink);background:none}
.lc-strip-in h3{font-family:var(--disp);font-size:19px;font-weight:700;margin:0 0 10px}
.lc-strip-in > div{background:none;border:0;padding:0;border-radius:0}

/* --- Image dans une section: sous 760px on empile, et l'image passe TOUJOURS
       apres le texte pour que le titre reste en premier a la lecture. --- */
@media (max-width:760px){
  .lc-media-left{order:0}
  .lc-media{margin-top:8px}
}

/* --- Pas de filet AU-DESSUS de la premiere rangee. Le filet de chaque item sert de
       separateur entre rangees; en haut il double le bord du bloc. Le CSS ne sait pas
       dire « premiere rangee » avec `auto-fit`, donc on borne par media query, en
       calculant les points de bascule depuis minmax() et le gap.
       Bandes: ul en minmax(210px,1fr), gap 32px, contenu max 1124px -> 4 colonnes
       a partir de 992px, 3 des 750px, 2 des 508px, 1 en dessous. --- */
@media (min-width:992px){ .lc-strip-in li:nth-child(-n+4){border-top:0} }
@media (min-width:750px) and (max-width:991px){ .lc-strip-in li:nth-child(-n+3){border-top:0} }
@media (min-width:508px) and (max-width:749px){ .lc-strip-in li:nth-child(-n+2){border-top:0} }
@media (max-width:507px){ .lc-strip-in li:first-child{border-top:0} }
/* Bande « Ce qui nous distingue » de l'accueil: meme grille, meme traitement. */
@media (min-width:992px){ .lc-dist-list .lc-dist-li:nth-child(-n+4){border-top:0} }
@media (min-width:750px) and (max-width:991px){ .lc-dist-list .lc-dist-li:nth-child(-n+3){border-top:0} }
@media (max-width:749px){ .lc-dist-list .lc-dist-li:first-child{border-top:0} }
/* Mes puces: minmax(230px,1fr) sur 2 colonnes, 1 seule sous 620px. */
@media (min-width:621px){ .lc-bls-2 > li:nth-child(-n+2){border-top:0} }
@media (max-width:620px){ .lc-bls-2 > li:first-child{border-top:0} }
.lc-bls-1 > li:first-child{border-top:0}
/* Listes de caracteristiques en UNE colonne (carte du heros): seul le 1er item. */
.lc-012 > li:first-child,.lc-063 > li:first-child,.lc-052 > li:first-child{border-top:0}
/* et l'encadre */
.lc-co-l > li:first-child{border-top:0}

/* --- Bande reconduite: quand elle ne porte PAS de liste, elle se lit mieux en
       RANGEE, texte a gauche et action a droite (demande client). `:has()` permet
       de distinguer les deux cas sans toucher au HTML. --- */
.lc-strip-in:not(:has(ul)){display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px 28px}
/* `!important`: Oxygen pose une marge basse de 16px sur ses `.oxy-text` et charge
   apres cette feuille. Sans ca l'intitule flotte 8px plus haut que les pastilles,
   ce qui se voit tout de suite sur une bande d'une seule ligne. */
.lc-strip-in:not(:has(ul)) > p{margin:0 !important}
.lc-strip-in:not(:has(ul)) > p.lc-017{flex:0 0 auto}
.lc-strip-in:not(:has(ul)) > a{margin-left:auto}
/* ... sauf s'il y en a plusieurs: ce sont alors des pastilles, pas une action. */
.lc-strip-in:not(:has(ul)):has(> a ~ a){justify-content:flex-start;gap:14px 26px}
.lc-strip-in:not(:has(ul)):has(> a ~ a) > a{margin-left:0}
/* meme cas quand les pastilles sont regroupees dans un conteneur (lc-044) */
.lc-strip-in > div:has(> a + a){margin-left:0;flex:1 1 auto}

/* --- Alignement des coches. PIEGE: Oxygen enveloppe le contenu d'un <li> dans un
       <div class="oxy-text">, donc un flex pose sur le <li> n'a qu'UN enfant et
       n'aligne rien (meme piege que .lc-fb). Il faut viser CET enfant. --- */
.lc-053,.lc-bl,.lc-co-li,.lc-heroc-li,.lc-072{display:flex;gap:11px;align-items:flex-start}
.lc-053>div,.lc-bl>div,.lc-co-li>div,.lc-heroc-li>div,.lc-072>div{display:flex;gap:11px;align-items:flex-start;min-width:0}
/* Filet de securite: la liste de classes ci-dessus s'est deja fait oublier deux fois
   (.lc-heroc-li, puis .lc-072 sur /valeurs/). `:has()` attrape TOUT porteur de coche,
   present et futur, sans avoir a enumerer les classes de la maquette. */
li:has(> .lc-ico),li:has(> div > .lc-ico){display:flex;gap:11px;align-items:flex-start}
li > div:has(> .lc-ico){display:flex;gap:11px;align-items:flex-start;min-width:0}
.lc-ck,.lc-check{flex:0 0 auto;margin-top:3px;color:var(--accent)}
.lc-ck svg,.lc-check svg{display:block;width:15px;height:15px}
/* dernier item: pas de filet qui pende sous la liste */
.lc-heroc-list > li:last-child{border-bottom:0}

/* --- Colonne droite du heros: une vraie CARTE. Le filet a gauche laissait un grand
       vide sous la liste et ne se lisait pas comme un objet. `!important` parce que
       .lc-010 existe deja dans le magasin d'Oxygen, qui charge APRES. --- */
.lc-010{background:#fff !important;border:1px solid var(--line) !important;
  border-left:1px solid var(--line) !important;border-radius:var(--radius) !important;
  padding:24px 26px !important}
.lc-053:first-child,.lc-012>li:first-child,.lc-063>li:first-child{border-top:0}

/* --- Rangee de cartes « Nos points forts »: 48px de marge basse s'ajoutaient aux
       20px de rembourrage des cartes, soit 68px de vide avant le paragraphe. --- */
.lc-036{margin-bottom:26px !important}

/* --- Bandeau superieur (demande client 2026-09-11). Meme largeur de contenu que
       toutes les autres sections: --maxw et 28px de rembourrage. --- */
/* Le panneau blanc du heros reprend un rembourrage normal en mobile: la colonne
   occupe alors toute la largeur et le texte collait au bord droit. */
/* --- MESURE IMPORTANTE: `breakdance_ability_insert_stylesheet` FUSIONNE, il ne
       remplace pas. Retirer une regle de la source ne la supprime PAS du magasin:
       `.lc-heroc-txt::before{width:100vw}` y est reste apres suppression et faisait
       deborder la page en mobile. On la neutralise donc explicitement, avec
       `!important` puisque le magasin charge APRES cette feuille. --- */
/* --- Les boutons d'entete restaient VISIBLES en mobile. Cause: ma regle « gros
       boutons » pose `display:inline-flex !important` sur `.lc-119`/`.lc-120`, et
       elle est ecrite APRES `@media(max-width:980px){.lc-desk{display:none!important}}`.
       Deux `!important` de meme specificite: c'est le dernier qui gagne. On remonte
       donc la specificite (0,2,0) pour trancher quelle que soit la position. --- */
@media (max-width:980px){.lc-119.lc-desk,.lc-120.lc-desk,.lc-118.lc-desk{display:none !important}}

/* --- Bande de preuves: le filet de separation est VERTICAL entre colonnes, il doit
       devenir HORIZONTAL des que la grille retombe sur une colonne, sinon les items
       2 a 4 gardent un trait et un retrait a gauche (vu en capture mobile). Meme
       calcul de points de bascule que pour les autres bandes: `auto-fit` en
       minmax(215px,1fr), contenu = min(1320,vw) - 56.
       4 colonnes >= 916px, 3 >= 701px, 2 >= 486px, 1 en dessous. --- */
@media (min-width:701px) and (max-width:915px){
  .lc-proof:nth-child(3n+1){border-left:0 !important;padding-left:0 !important}
}
@media (min-width:486px) and (max-width:700px){
  .lc-proof:nth-child(odd){border-left:0 !important;padding-left:0 !important}
}
@media (max-width:485px){
  .lc-proof{padding-right:0 !important}
  .lc-proof + .lc-proof{border-left:0 !important;padding-left:0 !important;
    border-top:1px solid var(--line);padding-top:22px}
}

/* --- Cibles tactiles en mobile. Mesure par CDP a 360px: les liens du pied font 20 a
       21px de haut et le numero du bandeau 18px, sous le minimum confortable (~40px).
       On les allonge par du rembourrage vertical, ce qui aere aussi la liste sur un
       telephone. Aucun effet en bureau. --- */
@media (max-width:980px){
  .lc-155,.lc-151,.lc-156 a{padding-top:9px;padding-bottom:9px}
  .lc-topbar-tel{padding-top:8px;padding-bottom:8px}
  .lc-102,.lc-103 a{padding-top:6px;padding-bottom:6px;display:inline-block}
}

/* Bandeau superieur: en mobile tout est centre, en bureau les zones restent a gauche
   et le numero est pousse a droite (demande client 2026-09-11). */
@media (max-width:980px){
  .lc-topbar-in{justify-content:center}
  .lc-topbar-tl{margin-left:0}
}

/* --- Espacement interne des formulaires. CF7 laisse DEUX blocs qui occupent de la
       place meme vides: `.wpcf7-response-output` (marge 2em/1em par defaut) et
       `.wpcf7-spinner`. C'est eux qui creusaient le vide sous le bouton. --- */
.lc-134 .wpcf7-response-output[aria-hidden="true"]{display:none !important}
.lc-134 .wpcf7-spinner{margin:0 !important;position:absolute}
.lc-134 .lc-143{width:100%}
/* un peu plus d'air entre le consentement et le bouton, un peu moins ailleurs */
.lc-141{align-items:flex-start;gap:11px}

.lc-heroc-txt::before{content:none !important;width:0 !important;display:none !important}

/* Le panneau blanc n'existe qu'en MOBILE, dans la largeur du contenu (il ne file plus
   jusqu'au bord gauche), et tout le heros y est CENTRE. En bureau, le texte se pose
   directement sur la partie claire de la photo, qui a ete cadree pour cela. */
@media (max-width:719px){
  /* le titre passait sur cinq lignes en mobile: on le descend d'un cran */
  .lc-heroc-h1{font-size:clamp(28px,8.2vw,36px) !important}
  .lc-heroc-txt{background:#fff !important;padding:26px 22px !important;
    border-radius:var(--radius);box-shadow:none !important;text-align:center}
  .lc-heroc-h1,.lc-heroc-sub{max-width:100% !important;margin-left:auto;margin-right:auto}
  .lc-heroc-cta{justify-content:center}
}
/* --- Debordement de la carte-formulaire sur la section suivante (demande client).
       MESURE: le magasin de selecteurs d'Oxygen JETTE `transform`, `position`,
       `z-index` et `box-shadow` — il ne garde que les proprietes de son propre
       modele. Ces quatre-la doivent donc vivre ICI, dans une feuille CSS ordinaire.
       `padding-bottom` porte `!important` parce qu'Oxygen, lui, la definit. --- */
@media (min-width:1100px){
  .lc-heroc-grid{padding-bottom:22px !important}
  .lc-heroc-card{position:relative;z-index:3;margin-bottom:-550px;
    box-shadow:0 18px 44px rgba(20,26,34,.10)}
  /* colonne de texte plus large, carte plus etroite: le formulaire se decale a droite */
  .lc-heroc-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr) !important}
  /* La carte etant plus etroite, `auto-fit` faisait retomber les champs sur UNE
     colonne et la carte doublait de hauteur. On force les deux colonnes. */
  .lc-heroc-card .lc-frow{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
/* Chapeaux de l'accueil plus larges (demande client 2026-09-11). `.lc-019` vient de
   la maquette et vit dans selectors.css, qui charge apres: d'ou `!important`. */
/* Les deux titres de l'accueil etaient brides a 24 signes par ligne, ce qui les
   empilait sur trois lignes etroites au milieu d'un conteneur de 1124px. Ils ne
   servent QUE sur l'accueil (2 occurrences chacun), la portee est donc sure. */
/* --- Polices (demande client 2026-09-11): Space Grotesk et Space Mono sont
       remplacees par Sora sur tout le site. Inter reste la police du texte courant.
       Ce second `:root` est plus bas dans la meme feuille que celui de la maquette,
       il l'emporte donc, et la substitution survit a une regeneration. --- */
:root{--disp:'Sora',sans-serif;--mono:'Sora',sans-serif;--maxw:1320px}

/* Les deux titres de l'accueil portent la MEME classe mais demandent des largeurs
   OPPOSEES: celui des preuves doit s'arreter avant la carte-formulaire qui deborde
   du heros (sinon le texte passe dessous), celui des services doit au contraire
   s'etaler. On les separe par la section qui les porte — `.lc-025` ne sert que sur
   l'accueil, la portee est donc sure. */
.lc-025{margin-bottom:24px !important}
.lc-001 .lc-025{max-width:44ch !important}
.lc-014 .lc-025{max-width:44ch !important}
.lc-019{max-width:none !important}
/* Les brides etroites de `.lc-014` etaient une correction PROPRE A L'ACCUEIL: le
   chapeau de la bande de preuves doit s'arreter avant la carte-formulaire qui
   deborde du heros. Les pages de service reutilisent les memes classes et se
   retrouvaient bridees a 23/48 signes (revue client 2026-09-14): on limite donc
   ces deux regles a l'accueil, que WordPress marque `.home` en FR comme en EN. */
.home .lc-014 .lc-025{max-width:23ch !important}
.home .lc-014 .lc-019{max-width:48ch !important}

/* Heros des pages de service: bascule en une colonne, photo sous le texte. */
@media (max-width:900px){
  .lc-shero-grid{grid-template-columns:1fr !important;gap:30px !important}
  .lc-shero-img{aspect-ratio:16/10 !important;border-radius:14px !important}
}
/* Bloc « Soumission / Contact »: titre au-dessus du formulaire et ligne de
   reassurance en dessous (revue client 2026-09-11). */
.lc-soum-form{display:flex;flex-direction:column;gap:12px;min-width:0}
.lc-soum-ft{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.3;color:var(--ink);margin:0}
.lc-soum-rs{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}

/* la carte du heros deborde de 96px: la section suivante doit lui laisser la place */
@media (min-width:1100px){.lc-heroc + section .lc-015{padding-top:calc(var(--section-y) + 34px)}}
.lc-topbar{background:var(--accent);color:#fff}
.lc-topbar-in{max-width:var(--maxw);margin:0 auto;padding:9px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13.5px;line-height:1.35}
.lc-topbar-l{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);flex:0 0 auto}
.lc-topbar-v{color:#fff}
/* le numero se colle a droite de la bande */
.lc-topbar-tl{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);flex:0 0 auto}
.lc-topbar-tel{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap}
.lc-topbar-tel:hover{color:#fff;text-decoration:underline}

/* --- Icones des boutons d'entete. PIEGE connu: Oxygen enveloppe le contenu d'un
       <a> dans un <div class="oxy-text">, donc le flex doit viser CET enfant,
       sinon l'icone et le texte ne s'espacent pas. --- */
.lc-btnico{--oxy-icon-stroke:none;--oxy-icon-fill:currentColor;display:inline-flex;align-items:center;width:16px;height:16px;flex:0 0 auto}
.lc-btnico svg{width:16px;height:16px;display:block}
.lc-119,.lc-120{display:inline-flex !important;align-items:center !important;gap:8px}
.lc-119 > div,.lc-120 > div{display:inline-flex;align-items:center;gap:8px}

/* --- Boutons plus grands (demande client 2026-09-09). Ils faisaient 15px de texte
       et 13 a 15px de rembourrage, soit ~46px de haut. `!important` parce qu'Oxygen
       definit deja ces proprietes et charge APRES cette feuille. --- */
.lc-008,.lc-034,.lc-066,.lc-079,.lc-heroc-btn,.lc-heroc-btn2{
  min-height:56px !important;font-size:17px !important;
  padding-top:0 !important;padding-bottom:0 !important;
  padding-left:30px !important;padding-right:30px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important}
/* le bouton du bandeau d'entete reste plus discret: c'est une nav, pas un CTA de page */
.lc-119{min-height:44px;font-size:14.5px}
@media (max-width:620px){
  /* en mobile un CTA prend toute la largeur: cible tactile et fin de lecture */
  .lc-008,.lc-034,.lc-066,.lc-079,.lc-heroc-btn,.lc-heroc-btn2,
  .lc-btn-xl,.lc-btn-xl-2{width:100% !important}
  .lc-heroc-cta,.lc-cta{width:100%}
}

/* --- 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)},
       donc SANS regle explicite le texte d'un bouton devient orange: illisible sur
       un bouton bleu, invisible sur un bouton orange. La liste couvre TOUS les
       boutons, y compris ceux ajoutes apres coup (.lc-heroc-btn, .lc-btn-xl), pour
       que le bug ne revienne pas a chaque nouveau bouton. --- */
/* boutons pleins ORANGE: texte blanc, fond assombri */
.lc-034:hover,.lc-heroc-btn:hover,.lc-btn-xl:hover{color:#fff;background:#c94d13}
/* boutons pleins BLEUS: texte blanc, fond assombri */
.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)}
/* boutons a contour: la couleur du texte NE CHANGE PAS */
.lc-heroc-btn2:hover{color:var(--ink);background:var(--surface)}
.lc-btn-xl-2:hover{color:#fff;background:rgba(255,255,255,.10)}
.lc-008,.lc-034,.lc-066,.lc-079,.lc-128,.lc-heroc-btn,.lc-heroc-btn2,
.lc-btn-xl,.lc-btn-xl-2{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}

/* --- Section « Soumission / Contact »: le formulaire prend la plus grosse part,
       donc il s'etale au lieu de s'allonger. La largeur du CONTENEUR reste celle
       de toutes les autres sections (--maxw): l'elargir desalignait la section
       de ses voisines. La maquette avait deux
       colonnes EGALES (auto-fit minmax(320px,1fr)) qui donnaient 538px au formulaire.
       En passant en fr explicites on perd l'empilement automatique d'auto-fit: la
       media query le remet. --- */
/* `!important` assume: Oxygen imprime son selectors.css APRES cette feuille, quelle
   que soit la priorite du hook (verifie jusqu'a wp_head 9999). Une regle a
   specificite EGALE est donc perdue, et `.lc-129` existe des deux cotes. */
.lc-129{grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr) !important;gap:56px !important}
@media (max-width:900px){.lc-129{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}}
/* Moins de hauteur: le formulaire etant plus large, on resserre la zone de texte,
   les interstices et le rembourrage de la carte. `!important` pour la meme raison
   que ci-dessus (Oxygen charge apres et definit deja ces proprietes). */
.lc-138{height:46px !important;min-height:46px}
.lc-134{padding:22px !important;gap:18px !important}
.lc-135{gap:8px !important}
.lc-143{height:48px !important}
.lc-146{margin-top:2px !important}

/* --- 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. --- */
/* auto-fit: la rangee s'adapte au NOMBRE de champs (3 depuis le 2026-09-04) et
   retombe seule sur une colonne quand la place manque. */
.lc-frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:15px}

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

/* Heros d'accueil, 2026-09-14: fichier 2560x825 fourni par le client. L'ancien
   lc-heros-bureau-2.jpg faisait 2000x667 et etait AGRANDI 1,27x sur un ecran 2560
   (mesure au navigateur). L'URL vit dans le magasin de selecteurs d'Oxygen, que
   `wp oxygen clear_cache` regenere: on surcharge ici. !important obligatoire, cette
   feuille charge AVANT selectors.css. Source a jour: convert2.py ligne 167. */
.lc-heroc{background-image:url("https://www.lauserco.com/wp-content/uploads/2026/09/lc-heros-bureau-3.jpg") !important}