/* =====================================================================
   identite-v2.css — SEOnCLIC
   Couche d'identite posee PAR-DESSUS le CSS existant.
   Chargee en dernier dans le <head>, elle gagne sans rien reecrire.
   Pour revenir en arriere : retirer la balise <link>.

   Marque    : encre #0A1F3C, signal #00B39F
   Interface : blanc, gris, vert WhatsApp, couleurs d'etat -> inchanges
   Titres    : Bricolage Grotesque | Texte : Inter
   ===================================================================== */

:root{
  --sc-ink:#0A1F3C;
  --sc-ink-soft:#14325C;
  --sc-signal:#00B39F;
  --sc-signal-deep:#007F70;
  --sc-signal-wash:#E6F7F4;
  --sc-title:"Bricolage Grotesque",sans-serif;
  --sc-body:"Inter",sans-serif;
}

/* --- 1. Typographie ------------------------------------------------ */

body,.audit-bar input,.audit-panel-row input,input,textarea,select,
button,.nav-links li a,.mobile-menu a{font-family:var(--sc-body)!important}

h1,h2,h3,h4,.section-title,.hero h1,.hero-bg-content h1,
.stat-box .num,.cert-band-title{font-family:var(--sc-title)!important;
  letter-spacing:-0.02em}

h1,.hero h1,.hero-bg-content h1{font-weight:700!important}
h2,.section-title{font-weight:600!important}

/* Bricolage a une hauteur d'x genereuse : elle ne descend jamais
   sous 18px. Menus, boutons et libelles restent en Inter. */

/* --- 2. Palette : le bleu Tailwind disparait ----------------------- */

.btn-audit-cta,.btn-contact,.nav-devis,.btn-devis-mobile,
.audit-panel .btn-submit,.modal-box .btn-submit,
.footer-cta-btn,.mid-cta-btn,#back-to-top{
  background:var(--sc-ink)!important;color:#fff!important;border-color:var(--sc-ink)!important}

.btn-audit-cta:hover,.btn-contact:hover,.nav-devis:hover,
.btn-devis-mobile:hover,.audit-panel .btn-submit:hover,
.modal-box .btn-submit:hover,#back-to-top:hover{
  background:var(--sc-ink-soft)!important}

/* Le seul aplat signal : le bouton du hero, sur fond sombre.
   Texte encre sur signal = 6,2:1, conforme AA. */
.btn-audit{background:var(--sc-signal)!important;color:var(--sc-ink)!important;
  font-weight:700!important}
.btn-audit:hover{background:var(--sc-signal-deep)!important;color:#fff!important}

/* Liens et accents : encre par defaut. Le signal ne porte jamais de
   texte sur blanc (2,6:1), il ne sert qu'aux aplats et aux traits. */
.inline-link,.nav-links li a:hover,.mobile-menu a:hover,
.footer-col ul li a:hover,.section-tag{color:var(--sc-ink)!important}
.inline-link{text-decoration-color:rgba(0,179,159,.55)!important}
.inline-link:hover{color:var(--sc-signal-deep)!important}

.nav-links li a:hover,.nav-links li a.nav-active{background:var(--sc-signal-wash)!important}

.accent-gradient{background:none!important;-webkit-text-fill-color:initial!important;
  color:var(--sc-ink)!important;font-style:normal}
.hero-bg-content .accent-gradient,.hero h1 em{color:var(--sc-signal)!important;
  -webkit-text-fill-color:initial!important;background:none!important}

.tooltip-term{border-bottom-color:var(--sc-signal)!important}
.tooltip-term::after{background:var(--sc-ink)!important}

.audit-bar:focus-within,.audit-panel-row:focus-within,
input:focus,textarea:focus,select:focus{border-color:var(--sc-signal)!important}
.cert-badge:hover{border-color:var(--sc-signal)!important;
  box-shadow:0 6px 16px rgba(0,179,159,.14)!important}

#progress-bar{background:var(--sc-signal)!important}
*{scrollbar-color:var(--sc-ink) transparent}

.stats-section{background:var(--sc-ink)!important}
.why-card{border-top-color:var(--sc-ink)!important}
.pain-card{border-top-color:var(--sc-signal)!important}
.icon-wrap,.step-icon,.why-card .why-icon{background:var(--sc-signal-wash)!important}
.step-num{background:var(--sc-ink)!important}
.highlight-box{background:var(--sc-signal-wash)!important;
  border-left-color:var(--sc-signal)!important}
.compare-card.accent{background:var(--sc-signal-wash)!important;
  border-color:var(--sc-signal)!important}
.compare-card.accent .compare-label,.compare-card.muted .compare-label{
  color:var(--sc-ink)!important}

/* --- 3. Barre haute : le telephone remplace WhatsApp --------------- */
/* WhatsApp reste accessible par la bulle flottante, qui ne bouge pas. */

.topbar{background:var(--sc-ink)!important}
.topbar-cta{color:var(--sc-ink)!important}
.topbar-cta:hover{background:var(--sc-signal-wash)!important}

/* --- 4. Le motif : un point, des ondes ----------------------------- */

.hero-gradient,.hero.hero-bg-photo,.hero-split.hero-bg-photo{
  background-color:var(--sc-ink)!important;
  background-image:repeating-radial-gradient(circle at 4% 100%,
    rgba(0,179,159,.22) 0 1.5px,transparent 1.5px 84px)!important}

.section-divider{height:10px;background:none;opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10'%3E%3Cpath d='M0 7 q11 -9 22 0 t22 0' fill='none' stroke='%2300B39F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;opacity:.55}

.section-tag::before{background:var(--sc-signal)!important}

.compare-list li::before,.hero-trust-item svg,.faq-icon{color:var(--sc-signal)!important}

/* --- 6. Restes de bleu reperes apres la premiere passe ------------- */

.btn-primary,.cookie-btn-accept{background:var(--sc-ink)!important;color:#fff!important}
.btn-primary:hover,.cookie-btn-accept:hover{background:var(--sc-ink-soft)!important}
.btn-secondary,.btn-white{color:var(--sc-ink)!important}
.btn-secondary{border-color:#d5dde8!important}
.btn-secondary:hover{border-color:var(--sc-signal)!important;background:var(--sc-signal-wash)!important}

.faq-icon,.audit-panel-head span,.modal-head span{color:var(--sc-ink)!important}

.cta-band{background:var(--sc-ink)!important;
  background-image:repeating-radial-gradient(circle at 4% 100%,
    rgba(0,179,159,.20) 0 1.5px,transparent 1.5px 84px)!important}

/* Le lien Blog du menu porte une couleur en style inline dans le HTML.
   Le selecteur d'attribut avec !important passe devant. */
.nav-links li a[href="blog/"],.mobile-menu a[href="blog/"]{color:var(--sc-ink)!important}

/* --- 7. Le maillage de points cede la place aux ondes -------------- */
/* Deux motifs concurrents ne font pas une identite : on n'en garde qu'un. */

.hero.hero-gradient::before{background-image:none!important}
.hero.hero-gradient::after{background:
  radial-gradient(circle at 82% 22%,rgba(0,179,159,.16) 0%,transparent 55%)!important}
.hero.hero-gradient{background:var(--sc-ink)!important;
  background-image:repeating-radial-gradient(circle at 4% 100%,
    rgba(0,179,159,.20) 0 1.5px,transparent 1.5px 88px)!important}

/* --- 8. Section services ------------------------------------------ */

.svc-cta{background:var(--sc-ink)!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(10,31,60,.22)!important}
.svc-cta:hover{background:var(--sc-ink-soft)!important;
  box-shadow:0 10px 22px rgba(10,31,60,.30)!important}

.svc-dot{background:var(--sc-signal)!important;
  box-shadow:0 0 0 4px rgba(0,179,159,.16)!important}
.svc-num{color:var(--sc-ink)!important}
.timeline-progress{background:var(--sc-signal)!important}

/* Un seul halo pour les six services : six teintes differentes,
   c'etait six identites. */
.svc-color-1,.svc-color-2,.svc-color-3,
.svc-color-4,.svc-color-5,.svc-color-6{
  --svc-halo:#DCF3EF;--svc-dot:var(--sc-signal)}

/* --- 9. Bande CTA intermediaire ------------------------------------ */
/* Fond encre + ondes, bouton blanc a texte encre. Le bouton sombre sur
   fond bleu de la passe precedente etait une erreur : deux valeurs
   sombres qui se battent. */

.mid-cta{background:var(--sc-ink)!important;
  background-image:repeating-radial-gradient(circle at 3% 100%,
    rgba(0,179,159,.20) 0 1.5px,transparent 1.5px 76px)!important}
.mid-cta-btn{background:#fff!important;color:var(--sc-ink)!important}
.mid-cta-btn:hover{background:var(--sc-signal-wash)!important}

/* --- 10. Section methode ------------------------------------------- */

.timeline-dot{background:var(--sc-ink)!important;
  box-shadow:0 4px 14px rgba(10,31,60,.20)!important}
.timeline-badge{background:var(--sc-signal-wash)!important;
  color:var(--sc-ink)!important;border-color:#B9E6DE!important}
.method-track{background:rgba(10,31,60,.12)!important}
.method-progress{background:var(--sc-signal)!important}

/* --- 11. Temoignages et newsletter --------------------------------- */

.avis-more,.nl-submit{display:inline-flex;align-items:center;gap:8px;
  background:var(--sc-ink)!important;color:#fff!important;border:none;
  border-radius:999px;padding:13px 26px;font-size:14px;font-weight:700;
  font-family:var(--sc-body);text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background .15s,transform .15s}
.avis-more:hover,.nl-submit:hover{background:var(--sc-ink-soft)!important}
.avis-nav{color:var(--sc-ink)!important}
.avis-nav:hover{border-color:var(--sc-signal)!important;
  background:var(--sc-signal-wash)!important}

/* --- 12. Pied de page ---------------------------------------------- */

.footer-contact-line a{color:var(--sc-signal)!important}
.site-footer{background:var(--sc-ink)!important}
.footer-col ul li a:hover{color:var(--sc-signal)!important}

/* --- 13. Survols : plus aucun bleu ---------------------------------- */

.why-card:hover,.pain-card:hover,.service-card:hover,
.svc-card:hover,.avis-card:hover,.proof-card:hover,.faq-item:hover{
  border-color:var(--sc-signal)!important;
  box-shadow:0 8px 32px rgba(10,31,60,.10)!important}
.why-card{border-top-color:var(--sc-ink)!important}
.why-card .why-icon,.pain-icon,.icon-bubble{
  background:var(--sc-signal-wash)!important}

/* Selection de texte : le bleu du navigateur suivait l'ancienne palette. */
::selection{background:#B9E6DE;color:var(--sc-ink)}

/* --- 14. Liens en texte courant ------------------------------------ */
/* Une seule regle pour tous les liens dans les paragraphes : encre,
   souligne turquoise. Le turquoise ne porte pas le texte (2,6:1),
   il ne fait que le souligner. */

.inline-link,.section-intro a,.svc-card p a,.pain-card p a,
.why-card p a,.faq-a a,.avis-card a{
  color:var(--sc-ink)!important;font-weight:600;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,179,159,.55)!important;
  text-underline-offset:2px}
.inline-link:hover,.section-intro a:hover,.svc-card p a:hover,
.pain-card p a:hover,.why-card p a:hover,.faq-a a:hover,
.avis-card a:hover{color:var(--sc-signal-deep)!important;
  text-decoration-color:var(--sc-signal)!important}

/* --- 16. Barre de navigation : le CTA doit rester dans la pilule ---- */
/* Dix entrees de menu plus le logo plus le bouton depassaient la largeur
   de la barre : le bouton sortait par la droite. On resserre le menu,
   on empeche le bouton de se faire pousser dehors. */

.navbar{gap:14px;padding-left:22px;padding-right:22px}
.navbar > *{min-width:0}
.logo,.navbar > a:first-child{flex-shrink:0}
.nav-links{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:0}
.nav-links li a{padding:6px 8px;font-size:14.5px}
.nav-devis{flex-shrink:0;margin-left:10px}

@media (max-width:1400px){
  .nav-links li a{padding:6px 6px;font-size:13.5px}
  .nav-devis{padding:8px 15px;font-size:12.5px}
}
@media (max-width:1180px){
  .nav-links li a{padding:5px 5px;font-size:12.5px}
  .nav-devis{padding:7px 13px;font-size:12px}
}

/* --- 18. Mouvement : une seule regle pour toutes les cartes --------- */
/* Constat avant correction : les cartes montaient de 2, 3, 4 ou 5
   pixels au survol selon la section, avec des durees allant de 0,1 a
   0,4 seconde. Cote a cote, ca donne l'impression que les blocs ne
   viennent pas du meme site.
   Regle retenue : 3 pixels, 0,2 seconde, meme courbe partout. */

:root{--sc-lift:-3px;--sc-time:.2s;--sc-ease:cubic-bezier(.22,.61,.36,1)}

.why-card,.pain-card,.service-card,.svc-card,.avis-card,.proof-card,
.contact-service-card,.cert-badge,.faq-item,.compare-card,.step-card{
  transition:transform var(--sc-time) var(--sc-ease),
             box-shadow var(--sc-time) var(--sc-ease),
             border-color var(--sc-time) var(--sc-ease)!important}

.why-card:hover,.pain-card:hover,.service-card:hover,.svc-card:hover,
.avis-card:hover,.proof-card:hover,.contact-service-card:hover,
.compare-card:hover{
  transform:translateY(var(--sc-lift))!important;
  box-shadow:0 10px 28px rgba(10,31,60,.10)!important}

/* Les boutons bougent moins que les cartes : ils sont plus petits,
   le meme deplacement paraitrait brutal. */
.btn-audit,.btn-audit-cta,.btn-contact,.btn-primary,.btn-secondary,
.btn-white,.nav-devis,.svc-cta,.mid-cta-btn,.footer-cta-btn,
.avis-more,.nl-submit,.btn-submit{
  transition:background var(--sc-time) var(--sc-ease),
             transform var(--sc-time) var(--sc-ease),
             box-shadow var(--sc-time) var(--sc-ease)!important}
.btn-audit:hover,.btn-audit-cta:hover,.btn-contact:hover,.btn-primary:hover,
.btn-secondary:hover,.btn-white:hover,.nav-devis:hover,.svc-cta:hover,
.mid-cta-btn:hover,.footer-cta-btn:hover,.avis-more:hover,
.nl-submit:hover,.btn-submit:hover{transform:translateY(-2px)!important}

/* Les badges de certification ne se soulevent pas : ce sont des preuves,
   pas des elements cliquables. Seule la bordure reagit. */
.cert-badge:hover{transform:none!important}

/* Respect du reglage systeme : aucune animation si la personne a
   demande a en avoir moins. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
  .why-card:hover,.pain-card:hover,.service-card:hover,.svc-card:hover,
  .avis-card:hover,.proof-card:hover,.contact-service-card:hover,
  .compare-card:hover,.btn-audit:hover,.btn-audit-cta:hover,
  .btn-primary:hover,.nav-devis:hover,.svc-cta:hover{transform:none!important}
}

/* --- 19. Titres : une seule couleur, une seule police --------------- */
/* Sur fond clair les titres sont encre, sans exception. Sur fond sombre
   ils passent en blanc casse : le blanc pur sur un fond tres sombre
   fatigue l'oeil et fait vibrer les contours. */

h1,h2,h3,h4,h5,h6,.section-title,.hero h1,.hero-bg-content h1,
.svc-title,.card-title,.faq-q{
  font-family:var(--sc-title)!important;color:var(--sc-ink)}

.hero h1,.hero-bg-content h1,.hero-split h1,
.stats-section h2,.mid-cta h2,.cta-band h2,.site-footer h3,
.hero h2,.hero-split h2{color:#fff!important}

/* --- 20. Barre de menu : identique sur les dix-neuf pages ----------- */

.navbar{border-radius:999px;height:68px;box-shadow:0 8px 30px rgba(10,31,60,.07)}
.navbar.scrolled{box-shadow:0 10px 34px rgba(10,31,60,.12)}
.nav-links li a{color:#4A5A6B;border-radius:8px;font-weight:500}
.nav-links li a:hover,.nav-links li a.nav-active{color:var(--sc-ink)!important}
.topbar{font-size:13.5px}

/* --- 21. Liens : une regle unique, site et blog --------------------- */
/* Trois familles, pas une de plus.
   1. Lien dans du texte courant : encre, souligne turquoise.
   2. Lien de navigation (menu, pied de page, fil d'Ariane) : pas de
      soulignement, la couleur et le survol suffisent.
   3. Bouton : traite ailleurs, ce n'est pas un lien de lecture.
   Le turquoise ne porte jamais le texte (2,6:1 sur blanc), il ne fait
   que le souligner. */

.page-content p > a:not([class]),
.page-content li > a:not([class]),
article p > a:not([class]),
article li > a:not([class]),
.section-intro > a:not([class]),
.faq-a a:not([class]),
.inline-link{
  color:var(--sc-ink)!important;
  font-weight:600;
  text-decoration:underline!important;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  text-decoration-color:rgba(0,179,159,.55)!important;
  transition:color var(--sc-time) var(--sc-ease),
             text-decoration-color var(--sc-time) var(--sc-ease)}

.page-content p > a:not([class]):hover,
.page-content li > a:not([class]):hover,
article p > a:not([class]):hover,
article li > a:not([class]):hover,
.section-intro > a:not([class]):hover,
.faq-a a:not([class]):hover,
.inline-link:hover{
  color:var(--sc-signal-deep)!important;
  text-decoration-color:var(--sc-signal)!important}

/* Focus clavier : visible partout, meme regle. */
a:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--sc-signal);outline-offset:2px;border-radius:4px}

/* Navigation : jamais de soulignement, la couleur porte l'etat. */
.nav-links a,.mobile-menu a,.footer-col a,.footer-bottom a,
.breadcrumb-item a,.bn-drawer-item{
  text-decoration:none!important;
  transition:color var(--sc-time) var(--sc-ease)}
.footer-col a:hover,.footer-bottom a:hover,.breadcrumb-item a:hover,
.cookie-text a:hover{color:var(--sc-signal)!important}

/* Banniere cookies : le lien DOIT rester souligne.
   Sur le fond sombre #0A1F3C, le texte environnant est du blanc a 80%
   (composite #CED2D8). Le teal #00B39F n'est qu'a 1,74:1 de ce texte,
   sous le seuil de 3:1 exige par WCAG 1.4.1 pour un lien identifiable
   par la seule couleur.
   Aucune couleur ne resout ce cas : il faudrait une luminance <= 0,181
   pour atteindre 3:1 face au texte, ET >= 0,237 pour tenir 4,5:1 face au
   fond. L'intervalle est vide. Le soulignement est donc le seul correctif
   valide -- eclaircir le teal DEGRADE le ratio (#33D6C0 tombe a 1,20:1). */
.cookie-text a{
  text-decoration:underline!important;
  text-underline-offset:2px;
  transition:color var(--sc-time) var(--sc-ease)}

/* --- 22. Titres : le degrade disparait du site aussi ---------------- */
/* Meme raison que sur le blog : un mot en degrade est un effet, pas un
   signe de marque. Turquoise fonce sur fond clair (4,9:1), turquoise
   clair sur fond sombre. */

.accent-gradient{
  background:none!important;
  -webkit-background-clip:initial!important;background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important;
  color:var(--sc-signal-deep)!important;font-style:normal}
.hero .accent-gradient,.hero-bg-content .accent-gradient,
.stats-section .accent-gradient,.mid-cta .accent-gradient,
.cta-band .accent-gradient{color:#5FE3D2!important}

/* --- 23. Etiquettes de section sur fond sombre ---------------------- */
/* L'etiquette est encre par defaut : sur un hero encre elle disparait.
   Sur fond sombre elle passe en turquoise clair, et son trait avec. */

.hero .section-tag,.hero-split .section-tag,.hero-tarifs .section-tag,
.hero-about .section-tag,.stats-section .section-tag,
.mid-cta .section-tag,.cta-band .section-tag,
.hero-bg-content .section-tag{color:#5FE3D2!important}
.hero .section-tag::before,.hero-split .section-tag::before,
.hero-tarifs .section-tag::before,.hero-about .section-tag::before,
.stats-section .section-tag::before,.mid-cta .section-tag::before,
.cta-band .section-tag::before,
.hero-bg-content .section-tag::before{background:#5FE3D2!important}

/* Le trait de l'etiquette : turquoise plein, plus de degrade. */
.section-tag::before{background:var(--sc-signal)!important}

/* --- 24. Les ondes sur tous les heros ------------------------------- */
/* Les pages contact, tarifs, qui-sommes-nous et etudes de cas avaient
   un hero sombre sans le motif : le signe de marque s'arretait a
   l'accueil. Il couvre maintenant les dix-neuf pages. */

.hero,.hero-split,.hero-tarifs,.hero-about,
.hero.hero-gradient,.hero-split.hero-gradient{
  background-color:var(--sc-ink)!important;
  background-image:repeating-radial-gradient(circle at 4% 100%,
    rgba(0,179,159,.20) 0 1.5px,transparent 1.5px 86px)!important;
  position:relative}

/* Les heros clairs des pages legales gardent leur fond pale : le motif
   y serait invisible et le texte est encre. */
.hero-light,.hero-simple{background:#F4FAF8!important;background-image:none!important}
.hero-light h1,.hero-simple h1{color:var(--sc-ink)!important}

/* --- 25. Sections de contenu : fond uni, sans motif ---------------- */
/* Le motif etait pose sur la moitie des sections de l'accueil. A cette
   frequence il ne signe plus rien, il remplit.
   Trois usages officiels, pas un de plus :
     1. les heros            2. les bandes CTA
     3. les couvertures d'article et le favicon
   Les sections de contenu reviennent a un aplat pale. */

.bg-ondes{
  background-color:#F4FAF8!important;
  background-image:none!important}

/* --- 26. Etiquettes d'etude de cas --------------------------------- */
/* Cinq fonds differents pour cinq services : c'etait cinq marques.
   Une seule pastille, comme partout ailleurs sur le site. */

.cs-badge,.cs-badge.seo,.cs-badge.seolocal,.cs-badge.sea,
.cs-badge.refonte,.cs-badge.growth,.cs-badge.geo{
  background:var(--sc-signal-wash)!important;color:var(--sc-ink)!important;
  text-decoration:none!important}
.cs-badge:hover{background:#B9E6DE!important}

/* --- 27. Boutons sur fond encre : la regle n'etait pas appliquee ---- */
/* Le CTA du hero des pages de service et celui du pied de page etaient
   en encre, posee sur un fond encre. Ils disparaissaient. Sur fond
   sombre, le bouton est blanc a libelle encre. */

.hero-cta-btn,.urgence-btn,.footer-cta-btn,
.hero-split .btn-audit-cta,.hero-tarifs .btn-audit-cta,
.hero-about .btn-audit-cta,.site-footer .btn-audit-cta{
  background:#fff!important;color:var(--sc-ink)!important;
  border:none!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important}
.hero-cta-btn:hover,.urgence-btn:hover,.footer-cta-btn:hover,
.hero-split .btn-audit-cta:hover,.hero-tarifs .btn-audit-cta:hover,
.hero-about .btn-audit-cta:hover,.site-footer .btn-audit-cta:hover{
  background:var(--sc-signal-wash)!important;color:var(--sc-ink)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.34)!important}

/* --- 28. Le maillage de noeuds subsistait sur les pages de service -- */
.hero-split.hero-gradient::before,
.hero-split::before{background-image:none!important;opacity:0!important}

/* --- 29. Menu : cinq entrees au lieu de dix ------------------------- */
/* Les six services sont regroupes sous une entree unique. Dix entrees,
   personne ne les lit ; cinq se parcourent d'un regard. */

.nav-links li a,.nav-sub-btn{padding:8px 12px;font-size:15px}
.nav-sub-btn{display:inline-flex;align-items:center;gap:5px;background:none;
  border:none;cursor:pointer;color:#4A5A6B;font-family:var(--sc-body);
  font-weight:500;border-radius:8px;
  transition:color var(--sc-time) var(--sc-ease),
             background var(--sc-time) var(--sc-ease)}
.nav-sub-btn:hover,.has-sub:hover .nav-sub-btn,
.nav-sub-btn[aria-expanded="true"]{color:var(--sc-ink);background:var(--sc-signal-wash)}
.nav-sub-btn svg{transition:transform var(--sc-time) var(--sc-ease)}
.has-sub:hover .nav-sub-btn svg,
.nav-sub-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.has-sub{position:relative}
.nav-sub{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:320px;list-style:none;margin:0;padding:10px;
  background:#fff;border:1px solid var(--sc-line,#E2ECE9);border-radius:16px;
  box-shadow:0 18px 44px rgba(10,31,60,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--sc-time) var(--sc-ease),
             transform var(--sc-time) var(--sc-ease),
             visibility var(--sc-time)}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub,
.nav-sub-btn[aria-expanded="true"] + .nav-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* Pont invisible : la souris peut descendre du bouton vers le panneau. */
.nav-sub::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}

.nav-sub li a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none}
.nav-sub li a:hover{background:var(--sc-signal-wash)}
.sm-l{display:block;font-size:14.5px;font-weight:600;color:var(--sc-ink)}
.sm-d{display:block;font-size:12.5px;color:#6B7C8C;margin-top:1px}

.mm-titre{margin:14px 0 4px;font-size:11.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#8A9AA8}
.mobile-menu .mm-titre:first-child{margin-top:0}

@media (max-width:1180px){.nav-links li a,.nav-sub-btn{padding:7px 9px;font-size:14px}}

/* --- 30. Hierarchie des appels a l'action -------------------------- */
/* Trois niveaux, pas quatre.
   Principal   : l'audit gratuit. Aplat, une seule fois par ecran.
   Secondaire  : le devis de la barre de navigation, et les liens de
                 service. Contour ou aplat leger.
   Tertiaire   : les liens editoriaux. Du texte souligne, pas un bouton.
   La bulle WhatsApp reste, c'est un repere permanent, pas un CTA. */

/* Secondaire : le CTA de chaque carte de service passe en contour.
   Sept aplats encre dans la meme section, c'etait sept fois la meme
   sollicitation, aucune ne ressortait. */
.svc-cta{
  background:transparent!important;color:var(--sc-ink)!important;
  border:1.5px solid #D5DDE8!important;
  box-shadow:none!important;font-weight:600!important}
.svc-cta:hover{background:var(--sc-signal-wash)!important;
  border-color:var(--sc-signal)!important;color:var(--sc-ink)!important;
  box-shadow:none!important}

/* Tertiaire : « voir les etudes de cas » n'est pas une conversion,
   c'est de la navigation. Il redevient un lien. */
.avis-more{
  background:transparent!important;color:var(--sc-ink)!important;
  box-shadow:none!important;padding:8px 0!important;
  font-weight:600!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,179,159,.55)!important;
  text-underline-offset:3px}
.avis-more:hover{background:transparent!important;
  color:var(--sc-signal-deep)!important;transform:none!important;
  text-decoration-color:var(--sc-signal)!important}

/* Le bouton du bandeau mobile persistant : un seul par ecran suffit.
   Il disparait quand la barre de navigation basse est visible. */
@media (max-width:720px){
  .sticky-cta-mobile{display:none!important}
}

/* --- 31. Liens de contenu sur fond sombre -------------------------- */
/* La regle des liens force l'encre en !important, ce qui rendait
   invisibles les liens places dans un hero ou un bandeau sombre.
   Sur fond sombre ils passent au turquoise clair (10,5:1). */

.hero .inline-link,.hero-split .inline-link,.hero-tarifs .inline-link,
.hero-about .inline-link,.hero-bg-content .inline-link,
.stats-section .inline-link,.mid-cta .inline-link,.cta-band .inline-link,
.site-footer .inline-link,
.hero p > a:not([class]),.hero-split p > a:not([class]),
.hero-about p > a:not([class]),.site-footer p > a:not([class]){
  color:#5FE3D2!important;
  text-decoration-color:rgba(95,227,210,.55)!important}
.hero .inline-link:hover,.hero-split .inline-link:hover,
.hero-tarifs .inline-link:hover,.hero-about .inline-link:hover,
.hero-bg-content .inline-link:hover,.stats-section .inline-link:hover,
.mid-cta .inline-link:hover,.cta-band .inline-link:hover,
.site-footer .inline-link:hover{
  color:#8CEEE0!important;text-decoration-color:#8CEEE0!important}

/* --- 32. Barre de navigation : le menu au centre -------------------- */
/* Avec cinq entrees au lieu de dix, le menu se collait au bouton et
   laissait un vide de plusieurs centaines de pixels apres le logo.
   Logo a gauche, bouton a droite, menu centre entre les deux. */

/* Le bouton n'est plus dans la liste : il est frere du logo et du menu.
   Logo colle a gauche, bouton colle a droite, menu centre entre les deux. */
.navbar{justify-content:space-between}
.nav-links{flex:1 1 auto;justify-content:center;gap:2px;margin:0 12px}
.nav-devis{flex-shrink:0;margin-left:0}

/* Le panneau s'aligne sur son entree, sans deborder du cote droit. */
.has-sub{position:static}
.nav-sub{left:auto;right:auto;transform:translateY(-6px)}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub,
.nav-sub-btn[aria-expanded="true"] + .nav-sub{transform:translateY(0)}
@media (min-width:900px){
  .has-sub{position:relative}
  .nav-sub{left:50%;transform:translateX(-50%) translateY(-6px)}
  .has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub,
  .nav-sub-btn[aria-expanded="true"] + .nav-sub{
    transform:translateX(-50%) translateY(0)}
}

/* --- 34. Menu mobile : categorie vs sous-categorie ------------------ */
/* Le probleme : « Services » et « Agence » etaient ecrits plus petit et
   plus pale que les liens qu'ils coiffent. Un intitule moins visible que
   ses enfants ne se lit pas comme un intitule, il se lit comme une ligne
   de plus. On inverse le rapport de force, et on rattache visuellement
   chaque groupe a son titre par un filet vertical continu. */
/* Pas de tiret, pas de degrade : le titre se distingue par sa taille,
   sa graisse et l'air autour de lui. C'est plus calme et ca vieillit
   mieux qu'un marqueur graphique. */
.mobile-menu .mm-titre{
  margin:22px 0 2px;padding:0 0 8px;
  font-family:var(--sc-body);
  font-size:11.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:#93A3B2;
  border-bottom:1px solid #EDF3F1;
}
.mobile-menu .mm-titre:first-child{margin-top:2px}

/* Les liens du groupe : decales, et relies par un rail vertical. Le rail
   est dessine par un ::before de chaque lien : les liens etant colles,
   les segments forment une ligne continue qui s'interrompt au titre
   suivant. Pas de conteneur a ajouter dans le HTML. */
/* Les liens : plus de rail vertical ni de filets entre chaque ligne.
   L'espacement suffit a les separer, et la page respire. */
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){
  padding:11px 12px;margin:0 -12px;
  border-bottom:none!important;border-radius:10px;
  font-size:15.5px;font-weight:500;color:#3D4D60;
  transition:background .18s ease,color .18s ease;
}
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):hover,
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):focus-visible,
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):active{
  background:var(--sc-signal-wash);color:var(--sc-ink);
}
/* Le bouton de devis n'appartient a aucun groupe : il reste pleine
   largeur, detache du rail, avec de l'air au-dessus. */
.mobile-menu .btn-devis-mobile{margin-top:18px}

/* --- 35. Sous-menu Services ---------------------------------------- */
/* Du caractere par la matiere, pas par les effets. Le panneau precedent
   accumulait un filet degrade, un accent qui se deployait, une fleche
   qui apparaissait et sept entrees en cascade. Beaucoup de fantaisie,
   peu d'autorite. On enleve tout ca et on gagne en presence autrement :
   un panneau plus grand, deux colonnes, une typographie plus affirmee. */

.nav-sub{
  min-width:640px;padding:14px;border-radius:16px;
  border:1px solid #E4EDF5;
  box-shadow:0 2px 8px rgba(10,31,60,.06),0 28px 64px rgba(10,31,60,.18);
  /* Deux colonnes : le panneau devient un bloc, pas une liste qui pend. */
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
}
.nav-sub::after{content:none}

.nav-sub li a{
  display:block;padding:13px 16px;border-radius:10px;
  border-left:3px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.nav-sub li a::before,.nav-sub li a::after{content:none}
.nav-sub li a:hover,.nav-sub li a:focus-visible{
  background:var(--sc-signal-wash);border-left-color:var(--sc-signal);
  transform:none}

/* Le libelle porte le poids : Bricolage, plus grand, plus dense. */
.sm-l{
  font-family:var(--sc-title);font-size:16.5px;font-weight:700;
  letter-spacing:-.2px;color:var(--sc-ink)}
.sm-d{font-size:13px;line-height:1.45;color:#6B7C8C;margin-top:2px}
.nav-sub li a:hover .sm-d,.nav-sub li a:focus-visible .sm-d{color:#4A5A6B}

/* L'entree du menu s'aligne sur le reste : plus de fond colore, juste
   la couleur et la fleche qui pivote. */
.nav-sub-btn{font-size:15px}
.nav-sub-btn:hover,.has-sub:hover .nav-sub-btn,
.nav-sub-btn[aria-expanded="true"]{background:transparent;color:var(--sc-ink)}

/* Ouverture : le panneau se pose, sans cascade. */
.nav-sub li{opacity:1;transform:none;transition:none}

[data-theme="dark"] .nav-sub{border-color:#22303C}
[data-theme="dark"] .sm-l{color:#EAF2F0}
[data-theme="dark"] .nav-sub li a:hover{background:#10251F;border-left-color:#00B39F}

@media (max-width:1080px){
  .nav-sub{min-width:0;width:calc(100vw - 48px);max-width:620px}
}
@media (prefers-reduced-motion:reduce){
  .nav-sub li a{transition:none}
}

/* Menu mobile en mode sombre : meme sobriete. */
[data-theme="dark"] .mobile-menu .mm-titre{color:#7C8B99;border-bottom-color:#22303C}
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){color:#B4C4D0}
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):hover,
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):active{
  background:#10251F;color:#5FE3D2}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .mobile-menu .mm-titre{color:#7C8B99;border-bottom-color:#22303C}
  :root:not([data-theme]) .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){color:#B4C4D0}
}

/* --- 36. Barre de navigation : plus de presence -------------------- */
/* Le menu doit peser autant que le logo et le bouton. On monte la
   taille, on affirme la graisse, on donne de la hauteur a la pilule. */

.navbar{height:74px}
.nav-links li a,.nav-sub-btn{
  font-size:15.5px;font-weight:600;color:#3D4D60;padding:9px 14px}
.nav-links li a:hover,.nav-links li a.nav-active{
  color:var(--sc-ink)!important;background:transparent!important}
.nav-devis{font-size:14.5px;font-weight:700;padding:13px 24px}

@media (max-width:1400px){
  .nav-links li a,.nav-sub-btn{font-size:14.5px;padding:8px 11px}
  .nav-devis{font-size:13.5px;padding:11px 19px}
}
@media (max-width:1180px){
  .nav-links li a,.nav-sub-btn{font-size:13.5px;padding:7px 9px}
  .nav-devis{font-size:13px;padding:10px 16px}
}

[data-theme="dark"] .nav-links li a,[data-theme="dark"] .nav-sub-btn{color:#A8B6C2}
[data-theme="dark"] .nav-links li a:hover,
[data-theme="dark"] .nav-sub-btn:hover{color:#5FE3D2!important}