/* === Taxi Pako — taxi conventionné CPAM, ouest lyonnais ====================
 *
 * Parti de l'ossature de `inst_neelfraisse` (pages métier/ville, formulaire en
 * colonne, zone d'intervention) puis rhabillé. Deux contraintes ont commandé
 * l'habillage, et elles ne sont pas décoratives :
 *
 * 1. LE LECTEUR EST SOUVENT ÂGÉ OU MALADE. C'est un transport de patients : le
 *    corps de texte est à 17 px et non 16, l'interligne à 1,72, les cibles
 *    tactiles à 44 px, et chaque contrôle a un contour de focus visible. La
 *    lisibilité passe avant la mode.
 * 2. IL FAUT LIRE « TAXI » EN UNE SECONDE. D'où l'ambre de signalisation en
 *    accent et le damier, repris de la ceinture des taxis. Mais l'ambre ne
 *    sert QU'aux boutons et aux repères : sur fond blanc il plafonne à 1,9:1 de
 *    contraste, il ne peut donc jamais porter du texte. Les liens et les titres
 *    prennent le bleu pétrole (--primary), à 10,4:1.
 *
 * Les variables --primary / --secondary / --sitetext / --sitebg sont injectées
 * par header.php depuis la base ; celles définies ici ne les recouvrent pas.
 * ========================================================================== */

:root {
    /* Relevés dans le kit Elementor du site actuel — ce sont les couleurs des
       cartes de visite du chauffeur, elles ne s'inventent pas. */
    --accent:      #f4de69;   /* jaune de la charte — 1,4:1 sur blanc : DÉCOR SEUL */
    --accent-fonce:#e6cc45;
    --accent-tres-clair: rgba(244,222,105,.28);
    --creme:       #fdfaef;   /* fond de section, teinté du jaune de la charte */
    --trait:       #e3e6ea;
}

/* Damier taxi : 6 px, en signature sous l'en-tête et au-dessus du pied de page.
   Deux dégradés croisés, aucune image — rien à télécharger. */
.nf-damier {
    height: 6px;
    background:
      repeating-linear-gradient(90deg, var(--accent) 0 12px, var(--primary) 12px 24px) 0 0/24px 3px repeat-x,
      repeating-linear-gradient(90deg, var(--primary) 0 12px, var(--accent) 12px 24px) 0 3px/24px 3px repeat-x;
}

body {
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--sitetext, #33373d);
    background: var(--sitebg, #ffffff);
    font-size: 17px;          /* 16 px par défaut : trop petit pour ce lectorat */
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
}

/* Les titres sont BLEUS sur le site actuel, pas noirs. C'est, avec la forme des
   boutons, ce qui fait reconnaître la charte au premier coup d'œil. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, 'Inter', sans-serif);
    color: var(--primary);
    line-height: 1.15;
}
/* Sur fond sombre ils repassent en blanc — la règle ci-dessus les rendrait
   illisibles dans le hero et le pied de page. */
.tp-hero h1, .tp-hero h2, .nf-page-hero h1, .nf-page-hero h2,
.nf-cta-banner h2, .nf-footer h1, .nf-footer h2, .nf-footer h3, .nf-footer h4 { color: #fff; }

a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--sitetext); }

/* Contour de focus sur TOUS les contrôles, et pas seulement les champs. Sans lui,
   qui navigue au clavier ne sait plus où il se trouve. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Container */
.container-nf { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Fixed wrapper (topbar + header restent fixes en haut) */
.nf-sticky-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
/* Compenser la hauteur du header fixe */
.nf-header-spacer {
    height: 100px; /* ajusté par JS */
}

/* Top bar */
.nf-topbar {
    background: var(--primary);
    color: rgba(255,255,255,0.85);
    font-size: 13.5px;
    padding: 9px 0;
}
.nf-topbar a { color: rgba(255,255,255,0.8); }
.nf-topbar a:hover { color: #fff; }

/* Header nav */
.nf-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nf-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
}
.nf-nav-links { display: none; gap: 0; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .nf-nav-links { display: flex; } }
.nf-nav-links > li { position: relative; }
.nf-nav-links > li > a {
    display: block; padding: 8px 14px;
    font-size: 14px; font-weight: 500; color: var(--sitetext, #33373d);
    transition: color .15s;
}
.nf-nav-links > li > a:hover { color: var(--primary, #C92227); }

/* Dropdown mega-menu */
.nf-dropdown {
    display: none; position: absolute; top: 100%; left: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    min-width: 260px; padding: 8px 0; z-index: 60;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.nf-nav-links > li:hover > .nf-dropdown { display: block; }
.nf-dropdown a {
    display: block; padding: 8px 20px; font-size: 13.5px;
    color: var(--sitetext, #33373d); transition: background .1s;
}
.nf-dropdown a:hover { background: #f5f5f5; color: var(--primary, #C92227); }

/* Hamburger */
.nf-burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.nf-burger span { width: 24px; height: 2px; background: var(--sitetext, #33373d); display: block; transition: all .2s; }
@media (min-width: 1024px) { .nf-burger { display: none; } }

/* Mobile menu */
.nf-mobile-menu { display: none; background: #fff; border-top: 1px solid #e5e7eb; padding: 16px 0; }
.nf-mobile-menu.is-open { display: block; }
.nf-mobile-menu a { display: block; padding: 10px 24px; font-size: 15px; color: var(--sitetext); }
.nf-mobile-menu .nf-submenu { padding-left: 20px; }
.nf-mobile-menu .nf-submenu a { font-size: 13.5px; color: var(--secondary); }

/* Buttons */
/* Boutons. Hauteur minimale 46 px : c'est la cible tactile confortable, et le
   premier geste attendu sur ce site est un appel depuis un téléphone. */
.btn-nf {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    /* Pilule : c'est la forme des boutons et des onglets du site actuel. */
    min-height: 46px; padding: 12px 26px; border-radius: 999px;
    font-size: 15px; font-weight: 700; letter-spacing: .01em;
    transition: background .18s, color .18s, border-color .18s, transform .18s;
    cursor: pointer; border: 2px solid transparent; text-decoration: none;
}
/* ⚠️ Le bouton principal porte le BLEU DE LA CHARTE (#17478a, relevé sur l'en-tête
   et le pied de page du site actuel) et non l'ambre : le client ne veut pas refaire
   ses cartes de visite, et un bouton d'une autre couleur que la charte est
   précisément ce qui se remarque. Blanc sur ce bleu : 9,1:1.
   L'ambre reste, mais au détail — damier, étoile de la note, filets, numéros
   d'étape. Un accent ajouté n'invalide pas des cartes ; une couleur de bouton
   contradictoire, si. */
.btn-primary-nf { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary-nf:hover { background: #113a72; border-color: #113a72; color: #fff; }
/* Sur fond bleu, un bouton bleu ne se détacherait pas : il prend alors le jaune de
   la charte, avec du texte bleu foncé dessus (9,8:1) — jamais du blanc, qui
   tomberait à 1,4:1. */
.tp-hero .btn-primary-nf, .nf-page-hero .btn-primary-nf, .nf-cta-banner .btn-primary-nf {
    background: var(--accent); color: #10365f; border-color: var(--accent);
}
.tp-hero .btn-primary-nf:hover, .nf-page-hero .btn-primary-nf:hover, .nf-cta-banner .btn-primary-nf:hover {
    background: var(--accent-fonce); border-color: var(--accent-fonce); color: #10365f;
}
.btn-outline-nf { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-nf:hover { background: var(--primary); color: #fff; }
.btn-white-nf { background: #fff; color: var(--primary); border-color: #fff; }
.btn-white-nf:hover { background: rgba(255,255,255,0.9); }
/* Le bouton d'appel : sur fond sombre il est cerclé de blanc, il ne se confond
   donc pas avec l'ambre du bouton principal tout en restant aussi visible. */
.btn-tel { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-tel:hover { background: #fff; color: var(--primary); border-color: #fff; }
.nf-content .btn-tel, section:not([style*="--sitetext"]) .btn-tel { }

/* Cards service */
.card-nf {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 28px; transition: transform .25s, box-shadow .25s;
    display: flex; flex-direction: column; gap: 12px; height: 100%;
}
.card-nf:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -12px rgba(0,0,0,0.15); }
.card-nf .card-icon {
    width: 52px; height: 52px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
    background: var(--primary, #C92227);
}
.card-nf h3 { font-size: 20px; margin: 0; }
.card-nf p { font-size: 14.5px; color: var(--secondary, #798B99); margin: 0; line-height: 1.55; }
.card-nf .card-link {
    margin-top: auto; font-size: 13px; font-weight: 600;
    color: var(--primary); display: inline-flex; align-items: center; gap: 6px;
}
.card-nf .card-link:hover { gap: 10px; }

/* FAQ */
.nf-faq-item { border-bottom: 1px solid #e5e7eb; }
.nf-faq-q {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 0; cursor: pointer; font-weight: 600; font-size: 15px;
    background: none; border: none; width: 100%; text-align: left;
    color: var(--sitetext);
}
.nf-faq-q .ico { font-size: 20px; transition: transform .2s; color: var(--primary); }
.nf-faq-item.open .nf-faq-q .ico { transform: rotate(45deg); }
.nf-faq-a { display: none; padding: 0 0 18px; font-size: 14.5px; color: var(--secondary); line-height: 1.65; }
.nf-faq-item.open .nf-faq-a { display: block; }

/* Formulaire */
.nf-field { margin-bottom: 10px; }
.nf-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--sitetext); }
.nf-field input, .nf-field textarea, .nf-field select {
    width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px;
    font: inherit; font-size: 15px; transition: border-color .15s;
}
.nf-field input:focus, .nf-field textarea:focus, .nf-field select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-tres-clair);
}
.nf-field label { font-size: 13px; }
.nf-field input, .nf-field textarea, .nf-field select { min-height: 44px; }
.nf-field textarea { min-height: 60px; resize: vertical; }

/* Page hero (fond image + overlay) */
/* Bande de titre des pages intérieures. 380 px de haut se justifiaient avec une
   photo de fond ; sans image, c'était un aplat noir vide qui repoussait le texte
   sous le pli. 300 px, et un liseré ambre au ras du contenu pour tenir le bas. */
.nf-page-hero {
    position: relative; min-height: 300px; display: flex; align-items: center;
    background-size: cover; background-position: center; color: #fff; padding: 52px 0 46px;
    border-bottom: 4px solid var(--accent);
    /* Bleu de la charte plutôt que le noir : c'est la couleur que le visiteur
       reconnaît de ses cartes et de son ancien site. */
    background-color: var(--primary);
}
.nf-page-hero .nf-page-hero-overlay {
    background: linear-gradient(135deg, rgba(9,26,50,.72) 0%, rgba(9,26,50,.30) 100%);
}
.nf-page-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 100%);
}

/* Arguments (3 colonnes) */
.nf-argument {
    text-align: center; padding: 32px 24px;
    background: #fff; border-radius: 10px; border: 1px solid #e5e7eb;
}
.nf-argument h3 {
    font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--primary);
}
.nf-argument p { font-size: 14.5px; color: #6b7280; margin: 0; line-height: 1.6; }

/* Split formulaire (contenu gauche + form droite) */
/* ⚠️ `align-items: stretch` et NON `start` : le formulaire est en `position: sticky`,
   et un élément collant ne peut glisser que dans la hauteur de SON CONTENEUR. Avec
   `start`, la colonne de droite s'arrêtait à la hauteur de la carte (670px) — le
   sticky était déclaré mais n'avait aucune piste, donc ne collait jamais. En
   `stretch`, la colonne suit la hauteur du texte et la piste passe à ~3000px. */
.nf-split-form { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: stretch; }
@media (max-width: 768px) { .nf-split-form { grid-template-columns: 1fr; } }
.nf-form-card {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 16px 22px; position: sticky; top: 116px;
    max-height: calc(100vh - 124px); overflow-y: auto;
}
.nf-form-card h2 { font-size: 17px !important; margin: 0 0 10px !important; }
.nf-form-card button[type=submit] { padding: 12px 18px; }
/* Le consentement RGPD reste lisible mais cesse de peser 78 px. */
.nf-form-card form > label { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 12px !important; }
@media (max-width: 768px) {
    .nf-form-card { max-height: none; overflow-y: visible; }
}

/* CTA bandeau */
.nf-cta-banner {
    background: var(--primary, #C92227); color: #fff;
    padding: 48px 0; text-align: center;
}
.nf-cta-banner h2 { color: #fff; margin: 0 0 8px; }
.nf-cta-banner p { color: rgba(255,255,255,0.85); margin: 0 0 24px; }

/* Footer */
.nf-footer { background: var(--sitetext, #33373d); color: rgba(255,255,255,0.75); padding: 48px 0; }
.nf-footer h4 { color: #fff; font-size: 15px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.05em; }
.nf-footer a { color: rgba(255,255,255,0.65); font-size: 13.5px; display: block; padding: 3px 0; transition: color .15s; }
.nf-footer a:hover { color: #fff; }
.nf-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0 0; margin-top: 32px;
    font-size: 12px; color: rgba(255,255,255,0.5);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* Badges certification */
.nf-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; background: rgba(255,255,255,0.15);
    border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff;
    backdrop-filter: blur(4px);
}

/* Content prose — style éditorial complet */
.nf-content { font-size: 17.5px; line-height: 1.85; color: var(--sitetext); max-width: 820px; }
.nf-content h2 {
    font-size: 26px; font-weight: 700; margin: 2.5rem 0 1rem; color: var(--sitetext);
    padding-bottom: 10px; border-bottom: 3px solid var(--accent); display: inline-block;
}
.nf-content h3 {
    font-size: 20px; font-weight: 600; margin: 2rem 0 .75rem; color: var(--sitetext);
    padding-left: 14px; border-left: 3px solid var(--accent);
}
.nf-content h4 { font-size: 17px; font-weight: 600; margin: 1.5rem 0 .5rem; }
.nf-content p { margin-bottom: 1.25rem; color: #3d4551; }
.nf-content strong { color: var(--sitetext); font-weight: 600; }
.nf-content ul, .nf-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.nf-content ul { list-style: none; padding-left: 0; }
.nf-content ul li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; color: #3d4551; }
.nf-content ul li::before {
    content: ''; position: absolute; left: 0; top: 10px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); opacity: 1;
}
.nf-content ol li { margin-bottom: .6rem; color: #4b5563; }
.nf-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.nf-content a:hover { color: var(--sitetext); }
.nf-content img { border-radius: 8px; margin: 1.5rem 0; max-width: 100%; height: auto; }
.nf-content blockquote {
    border-left: 4px solid var(--primary); padding: 1.2rem 1.5rem; margin: 2rem 0;
    background: #f9fafb; border-radius: 0 8px 8px 0; font-style: italic; color: #6b7280;
}
.nf-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 15px; }
.nf-content th { background: var(--primary); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; font-size: 14px; }
.nf-content td { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.nf-content tr:nth-child(even) td { background: #f9fafb; }
.nf-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }

/* Grille de cartes — produite au build par nf_enrichir_contenu() à partir des
   suites « titre court + un paragraphe ». Le <h3> est conservé tel quel, seule
   sa présentation change ; le filet rouge de .nf-content h3 est donc neutralisé. */
/* (Le bloc France Rénov' de Néel Fraisse est retiré : il ne concerne que la
   rénovation énergétique.) */

.nf-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 16px; margin: 1.8rem 0 2.2rem;
}
.nf-card {
    background: #fff; border: 1px solid #e8eaed; border-radius: 12px;
    padding: 22px 20px 20px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nf-card:hover {
    transform: translateY(-3px); border-color: var(--primary);
    box-shadow: 0 10px 28px rgba(17, 24, 39, .09);
}
.nf-card-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px; margin-bottom: 14px;
    background: var(--accent-tres-clair); color: var(--primary); font-size: 18px;
}
.nf-content .nf-card h3 {
    font-size: 16.5px; line-height: 1.35; font-weight: 700;
    margin: 0 0 8px; padding: 0; border: 0;
}
.nf-content .nf-card h3::before { content: none; }
.nf-content .nf-card p {
    margin: 0; font-size: 14.5px; line-height: 1.62; color: #5b6270;
}
@media (prefers-reduced-motion: reduce) {
    .nf-card { transition: none; }
    .nf-card:hover { transform: none; }
}
/* Espacer le premier h2 du contenu */
.nf-content > h2:first-child { margin-top: 0; }

/* Article image */
.article-image-h2 { width: 100%; max-height: 380px; object-fit: cover; border-radius: 8px; margin: 1rem 0 1.75rem; }

/* Grid */
.grid-nf { display: grid; gap: 24px; }
@media (min-width: 640px) { .grid-nf-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid-nf-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-nf-4 { grid-template-columns: repeat(4, 1fr); } }

/* Zone d'intervention. Les communes étaient des <span> : 30 noms affichés sur
   chaque page, dont aucun ne menait à la page correspondante. Ce sont désormais
   des liens — c'est le maillage interne du site. */
.nf-communes { display: flex; flex-wrap: wrap; gap: 8px; }
.nf-communes span, .nf-communes a {
    display: inline-block; padding: 8px 15px;
    background: #fff; border: 1px solid var(--trait); border-radius: 999px;
    font-size: 14px; color: var(--sitetext); transition: all .16s;
}
.nf-communes a:hover {
    background: var(--accent); border-color: var(--accent);
    color: #10365f; transform: translateY(-1px);
}

/* Hero badges (certifications, labels) */
.nf-hero-badges { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.nf-hero-badge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    padding: 8px 14px;
}
.nf-hero-badge img { height: 40px; width: auto; object-fit: contain; }
.nf-hero-badge span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; }

/* Hero split (texte + carousel)
   Colonne de droite à 40 % : les photos d'équipe sont en 750x938 (ratio 0,80) et
   `object-fit: cover` recadre sur l'axe où le cadre est le plus large. À 50/50 le
   cadre faisait 552x600 (ratio 0,92), donc plus large que la source : le rognage
   tombait en haut et en bas et coupait les têtes. À 40 % il fait ~461x600
   (ratio 0,77), plus ÉTROIT que la source : le rognage bascule sur les côtés, la
   hauteur du visage est intégralement conservée. */
.nf-hero-split { display: grid; grid-template-columns: 60% 40%; gap: 48px; align-items: center; }
.nf-hero-carousel { border-radius: 12px; overflow: hidden; max-height: 600px; }
.nf-swiper { width: 100%; height: 600px; }
.nf-swiper .swiper-slide img { border-radius: 0;
    /* Cadrage vers le HAUT : les photos d'équipe ne sont pas toutes au même format
       (750x938 et 750x1000 coexistent), donc un léger rognage vertical subsiste sur
       les plus hautes. Le pousser vers le bas des images garantit que ce sont les
       pieds qui partent, jamais les visages — et protège aussi les photos que Fred
       ajoutera plus tard, quel que soit leur format. */
    object-position: 50% 20%; }

/* Responsive */
@media (max-width: 768px) {
    .nf-cta-banner { padding: 32px 0; }
    h1 { font-size: 28px !important; }
    .nf-hero-split { grid-template-columns: 1fr; gap: 24px; }
    .nf-hero-carousel, .nf-swiper { max-height: 300px; height: 300px; }
}

/* Bloc de contact des pages de service : coordonnées | carte | formulaire.
   Trois colonnes ne tiennent qu'au-delà de 1024px — en dessous on passe à deux,
   puis à une seule, sinon le formulaire devient inutilisable au doigt. */
@media (max-width: 1024px) {
    .nf-contact-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
    .nf-contact-grid { grid-template-columns: 1fr !important; }
}

/* ══ Habillage propre à Taxi Pako ═══════════════════════════════════════════ */

/* Bandeau de confiance sous le hero. Quatre repères, pas plus : conventionné,
   tiers payant, ponctualité, véhicule électrique. C'est ce qu'un patient
   cherche à savoir avant tout le reste. */
.tp-confiance { background: var(--creme); border-bottom: 1px solid var(--trait); }
.tp-confiance__grille {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0; padding: 0;
}
.tp-confiance__item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 26px 24px; border-left: 1px solid var(--trait);
}
.tp-confiance__item:first-child { border-left: 0; }
.tp-confiance__ico {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #10365f; font-size: 18px;
}
.tp-confiance__t { font-weight: 700; font-size: 15.5px; margin: 0 0 3px; line-height: 1.3; }
.tp-confiance__p { margin: 0; font-size: 14px; color: var(--secondary); line-height: 1.5; }
@media (max-width: 900px) {
    .tp-confiance__grille { grid-template-columns: repeat(2, 1fr); }
    .tp-confiance__item:nth-child(odd) { border-left: 0; }
    .tp-confiance__item:nth-child(n+3) { border-top: 1px solid var(--trait); }
}
@media (max-width: 560px) {
    .tp-confiance__grille { grid-template-columns: 1fr; }
    .tp-confiance__item { border-left: 0; }
    .tp-confiance__item + .tp-confiance__item { border-top: 1px solid var(--trait); }
}

/* Repères du hero : les trois arguments décisifs, lisibles avant le pli. */
.tp-puces { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.tp-puces li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
    font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.92);
}
.tp-puces i { color: var(--accent); font-size: 12px; }
.tp-puces li { border-radius: 999px; }

/* « Comment ça marche » : trois étapes numérotées. Le numéro est en ambre plein,
   il tient lieu de repère visuel — pas d'icône décorative qui n'apprend rien. */
.tp-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .tp-etapes { grid-template-columns: 1fr; gap: 20px; } }
.tp-etape {
    position: relative; background: #fff;
    border: 1px solid var(--trait); border-radius: 10px; padding: 30px 26px 26px;
}
.tp-etape__n {
    position: absolute; top: -18px; left: 26px;
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #10365f;
    font-family: var(--font-heading); font-weight: 800; font-size: 19px;
}
.tp-etape h3 { font-size: 18px; margin: 8px 0 10px; }
.tp-etape p { margin: 0; font-size: 15px; color: var(--secondary); line-height: 1.62; }

/* Bandeau d'appel final : fond sombre, ambre pour l'action. */
.nf-cta-banner { background: var(--sitetext); }
.nf-cta-banner h2 { font-size: 30px; }

/* Sections en alternance : crème et non gris froid. */
.tp-creme { background: var(--creme); }

/* Le pied de page reprend le pétrole plutôt que le noir, pour ne pas faire deux
   grands aplats noirs de suite avec le bandeau d'appel. */
.nf-footer { background: var(--primary); }
.nf-footer a:hover { color: var(--accent); }

/* Titre de section, motif commun aux pages. */
.tp-titre-section { text-align: center; margin-bottom: 44px; }
.tp-titre-section h2 { font-size: 32px; margin: 0 0 12px; }
.tp-titre-section p { color: var(--secondary); max-width: 620px; margin: 0 auto; font-size: 16.5px; }
.tp-sur { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--primary); margin: 0 0 10px; }
.tp-sur::after { content: ''; display: block; width: 34px; height: 3px; background: var(--accent); margin: 8px auto 0; }

@media (prefers-reduced-motion: reduce) {
    .btn-nf, .nf-communes a, .card-nf { transition: none; }
    .nf-communes a:hover, .card-nf:hover { transform: none; }
}

/* Menu déroulant large : les 30 communes tiennent sur trois colonnes. Il est
   ancré à droite plutôt qu'à gauche, sinon il déborde hors de l'écran quand
   l'entrée parente est déjà loin dans la barre. */
.nf-dropdown--large {
    left: auto; right: 0;
    min-width: 620px; padding: 14px 10px;
    columns: 3; column-gap: 6px;
}
.nf-dropdown--large a { padding: 6px 14px; font-size: 13.5px; break-inside: avoid; }
@media (max-width: 1200px) { .nf-dropdown--large { min-width: 480px; columns: 2; } }

/* Barre du haut, purement informative. Le numéro d'agrément est abrégé sous 860 px
   et la zone disparaît sous 1100 : à ces largeurs, les deux mentions se
   chevaucheraient. Rien n'est perdu — l'agrément est repris dans le bandeau de
   confiance et dans les mentions légales, la zone dans le menu et le pied de page. */
.nf-topbar .tp-tb-court { display: none; }
/* Sous 1100 px la note se réduit à « ★ 5,0/5 » : le décompte des avis et le
   numéro d'agrément se chevaucheraient. */
@media (max-width: 860px) {
    .nf-topbar .tp-tb-long  { display: none; }
    .nf-topbar .tp-tb-court { display: inline; }
}

/* Bouton d'appel de l'en-tête : présent à toutes les tailles. Sous 520 px il ne
   garde que l'icône — le numéro entier pousserait le menu hors de l'écran — mais
   il reste une cible de 42 px, et son intitulé accessible est conservé. */
.nf-header .tp-tel-head { display: inline-flex; }
@media (max-width: 520px) {
    .nf-header .tp-tel-head { padding: 9px 14px; }
    .nf-header .tp-tel-head span { display: none; }
}

/* Le hero est passé du noir au bleu de la charte : les repères en verre dépoli
   avaient été calibrés sur le noir et s'y perdaient. On remonte l'opacité. */
.tp-hero .tp-puces li, .nf-page-hero .tp-puces li {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30);
}

/* Bandeau de titre des pages intérieures : texte à gauche, photo à droite.
   La photo ne dépasse jamais sa définition d'origine (465 px), elle reste donc
   nette ; sous 900 px elle passe sous le texte, et disparaît sur mobile où elle
   ne ferait que repousser le bouton d'appel hors de l'écran. */
.tp-hero-grille { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.tp-hero-photo img {
    display: block; width: 100%; max-width: 400px; height: auto;
    border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
@media (max-width: 900px) { .tp-hero-grille { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 600px) { .tp-hero-photo { display: none; } }

/* Communes du pied de page : `.nf-footer a` les met en `display:block`, chacune
   partirait donc sur sa propre ligne. En ligne continue, séparées par un point
   médian, elles tiennent en trois lignes au lieu de trente. */
.nf-footer-communes a, .nf-footer-communes span { display: inline; padding: 0; font-size: 13px; }
.nf-footer-communes a { color: rgba(255,255,255,.78); text-decoration: none; }
.nf-footer-communes a:hover { color: var(--accent); text-decoration: underline; }
.nf-footer-communes span { color: rgba(255,255,255,.6); }

/* Grilles à deux colonnes des sections de contenu.
   ⚠️ Elles étaient déclarées en style EN LIGNE, où aucune media query ne peut
   exister : `grid-template-columns:1fr 1fr` restait donc actif à 360 px et le
   formulaire de contact tenait sur une demi-largeur. Une colonne par défaut, deux
   seulement au-delà de 900 px, le rapport venant de `--tp-cols`. */
.tp-duo { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 900px) { .tp-duo { grid-template-columns: var(--tp-cols, 1fr 1fr); } }

/* Note Google dans la barre du haut. Le jaune de la charte sur le bleu donne
   6,5:1 — l'étoile reste parfaitement lisible, contrairement à ce même jaune sur
   blanc. */
.nf-topbar .tp-tb-avis {
    display: inline-flex; align-items: center; gap: 7px;
    color: #fff; font-weight: 600; white-space: nowrap;
}
.nf-topbar .tp-tb-avis i { color: var(--accent); font-size: 12px; }
.nf-topbar .tp-tb-avis:hover { color: var(--accent); }
@media (max-width: 1100px) { .nf-topbar .tp-tb-avis .tp-tb-long { display: none; } }

:root {
    --color-primary:   #17478a;
    --color-secondary: #54595f;
    --color-text:      #101418;
    --color-bg:        #ffffff;
    --color-muted:     #f7f8fa;
    --color-border:    #ebedf1;
    --color-premium:   #b8860b;
    --radius: 0;
    --card-shadow: none;
    --card-border: 1px solid var(--color-border);
    --card-bg: var(--color-bg);
    --btn-radius: 3px;
    --img-radius: 0;
}

/* ── Base responsive (généré automatiquement) ── */
*, *::before, *::after { box-sizing: border-box; }

/* Empêche le débordement horizontal.
   ⚠️ `clip` et NON `hidden` : en CSS, un axe en `hidden` force l'autre à `auto`,
   ce qui fait du corps de page une boîte de défilement — et casse tout
   `position: sticky` du site sans rien signaler. Constaté le 19/08/2026 sur
   COMIGO : la scène de l'animation défilait au lieu de rester figée.
   `clip` bloque le même débordement sans créer de boîte de défilement. */
html, body { overflow-x: clip; max-width: 100%; }

/* Images et vidéos toujours dans leur conteneur */
img, video { max-width: 100%; height: auto; }
/* iframe : largeur 100% mais hauteur respectée (ex. Google Maps) */
iframe, embed, object { max-width: 100%; }

/* Tableaux : scroll horizontal si besoin, jamais de débordement */
table { max-width: 100%; }
.zone-content table,
.page-content table,
.article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Texte long (URL, code) : retour à la ligne forcé */
.zone-content,
.page-content,
.article-content {
    overflow-wrap: break-word;
    word-break: break-word;
}