/* home.css — page d'accueil InnovaCSE */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #1a1a2e;
    /* Fond de page gris, 10/10/2026 : « les espacement sont blanc, je veux le
       meme gris que les bloc ».
       Les bandes CTA, liens et auteur etaient deja grises, et la section qui
       contient les cartes aussi. Mais l espace ENTRE ces blocs appartient a la
       page : il restait blanc. C etait la que le blanc que le client voyait.
       En donnant a la page le meme gris que les blocs, plus aucun espace ne
       peut rester blanc. */
    background: var(--gris-bloc, #f8f9fb);
    -webkit-font-smoothing: antialiased;
}

/* ── MENU (réutilise stylecontent) ── */
header { background: #1a1a2e; }
nav { max-width: 1200px; margin: 0 auto; padding: 0 2em; display: flex; justify-content: space-between; align-items: center; min-height: 60px; }
nav .logo a { color: #fff; text-decoration: none; font-weight: 700; font-size: 1em; letter-spacing: 1px; }
nav .logo a:hover { color: #f39200; }
.nav-menu { list-style: none; display: flex; margin: 0; padding: 0; align-items: center; gap: 0; }
.nav-menu > li > a { color: rgba(255,255,255,0.85); text-decoration: none; padding: 0.5em 0.5em; font-size: 0.82em; display: block; border-radius: 6px; transition: color 0.2s, background 0.2s; }
.nav-menu > li > a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-cta > a { background: #f39200 !important; color: #fff !important; border-radius: 20px; font-weight: 600; }
.nav-cta > a:hover { background: #d97f00 !important; }
.nav-login > a { border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 20px; color: rgba(255,255,255,0.85) !important; }
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #1a1a2e; list-style: none; padding: 0.5em 0; min-width: 220px; border-top: 2px solid #f39200; border-radius: 0 0 8px 8px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.dropdown-menu li a { padding: 0.6em 1.2em; display: block; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.88em; }
.dropdown-menu li a:hover { color: #f39200; }
.dropdown-divider { margin: 0.4em 0.8em; border: none; border-top: 1px solid rgba(255,255,255,0.15); }
.dropdown:hover .dropdown-menu { display: block; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: 0.3s; }

/* ── UTILITAIRES ── */
.h-badge {
    display: inline-block;
    background: rgba(243,146,0,0.12);
    color: #f39200;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 1.2em;
}

.h-tag {
    display: inline-block;
    background: #f39200;
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 0.8em;
}

.h-tag-dark { background: #1a1a2e; }

/* ── HERO ── */
.h-hero {
    background-color: #1a1a2e;
    background-size: cover;
    background-position: center;
    min-height: 28vh;
    display: flex;
    align-items: center;
    padding: 2em 2em;
    position: relative;
    overflow: hidden;
}

.h-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 40, 0.72);
}

.h-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.h-hero h1 {
    font-size: clamp(1.3em, 2.8vw, 2em);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 0.6em 0;
    letter-spacing: -0.5px;
}

.h-hero p {
    font-size: 1.15em;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin-bottom: 2em;
}

.h-cta-group {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.h-btn-main {
    background: #f39200;
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95em;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    display: inline-block;
}

.h-btn-main:hover { background: #d97f00; transform: translateY(-1px); }

.h-btn-ghost {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    font-size: 0.95em;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: border-color 0.2s, color 0.2s;
}

.h-btn-ghost:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

.h-btn-lg { padding: 18px 44px; font-size: 1.05em; }

.h-link {
    color: #f39200;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    transition: opacity 0.2s;
}

.h-link:hover { opacity: 0.75; }

/* ── PRODUITS ── */
.h-product {
    padding: 3.5em 2em;
    background: #fff;
}

.h-product-alt {
    background: #f8f9fb;
}

/* 1100px -> la largeur de tous les autres blocs (900px).
   Client, 12/10/2026 : « on peut voir que les blocs n ont pas la taille comme
   les autres blocs ». Mesure : .h-product-inner valait 1100px, tous les autres
   blocs passent par .h-content-inner a 900px. Trois pages utilisent la classe. */
.h-product-inner {
    max-width: var(--largeur-contenu);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    align-items: center;
}

.h-product-inner-rev { direction: rtl; }
.h-product-inner-rev > * { direction: ltr; }

.h-product-text h2 {
    font-size: 2.4em;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0.2em 0 0.4em 0;
    letter-spacing: -0.5px;
}

.h-product-sub {
    font-size: 1.05em;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.2em;
    text-align: justify;
}

.h-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 2em 0;
}

.h-checklist li {
    padding: 0.55em 0;
    padding-left: 1.8em;
    position: relative;
    color: #333;
    font-size: 0.95em;
    border-bottom: 1px solid #f0f0f0;
    text-align: justify;
}

.h-checklist li:last-child { border-bottom: none; }

.h-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #f39200;
    font-weight: 700;
}

.h-product-visual img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.h-product-icon-block {
    background: linear-gradient(135deg, #1a1a2e, #2d2b55);
    border-radius: 20px;
    padding: 2em;
    text-align: center;
    color: #fff;
}

.h-product-icon-block i {
    font-size: 3em;
    color: #f39200;
    display: block;
    margin-bottom: 0.4em;
}

.h-product-icon-block p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.h-product-inner-solo {
    max-width: 760px;
    margin: 0 auto;
    display: block;
}

/* ── AVANTAGES ── */
.h-advantages {
    padding: 3.5em 2em;
    background: #fff;
}

.h-advantages-alt {
    background: #f8f9fb;
}

.h-advantages-inner {
    max-width: 900px;
    margin: 0 auto;
}

.h-advantages-inner h2 {
    font-size: 2em;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0.2em 0 0.4em 0;
    letter-spacing: -0.5px;
}

.h-advantages-lead {
    font-size: 1.05em;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.2em;
    max-width: 100%;
    text-align: justify;
}

/* auto-fit et non quatre colonnes fixes : une grille a quatre colonnes avec
   seulement trois enfants laisse le quart de la rangee vide. Constat sur
   logiciel-cse.php, bloc « EIRIA en 3 etapes ». Avec auto-fit la grille
   s ajuste au nombre de cartes et la rangee est toujours remplie. */
.h-advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1em;
    margin-bottom: 1.8em;
}

.h-adv-card {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 14px;
    padding: 1.5em 1.25em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.h-adv-card:hover {
    border-color: #f39200;
    box-shadow: 0 4px 16px rgba(243,146,0,0.1);
}

.h-adv-card i {
    font-size: 1.6em;
    color: #f39200;
}

.h-adv-card strong {
    font-size: 0.95em;
    font-weight: 700;
    color: #1a1a2e;
}

.h-adv-card span {
    font-size: 0.85em;
    color: #777;
    line-height: 1.45;
}

.h-advantages-alt .h-adv-card {
    background: #fff;
}

@media (max-width: 900px) {
    .h-advantages-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
    .h-advantages-grid { grid-template-columns: 1fr; }
}

/* ── VIDÉO ── */
.h-video {
    padding: 5em 2em;
    background: #1a1a2e;
    text-align: center;
}

.h-video-inner {
    max-width: 900px;
    margin: 0 auto;
}

.h-video h2 {
    font-size: 2em;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4em 0;
}

.h-video p {
    color: rgba(255,255,255,0.6);
    margin-bottom: 2em;
    font-size: 1em;
}

.h-video-frame {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.h-video-frame iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ── CONTENU SEO / FAQ ── */
.h-content {
    padding: 3em 2em;
    background: #fff;
}

.h-content-inner {
    max-width: var(--largeur-contenu);
    margin: 0 auto;
}

/* Supprime le 09/10/2026 : .h-content-inner-wide.
   Cinq pages de formation l utilisaient. La regle valait exactement la meme
   chose que .h-content-inner (900px), donc aucun ecart visible, mais deux
   noms pour un seul gabarit : la premiere des deux regles touchee aurait
   diverge sans qu on le voie. Les 12 occurrences sont passeees en
   h-content-inner. */

.h-content-inner p {
    text-align: justify;
}

.h-content h2 {
    font-size: 1.8em;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 1.5em 0;
    text-align: center;
}

/* Accordion FAQ */
.h-faq { margin-bottom: 3em; }

/* 08/10/2026 - le titre de la FAQ n etait centre nulle part. Le centrage
   n existait que pour .h-content h2 (L395) ; .h-faq n avait aucune regle de
   titre, donc le h2 restait aligne a gauche, cale sur le bord de l encart.
   Client signale : « le titre est sur le cote et pas au centre du bloc ».
   Puis : « une interligne en plus en haut du titre pour bien demarquer le
   bloc FAQ ». D ou le margin-top, qui etait a 0. */
.h-faq h2 {
    text-align: center;
    margin: 1em 0 1.4em 0;
}

.h-faq details {
    border-bottom: 1px solid #eee;
}

.h-faq details:first-child { border-top: 1px solid #eee; }

.h-faq summary {
    padding: 1.2em 0;
    font-size: 1em;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.h-faq summary::-webkit-details-marker { display: none; }

.h-faq summary::after {
    content: '+';
    font-size: 1.4em;
    color: #f39200;
    font-weight: 300;
    transition: transform 0.2s;
}

.h-faq details[open] summary::after { transform: rotate(45deg); }

.h-faq details p {
    padding: 0 0 1.2em 0;
    margin: 0;
    color: #555;
    line-height: 1.75;
    font-size: 0.95em;
}

.h-faq details p + p { padding-top: 0; }

.h-faq details a {
    color: #f39200;
    text-decoration: none;
    font-weight: 600;
}

/* Liens SEO */
/* Bloc « A lire aussi » : un seul style pour toutes les pages, fond gris.

   Client, 09/10/2026, quatre demandes successives qu il faut distinguer :
   1. « je veux que tous les blocs A lire aussi soient tous identiques en gris »
   2. « le fond n est pas gris du bloc Aller plus loin » —这句话 portait sur
      l accueil, pas sur les pages ;
   3. « supprime l encadre blanc » ;
   4. « le bloc A lire aussi est toujours en blanc, j ai dit en gris, fais le ».

   Le gris retenu est #eef1f6, et non le #f8fafc des cartes FAQ. #f8fafc est
   si proche du blanc qu a l ecran le bloc paraissait blanc : c est
   exactement ce que le client a signale. La demande portait sur une couleur
   visible, pas sur une nuance.

   Ce bloc est rendu par bloc-liens-bas-de-page.inc.php sur 42 pages et son
   aspect vient de cette seule regle : une modification ici vaut partout.

   Ce qui a ete essaye avant : un bandeau gris pleine largeur, une carte
   identique a la FAQ en #f8fafc, puis aucun fond du tout. Seul le dernier
   etait correct sur la suppression de l encadre, mais le client voulait un
   gris et non une suppression. Les trois etats restent dans l historique
   Git si l un d entre eux doit revenir. */
/* Enveloppe du bloc « A lire aussi ».
   Client, 09/10/2026 : « change la couleur de l enveloppe autour du bloc en
   gris, le meme gris clair qui entoure le bloc Yoann Rousselle ».

   Cette enveloppe porte son propre nom de classe, et non celle du contenu
   ordinaire. Avec .h-content elle aurait herite d un fond blanc qui s
   extendait tout autour de la carte grise : c etait le cadre blanc signale.
   Comme le HTML vient de bloc-liens-bas-de-page.inc.php, le nom change sur
   les 42 pages en une seule edition.

   Le fond et les marges reprennent ceux de .h-author-block, cite par le
   client : meme gris clair #f8f9fb, memes marges. Les deux enveloppes se
   ressemblent, ce qui etait le but. */
.h-seo-section {
    padding: 2em 2em 1em;
    background: #f8f9fb;
}

.h-seo-links {
    background: #f8fafc;
    border: 1px solid #dfe4ec;
    border-left: 4px solid #f39200;
    border-radius: 6px;
    padding: 1.2em 1.4em 1.4em;
    margin: 0;
    max-width: var(--largeur-bloc);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.h-seo-links h3 {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    font-weight: 600;
    margin-bottom: 1em;
    text-align: left;
}

.h-seo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h-seo-grid a {
    color: #555;
    text-decoration: none;
    font-size: 0.88em;
    border: 1px solid #e0e0e0;
    padding: 6px 14px;
    border-radius: 20px;
    transition: border-color 0.2s, color 0.2s;
}

.h-seo-grid a:hover { border-color: #f39200; color: #f39200; }

/* ── CTA FINAL ── */
.h-final-cta {
    padding: 3.5em 2em;
    text-align: center;
    background: #f8f9fb;
}

/* RETOUR ARRIERE, 09/10/2026.
   J ai tente de centrer les deux cartes avec
       margin-left: 50%; transform: translateX(-50%);
   pour que le bloc Cadre legal, plus large que son conteneur de 900px,
   cesse de deborder du seul cote droit. Resultat : les deux cartes ne sont
   plus au centre de la page.
   Cause : sur un element de type bloc, margin-left: 50% consomme la moitie du
   parent, et la largeur auto vaut ce qui reste. Les cartes se sont donc
   reduites a environ 450px au lieu de 948px. translateX recentre ce qui est
   reduit, pas ce qui etait trop large. */


/* Bloc bouton d action de fin de page.
   Client, 09/10/2026 : « tu as mis autour du CTA un cadre gris avec du orange,
   tu le supprime » puis « le bloc CTA doit avoir la meme largeur que le bloc
   FAQ ».
   L enveloppe .h-final-cta garde son fond #f8f9fb, le gris clair partage avec
   l enveloppe du bloc auteur et celle du bloc A lire aussi : c est elle qui
   fait la separation. Le bloc interieur ne porte aucune carte, donc pas de
   fond, pas de bordure, pas de filet orange.
   Sa largeur vient de la meme variable que la carte FAQ et que le bloc Cadre
   legal. Les trois colonnes s alignent donc verticalement sur la page. */
.h-final-cta-inner {
    max-width: var(--largeur-bloc);
    margin: 0 auto;
}

.h-final-cta h2 {
    font-size: 2.2em;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 0.4em 0;
    letter-spacing: -0.5px;
}

.h-final-cta p {
    color: #888;
    margin-bottom: 2em;
    font-size: 0.95em;
}

/* ── FOOTER ── */
footer {
    background: #1a1a2e;
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 2em;
    font-size: 0.88em;
}

footer a { color: #f39200; text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .h-product-inner { grid-template-columns: 1fr; gap: 2.5em; }
    .h-product-inner-rev { direction: ltr; }
    .h-hero { min-height: auto; padding: 4em 1.5em; }
    .nav-toggle { display: flex; }
    .nav-menu { display: none; flex-direction: column; width: 100%; gap: 0; }
    .nav-menu.is-open { display: flex; }
    .nav-menu > li { width: 100%; }
    .nav-menu > li > a { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0.9em 1em; border-radius: 0; }
    .dropdown-menu { position: static; display: none; background: rgba(255,255,255,0.04); box-shadow: none; border-radius: 0; }
    .dropdown.is-open .dropdown-menu { display: block; }
    nav { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    .h-hero h1 { font-size: 2em; }
    .h-product-text h2 { font-size: 1.8em; }
    .h-final-cta h2 { font-size: 1.6em; }
    .h-cta-group { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ── Blog public (blog.php, blog-article.php) — même ADN que l’accueil ── */
.h-hero--article {
    min-height: 38vh;
    padding: 2.5em 1.5em 3em;
}

.h-hero-article-lead {
    font-size: 1.05em;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
    max-width: 640px;
    margin: 0 auto;
}

.blog-article-shell,
.blog-list-shell {
    text-align: left;
}

.blog-article-meta {
    font-size: 0.9em;
    color: #667085;
    margin: 0 0 1.25em;
}

.blog-article-meta-sep {
    margin: 0 0.35em;
}

.blog-excerpt-card,
.blog-attachment-card {
    background: #f8f9fb;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 1.1em 1.25em;
    margin-bottom: 1.5em;
}

.blog-excerpt-card p:last-child,
.blog-attachment-card p:last-child {
    margin-bottom: 0;
}

.blog-attachment-card {
    margin-top: 1.5em;
}

.h-blog-block-title {
    font-size: 1.5em;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 1em;
    text-align: left;
    letter-spacing: -0.3px;
}

.h-blog-block-title--center {
    text-align: center;
    width: 100%;
}

.blog-faq-block {
    margin-top: 2.5em;
    padding-top: 0.5em;
}

.h-faq--boxed {
    border: 1px solid #e8edf5;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
}

.h-seo-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    font-weight: 600;
    margin-bottom: 0.85em;
}

.h-seo-grid-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h-seo-grid-pills a {
    color: #555;
    text-decoration: none;
    font-size: 0.88em;
    border: 1px solid #e0e0e0;
    padding: 6px 14px;
    border-radius: 20px;
    transition: border-color 0.2s, color 0.2s;
}

.h-seo-grid-pills a:hover {
    border-color: #f39200;
    color: #f39200;
}

.blog-related-links {
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: 1px solid #e8edf5;
}

.blog-empty-hint {
    color: #667085;
    text-align: center;
    margin: 1em 0 2em;
}

.blog-list-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.blog-card-item {
    border: 1px solid #e8edf5;
    border-radius: 14px;
    background: #fff;
    padding: 1.25em 1.35em;
    box-shadow: 0 2px 8px rgba(14, 30, 37, 0.06);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.blog-card-item:hover {
    border-color: rgba(243, 146, 0, 0.35);
    box-shadow: 0 6px 20px rgba(14, 30, 37, 0.08);
}

.blog-card-item h3 {
    margin: 0 0 0.5em;
    font-size: 1.08rem;
    line-height: 1.35;
}

.blog-card-item h3 a {
    color: #1a1a2e;
    text-decoration: none;
    font-weight: 700;
}

.blog-card-item h3 a:hover {
    color: #f39200;
}

.blog-card-meta {
    font-size: 0.84rem;
    color: #667085;
    margin-bottom: 0.65em;
}

.blog-card-readmore {
    font-weight: 600;
}

/* Corps d’article (HTML TinyMCE) */
.blog-article-body {
    line-height: 1.78;
    color: #3d4454;
    font-size: 1.02rem;
}

.blog-article-body p {
    margin-bottom: 1em;
}

.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4 {
    color: #1a1a2e;
    margin-top: 1.65em;
    margin-bottom: 0.55em;
    text-align: left;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.blog-article-body h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    padding-bottom: 0.35em;
    border-bottom: 2px solid rgba(243, 146, 0, 0.35);
}

.blog-article-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    border-bottom: none;
    margin-top: 1.35em;
}

.blog-article-body a {
    color: #f39200;
    font-weight: 600;
    text-decoration: none;
}

.blog-article-body a:hover {
    text-decoration: underline;
}

.blog-article-body img,
.blog-article-body video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.blog-article-body iframe {
    max-width: 100%;
    border: 0;
    border-radius: 10px;
}

.blog-article-body ul,
.blog-article-body ol {
    margin: 0 0 1em 1.2em;
    padding-left: 0.25em;
}

.blog-article-body blockquote {
    margin: 1.25em 0;
    padding: 1em 1.15em 1em 1.25em;
    border-left: 4px solid #f39200;
    background: linear-gradient(90deg, rgba(243, 146, 0, 0.08), rgba(248, 249, 251, 0.95));
    border-radius: 0 10px 10px 0;
    font-size: 0.98rem;
}

.h-btn-ghost--on-light {
    color: #1a1a2e;
    border-color: rgba(26, 26, 46, 0.22);
}

.h-btn-ghost--on-light:hover {
    color: #1a1a2e;
    border-color: #1a1a2e;
    background: rgba(26, 26, 46, 0.05);
}

/* ── TABLEAU COMPARATIF ── */
.h-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    margin-top: 1.5em;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.h-compare-table thead tr {
    background: #1a1a2e;
    color: #fff;
}

.h-compare-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
}

.h-compare-table th:last-child {
    color: #f39200;
}

.h-compare-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #eef0f5;
    color: #444;
    vertical-align: top;
}

.h-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.h-compare-table tbody tr:nth-child(even) {
    background: #f8f9fb;
}

.h-compare-table tbody tr:hover {
    background: #fff8ee;
}

.h-compare-table td:last-child {
    color: #1a1a2e;
    font-weight: 500;
}

/* ── GEO ANSWER BLOCK ──
   Client, 10/10/2026 : « tu change de couleur pour que ce bloc soit harmonieux
   avec le reste, tu lui met un cadre comme pour le bloc Cadre legal et
   expertise, et tu met un interligne en haut et en bas car ici il colle trop le
   bloc image ».

   Les trois problemes venaient du meme endroit : ce bloc avait ete ecrit a une
   epoque ou il n'existait aucune carte de reference sur le site. Il etait
   reste bleu, sans cadre complet, large de 860px, et a 0.25em du hero — un
   quart de cadratin, donc colle.

   Il reprend desormais exactement la boite des deux cartes de reference : fond
   blanc, bordure grise, filet orange a gauche, meme rayon, meme largeur de
   900px. L interligne vient de --espace-bloc comme tous les autres blocs, pour
   qu un seul changement suffise si l espacement doit bouger. */
.h-geo-block {
    padding: 0 2em;
    margin: var(--espace-bloc) 0;
}

.h-geo-inner {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-left: 4px solid #f39200;
    border-radius: 6px;
    padding: 1.25em 1.5em;
}

.h-geo-question {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #f39200;
    font-weight: 700;
    margin: 0 0 0.5em;
}

.h-geo-answer {
    font-size: 0.95em;
    line-height: 1.7;
    color: #3d4454;
    margin: 0 0 0.5em;
}

.h-geo-answer strong {
    color: #1a1a2e;
}

.h-geo-source {
    font-size: 0.78em;
    color: #999;
    font-style: italic;
    margin: 0;
}

@media (max-width: 600px) {
    .h-geo-block { padding: 0 1em; }
    .h-geo-inner { padding: 1em; }
}

/* ── AUTHOR BLOCK ── */
.h-author-block {
    padding: 2em 2em 1em;
    background: #f8f9fb;
}

/* 08/10/2026 - Bloc auteur reduit a une ligne, sur demande du client.
   Il prenait quatre lignes plus une photo de 60px, sur 42 pages. La photo est
   retiree : une IA ne la lit pas, et elle ne pese pas dans le classement. Le
   texte des qualites est conserve - c est le theme d autorite, ce que
   Google et les moteurs IA retiennent sur un texte de droit du travail.

   La ligne se replie proprement : sur petit ecran le bouton passe a la ligne
   plutot que de laisser deborder le texte. */
/* 08/10/2026 - Bloc « A lire aussi » en bas de page, sur deux colonnes.
   30 pages sur 45 avaient deux blocs au meme titre : le maillage principal de
   6 a 15 liens a mi-page, et 2 a 6 liens de pages soeurs en bas. Les deux
   sont desormais reunis ici, juste avant le bloc auteur, et deduplicques -
   26 liens etaient reellement repetes dans les deux blocs sur la meme page.

   Deux colonnes, pas une : le bloc va de 6 a 17 liens selon les pages, et une
   seule colonne allongait la page de 17 lignes sur les pages les plus denses.
   meme largeur que la FAQ (948px) et que le bloc auteur : un seul gabarit. */
/* Largeur de reference des blocs de bas de page.
   948px, et non 900px : la FAQ a une bordure de 2px de chaque cote, donc
   900 - 2 - 2 = 896... on garde 948 parce que c est la valeur mesuree et
   validee par le client le 09/10/2026. Ne pas la changer sans lui demander. */
:root {
    --largeur-bloc: 948px;
    /* Largeur de la colonne de texte, et des deux cartes du bas de page.
       Une seule valeur : changer la largeur du site change les trois. */
    --largeur-contenu: 900px;
}

/* Le bloc « A lire aussi » n a plus de classe propre.
   Client, 09/10/2026 : « le fond n est pas gris du bloc Aller plus loin ».
   Sur l accueil, ce bloc est simplement du HTML ordinaire a l interieur de
   <section class="h-content"><div class="h-content-inner"> : fond blanc, meme
   conteneur 900px que le texte, meme .h-seo-links, meme .h-seo-grid.

   Les 39 pages utilisent maintenant exactement cette structure, donc aucune
   regle CSS : rien a maintenir, et rien qui puisse diverger du modele.
   Toute difference constatee un jour vient donc du HTML, pas du CSS. */
/* Titre du bloc, aligne sur le TEXTE du premier libelle.
   Client : « aligne le titre au dessus du 1er libelle » — pas au bord du bloc,
   mais sur « Logiciel CSE ».

   L etiquette a un padding horizontal de 14px : sa boite commence au bord,
   mais son TEXTE commence 14px plus loin. Le titre, lui, demarre au bord. Il
   etait donc 14px a gauche du premier libelle. Meme padding, meme position.
   box-sizing: border-box pour que la largeur totale reste 948px, donc le
   centrage du bandeau ne bouge pas. */
.h-links-bottom .h-seo-grid {
    margin-top: 1.4em;
}
/* Etiquettes du bloc fusionne : memes valeurs que .h-seo-grid, qui est le
   modele valide avec le client (agir-cse-delit-entrave.php) - texte gris non
   gras, bordure grise fine, orange au survol, arrondi en pilule.
   Le bloc etait en liste a puces orange : ca ne ressemblait a rien d autre du
   site, et sur deux colonnes les puces 十 lien a lien alignees donnaient une
   colonne de reperes Orange. */
/* 08/10/2026 - Bloc « A lire aussi » en bas de page, sur deux colonnes.
   Les regles precedentes ont ete SUPPRIMEES et non completees : elles etaient
   placees avant, et a specificite egale c est la derniere regle qui gagne.
   Les laisser en place aurait ecrase le nouveau style - exactement ce qui est
   arrive avec .h-author-title le jour ou la reduction de police ne se voyait
   pas. Deux blocs de style pour un meme element, c'est une regle qui continue
   de gagner sans qu on le voie. */
/* 08/10/2026 - Bloc « A lire aussi » en bas de page.
   Les liens sont listes comme un sommaire, sur UNE seule colonne de texte.

   Les versions precedentes - deux colonnes de pilules - ont ete rejetees :
   des etiquettes alignees sur deux colonnes donnent une grille de boxes, pas
   une liste de lecture. Une seule colonne de texte est aussi plus courte en
   hauteur : la liste la plus longue du site (17 liens) tient sur 7 lignes,
   contre 9 en deux colonnes de pilules.

   Le HTML garde deux <ul> pour ne pas avoir a retoucher les 32 pages, mais
   ils s empilent : la grille est supprimee, pas desactivee. */
/* 08/10/2026 - Bloc « A lire aussi », meme rendu que « Aller plus loin » sur
   la page d accueil ( .h-seo-grid ) : des etiquettes qui COULENT sur une,
   deux ou trois lignes selon leur longueur, sans colonnes forcees.

   Ce qui a ete essaye et rejete : deux colonnes de pilules (une grille de
   boxes), puis une liste a puces avec trait de separation (une liste de
   lecture). Le modele validé est celui de l accueil : des etiquettes qui
   s empilent naturally, sans grille.

   Les valeurs de .h-seo-grid sont reprises telles quelles. Seule difference :
   une largeur maximale sur l etiquette, pour qu un libelle long passe sur
   2 ou 3 lignes au lieu de s allonger sur toute la largeur du bloc. C est ce
   que le client demande : « sur une ou 2 ou 3 lignes, comme dans un texte ». */
.h-links-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* le contenu garde 948px - la largeur du texte - au centre du bandeau
       gris pleine largeur */
    max-width: var(--largeur-bloc);
    margin: 0 auto;
}
.h-links-cols ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: contents;
}
.h-links-cols li {
    margin: 0;
    padding: 0;
    max-width: 280px;
}
.h-links-cols a {
    display: inline-block;
    color: #555;
    text-decoration: none;
    font-size: 0.88em;
    line-height: 1.5;
    border: 1px solid #e0e0e0;
    padding: 6px 14px;
    border-radius: 20px;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.h-links-cols a:hover {
    border-color: #f39200;
    color: #f39200;
    background: #fffaf2;
}
@media (max-width: 720px) {
    .h-links-cols li { max-width: none; }
}
/* Cette regle h3 faisait doublon avec celle du bloc principal plus haut :
   memes proprietes, meme resultat, mais deux regles pour un meme element
   finissent par diverger, et c est la derniere qui gagne. Supprimee. */

/* Bloc auteur : deux lignes assumées.
   08/10/2026 - Le texte (nom + qualifications, 121 caracteres) occupe environ
   800px sur les 884px utiles du bloc. Avec « En savoir plus » en plus, le total
   depasse de 11px : le bouton passait donc toujours a la ligne, etreduire la
   police ne suffisait pas. Client : « aucun changement ».
   Plutot que de descendre la police jusqu'a la lisibilite, le bouton passe
   Deliberement sur une deuxieme ligne, centre. C'est un choix de mise en page,
   pas un overflow qu on subit. */
.h-author-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.3em 0.6em;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}
.h-author-line .h-author-name {
    font-size: 1em;
    font-weight: 700;
    color: #1a1a2e;
}
.h-author-line .h-author-title {
    margin: 0;
    font-size: 0.85em;
    color: #667085;
}
/* Le bouton occupe sa propre ligne et se centre. flex-basis 100% le force a
   passer a la ligne meme quand la fenetre est large, ou le texte tient
   presque : c'est le qui donne le meme rendu sur tous les ecrans. */
.h-author-line .h-author-link {
    flex: 0 0 100%;
    margin: 0.2em 0 0 0;
    white-space: nowrap;
    font-size: 0.85em;
    font-weight: 600;
    color: #f39200;
    text-decoration: none;
}

/* 08/10/2026 - Le bloc auteur etait le seul bloc de page a ne pas avoir la
   meme largeur que les autres : 700px ici, contre 900px pour .h-content-inner
   et .h-advantages-inner, et 948px pour l encart FAQ. D ou l impression
   qu il n appartenait pas au meme gabarit.
   948px comme la FAQ, moins les 2px de bordure de chaque cote, pour que le
   texte garde exactement la largeur de la colonne. */
.h-author-inner {
    max-width: var(--largeur-bloc);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5em;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 1em 2em;
}

.h-author-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Ces trois regles (.h-author-name, .h-author-title, .h-author-stats) dataient
   du bloc auteur en quatre lignes, avant sa reduction. Elles ont ete supprimees
   le 08/10/2026 : placées APRES les regles .h-author-line, de specificite
   egale, elles les ecrasaient. Le texte des qualifications restait donc a
   0.88em malgre la reduction a 0.8em demandee, et le bouton passait toujours a
   la ligne. Une regle CSS qui n ag it plus mais continue de gagner sur une
   regle identique est plus piegeuse qu une regle absente.
   .h-author-stats n est plus utilisee du tout : le bloc tient sur une ligne. */

.h-author-link {
    font-size: 0.85em;
    font-weight: 600;
    color: #f39200;
    text-decoration: none;
}

.h-author-link:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .h-author-inner {
        flex-direction: column;
        text-align: center;
    }
    .h-author-avatar img {
        width: 60px;
        height: 60px;
    }
}

/* === Bloc "Cadre légal et expertise" : accordéon avec bouton "En savoir plus" ===
   Retour du client, 07/10/2026, deux fois :
   1. le "+" seul ne suffisait pas, on ne voyait pas qu'il faut cliquer ;
   2. demande de precision : le bouton doit etre le plus a droite, juste AVANT
      le " + ", pas a l'autre bout.
   On supprime donc le "+" genere par ::after et on en met un dans le HTML,
   ce qui donne un controle total sur l'ordre : libelle | + | bouton.
   Le bouton est un <span>, pas un <a> : un lien dans un summary declenche
   le deploiement ET suit le lien. Il n'est pas focusable : le point d'entree
   reste le <summary>, qui est focusable au clavier.
   Les puces restent des puces : le bloc est deja encadre, deux cadres
   imbriques feraient trop de cadres empiles. */
.h-legal {
    margin: 0 auto 1em;
}

/* Plus d interligne entre le bloc Cadre legal et la FAQ : quand le bloc legal
   est le dernier de sa section, c est la FAQ qui ouvre la suite. Sa marge
   basse et le padding bas de la section s ajoutaient et laissaient 3em.
   Client, 10/10/2026 : « l interligne entre le bloc Cadre legal et Questions
   frequentes est toujours present ». */
.h-content-inner > .h-legal:last-child {
    margin-bottom: 0;
}
.h-legal summary {
    padding: 1.05em 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.9em;
}
.h-legal summary::-webkit-details-marker { display: none; }
.h-legal-label {
    margin-right: auto;
    font-size: 1em;
    font-weight: 600;
    color: #1a1a2e;
    transition: color 0.2s;
}
.h-legal summary:hover .h-legal-label { color: #f39200; }
/* le plus : dans le HTML, pas en ::after, pour maitriser l'ordre */
.h-legal-plus {
    flex: 0 0 auto;
    font-size: 1.4em;
    line-height: 1;
    color: #f39200;
    font-weight: 300;
    transition: transform 0.2s;
    pointer-events: none;
}
.h-legal[open] .h-legal-plus { transform: rotate(45deg); }
/* le bouton : meme aspect que .btn-outline, plus petit et non focusable */
.h-legal-btn {
    flex: 0 0 auto;
    padding: 6px 16px;
    font-size: 0.82em;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}
.h-legal[open] .h-legal-btn { background: #f39200; color: #fff !important; }
.h-legal[open] summary { border-bottom: 1px solid #dfe4ec; margin-bottom: 1em; }
.h-legal > *:last-child { padding-bottom: 0.4em; }
.h-legal p { color: #555; line-height: 1.75; font-size: 0.95em; }
.h-legal a.h-link { color: #f39200; text-decoration: none; font-weight: 600; }
.h-legal ul.h-checklist { margin-bottom: 0; }

/* === Boite des deux cartes de reference : Cadre legal et FAQ ===
   Client, 10/10/2026 : « tu as supprime le joli cadre du bloc Cadre legal et
   expertise ».

   Deux pertes successives.
   1. .h-legal n a plus aucune boite : ni fond, ni bordure, ni filet orange. Le
      commentaire plus haut dit encore « meme boite que la carte FAQ » : c est
      faux depuis un moment, la boite n existe plus.
   2. La carte FAQ etait en #f8fafc. La page est devenue #f8f9fb juste apres :
      les deux tons sont identiques au chiffre pres, donc la carte se fondait
      dans le fond. C est ce que le client voyait disparaitre.

   Les deux cartes reprennent la meme boite, et en blanc : sur une page grise,
   le blanc detache la carte, et l espace entre deux blocs reste gris. Les deux
   exigences du client sont-tenues en meme temps. */
.h-legal,
.h-faq {
    background: #fff;
    border: 1px solid #dfe4ec;
    border-left: 4px solid #f39200;
    border-radius: 6px;
    box-sizing: border-box;
}

/* Cadre legal : la boite a besoin de son propre espacement interne, la carte
   FAQ a deja le sien dans sa regle d origine. */
.h-legal {
    padding: 0.2em 1.4em 1em 1.4em;
}

@media (max-width: 640px) {
    /* Bloc « Cadre legal et expertise » : meme boite que la carte FAQ.

   Client : « les blocs Cadre legal n ont pas la largeur du bloc FAQ ».
   Mesure : .h-faq porte max-width var(--largeur-bloc) = 948px, .h-legal
   n avait pas de max-width. Il prenait donc la largeur de son conteneur,
   900px. Ecart : 48px, la carte FAQ debordant de 24px de chaque cote.

   Meme largeur, meme centrage, meme modele de boite que la FAQ. Si un jour la
   largeur change, les deux cartes suivent, via la variable partagee. */
.h-legal {
    padding: 0 0.9em;
    max-width: var(--largeur-bloc);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


    .h-legal-label { font-size: 0.92em; }
    .h-legal-btn { padding: 5px 12px; font-size: 0.78em; }
    .h-legal-plus { font-size: 1.2em; }
}

/* === Bloc FAQ : distingue du contenu de la page ===
   Demande du client, 07/10/2026 : mettre la FAQ dans une autre couleur pour
   qu'on distingue le texte de la page des questions.
   Le bloc etait totalement transparent : memes couleurs, memes bordures que le
   texte, donc rien ne signalait la fin du contenu.
   Traitement : fond bleu nuit tres leger, liseré orange a gauche — les deux
   couleurs du site — et un titre interne. Meme famille visuelle que le bloc
   .h-legal : ce sont les deux parties de reference de la page. */
.h-faq {
    margin-bottom: 3em;
    background: #f8fafc;
    border: 1px solid #dfe4ec;
    border-left: 4px solid #f39200;
    border-radius: 6px;
    padding: 0.6em 1.4em 1.2em 1.4em;
    /* 08/10/2026 - l encart gris s etirait sur toute la largeur de la page,
       alors que le texte qu il contient est limite a 900px par
       .h-content-inner. Resultat : une boite nettement plus large que son
       contenu, signalee par le client. On donne a l encart la largeur du
       texte et on le centre comme lui.
       948px et non 900px : 900 moins les 2px de bordure de chaque cote, pour
       que le texte garde exactement sa largeur actuelle. */
    max-width: var(--largeur-bloc);
    margin-left: auto;
    margin-right: auto;
}
.h-faq details {
    border-bottom: 1px solid #e3e8ef;
}
.h-faq details:first-child { border-top: 1px solid #e3e8ef; }
.h-faq details:last-child { border-bottom: 0; }
.h-faq summary {
    padding: 1.1em 0;
    font-size: 1em;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    user-select: none;
}
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary:hover { color: #f39200; }
.h-faq summary::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 1.3em;
    line-height: 1;
    color: #f39200;
    font-weight: 300;
    transition: transform 0.2s;
}
.h-faq details[open] summary::after { transform: rotate(45deg); }
.h-faq details p {
    padding: 0 0 1.1em 0;
    margin: 0;
    color: #555;
    line-height: 1.75;
    font-size: 0.95em;
}
.h-faq details a { color: #f39200; text-decoration: none; font-weight: 600; }

@media (max-width: 640px) {
    .h-faq { padding: 0.5em 1em 1em 1em; }

/* 08/10/2026 - Section « Modele et ressources ».
   Les blocs qui ne sont pas des questions (comparatifs, etapes, arguments
   produit, recapitulatifs) ont ete sortis de l encart .h-faq pour que la FAQ
   ne contienne que des questions. En les sortant, ils ont cesse d heriter du
   style : .h-faq details et .h-faq summary sont les seules regles qui
   dessinaient les accordeons, et ces blocs ne sont plus dans .h-faq. Ils
   perdaient donc le « + », les traits de separation et les espacements - sur
   douze pages, y compris le telechargement du modele PDF de ordre-du-jour.
   Aucun controle ne l avait vu : le HTML etait equilibre, les liens valides,
   php -l OK. Un controle verifie que les balises sont correctes, pas qu elles
   sont visibles.
   Ces regles leur redonnent le meme aspect qu avant, avec un h3 de titre. */
.h-faq-resources {
    margin: 0 0 3em 0;
    max-width: var(--largeur-bloc);
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 1em 1em 1em;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 6px;
}
.h-faq-resources h3 {
    text-align: center;
    font-size: 1.15em;
    font-weight: 700;
    color: #1a1a2e;
    margin: 1em 0 0.6em 0;
}
.h-faq-resources details { border-bottom: 1px solid #e3e8ef; }
.h-faq-resources details:last-child { border-bottom: 0; }
.h-faq-resources summary {
    padding: 1.1em 0;
    font-size: 0.95em;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    user-select: none;
}
.h-faq-resources summary::-webkit-details-marker { display: none; }
.h-faq-resources summary:hover { color: #f39200; }
.h-faq-resources summary::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 1.3em;
    line-height: 1;
    color: #f39200;
    font-weight: 300;
    transition: transform 0.2s;
}
.h-faq-resources details[open] summary::after { transform: rotate(45deg); }
.h-faq-resources details p {
    padding: 0 0 1.1em 0;
    margin: 0;
    color: #555;
    line-height: 1.75;
    font-size: 0.95em;
}
.h-faq-resources details a { color: #f39200; text-decoration: none; font-weight: 600; }
    .h-faq summary { font-size: 0.95em; }
/* Largeur et centrage des deux cartes : Cadre legal et Questions frequentes.
   Client, 09/10/2026, repris trois fois : « le bloc Cadre legal n a toujours
   pas la largeur du bloc FAQ ».

   LA VRAIE CAUSE, que deux corrections precedentes avaient manquee : la FAQ
   n a pas toujours la meme largeur. Sur 30 pages elle est en <section>, donc
   elle est le conteneur : 948px. Sur 14 pages elle est en <div>, posee dans un
   .h-content-inner de 900px : elle fait donc 900px. Deux largeurs pour un meme
   bloc, et le bloc Cadre legal a 948px partout. D ou un decalage qui change
   de sens selon la page.

   La solution n est pas d ajuster une carte contre l autre, c est de leur
   donner la MEME largeur imposee, quelle que soit leur contenant.

   Deux details qui font la difference avec les tentatives precedentes :
   - `width` est impose, jamais laisse a auto. Sinon la marge de 50%
     consomme la moitie du parent et la carte se reduit : c est ce qui s est
     passe en v31, les cartes sont tombees a 450px.
   - la regle est placee APRES les regles .h-faq et .h-legal deja presentes.
     A specificite egale la derniere gagne ; ecrite plus haut, elle etait
     ecrasee sans qu on le voie, le fichier avait l air correct.

   min() avec 100vw evite un debordement sur petit ecran, tout en gardant
   948px sur les largeur de bureau. */
/* Largeur des deux cartes du bas de page : Questions frequentes et Cadre legal.
   Client, 09/10/2026 : « toutes les FAQ doivent faire 900px ».

   Elles reprennent la largeur de la colonne de texte, declaree une seule fois
   dans --largeur-contenu. Ce n est pas 948px : 948px etait une valeur choisie
   le 08/10 pour que le TEXTE de la carte fasse 900px, la carte debordant alors
   de chaque cote. Le client demande la boite entiere a 900px.

   100% ne suffirait pas. Sur 26 pages la FAQ est un <section class="h-faq">
   qui EST le conteneur : son parent fait toute la largeur de la page, donc
   100% y vaut environ 1300px, pas 900. Seules les 7 pages ou la FAQ est en
   <div>, posee dans le conteneur de texte, donnaient 900px avec cette valeur.
   D ou une page ou deux, c est restee trop large. La largeur est donc
   ecrite, pas heritee.

   La meme valeur sert aux deux cartes : elles ne peuvent plus diverger, ni
   maintenant ni apres un changement de largeur du site. */


/* Sous 1012px, 948px ne tient plus avec les marges de la page. On laisse
   alors la carte suivre la largeur de l ecran, moins les marges du site.
   Rule ecrit a part plutot qu avec min() : le resultat est le meme, mais
   une valeur simple ne peut pas etre invalidee par un detail de syntaxe,
   et un ecran d erreur CSS ne se voit pas au rendu. */
@media (max-width: 1012px) {
    
}
}

.h-faq, .h-legal {
    width: 900px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Espacement entre les blocs du bas de page.
   Client, 09/10/2026 : « tu me mets les interlignes entre chaque bloc avec la
   meme taille d interligne pour que ce soit homogene ».

   CONSTATS, mesures dans le CSS avant correction
     Cadre legal   -> FAQ   : 1,6 em, une marge
     FAQ           -> CTA   : 6,0 em, la marge de la carte PLUS le padding de
                             sa section : deux mecanismes cumules
     CTA           -> liens : 3,5 em + 2 em : deux bandes qui s ajoutent
     liens         -> auteur: 1 em + 2 em, idem

   Deux mecanismes, donc aucune egalite possible a garantir. C est le meme
   defaut que pour la largeur, et la meme cause : une valeur qu on laisse
  Heritagee d un conteneur, et un conteneur qui change selon la page.

   LE MODELE, un seul mecanisme : les marges.
     - les sections ne mettent plus de padding vertical, il vient des
       marges des blocs qu elles contiennent ;
     - chaque bloc porte margin: 0 0 --espace-bloc ;
     - chaque bande (CTA, liens, auteur) colle sans padding vertical, et son
       contenu interieur porte la meme marge.
   Les cinq ecarts font alors exactement --espace-bloc.

   Le cas de la FAQ : elle est dans une section .h-content qui a deja un
   padding de 3em en bas, auquel s ajouterait sa propre marge. La regle
   :has(> .h-faq) retire ce padding de la SEULE section qui contient la carte
   en dernier enfant, sans toucher aux autres sections de contenu. Sans cela,
   l ecart FAQ vers CTA ferait deux fois l interligne. */

/* Un seul ecart, une seule valeur. 3em : le rythme deja utilise par le site,
   demande explicitement par le client. */
:root {
    --espace-bloc: 2em;
    --gris-bloc: #f8f9fb;
}

/* Les sections ne portent plus d espace vertical : c est la marge des blocs
   qui le porte, sinon chaque espace est compte deux fois. */
.h-content {
    padding: var(--espace-bloc) 2em;
}

.h-content:has(.h-faq),
.h-content:has(+ .h-faq) {
    padding-bottom: 0;
    background: var(--gris-bloc);
}

/* Les deux cartes du contenu. */
.h-legal {
    margin: 0 auto 1em;
}

.h-faq {
    margin: 0 auto var(--espace-bloc);
}

/* Les trois bandes : sans padding vertical, l espace vient de leur contenu. */
.h-final-cta,
.h-seo-section,
.h-author-block {
    padding: 0 2em;
}

.h-final-cta-inner,
.h-seo-links,
.h-author-inner {
    margin: var(--espace-bloc) auto;
}

/* Sous 1012px, l espace vertical devient serré, mais il reste identique entre
   les blocs : c est la seule valeur qui change. */
@media (max-width: 1012px) {
    :root {
        --espace-bloc: 1.8em;
    }
}
/* === Bandeau de confiance (AXIS:eeat) ===
   Client, 10/10/2026 : « tu met ce bloc a la largeur des autres bloc, car la
   ca fait moche ».

   Ce bandeau etait ecrit en styles inline, a l identique, sur 35 pages : il
   prenait toute la largeur de la page, la ou tous les autres blocs font 900px.
   Une seule definition le remplace desormais, donc il ne peut plus diverger.

Un tiers de nuance, pas une couleur de plus
   ------------------------------------------
   Client : « il est fondu dans la masse, pourtant c'est un bloc important ».
   On l avait rendu strictement identique aux cartes de contenu : meme fond
   blanc, meme filet orange, meme largeur de 900px. Ca lui donnait le statut
   d'un chapitre a lire. Il n'en a pas le statut : c'est UNE phrase de
   reassurance, entre le hero et le premier chapitre.

   D'ou le changement — et il est fait de.colors deja presentes sur le site :
   - fond marine tres pale #eef2f8, c est le marine du hero et des titres
     (#1a1a2e) a environ 6%. Ce n'est donc pas une troisieme couleur, c'est le
     fonce du site ;
   - filet gauche marine au lieu de l'orange ;
   - 760px au lieu de 900px, pour qu'il ne se confonde plus avec la largeur
     d'une carte de lecture.

   Pas de bleu. Le site n'a qu'un accent, l'orange (43 usages), et un fonce, le
   marine (29). Le bleu qui precedait ce bandeau n'etait pas un choix : c'etait
   une des 35 copies en styles inline qui avait derive. Lui rendre une couleur
   propre obligerait le lecteur a apprendre un troisieme sens. */
.h-note-eeat {
    max-width: 760px;
    margin: var(--espace-bloc) auto;
    background: #eef2f8;
    border: 1px solid #dfe4ec;
    border-left: 4px solid #1a1a2e;
    border-radius: 6px;
    padding: 1em 1.5em;
    text-align: center;
    font-size: 0.85rem;
    color: #3d4454;
}
.h-note-eeat strong {
    color: #1a1a2e;
}

@media (max-width: 640px) {
    .h-note-eeat {
        padding: 0.9em 1em;
    }
}

/* === Captures dans les cartes (12/10/2026) ===
   Client : « agrandis les cartes qui ont les images pour avoir les 3 cartes
   identiques en taille ».

   Les captures n ont pas les memes dimensions, donc les cartes se terminent a
   des hauteurs differentes et leurs textes ne demarrent pas sur la meme ligne.
   Hauteur fixe et object-fit: cover : la carte garde la meme boite, l image est
   rognee plutot que deformer. */
.h-adv-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .h-adv-card img {
        height: 190px;
    }
}
/* === Bloc « Tableau comparatif » (13/10/2026) ===
   Client : « tu met le titre, en dessous la phrase, en dessous l image et a
   cote le tableau ».

   Le titre ne serre dans une colonne : il est plus lisible en pleine largeur,
   et c est lui qui donne le sens du tableau qui suit. La grille du bloc passe
   donc sur une colonne, puis le tableau et la capture se partagent la rangee.

   Cote telephone les deux se superposent : sous 900px, le tableau devient trop
   etroit et la capture passerait a sa detriment. Le overflow-x:auto deja present
   fait defiler le tableau plutot que de le tronquer. */
.h-product-compare .h-product-inner {
    grid-template-columns: 1fr;
    gap: 2em;
}

.h-compare-cols {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2em;
    /* Centre verticalement : client, 13/10/2026, « tu peux pas l aligner au
       milieu avec le tableau ? cela serait plus joli ». Le tableau fait cinq
       lignes, la capture deux fois moins en hauteur : collee en haut, elle
       laissait un vide de 200px sous elle et la rangée paraissait bancale. */
    align-items: center;
}

.h-compare-shot img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: block;
    cursor: zoom-in;
}

@media (max-width: 900px) {
    .h-compare-cols {
        grid-template-columns: 1fr;
    }
}
/* === Encart « source officielle » (13/10/2026) ===
   Client : « ses blocs sont verts, c est moche, ce n est pas harmonieux avec le
   site internet ».

   Quatre pages portaient le meme encart — celui sur le Plan national d action de
   l inspection du travail — ecrit a la main en style inline, en vert #16a34a.
   Cette couleur n existe nulle part ailleurs : quatre copies d un encart
   ecrit au coup par coup.

   Il prend la meme famille que le bandeau de confiance — marine pale et filet
   marine — qui existe deja dans la maquette. Aucune couleur introduite, et
   l encart se distingue du bloc Cadre legal sans creer une teinte de plus. */
.h-note-source {
    max-width: 900px;
    margin: var(--espace-bloc) auto;
    background: #eef2f8;
    border: 1px solid #dfe4ec;
    border-left: 4px solid #1a1a2e;
    border-radius: 6px;
    padding: 1.25em 1.5em;
}

.h-note-source p {
    margin: 0 0 0.5em;
}

.h-note-source p:last-child {
    margin: 0;
}

.h-note-source strong {
    color: #1a1a2e;
}

.h-note-source a.h-link {
    color: #f39200;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 640px) {
    .h-note-source {
        padding: 1em;
    }
}
/* === Illustration pleine largeur (13/10/2026) ===
   Client, sur proces-verbal-CSE.php : « l image est completement colle sur la
   gauche de la page, elle n est pas centree et la largeur de l image ne respecte
   pas ce qui est convenu pour la largeur des blocs ».

   Cause mesuree : l <img> etait pose entre deux </section>, sans conteneur. Il
   n avait donc ni largeur imposee ni centrage, et le navigateur le posait au
   bord du bloc parent. max-width:100% ne pouvait rien contre ca : le conteneur,
   c etait la page.

   Neuf images etaient dans ce cas, sur cinq pages. Toutes reprennent la meme
   largeur que les autres blocs — 900px — le meme centrage et le meme
   interligne. Une seule classe, donc la prochaine image glissee hors d un
   bloc aura le meme traitement. */
.h-illus {
    max-width: 900px;
    margin: var(--espace-bloc) auto;
}

.h-illus img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: block;
}

@media (max-width: 640px) {
    .h-illus {
        margin: var(--espace-bloc) 0;
    }
}