/* Charte dentagest.ch — reprise intégrale du <style> de maquette-home.html. */
:root {
  --navy: #141529;
  --cyan: #2BB3E6;
  --magenta: #E6197E;
  --white: #FFFFFF;
  --grey-bg: #F4F6FA;
  --text: #2A2C42;
  /* Accessibilité : #69788a assombri en #55647A (WCAG AA — 4.17:1 → 5.56:1 sur --grey-bg,
     4.51:1 → 6.02:1 sur blanc). Ce n'est pas une couleur de la charte, seulement le gris texte. */
  --muted: #55647A;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Échelle typo relevée : base 16px → 17px (retour Simon 31.07.2026, « typos
   encore petites » — même leçon que la charte PDF, échelle +20% le 28.07).
   Toute l'échelle rem suit proportionnellement. */
html { font-size: 106.25%; }
body { font-family: 'Lato', Arial, sans-serif; color: var(--text); line-height: 1.6; background: var(--white); }
h1, h2, h3 { font-family: 'Poppins', Arial, sans-serif; line-height: 1.25; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* ---- Rythme vertical (refactor rythme vertical 02.08.2026) ----
   Le reset global (* { margin: 0 }) laisse tous les enchaînements à zéro :
   chaque marge est donc une décision. Ces marges vivaient en style="" inline
   répétés dans les pages — regroupées ici pour que le rythme du texte soit
   défini UNE fois et suivi partout. Les cas dérogatoires (largeurs 640/760px,
   marges 18/26px isolées) restent volontairement en inline dans les pages. */
/* Les sup/sub (®, 1er, *) ne doivent JAMAIS gonfler la hauteur de leur
   ligne (retour Simon 02.08, FAQ : interligne irrégulier). */
sup, sub { line-height: 0; }
/* Respiration entre un paragraphe (souvent « … : ») et la liste qui suit
   (retour Simon 02.08, cards formations trop serrées). Global : cards,
   splits, FAQ, prose. */
p + ul, p + ol { margin-top: 10px; }
/* L'intro canonique de section : le paragraphe qui suit le titre respire
   (14px) et garde une longueur de ligne lisible (~75 caractères → 720px).
   Une largeur dérogatoire posée en inline (640/760px) prime sur le 720px. */
.section-title + p { margin-top: 14px; max-width: 720px; }
/* Rubriques des pages FAQ : le h3 navy qui chapeaute chaque groupe .faq,
   qu'il ouvre la section (après le titre) ou enchaîne après un groupe.
   Enchaînement plutôt que classe dédiée : les 11 occurrences (inventaire
   02.08.2026) sont toutes dans ces deux positions — le markup reste intact. */
.section-title + h3, .faq + h3 { margin-top: 32px; color: var(--navy); }
/* Le .cta-row qui conclut une section de contenu se détache du texte (22px).
   Le combinateur ~ (frère quelconque après le titre) exclut par construction
   les .cta-row de hero, précédés d'un h1 — jamais d'un .section-title. */
.section-title ~ .cta-row { margin-top: 22px; }
/* Chrome pleine largeur (header/footer) vs contenu à 1080px — retour Simon
   31.07.2026. Borné à 1880px pour ne pas coller aux bords en 4K. */
.wrap-wide { max-width: 1880px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 860px) { .wrap-wide { padding: 0 24px; } }
section { padding: 64px 0; }
.kicker { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); border-bottom: 2px solid var(--magenta); display: inline-block; padding-bottom: 4px; margin-bottom: 18px; }
h2.section-title { color: var(--navy); font-size: clamp(1.4rem, 3vw, 1.9rem); }
/* Titres bicolores : l'effet d'accroche (em magenta italique) est réservé au hero
   (un h1 par page) — décision Simon 31.07.2026. Les <em> restent dans le markup des
   h2 de section : l'italique garde l'emphase, la couleur suit le titre (navy).
   Réactivable ponctuellement en repassant color: var(--magenta) sur un cas précis. */
h2.section-title em { color: inherit; font-style: italic; }
.btn { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; text-decoration: none; border-radius: 8px; padding: 14px 30px; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,21,41,.18); }
.btn-cyan { background: var(--cyan); color: var(--navy); }
.btn-cyan:hover { background: var(--magenta); color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border: 2px solid var(--cyan); }
.btn-ghost:hover { background: var(--magenta); border-color: var(--magenta); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--magenta); color: var(--white); }

/* ---- Header / navigation ---- */
.topbar { background: var(--white); border-bottom: 1px solid #E3E7F0; position: sticky; top: 0; z-index: 50; }
.topbar-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.wordmark { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.45rem; color: var(--navy); text-decoration: none; }
.wordmark .dot { color: var(--magenta); }
.mainnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mainnav > a:not(.btn), .mainnav .has-sub > a { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.88rem; color: var(--navy); text-decoration: none; padding: 24px 10px; display: inline-block; white-space: nowrap; }
.mainnav > a:not(.btn):hover, .mainnav .has-sub:hover > a { color: var(--magenta); }
.has-sub { position: relative; }
.has-sub > a::after { content: " \25BE"; font-size: 0.7em; color: var(--cyan); }
.has-sub .sub { display: none; position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid #E3E7F0; border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(20,21,41,.10); min-width: 200px; padding: 8px 0; }
/* :focus-within (02.08, audit a11y) : sous-menu aussi ouvert quand un lien
   du groupe a le focus clavier — sans lui, 6 entrées inaccessibles en Tab. */
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.sub a { display: block; padding: 9px 18px; font-size: 0.9rem; color: var(--text); text-decoration: none; }
.sub a:hover { background: var(--grey-bg); color: var(--magenta); }
.btn-nav { padding: 10px 20px; margin-left: 10px; white-space: nowrap; font-size: 0.88rem; }

/* ---- Hero ---- */
/* Fond dégradé sur TOUS les heros (décision Simon 01.08 : plus d'aplat) ;
   le ciel animé .hero-aurora est réservé à home/actualités/ebilling. */
.hero { background: linear-gradient(180deg, #141529 0%, #171F3D 55%, #1B2A50 100%); color: var(--white); padding: 80px 0 72px; position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; color: #FFFFFF; }
.hero h1 em { font-style: italic; color: var(--magenta); }
.hero .sub { margin: 22px 0 30px; font-size: 1.12rem; color: #E8EAF4; max-width: 560px; }
/* cta-row : espacement par gap (les marges hero-only laissaient les
   boutons collés hors hero — helpcenter, retour Simon 02.08). */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }

/* ---- Cards prestataire ---- */
.bg-grey { background: var(--grey-bg); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 36px; }
/* Variante 2 colonnes (retour Simon 01.08) : cards à texte long (ex. personas
   /logiciel) trop étroites en 4 colonnes → 2 par ligne, 1 en mobile. */
.grid-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .grid-cards.cols-2 { grid-template-columns: 1fr; } }
.card { background: var(--white); border: 1px solid #E3E7F0; border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; }
.card h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 10px; }
.card ul { list-style: none; margin-bottom: 18px; }
.card li { padding-left: 20px; position: relative; margin-bottom: 4px; }
/* DOCTRINE couleur (Simon, 02.08) : cyan/magenta = éléments INTERACTIFS
   (chevron FAQ qui ouvre, .more animé). Les puces \203A décoratives des
   listes = NAVY : visuel typographique, pas une invite au clic. */
.card li::before { content: "\203A"; position: absolute; left: 0; color: var(--navy); font-weight: 700; }
.card .more { margin-top: auto; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--magenta); text-decoration: none; }
.card .more:hover { text-decoration: underline; }

/* Deux styles de cards — décision Simon 31.07.2026 :
   - .card (contenu) : statique, AUCUN effet hover ;
   - .card-link (cliquable) : la card ENTIÈRE est un lien <a class="card card-link">,
     sans <a> imbriqué — le « En savoir plus » devient un <span class="more">.
     Au hover : légère élévation, bordure cyan, ombre douce, chevron du .more décalé. */
a.card-link { color: var(--text); text-decoration: none; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.card-link .more::after { content: "\203A"; display: inline-block; margin-left: 7px; transition: transform .18s ease; }
a.card-link:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 10px 22px rgba(20,21,41,.12); }
a.card-link:hover .more::after { transform: translateX(4px); }
a.card-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* « Lever de soleil » dans le hero (test actualités, retour Simon 01.08) :
   lueurs radiales aux couleurs de l'orbe ebilling (cyan/magenta), montant de
   l'horizon bas-droit — derrière le contenu (.hero .wrap est en z-index 1),
   opacités basses pour préserver le contraste du titre à gauche. */
/* v3 (retour Simon : encore trop discret, bandeau trop foncé) —
   base dégradée (plus d'aplat) + HORIZON lumineux sur toute la largeur. */
/* v4 FINALE (choix Simon 01.08, page test-aurora.html) : fond bleu nuit de la
   V4 + éclairage « couchant chaud » de la V2 — magenta, violet et une pointe
   d'AMBRE (rgba(255,158,94)/(255,180,110) : hors charte, tolérée uniquement
   comme lumière d'ambiance, jamais en couleur d'UI). */
.hero-aurora::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* Multi-éclairage v3 (01.08) : l'éclairage chaud validé (magenta/violet/
       ambre, inchangé) + DÔME BLEU arrondi centré en bas — la luminosité du
       ciel change en arc au-dessus de l'horizon. */
    linear-gradient(0deg, rgba(230,25,126,.26), transparent 22%),
    radial-gradient(65% 74% at 60% 122%, rgba(230,25,126,.5), transparent 66%),
    radial-gradient(60% 70% at 88% 124%, rgba(124,58,183,.55), transparent 68%),
    radial-gradient(32% 38% at 54% 116%, rgba(255,158,94,.42), transparent 58%),
    radial-gradient(74% 54% at 50% 120%, rgba(70,140,235,.36), transparent 72%);
}
/* Couche animée : l'aube « respire » du subtil à l'intense (cycle ~8s),
   avec une légère dérive — v2 après retour Simon (« trop subtil »). */
.hero-aurora::after {
  content: ""; position: absolute; inset: -12% -6%; pointer-events: none;
  background:
    radial-gradient(38% 48% at 54% 114%, rgba(255,180,110,.6), transparent 60%),
    radial-gradient(50% 60% at 78% 118%, rgba(230,25,126,.55), transparent 64%),
    radial-gradient(44% 52% at 90% 124%, rgba(124,58,183,.5), transparent 64%);
  animation: aurora-breathe 7s ease-in-out infinite alternate;
}
/* Respiration plus marquée (retour Simon) : amplitude d'opacité ET de taille. */
@keyframes aurora-breathe {
  from { opacity: .12; transform: translateX(0) scale(.94); }
  to   { opacity: 1; transform: translateX(-3%) scale(1.18); }
}
/* BRUME (retour Simon 01.08) : nappes floutées sur la moitié droite du bandeau,
   cycle 13s désynchronisé de la respiration (7s) → mouvement organique.
   Portée par .wrap::before (z-index -1 : au-dessus des lueurs, sous le texte). */
.hero-aurora .wrap::before {
  content: ""; position: absolute; z-index: -1; inset: -25% -35% -50% 32%;
  pointer-events: none; filter: blur(26px);
  background:
    radial-gradient(42% 55% at 68% 72%, rgba(230,25,126,.32), transparent 66%),
    radial-gradient(36% 46% at 86% 38%, rgba(124,58,183,.38), transparent 66%),
    radial-gradient(30% 40% at 58% 52%, rgba(255,158,94,.2), transparent 62%),
    radial-gradient(34% 44% at 78% 60%, rgba(70,140,235,.22), transparent 64%);
  animation: aurora-smoke 13s ease-in-out infinite alternate;
}
@keyframes aurora-smoke {
  0%   { transform: translate(0, 5%) scale(1); opacity: .35; }
  55%  { transform: translate(-5%, -3%) scale(1.14); opacity: .85; }
  100% { transform: translate(3%, -7%) scale(1.04); opacity: .5; }
}
/* Mobile : brume coupée (blur animé coûteux en GPU, illisible en petit) et
   respiration plafonnée — le ciel reste un décor. */
@media (max-width: 860px) {
  .hero-aurora .wrap::before { display: none; }
  .hero-aurora::after { animation-duration: 9s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora .wrap::before { animation: none; opacity: .45; }
  .hero-aurora::after { animation: none; opacity: .55; }
}

/* Liens dans le TEXTE COURANT (tél, e-mails, documents) — retour Simon 01.08 :
   même taille/famille que le texte, couleur lisible (#176F94 ≈ 5.0:1 sur blanc
   et sur --grey-bg), soulignement cyan décalé, hover magenta. Exclusions :
   boutons, footer (cyan sur sombre), bandeau CTA, hero. */
:is(p, li, .note) a:not(.btn, .tel-pill, footer a, .cta-band a, .hero a) {
  font: inherit; color: #176F94;
  text-decoration: underline; text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
:is(p, li, .note) a:not(.btn, .tel-pill, footer a, .cta-band a, .hero a):hover { color: var(--magenta); text-decoration-color: var(--magenta); }

/* Pastille téléphone (retour Simon 02.08, cards horaires de /contact) :
   esprit des chips actualités (blanc, bordure grise, pilule) mais
   INTERACTIVE → affordance au hover (bord cyan, texte magenta). */
a.tel-pill { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--navy); background: var(--white); border: 1px solid #C6CEDD; border-radius: 999px; padding: 8px 18px; text-decoration: none; transition: border-color .18s ease, color .18s ease, box-shadow .18s ease; }
a.tel-pill:hover { border-color: var(--cyan); color: var(--magenta); box-shadow: 0 3px 10px rgba(20,21,41,.08); text-decoration: none; } /* le :hover souligné de footer a est plus spécifique → neutralisé ici */
a.tel-pill:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Voyant ouvert/fermé (JS status-horaires.njk, 02.08) : vert = ouvert,
   gris = fermé (pas de rouge : anxiogène + piège daltonien ; le title/aria
   porte le texte). Absent si JS coupé — progressive enhancement. */
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.status-dot.on { background: #2FBF71; }
.status-dot.off { background: #8A8FA3; }
/* En-tête de card : titre à gauche, tel-pill à droite sur la même ligne
   (retour Simon 02.08). flex-wrap = repli propre si trop étroit. */
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.card-head h3 { margin-bottom: 0; }
/* Grille horaires : 1 colonne dès que les cards passeraient sous 420px
   (titre+pill coincés sinon) ; min(420px,100%) évite tout débordement. */
.grid-horaires { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

/* ---- Metrics ---- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px 34px; margin-top: 36px; }
/* Retour Simon 01.08 (itération 2) : le filet cyan au-dessus = « too
   much ». Référence choisie par Simon : brochure DentalBern p.2 —
   chiffres NUS, sans boîte ni filet : gros chiffre navy, « + » en
   magenta (<span class="plus">), label italique muted dessous. */
.metric .num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 2.6rem; color: var(--navy); line-height: 1.1; }
.metric .num .plus { color: var(--magenta); }
.metric .label { color: var(--muted); margin-top: 4px; font-style: italic; }

/* ---- Partenaires ---- */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; margin-top: 32px; }
.logo-ph { height: 64px; border-radius: 8px; background: var(--white); border: 2px dashed #8A99B5; display: flex; align-items: center; justify-content: center; color: #55647A; font-size: .85rem; font-style: italic; box-shadow: 0 1px 3px rgba(20,21,41,.06); }

/* ---- Bandeau CTA diagonal — INVERSÉ (P1 31.07.2026) ----
   Navy à gauche (60 %), cyan à droite : écho exact du hero, la page « se ferme »
   comme elle s'est ouverte. Le titre vit sur navy (blanc + em magenta, comme le
   hero h1), le bloc contact vit sur cyan (tout en navy). */
.cta-band { background: linear-gradient(100deg, var(--navy) 60%, var(--cyan) 60%); color: var(--white); padding: 56px 0; }
.cta-band .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cta-band h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); color: var(--white); }
/* Accessibilité (bandeau inversé) : le titre est désormais sur NAVY → l'em magenta
   redevient possible (magenta sur navy = 4.11:1, AA texte large, même couple que le
   hero h1 validé). Les interdits demeurent côté CYAN : magenta sur cyan = 1.81:1 et
   blanc sur cyan = 2.42:1 → tout le bloc contact est en navy (7.44:1), hover souligné
   (pas de changement de couleur possible sans casser AA sur cyan). */
.cta-band h3 em { color: var(--magenta); font-style: italic; }
.cta-band .sub { margin-top: 10px; max-width: 480px; color: #E8EAF4; }
.cta-contact { text-align: right; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 600; }
.cta-contact a { color: var(--navy); text-decoration: none; display: block; margin-bottom: 6px; font-size: 1.08rem; }
.cta-contact a:not(.btn):hover { text-decoration: underline; }
/* Bouton du bandeau : sur fond cyan → btn-navy (hover magenta, cohérent charte).
   margin-top : le bouton se détache des liens tel/e-mail empilés au-dessus —
   marge rapatriée des 12 style="" inline (refactor rythme vertical 02.08.2026). */
.cta-contact .btn { display: inline-block; background: var(--navy); color: var(--white); margin-top: 10px; }
.cta-contact .btn:hover { background: var(--magenta); color: var(--white); }

/* ---- Card annonce flottante (.annonce-flottante, 02.08.2026, v2) ----
   Annonce Ebilling de la home, phase lancement : card blanche centrée qui
   MORD sur le bas du hero navy (margin-top négatif), ombre portée, filet
   dégradé cyan→magenta en tête (écho de l'orbe ebilling). Le fond gris de
   la section « Ce que nous faisons » qui suit continue sous la card pour
   que le débord se lise. À retirer en phase croisière. */
/* padding bas : respiration sous la card (retour Simon) — s'additionne au
   padding haut de la section grise suivante (fond continu). */
.annonce-flottante { background: var(--grey-bg); padding: 0 0 40px; }
/* Respiration entre les boutons du hero et la card (retour Simon : « hyper
   serré ») : le hero de la home regagne en bas ce que la card lui mord. */
.hero-annonce { padding-bottom: 110px; }
/* v4 (retours Simon) : diagonale ABANDONNÉE (le rendu pixelisait, et un CTA
   très marqué de plus surchargeait la zone — le hero en a déjà deux). Card
   blanche, bouton discret .btn-blanc, aligné en bas sur la dernière ligne.
   v5 : card en DÉBORD latéral, CONTENU sur l'axe du .wrap (padding = |débord|,
   pattern de la vedette actualités) — débord -24px (= padding du wrap : bord à
   bord sous 1080px sans scrollbar), -56px dès 1160px (le débord reste dans la
   gouttière). Sous 1080px la card est flush → radius/bordures latérales 0
   (pattern full-bleed mobile). */
.card-annonce { position: relative; z-index: 2; margin-top: -56px; margin-inline: -24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; background: var(--white); border: 1px solid #E3E7F0; border-radius: 14px; box-shadow: 0 18px 44px rgba(20,21,41,.14); padding: 30px 24px; overflow: hidden; }
@media (min-width: 1160px) { .card-annonce { margin-inline: -56px; padding: 34px 56px; } }
@media (max-width: 1079px) { .card-annonce { border-radius: 0; border-inline: none; } }
.card-annonce::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cyan), var(--magenta)); }
.card-annonce h2 { margin-top: 12px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--navy); }
.card-annonce h2 em { color: var(--magenta); font-style: italic; }
.card-annonce > div > p { margin-top: 8px; color: var(--muted); max-width: 560px; }
/* .cta-stack (02.08, retour Simon /formations) : quand les libellés sont trop
   longs pour tenir côte à côte dans la colonne du hero, on ASSUME l'empilement
   à largeur unique (même recette que les boutons mobile, min(100%,340px)) —
   plutôt que deux largeurs disparates. Modificateur à poser sur le .cta-row. */
.cta-stack .btn { width: min(100%, 340px); text-align: center; }
.annonce-cta { margin: 0; align-self: stretch; align-items: flex-end; }
.annonce-cta .btn { white-space: nowrap; }
/* Bouton SECONDAIRE du site (doctrine hiérarchie 02.08, née sur la card
   annonce puis généralisée sur retour Simon « les navy sur fond clair
   jurent ») : blanc cassé + bordure cyan (écho du hover des .card-link),
   texte navy ; hover magenta + levée = doctrine boutons. Niveaux : PRIMAIRE
   plein (cyan sur sombre / navy sur clair, UN par zone) · SECONDAIRE
   .btn-blanc (navigation, utilitaires) · GHOST fonds sombres seulement. */
.btn-blanc { background: #F6F8FC; border: 1.5px solid var(--cyan); color: var(--navy); }
.btn-blanc:hover { background: var(--white); border-color: var(--magenta); color: var(--magenta); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,21,41,.12); }
@media (max-width: 700px) {
  .card-annonce { margin-top: -40px; padding: 24px; }
  .annonce-cta { align-self: auto; }
  .hero-annonce { padding-bottom: 90px; }
}

/* ---- Zone promo nouveauté (.promo-new, 02.08.2026) ----
   Section vedette « Nouvelle fonctionnalité 2026 » de /fonctionnalites (Ebilling).
   Fond = dégradé navy des heros (sans aurora ni orbe), kicker cyan comme les heros,
   em magenta sur navy = couple AA validé du cta-band. Phase croisière : la zone
   redevient une section claire normale (classe à retirer avec le kicker daté). */
.promo-new { background: linear-gradient(135deg, var(--navy), #171F3D 55%, #1B2A50); color: var(--white); padding: 56px 0; }
.promo-new .kicker { color: var(--cyan); border-color: var(--cyan); }
.promo-new .section-title { color: var(--white); }
.promo-new .section-title em { color: var(--magenta); }
.promo-new .sub { color: #E8EAF4; max-width: 720px; }
.promo-new .chevrons { margin: 26px 0 0; }
.promo-new .cta-row { margin-top: 26px; }

/* ---- Footer v3 (refonte 02.08.2026, décision Simon) ----
   2 blocs seulement — Support (large) + Liens — sur l'axe du contenu
   (.wrap 1080px) ; l'ADRESSE a rejoint la barre du bas avec le copyright,
   le wordmark a disparu (le logo vit déjà dans le header). Le flex-wrap
   suffit à toutes les tailles : si Liens ne tient pas, il passe dessous,
   aligné à gauche — plus aucune zone « puzzle ». */
footer { background: #0D0E1D; color: #B9BCD0; font-size: .92rem; padding: 52px 0 24px; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 44px 72px; }
.foot-grid h4 { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--white); font-size: 1rem; margin-bottom: 12px; }
footer a { color: var(--cyan); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.foot-grid p + p { margin-top: 8px; }
/* v4 (02.08) : plus d'horaires dans le footer — numéros en tel-pills
   sombres + lien « Horaires détaillés » vers /contact (source unique). */
.foot-tels { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2px; }
/* Empilées (mobile), les deux pills doivent avoir la MÊME largeur (retour
   Simon 02.08) — même doctrine que .cta-stack pour les boutons. */
@media (max-width: 920px) {
  .foot-tels { flex-direction: column; }
  .foot-tels .tel-pill { width: min(100%, 300px); }
}
a.tel-pill.tel-pill-dark { background: #171A31; border-color: #2E3150; color: var(--white); }
a.tel-pill.tel-pill-dark .lbl { color: var(--cyan); margin-right: 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
a.tel-pill.tel-pill-dark:hover { border-color: var(--cyan); color: var(--white); }
/* Barre du bas : © + adresse + contacts sur une ligne, segments insécables
   (le repli se fait ENTRE les segments, jamais dedans). */
.foot-bottom { border-top: 1px solid #23253F; margin-top: 44px; padding-top: 20px; text-align: center; font-size: .85rem; color: #7E8299; }
.foot-bottom span { white-space: nowrap; }

/* ---- Responsive ---- */
/* (Le .mainnav { display: none } ≤1239px vit dans le bloc burger « Ajouts
   Eleventy » plus bas — doublon retiré ici au nettoyage 02.08.2026.) */
@media (max-width: 860px) {
  section { padding: 44px 0; }
  .topbar-inner { justify-content: space-between; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { font-size: 1.7rem; }
  /* CTA mobile : contenu empilé → la diagonale coupait le bloc contact
     (e-mail navy sur navy, illisible). Fail-safe : tout le texte vit sur le
     navy (blanc), bouton inversé, cyan = bande décorative en bas. */
  .cta-band { background: linear-gradient(160deg, var(--navy) 82%, var(--cyan) 82%); }
  .cta-band .wrap { grid-template-columns: 1fr; }
  .cta-contact { text-align: left; color: var(--white); }
  .cta-contact a { color: var(--white); }
  .cta-contact .btn { background: var(--white); color: var(--navy); }
}

/* Cards full-bleed mobile : en 1 colonne, la card déborde du padding du
   .wrap (24px) → son texte intérieur (padding 24px) retombe sur l'axe du
   texte des sections (reste le 1px de bordure, invisible). Image bord à
   bord écran. Radius/bordures latérales retirés (card collée aux bords).
   630px = seuil où .grid-cards (auto-fit 280px) passe en 1 colonne ;
   .cols-2 bascule à 700px → requête dédiée. */
@media (max-width: 630px) {
  .grid-cards .card { margin-inline: -24px; border-radius: 0; border-inline: 0; }
  /* Cards larges (1 col) : 130px de haut = bandeau écrasé (retour Simon
     02.08) → hauteur proportionnelle, plafonnée. */
  .grid-cards .card .card-img { border-radius: 0; height: min(46vw, 240px); }
  /* Boutons empilés : largeur UNIQUE (2e retour Simon 02.08 — la min-width
     de 250px laissait « Télécharger pour Windows » déborder). Tous les
     boutons d'un cta-row font la même largeur sur mobile. */
  .cta-row .btn { width: min(100%, 340px); text-align: center; }
}
/* Heros : la colonne texte est étroite bien avant 630px → les boutons s'y
   replient dès ~1050px. Largeur unique aussi sur cette plage (3e retour
   Simon 02.08). Hors hero, la règle 630px ci-dessus suffit. */
@media (max-width: 1049px) {
  .hero .cta-row .btn { width: min(100%, 340px); text-align: center; }
}
@media (max-width: 700px) {
  .grid-cards.cols-2 .card { margin-inline: -24px; border-radius: 0; border-inline: 0; }
  .grid-cards.cols-2 .card .card-img { border-radius: 0; height: min(46vw, 240px); }
}

/* ================================================================
   Ajouts squelette Eleventy (hors maquette) — médias réels + nav active
   ================================================================ */
/* État actif de la navigation (piloté par la variable de page navActive) */
.mainnav > a.actif:not(.btn), .mainnav .has-sub > a.actif { color: var(--magenta); }
.sub a.actif { color: var(--magenta); }
/* Bouton contact du header sur /contact (retour Simon 02.08) : magenta plein
   — même langage que son hover. */
.btn-nav.actif { background: var(--magenta); }

/* Pastille « Nouveau » (phase lancement Ebilling, 02.08.2026) — chip contour +
   magenta, esprit badge vedette actualités. À retirer en phase croisière. */
.tag-new { display: inline-block; padding: 4px 9px 3px; line-height: 1; border: 1px solid var(--magenta); border-radius: 999px; font-family: 'Poppins', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--magenta); }
/* Dans le sous-menu : la pastille suit le libellé « Ebilling » (marge + calage
   sur la ligne de texte — hors nav elle vit seule, alignée à gauche). */
.sub .tag-new { margin-left: 6px; vertical-align: 2px; }

/* Vidéo réelle du hero (remplace .media-ph) */
.hero-video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; border: 1px solid rgba(43,179,230,.35); background: #1E2040; }

/* Image réelle des cards (remplace le placeholder .img-ph des maquettes, supprimé
   au nettoyage 02.08.2026). Bord à bord : marges négatives = padding de la card
   (26px 24px), radius haut = radius card (12px) − bordure (1px), 0 en bas. */
.card .card-img { display: block; width: calc(100% + 48px); height: 130px; object-fit: cover; margin: -26px -24px 18px; border-radius: 11px 11px 0 0; }

/* ================================================================
   Ajouts maquettes pages intérieures (composants charte, communs
   aux 4 pages logiciel / services / formations / qui-sommes-nous)
   — fusion UNIQUE et dédupliquée du bloc <style> des 4 maquettes.
   ================================================================ */
/* Hauteur minimum des heros (retour Simon 01.08 : hauteur trop variable
   selon le contenu) + centrage vertical du contenu. */
.hero { display: flex; align-items: center; min-height: 430px; }
.hero > .wrap { width: 100%; }
.hero.hero-compact { padding: 60px 0 52px; min-height: 360px; }
.hero.hero-compact .wrap { display: block; }
.hero.hero-compact h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); max-width: 780px; }
.hero .kicker { color: var(--cyan); border-color: var(--cyan); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 40px; }
.split h3 { color: var(--navy); font-size: 1.25rem; margin-bottom: 10px; }
.split ul { list-style: none; margin: 12px 0 16px; }
.split li { padding-left: 20px; position: relative; margin-bottom: 6px; }
.split li::before { content: "\203A"; position: absolute; left: 0; color: var(--navy); font-weight: 700; } /* doctrine couleur : décoratif = navy */
.split .more { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--magenta); text-decoration: none; }
.split .more:hover { text-decoration: underline; }
.ph { border-radius: 10px; background: linear-gradient(135deg, #E7EDF6, #F4F6FA); border: 1px dashed #C6CEDD; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .85rem; font-style: italic; min-height: 220px; text-align: center; padding: 16px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 44px; margin-top: 28px; list-style: none; }
.cols li { padding-left: 20px; position: relative; margin-bottom: 6px; }
.cols li::before { content: "\203A"; position: absolute; left: 0; color: var(--navy); font-weight: 700; } /* doctrine couleur : décoratif = navy */
/* Notes — doctrine (Simon 01.08.2026) : .note = PRÉCISION secondaire de
   section (tarifs CGV, renvois, infos pratiques). Redesign : bord gauche
   3px DROIT (radius 0 à gauche — l'ancien radius 10px sur 5px de bord
   donnait un effet « grande parenthèse ( » sur les textes courts).
   .note-warn = AVERTISSEMENT (sécurité…) : accent magenta, picto
   triangle, texte pleine couleur (pas muted). Les CTA (« pas trouvé la
   bonne réponse ? ») ne sont PAS des notes → partials/faq-contact.njk.
   Markup : macro note() de partials/blocks.njk, pas de div à la main. */
.note { background: var(--grey-bg); border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0; padding: 14px 20px; font-size: .92rem; color: var(--muted); margin-top: 28px; }
.bg-grey .note { background: var(--white); }
.note-warn { border-left-color: var(--magenta); color: var(--text); display: flex; gap: 12px; align-items: flex-start; }
.note-warn svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--magenta); }
/* CTA de repli des pages FAQ (ex-.note, sorti du composant) */
.faq-contact { margin-top: 36px; padding-top: 26px; border-top: 1px solid #E3E7F0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.faq-contact p { margin: 0; }
.faq-contact .lead { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--navy); }
.faq { margin-top: 32px; }
.faq details { background: var(--white); border: 1px solid #E3E7F0; border-radius: 10px; margin-bottom: 12px; }
/* Chevron HORS flux (absolu) + retrait suspendu : les lignes repliées des
   questions s'alignent sur la première (retour Simon 02.08). */
.faq summary { cursor: pointer; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--navy); padding: 16px 20px 16px 42px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "\203A"; color: var(--cyan); font-weight: 700; position: absolute; left: 20px; top: 16px; }
.faq details[open] summary { color: var(--magenta); }
.faq details p { padding: 0 20px 16px 42px; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; margin-top: 28px; }
/* Badges de pôle (page équipe, layout V3 validé par Simon 01.08.2026) */
.person .badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.b-dir { background: #E8EBF2; color: #3C4A6B; }
.b-adm { background: #FBE3EF; color: #A31257; }
.b-com { background: #E1F3E6; color: #1E6B35; }
.b-dev { background: #FFF1DE; color: #8A5A16; }
.b-mnt { background: #EFE5FA; color: #6B3FA0; }
.b-it  { background: #DFF2FA; color: #176F94; }
.b-ext { background: #EEF1F5; color: #55647A; }
.team-legende { margin-top: 18px; color: var(--muted); font-size: .85rem; font-style: italic; }
/* Photos réelles (300px, aplaties blanc) et pastilles d'initiales (placeholder
   validé par Simon 01.08.2026 en attendant les photos manquantes). */
.person .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.person .photo.reel { border: none; background: none; }
.person .init { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.9rem; letter-spacing: .02em; }
.i-dir { background: #E8EBF2; color: #3C4A6B; }
.i-adm { background: #FBE3EF; color: #A31257; }
.i-com { background: #E1F3E6; color: #1E6B35; }
.i-dev { background: #FFF1DE; color: #8A5A16; }
.i-mnt { background: #EFE5FA; color: #6B3FA0; }
.i-it  { background: #DFF2FA; color: #176F94; }
.person { background: var(--white); border: 1px solid #E3E7F0; border-radius: 12px; padding: 24px 18px; text-align: center; }
.person .photo { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 16px; background: linear-gradient(135deg, #E7EDF6, #F4F6FA); border: 1px dashed #C6CEDD; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .85rem; font-style: italic; }
.person :is(h3, h4) { font-size: 1.02rem; color: var(--navy); }
.person p { color: var(--muted); font-size: .88rem; margin-top: 4px; }
@media (max-width: 860px) { .split, .cols { grid-template-columns: 1fr; } }

/* ================================================================
   Ajouts Eleventy (hors maquettes) — logo header, burger mobile,
   carrousel de logos, médias réels des pages intérieures
   ================================================================ */
/* Logo header (remplace le wordmark texte — cf. header.njk) */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; height: 40px; width: auto; }

/* Menu burger mobile — CSS only (checkbox hack), zéro JS.
   L'input reste focusable au clavier (masqué visuellement, pas display:none). */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.burger { display: none; }
@media (max-width: 1239px) {
  .burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; cursor: pointer; }
  .burger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .nav-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Panneau plein écran sous le header (72px), liens à plat, sous-menus dépliés */
  .mainnav { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 49; display: none; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; padding: 28px 24px 40px; background: var(--white); border-top: 1px solid #E3E7F0; overflow-y: auto; }
  .nav-toggle:checked ~ .mainnav { display: flex; overscroll-behavior: contain; }
  /* Verrou du fond menu ouvert (retour Simon 02.08 : « double scroll ») —
     :has() CSS pur ; en le supprimant, la scrollbar de la page disparaît et
     celle du menu se colle au bord droit. Navigateurs sans :has : comportement
     d'avant, rien de cassé. */
  html:has(.nav-toggle:checked) { overflow: hidden; }
  .mainnav > a:not(.btn), .mainnav .has-sub > a { padding: 14px 0; font-size: 1.02rem; border-bottom: 1px solid #EEF1F7; }
  .has-sub > a::after { content: ""; } /* sous-menus dépliés à plat : pas de chevron */
  .has-sub .sub { display: block; position: static; min-width: 0; border: none; border-radius: 0; box-shadow: none; padding: 0 0 6px 18px; }
  .sub a { padding: 10px 0; }
  .sub a:hover { background: transparent; }
  .btn-nav { margin: 20px 0 0; text-align: center; }
}

/* Carrousel de logos — défilement auto CSS pur (partials/carousel-logos.njk).
   La piste contient DEUX copies des logos : translateX(-50%) = une période exacte
   (marges portées par les img, pas de gap, sinon le raccord saute d'un demi-gap).
   Tuiles : dimensions FIXES (les logos sources sont hétérogènes — PNG transparents
   et JPG à fond blanc mélangés) → fond blanc + object-fit contain, tout reste
   aligné et la période est identique quel que soit le logo. La durée d'animation
   est posée en inline par le partial (~3 s/logo : vitesse constante entre
   carrousels — clients ×24 home, intégrations ×24 fonctionnalités) ; le 32 s
   ci-dessous n'est qu'un fallback. */
.logo-carousel { overflow: hidden; margin-top: 32px; }
.logo-track { display: flex; align-items: center; width: max-content; animation: logo-defile 32s linear infinite; }
/* Logos en COULEUR (02.08.2026) : le grayscale ×3 rendait les bandes « éteintes » ;
   à un seul carrousel par page (clients home / intégrations fonctionnalités),
   la couleur porte le message de confiance. Tuiles agrandies 170×84 → 200×100
   (retour Simon : « trop petit en desktop »). */
.logo-track img { display: block; height: 100px; width: 200px; object-fit: contain; padding: 14px 20px; background: var(--white); border: 1px solid #E3E7F0; border-radius: 10px; margin-right: 22px; }
/* Double ligne (carouselRows=2, home clients) : logos RÉPARTIS moitié/moitié
   (retour Simon — pas de doublon visible), 2e piste inverse et décalée.
   ≤920px : les 2 moitiés laissent place à la piste mobile unique (.logo-track-m,
   tous les logos) ; en reduced-motion, retour aux 2 moitiés STATIQUES (24/24,
   la piste mobile serait un doublon). */
.logo-track + .logo-track { margin-top: 22px; }
.logo-track-rev { animation-direction: reverse; }
.logo-track-m { display: none; }
@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {
  .logo-carousel-2r .logo-track:not(.logo-track-m) { display: none; }
  .logo-track-m { display: flex; margin-top: 0; }
}
.logo-carousel:hover .logo-track { animation-play-state: paused; }
/* ONDULATION (retour Simon 02.08) : 4 segments de distance ÉGALE + courbe
   cubic-bezier(.5,.25,.5,.75) par segment → la vitesse oscille (ralentit à
   chaque frontière de segment, accélère au milieu) SANS jamais s'arrêter
   (pentes de la courbe = 0.5 aux extrémités, pas 0 — un ease-in-out
   stopperait net 4× par boucle). La boucle reste raccord (distance totale
   -50 % inchangée). */
@keyframes logo-defile { 0% { transform: translateX(0); } 25% { transform: translateX(-12.5%); } 50% { transform: translateX(-25%); } 75% { transform: translateX(-37.5%); } 100% { transform: translateX(-50%); } }
.logo-track { animation-timing-function: cubic-bezier(.5,.25,.5,.75); }
/* Respiration sous les logos (retour Simon 02.08 : « au moins ×2 ») :
   padding bas des sections carrousel doublé, 64 → 128 px. */
.section-carousel { padding-bottom: 128px; }
@media (max-width: 700px) { .section-carousel { padding-bottom: 88px; } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none !important; width: auto; flex-wrap: wrap; row-gap: 22px; }
  .logo-track img[aria-hidden="true"] { display: none; } /* pas de doublon si statique */
  .logo-track-rev { display: none; } /* 2e ligne = pur doublon décoratif */
}

/* Images réelles des splits (remplacent les .ph des maquettes). La .media-video
   des sections intérieures a été supprimée au nettoyage 02.08.2026 : les vidéos
   vivent désormais dans les heros (.hero-video). */
.split-img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* Conteneur image des splits (02.08, retour Simon « l'image est très haute
   selon le contenu ») : la colonne image S'ÉTIRE sur la hauteur de la ligne
   (c'est le TEXTE qui pilote), l'image absolue recadre en cover ; min-height
   pour les textes courts. L'img height:100% direct créerait une dépendance
   circulaire avec la hauteur de ligne de la grille → position absolute. */
.split-media { position: relative; align-self: stretch; min-height: 280px; border-radius: 10px; overflow: hidden; }
.split-media .split-img { position: absolute; inset: 0; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 860px) { .split-media { min-height: 240px; } }
/* Pictogrammes SVG dans les splits — retour utilisateur 31.07.2026 : en .split-img
   (width: 100%) ces SVG à viewBox géant (2000 à 4680 px) s'étiraient à toute la
   colonne. Taille plafonnée + centrage horizontal dans la colonne du .split.
   ⚠ P1 : plus aucun usage — les pictos hétéroclites ont été remplacés par le set
   Lucide inline (.icon-disc, bloc « Ajouts pictos Lucide » plus bas). Règle
   conservée au cas où un ancien visuel devait être réintroduit ponctuellement. */
.picto { display: block; width: auto; height: auto; max-width: 200px; max-height: 160px; margin: 0 auto; }
/* Variante de .card-img pour les pictogrammes SVG (fonds transparents, ratios variés) :
   contain + fond gris au lieu de cover, sinon les illustrations sont recadrées.
   ⚠ P1 : plus aucun usage (cards dentagest-cloud passées aux pictos Lucide) —
   règle conservée pour la même raison que .picto ci-dessus. */
.card .card-img.contain { object-fit: contain; padding: 14px; background: var(--grey-bg); }

/* ================================================================
   Ajouts page ebilling — composants transposés de la landing
   facturation électronique (landing-ebilling.html), déjà dans la
   charte : orbe du hero, chevrons, étapes numérotées, bandeau
   chiffres, encadré tarifs. Le full-bleed de la landing (colonne
   Duda) est inutile ici : les sections du site sont déjà pleine
   largeur.
   ================================================================ */
/* Orbe décorative du hero (orbe-dentagest, copiée depuis le dossier de la
   landing). 02.08 : PNG 782 Ko → WebP 24 Ko (q85, alpha conservé) — le PNG
   d'origine est archivé dans assets-site-actuel/. */
.hero.hero-orbe::before { content: ""; position: absolute; top: -150px; right: -110px; width: 500px; height: 500px; background: url('../img/orbe-dentagest.webp') no-repeat center / contain; } /* URL relative au CSS (identique en prod, fonctionne aussi en préview file://) */
/* Puces-chevrons du hero (« zéro papier / paiement rapide / sécurisé ») */
.chevrons { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; margin-bottom: 36px; color: var(--white); }
.chevrons span { margin-right: 26px; white-space: nowrap; }
.chevrons b { color: var(--cyan); font-weight: 700; margin-right: 6px; }
.hero .cta-note { margin-top: 18px; font-size: 1.05rem; color: var(--white); }
.hero .cta-note a { color: var(--cyan); font-weight: 700; }
/* Étapes numérotées (« Trois étapes, zéro changement ») */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 36px; }
.step .num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 2.2rem; color: var(--cyan); }
.step h3 { font-size: 1.15rem; margin: 6px 0 8px; color: var(--navy); }
/* Chevron magenta devant les titres de cards (signature de la landing) —
   variante de .grid-cards, les cards du reste du site n'en ont pas. */
.grid-cards.cards-chevron .card h3::before { content: "\3E"; color: var(--magenta); font-weight: 700; margin-right: 8px; }
/* Bandeau chiffres (navy, centré) — .band-note et non .note : la .note du site
   (encadré gris) existe déjà avec d'autres styles. */
.bandeau { background: var(--navy); color: var(--white); text-align: center; padding: 56px 0; }
.bandeau .big { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--white); }
.bandeau .big b { color: var(--cyan); }
.bandeau .band-note { font-size: .85rem; opacity: .8; margin-top: 14px; font-style: italic; }
/* Encadré tarifs (liseré cyan à gauche) */
.tarif-box { background: var(--white); border: 1px solid #E3E7F0; border-left: 6px solid var(--cyan); border-radius: 12px; padding: 30px 28px; margin-top: 28px; }
.tarif-box p + p { margin-top: 12px; }
.tarif-box a { color: var(--magenta); font-weight: 700; }
@media (max-width: 640px) {
  .chevrons span { display: block; margin-bottom: 6px; }
  .hero.hero-orbe::before { width: 190px; height: 190px; top: -55px; right: -55px; opacity: .85; }
}

/* ================================================================
   Ajouts pages Helpcenter / FAQ — bibliothèques de manuels PDF et
   tableaux de compatibilité (th navy, zébrage gris charte)
   ================================================================ */
/* Liens PDF dans les cards (manuels d'utilisateurs) */
.card li a { color: var(--text); text-decoration: none; }
.card li a:hover { color: var(--magenta); text-decoration: underline; }
/* Réponses de FAQ contenant une liste (mêmes retraits que .faq details p) */
.faq details ul { margin: 0; padding: 0 20px 16px 62px; }
.faq details ul li { margin-bottom: 4px; }
/* Tableaux de compatibilité (FAQ technique) — défilement horizontal sur mobile */
.table-wrap { overflow-x: auto; margin-top: 22px; }
.compat { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--white); border: 1px solid #E3E7F0; }
.compat caption { caption-side: top; text-align: left; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--navy); font-size: 1.05rem; padding: 0 0 10px; }
/* Scroll horizontal (retours Simon 02.08) : le TITRE du tableau reste en vue
   (le caption fait toute la largeur du tableau → c'est son <span> interne qui
   colle au bord du scrollport), et la PREMIÈRE COLONNE (Dentagest v19/v20)
   reste figée — fonds déjà opaques (blanc/gris zébré, navy en tête). */
.compat caption span { display: inline-block; position: sticky; left: 0; }
.compat thead th:first-child, .compat tbody th { position: sticky; left: 0; z-index: 2; border-right: 1px solid #E3E7F0; }
.compat th { background: var(--navy); color: var(--white); font-family: 'Poppins', sans-serif; font-weight: 600; padding: 12px 14px; text-align: left; white-space: nowrap; }
.compat td { padding: 10px 14px; border-bottom: 1px solid #E3E7F0; vertical-align: top; }
.compat tbody th { background: var(--white); color: var(--navy); border-bottom: 1px solid #E3E7F0; }
.compat tbody tr:nth-child(even) td, .compat tbody tr:nth-child(even) th { background: var(--grey-bg); }
.compat td.ok { color: var(--navy); font-weight: 700; }
.compat td.no { color: var(--muted); }
/* Statut intermédiaire (02.08.2026, T6) : « En validation » — ni oui ni non
   (ex. macOS Tahoe tant que le moteur 4D certifié n'est pas déployé). */
.compat td.mid { color: #55647A; font-weight: 600; }
.compat .lpd { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }

/* ================================================================
   Ajouts pictos Lucide (P1 31.07.2026) — set unique d'icônes en SVG
   inline (macro partials/icon.njk, Lucide v1.28.0, licence ISC) :
   trait navy 1.75, accent cyan possible (class .accent sur un tracé),
   dans un rond fond gris charte. Remplacent TOUS les pictos
   hétéroclites du POC (plan-*.svg Duda, backup-serveur.svg,
   data-verification.svg, crypted-data.svg, parc-informatique.png
   stock) — les anciens fichiers restent dans assets/img/.
   Les icônes sont décoratives (aria-hidden) : le texte adjacent porte
   le sens ; l'accent cyan est purement graphique (pas de contrainte
   AA texte), la forme est portée par le trait navy. ================================================================ */
.icon-disc { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--grey-bg); border: 1px solid #E3E7F0; color: var(--navy); flex: none; }
.icon-disc svg { width: 48px; height: 48px; }
.icon-disc svg .accent { stroke: var(--cyan); }
/* Variante grande (splits) : icône 64px */
.icon-disc-lg { width: 148px; height: 148px; }
.icon-disc-lg svg { width: 64px; height: 64px; }
/* Sur les sections grises, le rond passe en blanc pour rester lisible */
.bg-grey .icon-disc { background: var(--white); }
/* Dans un .split : centré dans sa colonne (remplace .picto) */
.split > .icon-disc { justify-self: center; }
/* V2 (retour Simon 01.08, choisie sur test-split-picto.html) : le picto centré
   verticalement creusait un vide sous le titre. Splits à picto → colonne picto
   étroite (auto), picto aligné au SOMMET : titre et texte partagent la même
   ligne de départ. .icon-right quand le picto est à droite du texte. */
/* align-items center (02.08, retour Simon /sauvegarde) : texte calé en haut +
   disque 128px = dispersion sur les paragraphes courts → centrage vertical,
   pour TOUS les splits à picto (les longues listes le tolèrent bien). */
.split.split-icon { grid-template-columns: auto 1fr; align-items: center; }
.split.split-icon.icon-right { grid-template-columns: 1fr auto; }
@media (max-width: 860px) {
  .split.split-icon, .split.split-icon.icon-right { grid-template-columns: 1fr; }
}
/* Dans une card : le rond remplace l'ancien bandeau image (.card-img.contain) */
.card .icon-disc { margin-bottom: 18px; }
/* Centrage picto+titre envisagé puis ANNULÉ (Simon, 02.08) : à gauche ça
   marche, le malaise venait des cards à texte court, pas de l'alignement. */

/* ================================================================
   Ajouts actualités (P1 31.07.2026, refonte mise en page 31.07.2026,
   itération 3 « édito » 01.08.2026) :
   1. vedette : fond gris en DÉBORD (marges négatives), texte aligné
      EXACTEMENT sur la colonne des autres articles ;
   2. pastilles : chip de date en contour (année masquée en desktop,
      portée par la timeline), badge vedette en pilule navy pleine à
      point magenta (le dégradé de l'itération 2 est abandonné) ;
   3. carrousel d'images en scroll-snap CSS pur, zéro JS ;
   4. colonne de lecture ~720px centrée (hero et bandeau CTA restent
      pleine largeur) ;
   5. rythme : fil chronologique sur la verticale du contenu 1080px,
      millésimes portés par les puces de la timeline (les séparateurs
      d'année en travers de la colonne sont supprimés — redondants),
      bandes de fond alternées blanc / gris charte ;
   6. habillage édito : chapeau (.actu-lede), dateline discrète
      (.actu-dateline), exergues (.actu-quote) sur les articles longs.
   Charte : Poppins/Lato, chevrons cyan, pas d'em bicolore hors hero.
   Les cards restent réservées aux vraies listes ailleurs sur le site.
   ================================================================ */

/* ---- Bandes pleine largeur + colonne de lecture centrée ----
   Une actu par bande ; l'alternance blanc / gris (« soft » = --grey-bg,
   le gris doux de la charte) est posée dans le markup (.actu-band-soft).
   Colonne : 720px utiles + 2 × 24px de gouttières, centrée (margin auto)
   → plus d'espace vide à droite. */
.actu-band { position: relative; padding: 48px 0; }
.actu-band-soft { background: var(--grey-bg); }
.actu-col { max-width: 768px; margin: 0 auto; padding: 0 24px; }
.actu { padding: 0; }

/* ---- Fil chronologique (desktop ≥1120px uniquement, masqué en dessous) ----
   Itération 3 (retour Simon 01.08.2026) : le trait suit la VERTICALE DU
   CONTENU principal 1080px — bord gauche de contenu de .wrap, soit
   calc(50% − 540px + 24px de gouttière) = calc(50% − 516px) — et non plus
   la marge de la colonne de lecture 720px. Chaque bande dessine son segment
   sur toute sa hauteur ; les bandes étant jointives, le trait est
   visuellement continu. Points : cyan, 10px, centrés sur l'axe du trait
   (50% − 515px) en face de chaque chip de date ; la colonne .actu-col pose
   son contenu à calc(50% − 360px) → décalage des points de −160px
   (−155 de centre − 5 de rayon). Seuil relevé de 1000 → 1120px : à 1120px
   le trait tombe à 44px du bord gauche — jamais hors viewport.
   Millésimes : le PREMIER article de chaque année porte data-year sur ses
   .actu-badges → l'année (Poppins 600, petit, muted) s'affiche sous le
   point, posée sur le trait ; son fond reprend celui de la bande pour
   masquer le trait derrière le texte. Sous le seuil, la timeline disparaît
   et l'année réapparaît dans les chips (.badge-year, masqué ici seulement
   — l'info ne disparaît jamais sur mobile). */
@media (min-width: 1120px) {
  .actu-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 516px); width: 2px; background: #E3E7F0; }
  .actu-badges { position: relative; }
  .actu-badges::after { content: ""; position: absolute; left: -160px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); } /* aligné sur le haut de la chip (retour Simon) */
  .actu-badges[data-year]::before { content: attr(data-year); position: absolute; left: -155px; top: 22px; transform: translateX(-50%); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .08em; color: var(--muted); background: var(--white); padding: 1px 6px; }
  .actu-band-soft .actu-badges[data-year]::before { background: var(--grey-bg); }
  .badge-year { display: none; }
}

/* ---- Vedette : fond gris en débord, texte sur la colonne commune ----
   Alignement EXACT : |marge négative| = padding horizontal + 1px de bordure
   (box-sizing border-box) → le texte reste pile sur la colonne. Débord borné
   par media query pour ne jamais dépasser la gouttière de 24px :
   mobile 17px (−17 + 1 + 16 = 0), ≥840px 33px (−33 + 1 + 32 = 0). */
.actu-vedette { background: var(--grey-bg); border: 1px solid #E3E7F0; border-radius: 14px; margin: 0 -17px; padding: 28px 16px; }
@media (min-width: 840px) { .actu-vedette { margin: 0 -33px; padding: 36px 32px; } }
/* Mobile : full-bleed comme les cards (retour Simon 02.08) — le débord -17px
   laissait 7px de vide aux bords, la vedette semblait plus étroite. Texte
   toujours sur l'axe : 24px de padding, bordures latérales/radius retirés. */
@media (max-width: 630px) { .actu-vedette { margin: 0 -24px; padding: 28px 24px; border-inline: 0; border-radius: 0; } }

/* ---- Pastilles (hors corpo stricte mais harmonieuses) ---- */
.actu-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.badge { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 5px 14px; }
/* Chip de date : contour fin, fond transparent, texte gris charte
   (--muted : 6.02:1 sur blanc, 5.56:1 sur --grey-bg — cf. :root). */
.badge-date { background: transparent; border: 1px solid #C6CEDD; color: var(--muted); }
/* Badge « Dernière actualité » : pilule navy pleine, texte blanc Poppins 600
   (contraste 17.96:1 — AAA large), précédé d'un point magenta décoratif,
   écho du wordmark « DentaGest. ». Le dégradé cyan→magenta de l'itération 2
   est abandonné (retour Simon 01.08.2026 : rendu « sale »). */
/* Style chip comme les mois, le point magenta fait la différence (retour Simon :
   la pilule navy pleine était trop violente). */
.badge-vedette { background: var(--white); color: #44567E; border: 1px solid #C6CEDD; }
.badge-vedette::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); margin-right: 8px; vertical-align: 1px; }

/* ---- Prose des articles (largeur bornée par .actu-col) ---- */
/* Niveau de noir descendu (retour Simon 01.08) : h2 plus dense que h3. */
.actu h2 { color: #2C4370; font-size: clamp(1.35rem, 2.8vw, 1.75rem); }
.actu h2 em { color: inherit; font-style: italic; } /* titres sobres — cf. h2.section-title */
/* Doublon fusionné (nettoyage 02.08.2026) : deux règles .actu h3 se suivaient ;
   le color #44567E de la première était écrasé par var(--navy) plus bas — effet
   calculé conservé à l'identique (navy). À vérifier avec Simon : le retour du
   01.08 (« niveau de noir descendu ») visait peut-être #44567E pour les h3. */
.actu h3 { color: var(--navy); font-weight: 600; font-size: 1.12rem; margin-top: 26px; }
.actu p { margin-top: 12px; }
.actu ul { list-style: none; margin-top: 12px; }
.actu li { padding-left: 20px; position: relative; margin-bottom: 6px; }
.actu li::before { content: "\203A"; position: absolute; left: 0; color: var(--navy); font-weight: 700; } /* doctrine couleur : décoratif = navy */

/* ---- Habillage édito (itération 3, 01.08.2026) ----
   Chapeau : 2-3 lignes qui résument l'essentiel sous le titre, corps
   1.15rem, navy soutenu. Dateline : attaque discrète du premier paragraphe
   (« Renens, juin 2026 — »), Poppins 600 muted. Exergue : citation
   représentative tirée VERBATIM du texte d'origine, Poppins italique
   1.2rem, filet cyan à gauche — réservée aux deux articles longs
   (juin 2026 et sécurité mars 2023). */
.actu-lede { margin-top: 14px; font-size: 1.15rem; line-height: 1.55; color: var(--navy); }
.actu-dateline { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: #44567E; letter-spacing: 0; }
.actu-quote { margin: 26px 0 6px; padding: 2px 0 2px 22px; border-left: 4px solid var(--cyan); }
.actu-quote p { margin-top: 0; font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.5; color: var(--navy); }

/* ---- Carrousel d'images : scroll-snap CSS pur, zéro JS ----
   Piste horizontale, une figure par vue (colonnes de 100%), snap centré,
   défilement molette (trackpad / Maj+molette) et swipe natifs. Indicateur
   non interactif « n / 3 » en compteur CSS incrusté sur l'image (blanc sur
   navy translucide — repère purement décoratif, redondant avec l'alt).
   Le conteneur est focusable (tabindex=0 + role=region + aria-label dans le
   markup) pour le défilement clavier. Images cliquables vers le fichier. */
.actu-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px; margin-top: 28px; padding-bottom: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; counter-reset: slide; }
.actu-carousel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.actu-carousel .actu-figure { margin: 0; position: relative; scroll-snap-align: center; counter-increment: slide; }
.actu-carousel .actu-figure::after { content: counter(slide) " / 3"; position: absolute; top: 12px; right: 12px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .75rem; letter-spacing: .06em; color: var(--white); background: rgba(20,21,41,.78); padding: 3px 11px; border-radius: 999px; pointer-events: none; }
.actu-figure a { display: block; border-radius: 12px 12px 0 0; }
.actu-figure a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.actu-figure img { display: block; width: 100%; height: auto; border: 1px solid #E3E7F0; border-bottom: 0; border-radius: 12px 12px 0 0; transition: border-color .18s ease; }
.actu-figure a:hover img { border-color: #C6CEDD; }
/* Légende propre sous l'image : bandeau blanc, filet, texte muted centré. */
.actu-figure figcaption { background: var(--white); border: 1px solid #E3E7F0; border-radius: 0 0 12px 12px; padding: 10px 16px; text-align: center; font-size: .88rem; font-style: italic; color: var(--muted); }

@media (max-width: 860px) {
  .actu-band { padding: 36px 0; }
}

/* ---- Alignement chrome/contenu (retour Simon 31.07.2026) ----
   Header et footer : 3 zones — gouttières gauche/droite + zone CENTRALE de
   1080px alignée sur l'axe du contenu (.wrap). Le menu et les horaires
   partagent donc la même verticale que la page. Actif en desktop large
   uniquement ; en dessous on retombe sur les layouts fluides existants. */
@media (min-width: 1480px) {
  .topbar-inner { display: grid; grid-template-columns: 1fr min(1080px, 100%) 1fr; }
  .topbar-inner .brand { grid-column: 1; justify-self: start; }
  .topbar-inner .mainnav { grid-column: 2; width: 100%; margin-left: 0; padding: 0 24px 0 14px; }
  .topbar-inner .mainnav .btn-nav { margin-left: auto; }

  /* (footer sorti de l'alignement 3 zones — voir .foot-grid plus bas) */
}
/* (Footer v3 : tout le CSS footer vit dans la section « Footer v3 » plus
   haut — l'ancien bloc 3 zones a été retiré le 02.08.2026.) */