/* ==========================================================================
   START solutions — site statique autonome
   Reproduction du template Joomla "start_solutions" (vuillety.ch/start)
   Variables et couleurs reprises du template original.
   ========================================================================== */
:root{
  --color-primary:#1d4ed8;
  --color-primary-dark:#1e3a8a;
  --color-primary-light:#7dd3fc;
  --color-accent:#e8a23b;
  --color-text:#2c3e50;
  --color-muted:#6b7a8f;
  --color-bg:#ffffff;
  --color-bg-alt:#f5f7fa;
  --color-header-bg:#ffffff;
  --color-border:rgba(0,0,0,.08);
  --color-shadow:rgba(30,58,138,.12);
  --color-topbar:#8a9a7e;
  --font-heading:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-size-base:16px;
  --font-weight-heading:700;
  --line-height-base:1.65;
  --radius:8px;
  --container-width:1180px;
  --transition:.25s ease;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);font-size:var(--font-size-base);
  line-height:var(--line-height-base);color:var(--color-text);background:var(--color-bg);
  -webkit-font-smoothing:antialiased;}
img,svg,video{max-width:100%;height:auto;}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition);}
a:hover,a:focus{color:var(--color-primary-dark);text-decoration:underline;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-weight-heading);
  line-height:1.25;color:var(--color-primary-dark);margin:0 0 .75em;letter-spacing:-.01em;}
h1{font-size:clamp(1.75rem,4vw,2.5rem);}
h2{font-size:clamp(1.5rem,3vw,2rem);}
h3{font-size:clamp(1.2rem,2.5vw,1.45rem);}
p{margin:0 0 1rem;} ul,ol{margin:0 0 1rem;padding-left:1.5rem;}
blockquote{border-left:4px solid var(--color-primary);padding:.5rem 0 .5rem 1.25rem;
  margin:1.5rem 0;color:var(--color-muted);font-style:italic;}
hr{border:0;border-top:1px solid var(--color-border);margin:2rem 0;}
.container{max-width:var(--container-width);margin:0 auto;padding:0 1.25rem;}

/* ---- Header / Bandeau avec image (reproduction Joomla) ---- */
.masthead{position:relative;border-bottom:1px solid rgba(255,255,255,.15);min-height:200px;display:flex;align-items:stretch;margin-top:22px;margin-bottom:30px;}
/* Image de fond du chantier */
.masthead__banner{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 2.5rem),calc(var(--container-width) - 2.5rem));z-index:0;overflow:hidden;pointer-events:none;border-radius:0 0 6px 6px;}
.masthead__image{position:absolute;inset:0;background-image:url('../images/BANIERES/Reception.png');
  background-size:cover;background-position:center center;}
/* Overlay dégradé bleu (135°) — opacité 0.2 comme l'original */
.masthead__overlay{position:absolute;inset:0;
  background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 50%,var(--color-primary-light) 100%);
  opacity:.2;}
.masthead .container{position:relative;z-index:2;width:100%;display:flex;align-items:flex-start;justify-content:flex-start;
  gap:24px;padding-top:22px;padding-bottom:30px;flex-wrap:wrap;}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;padding-left:22px;}
.brand:hover{text-decoration:none;}

.brand img{width:250px;height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));transform-origin:left center;}

/* Logo : zoom léger au survol (animation périodique retirée) */
.brand img{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.brand:hover img{transform:scale(1.05);}

.brand .tagline{font-style:italic;color:#fff;font-size:.95rem;font-weight:600;
  text-shadow:0 2px 6px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7);
  letter-spacing:.015em;margin:0;padding:0;align-self:stretch;text-align:left;}
.rdv{position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;
  transition:transform .25s ease;}
.rdv:hover{text-decoration:none;transform:translateY(-3px);}
.rdv img{width:130px;height:130px;object-fit:contain;margin:0 auto;
  filter:brightness(0) saturate(100%) invert(15%) sepia(85%) saturate(2600%) hue-rotate(228deg) brightness(95%) contrast(105%)
    drop-shadow(0 0 9px rgba(255,255,255,.85))
    drop-shadow(0 0 3px rgba(255,255,255,1));}
.rdv .label{display:block;font-weight:700;font-size:.8rem;letter-spacing:.04em;
  color:#fff;text-transform:uppercase;line-height:1.2;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,.7);}

/* ---- Navigation intégrée dans le bandeau (boutons orange, reproduction Joomla) ---- */
:root{
  --menu-bg:rgba(252,176,0,.78);
  --menu-text:#2c3e50;
  --menu-hover-bg:#f5f7fa;
  --menu-hover-text:#1d4ed8;
  --menu-active-bg:#ffffff;
}
.mainnav{display:flex;align-items:center;}
.mainnav>ul,.mainnav .nav-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;align-items:center;}
.mainnav li{position:relative;}

.mainnav a{display:block;color:var(--menu-text);background:var(--menu-bg);padding:8px 13px;
  font-weight:600;font-size:.84rem;letter-spacing:.02em;text-transform:uppercase;border-radius:6px;
  text-decoration:none;text-shadow:0 1px 2px rgba(255,255,255,.25);white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.18);}
.mainnav a:hover,.mainnav a:focus{background:var(--menu-hover-bg);color:var(--menu-hover-text);text-shadow:none;}
.mainnav a.active{background:var(--menu-active-bg);color:var(--menu-hover-text);text-shadow:none;}
.mainnav li>ul{display:flex;position:absolute;top:100%;left:0;min-width:0;width:max-content;max-width:200px;
  background:rgba(255,255,255,.98);border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.2);
  padding:6px;z-index:50;flex-direction:column;gap:4px;}
.mainnav li:hover>ul{display:flex;}
.mainnav li>ul a{background:transparent;color:var(--color-text);text-transform:none;font-weight:600;
  box-shadow:none;text-shadow:none;padding:7px 14px;font-size:.78rem;border-left:3px solid transparent;}
.mainnav li>ul a:hover{background:var(--color-bg-alt);color:var(--color-primary);}
/* Sous-menus : chaque entrée a sa couleur distincte (bordure + texte au survol) */
.mainnav li>ul li:nth-child(1)>a{border-left-color:var(--cat-activites);}
.mainnav li>ul li:nth-child(2)>a{border-left-color:var(--cat-expertises);}
.mainnav li>ul li:nth-child(3)>a{border-left-color:var(--cat-autres);}
.mainnav li>ul li:nth-child(4)>a{border-left-color:var(--cat-formations);}
.mainnav li>ul li:nth-child(1)>a:hover{background:var(--cat-activites-bg);color:var(--cat-activites);}
.mainnav li>ul li:nth-child(2)>a:hover{background:var(--cat-expertises-bg);color:var(--cat-expertises);}
.mainnav li>ul li:nth-child(3)>a:hover{background:var(--cat-autres-bg);color:var(--cat-autres);}
.mainnav li>ul li:nth-child(4)>a:hover{background:var(--cat-formations-bg);color:var(--cat-formations);}


/* Pont invisible entre le bouton parent et le sous-menu (évite la perte de survol) */
.mainnav li.has-sub{position:relative;}
.mainnav li.has-sub>a{position:relative;}
.mainnav li.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;background:transparent;}
.mainnav li>ul::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;background:transparent;}

.mainnav .caret{font-size:.7rem;opacity:.75;margin-left:5px;}

/* ---- Accroche ---- */
.accroche{background:#e8eefc;border:1px solid #c3d3f5;border-radius:var(--radius);
  margin:28px auto;padding:18px 24px;display:flex;align-items:center;gap:14px;}
.accroche .bulb{font-size:1.5rem;}
.accroche h1{font-size:1.12rem;font-weight:800;font-style:italic;color:var(--color-primary-dark);
  text-align:center;flex:1;margin:0;}
.accroche a{color:var(--color-primary-dark);}

/* ---- Citation ---- */
.quote{background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-left:5px solid var(--color-primary);
  border-radius:10px;
  padding:1.25rem 1.5rem;
  margin:1.6rem 0;
  font-style:italic;
  font-size:1rem;
  line-height:1.55;
  color:var(--color-text);}

/* ---- Sections texte ---- */
.section{padding:8px 0 20px;}
.lead{margin-bottom:22px;}
.subtitle{font-weight:700;margin:6px 0 16px;color:var(--color-text);}

/* ---- Cartes (accueil) ---- */
.cards{display:grid;grid-template-columns:1fr;gap:16px;max-width:460px;}
.card{border:2px solid var(--color-primary);border-radius:var(--radius);padding:18px 22px;
  background:#fff;transition:transform var(--transition),box-shadow var(--transition);}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 18px var(--color-shadow);text-decoration:none;}
.card h3{color:var(--color-primary-dark);font-size:1.05rem;margin:0 0 4px;}
.card span{color:var(--color-muted);font-size:.9rem;}

/* ---- Page titre ---- */
.page-title{font-size:1.6rem;color:var(--color-primary-dark);font-weight:800;margin:30px 0 18px;
  padding-bottom:10px;border-bottom:3px solid var(--color-primary);}
.breadcrumb{font-size:.85rem;color:var(--color-muted);margin:18px 0 0;}
.breadcrumb a{color:var(--color-muted);} .breadcrumb a:hover{color:var(--color-primary);}

/* ---- Services : onglets + grille ---- */
.svc-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 26px;}
.svc-tab{background:var(--color-primary-dark);color:#fff;border:none;cursor:pointer;
  padding:9px 18px;border-radius:22px;font-weight:600;font-size:.9rem;font-family:inherit;transition:background var(--transition);}
.svc-tab:hover,.svc-tab.active{background:var(--color-primary);}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.svc-item{border:1px solid #d7deec;border-left:4px solid var(--color-primary);border-radius:8px;
  padding:18px;background:#fff;transition:box-shadow var(--transition),transform var(--transition);
  display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;}
.svc-item:hover{box-shadow:0 6px 18px var(--color-shadow);transform:translateY(-2px);text-decoration:none;}
.svc-item img{width:48px;height:48px;object-fit:contain;flex:none;}
.svc-item h3{color:var(--color-primary-dark);font-size:1rem;margin:0 0 4px;}
.svc-item span{color:var(--color-muted);font-size:.88rem;}
.svc-group{display:none;} .svc-group.active{display:block;animation:fade .3s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- Article ---- */
.article{max-width:100%;margin:0;}
.article .hero-icon{width:96px;height:96px;object-fit:contain;margin-bottom:1rem;}
.article img{border-radius:var(--radius);margin:1rem 0;}
.article h1{margin-bottom:1rem;}
.back-link{display:inline-block;margin:24px 0 0;font-weight:600;}

/* ---- A propos ---- */
.apropos{display:grid;grid-template-columns:1fr 250px;gap:36px;align-items:start;}
.apropos img{width:100%;max-width:250px;border-radius:var(--radius);box-shadow:0 4px 18px var(--color-shadow);}
.apropos em{color:var(--color-primary-dark);font-style:italic;}

/* ---- Formulaire ---- */
.devis-intro{background:#e8eefc;border-radius:var(--radius);padding:22px 26px;margin-bottom:26px;}
.form{max-width:620px;}
.form .row{margin-bottom:18px;}
.form label{display:block;font-weight:600;margin-bottom:6px;}
.form .req{color:#c0392b;}
.form input,.form select,.form textarea{width:100%;padding:11px 13px;border:1px solid #cdd5e4;
  border-radius:8px;font-family:inherit;font-size:1rem;color:var(--color-text);background:#fff;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(29,78,216,.15);}
.form textarea{min-height:110px;resize:vertical;}
.btn{display:inline-block;background:none;color:var(--color-primary);border:none;padding:0;
  font-weight:700;font-size:1rem;font-family:inherit;cursor:pointer;text-decoration:none;
  background-image:linear-gradient(var(--color-primary),var(--color-primary));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--transition),color var(--transition);}
.btn:hover{color:var(--color-primary-dark);background-size:100% 2px;text-decoration:none;}
.note{font-size:.85rem;color:var(--color-muted);margin-top:14px;}

/* ---- Footer ---- */
/* Footer ajusté à la largeur du bandeau (boîte centrée) */
.footer{margin-top:50px;margin-bottom:22px;font-size:.9rem;color:rgba(255,255,255,.85);}
.footer>.container{background:var(--color-primary-dark);border-radius:6px 6px 0 0;
  padding:22px 28px;max-width:var(--container-width);margin:0 auto;
  width:min(calc(100% - 2.5rem),calc(var(--container-width) - 2.5rem));}
.footer>.container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;background:var(--color-primary-dark);border-radius:6px;padding:22px 28px;width:min(calc(100% - 2.5rem),calc(var(--container-width) - 2.5rem));margin:0 auto;}
.footer a{color:rgba(255,255,255,.9);} .footer a:hover{color:#fff;}

/* ---- Responsive ---- */
@media(max-width:760px){
  .masthead .container{justify-content:center;}
  .mainnav ul{width:100%;flex-direction:column;}
  .mainnav li>ul{position:static;min-width:0;}
  .apropos{grid-template-columns:1fr;}
  .apropos img{margin:0 auto;}
  .footer .container{flex-direction:column;}
}

/* ==========================================================================
   ANIMATIONS & MICRO-INTERACTIONS (survol)
   ========================================================================== */

/* --- Apparition au chargement (reveal) --- */
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.reveal{opacity:0;animation:rise .6s cubic-bezier(.22,.61,.36,1) forwards;}
.reveal.d1{animation-delay:.05s;}
.reveal.d2{animation-delay:.13s;}
.reveal.d3{animation-delay:.22s;}
.reveal.d4{animation-delay:.32s;}
.reveal.d5{animation-delay:.42s;}

/* --- Logo : léger zoom --- */

.brand:hover img{transform:scale(1.04);}

/* --- Bloc RDV : légère pulsation + halo renforcé au survol --- */
.rdv img{transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .35s ease;}
.rdv:hover img{transform:scale(1.08);
  filter:brightness(0) saturate(100%) invert(15%) sepia(85%) saturate(2600%) hue-rotate(228deg) brightness(95%) contrast(105%)
    drop-shadow(0 0 14px rgba(255,255,255,1))
    drop-shadow(0 0 4px rgba(255,255,255,1));}

/* --- Navigation : surlignage qui glisse --- */

.mainnav a{position:relative;overflow:hidden;}
.mainnav>div>ul>li>a::before{content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;
  background:var(--color-accent);transition:left var(--transition),right var(--transition);}
.mainnav>div>ul>li>a:hover::before,.mainnav>div>ul>li>a.active::before{left:0;right:0;}
.mainnav li>ul{opacity:0;transform:translateY(6px);visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;}
.mainnav li:hover>ul,.mainnav li:focus-within>ul{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;}
.mainnav li>ul a{transition:background var(--transition),padding-left var(--transition);}
.mainnav li>ul a:hover{padding-left:20px;}

/* --- Accroche : pulsation de l'ampoule --- */
@keyframes glow{0%,100%{transform:scale(1);filter:none;}
  50%{transform:scale(1.15);filter:drop-shadow(0 0 6px rgba(232,162,59,.7));}}
.accroche{transition:box-shadow var(--transition),transform var(--transition);}
.accroche:hover{box-shadow:0 8px 26px var(--color-shadow);transform:translateY(-2px);}
.accroche:hover .bulb{animation:glow 1.2s ease-in-out infinite;}

/* --- Cartes (accueil) : élévation + barre latérale animée --- */
.card{position:relative;overflow:hidden;}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--color-primary);transition:width var(--transition);}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px var(--color-shadow);border-color:var(--color-primary);}
.card:hover::before{width:5px;}
.card h3{transition:transform var(--transition);}
.card:hover h3{transform:translateX(6px);}

/* --- Cartes Services (grille) : icône qui bondit + glissement --- */
.svc-item{position:relative;overflow:hidden;}
.svc-item::after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%) translateX(8px);
  opacity:0;color:var(--color-primary);font-weight:700;transition:opacity var(--transition),transform var(--transition);}
.svc-item:hover{transform:translateY(-4px);box-shadow:0 12px 28px var(--color-shadow);border-left-color:var(--color-accent);}
.svc-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0);}
.svc-item img{transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.svc-item:hover img{transform:scale(1.12) rotate(-4deg);}
.svc-item h3{transition:color var(--transition);}
.svc-item:hover h3{color:var(--color-primary);}

/* --- Onglets services : léger soulèvement --- */
.svc-tab{transition:background var(--transition),transform var(--transition),box-shadow var(--transition);}
.svc-tab:hover{transform:translateY(-2px);box-shadow:0 6px 14px var(--color-shadow);}
.svc-tab.active{box-shadow:0 4px 12px var(--color-shadow);}

/* --- Article : icône héro qui flotte --- */
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.article .hero-icon{animation:float 3.5s ease-in-out infinite;}

/* --- Photo À propos : zoom doux + ombre --- */
.apropos img{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow var(--transition);}
.apropos img:hover{transform:scale(1.03) rotate(.5deg);box-shadow:0 16px 36px var(--color-shadow);}

/* --- Bouton : effet de remplissage --- */


/* --- Liens de contenu : soulignement animé (toutes les pages) --- */
main.container a:not(.back-link):not(.btn):not(.card):not(.svc-item):not(.quote-rdv):not(.cat-chip):not(.svc-tab){
  background-image:linear-gradient(var(--color-primary),var(--color-primary));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--transition),color var(--transition);text-decoration:none;}
main.container a:not(.back-link):not(.btn):not(.card):not(.svc-item):not(.quote-rdv):not(.cat-chip):not(.svc-tab):hover{background-size:100% 2px;}

/* --- Lien retour : flèche qui recule --- */
.back-link{transition:color var(--transition),background-size var(--transition);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;text-decoration:none;}
.back-link:hover{background-size:100% 2px;text-decoration:none;}

/* --- Footer : lien souligné --- */
.footer a{position:relative;}
.footer a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:#fff;transition:width var(--transition);}
.footer a:hover{text-decoration:none;}
.footer a:hover::after{width:100%;}

/* --- Respect des préférences de mouvement réduit --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .reveal{opacity:1;}
}

/* ==========================================================================
   COLORISATION DES SERVICES PAR FAMILLE
   ========================================================================== */
:root{
  --cat-activites:#1d4ed8;   /* bleu — cœur de métier */
  --cat-activites-bg:#eef3fe;
  --cat-expertises:#0e9aa8;  /* sarcelle — expertise/analyse */
  --cat-expertises-bg:#e6f7f8;
  --cat-autres:#e8853b;      /* orange — services complémentaires */
  --cat-autres-bg:#fdf2e8;
  --cat-formations:#7c4dd6;  /* violet — transmission/formation */
  --cat-formations-bg:#f3edfc;
  --cat-gerance:#1f9d57;     /* vert — gestion/gérance */
  --cat-gerance-bg:#e8f6ee;
}

/* Onglets colorés selon la famille active */
.svc-tab[data-tab="activites"].active{background:var(--cat-activites);}
.svc-tab[data-tab="expertises"].active{background:var(--cat-expertises);}
.svc-tab[data-tab="autres"].active{background:var(--cat-autres);}
.svc-tab[data-tab="formations"].active{background:var(--cat-formations);}
.svc-tab[data-tab="gerance"].active{background:var(--cat-gerance);}
.svc-tab[data-tab="activites"]:hover{background:var(--cat-activites);}
.svc-tab[data-tab="expertises"]:hover{background:var(--cat-expertises);}
.svc-tab[data-tab="autres"]:hover{background:var(--cat-autres);}
.svc-tab[data-tab="formations"]:hover{background:var(--cat-formations);}
.svc-tab[data-tab="gerance"]:hover{background:var(--cat-gerance);}

/* Cartes de services colorées par famille (data-cat) */
.svc-item[data-cat="activites"]{border-left-color:var(--cat-activites);background:linear-gradient(180deg,var(--cat-activites-bg) 0%,#fff 55%);}
.svc-item[data-cat="expertises"]{border-left-color:var(--cat-expertises);background:linear-gradient(180deg,var(--cat-expertises-bg) 0%,#fff 55%);}
.svc-item[data-cat="autres"]{border-left-color:var(--cat-autres);background:linear-gradient(180deg,var(--cat-autres-bg) 0%,#fff 55%);}
.svc-item[data-cat="formations"]{border-left-color:var(--cat-formations);background:linear-gradient(180deg,var(--cat-formations-bg) 0%,#fff 55%);}
.svc-item[data-cat="gerance"]{border-left-color:var(--cat-gerance);background:linear-gradient(180deg,var(--cat-gerance-bg) 0%,#fff 55%);}

/* Pastille d'icône colorée */
.svc-item .icon-wrap{flex:none;width:56px;height:56px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.svc-item[data-cat="activites"] .icon-wrap{background:var(--cat-activites-bg);}
.svc-item[data-cat="expertises"] .icon-wrap{background:var(--cat-expertises-bg);}
.svc-item[data-cat="autres"] .icon-wrap{background:var(--cat-autres-bg);}
.svc-item[data-cat="formations"] .icon-wrap{background:var(--cat-formations-bg);}
.svc-item[data-cat="gerance"] .icon-wrap{background:var(--cat-gerance-bg);}
.svc-item .icon-wrap img{width:38px;height:38px;}
.svc-item:hover .icon-wrap{transform:scale(1.1) rotate(-4deg);}

/* Titre teinté selon famille au survol + flèche colorée */
.svc-item[data-cat="activites"]:hover h3{color:var(--cat-activites);}
.svc-item[data-cat="expertises"]:hover h3{color:var(--cat-expertises);}
.svc-item[data-cat="autres"]:hover h3{color:var(--cat-autres);}
.svc-item[data-cat="formations"]:hover h3{color:var(--cat-formations);}
.svc-item[data-cat="gerance"]:hover h3{color:var(--cat-gerance);}
.svc-item[data-cat="activites"]:hover{border-left-color:var(--cat-activites);}
.svc-item[data-cat="expertises"]:hover{border-left-color:var(--cat-expertises);}
.svc-item[data-cat="autres"]:hover{border-left-color:var(--cat-autres);}
.svc-item[data-cat="formations"]:hover{border-left-color:var(--cat-formations);}
.svc-item[data-cat="gerance"]:hover{border-left-color:var(--cat-gerance);}
.svc-item[data-cat="activites"]::after{color:var(--cat-activites);}
.svc-item[data-cat="expertises"]::after{color:var(--cat-expertises);}
.svc-item[data-cat="autres"]::after{color:var(--cat-autres);}
.svc-item[data-cat="formations"]::after{color:var(--cat-formations);}
.svc-item[data-cat="gerance"]::after{color:var(--cat-gerance);}

/* Légende des familles */
.cat-legend{display:flex;flex-wrap:wrap;gap:14px 22px;margin:0 0 22px;font-size:.85rem;color:var(--color-muted);}
.cat-legend span{display:inline-flex;align-items:center;gap:7px;}
.cat-legend i{width:13px;height:13px;border-radius:4px;display:inline-block;}

/* ---- Encadrés : codes couleur mis à jour ---- */
/* Bandeau article = barre colorée selon le type de fiche, par défaut bleu */
.article{border-top:none;}
.callout{border-radius:var(--radius);padding:18px 22px;margin:1.2rem 0;border-left:5px solid var(--color-primary);background:var(--cat-activites-bg);}
.callout.info{border-left-color:var(--cat-expertises);background:var(--cat-expertises-bg);}
.callout.warn{border-left-color:var(--cat-autres);background:var(--cat-autres-bg);}
.callout.ok{border-left-color:var(--cat-gerance);background:var(--cat-gerance-bg);}

/* Cartes accueil : dégradé léger + accent */
.card{background:linear-gradient(180deg,var(--cat-activites-bg) 0%,#fff 60%);}
.card:nth-of-type(2){background:linear-gradient(180deg,var(--cat-expertises-bg) 0%,#fff 60%);border-color:var(--cat-expertises);}
.card:nth-of-type(2)::before{background:var(--cat-expertises);}
.card:nth-of-type(2):hover{border-color:var(--cat-expertises);}
.card:nth-of-type(2):hover h3{color:var(--cat-expertises);}

/* Cartes Contact : chaque mode de contact sa couleur */
.contact-cards .card:nth-of-type(1){background:linear-gradient(180deg,var(--cat-activites-bg) 0%,#fff 60%);border-color:var(--cat-activites);}
.contact-cards .card:nth-of-type(2){background:linear-gradient(180deg,var(--cat-expertises-bg) 0%,#fff 60%);border-color:var(--cat-expertises);}
.contact-cards .card:nth-of-type(2)::before{background:var(--cat-expertises);}
.contact-cards .card:nth-of-type(3){background:linear-gradient(180deg,var(--cat-formations-bg) 0%,#fff 60%);border-color:var(--cat-formations);}
.contact-cards .card:nth-of-type(3)::before{background:var(--cat-formations);}
.contact-cards .card:nth-of-type(4){background:linear-gradient(180deg,var(--cat-gerance-bg) 0%,#fff 60%);border-color:var(--cat-gerance);}
.contact-cards .card:nth-of-type(4)::before{background:var(--cat-gerance);}

/* Layout header 3 colonnes : logo | menu | RDV */
.masthead .container{align-items:flex-start;flex-wrap:nowrap;}
.masthead .brand{flex:0 0 auto;}
.masthead .mainnav{flex:0 1 auto;justify-content:flex-start;align-self:flex-start;padding-top:38px;margin-left:30px;}
.masthead .mainnav>ul{justify-content:flex-start;}
.masthead .rdv{flex:0 0 auto;margin-left:auto;align-self:flex-start;padding-right:22px;}
@media(max-width:980px){
  .masthead .container{flex-direction:column;gap:14px;}
  .masthead .mainnav{order:3;width:100%;}
  .masthead .mainnav>ul{justify-content:center;}
  .masthead .rdv{order:2;}
}

/* ==========================================================================
   LÉGENDE CLIQUABLE (filtre des familles) — remplace les onglets
   ========================================================================== */
.cat-legend--filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;}
.cat-chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1.5px solid var(--color-border);color:var(--color-text);
  padding:8px 16px;border-radius:24px;font-family:inherit;font-size:.9rem;font-weight:600;
  transition:all var(--transition);box-shadow:0 1px 3px rgba(0,0,0,.05);}
.cat-chip i{width:13px;height:13px;border-radius:4px;display:inline-block;transition:transform var(--transition);}
.cat-chip:hover{transform:translateY(-2px);box-shadow:0 6px 14px var(--color-shadow);border-color:var(--color-primary);}
.cat-chip:hover i{transform:scale(1.2);}
/* Puce active : fond teinté selon la famille */
.cat-chip.active{color:#fff;border-color:transparent;box-shadow:0 4px 12px var(--color-shadow);}
.cat-chip.active i{background:#fff!important;}
.cat-chip[data-tab="all"].active{background:var(--color-primary-dark);}
.cat-chip[data-tab="activites"].active{background:var(--cat-activites);}
.cat-chip[data-tab="expertises"].active{background:var(--cat-expertises);}
.cat-chip[data-tab="autres"].active{background:var(--cat-autres);}
.cat-chip[data-tab="formations"].active{background:var(--cat-formations);}
.cat-chip[data-tab="gerance"].active{background:var(--cat-gerance);}

/* Titre de section au-dessus de chaque famille (visible surtout en "Tout afficher") */
.svc-group-title{font-size:1.15rem;font-weight:700;margin:0 0 16px;padding:4px 0 4px 14px;
  letter-spacing:.01em;}
.svc-group{margin-bottom:34px;}
.svc-group:last-of-type{margin-bottom:0;}

/* Sous-menu ouvert au tap (tactile) */
.mainnav li.has-sub.open>ul{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;display:flex;}

/* ==========================================================================
   CITATION + PRENDRE RDV intégré (page d'accueil)
   ========================================================================== */
.quote-wrap{display:flex;align-items:stretch;gap:24px;margin:0 0 34px;flex-wrap:wrap;}
.quote-wrap .quote{flex:1 1 460px;margin:0;}
.quote-rdv{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-decoration:none;background:#ececec;border-radius:var(--radius);padding:18px 24px;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);}
.quote-rdv img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(30,58,138,.25));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.quote-rdv span{font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-primary-dark);text-align:center;line-height:1.2;}
.quote-rdv:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--color-shadow);
  background:#e8eefc;text-decoration:none;}
.quote-rdv:hover img{transform:scale(1.08) translateY(-2px);}
.quote-rdv:hover span{color:var(--color-primary);}
@media(max-width:680px){
  .quote-wrap{flex-direction:column;}
  .quote-rdv{flex-direction:row;align-self:flex-start;}
  .quote-rdv img{width:54px;}
}

/* ==========================================================================
   JUSTIFICATION DES TEXTES (articles & contenu)
   ========================================================================== */
.article p,.article li,
.section p,
.apropos p,
.devis-intro{text-align:justify;text-justify:inter-word;hyphens:auto;}
/* On ne justifie pas les titres, badges, liens retour, ni les libellés courts */
.article h1,.article h2,.article h3,.back-link,.cat-badge,.breadcrumb{text-align:left;}

/* Libellé sous l'icône RDV du bandeau (nouvelle image sans texte intégré) */
.rdv-label{font-weight:700;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;text-align:center;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.7);max-width:84px;}

/* ==========================================================================
   FLÈCHE ANIMÉE pointant le bouton SERVICES (depuis le haut, boucle ~6s)
   ========================================================================== */
.mainnav li.nav-services{position:relative;}
.mainnav li.nav-services .svc-arrow-wrap{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(10px);
  margin-bottom:6px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  opacity:0;animation:arrowCycle 6s ease-in-out infinite;}
.mainnav li.nav-services .svc-arrow-wrap .svc-arrow-label{
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#dc2626;text-shadow:0 1px 4px rgba(0,0,0,.7);white-space:nowrap;}
.mainnav li.nav-services .svc-arrow-wrap svg{display:block;width:24px;height:30px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
/* Cycle : descend du haut, tape 2x vers le bouton, puis s'efface */
@keyframes arrowCycle{
  0%   {opacity:0;transform:translateX(-50%) translateY(-14px);}
  8%   {opacity:1;transform:translateX(-50%) translateY(0);}
  34%  {opacity:1;transform:translateX(-50%) translateY(0);}
  42%  {opacity:0;transform:translateX(-50%) translateY(-14px);}
  100% {opacity:0;transform:translateX(-50%) translateY(-14px);}
}
/* Le bouton SERVICES s'illumine en rythme */
@keyframes svcGlow{
  0%,6%,42%,100%{box-shadow:0 2px 6px rgba(0,0,0,.18);}
  14%,32%{box-shadow:0 0 0 3px rgba(220,38,38,.55),0 4px 12px var(--color-shadow);}
}
.mainnav li.nav-services>a{animation:svcGlow 6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){
  .mainnav li.nav-services .svc-arrow-wrap{animation:none;opacity:0;}
  .mainnav li.nav-services>a{animation:none;}
}
@media(max-width:980px){
  .mainnav li.nav-services .svc-arrow-wrap{display:none;}
  .mainnav li.nav-services>a{animation:none;}
}

/* ==========================================================================
   ANIMATION DE L'ENCADRÉ RDV (halo) — sur toutes les pages
   ========================================================================== */
.quote-rdv{position:relative;}
/* Halo rouge pulsé sur l'encadré RDV (citation accueil + bandeau autres pages) */
@keyframes rdvGlow{
  0%,55%,100%{box-shadow:0 1px 3px rgba(0,0,0,.12);}
  72%,88%{box-shadow:0 0 0 3px rgba(220,38,38,.55),0 6px 16px var(--color-shadow);}
}
.quote-rdv{animation:rdvGlow 6s ease-in-out infinite;border-radius:var(--radius);}
/* RDV du bandeau : halo sur l'icône (fond arrondi pour que le halo s'appuie) */
@keyframes rdvGlowBanner{
  0%,55%,100%{filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));}
  72%,88%{filter:drop-shadow(0 0 6px rgba(220,38,38,.9)) drop-shadow(0 2px 8px rgba(0,0,0,.3));}
}
.masthead .rdv img{animation:rdvGlowBanner 6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){
  .quote-rdv{animation:none;}
  .masthead .rdv img{animation:none;}
}

/* Messages de retour du formulaire (succès / erreur) */
.form-msg{padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;font-weight:600;}
.form-msg--ok{background:#e8f6ee;border:1px solid var(--cat-gerance);color:#176c3c;}
.form-msg--err{background:#fdecec;border:1px solid #dc2626;color:#a01818;}

/* ==========================================================================
   GALERIES RÉALISATIONS (grille + lightbox)
   ========================================================================== */
.gallery-section{margin:2rem 0 2.6rem;}
.gallery-section h3{font-size:1.2rem;font-weight:700;margin:0 0 .3rem;padding-left:14px;
  border-left:4px solid var(--color-primary);color:var(--color-primary-dark);}
.gallery-section .gallery-desc{color:var(--color-muted);margin:0 0 1rem;padding-left:14px;font-size:.92rem;}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.gallery-item{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:#eef2f9;box-shadow:0 2px 8px var(--color-shadow);transition:transform var(--transition),box-shadow var(--transition);
  display:block;border:none;padding:0;text-align:left;width:100%;font-family:inherit;}
.gallery-item:hover{transform:translateY(-4px);box-shadow:0 10px 24px var(--color-shadow);}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.gallery-item .caption{padding:10px 12px;font-size:.85rem;font-weight:600;color:var(--color-text);
  background:#fff;border-top:1px solid var(--color-border);}
.gallery-item .badge-soon{position:absolute;top:10px;right:10px;background:var(--color-accent);color:#fff;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 9px;border-radius:14px;}
/* bouton télécharger plan (sur les plans) */
.gallery-item .dl-plan{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  background:rgba(30,58,138,.9);color:#fff;font-size:.74rem;font-weight:600;padding:6px 12px;border-radius:18px;
  opacity:0;transition:opacity var(--transition);pointer-events:none;}
.gallery-item:hover .dl-plan{opacity:1;}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(15,23,42,.92);display:none;align-items:center;justify-content:center;
  z-index:1000;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92%;max-height:86%;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5);}
/* --- Galerie vidéos (autoplay/loop, style GIF) --- */
.gallery-item .gv-video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#0f172a;}
.gallery-item .gv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.18);opacity:0;transition:opacity var(--transition);pointer-events:none;}
.gallery-item .gv-play span{background:rgba(30,58,138,.92);color:#fff;font-size:.8rem;font-weight:600;
  padding:8px 16px;border-radius:20px;display:inline-flex;align-items:center;gap:7px;}
.gallery-item:hover .gv-play{opacity:1;}
.lightbox video{max-width:92%;max-height:86%;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5);display:none;}

.lightbox .lb-caption{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;font-size:.95rem;}
.lightbox .lb-close{position:absolute;top:20px;right:28px;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;
  background:none;border:none;font-family:inherit;}
.lightbox .lb-close:hover{color:var(--color-accent);}
@media(max-width:520px){.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}}

/* ==========================================================================
   ★ EMBELLISSEMENT « Esprit actuel en mieux » — touches technique/ingénieur
   ========================================================================== */

/* 1) Fond grille millimétrée très subtil sur le corps (évoque les plans) */
body{
  background-color:var(--color-bg);
  background-image:
    linear-gradient(rgba(29,78,216,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,78,216,.025) 1px,transparent 1px);
  background-size:28px 28px;
}

/* 2) Cartes services : numérotation discrète + accent + ombre moderne */
.svc-item{
  box-shadow:0 2px 4px rgba(30,58,138,.06);
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s,border-color .35s;
}
.svc-item:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(30,58,138,.16);
}

/* 3) Titres de page plus affirmés avec petit marqueur technique */
.page-title{position:relative;}
.page-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:0;height:0;
}

/* 4) Micro-animation d'apparition au scroll (fondu + montée) */
.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal-up.in{opacity:1;transform:none;}

/* 5) Cartes de contact / coordonnées : léger relief au survol */
.card{transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s;}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(30,58,138,.14);}

/* 6) Boutons : effet de profondeur plus moderne */


/* 7) Lignes de séparation des services (svc-rule) avec dégradé subtil */
.svc-rule{background:linear-gradient(90deg,currentColor 40%,transparent)!important;border:0!important;height:3px;}

/* 8) Liens de fil d'Ariane plus discrets et élégants */
.breadcrumb{font-size:.82rem;letter-spacing:.01em;opacity:.85;}

/* 9) Effet de focus accessibilité sur les champs (sécurité visuelle) */
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(29,78,216,.12);
}

/* ==========================================================================
   MENU HAMBURGER (smartphone uniquement)
   ========================================================================== */
.nav-toggle{display:none;}  /* caché en desktop */

@media(max-width:980px){
  /* Bouton 3 barres visible en mobile */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:42px;padding:9px 10px;cursor:pointer;
    background:rgba(252,176,0,.9);border:none;border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.25);order:2;margin-left:auto;
  }
  .nav-toggle span{display:block;height:3px;width:100%;background:#1e3a8a;border-radius:2px;transition:.3s;}
  /* Animation croix quand ouvert */
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* Le menu est replié par défaut en mobile */
  .masthead .mainnav{
    order:4;width:100%;
    max-height:0;overflow:hidden;
    transition:max-height .4s ease;
    padding-top:0;margin-left:0;
  }
  .masthead .mainnav.open{max-height:640px;}  /* déployé */
  .mainnav>ul{flex-direction:column;align-items:stretch;gap:4px;width:100%;padding-top:10px;}
  .mainnav li{width:100%;}
  .mainnav a{width:100%;text-align:center;padding:12px;font-size:.95rem;}
  /* Sous-menus : affichés en accordéon dans le flux (pas en survol) */
  .mainnav li>ul{position:static;display:flex;flex-direction:column;width:100%;max-width:100%;
    box-shadow:none;background:rgba(255,255,255,.08);border-radius:0;padding:0;margin:2px 0;}
  .mainnav li>ul a{padding:10px;font-size:.88rem;color:#fff;}
  /* Masquer la flèche Services en mobile (déjà géré, on confirme) */
  .mainnav li.nav-services .svc-arrow-wrap{display:none;}
}

/* ==========================================================================
   PAGE CONTACT : cartes à gauche + adresse à droite
   ========================================================================== */
.contact-layout{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin-top:8px;}
.contact-layout .contact-cards{flex:1 1 480px;max-width:540px;margin:0;}
.contact-address{flex:1 1 240px;background:var(--color-bg-alt);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:24px 26px;align-self:stretch;}
.contact-address h3{color:var(--color-primary-dark);font-size:1.05rem;margin:0 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--color-accent);}
.contact-address p{margin:0 0 14px;line-height:1.6;}
@media(max-width:760px){
  .contact-layout{flex-direction:column;}
  .contact-address{width:100%;flex-basis:auto;}
}


/* ==========================================================================
   CURSEUR PERSONNALISÉ — symbole START (le « A »)
   A inversé (V, pointe en bas) partout ; A normal (pointe en haut) sur les cliquables
   ========================================================================== */
/* Zones non cliquables : A retourné, hotspot en bas (16,30) */
body{
  cursor:url('../images/LOGOS/cursor-start-down.png') 16 30, default;
}
/* Éléments cliquables : A normal, hotspot au sommet (16,2) */
a,button,.btn,.card,.svc-item,.cat-chip,.gallery-item,input[type=submit],input[type=button],summary,
.nav-toggle,.quote-rdv,[role="button"],label[for]{
  cursor:url('../images/LOGOS/cursor-start.png') 16 2, pointer;
}
/* Champs de saisie : curseur texte normal (lisibilité) */
input[type=text],input[type=email],input[type=tel],textarea{
  cursor:text;
}
/* ==========================================================================
   EFFET "SHINE" sur les images (reflet lumineux au survol)
   Inspiré de l'effet img-hover-anim
   ========================================================================== */
@keyframes shine{
  0%{left:-100%;}
  100%{left:150%;}
}
/* Galeries Réalisations : reflet qui balaie l'image au survol */
.gallery-item{position:relative;overflow:hidden;}
.gallery-item::after{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;z-index:2;
  background:linear-gradient(to right,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);
  transform:skewX(-25deg);pointer-events:none;
}
.gallery-item:hover::after{animation:shine .9s ease;}

/* Images de contenu (articles) : on les enveloppe d'un effet shine via .img-shine */
.img-shine{position:relative;display:inline-block;overflow:hidden;border-radius:8px;}
.img-shine::before{
  content:"";position:absolute;top:0;left:-100%;width:55%;height:100%;z-index:2;
  background:linear-gradient(to right,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:skewX(-25deg);pointer-events:none;
}
.img-shine:hover::before{animation:shine 1s ease;}


/* --- Carte OIBT + logo SwissOIBT (accueil) --- */
.oibt-row{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:24px;margin-bottom:8px;}
.oibt-row .card-oibt{flex:0 0 460px;max-width:460px;margin:0;}
.oibt-row .swissoibt-logo{flex:0 1 280px;max-width:280px;min-width:180px;}
.oibt-row .swissoibt-logo img{width:100%;height:auto;display:block;transition:transform .25s;}
.oibt-row .swissoibt-logo:hover img{transform:scale(1.04);}
@media (max-width:560px){.oibt-row .card-oibt{flex-basis:100%;}.oibt-row .swissoibt-logo{margin:0 auto;}}

.card-oibt{background:linear-gradient(180deg,var(--cat-expertises-bg) 0%,#fff 60%) !important;border-color:var(--cat-expertises) !important;}
.card-oibt:hover{border-color:var(--cat-expertises) !important;}

/* --- Encadré SwissOIBT (page service OIBT) --- */
.swissoibt-box{background:var(--color-bg-alt);border:1px solid var(--color-border);
  border-radius:12px;padding:1.2rem 1.5rem;margin:0 0 1.4rem;text-align:center;
  transition:box-shadow .25s;}
.swissoibt-box:hover{box-shadow:0 6px 18px var(--color-shadow,rgba(30,58,138,.15));}
.swissoibt-box img{max-width:220px;width:55%;height:auto;display:block;margin:0 auto .8rem;}
.swissoibt-box p{color:var(--color-muted);margin:.3rem auto .9rem;max-width:none;white-space:nowrap;font-size:.92rem;text-align:center;}

/* --- Ligne d'actions en bas d'article service (retour + devis) --- */
.article-actions{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-top:14px;}
.article-actions .back-link{margin:0;}
.article-actions .devis-link{font-weight:400;}

/* ---- Accessibilité : titre H1 masqué visuellement mais lu par Google et lecteurs d'écran ---- */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ---- Triangle qualité-coût-délai (carte horizontale style "REVIT") ---- */
.triangle-card{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  margin: 1.6rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: 10px;
}
.triangle-card img{
  width: 100%;
  height: auto;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
}
.triangle-card figcaption{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.triangle-card .tc-title{
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  font-weight: 700;
  line-height: 1.2;
}
.triangle-card .tc-text{
  font-size: 0.98rem;
  color: var(--color-muted);
  line-height: 1.55;
  text-align: justify;
}
@media (max-width: 560px){
  .triangle-card{ flex-direction: column; text-align: center; padding: 1rem; }
  .triangle-card img{ width: 100px; flex: 0 0 auto; }
  .triangle-card figcaption{ align-items: center; }
}

/* ---- Bouton "zoom" sur l'image du triangle ---- */
.tc-zoom{
  position: relative;
  flex: 0 0 140px;
  width: 140px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tc-zoom:hover,
.tc-zoom:focus-visible{
  transform: scale(1.04);
  box-shadow: 0 4px 14px var(--color-shadow);
  outline: none;
}
.tc-zoom img{
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
}
/* Petite pastille loupe en bas à droite pour indiquer "cliquable" */
.tc-zoom-icon{
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ---- Dialog d'agrandissement d'image ---- */
.image-dialog{
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 95vw;
  max-height: 95vh;
  overflow: visible;
}
.image-dialog::backdrop{
  background: rgba(0,0,0,.85);
}
.image-dialog img{
  display: block;
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  background: #fff;
}
.image-dialog-close{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #222;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  z-index: 2;
}
.image-dialog-close:hover,
.image-dialog-close:focus-visible{
  background: var(--color-primary);
  color: #fff;
  outline: none;
}

/* ---- Adaptations mobile ---- */
@media (max-width: 560px){
  .tc-zoom{ width: 130px; flex: 0 0 auto; }
  .image-dialog{ max-width: 100vw; max-height: 100vh; }
  .image-dialog img{ max-width: 92vw; max-height: 80vh; }
  .image-dialog-close{
    top: 10px;
    right: 10px;
    width: 44px;     /* tap target ≥ 44px iOS guideline */
    height: 44px;
    font-size: 20px;
  }
}

/* ---- Grille services sur l'accueil (variante de .cards) ---- */
.cards.cards-services{
  grid-template-columns: repeat(3, 1fr);
  max-width: 100%;
  margin-bottom: 18px;
}
.cards.cards-services .card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
}
@media (max-width: 900px){
  .cards.cards-services{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .cards.cards-services{ grid-template-columns: 1fr; }
}