/* Styles personnalises progedys - a completer une fois le theme WordPress (quality/quality-orange) recupere. */

/* Le menu du site live s'ouvre au survol (pas de data-bs-toggle dans le HTML reel) : on reproduit
   ce comportement en CSS plutot que d'utiliser le JS de dropdown Bootstrap (absent du markup reel).
   Seuil 1200px (pas 992) : audit UX/UI accueil (2026-08-06), navbar-expand-lg -> navbar-expand-xl
   (voir navbar.html.twig) suite a l'ajout de "À propos de nous"/"Références clients" au menu - a
   992px les 8 entrees ne tenaient plus sur une ligne (mesure en direct : ~1356px necessaires pour
   ~1140px disponibles a 1280px de large) et retombaient sur 2 lignes. Seuil aligne avec app.js. */
@media (min-width: 1200px) {
    /* Correctif "sous-menu qui se ferme trop vite" (2026-09) : le sous-menu
       heritait d'un margin-top de 10px (Bootstrap/theme, jamais neutralise
       sur desktop - seule la version mobile le remettait a 0) creant une
       zone morte entre le bas du lien parent et le haut du sous-menu ou le
       survol etait perdu avant meme d'atteindre le sous-menu. Verifie en
       direct : le sous-menu disparaissait des qu'on descendait la souris
       dans cette bande de 10px, rendant les liens quasiment inatteignables.
       Fix : marge nulle (aucun espace mort) + zone de survol du lien
       parent agrandie vers le bas via un padding invisible (::after) qui
       ne deplace pas le texte, pour absorber aussi tout mouvement de
       souris legerement diagonal. */
    .navbar-custom .dropdown-menu {
        display: none;
        position: absolute;
        margin-top: 0 !important;
    }
    .navbar-custom li.dropdown {
        position: relative;
    }
    .navbar-custom li.dropdown::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -12px;
        height: 12px;
    }
    .navbar-custom .dropdown:hover > .dropdown-menu {
        display: block;
    }
    /* Audit accessibilite (WCAG 2.1.1 Clavier) : sans ceci, un sous-menu n'est atteignable
       qu'a la souris (:hover). :focus-within le maintient ouvert des qu'un lien a l'interieur
       recoit le focus clavier (Tab), en plus du survol deja gere ci-dessus. */
    .navbar-custom .dropdown:focus-within > .dropdown-menu {
        display: block;
    }
    /* Lot 1 : Echap (app.js) remet le focus sur le declencheur pour rester utilisable au clavier,
       ce qui a lui seul ne ferme pas le sous-menu (le declencheur reste "dans" le <li>, donc
       :focus-within ci-dessus reste vrai). Cette classe force la fermeture visuelle ; app.js la
       retire au prochain survol/focus reel pour ne jamais bloquer le menu ferme. */
    .navbar-custom .dropdown.js-escape-closed > .dropdown-menu {
        display: none !important;
    }

    /* Audit hover/focus/active (UX/A11y) : sur desktop, la regle du theme pour
       .navbar-nav>li>a:hover/:focus ne fait que "background:0 0" - aucun changement de couleur,
       aucun contour. Mesure en direct : couleur identique au repos et au focus, outline:none.
       Un utilisateur clavier ne peut pas voir ou il se trouve dans le menu. var(--pg-signal-600) verifie a
       5,42:1 sur le fond blanc de la navbar desktop (meme valeur que le correctif de contraste
       des liens). :focus-visible ajoute un contour pour ne pas dependre uniquement de la couleur.
       Scope desktop uniquement : le menu mobile a deja son propre traitement (fond sombre, texte
       blanc au survol/focus, regle @media max-width:991px du theme, non touchee ici). */
    .navbar-custom .navbar-nav > li > a:hover,
    .navbar-custom .navbar-nav > li > a:focus-visible,
    .navbar-custom .navbar-nav > li.dropdown > a:hover,
    .navbar-custom .navbar-nav > li.dropdown > a:focus-visible,
    .navbar-custom .navbar-nav > li.dropdown > .nav-dropdown-row > a:hover,
    .navbar-custom .navbar-nav > li.dropdown > .nav-dropdown-row > a:focus-visible {
        color: var(--pg-signal-600);
    }
    .navbar-custom .navbar-nav > li > a:focus-visible,
    .navbar-custom .navbar-nav > li.dropdown > a:focus-visible,
    .navbar-custom .navbar-nav > li.dropdown > .nav-dropdown-row > a:focus-visible {
        outline: 2px solid var(--pg-signal-600);
        outline-offset: -4px;
        border-radius: 4px;
    }

    /* Etat actif du menu (audit hover/focus/active) : le theme prevoit .navbar-nav>.active>a mais
       avec background-color:#fff0 (transparent, donc invisible) et rien ne posait jamais la classe
       .active jusqu'a ce correctif (voir partials/navbar.html.twig). Meme accent que le survol,
       plus un soulignement pour rester repere meme sans interaction (utilisateur qui ne survole/
       focus rien de precis, simplement "ou suis-je sur le site"). */
    .navbar-custom .navbar-nav > li.active > a,
    .navbar-custom .navbar-nav > li.active.dropdown > a,
    .navbar-custom .navbar-nav > li.active.dropdown > .nav-dropdown-row > a {
        color: var(--pg-signal-600);
        box-shadow: inset 0 -2px 0 var(--pg-signal-600);
    }

    /* Espacement resserre (theme d'origine : marge li 10px + padding lien 15px de chaque cote,
       soit 50px de "chrome" par entree) - necessaire pour que les 8 entrees tiennent sur une
       seule ligne meme au seuil bas de cette tranche (1200px). Verifie en direct : 0 retour a la
       ligne de 1200px a 1920px apres ce resserrage. */
    .navbar-custom .navbar-nav > li {
        margin: 0 2px;
    }
    /* Specificite alignee sur la regle d'origine (.navbar5.navbar-custom .navbar-nav li > a,
       quality-orange-style.css) - un simple .navbar-custom .navbar-nav>li>a perdait le conflit de
       cascade et le padding 15px d'origine restait applique malgre cette regle. Premier passage a
       10px de padding + 4px de marge encore insuffisant (mesure en direct a 1280px : 40px de
       manque) - police aussi resserree de 16 a 15px (economie repartie sur les 3 leviers plutot
       que tout concentrer sur le padding, qui commencait a paraitre etriqué en dessous de 10px). */
    .navbar5.navbar-custom .navbar-nav > li > a,
    .navbar5.navbar-custom .navbar-nav > li.dropdown > .nav-dropdown-row > a {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 15px;
    }
    /* Les entrees avec sous-menu gardent un padding-right plus large pour le chevron :
       sinon la regle 7px ci-dessus ecrase le 1.6em de .dropdown > a et colle le chevron au texte. */
    .navbar5.navbar-custom .navbar-nav li.dropdown > a,
    .navbar5.navbar-custom .navbar-nav > li.dropdown > .nav-dropdown-row > a {
        padding-right: 1.35em;
    }
    .navbar-custom .nav-chevron {
        right: 0.35em;
        top: 50%;
        width: 0.42em;
        height: 0.42em;
        margin-top: -0.28em;
    }
}
/* LOT A a11y : ligne parent + lien + bouton sous-menu (mobile uniquement). */
.nav-submenu-toggle {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
}
.nav-submenu-toggle .nav-chevron {
    position: static;
    margin: 0 auto;
    display: block;
}
.nav-submenu-toggle:focus-visible {
    outline: 2px solid var(--pg-signal-600);
    outline-offset: -2px;
    border-radius: 4px;
}
@media (min-width: 1200px) {
    .nav-submenu-toggle {
        display: none;
    }
}
@media (max-width: 1199.98px) {
    .navbar-custom li.dropdown > .nav-dropdown-row {
        display: flex;
        align-items: stretch;
        position: relative;
        width: 100%;
    }
    .navbar-custom li.dropdown > .nav-dropdown-row > a {
        flex: 1 1 auto;
        min-width: 0;
    }
    .navbar-custom li.dropdown > .nav-dropdown-row > a .nav-chevron {
        display: none;
    }
}

.hc-field-required {
    font-weight: 400;
    font-size: 0.92em;
    color: var(--hc-ink-mute, #5b6d8c);
}

@media (max-width: 1199.98px) {
    /* navbar-expand-xl (1200px) : le theme Quality ne bascule en menu sombre qu'a 991px —
       d'ou panneau noir + sous-menus invisibles (liens #121213 sur fond #1a1a1a). Panneau clair
       aligne sur la barre desktop ; sous-menus via .js-open (app.js + .nav-submenu-toggle). */
    .navbar-top-row {
        flex-wrap: wrap;
    }
    .navbar-top-row #custom-collapse.navbar-collapse {
        flex: 1 1 100%;
        order: 3;
        border-top: 1px solid #e8eef6;
        box-shadow: none;
        padding: 0;
    }
    .navbar5.navbar-custom,
    .navbar-custom {
        background: #fff;
        min-height: 0;
        padding: 0;
    }
    .navbar5.navbar-custom .navbar-nav,
    .navbar-custom .navbar-nav {
        background-color: #fff !important;
        float: none !important;
        margin: 0 !important;
        padding: 4px 0 16px;
    }
    .navbar-custom .navbar-nav > li {
        float: none;
        margin: 0 !important;
    }
    .navbar5.navbar-custom .navbar-nav li > a,
    .navbar-custom .navbar-nav > li > a,
    .navbar-custom .navbar-nav li.dropdown > .nav-dropdown-row > a {
        color: #121213 !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid #e8eef6 !important;
    }
    .navbar-custom .navbar-nav > li > a:hover,
    .navbar-custom .navbar-nav > li > a:focus-visible,
    .navbar-custom li.dropdown > .nav-dropdown-row > a:hover,
    .navbar-custom li.dropdown > .nav-dropdown-row > a:focus-visible {
        color: var(--pg-signal-600) !important;
        background: transparent !important;
    }
    .navbar-custom li.dropdown > .nav-dropdown-row {
        border-bottom: 1px solid #e8eef6;
    }
    .navbar-custom li.dropdown > .nav-dropdown-row > a {
        border-bottom: none !important;
    }
    .navbar-custom .dropdown-menu {
        display: none;
        position: static !important;
        float: none;
        width: 100%;
        margin: 0 0 8px;
        padding: 4px 0 8px 12px !important;
        border: none;
        box-shadow: none;
        background: #f4f7fb !important;
        border-radius: 8px;
    }
    .navbar-custom .dropdown-menu.js-open {
        display: block !important;
    }
    .navbar-custom .dropdown-menu li > a {
        color: #374151 !important;
        padding: 10px 12px 10px 0 !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        border-bottom: 1px solid rgba(7, 26, 58, 0.08) !important;
        white-space: normal;
    }
    .navbar-custom .dropdown-menu li:last-child > a {
        border-bottom: none !important;
    }
    .navbar-custom .dropdown-menu li > a:hover,
    .navbar-custom .dropdown-menu li > a:focus-visible {
        color: var(--pg-signal-600) !important;
        background: transparent !important;
    }
    .navbar-custom .dropdown-menu .dropdown-menu {
        margin: 4px 0 4px 12px;
        padding-left: 8px !important;
        background: #eef1f7 !important;
        border-left: 2px solid rgba(0, 168, 201, 0.35);
    }
    .navbar-custom li.dropdown > a,
    .navbar-custom li.dropdown > .nav-dropdown-row > a {
        padding-right: 0 !important;
    }
    .navbar-custom .nav-submenu-toggle {
        color: #121213;
        border-left: 1px solid #e8eef6;
        flex-shrink: 0;
    }
    .navbar-custom .nav-submenu-toggle .nav-chevron {
        position: static;
        margin: 0 auto;
    }
    .navbar-custom .nav-chevron {
        right: 1rem;
        width: 0.5em;
        height: 0.5em;
        margin-top: -0.3em;
    }
    .navbar-custom .nav-chevron::before {
        content: "";
        position: absolute;
        top: -14px;
        right: -16px;
        bottom: -14px;
        left: -16px;
    }
    .navbar-custom li a {
        border-bottom-color: #e8eef6 !important;
    }
    .navbar5.navbar-custom .navbar-nav > li.menu-item-cta {
        margin: 12px 16px 0;
        padding: 0;
    }
    .navbar5.navbar-custom .navbar-nav > li.menu-item-cta > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px 20px !important;
        margin: 0;
        text-align: center;
        border-bottom: none !important;
        color: #fff !important;
    }
    .navbar5.navbar-custom .navbar-nav > li.menu-item-cta > a:hover,
    .navbar5.navbar-custom .navbar-nav > li.menu-item-cta > a:focus-visible {
        background: var(--pg-signal-700) !important;
        color: #fff !important;
    }
}

/* Theme (quality-style) : #section-block { padding: 100px 0 50px } — trop haut sur
   toutes les pages contenu (apropos, conseils, pillars, locales, blog, contact…). */
#section-block {
    padding: 40px 0 50px;
}
@media (max-width: 768px) {
    #section-block {
        padding: 32px 0 35px; /* theme mobile etait a 70px en haut */
    }
}
/* Accueil : le hero plein ecran ne doit pas heriter de ce padding. */
#section-block.template-business-home {
    padding: 0 !important;
}

/* Covers Gutenberg is-light : renforcer le voile pour le contraste texte / photo. */
.wp-block-cover.is-light .wp-block-cover__background.has-background-dim:not([class*="has-background-dim-"]) {
    opacity: 0.45;
}
.wp-block-cover.is-light .has-white-color,
.wp-block-cover .has-white-color {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Lien d’évitement a11y : invisible pour la souris / le tactile.
   Visible uniquement au focus clavier (Tab), pas au :focus souris. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #ffffff;
    color: #10161f;
    padding: 12px 20px;
    z-index: 2000;
    border-radius: 0 0 6px 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: -9999px;
    outline: none;
}
.skip-link:focus-visible {
    left: 0;
    outline: 2px solid var(--pg-signal-600);
    outline-offset: 2px;
}

/* Cible du skip link : ne pas rester sous la barre fixe / sticky au focus programmatique. */
#content {
    scroll-margin-top: 120px;
}

/* Texte accessible hors écran (résumés de schémas, etc.). */
.hc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Audit accessibilite : #FF8E30 (orange marque) sur fond blanc ne passe qu'a 2,29:1, non
   conforme WCAG AA (4,5:1 minimum). A l'interieur d'un .wp-block-cover (fond sombre), le meme
   orange passe a 9:1+ et est deja conforme - on ne touche donc qu'aux instances HORS cover
   (contenu courant sur fond clair), pas a la couleur elle-meme dans son contexte d'origine.
   var(--pg-signal-600) verifie a 5,42:1 sur blanc (calcul WCAG relative luminance, marge confortable
   au-dessus du minimum 4,5:1). !important necessaire : la regle source (wp-global-styles.css /
   quality-orange-default.css) utilise deja !important. */
.has-luminous-vivid-amber-color:not(.wp-block-cover *),
.post-content a:not(.wp-block-cover *) {
    color: var(--pg-signal-600) !important;
}

/* Fil d'Ariane (audit SEO/UX) : reactive le composant .page-breadcrumb du theme (quality-style.css),
   jamais utilise jusqu'ici puisqu'aucune page ne l'affichait. Deux correctifs necessaires sans
   toucher au CSS existant : (1) un reliquat WooCommerce (.page-breadcrumb > li { color:#ffffff })
   rendrait le texte invisible sur le fond clair du site ; (2) le separateur :before cible la police
   "FontAwesome" (v4) alors que le projet utilise FontAwesome 7 ("Font Awesome 7 Free" - voir
   importmap.php), le glyphe \f105 ne s'affichait donc jamais. On restaure la couleur prevue par le
   theme et un separateur simple, avec une specificite plus forte portee par .breadcrumb-nav.
*/
.breadcrumb-nav .page-breadcrumb > li {
    color: #6a6a6a;
}
.breadcrumb-nav .page-breadcrumb > li.active {
    color: #121212;
}
/* Filet de securite (2026-09-10) : meme si BreadcrumbExtension::shortLabel() raccourcit
   maintenant le libelle actif a la partie avant le premier separateur, on tronque quand
   meme visuellement un libelle anormalement long plutot que de laisser le fil d'Ariane
   s'etaler sur plusieurs lignes et pousser tout le hero vers le bas (cause du "gros espace
   vide" constate sur /a-propos-de/ et d'autres pages avant ce correctif). */
.breadcrumb-nav .page-breadcrumb > li.active > span {
    display: inline-block;
    max-width: 60ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
@media (max-width: 576px) {
    .breadcrumb-nav .page-breadcrumb > li.active > span {
        max-width: 32ch;
    }
}
.breadcrumb-nav .page-breadcrumb > li + li:before {
    font-family: inherit;
    content: "/";
}
/* Audit hover/focus/active : la regle du theme (.page-breadcrumb > li a:hover/:focus) passe le
   lien en #FF8E30 - exactement la couleur deja corrigee pour contraste insuffisant (2,29:1 sur
   fond blanc, cf. correctif "liens orange" plus haut) mais oubliee ici car en dehors de
   .post-content. Fond mesure en direct : blanc, donc meme correctif necessaire. */
.breadcrumb-nav .page-breadcrumb > li a:hover,
.breadcrumb-nav .page-breadcrumb > li a:focus-visible {
    color: var(--pg-signal-600);
}

/* Accordeon FAQ (UX) : remplace les blocs H3/P plats (aucune distinction visuelle d'une simple
   sous-section, aucune interaction) par un vrai composant question/reponse repliable. Palette et
   typographie reprises telles quelles du reste du site (#121212 encre, #6a6a6a texte courant,
   var(--pg-signal-600) accent - meme orange que le correctif de contraste des liens) pour rester coherent
   plutot que d'introduire une nouvelle identite visuelle. Mecanique : toggle vanille en JS
   (assets/app.js), pas le data-bs-toggle="collapse" natif de Bootstrap - en test, le
   declenchement au clic du collapse Bootstrap ne s'est pas montre fiable dans cet environnement
   (deja charge par ailleurs pour d'autres composants), alors que le menu mobile de ce meme
   projet evite deja Bootstrap JS pour la meme raison. Transition en max-height CSS pure,
   contournement classique pour animer un "height:auto" implicite sans mesurer le DOM en JS.
   Chevron : reutilise fa-angle-down, deja present dans la police FontAwesome sous-ensee (cf.
   audit performance) - pas un octet de plus pour une icone supplementaire. */
.faq-accordion {
    max-width: 820px;
    margin: 32px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
    border-color: var(--pg-signal-600);
    box-shadow: 0 6px 20px -4px rgba(168, 82, 0, .16);
}
details.faq-item > summary.faq-trigger {
    list-style: none;
}
details.faq-item > summary.faq-trigger::-webkit-details-marker {
    display: none;
}
details.faq-item[open] .faq-chevron {
    transform: rotate(-135deg);
}
details.faq-item .faq-answer-wrap {
    max-height: none;
    overflow: visible;
}
.faq-item:has(.faq-trigger[aria-expanded="true"]) {
    border-color: var(--pg-signal-600);
    box-shadow: 0 6px 20px -4px rgba(168, 82, 0, .16);
}
.faq-question {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}
.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: none;
    border: none;
    margin: 0;
    padding: 20px 24px;
    text-align: left;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: #121212;
    cursor: pointer;
    transition: color .2s ease;
}
.faq-trigger:hover,
.faq-trigger:focus-visible {
    color: var(--pg-signal-600);
}
.faq-trigger:focus-visible {
    outline: 2px solid var(--pg-signal-600);
    outline-offset: -3px;
    border-radius: 8px;
}
.faq-chevron {
    flex: 0 0 auto;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid var(--pg-signal-600);
    border-bottom: 2px solid var(--pg-signal-600);
    transform: rotate(45deg);
    transition: transform .25s ease;
    margin-bottom: 0.2em;
}
.faq-trigger[aria-expanded="true"] .faq-chevron {
    transform: rotate(225deg);
    margin-bottom: 0;
    margin-top: 0.2em;
}

/* Chevron menu (remplace Font Awesome fa-angle-down) */
.navbar-custom .dropdown > a,
.navbar-custom li.dropdown > .nav-dropdown-row > a {
    position: relative;
}
.navbar-custom .nav-chevron {
    position: absolute;
    right: 0.55em;
    top: 50%;
    width: 0.45em;
    height: 0.45em;
    margin-top: -0.3em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    pointer-events: auto;
    padding: 0; /* annule ul.dropdown-menu span{padding-left:20px} du theme */
}
/* Theme (theme-bundle) : sur desktop, .dropdown-menu a span:after injectait \f105 FontAwesome
   pour les sous-sous-menus (ex. Ingénierie réseau). FA retire → glyphe cassé / double icône.
   On neutralise et on oriente notre .nav-chevron vers la droite. */
.navbar-custom .dropdown-menu a span::after {
    content: none !important;
    display: none !important;
}
@media (min-width: 1200px) {
    .navbar-custom .dropdown-menu .dropdown > a {
        padding-right: 1.6em;
    }
    .navbar-custom .dropdown-menu .dropdown > a > .nav-chevron {
        right: 0.15em;
        transform: rotate(-45deg); /* flèche vers la droite (sous-menu latéral left:100%) */
        margin-top: -0.22em;
    }
}
@media (max-width: 1199.98px) {
    /* Mobile : le sous-sous-menu s'ouvre en dessous → chevron vers le bas (defaut). */
    .navbar-custom .dropdown-menu .dropdown > a > .nav-chevron {
        transform: rotate(45deg);
    }
}
.faq-answer-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.faq-item.is-open .faq-answer-wrap {
    max-height: 500px;
}
.faq-answer {
    margin: 0;
    padding: 0 24px 22px;
    color: #121212;
    line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
    .faq-chevron,
    .faq-item,
    .faq-answer-wrap {
        transition: none !important;
    }
}

/* Audit hover/focus/active : .wp-block-button__link (boutons pilule ambre utilises sur l'accueil,
   l'hebergement, et desormais le CTA de fin de page ci-dessous) n'a aucune regle :hover ni :focus
   dans tout le theme - verifie par recherche exhaustive. filter:brightness() plutot qu'une couleur
   fixe : fonctionne quelle que soit la couleur de fond inline (has-*-background-color varie selon
   les pages) sans avoir a la deviner au cas par cas. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
    filter: brightness(0.92);
}
.wp-block-button__link:focus-visible {
    outline: 2px solid #121212;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
    .wp-block-button__link {
        transition: filter .15s ease;
    }
}

/* CTA de fin de page (maillage/UX) : avant ce correctif, la quasi-totalite des ~100 pages de
   service se terminaient par un simple "Pour un besoin X, contactez Progedys au 05.xx.xx.xx.xx"
   en texte brut, sans lien cliquable - zero page ne liait /contact-progedys/ depuis son contenu
   (seul le menu principal y menait). Bloc partage (partials/cta_final.html.twig) plutot que
   copie-colle sur ~100 templates, pour ne maintenir le design qu'a un seul endroit. Reutilise le
   bouton pilule ambre deja utilise ailleurs sur le site (wp-block-button__link +
   has-luminous-vivid-amber-background-color) au lieu d'introduire un nouveau style de bouton. */
/* Reproduction fidele du prototype design-preview/ (.cta-band, demande explicite 2026-09-08) :
   carte bleu-nuit arrondie, texte a gauche + actions a droite, au lieu du bloc creme centre
   d'origine. Meme composant partage (~108 pages), donc ce changement se voit partout - c'est le
   but : c'est la seule CTA de fin de page du site entier. */
.cta-final {
    max-width: 1100px;
    margin: 56px auto 8px;
    padding: 48px 52px;
    background: linear-gradient(120deg, var(--pg-navy-900), var(--pg-navy-700));
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.cta-final::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 168, 201, .35), transparent 70%);
    pointer-events: none;
}
.cta-final-copy {
    position: relative;
    z-index: 1;
}
.cta-final-text {
    margin: 0 0 8px;
    color: #fff;
    font-family: var(--pg-font-display);
    font-size: 1.5rem;
    font-weight: 700;
}
.cta-final-sub {
    margin: 0;
    color: #c9d3e8;
    font-size: .95rem;
}
.cta-final-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.cta-final-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--pg-font-display);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.cta-final-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    font-family: var(--pg-font-display);
    font-weight: 600;
    font-size: .95rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    flex: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .15s ease;
}
.cta-final-phone svg {
    width: 16px;
    height: 16px;
    flex: none;
}
.cta-final-phone:hover,
.cta-final-phone:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    transform: translateY(-2px);
}
/* Lot 1 : #FF8E30 (2,29 pour 1 en texte blanc, echec AA) remplace par la meme couleur d'action
   que .hc-cta-wrap .cta-final-btn--primary (homepage-classic.css) - c'etait une 2e regle pour le
   meme bouton, needed uniquement sur les pages qui n'ont pas de wrapper .hc-cta-wrap (formation,
   securisation, referencement), jusqu'ici jamais alignee sur le correctif de contraste du Lot 0. */
.cta-final-btn--primary {
    background: var(--pg-signal-600);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 136, 163, .28);
}
.cta-final-btn--primary:hover,
.cta-final-btn--primary:focus-visible {
    background: var(--pg-signal-700);
    color: #fff;
    transform: translateY(-2px);
}
.cta-final-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}
.cta-final-btn--ghost:hover,
.cta-final-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}
@media (max-width: 640px) {
    .cta-final {
        padding: 32px 28px;
        border-radius: 18px;
    }
}

/* Audit CSP + qualite : extrait des blocs <style> inline de templates/blog/index.html.twig et
   blog/show.html.twig (etaient retelecharges a chaque page HTML, jamais mis en cache separement,
   et empechaient toute suppression eventuelle des blocs <style> sans nonce). Ici plutot que dans
   un fichier separe pour ne pas reintroduire une requete CSS supplementaire (cf. fusion des 7
   fichiers du theme, categorie Performance). Selecteurs prefixes par leur conteneur de page
   (.progedys-blog / .progedys-article, deja presents dans le HTML) : les deux pages definissaient
   un .progedys-cta et un .progedys-btn avec des valeurs differentes, sans prefixe la fusion en un
   seul fichier global aurait fait gagner la derniere regle declaree sur l'autre page. Les 2
   declarations background-image dynamiques (image de hero fixe sur l'index, article.heroImage
   variable par article sur la page d'article) restent en attribut style="" inline sur l'element -
   delibere, la seconde valeur change reellement par page. */
.progedys-blog{background:#f5f5f5;font-family:Arial,sans-serif}
.progedys-blog .progedys-hero,
.progedys-article .progedys-hero{
    position:relative;
    overflow:hidden;
    padding:64px 20px;
    text-align:center;
    color:#fff;
    background:#1a1a1a;
}
.progedys-article .progedys-hero{padding:80px 20px}
.progedys-blog .progedys-hero__image,
.progedys-article .progedys-hero__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}
.progedys-blog .progedys-hero::after,
.progedys-article .progedys-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:1;
}
.progedys-blog .progedys-hero__content,
.progedys-article .progedys-hero__content{
    position:relative;
    z-index:2;
}
/* quality-style.css force h1–h6 en #121212 — illisible sur le bandeau photo. */
.progedys-blog .progedys-hero h1{font-size:58px;font-weight:700;margin-bottom:25px;line-height:1.2;color:#fff}
.progedys-blog .progedys-hero p{max-width:900px;margin:auto;font-size:20px;line-height:1.9;color:#e5e5e5}
.progedys-blog .progedys-categories{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;padding:60px 20px 10px}
.progedys-blog .progedys-categories a{background:#fff;border:1px solid #ddd;padding:12px 24px;border-radius:50px;font-size:14px;font-weight:600;color:#333;text-decoration:none;display:inline-block;transition:0.3s}
.progedys-blog .progedys-categories a:hover{background:var(--pg-signal-600);color:#fff;border-color:var(--pg-signal-600)}
.progedys-blog .progedys-grid{max-width:1300px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:35px;padding:50px 20px 100px;align-items:stretch}
.progedys-blog .progedys-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.07);transition:0.35s;border:1px solid #eee}
.progedys-blog .progedys-card:hover{transform:translateY(-8px)}
.progedys-blog .progedys-card img{display:block;width:100%;height:240px;object-fit:cover;flex-shrink:0}
.progedys-blog .progedys-content{display:flex;flex-direction:column;flex:1;padding:30px}
.progedys-blog .progedys-category{display:inline-block;align-self:flex-start;background:var(--pg-signal-600);color:#fff;font-size:12px;padding:8px 16px;border-radius:50px;margin-bottom:18px;font-weight:700;letter-spacing:.5px}
.progedys-blog .progedys-content h2{font-size:30px;line-height:1.35;margin-bottom:18px;color:#333;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.progedys-blog .progedys-content p{color:#666;line-height:1.8;margin-bottom:25px;font-size:15px;flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.progedys-blog .progedys-content a{text-decoration:none;color:var(--pg-signal-600);font-weight:700;font-size:15px;margin-top:auto}
.progedys-blog .progedys-cta{background:#333;text-align:center;color:#fff;padding:100px 20px}
.progedys-blog .progedys-cta h2{font-size:42px;margin-bottom:25px;color:#fff}
.progedys-blog .progedys-cta p{max-width:850px;margin:auto;color:#ddd;line-height:1.9;margin-bottom:40px}
.progedys-blog .progedys-btn{background:var(--pg-signal-600);color:#fff;padding:18px 35px;border-radius:50px;text-decoration:none;font-weight:700;display:inline-block;transition:0.3s}
.progedys-blog .progedys-btn:hover{background:var(--pg-signal-700)}
@media (max-width:768px){
    .progedys-blog .progedys-hero h1{font-size:38px}
    .progedys-blog .progedys-hero p{font-size:17px}
    .progedys-blog .progedys-content h2{font-size:24px}
    /* Audit responsive (phase finale) : minmax(360px,1fr) impose une largeur de colonne
       superieure a la largeur de l'ecran des 360px (donc systematiquement en dessous, y compris
       375px). html/body ont overflow-x:hidden site-wide, ca ne cree pas de barre de defilement
       visible mais ca coupe silencieusement le bord droit de chaque carte - trouve en comparant
       la largeur reelle de .progedys-card (360px) a la largeur de son conteneur (246px a 320px
       de large). 1 colonne pleine largeur en dessous de 768px : plus de minimum a respecter. */
    .progedys-blog .progedys-grid{grid-template-columns:1fr}
}

.progedys-article{background:#f5f5f5;font-family:Arial,sans-serif;padding-bottom:100px}
.progedys-article .progedys-cta h3{color:#fff}
.progedys-article .progedys-badge{display:inline-block;background:var(--pg-signal-600);padding:10px 18px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:25px;letter-spacing:.5px;color:#fff}
.progedys-article .progedys-hero h1{font-size:60px;line-height:1.2;max-width:1000px;margin:auto;margin-bottom:30px;font-weight:700;color:#fff}
.progedys-article .progedys-hero p{max-width:850px;margin:auto;font-size:20px;line-height:1.9;color:#e5e5e5}
.progedys-article .progedys-content{max-width:950px;margin:auto;background:#fff;margin-top:-80px;position:relative;padding:70px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.progedys-article .progedys-content h2{font-size:38px;margin-top:50px;margin-bottom:20px;color:#333;line-height:1.3}
.progedys-article .progedys-content p{font-size:18px;line-height:1.9;color:#555;margin-bottom:25px}
.progedys-article .progedys-content ul{padding-left:25px;line-height:2;font-size:17px;color:#555}
.progedys-article .progedys-content li{margin-bottom:10px}
.progedys-article .progedys-cta{margin-top:70px;background:#333;padding:55px;border-radius:20px;text-align:center;color:#fff}
.progedys-article .progedys-cta h3{font-size:36px;margin-bottom:20px}
.progedys-article .progedys-cta p{color:#ddd;margin-bottom:35px;line-height:1.8}
.progedys-article .progedys-btn{display:inline-block;background:var(--pg-signal-600);color:#fff;padding:18px 35px;border-radius:50px;text-decoration:none;font-weight:700;transition:0.3s}
.progedys-article .progedys-btn:hover{background:var(--pg-signal-700)}
@media (max-width:768px){
    .progedys-article .progedys-hero h1{font-size:38px}
    .progedys-article .progedys-hero p{font-size:17px}
    .progedys-article .progedys-content{padding:35px 25px}
    .progedys-article .progedys-content h2{font-size:28px}
    .progedys-article .progedys-content p{font-size:17px}
}

/* Harmonisation UI/UX : plusieurs pages WP migrees historiques (maintenance, hebergement,
   reseau-telecom, developpement) presentaient leurs listes de fonctionnalites en texte separe par
   des tirets "–" et des <br>, plutot qu'en vraie liste HTML - ni semantique (un lecteur d'ecran ne
   l'annonce pas comme une liste), ni coherent avec les listes deja "propres" ailleurs sur le site
   (ex. conseils/audit.html.twig). Meme habillage visuel que ces listes deja existantes (couleur
   #03425e, puces, interligne 1.8) pour rester coherent avec le design existant plutot que d'en
   inventer un nouveau. */
.wp-block-list.progedys-feature-list {
    color: #03425e;
    list-style-type: disc;
    padding-left: 25px;
    line-height: 1.8;
}

/* Lot 1 (2026-09) : le hero carousel WordPress d'origine (#slider-carousel/.home-hero/
   .slider-caption/.slide-btn-sm) est supprime ici - confirme sans aucune reference dans
   templates/ (grep exhaustif "slider-carousel", "home-hero", "slider-caption", "slide-btn-sm" :
   0 resultat). L'accueil utilise .hc-hero (homepage-classic.css) depuis la refonte "Reseau de
   confiance" du 2026-09-10 ; ce bloc etait devenu du poids mort. */

/* Lot 1 : chiffres-cles/portfolio-logos/references de l'ancien accueil (#section-portfolio,
   .portfolio .partner-badge*, .funfact-title/.funfact .description, .references-section) retires
   ici - confirmes sans aucune reference dans templates/ (grep exhaustif, 0 resultat chacun).
   Remplaces respectivement par .hc-stats-grid/.hc-num et .hc-trust-row (homepage-classic.css)
   et .hc-ref-item/.hc-chip pour les references. */
.site-title-heading {
    font-size: 1.85rem;
    margin: auto;
}

/* Audit UX/UI accueil (2026-08-06, suite score 77 -> objectif superieur) */

/* I5 : "Conseils" garde son href="#" (focus clavier + :focus-within necessaires, voir app.js pour
   la neutralisation du saut de scroll au clic) mais ne doit plus etre visuellement indiscernable
   des 7 vrais liens du menu - pas de changement de couleur au survol/focus (contrairement aux
   vrais liens, regle de base .navbar-custom .navbar-nav>li>a:hover plus haut dans ce fichier) et
   curseur par defaut plutot que le curseur "main" des liens. Ne touche pas a l'etat .active
   (utile : indique la section courante, independant de la confusion clic/pas-clic). */
.navbar-custom .navbar-nav > li > a.nav-parent-label {
    cursor: default;
}
.navbar-custom .navbar-nav > li > a.nav-parent-label:hover,
.navbar-custom .navbar-nav > li > a.nav-parent-label:focus-visible {
    color: #121213;
}

/* Deja propose dans l'audit initial (section "Nouvelle proposition"), jamais implemente jusqu'ici :
   Contact restyle en bouton plein pour se distinguer des 7 liens informationnels qui precedent.
   Signale "pas bien aligne" (2026-08-06) : le padding vertical 10px (contre 20px sur les 7 autres
   liens, theme d'origine) rendait ce lien plus court que ses freres - tous partagent le meme top
   (flex, meme ligne) mais Contact s'arretait 20px plus tot en bas, flottant en haut de la barre.
   Meme padding vertical que les autres liens, uniquement le horizontal change pour la forme pilule.
   Lot 1 : fond/texte alignes sur --pg-signal-600 + blanc (meme paire que .hc-btn-primary/
   .footer-btn) au lieu de #ffb347 + #03425e - un seul bouton "plein" dans tout le site. */
.navbar5.navbar-custom .navbar-nav > li.menu-item-cta {
    margin-left: 8px;
}
.navbar5.navbar-custom .navbar-nav > li.menu-item-cta > a {
    background: var(--pg-signal-600);
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    margin-top: 10px;
}
.navbar5.navbar-custom .navbar-nav > li.menu-item-cta > a:hover,
.navbar5.navbar-custom .navbar-nav > li.menu-item-cta > a:focus-visible {
    background: var(--pg-signal-700);
    color: #fff;
}
.navbar5.navbar-custom .navbar-nav > li.menu-item-cta > a:focus-visible {
    outline: 2px solid var(--pg-navy-900);
    outline-offset: 2px;
}

/* Lot 1 : cartes "Nos expertises"/logos partenaires/icone chiffres-cles de l'ancien accueil
   (.service .post*, .service-4 .post .post-thumbnail*, .home-icon.funfact-icon) retirees ici -
   confirmees sans aucune reference dans templates/ (grep exhaustif, 0 resultat). .home-icon (la
   classe de base, sans ces variantes) reste : utilisee par partials/home_icon.html.twig. */
.home-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Telephone en-tete (suite Conversion, 2026-08-06) : .navbar-header .row est deja un flex
   Bootstrap (verifie en direct - le float:left d'origine sur .site-title, quality-style.css:994,
   est sans effet sur un enfant flex). space-between suffit donc a placer le telephone a droite
   sans reconstruire la mise en page existante. row-gap plutot que margin : evite un espacement
   double si le retour a la ligne se produit (site-title + telephone empiles sur mobile). */
.navbar-header .row {
    justify-content: space-between;
    align-items: center;
    row-gap: 6px;
}
/* Bootstrap force width:100% sur tout enfant direct de .row sans classe .col-* (regle generique
   .row > *, verifiee en direct via document.styleSheets) - site-title et header-contact
   revendiquaient chacun 100% de la largeur, se repoussant donc chacun sur sa propre ligne malgre
   le space-between ci-dessus. */
.navbar-header .row > .site-title,
.navbar-header .row > .header-contact {
    width: auto;
    max-width: 100%;
    flex-shrink: 1;
}
.header-contact {
    flex: 0 0 auto;
    padding: 10px;
}
/* Lot 1 : var(--pg-signal-500) (texte/icone sur fond sombre, 4,6 pour 1 verifie sur le marine de
   la charte) remplace #ffb347 - meme famille que --pg-signal-600 utilise ailleurs, un seul orange. */
.header-contact a {
    color: var(--pg-signal-500);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    white-space: nowrap;
}
.header-contact a:hover,
.header-contact a:focus-visible {
    text-decoration: underline;
}
@media (max-width: 480px) {
    .navbar-header .row {
        justify-content: center;
    }
    .header-contact {
        text-align: center;
        padding-top: 0;
    }
}

/* Unification couleur des paragraphes, site entier (2026-08-06) : demande explicite - le texte
   courant melangeait #6a6a6a (couleur par defaut, quality-style.css:86 `body{color:#6a6a6a}`,
   herite par tout element sans regle plus specifique), #03425e (168 occurrences inline dans 24
   templates) et la classe preset Gutenberg has-vivid-cyan-blue-color. Uniformise vers #121212,
   deja la couleur des titres sur ce site (coherence avec l'existant plutot qu'un nouveau noir).
   NE TOUCHE PAS : les titres orange/blanc (deja sur leur propre regle, plus specifique que body -
   inchanges par construction), les 2 boutons du footer (fond #ffb347 + texte #03425e, exclus du
   remplacement en masse cote templates) et les 7 usages de has-white-color (texte hero sur photo,
   badges/boutons sur fond orange - verifie fichier par fichier avant ce correctif, aucun n'est un
   paragraphe sur fond blanc). */
body {
    color: #121212;
}
.has-vivid-cyan-blue-color {
    color: #121212 !important;
}

/* Audit site complet (2026-08-06) : classe generique reutilisee sur toutes les listes de 8+ items
   reperees sur le site (28 sur reseau_telecom/communication et son doublon pillar/telephonie_ip_
   entreprise, 16 sur developpement/offres_web, 9 sur conseils/audit et reseau_telecom/ingenierie_
   creation, 8 sur developpement/offres_metier) - initialement nommee pour la page telephonie,
   generalisee pour ne pas dupliquer la meme regle 6 fois. Multi-colonnes CSS pur : aucun texte ni
   ordre des items modifie, seul l'affichage passe d'un mur de puces vertical a une grille compacte. */
.feature-list-grid {
    column-count: 2;
    column-gap: 36px;
    margin: 20px 0;
}
.feature-list-grid li {
    break-inside: avoid;
    padding: 3px 0;
}
@media (min-width: 768px) {
    .feature-list-grid { column-count: 3; }
}
@media (max-width: 575.98px) {
    .feature-list-grid { column-count: 1; }
}

/* Audit site complet (2026-08-06) : 18 images de contenu (hors bandeaux hero) trouvees a >=700px
   de large sans redimensionnement sur 12 pages (captures d'ecran Outlook, bannieres logiciel,
   photos de facades, schemas reseau...) - jusqu'a 2560px de large en natif. Plafond generique
   plutot que 12 fichiers a la main : s'applique automatiquement a toute image de contenu non deja
   redimensionnee (:not([style*="width"]) exclut les images deja traitees au cas par cas, ex.
   reseau_telecom/communication.html.twig) et laisse intactes les images de fond des heros
   (wp-block-cover__image-background, dimensionnees par le cover lui-meme, pas par leur largeur
   naturelle). */
.post-content img:not([style*="width"]):not(.wp-block-cover__image-background) {
    max-width: min(100%, 700px);
    height: auto;
    vertical-align: middle;
}
/* Evite le décalage / ligne fantôme sous les images en grille ou colonnes. */
.hc-page :is(.hc-asym-media, .hc-split, .hc-flow-media, .hc-page-hero-visual, .hc-corp-hero-visual, .hc-corp-split-media, .hc-collage-img, .hc-immersive, .wp-block-image, figure) img {
    display: block;
}
/* Cards blog : annule height:auto ci-dessus pour garder des images uniformes. */
.post-content .progedys-blog .progedys-card > img {
    max-width: 100%;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

/* Audit UX passe 2 (2026-08-06) : sur les pages pillar (jusqu'a 8 sections H2 consecutives, 0
   image) et local_seo, chaque transition - fin de paragraphe, nouveau H2 - avait exactement le
   meme espacement (25px, regle du theme h1,h2,h3,h4,h5{margin:0 0 25px}, verifie en direct :
   aucune des deux categories de transition n'etait differenciee). Plus de marge + liseret avant
   un H2 qu'entre deux paragraphes : aide l'oeil a reperer un changement de sujet sans ajouter le
   moindre element visuel nouveau. Les marges CSS adjacentes se fusionnent (la plus grande gagne),
   donc ceci remplace le 25px existant plutot que s'y ajouter.
   Enfant direct uniquement (> et non descendant) : exclut le H2 du bandeau hero (wp-block-cover,
   pages hub/leaf) qui est imbrique plus profond dans .post-content - un liseret gris sur fond
   photo aurait ete hors-sujet, ce H2-la a deja son propre traitement (fond sombre, texte blanc). */
.post-content > h2,
.post-content .studio-page-body > h2 {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid #e5e5e5;
}

/* ========== Page Contact (refonte 2026-08-13) ========== */
#section-block.contact-page {
    background: #fff;
    padding-bottom: 56px;
}
.contact-page__title {
    margin: 0 0 20px;
    color: #121212;
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
}
/* Bandeau photo aligné sur le cover « À propos » (ratio ~1200x400) */
.contact-page .contact-cover.wp-block-cover {
    min-height: 280px;
    margin: 0 0 32px;
    border-radius: 0;
}
.contact-page .contact-cover .wp-block-cover__image-background {
    object-fit: cover;
    object-position: 50% 25%;
}
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 32px 40px;
    align-items: start;
}
.contact-main {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 28px 28px 32px;
}
.contact-section-title {
    margin: 0 0 22px;
    color: #121212;
    font-size: 1.35rem;
    font-weight: 700;
}
.contact-alert {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.45;
}
.contact-alert--success {
    background: #e8f6ee;
    border: 1px solid #b7e0c5;
    color: #0f5132;
}
.contact-alert--error {
    background: #fdecea;
    border: 1px solid #f1c0bc;
    color: #842029;
}
.contact-form__row {
    margin-bottom: 18px;
}
.contact-form__label {
    display: block;
    margin-bottom: 6px;
    color: #121212;
    font-size: 0.92rem;
    font-weight: 600;
}
.contact-form__optional {
    font-weight: 400;
    color: #666;
}
.contact-form__input,
.contact-form__textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 11px 14px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    background: #fff;
    color: #121212;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form__textarea {
    min-height: 140px;
    resize: vertical;
}
.contact-form__input:hover,
.contact-form__textarea:hover {
    border-color: #b0b0b0;
}
.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;
    border-color: var(--pg-signal-600);
    box-shadow: 0 0 0 3px rgba(168, 82, 0, 0.18);
}
.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Lot 1 : .contact-form__submit retire - confirme sans aucune reference dans templates/ (le
   formulaire de contact reel utilise .hc-btn-primary, voir contact/index.html.twig). */
.contact-aside {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 28px 24px;
    position: sticky;
    top: 24px;
}
.contact-aside__title {
    margin: 0 0 16px;
    color: #121212;
    font-size: 1.2rem;
    font-weight: 700;
}
.contact-aside__phone {
    display: inline-block;
    margin: 0 0 6px;
    color: var(--pg-signal-600);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.contact-aside__phone:hover,
.contact-aside__phone:focus-visible {
    text-decoration: underline;
}
.contact-aside__hint {
    margin: 0 0 24px;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
}
.contact-aside__block {
    margin-bottom: 0;
    padding-top: 18px;
    border-top: 1px solid #eee;
}
.contact-aside__label {
    margin: 0 0 6px;
    color: #121212;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.contact-aside__text {
    margin: 0;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.55;
}
@media (max-width: 991.98px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .contact-aside {
        position: static;
        order: -1;
    }
    .contact-page .contact-cover.wp-block-cover {
        min-height: 200px;
    }
}
@media (max-width: 575.98px) {
    .contact-main,
    .contact-aside {
        padding: 22px 18px;
        border-radius: 10px;
    }
    .contact-aside__phone {
        font-size: 1.35rem;
    }
}

/* Pages legales (mentions, confidentialite) */
.legal-page {
    color: #212529;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}
.legal-page h1 {
    color: #03425e;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.legal-page .lead {
    color: #495057;
    font-size: 1.1rem;
}
.legal-page h2 {
    color: #03425e;
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(3, 66, 94, 0.2);
}
.legal-page p,
.legal-page li {
    line-height: 1.7;
}
.legal-page ul {
    padding-left: 1.25rem;
}
.legal-page dl {
    margin-bottom: 0;
}
.legal-page dt {
    font-weight: 600;
    margin-top: 0.75rem;
}
.legal-page dd {
    margin-left: 0;
}
.legal-page a {
    color: var(--pg-signal-600);
}
.legal-page a:hover {
    color: #03425e;
}
.legal-page__updated {
    font-size: 0.95rem;
}
.legal-toc {
    background: #f8f9fa;
    border-left: 4px solid var(--pg-signal-600);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 6px 6px 0;
}
.legal-toc ol {
    margin-bottom: 0;
    padding-left: 1.25rem;
}
.legal-toc a {
    color: #03425e;
    text-decoration: none;
}
.legal-toc a:hover {
    text-decoration: underline;
    color: var(--pg-signal-600);
}

/* Footer — charte PROGEDYS (#03425e / #ffb347 sur fond sombre theme) */
.site-footer {
    background-color: #333333;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer .footer-inner {
    padding: 2.75rem 15px 1.75rem;
}
.footer-grid {
    display: grid;
    gap: 2rem 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        align-items: start;
    }
}
.footer-brand {
    margin: 0 0 0.85rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}
/* Version claire + fond transparent : lisible sur footer navy. */
.footer-logo {
    display: block;
    height: 50px;
    width: auto;
    max-width: 210px;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    object-fit: contain;
}
.footer-lead {
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 34rem;
}
.footer-territory {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-territory-text {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 28rem;
}
.footer-territory-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
}
.footer-territory-links a {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}
.footer-territory-links a:hover,
.footer-territory-links a:focus-visible {
    color: #fff;
    border-color: var(--pg-signal-500, #ffb347);
    background: rgba(255, 179, 71, 0.14);
}
.footer-heading {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pg-signal-500);
}
.footer-address {
    margin: 0 0 0.65rem;
    color: rgba(255, 255, 255, 0.82);
}
.footer-phone {
    display: inline-block;
    margin-bottom: 0.45rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pg-signal-500);
    text-decoration: none;
}
.footer-phone:hover,
.footer-phone:focus-visible {
    color: #fff;
    text-decoration: underline;
}
.footer-text-link {
    color: var(--pg-signal-500);
    font-weight: 600;
    text-decoration: none;
}
.footer-text-link:hover,
.footer-text-link:focus-visible {
    color: #fff;
    text-decoration: underline;
}
.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-nav li + li {
    margin-top: 0.45rem;
}
.footer-nav a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-weight: 600;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--pg-signal-500);
}
.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Lot 1 : meme paire fond/texte que .hc-btn-primary (var(--pg-signal-600) + blanc, 5,32 pour 1)
   au lieu du fond clair #ffb347 + texte marine propre a ce bouton - un seul bouton "plein"
   dans tout le site desormais, navbar/footer/CTA compris. */
.footer-btn {
    display: inline-block;
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    background: var(--pg-signal-600);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.3;
}
.footer-btn:hover,
.footer-btn:focus-visible {
    background: var(--pg-signal-700);
    color: #fff;
    text-decoration: none;
}
.footer-btn--ghost {
    background: transparent;
    color: var(--pg-signal-500);
    border: 1px solid rgba(0, 168, 201, 0.55);
}
.footer-btn--ghost:hover,
.footer-btn--ghost:focus-visible {
    color: #fff;
    border-color: #fff;
    filter: none;
}
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
}
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}
.footer-legal a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--pg-signal-500);
}
@media (max-width: 575.98px) {
    .site-footer .footer-inner {
        padding-top: 2.25rem;
    }
    .footer-actions {
        flex-direction: column;
    }
    .footer-btn {
        text-align: center;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =====================================================================
   REFONTE UX/UI 2026 — identité visuelle "Réseau de confiance"
   Approuvée sur design-preview/ (GO INTEGRATION). Ce bloc est une couche
   additive : il ne touche a aucune regle d'accessibilite/contraste deja
   verifiee plus haut dans ce fichier (contrastes, focus-visible, aria),
   uniquement typographie, rythme, profondeur et micro-interactions.
   ===================================================================== */
/* Auto-hebergee (1 seul fichier, poids 700 uniquement) plutot que Google Fonts : la CSP du site
   (SecurityHeadersListener) n'autorise que style-src 'self' - charger fonts.googleapis.com aurait
   necessite d'elargir cette policy deja durcie. Un seul poids suffit : reserve aux plus gros titres
   (h1/hero/widget-title) pour une signature typographique distincte, le reste du site garde la
   police systeme (deja rapide, deja lisible, zero requete). */
@font-face {
    font-family: 'PG Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/wp-content/uploads/progedys-recette/assets/fonts/space-grotesk-700.woff2') format('woff2');
}

:root {
    --pg-font-display: 'PG Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --pg-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
    /* Lot 0 (refonte 2026-09-11) : source unique de la couleur de marque, reprise du
       plan directeur valide. Les tokens marine/orange de homepage-classic.css pointent
       desormais vers ceux-ci au lieu de redefinir leurs propres valeurs. */
    --pg-navy-900: #0b2540;
    --pg-navy-800: #14315a;
    --pg-navy-700: #173b5e;
    /* Charte 2026 (logo bleu / cyan) : accent = cyan PROGEDYS. --pg-signal-* reste le nom
       historique des tokens d'accent (liens, focus, boutons secondaires) pour ne pas casser
       les feuilles existantes. */
    --hc-brand-cyan: #00a8c9;
    --hc-brand-cyan-soft: #5ec4dc;
    --pg-signal-500: var(--hc-brand-cyan-soft);
    /* Accent d'interface (liens, petits libellés, boutons pleins à texte blanc) : version assombrie du cyan de marque
       pour atteindre 4,5:1 (WCAG AA) sur fond clair. Le cyan de marque --hc-brand-cyan reste réservé au décoratif. */
    --pg-signal-600: #056a98;
    --pg-signal-700: #04557d;
    /* ---- Lot 1 : couche semantique complete (roles demandes par la charte) ---- */
    --pg-white: #ffffff;
    --pg-surface: #ffffff;
    --pg-surface-alt: #f7f8fb;
    --pg-text-primary: #0b1220;
    --pg-text-secondary: #4b5568;
    /* #5c6a7d : 5,4:1 sur blanc (l'ancien #8792a3 échouait sur les petits textes). */
    --pg-text-muted: #5c6a7d;
    --pg-border: #e2e6ee;
    --pg-border-soft: #edf0f6;
    --pg-focus: var(--pg-signal-600);
    --pg-success: #1fae6b;
    --pg-warning: #9a6a00;
    --pg-error: #c0392b;
    /* ---- Lot 1 : echelle typographique unique (clamp plafonne - jamais "geant" sur grand ecran).
       Remplace les ~15 clamp() ad hoc disperses dans homepage-classic.css (ecarts de 1,9rem a
       4,2rem sans echelle commune). Bornes choisies pour un rendu ESN B2B, pas landing SaaS :
       le plus gros titre du site (hero) plafonne a 44px, pas 67px. */
    --text-display: clamp(2rem, 1.55rem + 1.9vw, 2.75rem);
    --text-h1: clamp(1.85rem, 1.55rem + 1.3vw, 2.5rem);
    --text-h2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
    --text-h3: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
    --text-h4: 1.05rem;
    --text-body-lg: 1.125rem;
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-eyebrow: 0.8rem;
    --text-meta: 0.75rem;
    /* ---- Lot 1 : echelle de spacing (base 8px) - jusqu'ici aucune variable n'existait, chaque
       section/carte portait sa propre valeur px isolee (19 valeurs differentes recensees). ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    /* ---- Lot 1 : container unique. --hc-container (1240px) etait deja la seule largeur du
       nouveau systeme ; formalisee ici comme source pour tout futur composant hors .hc-page. ---- */
    --pg-container: 1240px;
    /* Gouttière gauche/droite partagée : logo navbar aligné sur le texte hero accueil. */
    --pg-page-gutter: clamp(28px, 5vw, 80px);
    --pg-shadow-sm: 0 2px 10px rgba(4, 40, 63, .07);
    --pg-shadow-md: 0 14px 32px rgba(4, 40, 63, .12);
    --pg-shadow-lg: 0 28px 60px rgba(4, 40, 63, .18);
    --pg-radius: 16px;
}

body {
    font-family: var(--pg-font-body);
}
/* Signature typographique reservee aux titres les plus visibles (h1 de page, gros chiffres,
   nom de marque) plutot qu'a tous les niveaux de titre - la police auto-hebergee n'a qu'un seul
   poids (700), l'appliquer aussi aux h3-h6/entry-title plus legers n'aurait rien change visuellement
   tout en alourdissant inutilement la portee du selecteur sur ~120 gabarits differents. */
h1, .widget-title, .site-title-heading,
.footer-brand {
    font-family: var(--pg-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---- En-tete : la barre de navigation blanche devient collante avec
   un léger flou/ombre au défilement, pour rester repérable en scrollant
   les longues pages pillar/local_seo sans reproduire tout le header. ---- */
.navbar5.navbar-custom {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: var(--pg-shadow-sm);
    transition: box-shadow .2s ease;
}

/* ---- Boutons : forme pilule deja en place, on ajoute juste une
   sensation de profondeur/reactivite au survol (translation + ombre)
   sur tous les boutons pleins du site, sans changer une seule couleur. ---- */
@media (prefers-reduced-motion: no-preference) {
    .wp-block-button__link,
    .footer-btn {
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .wp-block-button__link:hover,
    .footer-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--pg-shadow-md);
    }
}

/* Lot 1 : micro-interactions hover de l'ancien accueil (.service .post, .reference-card,
   .partner-badge, .funfact-inner) retirees ici - confirmees sans aucune reference dans templates/
   (grep exhaustif, 0 resultat chacune). */

/* ---- Lisibilite du texte long-form (pages pillar / local_seo / conseils,
   ex. templates/pillar/*.html.twig) : contenu tres dense signale en
   validation du prototype ("endroits ou le texte est tres encombre").
   Largeur de lecture confortable + respiration entre paragraphes/listes,
   sans toucher au contenu ni aux couleurs deja auditees. ---- */
.post-content {
    max-width: 780px;
}
.post-content p {
    line-height: 1.85;
    margin-bottom: 1.15em;
}
.post-content ul,
.post-content ol {
    line-height: 1.85;
    margin-bottom: 1.5em;
}
.post-content li {
    margin-bottom: .5em;
}
.post-content li:last-child {
    margin-bottom: 0;
}
/* Les pages avec bandeau photo (wp-block-cover) et les grilles de blocs
   (columns/media-text) restent pleine largeur : seul le texte courant
   (paragraphes/listes en colonne unique) est resserre ci-dessus. */
.post-content > .wp-block-cover,
.post-content > .wp-block-columns,
.post-content .feature-list-grid,
.post-content .wp-block-media-text,
.post-content .cta-final {
    max-width: none;
}
@media (max-width: 767.98px) {
    .post-content {
        max-width: 100%;
    }
}


/* =====================================================================
   REFONTE UX/UI 2026 — PHASE 2 (audit rendu reel 2026-09-08)
   Le premier passage (bloc ci-dessus) ne restylait que des details
   (typo/ombres/hover) en gardant l'ossature visuelle WordPress d'origine
   (bandeau sombre + nav blanche plate, cartes en ligne icone+texte,
   section chiffres ordinaire) - constat en ouvrant reellement le site :
   ca ne ressemble pas au prototype design-preview/ valide. Ce bloc
   reprend fidelement les composants du prototype (header avec badge de
   marque, bandeau nav collant, cartes icone-en-haut, section chiffres
   sombre contrastee) SANS toucher au HTML Twig genere par le Studio
   (studio_editable/studio-sortable), uniquement la mise en forme visuelle
   des memes elements/donnees.
   ===================================================================== */

/* --- Garde-fou icones (audit "icônes énormes") : toute icone doit être
   bornée par son conteneur, jamais hériter d'une taille de titre ou
   remplir sa boîte par défaut - regle générique defensive en plus des
   tailles explicites deja posees par composant (.home-icon etc.). ---- */
svg:not([width]) {
    max-width: 100%;
}

/* --- Topbar (ex .navbar-header) : redevient un bandeau fin (coordonnees
   seules), le nom de marque "PROGEDYS" est deplace dans le badge de la
   barre de nav (.brand-badge ci-dessous). Le <p> d'origine reste dans le
   DOM avant le H1 de page (astuce d'ordre de titres deja en place) mais
   visuellement masque - technique "visually-hidden" standard, toujours
   annonce par un lecteur d'ecran, jamais affiche a l'ecran. ---- */
/* Topbar alignée sur la navbar pleine largeur. */
@media (min-width: 1200px) {
    .navbar-header.index5 > .container {
        max-width: none;
        width: 100%;
        padding-left: var(--pg-page-gutter);
        padding-right: var(--pg-page-gutter);
    }
}
.navbar-header.index5 {
    background: var(--pg-navy-900);
    padding: 10px 0;
}
.site-title-heading--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.navbar-header .site-description {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: .8rem;
}
.navbar-header .header-contact a {
    font-family: var(--pg-font-display);
    font-size: .95rem;
}

/* --- Badge de marque (nouveau, reproduit .brand du prototype) : carre
   degrade + nom + accroche courte, place dans la barre de nav collante
   plutot que dans le bandeau sombre - c'est le repere de marque principal
   du prototype, absent du premier passage. ---- */
/* justify-content:space-between retire (audit rendu reel 2026-09-08) : convenait a 2 enfants
   (marque + toggler) mais desormais #custom-collapse est aussi un enfant direct (fusion des
   2 .container-fluid en un seul, voir navbar.html.twig) - avec 3 enfants, space-between les
   ecartait de facon egale au lieu de laisser la nav prendre l'espace restant. Le toggler est
   pousse a droite via margin-left:auto UNIQUEMENT quand la nav est repliee (mobile/tablette) -
   des que #custom-collapse est visible (xl+), sa propre largeur de contenu prend le relai. */
.navbar-top-row {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 8px;
}
@media (max-width: 1199.98px) {
    /* Le CSS Bootstrap purgé ne conserve pas .collapse.show (classe posée en JS). */
    #custom-collapse.navbar-collapse.show {
        display: block !important;
    }
}
@media (min-width: 1200px) {
    /* Composition dense : logo gauche (aligné hero) + menu dans l’espace restant + Contact à droite. */
    .navbar5.navbar-custom,
    .navbar-custom {
        min-height: 0;
        padding: 0;
    }
    .navbar-header.index5 {
        padding: 6px 0;
    }
    .navbar-top-row {
        position: relative;
        gap: clamp(16px, 2vw, 28px);
        padding-left: var(--pg-page-gutter);
        padding-right: var(--pg-page-gutter);
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .navbar-top-row .brand-badge {
        position: relative;
        z-index: 2;
        margin-right: 0;
        flex: 0 0 auto;
    }
    .navbar-top-row #custom-collapse.navbar-collapse {
        position: static;
        left: auto;
        transform: none;
        margin-left: 0;
        flex: 1 1 auto;
        display: flex !important;
        justify-content: stretch;
        min-width: 0;
    }
    .navbar-top-row .navbar-nav {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        /* Réserve la place de Contact pour un vrai centrage entre logo et CTA. */
        padding-right: 100px;
        margin: 0 !important;
        float: none !important;
        box-sizing: border-box;
    }
    /* Contact reste à droite ; les autres liens se centrent dans l’espace restant. */
    .navbar5.navbar-custom .navbar-top-row .navbar-nav > li.menu-item-cta {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
    }
    .navbar5.navbar-custom .navbar-top-row .navbar-nav > li.menu-item-cta > a {
        margin-top: 0;
    }
}
/* Navbar pleine largeur + gouttière = texte hero (écrase theme 15px / 1170px). */
@media (min-width: 1200px) {
    .navbar-custom .container-fluid.navbar-top-row,
    .navbar-custom .container-fluid {
        max-width: none;
        width: 100%;
        padding-left: var(--pg-page-gutter);
        padding-right: var(--pg-page-gutter);
    }
}
/* Le badge de marque prend ~191px (badge+gap) qui n'existaient pas avant son ajout - resserre
   encore le seuil bas de la tranche xl (1200-1439px) pour eviter que "Contact" (dernier lien)
   retombe seul sur une 2e ligne (mesure en direct : 16px de manque a 1440px avant ce correctif). */
@media (min-width: 1200px) and (max-width: 1520px) {
    .navbar5.navbar-custom .navbar-nav > li {
        margin: 0 1px;
    }
    .navbar5.navbar-custom .navbar-nav > li > a,
    .navbar5.navbar-custom .navbar-nav > li.dropdown > .nav-dropdown-row > a {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 14px;
    }
}
@media (max-width: 1199.98px) {
    .navbar-top-row .navbar-toggler {
        margin-left: auto;
    }
}
.brand-badge {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--ink, #121212);
    border-radius: 12px;
    flex: none;
}
/* Lot 6 (audit clavier) : seul lien de la navbar sans regle :focus-visible dediee -
   tous les autres liens/boutons du site en ont une (voir les nombreuses occurrences
   dans ce fichier), celui-ci retombait sur le contour par defaut du navigateur. */
.brand-badge:focus-visible {
    outline: 2px solid var(--pg-signal-600);
    outline-offset: 3px;
}
.navbar-top-row .brand-logo {
    display: block;
    height: 60px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
}
@media (max-width: 1199.98px) {
    .navbar-top-row .brand-logo {
        height: 52px;
        max-width: 220px;
    }
    .footer-logo {
        height: 44px;
        max-width: 185px;
    }
}
@media (max-width: 1199.98px) {
    .navbar-top-row { padding: 12px 16px; }
}

/* --- Sous-menus : le prototype presente les sous-menus comme des cartes
   flottantes arrondies avec ombre portee, pas le menu deroulant plat
   d'origine (fond blanc carre, bordure fine). Structure/JS inchanges
   (toujours .dropdown-menu, toggle au survol/focus deja en place). ---- */
/* Trait de survol menu : cyan charte (remplace #ff8e30 du theme quality-orange). */
.navbar5.navbar-custom ul li > a:hover::before,
.navbar5.navbar-custom ul li > a:focus-visible::before {
    background: var(--pg-signal-600) !important;
}

/* Theme quality-orange : .navbar5 ul li > a::before dessine un trait au survol.
   Herite aussi sur les liens du sous-menu → trait indesirable ; on le garde uniquement
   sur les entrees de premier niveau (.navbar-nav > li > a). */
.navbar5.navbar-custom .dropdown-menu li > a::before,
.navbar5.navbar-custom .dropdown-menu li > a:hover::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.navbar-custom .dropdown-menu li > a {
    color: #121213 !important;
    border-bottom: none !important;
}
.navbar-custom .dropdown-menu li > a:hover,
.navbar-custom .dropdown-menu li > a:focus-visible {
    color: #121213 !important;
}
@media (min-width: 1200px) {
    .navbar-custom .dropdown-menu {
        border: none;
        border-radius: 14px;
        box-shadow: var(--pg-shadow-lg);
        padding: 8px;
        margin-top: 10px;
        background: #fff;
    }
    .navbar-custom .dropdown-menu li > a {
        border-radius: 8px;
        padding: 10px 14px !important;
        font-weight: 600;
        font-size: 0.9rem;
    }
    .navbar-custom .dropdown-menu li > a:hover,
    .navbar-custom .dropdown-menu li > a:focus-visible {
        background: #eef1f7;
        color: #121213 !important;
    }
    /* Lot 1 : les liens de sous-menu retombaient sur le contour par defaut du navigateur au clavier
       (jamais stylé specifiquement ici) - meme traitement que les liens de premier niveau. */
    .navbar-custom .dropdown-menu li > a:focus-visible {
        outline: 2px solid var(--pg-signal-600);
        outline-offset: -2px;
    }
}


/* Lot 1 : ancienne carte "Nos expertises" en ligne (.service-4 .post*), ancien panneau
   chiffres-cles (.funfact*), ancien bandeau partenaires (.portfolio .section-header,
   .hero-panel-row/-icon/-text, .portfolio--trust, .trust-label/-strip-head/-sub) retires ici -
   confirmes sans aucune reference dans templates/ (grep exhaustif, 0 resultat chacun).
   Remplaces par les equivalents .hc-* (accueil/index.html.twig, homepage-classic.css). */

/* =====================================================================
   REFONTE UX/UI 2026 — PHASE 4 (reproduction fidele du prototype,
   demande explicite 2026-09-08 "reproduit moi la meme chose que ton
   design") : topbar email/adresse/horaires, badge de disponibilite et
   second bouton du hero - les 3 elements du prototype non repris lors
   de l'integration initiale (juges alors comme du contenu fictif),
   desormais ajoutes tels quels sur demande explicite de l'utilisateur.
   ===================================================================== */
.navbar-header .row {
    flex-wrap: wrap;
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.pg-email-copy {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.topbar-email {
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    position: relative;
}
.topbar-email:hover .pg-email-img--topbar img,
.topbar-email:focus-visible .pg-email-img--topbar img {
    opacity: 1;
}
.topbar-email:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .75);
    outline-offset: 3px;
    border-radius: 4px;
}
.pg-email-copy__feedback {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 20;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(7, 26, 58, .96);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.pg-email-copy--contact {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.pg-email-copy--contact .pg-email-copy__feedback {
    background: var(--hc-navy-900, #071a3a);
}
.pg-email-img {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 0;
    flex: none;
}
.pg-email-img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    user-select: none;
}
.pg-email-img--topbar img {
    height: 1.2rem;
    opacity: 0.95;
}
.pg-email-img--contact img {
    height: 1.15rem;
}
.topbar-address {
    color: rgba(255, 255, 255, .88);
    font-size: .82rem;
}
.topbar-hours {
    color: rgba(255, 255, 255, .88);
    font-size: .82rem;
    margin-right: 16px;
}
@media (max-width: 767.98px) {
    /* Ne masquer que l’adresse (si présente) — horaires / mention pro utilisent aussi .topbar-hours. */
    .topbar-address {
        display: none;
    }
    .header-contact {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px 10px;
        line-height: 1.35;
    }
    .topbar-hours {
        margin-right: 0;
        font-size: clamp(0.7rem, 2.8vw, 0.82rem);
    }
    .header-contact a {
        font-size: clamp(0.85rem, 3.2vw, 0.95rem);
    }
}

/* --- Badge "disponibilite" + second CTA du hero (prototype design-preview/index.html,
   .hero-badge / .hero-cta-row) - purement decoratifs, aucune donnee dynamique. ---- */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .82rem;
    color: #dfe6f6;
    margin-bottom: 22px;
}
.hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1fae6b;
    box-shadow: 0 0 0 4px rgba(31, 174, 107, .25);
    flex: none;
}
.hero-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.hero-cta-ghost {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}
.hero-cta-ghost:hover,
.hero-cta-ghost:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* --- Section "Pourquoi PROGEDYS" (prototype design-preview/, .split) : texte + liste de
   verification a gauche, image a droite - section absente du site reel avant reproduction
   fidele demandee le 2026-09-08. ---- */
.section-why {
    padding: 80px 0;
}
.section-why .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.section-why .split > div:first-child > p:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pg-font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2e6bf2;
    margin-bottom: 14px;
}
.section-why .split > div:first-child > p:first-child::before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--pg-signal-600);
    display: inline-block;
    border-radius: 2px;
}
.section-why h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    margin: 0 0 16px;
}
.section-why .lede {
    color: #4b5568;
    font-size: 1.05rem;
    margin: 0 0 24px;
}
.check-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 14px;
}
.check-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .95rem;
    color: #4b5568;
}
.check-list li svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: #1fae6b;
    margin-top: 1px;
}
.btn-outline-navy {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    border-radius: 999px;
    border: 1.5px solid #dfe3ea;
    color: var(--pg-navy-900);
    font-family: var(--pg-font-display);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-outline-navy:hover,
.btn-outline-navy:focus-visible {
    background: var(--pg-navy-900);
    border-color: var(--pg-navy-900);
    color: #fff;
    transform: translateY(-2px);
}
.split-media img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: var(--pg-shadow-lg);
}
@media (max-width: 900px) {
    .section-why .split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .section-why .split-media {
        order: -1;
    }
    .section-why {
        padding: 56px 0;
    }
}

/* --- Footer : bleu-nuit (prototype .site-footer) au lieu du gris fonce d'origine. ---- */
.site-footer {
    background-color: var(--pg-navy-900) !important;
}

.hc-page .hc-faq details {
    border-top: 1px solid var(--pg-border);
    padding: 14px 0;
}
.hc-page .hc-faq details:last-of-type { border-bottom: 1px solid var(--pg-border); }
.hc-page .hc-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--pg-text-primary);
}
.hc-page .hc-faq details p {
    margin: 10px 0 0;
    max-width: 68ch;
    color: var(--pg-text-secondary);
}
.hc-readings { padding: 24px 0 8px; }
.hc-readings--alt,
.hc-readings.hc-corp-section--alt {
    padding: clamp(48px, 7vh, 80px) 0;
}
.hc-page .hc-readings-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.hc-page .hc-readings-list a,
.hc-page .hc-readings p a {
    color: var(--pg-navy-800);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Flèche « À lire » : taille bornée sur toutes les pages (sinon SVG pleine largeur hors accueil). */
.hc-readings-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hc-readings-card-arrow {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}
.hc-readings-card-arrow svg {
    width: 16px;
    height: 16px;
    max-width: 16px;
    color: var(--pg-signal-600, #0aa9e8);
}