/* ==========================================================================
   Neutralisation de GeneratePress
   Le theme pose ses propres conteneurs, fonds blancs et marges. Nos pages
   gerent leur pleine largeur elles-memes : on rend la structure du theme
   transparente plutot que de lutter section par section.
   ========================================================================== */
/* GeneratePress ecrit sa largeur de conteneur en style inline dans l'entete,
   apres notre feuille : il faut le meme poids pour la reprendre. */
body .site.grid-container.container{ max-width:100%; padding:0 }
.separate-containers .site-content{ padding:0; margin:0 }
.separate-containers .inside-article,
.separate-containers .content-area,
.one-container .site-content{ background:transparent; padding:0; margin:0 }
.entry-content{ margin:0 }
.entry-content > :first-child{ margin-top:0 }
.inside-header{ max-width:1180px; margin-inline:auto; padding:20px 22px }
.entry-header, .page-header, .entry-meta{ display:none }
.site-content .content-area{ width:100%; max-width:100% }
/* ==========================================================================
   urgenceserrurierlyon.fr - systeme de design "astreinte"
   Ecran de garde : encre profonde, signal ambre, lecture de nuit.
   Rien de commun avec le site changement de serrure, qui est clair et editorial.
   ========================================================================== */

:root{
  --encre:      #0b1016;
  --encre-2:    #141d26;
  --encre-3:    #1b2731;
  --encre-4:    #24333f;
  --bord:       rgba(255,255,255,.075);
  --bord-fort:  rgba(255,255,255,.16);

  --clair:      #eef4f9;
  --doux:       #9fb0be;
  --tres-doux:  #7e8fa0;

  --ambre:      #f5a83f;
  --ambre-2:    #ffc169;
  --ambre-sourd: rgba(245,168,63,.13);
  --ambre-trait: rgba(245,168,63,.34);

  --vert:       #4fd693;
  --vert-sourd: rgba(79,214,147,.12);
  --rouge:      #ff8163;
  --rouge-sourd: rgba(255,129,99,.12);
  --bleu:       #6fb4e8;

  --titre: "Space Grotesk", "Segoe UI", Roboto, sans-serif;
  --texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r:    14px;
  --r-s:  10px;
  --ombre: 0 18px 46px -22px rgba(0,0,0,.9);
  --lueur: 0 0 0 1px var(--ambre-trait), 0 14px 40px -16px rgba(245,168,63,.42);
}

*{ box-sizing:border-box }

body{
  background:var(--encre);
  color:var(--clair);
  font-family:var(--texte);
  font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:520px; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 300px at 18% -8%, rgba(245,168,63,.14), transparent 68%),
    radial-gradient(620px 280px at 88% -12%, rgba(111,180,232,.09), transparent 66%);
}
.site{ position:relative; z-index:1 }
.site.grid-container.container{ max-width:1180px }
#page, .site-content, .content-area, .site-main{ background:transparent }

h1,h2,h3,h4{ font-family:var(--titre); font-weight:700; letter-spacing:-.025em; color:var(--clair) }
h1{ font-size:clamp(34px,5.4vw,56px); line-height:1.06; margin:0 0 18px }
h2{ font-size:clamp(26px,3.5vw,38px); line-height:1.14; margin:0 0 16px }
h3{ font-size:19.5px; line-height:1.3; margin:0 0 9px }
p{ margin:0 0 16px }
a{ color:var(--ambre); text-decoration:none }
a:hover{ color:var(--ambre-2); text-decoration:underline }
strong{ font-weight:600; color:#fff }
sup{ font-size:.62em; vertical-align:.42em }
::selection{ background:var(--ambre); color:var(--encre) }

.u-wrap{ max-width:1100px; margin-inline:auto; padding-inline:22px }
.u-etroit{ max-width:720px }
.u-sec{ padding:78px 0 }
.u-sec.serre{ padding:52px 0 }
.u-sec.encadre{ background:var(--encre-2); border-block:1px solid var(--bord) }

/* surtitre : etiquette de poste de garde */
.u-sur{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--titre); font-size:11.5px; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ambre);
  margin:0 0 14px;
}
.u-sur::before{
  content:""; width:22px; height:2px; background:var(--ambre); border-radius:2px;
}
.u-intro{ font-size:18.5px; color:var(--doux); max-width:760px; margin-bottom:34px }

/* ---------- boutons ---------- */
.u-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 26px; border-radius:var(--r-s);
  font-family:var(--titre); font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  background:var(--ambre); color:var(--encre); border:1px solid var(--ambre);
  box-shadow:0 10px 30px -12px rgba(245,168,63,.55);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.u-btn:hover{ background:var(--ambre-2); border-color:var(--ambre-2); color:var(--encre); text-decoration:none; transform:translateY(-1px); box-shadow:0 14px 34px -12px rgba(245,168,63,.7) }
.u-btn:active{ transform:translateY(0) }
.u-btn.sec{ background:transparent; color:var(--clair); border-color:var(--bord-fort); box-shadow:none }
.u-btn.sec:hover{ background:var(--encre-3); color:var(--clair); border-color:var(--bord-fort) }
.u-btn.wa{ background:#1fa855; border-color:#1fa855; color:#fff; box-shadow:0 10px 30px -12px rgba(31,168,85,.6) }
.u-btn.wa:hover{ background:#25c264; border-color:#25c264; color:#fff }
.u-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:26px }
/* ---------- bandeau d'astreinte ---------- */
.u-astreinte{
  position:relative; z-index:60;
  background:var(--encre-2); border-bottom:1px solid var(--bord);
  font-size:13.5px; color:var(--doux);
}
.u-astreinte .in{
  max-width:1180px; margin-inline:auto; padding:9px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.u-pouls{
  position:relative; width:9px; height:9px; border-radius:50%;
  background:var(--vert); flex:none;
}
.u-pouls::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--vert); opacity:.55;
  animation:u-onde 2.2s ease-out infinite;
}
@keyframes u-onde{ 0%{transform:scale(.5);opacity:.75} 100%{transform:scale(1.35);opacity:0} }
.u-astreinte .periode{
  font-family:var(--titre); font-weight:700; color:var(--clair);
  letter-spacing:.13em; text-transform:uppercase; font-size:11.5px;
}
.u-astreinte .sep{ color:var(--encre-4) }
.u-astreinte .num{ margin-left:auto; font-family:var(--titre); font-weight:700; color:var(--ambre); font-size:15px }
.u-astreinte .num:hover{ color:var(--ambre-2) }

/* ---------- entete ---------- */
.site-header{ background:transparent; border-bottom:1px solid var(--bord); position:relative; z-index:50 }
.usl-barre{ display:flex; align-items:center; gap:12px }
.usl-tel{
  display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 18px;
  border-radius:var(--r-s); background:var(--ambre); color:var(--encre);
  font-family:var(--titre); font-weight:700; font-size:16px; white-space:nowrap;
  box-shadow:0 8px 24px -12px rgba(245,168,63,.6);
}
.usl-tel:hover{ background:var(--ambre-2); color:var(--encre); text-decoration:none }
.usl-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; min-width:46px; padding:0 14px; border-radius:var(--r-s);
  background:transparent; border:1px solid var(--bord-fort); color:var(--clair);
  font-weight:600; font-size:15px;
}
.usl-wa:hover{ background:var(--encre-3); color:var(--clair); text-decoration:none }
.usl-ico-wa{ width:19px; height:19px; flex:none; fill:#25d366 }

.usl-logo{ display:inline-flex; align-items:center; gap:11px }
.usl-logo svg{ flex:none }
.usl-logo-texte{ display:flex; flex-direction:column; line-height:1.02 }
.usl-logo-texte .l1{ font-family:var(--titre); font-weight:700; font-size:18px; color:var(--clair); letter-spacing:-.03em }
.usl-logo-texte .l2{ font-family:var(--titre); font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ambre) }
.main-title a, .site-branding a{ text-decoration:none }

/* navigation
   GeneratePress ecrit ses couleurs de menu en style inline dans l'entete,
   apres notre feuille : a specificite egale il l'emporte. On prefixe donc
   par body, comme pour la largeur du conteneur. Les entetes de groupe sont
   des liens vers "#" et heritaient sinon du bleu par defaut. */
.main-navigation{ background:transparent }
body .main-navigation .main-nav ul li a{
  color:var(--doux); font-family:var(--titre); font-weight:500; font-size:14.5px;
  letter-spacing:-.01em; text-decoration:none;
}
body .main-navigation .main-nav ul li a:hover,
body .main-navigation .main-nav ul li.current-menu-item > a,
body .main-navigation .main-nav ul li.current-menu-ancestor > a{
  color:var(--clair); background:transparent; text-decoration:none;
}
body .main-navigation .main-nav ul ul{
  background:var(--encre-2); border:1px solid var(--bord);
  border-radius:var(--r-s); overflow:hidden; box-shadow:var(--ombre); min-width:230px;
}
body .main-navigation .main-nav ul ul li a{ color:var(--doux); font-size:14px }
body .main-navigation .main-nav ul ul li a:hover{ background:var(--encre-3); color:var(--clair) }
/* la fleche de deploiement suit la couleur du texte */
.main-navigation .dropdown-menu-toggle{ color:inherit }
.menu-toggle{ color:var(--clair) }
.menu-toggle:hover{ color:var(--ambre) }

/* ---------- barre d'action collante (mobile) ---------- */
.u-collant{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  padding:9px 11px calc(9px + env(safe-area-inset-bottom));
  background:rgba(11,16,22,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--bord);
  grid-template-columns:1fr auto auto; gap:9px;
}
.u-collant a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; border-radius:var(--r-s);
  font-family:var(--titre); font-weight:700; font-size:16px;
}
.u-collant .app{ background:var(--ambre); color:var(--encre) }
.u-collant .wa{ background:#1fa855; color:#fff; width:56px }
.u-collant .ph{ background:var(--encre-3); color:var(--clair); border:1px solid var(--bord-fort); width:56px }
.u-collant svg{ width:21px; height:21px; flex:none }

/* marque */
.usl-logo{ color:var(--clair) }
.usl-marque{ width:38px; height:38px; flex:none; color:var(--ambre) }
.usl-marque .creux{ fill:var(--encre) }
/* ---------- hero : poste de garde ---------- */
.u-hero{ position:relative; padding:64px 0 72px; overflow:hidden }
.u-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(720px 420px at 30% 30%, #000, transparent 72%);
          mask-image:radial-gradient(720px 420px at 30% 30%, #000, transparent 72%);
}
.u-hero > *{ position:relative }
.u-hero h1{ max-width:14ch }
.u-hero .accroche{ font-size:19px; color:var(--doux); max-width:52ch; margin-bottom:0 }
.u-hero .accroche strong{ color:var(--clair) }
.u-hero-grille{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }

/* etiquettes de statut */
.u-jetons{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none }
.u-jeton{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:99px; font-size:12.5px; font-weight:600;
  background:var(--encre-2); border:1px solid var(--bord); color:var(--doux);
}
.u-jeton svg{ width:14px; height:14px; flex:none; stroke:var(--ambre); fill:none; stroke-width:1.9 }
.u-jeton.on{ background:var(--vert-sourd); border-color:rgba(79,214,147,.3); color:var(--vert) }
.u-jeton.on svg{ stroke:var(--vert) }

/* ---------- diagnostic interactif ---------- */
.u-diag{
  background:var(--encre-2); border:1px solid var(--bord);
  border-radius:var(--r); padding:26px; box-shadow:var(--ombre);
}
.u-diag .q{
  font-family:var(--titre); font-weight:700; font-size:20px; line-height:1.26;
  margin:0 0 6px; color:var(--clair); letter-spacing:-.02em;
}
.u-diag .sq{ font-size:14.5px; color:var(--tres-doux); margin:0 0 18px }
.u-opts{ display:grid; gap:10px }
.u-opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 17px; border-radius:var(--r-s); cursor:pointer;
  background:var(--encre-3); border:1px solid var(--bord); color:var(--clair);
  font-family:var(--texte); font-size:16px; line-height:1.4;
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.u-opt:hover{ border-color:var(--ambre-trait); background:var(--encre-4); transform:translateY(-1px) }
.u-opt[aria-pressed="true"]{ border-color:var(--ambre); box-shadow:inset 0 0 0 1px var(--ambre) }
.u-opt .cle{
  flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--encre); border:1px solid var(--bord-fort);
  font-family:var(--titre); font-weight:700; font-size:13px; color:var(--ambre);
}
.u-opt b{ display:block; font-weight:600 }
.u-opt span.d{ display:block; font-size:13.5px; color:var(--tres-doux); margin-top:2px }

.u-rep{ display:none; margin-top:18px; padding-top:18px; border-top:1px solid var(--bord) }
.u-rep.on{ display:block; animation:u-monte .34s cubic-bezier(.2,.7,.3,1) }
@keyframes u-monte{ from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }
.u-rep .verdict{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 12px;
  font-family:var(--titre); font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:8px 14px; border-radius:99px;
}
.u-rep.bon .verdict{ background:var(--vert-sourd); color:var(--vert); border:1px solid rgba(79,214,147,.3) }
.u-rep.dur .verdict{ background:var(--rouge-sourd); color:var(--rouge); border:1px solid rgba(255,129,99,.3) }
.u-rep.inc .verdict{ background:var(--ambre-sourd); color:var(--ambre); border:1px solid var(--ambre-trait) }
.u-rep p{ font-size:15.5px; color:var(--doux); margin:0 0 12px }
.u-rep ul{ margin:0 0 16px; padding:0; list-style:none }
.u-rep li{ position:relative; padding-left:22px; font-size:15px; color:var(--doux); margin-bottom:7px }
.u-rep li::before{ content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--ambre) }
.u-rep.bon li::before{ background:var(--vert) }
.u-rep.dur li::before{ background:var(--rouge) }
.u-rep .u-btn{ min-height:52px; width:100% }
.u-rep .lien-suite{ display:inline-block; margin-top:12px; font-size:14.5px; font-weight:600 }
/* ---------- cartes et blocs de contenu ---------- */
.u-carte{
  background:var(--encre-2); border:1px solid var(--bord);
  border-radius:var(--r); padding:26px;
}
.u-carte h3{ margin-bottom:10px }
.u-carte p{ font-size:15.5px; color:var(--doux); margin-bottom:0 }

.u-duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.u-duo .u-carte{ position:relative; padding-top:30px }
.u-duo .u-carte::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  border-radius:var(--r) var(--r) 0 0; background:var(--encre-4);
}
.u-duo .u-carte.bon::before{ background:var(--vert) }
.u-duo .u-carte.dur::before{ background:var(--rouge) }
.u-duo .et{
  display:inline-block; font-family:var(--titre); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:9px; color:var(--tres-doux);
}
.u-duo .u-carte.bon .et{ color:var(--vert) }
.u-duo .u-carte.dur .et{ color:var(--rouge) }
.u-duo ul{ list-style:none; margin:14px 0 0; padding:0 }
.u-duo li{ position:relative; padding-left:21px; font-size:15px; color:var(--doux); margin-bottom:8px }
.u-duo li::before{ content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--encre-4) }
.u-duo .u-carte.bon li::before{ background:var(--vert) }
.u-duo .u-carte.dur li::before{ background:var(--rouge) }
.u-duo .chute{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--bord);
  font-size:14.5px; font-weight:600; color:var(--clair);
}

/* ---------- procedure numerotee, style feuille d'intervention ---------- */
.u-proc{ display:grid; gap:0; border:1px solid var(--bord); border-radius:var(--r); overflow:hidden; background:var(--encre-2) }
.u-etape{ display:grid; grid-template-columns:74px 1fr; gap:0; border-bottom:1px solid var(--bord) }
.u-etape:last-child{ border-bottom:0 }
.u-etape .n{
  display:grid; place-items:center; background:var(--encre-3); border-right:1px solid var(--bord);
  font-family:var(--titre); font-weight:700; font-size:19px; color:var(--ambre);
}
.u-etape .co{ padding:20px 24px }
.u-etape h3{ font-size:17.5px; margin-bottom:5px }
.u-etape p{ font-size:15px; color:var(--doux); margin:0 }

/* ---------- encart ---------- */
.u-note{
  border-radius:var(--r); padding:22px 24px; border:1px solid var(--bord);
  background:var(--encre-2); margin-top:28px;
}
.u-note.bon{ background:var(--vert-sourd); border-color:rgba(79,214,147,.26) }
.u-note.alerte{ background:var(--rouge-sourd); border-color:rgba(255,129,99,.26) }
.u-note .et{
  display:block; font-family:var(--titre); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ambre); margin-bottom:8px;
}
.u-note.bon .et{ color:var(--vert) }
.u-note.alerte .et{ color:var(--rouge) }
.u-note p{ margin:0; font-size:15.5px; color:var(--doux) }
.u-note p + p{ margin-top:10px }

/* ---------- grille de liens ---------- */
.u-liens{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.u-liens a{
  display:block; padding:22px; border-radius:var(--r);
  background:var(--encre-2); border:1px solid var(--bord); color:var(--clair);
  transition:border-color .16s ease, transform .12s ease, background .16s ease;
}
.u-liens a:hover{ border-color:var(--ambre-trait); background:var(--encre-3); transform:translateY(-2px); text-decoration:none }
.u-liens .t{ display:block; font-family:var(--titre); font-weight:700; font-size:17px; margin-bottom:6px; letter-spacing:-.02em }
.u-liens .d{ display:block; font-size:14.5px; color:var(--doux); line-height:1.55 }
.u-liens .fl{ display:inline-block; margin-top:11px; font-size:14px; font-weight:700; color:var(--ambre) }

/* ---------- zones ---------- */
.u-zones{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0 }
.u-zones li{
  padding:9px 15px; border-radius:99px; font-size:14.5px; font-weight:500;
  background:var(--encre-2); border:1px solid var(--bord); color:var(--doux);
}

/* ---------- FAQ ---------- */
.u-faq details{
  border:1px solid var(--bord); border-radius:var(--r-s);
  background:var(--encre-2); margin-bottom:10px; overflow:hidden;
}
.u-faq details[open]{ border-color:var(--bord-fort) }
.u-faq summary{
  list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative;
  font-family:var(--titre); font-weight:600; font-size:16.5px; color:var(--clair); letter-spacing:-.015em;
}
.u-faq summary::-webkit-details-marker{ display:none }
.u-faq summary::after{
  content:""; position:absolute; right:21px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--ambre); border-bottom:2px solid var(--ambre);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.u-faq details[open] summary::after{ transform:translateY(-30%) rotate(225deg) }
.u-faq summary:hover{ background:var(--encre-3) }
.u-faq .rep{ padding:0 20px 19px }
.u-faq .rep p{ font-size:15.5px; color:var(--doux); margin:0 0 10px }
.u-faq .rep p:last-child{ margin-bottom:0 }

/* ---------- appel final ---------- */
.u-fin{
  position:relative; overflow:hidden; text-align:center;
  padding:74px 22px; border-block:1px solid var(--bord);
  background:linear-gradient(180deg, var(--encre-2), var(--encre));
}
.u-fin::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 240px at 50% 0%, rgba(245,168,63,.18), transparent 70%);
}
.u-fin > *{ position:relative }
.u-fin h2{ margin-bottom:12px }
.u-fin p{ color:var(--doux); max-width:56ch; margin:0 auto 8px; font-size:17px }
.u-fin .u-actions{ justify-content:center }

/* ---------- schema ---------- */
.u-schema{
  background:var(--encre-2); border:1px solid var(--bord); border-radius:var(--r);
  padding:20px; box-shadow:var(--ombre);
}
/* Le dessin est trace dans un repere de 520 unites. Etire sur 1100px il
   grossit d'autant ses etiquettes, qui prennent alors le pas sur le trait.
   On le borne a sa largeur de lecture. */
.u-schema svg{ display:block; width:100%; max-width:740px; height:auto; margin-inline:auto }
.u-schema .lg{
  margin:14px 0 0; padding-top:13px; border-top:1px solid var(--bord);
  font-size:13px; color:var(--tres-doux); text-align:center;
}
/* ---------- pied de page ---------- */
.usl-large{ max-width:1100px; margin-inline:auto; padding-inline:22px }
/* Notre pied de page est injecte dans generate_copyright, donc a
   l'interieur de .site-info : on masque les zones de widgets du theme,
   surtout pas le conteneur qui porte le notre. */
.footer-widgets, .footer-bar{ display:none }
.site-footer, .site-info, .copyright-bar{ background:transparent; padding:0; margin:0; border:0 }
.inside-site-info.grid-container{ display:block; max-width:100%; padding:0 }
.site-info, .copyright-bar, .usl-pied{ text-align:left }
.usl-pied{ background:var(--encre-2); border-top:1px solid var(--bord); padding:56px 0 26px; margin-top:0 }
.usl-pied h4{
  font-family:var(--titre); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ambre); margin:0 0 14px;
}
.usl-pied h4 a{ color:var(--ambre) }
.usl-pied-grille{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:44px }
.usl-pied ul{ list-style:none; margin:0; padding:0 }
.usl-pied li{ margin-bottom:8px; font-size:14.5px; color:var(--doux); line-height:1.55 }
.usl-pied li a{ color:var(--doux) }
.usl-pied li a:hover{ color:var(--clair); text-decoration:none }
.usl-pied-tel{
  display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border-radius:var(--r-s);
  background:var(--ambre); color:var(--encre); font-family:var(--titre); font-weight:700; font-size:17px;
}
.usl-pied-tel:hover{ background:var(--ambre-2); color:var(--encre); text-decoration:none }
.usl-pied-wa{ display:inline-flex; align-items:center; gap:8px; color:var(--doux); font-size:14.5px; font-weight:500 }
.usl-pied-wa:hover{ color:var(--clair); text-decoration:none }
.usl-pied-zones{ margin-top:40px; padding-top:28px; border-top:1px solid var(--bord) }
.usl-pied-zones .ss{
  font-family:var(--titre); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tres-doux); margin:16px 0 9px;
}
.liste-zones{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0 }
.liste-zones li{ margin:0 }
.liste-zones li a{
  display:inline-block; padding:6px 12px; border-radius:99px; font-size:13.5px;
  background:var(--encre-3); border:1px solid var(--bord); color:var(--doux);
}
.liste-zones li a:hover{ border-color:var(--ambre-trait); color:var(--clair); text-decoration:none }
.usl-bas{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--bord);
  font-size:13px; color:var(--tres-doux);
}
.usl-bas a{ color:var(--tres-doux) }
.usl-bas a:hover{ color:var(--clair) }
.usl-revoir-choix{
  background:none; border:0; padding:0; font:inherit; color:var(--tres-doux);
  cursor:pointer; text-decoration:underline;
}
.usl-revoir-choix:hover{ color:var(--clair) }

/* ---------- bandeau cookies ---------- */
.usl-cookies{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120; max-width:560px;
  background:var(--encre-2); border:1px solid var(--bord-fort); border-radius:var(--r);
  padding:22px; box-shadow:var(--ombre);
}
.usl-cookies-texte{ font-size:14.5px; color:var(--doux); margin-bottom:16px }
.usl-cookies-actions{ display:flex; flex-wrap:wrap; gap:10px }
.usl-cookies .usl-btn{ min-height:46px; padding:0 20px; font-size:15px }


/* groupe de contact de l'en-tete */
.usl-contact-tete{ display:flex; align-items:center; gap:10px }
/* ==========================================================================
   Formulaire de demande
   Trois ecrans, jamais plus de six champs a l'oeil. Les noms de classes
   sont ceux que pose devis.js : ".choisi" pour une reponse retenue,
   ".charge" / ".fait" / ".erreur" pour l'etat d'un envoi de fichier.
   ========================================================================== */

/* boutons du formulaire : meme langage que le reste du site */
.usl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 26px; border-radius:var(--r-s); cursor:pointer;
  font-family:var(--titre); font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  background:var(--ambre); color:var(--encre); border:1px solid var(--ambre);
  box-shadow:0 10px 30px -12px rgba(245,168,63,.55);
  transition:transform .12s ease, background .18s ease;
}
.usl-btn:hover{ background:var(--ambre-2); border-color:var(--ambre-2); color:var(--encre); text-decoration:none; transform:translateY(-1px) }
.usl-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none }
.usl-btn.fant{ background:transparent; color:var(--clair); border-color:var(--bord-fort); box-shadow:none }
.usl-btn.fant:hover{ background:var(--encre-3); color:var(--clair); border-color:var(--bord-fort) }

.usl-devis{
  background:var(--encre-2); border:1px solid var(--bord); border-radius:var(--r);
  padding:30px; box-shadow:var(--ombre);
}

/* ---------- fil des etapes ---------- */
.usl-etapes-fil{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  list-style:none; margin:0 0 28px; padding:0;
}
.usl-etapes-fil li{
  display:flex; align-items:center; gap:10px;
  padding-top:14px; border-top:3px solid var(--encre-4);
  font-size:13.5px; color:var(--tres-doux);
  transition:border-color .3s ease, color .3s ease;
}
.usl-etapes-fil li span{
  display:grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:50%; background:var(--encre-3); border:1px solid var(--bord);
  font-family:var(--titre); font-weight:700; font-size:12.5px; color:var(--tres-doux);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.usl-etapes-fil li.on{ border-top-color:var(--ambre); color:var(--clair) }
.usl-etapes-fil li.on span{ background:var(--ambre); border-color:var(--ambre); color:var(--encre) }
.usl-etapes-fil li.fait{ border-top-color:var(--vert); color:var(--doux) }
.usl-etapes-fil li.fait span{ background:var(--vert-sourd); border-color:rgba(79,214,147,.4); color:var(--vert) }

/* ---------- vues ---------- */
/* Le bouton Retour est masque par l'attribut hidden, mais .usl-btn lui
   impose display:inline-flex, qui l'emporte sur le display:none du
   navigateur. On rend donc l'attribut prioritaire dans tout le bloc. */
.usl-devis [hidden]{ display:none !important }
.usl-vue{ animation:u-monte .3s cubic-bezier(.2,.7,.3,1) }
.usl-vue h3{ font-size:21px; margin:0 0 6px }
.usl-aide{ font-size:14.5px; color:var(--tres-doux); margin:0 0 22px }

/* ---------- etape 1 : les situations ---------- */
.usl-choix-liste{ display:grid; gap:10px }
.usl-opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:16px 46px 16px 18px; border-radius:var(--r-s); position:relative;
  background:var(--encre-3); border:1px solid var(--bord); color:var(--clair);
  font-family:var(--texte); font-size:16px; font-weight:600; line-height:1.35;
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.usl-opt small{
  display:block; margin-top:3px; font-size:13.5px; font-weight:400; color:var(--tres-doux);
}
.usl-opt:hover{ border-color:var(--ambre-trait); background:var(--encre-4); transform:translateY(-1px) }
.usl-opt::after{
  content:""; position:absolute; right:18px; top:50%; width:18px; height:18px;
  margin-top:-9px; border-radius:50%; border:2px solid var(--encre-4);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.usl-opt.choisi{ border-color:var(--ambre); box-shadow:inset 0 0 0 1px var(--ambre) }
.usl-opt.choisi::after{
  border-color:var(--ambre); background:var(--ambre);
  box-shadow:inset 0 0 0 3px var(--encre-2);
}

/* ---------- etape 2 : les champs ---------- */
.usl-form-grille{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.usl-champ{ display:flex; flex-direction:column; gap:7px }
.usl-champ-large{ grid-column:1 / -1 }
.usl-champ label{
  font-family:var(--titre); font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tres-doux);
}
.usl-champ .req{ color:var(--ambre) }
.usl-devis input[type=text], .usl-devis input[type=tel], .usl-devis textarea{
  width:100%; padding:14px 15px; border-radius:var(--r-s);
  background:var(--encre); border:1px solid var(--bord-fort); color:var(--clair);
  font-family:var(--texte); font-size:16px;   /* 16px : en dessous, iOS zoome tout seul */
}
.usl-devis textarea{ min-height:104px; resize:vertical }
.usl-devis input:focus, .usl-devis textarea:focus{
  outline:none; border-color:var(--ambre); box-shadow:0 0 0 3px var(--ambre-sourd);
}
.usl-devis input::placeholder, .usl-devis textarea::placeholder{ color:#66788a }
.usl-devis input.manque{ border-color:var(--rouge); box-shadow:0 0 0 3px var(--rouge-sourd) }
.usl-piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---------- etape 3 : photo et video ---------- */
.usl-medias{ display:grid; gap:12px }
.usl-media{
  display:flex; align-items:center; gap:15px; cursor:pointer;
  padding:18px; border-radius:var(--r-s);
  background:var(--encre-3); border:1px dashed var(--bord-fort);
  transition:border-color .18s ease, background .18s ease;
}
.usl-media:hover{ border-color:var(--ambre); background:var(--encre-4) }
.usl-media .ico{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border-radius:11px; background:var(--encre); border:1px solid var(--bord);
  color:var(--ambre);
}
.usl-media .ico svg{ width:23px; height:23px }
.usl-media .txt{ flex:1; min-width:0 }
.usl-media .txt strong{ display:block; font-size:15.5px; font-weight:600; color:var(--clair) }
.usl-media .txt span{
  display:block; font-size:13.5px; color:var(--tres-doux);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.usl-media .act{
  flex:none; font-family:var(--titre); font-size:13px; font-weight:700;
  color:var(--ambre); letter-spacing:-.01em;
}
/* pendant l'envoi : la bordure defile */
.usl-media.charge{ border-style:solid; border-color:var(--ambre-trait) }
.usl-media.charge .ico{ color:var(--ambre); animation:u-pulse-ico 1.1s ease-in-out infinite }
@keyframes u-pulse-ico{ 0%,100%{opacity:1} 50%{opacity:.4} }
.usl-media.fait{ border-style:solid; border-color:rgba(79,214,147,.45); background:var(--vert-sourd) }
.usl-media.fait .ico{ color:var(--vert); border-color:rgba(79,214,147,.35) }
.usl-media.fait .act{ color:var(--vert) }
.usl-media.erreur{ border-style:solid; border-color:rgba(255,129,99,.5); background:var(--rouge-sourd) }
.usl-media.erreur .ico, .usl-media.erreur .act{ color:var(--rouge) }

/* ---------- ecran final ---------- */
.usl-fin{ text-align:center; padding:10px 0 }
.usl-fin .coche{
  width:62px; height:62px; margin:0 auto 20px; display:grid; place-items:center;
  border-radius:50%; background:var(--vert-sourd); border:1px solid rgba(79,214,147,.4);
  color:var(--vert); animation:u-coche .5s cubic-bezier(.3,1.4,.5,1) both;
}
.usl-fin .coche svg{ width:30px; height:30px }
@keyframes u-coche{ from{ transform:scale(.5); opacity:0 } to{ transform:none; opacity:1 } }
.usl-fin .usl-aide{ max-width:46ch; margin-inline:auto }
.usl-fin-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px }
.usl-wa-cta::before{ content:none }

/* ---------- navigation ---------- */
.usl-nav{ display:flex; gap:12px; align-items:center; margin-top:26px; flex-wrap:wrap }
.usl-suite-btn{ margin-left:auto; min-width:190px }
.usl-erreur{ flex-basis:100%; color:var(--rouge); font-size:14px; margin:0 }
.usl-vue[data-vue="3"]:not([hidden]) ~ .usl-nav{ display:none }

@media (max-width:768px){
  .usl-devis{ padding:20px }
  .usl-form-grille{ grid-template-columns:1fr }
  .usl-etapes-fil{ gap:7px }
  .usl-etapes-fil li{ font-size:0; gap:0; justify-content:center; padding-top:11px }
  .usl-etapes-fil li span{ font-size:12.5px }
  .usl-nav{ flex-direction:column-reverse; align-items:stretch }
  .usl-suite-btn{ margin-left:0; width:100% }
  .usl-nav .usl-retour{ width:100% }
  .usl-fin-actions .usl-btn{ width:100% }
}
/* ==========================================================================
   Schemas techniques
   Sur le premier site ils etaient dessines comme un plan : trait fin,
   fond creme, lecture posee. Ici c'est un ecran de diagnostic : trait
   lumineux sur encre, la matiere est sombre, seule l'information brille.
   ========================================================================== */
.usl-svg{ display:block; width:100%; height:auto; overflow:visible }
.usl-svg .trait{ fill:none; stroke:var(--encre-4); stroke-width:1.6 }

/* matiere : la menuiserie et la maconnerie restent sourdes */
.usl-svg .porte,
.usl-svg .montant,
.usl-svg .boitier,
.usl-svg .corps,
.usl-svg .capot{ fill:var(--encre-3); stroke:var(--bord-fort); stroke-width:1.4 }
.usl-svg .tetiere,
.usl-svg .cyl,
.usl-svg .rotor{ fill:var(--encre-4); stroke:var(--bord-fort); stroke-width:1.3 }
.usl-svg .gache,
.usl-svg .chambre,
.usl-svg .canal{ fill:var(--encre); stroke:var(--bord-fort); stroke-width:1.3 }

/* mecanisme : ce qui bouge est en ambre, et brille */
.usl-svg .demitour,
.usl-svg .pene,
.usl-svg .tringle,
.usl-svg .poignee,
.usl-svg .cle,
.usl-svg .ressort{
  fill:var(--ambre); stroke:var(--ambre); stroke-width:1.2;
  filter:drop-shadow(0 0 7px rgba(245,168,63,.5));
}
.usl-svg .ressort{ fill:none; stroke-width:1.6 }
.usl-svg .gcle,
.usl-svg .gcontre{ fill:var(--encre-4); stroke:var(--bord-fort); stroke-width:1.2 }

/* le pene dormant : sorti il bloque, rentre il n'est qu'une eventualite */
.usl-svg .dormant.sorti{
  fill:var(--rouge); stroke:var(--rouge); stroke-width:1.2;
  filter:drop-shadow(0 0 9px rgba(255,129,99,.55));
}
.usl-svg .dormant.rentre{
  fill:none; stroke:var(--tres-doux); stroke-width:1.4; stroke-dasharray:5 4;
}
/* le jeu : la seule zone verte du dessin, celle par ou passe l'outil */
.usl-svg .jeu{
  fill:var(--vert-sourd); stroke:var(--vert); stroke-width:1.2; stroke-dasharray:4 4;
}
.usl-svg .cesure{ stroke:var(--bleu); stroke-width:1.3; stroke-dasharray:5 4; fill:none }
.usl-svg .cesure-amorce{ stroke:var(--bleu); stroke-width:1; fill:none }
.usl-svg .cote, .usl-svg .cote-fin{ stroke:var(--tres-doux); stroke-width:1; fill:none }

/* etiquettes */
.usl-svg .etiquettes text{
  font-family:var(--titre); font-size:12.5px; font-weight:500; fill:var(--doux);
}
.usl-svg .amorce{ stroke:var(--bord-fort); stroke-width:1; fill:none }
.usl-svg .amorce.vert{ stroke:var(--vert) }
.usl-svg text.centre{ text-anchor:middle }
.usl-svg text.fort{ font-weight:700; font-size:15px; fill:var(--clair); letter-spacing:-.02em }
.usl-svg text.petit{ font-size:11.5px; fill:var(--tres-doux) }
.usl-svg text.pied{ font-size:11px; fill:#6b7c8b }
.usl-svg text.vert{ fill:var(--vert); font-weight:600; font-size:13px }
.usl-svg text.rouge{ fill:var(--rouge); font-weight:600; font-size:13px }

/* animation d'entree : le mecanisme s'allume apres la matiere */
@keyframes u-allume{ from{opacity:0} to{opacity:1} }
/* ==========================================================================
   Mouvement
   Un site d'astreinte doit avoir un pouls. Trois familles seulement :
   ce qui respire (le bouton d'appel, la pastille de garde), ce qui se
   revele a la lecture, et ce qui demontre (le pene qui sort de sa gache).

   Regle de construction : tout s'anime PAR DEFAUT, et tout est coupe dans
   un unique bloc "prefers-reduced-motion: reduce" en fin de fichier.
   L'inverse, enfermer les animations dans "no-preference", laisse
   immobiles les navigateurs qui ne connaissent pas la requete.
   ========================================================================== */

/* ---------- 1. le bouton d'appel ---------- */

/* Le combine sonne : sept aller-retours en sept dixiemes de seconde, puis
   plus rien pendant trois secondes. C'est ce rapport qui fait qu'on le
   remarque a chaque fois sans qu'il devienne penible. */
.usl-ico-tel{
  width:19px; height:19px; flex:none;
  transform-origin:50% 60%;
  animation:u-sonnerie 3.6s ease-in-out infinite;
}
.usl-ico-tel.petit{ width:15px; height:15px }
.u-collant .app .usl-ico-tel{ animation-delay:.45s }
.u-astreinte .num .usl-ico-tel{ animation-delay:1.1s }

@keyframes u-sonnerie{
  0%, 42%, 100% { transform:rotate(0) }
  45% { transform:rotate(-22deg) }  49% { transform:rotate(20deg) }
  53% { transform:rotate(-17deg) }  57% { transform:rotate(14deg) }
  61% { transform:rotate(-10deg) }  65% { transform:rotate(7deg) }
  69% { transform:rotate(-4deg) }   73% { transform:rotate(0) }
}

/* Le bouton lui-meme tressaille au meme instant, comme un telephone pose
   sur une table. Deux degres suffisent : c'est le mouvement qui attire
   l'oeil, pas son amplitude. */
.usl-tel, .u-btn:not(.sec):not(.wa), .u-collant .app{
  position:relative;
  animation:u-appel 3.6s ease-in-out infinite;
}
.u-collant .app{ animation-delay:.45s }
@keyframes u-appel{
  0%, 42%, 100% { transform:scale(1);     box-shadow:0 10px 30px -12px rgba(245,168,63,.55), 0 0 0 0   rgba(245,168,63,0) }
  46%           { transform:scale(1.035); box-shadow:0 10px 30px -12px rgba(245,168,63,.55), 0 0 0 0   rgba(245,168,63,.6) }
  58%           { transform:scale(1.015); box-shadow:0 10px 30px -12px rgba(245,168,63,.55), 0 0 0 9px rgba(245,168,63,.25) }
  74%           { transform:scale(1);     box-shadow:0 10px 30px -12px rgba(245,168,63,.55), 0 0 0 18px rgba(245,168,63,0) }
}
/* Au survol, la sonnerie s'arrete net : celui qui a deja la main dessus
   n'a plus besoin qu'on l'appelle. On coupe l'animation plutot que de la
   mettre en pause, sinon le bouton resterait fige sur la frame en cours,
   parfois legerement agrandie. */
.usl-tel:hover, .u-btn:hover, .u-collant .app:hover,
.usl-tel:hover .usl-ico-tel, .u-btn:hover .usl-ico-tel, .u-collant .app:hover .usl-ico-tel{ animation:none }

/* Un reflet balaie le bouton, comme un gyrophare qui passe. */
.u-btn:not(.sec):not(.wa), .u-collant .app{ overflow:hidden }
.u-btn:not(.sec):not(.wa)::before, .u-collant .app::before{
  content:""; position:absolute; top:0; bottom:0; width:42%; left:-60%; z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation:u-reflet 3.6s ease-in-out infinite;
}
@keyframes u-reflet{
  0%, 40% { left:-60% }
  62%     { left:130% }
  100%    { left:130% }
}

/* La pastille de garde bat au rythme d'un pouls au repos. */
.u-pouls{ animation:u-battement 2.2s ease-in-out infinite }
@keyframes u-battement{
  0%, 100% { transform:scale(1);    box-shadow:0 0 0 0 rgba(79,214,147,.45) }
  50%      { transform:scale(1.18); box-shadow:0 0 10px 2px rgba(79,214,147,.35) }
}

/* ---------- 2. ce qui se revele ---------- */
.u-rev{ opacity:0; transform:translateY(22px); transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1) }
.u-rev.vu{ opacity:1; transform:none }
.u-rev.d1{ transition-delay:.07s } .u-rev.d2{ transition-delay:.14s }
.u-rev.d3{ transition-delay:.21s } .u-rev.d4{ transition-delay:.28s }
.u-rev.d5{ transition-delay:.35s }

.u-etape{ position:relative }
.u-etape .n{ transition:color .4s ease, background .4s ease }
.u-etape.vu .n{ color:var(--ambre) }

/* ---------- 3. ce qui demontre ---------- */

/* Le schema ne se contente pas d'apparaitre : le dormant sort de sa
   gache sous vos yeux. C'est la demonstration du site. */
.u-schema.vu .usl-svg .dormant.sorti{
  animation:u-sortie .85s cubic-bezier(.35,1.35,.5,1) .35s both;
  transform-origin:left center;
}
@keyframes u-sortie{
  0%   { transform:scaleX(.14); opacity:.25 }
  100% { transform:scaleX(1);   opacity:1 }
}
.u-schema.vu .usl-svg .jeu{ animation:u-respire 2.8s ease-in-out 1.1s infinite }
@keyframes u-respire{
  0%, 100% { opacity:1 }
  50%      { opacity:.45 }
}
.u-schema.vu .usl-svg .demitour{ animation:u-allume .7s ease-out both }

/* ---------- micro-interactions ---------- */
.u-opt{ position:relative; padding-right:42px }
.u-opt::after{
  content:""; position:absolute; right:16px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--tres-doux); border-bottom:2px solid var(--tres-doux);
  transform:translateY(-50%) rotate(-45deg); transition:transform .2s ease, border-color .2s ease;
}
.u-opt:hover::after{ transform:translate(4px,-50%) rotate(-45deg); border-color:var(--ambre) }
.u-opt[aria-pressed="true"]::after{ border-color:var(--ambre) }

.u-liens a .fl{ transition:transform .2s ease }
.u-liens a .fl::after{ content:" \2192" }
.u-liens a:hover .fl{ transform:translateX(4px) }

.u-astreinte .num{ display:inline-flex; align-items:center; gap:7px }
.u-collant .app{ gap:9px }

/* La barre collante monte quand le premier ecran est passe. */
@media (max-width:768px){
  .u-collant{ transition:transform .34s cubic-bezier(.2,.7,.3,1) }
  .u-collant:not(.vu){ transform:translateY(110%) }
}

/* ---------- l'unique interrupteur ---------- */
@media (prefers-reduced-motion:reduce){
  .usl-ico-tel, .usl-tel, .u-btn, .u-collant .app, .u-pouls,
  .u-btn::before, .u-collant .app::before,
  .u-schema.vu .usl-svg .dormant.sorti,
  .u-schema.vu .usl-svg .jeu,
  .u-schema.vu .usl-svg .demitour{ animation:none }
  .u-rev{ opacity:1; transform:none; transition:none }
  .u-collant:not(.vu){ transform:none }
}
/* ==========================================================================
   Pages interieures
   ========================================================================== */
.u-fil{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:13px; color:var(--tres-doux); margin:0 0 16px;
}
.u-fil a{ color:var(--tres-doux) }
.u-fil a:hover{ color:var(--clair); text-decoration:none }
.u-fil span[aria-hidden]{ color:var(--encre-4) }

.u-hero.court{ padding:40px 0 52px }
.u-hero.court .u-hero-grille{ grid-template-columns:1fr; gap:0 }
.u-hero.court h1{ max-width:20ch }
.u-hero.court .accroche{ max-width:62ch }

/* sommaire : sur une page longue lue en urgence, il faut pouvoir sauter */
.u-somm{
  background:var(--encre-2); border:1px solid var(--bord); border-radius:var(--r);
  padding:20px 24px; margin:0 0 40px;
}
.u-somm .et{
  display:block; font-family:var(--titre); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ambre); margin-bottom:12px;
}
.u-somm ol{ margin:0; padding:0; list-style:none; counter-reset:s;
  display:grid; grid-template-columns:1fr 1fr; gap:6px 24px }
.u-somm li{ counter-increment:s; font-size:15px }
.u-somm li a{ color:var(--doux); display:inline-flex; gap:9px }
.u-somm li a::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--titre); font-weight:700; font-size:12px; color:var(--tres-doux);
  padding-top:3px;
}
.u-somm li a:hover{ color:var(--clair); text-decoration:none }

/* texte courant des pages piliers */
.u-texte h3{ margin-top:30px }
.u-texte p{ color:var(--doux) }
.u-texte p strong{ color:var(--clair) }
.u-texte ul{ margin:0 0 18px; padding:0; list-style:none }
.u-texte ul li{ position:relative; padding-left:22px; color:var(--doux); margin-bottom:9px }
.u-texte ul li::before{ content:""; position:absolute; left:2px; top:10px; width:7px; height:7px; border-radius:2px; background:var(--ambre) }
.u-texte ul.oui li::before{ background:var(--vert) }
.u-texte ul.non li::before{ background:var(--rouge) }

/* deux colonnes a faire / a ne pas faire */
.u-oppose{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0 }

@media (max-width:768px){
  .u-somm ol{ grid-template-columns:1fr }
  .u-oppose{ grid-template-columns:1fr }
  .u-hero.court{ padding:28px 0 40px }
}
/* ==========================================================================
   Adaptation aux petits écrans
   Règle de survie apprise sur le premier site : aucune mise en page
   horizontale n'est posée sans garde min-width. Sous 768px GeneratePress
   replie sa navigation, et toute règle flex non gardée l'en empêche.
   ========================================================================== */

@media (min-width:769px){
  .site-header .inside-header{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }
  .site-header .site-branding{ margin-right:auto }
}

@media (max-width:900px){
  .u-hero-grille{ grid-template-columns:1fr; gap:34px }
  .usl-pied-grille{ grid-template-columns:1fr 1fr; gap:34px }
  .u-liens{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:768px){
  body{ font-size:16px }
  .u-sec{ padding:52px 0 }
  .u-hero{ padding:38px 0 48px }
  .u-hero h1{ max-width:none }
  .u-duo{ grid-template-columns:1fr }
  .u-liens{ grid-template-columns:1fr }
  .usl-pied-grille{ grid-template-columns:1fr; gap:30px }
  .usl-form-grille{ grid-template-columns:1fr }
  .usl-choix-liste{ grid-template-columns:1fr }
  .u-etape{ grid-template-columns:56px 1fr }
  .u-etape .co{ padding:17px 18px }
  .u-diag{ padding:20px }
  .u-devis, .usl-devis{ padding:20px }
  .u-fin{ padding:56px 20px }

  /* le bandeau d'astreinte reste, mais compacté */
  .u-astreinte .in{ padding:8px 16px; gap:10px; font-size:12.5px }
  .u-astreinte .num{ font-size:14px }

  /* l'en-tête ne garde que le logo et l'appel : le reste est dans le menu */
  .usl-contact-tete .usl-wa span{ display:none }
  .usl-tel .lib{ display:none }

  /* barre d'action collante, et la place qu'elle occupe */
  .u-collant{ display:grid }
  body{ padding-bottom:74px }
  .usl-cookies{ bottom:82px }

  /* les boutons prennent toute la largeur, cible tactile confortable */
  .u-actions{ flex-direction:column; align-items:stretch }
  .u-actions .u-btn{ width:100% }
  .u-fin .u-actions{ align-items:stretch }
}

@media (max-width:480px){
  .u-wrap, .usl-large{ padding-inline:17px }
  h1{ font-size:32px }
  h2{ font-size:25px }
  .u-hero .accroche{ font-size:17.5px }
  .u-jetons{ gap:6px }
  .u-jeton{ font-size:12px; padding:5px 10px }
  .u-opt{ padding:14px }
  .u-zones li{ font-size:13.5px; padding:8px 13px }
}

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

/* impression : on retire le décor, on garde le texte */
@media print{
  body::before, .u-collant, .u-astreinte, .usl-cookies, .main-navigation{ display:none !important }
  body{ background:#fff; color:#000 }
}