/*
Theme Name: Kynova 2026
Theme URI: http://kynova.fr
Description: Thème enfant de Spacious portant la refonte 2026 du site Kynova. Design système complet (tokens, composants, gabarits) en CSS et JS natifs.
Author: Kynova
Template: spacious
Version: 1.0.0
Text Domain: kynova
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   Polices hébergées localement (RGPD : aucun appel aux serveurs Google)

   Le suffixe ?v= force le rechargement quand un fichier de police change.
   IMPORTANT : à chaque régénération du sous-ensemble Material Symbols, il faut
   incrémenter ce numéro ici ET la constante KYNOVA_FONT_VERSION de
   functions.php, sinon les navigateurs continuent de servir l'ancienne police
   et les nouvelles icônes s'affichent sous forme de texte.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2?v=3') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2?v=3') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/material-symbols-outlined.woff2?v=3') format('woff2');
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --primary: #000525;
  --primary-container: #151e3f;
  --on-primary: #ffffff;
  /* Accent bleu repris du logo Kynova (#4eabf6 sur le « o » et le </>).
     --secondary       : fonds, aplats et éléments posés sur le bleu nuit.
     --secondary-strong: texte et liens sur fond clair — le bleu du logo n'y
                         tient pas le contraste (2,5:1), celui-ci passe (5:1).
     --secondary-rgb   : mêmes composantes, pour les rgba() de transparence. */
  --secondary: #4eabf6;
  --secondary-strong: #1272c4;
  --secondary-rgb: 78, 171, 246;
  --background: #f7f9fb;
  --surface: #f7f9fb;
  --surface-low: #f2f4f6;
  --surface-high: #e6e8ea;
  --surface-highest: #e0e3e5;
  --on-background: #191c1e;
  --outline: #76767f;
  --white: #ffffff;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --container: 1280px;
  --container-large: 1440px;
  --section-pad: 120px;
  --section-pad-m: 64px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--on-background);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--secondary); color: var(--primary); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--secondary-strong); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style-position: inside; }
button, input, select, textarea { font-family: inherit; }

/* Accessibilité : lien d'évitement et texte réservé aux lecteurs d'écran */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  width: auto; height: auto; clip: auto;
  padding: 12px 20px; border-radius: var(--radius);
  background: var(--secondary); color: var(--primary); font-weight: 700;
}
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }

/* Icônes Material Symbols */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-fill { font-variation-settings: 'FILL' 1; }

/* ==========================================================================
   Typographie
   ========================================================================== */
.display { font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
.headline-xl { font-size: 48px; line-height: 1.2; font-weight: 700; }
.headline-lg { font-size: 36px; line-height: 1.25; font-weight: 700; }
.headline-md { font-size: 30px; line-height: 1.3; font-weight: 600; }
.headline-sm { font-size: 20px; line-height: 1.3; font-weight: 600; }
.body-lg { font-size: 18px; line-height: 1.6; }
.label { font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; }
.text-accent { color: var(--secondary); }
.text-muted { color: var(--outline); }

/* ==========================================================================
   Layout
   ========================================================================== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
/* Variante large, réservée aux sections qui portent une capture d'écran de
   logiciel : une interface applicative est dense, chaque pixel gagné en
   largeur se lit. Ailleurs, 1280 px reste la bonne mesure pour du texte. */
.container-large { max-width: var(--container-large); }
.section { padding: var(--section-pad) 0; }
.section-title { text-align: center; margin-bottom: 64px; }
.section-title h2 { color: var(--primary); margin-bottom: 16px; }
.section-title p { color: var(--outline); max-width: 640px; margin: 0 auto; }
/* Variante pour un chapô long, qui étouffe dans 640 px */
.section-title-large h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
.section-title-large p { max-width: 780px; }
.bg-navy { background: var(--primary); color: var(--on-primary); }
.bg-navy .section-title h2 { color: var(--on-primary); }
.bg-navy .section-title p { color: rgba(255, 255, 255, 0.7); }
.bg-white { background: var(--white); }
.bg-accent { background: var(--secondary); }

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; border: none; border-radius: var(--radius);
  font: 700 14px/1.2 'Inter', sans-serif; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s;
}
.btn .material-symbols-outlined { font-size: 20px; transition: transform 0.2s; }
.btn:hover .material-symbols-outlined { transform: translateX(4px); }
.btn-accent { background: var(--secondary); color: var(--primary); }
.btn-accent:hover { box-shadow: 0 0 20px rgba(var(--secondary-rgb), 0.4); color: var(--primary); }
.btn-navy { background: var(--primary); color: var(--on-primary); }
.btn-navy:hover { background: var(--primary-container); color: var(--on-primary); }
.btn-outline-light { background: transparent; border: 2px solid rgba(255, 255, 255, 0.25); color: var(--on-primary); }
.btn-outline-light:hover { border-color: var(--on-primary); color: var(--on-primary); }
.btn-outline-navy { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline-navy:hover { background: var(--primary); color: var(--on-primary); }
.btn-sm { padding: 10px 24px; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: 50; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; max-width: var(--container); margin: 0 auto; padding: 0 32px; gap: 24px; }
.nav-logo { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: -0.01em; }
.nav-logo span { color: var(--secondary-strong); }
/* Hauteur fixe plutôt que max-height : le logo porte ses dimensions
   intrinsèques (1200×338), la largeur suit donc le ratio sans déformation. */
.nav-logo img { height: 46px; width: auto; }

/* Sélecteurs préfixés par .nav : WordPress produit aussi une .nav-links pour la
   navigation entre articles, qui ne doit rien hériter de l'en-tête. */
.nav .nav-links ul { display: flex; gap: 28px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav .nav-links li { position: relative; }
.nav .nav-links a { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0.03em; color: var(--primary); padding-bottom: 4px; transition: color 0.2s; }
.nav .nav-links a:hover { color: var(--secondary-strong); }
.nav .nav-links .current-menu-item > a,
.nav .nav-links .current-menu-ancestor > a,
.nav .nav-links .current_page_item > a,
.nav .nav-links .current_page_parent > a { color: var(--secondary-strong); font-weight: 700; border-bottom: 2px solid var(--secondary-strong); }

/* Sous-menus */
.nav .nav-links .sub-menu {
  display: none; position: absolute; top: 100%; left: -16px; z-index: 60;
  min-width: 240px; padding: 8px; margin: 0;
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 5, 37, 0.15);
}
.nav .nav-links li:hover > .sub-menu,
.nav .nav-links li:focus-within > .sub-menu { display: block; }

/* Indicateur de sous-menu (petit chevron) sur les éléments parents */
.nav .nav-links .menu-item-has-children > a::after {
  content: "expand_more";
  font-family: 'Material Symbols Outlined';
  font-size: 18px; line-height: 1; vertical-align: -3px; margin-left: 4px;
  transition: transform 0.2s;
}
.nav .nav-links .menu-item-has-children:hover > a::after { transform: rotate(180deg); }
.nav .nav-links .sub-menu li { display: block; }
.nav .nav-links .sub-menu a { padding: 10px 12px; border-radius: 8px; border-bottom: none; }
.nav .nav-links .sub-menu a:hover { background: var(--surface-low); }

.nav-actions { display: flex; gap: 12px; align-items: center; }
.nav-actions ul { display: flex; gap: 12px; align-items: center; list-style: none; margin: 0; padding: 0; }
/* Le 1er élément du menu CTA est en contour, le 2e en plein */
.nav-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: var(--radius);
  font: 700 14px/1.2 'Inter', sans-serif; letter-spacing: 0.05em; text-transform: uppercase;
  background: transparent; border: 2px solid var(--primary); color: var(--primary);
  transition: all 0.2s;
}
.nav-actions a:hover { background: var(--primary); color: var(--on-primary); }
.nav-actions li:last-child a { background: var(--secondary); border-color: var(--secondary); color: var(--primary); }
.nav-actions li:last-child a:hover { box-shadow: 0 0 20px rgba(var(--secondary-rgb), 0.4); }

.nav-burger { display: none; background: none; border: none; cursor: pointer; color: var(--primary); padding: 4px; }
.nav-burger .material-symbols-outlined { font-size: 32px; }

.nav-mobile { display: none; background: var(--surface); border-top: 1px solid var(--surface-high); padding: 16px 32px 24px; }
.nav-mobile.open { display: block; }
.nav-mobile ul { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.nav-mobile .sub-menu { padding-left: 16px; margin-top: 16px; }
.nav-mobile a { display: block; font-weight: 600; color: var(--primary); }
.nav-mobile a:hover { color: var(--secondary-strong); }

/* ==========================================================================
   Hero (page d'accueil)
   ========================================================================== */
.hero { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--primary); color: var(--on-primary); padding: var(--section-pad) 0; min-height: 640px; }
.hero-grid-bg {
  position: absolute; inset: 0; opacity: 0.35;
  background-image: linear-gradient(rgba(var(--secondary-rgb), 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--secondary-rgb), 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero-inner.solo { grid-template-columns: 1fr; }
.hero-inner.solo .hero-content { max-width: 800px; }
/* Remplace la pastille colorée qui surmontait les titres : réservée à une
   information réelle — la date d'un article — et non à un libellé décoratif. */
.hero-meta { margin-bottom: 16px; color: rgba(255, 255, 255, 0.6); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.hero h1 { margin-bottom: 32px; }
.hero p.lead { color: rgba(255, 255, 255, 0.8); margin-bottom: 40px; max-width: 620px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Panneau d'interface décoratif (100% CSS) */
.ui-panel { background: var(--primary-container); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl); padding: 24px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); }
.ui-panel-bar { display: flex; gap: 8px; margin-bottom: 20px; }
.ui-panel-bar i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.ui-panel-bar i:first-child { background: var(--secondary); }
.ui-rows { display: flex; flex-direction: column; gap: 14px; }
.ui-row { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius); padding: 14px 16px; }
.ui-row .material-symbols-outlined { color: var(--secondary); font-size: 22px; }
.ui-row-lines { flex: 1; }
.ui-row-lines b { display: block; height: 8px; width: 55%; border-radius: 4px; background: rgba(255, 255, 255, 0.35); margin-bottom: 6px; }
.ui-row-lines i { display: block; height: 6px; width: 80%; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.ui-row .ui-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(var(--secondary-rgb), 0.15); color: var(--secondary); letter-spacing: 0.04em; }
.ui-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; margin-top: 20px; }
.ui-bars i { flex: 1; border-radius: 6px 6px 0 0; background: rgba(255, 255, 255, 0.12); }
.ui-bars i.hi { background: var(--secondary); }

/* ==========================================================================
   Grille bento (cartes solutions)
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.bento > * { grid-column: span 12; }
.card { padding: 32px; border-radius: var(--radius-xl); transition: all 0.3s; }
.card .material-symbols-outlined { font-size: 40px; color: var(--secondary-strong); margin-bottom: 24px; }
.card h3 { color: var(--primary); margin-bottom: 16px; }
.card p { color: var(--outline); }
.card-white { background: var(--white); border: 1px solid rgba(0, 5, 37, 0.1); }
.card-white:hover { box-shadow: 0 20px 40px rgba(0, 5, 37, 0.1); }
.card-navy { background: var(--primary); color: var(--on-primary); }
.card-navy h3 { color: var(--on-primary); }
.card-navy p { color: rgba(255, 255, 255, 0.7); }
/* Sur le bleu nuit, l'accent reprend le bleu clair du logo : le bleu foncé
   réservé aux fonds clairs y perdrait toute lisibilité. */
.card-navy .material-symbols-outlined { color: var(--secondary); }
.card-gray { background: var(--surface-high); }
.card-gray:hover { background: var(--surface-highest); }
.card-gray .material-symbols-outlined { color: var(--primary); }
.card-accent { background: var(--secondary); }
.card-accent .material-symbols-outlined, .card-accent h3 { color: var(--primary); }
.card-accent p { color: rgba(0, 5, 37, 0.75); }
/* Sur-titre de carte : la couleur suit le fond, l'accent clair n'étant lisible que
   sur le bleu nuit (contraste insuffisant sur blanc, invisible sur l'accent). */
.card .card-kicker { margin-bottom: 8px; color: var(--outline); }
.card-navy .card-kicker { color: var(--secondary); }
.card-accent .card-kicker { color: rgba(0, 5, 37, 0.65); }

.card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary-strong); }
.card-link .material-symbols-outlined { font-size: 20px; margin-bottom: 0; transition: transform 0.2s; }
.card-link:hover .material-symbols-outlined { transform: translateX(4px); }
.card-navy .card-link { color: var(--secondary); }
.card-accent .card-link { color: var(--primary); }
.card-accent .card-link .material-symbols-outlined { color: var(--primary); }

/* ==========================================================================
   Blocs produits phares (page d'accueil)

   Deux blocs larges qui mettent AccueilConnect et LinkedSecurity en avant,
   avant la grille des autres prestations. Le visuel est pour l'instant la
   maquette décorative en CSS ; le jour où de vraies captures d'écran seront
   fournies, il suffira de remplacer le contenu de .bloc-produit-visuel par
   une image : le reste du bloc n'a pas à bouger.
   ========================================================================== */
.bloc-produit {
  /* Le visuel prend nettement plus de place que le texte : une capture d'écran
     d'application est dense, et sous ~550 px elle devient illisible. La colonne
     de texte tombe autour de 450 px, ce qui reste la bonne mesure de lecture —
     l'élargir n'apporterait rien, la rétrécir gênerait. */
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: center;
  padding: 48px; border-radius: var(--radius-xl);
}
.bloc-produit + .bloc-produit { margin-top: 32px; }
.bloc-produit-clair { background: var(--surface-low); border: 1px solid var(--surface-highest); }
.bloc-produit-sombre { background: var(--primary); color: var(--on-primary); }

/* Alternance gauche/droite. Le balisage reste « contenu puis visuel » dans les
   deux blocs : seul l'affichage s'inverse, la lecture au clavier et par lecteur
   d'écran garde donc le même ordre logique. */
.bloc-produit-inverse .bloc-produit-visuel { order: -1; }
/* Le visuel passant en première cellule, les deux largeurs doivent être
   échangées : sans cela c'est le texte qui hériterait de la colonne large. */
.bloc-produit-inverse { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); }

.bloc-produit-kicker { margin-bottom: 12px; color: var(--secondary-strong); }
.bloc-produit-sombre .bloc-produit-kicker { color: var(--secondary); }
.bloc-produit h3 { margin-bottom: 16px; color: var(--primary); }
.bloc-produit-sombre h3 { color: var(--on-primary); }
.bloc-produit-chapo { margin-bottom: 28px; color: var(--outline); }
.bloc-produit-sombre .bloc-produit-chapo { color: rgba(255, 255, 255, 0.75); }
.bloc-produit .checklist { margin-bottom: 32px; }
.bloc-produit .checklist li { color: var(--primary); }
.bloc-produit-sombre .checklist li { color: rgba(255, 255, 255, 0.85); }
.bloc-produit-sombre .checklist .material-symbols-outlined { color: var(--secondary); }
/* Capture d'écran de logiciel : même traitement que les maquettes décoratives
   qu'elle remplace (coin arrondi, ombre portée, filet clair) pour que les deux
   puissent cohabiter tant que toutes les captures ne sont pas fournies. */
.capture-logiciel {
  width: 100%; height: auto;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 5, 37, 0.12);
  box-shadow: 0 24px 64px rgba(0, 5, 37, 0.25);
}
.bloc-produit-sombre .capture-logiciel,
.page-hero .capture-logiciel { border-color: rgba(255, 255, 255, 0.14); }

/* Agrandissement au clic
   Même à pleine largeur de colonne, une capture d'application reste réduite de
   moitié : les libellés se devinent mais ne se lisent pas. Le script marque
   donc les captures cliquables (jamais celles de l'écran décoratif, qui est
   aria-hidden) et les rouvre en taille réelle par-dessus la page.
   Tout est ajouté par JavaScript : sans lui, la page reste exactement
   telle quelle, l'image simplement non cliquable. */
.capture-zoomable { cursor: zoom-in; transition: transform 0.25s, box-shadow 0.25s; }
.capture-zoomable:hover { transform: translateY(-4px); box-shadow: 0 32px 72px rgba(0, 5, 37, 0.32); }
.capture-zoomable:focus-visible { outline: 3px solid var(--secondary); outline-offset: 4px; }

.capture-loupe {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 5, 37, 0.88);
  /* Fondu par animation et non par transition : une animation se rejoue d'elle
     même au passage de display:none à display:flex. Une transition obligerait
     le script à provoquer un repaint entre les deux (requestAnimationFrame)
     pour que le fondu se joue — une pièce mobile de plus pour un simple effet.
     Ici l'état au repos est opacity:1 : même animation ignorée, la loupe
     s'affiche. */
  animation: capture-loupe-apparition 0.2s ease;
}
@keyframes capture-loupe-apparition { from { opacity: 0; } }
/* display:flex l'emporterait sur le display:none du navigateur pour [hidden]. */
.capture-loupe[hidden] { display: none; }
.capture-loupe img {
  /* Les captures sont livrées entre 1280 et 1600 px : sur un écran large elles
     s'affichent à leur taille native, donc parfaitement lisibles. */
  max-width: min(1600px, 100%); max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--radius); box-shadow: 0 32px 96px rgba(0, 0, 0, 0.6);
}
.capture-loupe-fermer {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); color: var(--on-primary);
  cursor: pointer; transition: background 0.2s;
}
.capture-loupe-fermer:hover { background: rgba(255, 255, 255, 0.2); }
.capture-loupe-fermer:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
/* Neutralise le défilement de la page pendant que la loupe est ouverte. */
.loupe-ouverte { overflow: hidden; }

/* Sur petit écran, tenir la capture entière dans la largeur ne servirait à rien :
   elle y serait aussi illisible qu'en place dans la page. La loupe devient donc
   un aperçu à faire défiler, l'image gardant une largeur exploitable. Le bouton
   de fermeture passe en position fixe pour rester atteignable. */
@media (max-width: 640px) {
  .capture-loupe {
    padding: 0; overflow: auto;
    align-items: flex-start; justify-content: flex-start;
  }
  .capture-loupe img {
    max-width: none; max-height: none; width: 1280px;
    border-radius: 0;
  }
  .capture-loupe-fermer { position: fixed; }
}

@media (prefers-reduced-motion: reduce) {
  .capture-zoomable { transition: none; }
  .capture-zoomable:hover { transform: none; }
  .capture-loupe { animation: none; }
}

/* ==========================================================================
   Maquette d'écran d'ordinateur autour des captures
   Une capture posée seule se lit comme une image parmi d'autres ; dans un
   châssis posé sur son pied, elle se lit comme un logiciel en cours
   d'utilisation. Entièrement en CSS, comme les maquettes de smartphone :
   aucune image de cadre à charger, rien à recadrer quand une capture change
   de format.
   N'entoure que les vraies captures — la maquette dessinée de repli (.ui-panel)
   porte déjà son propre châssis, deux cadres l'un dans l'autre se verraient.
   ========================================================================== */
.ordi { position: relative; }

/* Le boîtier, c'est-à-dire le pourtour de la dalle. Le dégradé simule la
   lumière rasante venue du haut, comme sur la maquette de smartphone. La marge
   basse est plus épaisse que les autres : c'est le menton d'un écran, et sans
   lui le cadre flotte au-dessus de son pied. */
.ordi-capot {
  padding: 0 10px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, #2b3556, var(--primary-container));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 60px rgba(0, 5, 37, 0.32);
}
/* Sur fond sombre, le filet du châssis doit se détacher davantage : sans cela
   le cadre disparaît dans le bleu nuit et la capture semble flotter à nouveau. */
.page-hero .ordi-capot,
.bloc-produit-sombre .ordi-capot { border-color: rgba(255, 255, 255, 0.22); }

/* Barre de navigateur : pastilles de fenêtre à gauche, adresse à leur suite. */
.ordi-barre { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 6px; }
.ordi-pastilles { display: flex; gap: 6px; flex-shrink: 0; }
.ordi-pastilles i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.ordi-pastilles i:first-child { background: var(--secondary); }
.ordi-url {
  flex: 1; display: flex; align-items: center; gap: 6px;
  height: 21px; padding: 0 10px; border-radius: 99px;
  background: rgba(0, 0, 0, 0.32);
  font-size: 11px; line-height: 1; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap; overflow: hidden;
}
.ordi-url .material-symbols-outlined { font-size: 12px; color: rgba(255, 255, 255, 0.4); }

/* La dalle : c'est elle qui rogne les coins de la capture. line-height:0
   supprime l'espace que la ligne de texte réserverait sous une image inline. */
.ordi-ecran {
  overflow: hidden; border-radius: 4px;
  background: var(--primary);
  line-height: 0;
}
/* Dans le cadre, la capture ne porte plus ni filet ni ombre : le châssis les
   porte pour elle. Le survol non plus ne la soulève plus — elle se décollerait
   de son écran. Le curseur loupe suffit à dire qu'elle s'agrandit au clic. */
.ordi-ecran .capture-logiciel,
.tab-ecran .capture-logiciel {
  display: block; width: 100%; height: auto;
  border: none; border-radius: 0; box-shadow: none;
}
.ordi-ecran .capture-zoomable:hover,
.tab-ecran .capture-zoomable:hover { transform: none; box-shadow: none; }

/* Le pied : une colonne centrale qui s'évase vers le bas, posée sur un socle
   plat. Les deux pièces sont dessinées par les pseudo-éléments d'un seul bloc
   vide — rien de tout cela n'est du contenu, et le gabarit n'a qu'une balise
   à écrire. */
.ordi-pied { position: relative; height: 54px; }
/* La colonne, en trapèze : plus étroite en haut qu'en bas. */
.ordi-pied::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 128px; height: 42px;
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  background: linear-gradient(#273057, #1a2340);
}
/* Le socle posé au sol, et l'ombre qu'il y projette. */
.ordi-pied::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 250px; height: 13px; border-radius: 7px;
  background: linear-gradient(#2b3556, #141c38);
  box-shadow: 0 14px 26px rgba(0, 5, 37, 0.22);
}
/* Sur fond sombre, le pied doit s'éclaircir au lieu de s'assombrir : les mêmes
   gris que sur fond blanc s'y confondraient avec le bleu nuit, et l'écran
   flotterait de nouveau, sans rien pour le poser. */
.page-hero .ordi-pied::before,
.bloc-produit-sombre .ordi-pied::before { background: linear-gradient(#39446f, #252e54); }
.page-hero .ordi-pied::after,
.bloc-produit-sombre .ordi-pied::after { background: linear-gradient(#414d80, #232c52); }

@media (max-width: 640px) {
  .ordi-capot { padding: 0 6px 10px; border-radius: 10px; }
  .ordi-barre { height: 30px; gap: 8px; }
  .ordi-pied { height: 36px; }
  .ordi-pied::before { width: 84px; height: 28px; }
  .ordi-pied::after { width: 160px; height: 9px; }
}

/* ==========================================================================
   Maquette de tablette autour des captures
   Même principe que l'écran d'ordinateur, pour les logiciels qui s'utilisent
   sur tablette : l'appareil fait partie de ce qu'il faut montrer. Pas de barre
   d'adresse ici — une tablette en usage tient son application en plein écran.
   Ce qui la fait reconnaître tient à trois détails, et ils comptent tous :
   un pourtour épais, des angles très ronds, et le reflet du verre sur la dalle.
   ========================================================================== */
.tab { position: relative; }
.tab-capot {
  position: relative;
  padding: 30px;
  border-radius: 38px;
  /* Quatre arrêts plutôt que deux : un châssis d'aluminium ne dégrade pas
     régulièrement, il s'éclaire sur l'arête haute et se creuse vers le bas. */
  background: linear-gradient(150deg, #3a4571 0%, #2b3556 24%, #1d2547 62%, var(--primary-container) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 36px 76px rgba(0, 5, 37, 0.38);
}
.page-hero .tab-capot,
.bloc-produit-sombre .tab-capot { border-color: rgba(255, 255, 255, 0.24); }

/* La barre d'accueil, en bas de la dalle : c'est elle qui date la tablette
   d'aujourd'hui plutôt que d'un bouton rond. */
.tab-capot::after {
  content: ""; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
}

/* L'œillet de caméra, avec le point de lumière qui l'empêche d'être un simple
   trou noir. */
.tab-camera {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #4a5580 0%, #10152c 62%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* La dalle. Le double liseré fait la tranche de verre : un trait noir au
   contact du châssis, un reflet clair juste au-dessus.
   line-height:0 supprime l'espace que la ligne de texte réserverait sous une
   image inline, qui déséquilibrerait le pourtour vers le bas. */
.tab-ecran {
  position: relative;
  overflow: hidden; border-radius: 10px;
  background: var(--primary);
  line-height: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.07);
}
/* Le reflet en diagonale. Il passe par-dessus la capture, mais ne prend aucun
   clic : celle-ci reste agrandissable. */
.tab-ecran::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 26%, rgba(255, 255, 255, 0) 44%);
}

@media (max-width: 640px) {
  .tab-capot { padding: 20px; border-radius: 26px; }
  .tab-capot::after { bottom: 8px; width: 76px; height: 3px; }
  .tab-camera { top: 8px; width: 6px; height: 6px; }
}

/* ==========================================================================
   Blocs « pourquoi nous » et listes
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature-item { display: flex; gap: 24px; padding: 24px; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; margin-bottom: 24px; }
.feature-item .fi-icon { padding: 12px; height: fit-content; border-radius: var(--radius); }
.feature-item h4 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.fi-navy { background: var(--primary-container); border-left: 4px solid var(--secondary); }
.fi-navy .fi-icon { background: rgba(var(--secondary-rgb), 0.2); }
.fi-navy .fi-icon .material-symbols-outlined { color: var(--secondary); }
.fi-navy h4 { color: var(--white); }
.fi-navy p { color: #9aa3c7; }
.fi-light { background: var(--surface-low); border-left: 4px solid var(--primary); }
.fi-light .fi-icon { background: rgba(0, 5, 37, 0.08); }
.fi-light .fi-icon .material-symbols-outlined { color: var(--primary); }
.fi-light h4 { color: var(--primary); }
.fi-light p { color: var(--outline); }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist .material-symbols-outlined { color: var(--secondary-strong); font-size: 22px; margin-top: 2px; flex-shrink: 0; }
.bg-navy .checklist li { color: rgba(255, 255, 255, 0.85); }
.bg-navy .checklist .material-symbols-outlined,
.page-hero .checklist .material-symbols-outlined { color: var(--secondary); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
/* Variante posée sous une grille de cartes plutôt qu'à côté d'un texte : les
   chiffres se lisent alors comme une ligne de bas de section, pas comme une
   colonne. Trois colonnes, séparées du bloc du dessus par un filet. */
.stats-centrees { grid-template-columns: repeat(3, 1fr); margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; }
.stat b { display: block; font-size: 30px; font-weight: 700; color: var(--secondary); margin-bottom: 8px; }
.stat span { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* Carte décorative (implantation) */
.map-box { position: relative; height: 400px; border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, 0.1); background: var(--primary-container); overflow: hidden; }
.map-box .map-lines {
  position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.06) 49%, rgba(255, 255, 255, 0.06) 51%, transparent 52%);
  background-size: 56px 56px, 56px 56px, 112px 112px;
}
.map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.map-pin .ping { position: absolute; inset: 0; border-radius: 50%; background: var(--secondary); animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.map-pin .dot { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--secondary); border: 4px solid var(--primary); }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
.map-label { position: absolute; left: 50%; top: calc(50% + 28px); transform: translateX(-50%); background: var(--primary); color: var(--white); font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.15); white-space: nowrap; }

/* ==========================================================================
   Bandeau d'appel à l'action
   ========================================================================== */
.cta-band { padding: 96px 0; background: var(--secondary); text-align: center; }
.cta-band h2 { color: var(--primary); margin-bottom: 32px; }
.cta-band .hero-ctas { justify-content: center; }

/* ==========================================================================
   Hero des pages intérieures
   ========================================================================== */
.page-hero { background: var(--primary); color: var(--on-primary); padding: 88px 0; position: relative; overflow: hidden; }
.page-hero h1 { font-size: 48px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 24px; max-width: 820px; }
.page-hero p.lead { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); max-width: 680px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 28px; }
.breadcrumb a { color: rgba(255, 255, 255, 0.5); }
.breadcrumb a:hover { color: var(--secondary); }
.breadcrumb .sep { color: var(--secondary); }

/* ==========================================================================
   Contenu éditorial (sortie de l'éditeur WordPress)
   ========================================================================== */
.entry-content { max-width: 820px; }
.entry-content > * + * { margin-top: 24px; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { color: var(--primary); line-height: 1.25; }
.entry-content h1 { font-size: 40px; font-weight: 800; }
.entry-content h2 { font-size: 32px; font-weight: 700; margin-top: 48px; }
.entry-content h3 { font-size: 24px; font-weight: 600; margin-top: 40px; }
.entry-content h4 { font-size: 20px; font-weight: 600; }
.entry-content p { color: var(--on-background); }
.entry-content ul, .entry-content ol { padding-left: 24px; list-style-position: outside; }
.entry-content li + li { margin-top: 8px; }
.entry-content a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--secondary-strong); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--secondary-strong); }
.entry-content blockquote { padding: 24px 32px; border-left: 4px solid var(--secondary-strong); background: var(--surface-low); border-radius: 0 var(--radius) var(--radius) 0; font-size: 18px; }
.entry-content img { border-radius: var(--radius); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: 12px 16px; border: 1px solid var(--surface-highest); text-align: left; }
.entry-content th { background: var(--surface-low); font-weight: 600; color: var(--primary); }
.entry-content hr { border: none; border-top: 1px solid var(--surface-highest); }

/* Classes d'alignement du cœur WordPress */
.alignleft { float: left; margin: 0 32px 24px 0; }
.alignright { float: right; margin: 0 0 24px 32px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignnone { margin: 0; }
.wp-caption { max-width: 100%; }
.wp-caption img { margin-bottom: 8px; }
.wp-caption-text { font-size: 14px; color: var(--outline); text-align: center; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* ==========================================================================
   Formulaires (dont Contact Form 7)
   ========================================================================== */
.form-card { background: var(--white); border: 1px solid rgba(0, 5, 37, 0.1); border-radius: var(--radius-xl); padding: 40px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--primary); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  font: 400 16px/1.5 'Inter', sans-serif; color: var(--on-background);
  padding: 14px 16px; border: 1px solid var(--surface-highest); border-radius: var(--radius);
  background: var(--surface-low); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--secondary-strong);
  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.2);
  background: var(--white);
}
textarea { resize: vertical; min-height: 140px; }

/* Contact Form 7 : le balisage est généré par le plugin, on l'habille sans le modifier */
.wpcf7 p { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-size: 14px; font-weight: 600; color: var(--primary); }

/* Formulaire à plusieurs champs : grille de 6 colonnes, chaque champ déclarant
   la largeur qu'il occupe. Un code postal n'a pas besoin de la même place qu'une
   adresse, et neuf champs empilés sur une colonne feraient un formulaire très
   long — donc décourageant. Les classes sont posées dans le gabarit du
   formulaire, côté Contact Form 7. */
.wpcf7 .grille-champs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.wpcf7 .grille-champs > p { margin: 0; }
/* Le libellé et son champ sont dans un même <label> : c'est lui qui les empile,
   et qui les associe l'un à l'autre sans avoir à inventer des identifiants. */
.wpcf7 .grille-champs label { display: flex; flex-direction: column; gap: 8px; }
.wpcf7 .champ-2 { grid-column: span 2; }
.wpcf7 .champ-3 { grid-column: span 3; }
.wpcf7 .champ-4 { grid-column: span 4; }
.wpcf7 .champ-6 { grid-column: span 6; }
.wpcf7 .grille-champs + p { margin-top: 28px; }
.wpcf7 input[type="submit"] {
  align-self: flex-start; width: auto;
  padding: 16px 32px; border: none; border-radius: var(--radius);
  background: var(--secondary); color: var(--primary);
  font: 700 14px/1.2 'Inter', sans-serif; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; transition: box-shadow 0.2s;
}
.wpcf7 input[type="submit"]:hover { box-shadow: 0 0 20px rgba(var(--secondary-rgb), 0.4); }
.wpcf7 .wpcf7-not-valid-tip { font-size: 13px; font-weight: 500; color: #c0261a; }
.wpcf7 .wpcf7-not-valid { border-color: #c0261a; }
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0; padding: 16px 20px;
  border: none; border-radius: var(--radius);
  background: var(--surface-low); font-weight: 600;
}
.wpcf7 form.sent .wpcf7-response-output { background: rgba(107, 211, 36, 0.15); color: #2c6607; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: rgba(192, 38, 26, 0.1); color: #c0261a; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }

/* ==========================================================================
   Page Devis — questionnaire en étapes
   Le découpage est posé par kynova.js à partir des <fieldset class="devis-etape">
   déclarés dans le formulaire Contact Form 7. Sans JavaScript, ces règles
   habillent le formulaire d'une seule pièce : rien ne dépend du script.
   ========================================================================== */
/* Un questionnaire se lit en colonne étroite : les lignes trop longues font
   perdre le fil d'une question à l'autre. */
.container-etroit { max-width: 880px; }

.devis-progression { display: flex; gap: 8px; list-style: none; margin: 0 0 40px; padding: 0; }
.devis-progression li {
  flex: 1; padding-top: 12px;
  border-top: 3px solid rgba(0, 5, 37, 0.12);
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--outline);
  transition: border-color 0.3s, color 0.3s;
}
.devis-progression li.faite, .devis-progression li.courante { border-top-color: var(--secondary-strong); color: var(--primary); }

.devis-etape { border: 0; margin: 0; padding: 0; min-width: 0; }
.devis-etape legend { padding: 0; margin-bottom: 8px; font-size: 24px; font-weight: 700; color: var(--primary); }
/* Le script donne le focus au titre à chaque changement d'étape, pour qu'un
   lecteur d'écran annonce la nouvelle question et que la tabulation reprenne
   au bon endroit. Ce titre n'est pas un élément actionnable : son cadre de
   focus n'apprendrait rien et passerait pour un défaut d'affichage. */
.devis-etape legend:focus { outline: none; }
.devis-aide { font-size: 14px; color: var(--outline); margin-bottom: 24px; }

/* Cases et boutons radio présentés en pastilles cliquables : la cible est la
   ligne entière, pas le seul rond de 16 px. */
.devis-etape .wpcf7-radio, .devis-etape .wpcf7-checkbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.devis-etape .wpcf7-list-item { margin: 0; }
.devis-etape .wpcf7-list-item label {
  display: flex; align-items: center; gap: 12px;
  height: 100%; padding: 16px 20px;
  border: 1px solid rgba(0, 5, 37, 0.15); border-radius: var(--radius);
  font-weight: 500; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.devis-etape .wpcf7-list-item label:hover { border-color: var(--secondary-strong); }
.devis-etape .wpcf7-list-item input { flex: none; width: 18px; height: 18px; accent-color: var(--secondary-strong); }
/* L'état coché se lit sur la pastille entière, pas seulement dans le rond. */
.devis-etape .wpcf7-list-item label:has(input:checked) { border-color: var(--secondary-strong); background: rgba(var(--secondary-rgb), 0.1); }
.devis-etape .wpcf7-list-item label:has(input:focus-visible) { outline: 3px solid var(--secondary); outline-offset: 2px; }

.devis-manquant { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: #c0261a; }

.devis-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
/* Un display explicite l'emporte sur la règle [hidden] du navigateur : sans
   ces deux lignes, « Précédent » resterait affiché sur la première étape et
   la navigation entière survivrait à l'envoi du formulaire. */
.devis-nav[hidden] { display: none; }
.devis-nav .btn[hidden], .devis-nav p[hidden] { display: none; }
/* Le bouton d'envoi de Contact Form 7 rejoint cette barre : il y perd la
   marge que porte tout paragraphe du formulaire. */
.devis-nav p { margin: 0; }
/* Le précédent est masqué à la première étape : sans cela le suivant se
   retrouverait seul, collé à gauche. */
.devis-nav .devis-precedent[hidden] + .devis-suivant { margin-left: auto; }
.devis-secours { margin-top: 24px; text-align: center; color: var(--outline); }

/* Carte OpenStreetMap intégrée au thème (cadre simple, aucune bibliothèque JS).
   L'attribution est fournie par OpenStreetMap à l'intérieur du cadre, comme
   l'exige sa licence : ne pas la masquer. */
.carte-kynova { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.carte-kynova .map-box { width: 100%; }
.carte-cadre {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(0, 5, 37, 0.1);
  background: var(--surface-high);
}
.carte-cadre iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Repère maison, superposé au centre de l'emprise. La pointe du symbole tombe
   sur le point visé, et rien n'intercepte la souris : le cadre reste navigable. */
.carte-repere {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -92%);
  font-size: 44px;
  color: var(--secondary-strong);
  pointer-events: none;
  text-shadow: 0 0 3px var(--white), 0 2px 6px rgba(0, 5, 37, 0.45);
}
.carte-lien { text-decoration: none; }

/* Sur fond bleu nuit (accueil), on adoucit les tuiles claires pour qu'elles
   s'intègrent au bloc sombre sans former une tache lumineuse. */
.bg-navy .carte-cadre { border-color: rgba(255, 255, 255, 0.14); }
.bg-navy .carte-cadre iframe { filter: brightness(0.9) saturate(0.92) contrast(1.02); }

/* Sur fond bleu nuit, le bouton passe en contour clair pour rester lisible */
.bg-navy .carte-lien,
.page-hero .carte-lien { border-color: rgba(255, 255, 255, 0.25); color: var(--on-primary); }
.bg-navy .carte-lien:hover,
.page-hero .carte-lien:hover { background: transparent; border-color: var(--on-primary); }

/* Coordonnées de contact */
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-line { display: flex; gap: 16px; align-items: flex-start; }
.contact-line .material-symbols-outlined { color: var(--secondary-strong); flex-shrink: 0; }
.contact-line b { display: block; color: var(--primary); margin-bottom: 2px; }
.contact-line span { color: var(--outline); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.footer { background: var(--primary); color: var(--on-primary); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: var(--section-pad) 32px; max-width: var(--container); margin: 0 auto; }
.footer-logo { display: inline-block; font-size: 34px; font-weight: 800; color: #fff; margin-bottom: 24px; letter-spacing: -0.01em; }
.footer-logo span { color: var(--secondary); }
.footer-logo img { height: 56px; width: auto; }
.footer-tagline { color: rgba(255, 255, 255, 0.6); }
.footer h5 { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.footer ul a { color: rgba(255, 255, 255, 0.8); }
.footer ul a:hover { color: var(--secondary); }
.footer .contact-line, .footer .contact-line span { color: rgba(255, 255, 255, 0.8); }
.footer .contact-line .material-symbols-outlined { color: var(--secondary); }
.footer-bottom { max-width: var(--container); margin: 0 auto; padding: 32px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; color: rgba(255, 255, 255, 0.4); }

/* ==========================================================================
   Utilitaires de gabarit
   Remplacent les attributs style="" de la maquette : le CSS reste dans la
   feuille de style, les gabarits PHP ne portent que du balisage.
   ========================================================================== */
.page-hero .container { position: relative; z-index: 1; }
/* Hero de page en deux colonnes : contenu à gauche, panneau d'interface à droite */
.page-hero-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: center; }
/* Variante des heros qui portent une vraie capture d'écran : le visuel passe
   devant le texte en largeur. Réservée à ces pages-là — appliquée partout, elle
   rétrécit la colonne de texte au point d'empiler les deux boutons d'appel à
   l'action, alors qu'un hero à maquette décorative n'y gagne rien. */
.page-hero-split-capture { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
@media (max-width: 1023px) {
  .page-hero-split { grid-template-columns: 1fr; gap: 48px; }
}
.hero-ctas-spaced { margin-top: 40px; }
.kynova-titre-navy { color: var(--primary); margin-bottom: 24px; }
.kynova-titre-espace { margin-bottom: 32px; }
.kynova-chapo { margin-bottom: 32px; }
.kynova-note { margin-top: 24px; font-size: 13px; color: var(--outline); }
.kynova-fort { color: var(--primary); }
.kynova-coordonnees { margin-bottom: 40px; }
.split-haut { align-items: flex-start; }
.ui-panel-navy { background: var(--primary); }
.ui-panel-etroit { max-width: 340px; margin: 0 auto; }
.kynova-panel-espace { margin-bottom: 32px; }

/* Message d'aide réservé aux administrateurs connectés */
.kynova-avis-admin {
  padding: 16px 20px; border-left: 4px solid var(--secondary-strong); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-low); color: var(--outline); font-size: 14px;
}

/* ==========================================================================
   Cartes « problème → résolu » (signature de la page Accueil Connect)
   ========================================================================== */
.grille-problemes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.carte-probleme {
  display: flex; flex-direction: column; gap: 20px;
  padding: 32px; border-radius: var(--radius-xl);
  background: var(--white); border: 1px solid rgba(0, 5, 37, 0.1);
  transition: box-shadow 0.3s, transform 0.3s;
}
.carte-probleme:hover { box-shadow: 0 20px 40px rgba(0, 5, 37, 0.1); transform: translateY(-4px); }
.carte-probleme p { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.carte-probleme .material-symbols-outlined { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.carte-probleme .probleme { color: var(--outline); font-style: italic; }
.carte-probleme .probleme .material-symbols-outlined { color: #c0261a; }
.carte-probleme .resolu { color: var(--primary); font-weight: 500; padding-top: 20px; border-top: 1px solid var(--surface-high); }
.carte-probleme .resolu .material-symbols-outlined { color: var(--secondary-strong); }

/* ==========================================================================
   Circuit de ronde (signature de la page LinkedSecurity)
   Cinq étapes reliées par une ligne bleue : horizontale sur grand écran,
   verticale sur mobile. Balisage en <ol> : c'est une séquence ordonnée.
   ========================================================================== */
.circuit {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
  list-style: none; margin: 0; padding: 0;
}
/* La ligne passe au centre des pastilles (64 px de haut, donc 32 px) et
   s'arrête avant la première et après la dernière. */
.circuit::before {
  content: ""; position: absolute; z-index: 0;
  top: 31px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, rgba(var(--secondary-rgb), 0.15), var(--secondary) 45%, rgba(var(--secondary-rgb), 0.25));
}
.circuit-etape { position: relative; z-index: 1; text-align: center; }
.circuit-point {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--primary-container); border: 2px solid var(--secondary);
}
.circuit-point .material-symbols-outlined { font-size: 28px; color: var(--secondary); }
.circuit-texte { flex: 1; min-width: 0; }
.circuit-etape h3 { font-size: 18px; font-weight: 600; color: var(--on-primary); margin-bottom: 10px; }
.circuit-etape p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }

@media (max-width: 1023px) {
  .circuit { grid-template-columns: 1fr; gap: 0; }
  .circuit::before { top: 32px; bottom: 40px; left: 31px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--secondary), rgba(var(--secondary-rgb), 0.25)); }
  .circuit-etape { display: flex; gap: 20px; text-align: left; padding-bottom: 32px; }
  .circuit-etape:last-child { padding-bottom: 0; }
  .circuit-point { margin: 0; flex-shrink: 0; }
}

/* ==========================================================================
   Schéma de fonctionnement de l'application (page AccueilConnect)
   Trois colonnes : ce qui arrive au poste, l'application, ce qui en ressort.
   Le contenu est textuel et porteur de sens : il n'est pas masqué aux
   lecteurs d'écran, seules les flèches sont décoratives.
   ========================================================================== */
.schema { display: grid; grid-template-columns: 1fr 56px 1.15fr 56px 1fr; align-items: center; }

.schema-colonne { padding: 32px; border-radius: var(--radius-xl); background: var(--surface-low); border: 1px solid var(--surface-highest); }
.schema-titre { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--outline); margin-bottom: 20px; }
.schema-colonne ul { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.schema-colonne li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--primary); }
.schema-colonne .material-symbols-outlined { font-size: 20px; color: var(--secondary-strong); flex-shrink: 0; margin-top: 1px; }

.schema-fleche { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: var(--secondary); }
.schema-fleche .material-symbols-outlined { font-size: 24px; color: var(--primary); }

/* Bloc central : l'application */
.schema-centre { text-align: center; }
.schema-sites { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.schema-sites span {
  padding: 6px 14px; border-radius: 99px;
  background: var(--surface-high); border: 1px solid var(--surface-highest);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--outline);
}
/* Trait de liaison entre les sites et l'application */
.schema-liaison { width: 2px; height: 24px; margin: 0 auto; background: linear-gradient(180deg, var(--surface-highest), var(--secondary-strong)); }

.schema-app {
  padding: 32px 28px; border-radius: var(--radius-xl);
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 24px 64px rgba(0, 5, 37, 0.28);
}
.schema-app-nom { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.schema-app-nom span { color: var(--secondary); }
.schema-app-sous { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 24px; }
.schema-app-modules { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.schema-app-modules span {
  padding: 8px 14px; border-radius: var(--radius);
  background: rgba(var(--secondary-rgb), 0.14); border: 1px solid rgba(var(--secondary-rgb), 0.3);
  font-size: 13px; font-weight: 600; color: var(--secondary);
}
.schema-acces { margin-top: 16px; font-size: 13px; color: var(--outline); }

@media (max-width: 1023px) {
  .schema { grid-template-columns: 1fr; gap: 0; }
  .schema-fleche { margin: 20px auto; transform: rotate(90deg); }
}

/* ==========================================================================
   Modules par familles, avec écran collant (page AccueilConnect)
   L'écran de gauche reste à l'écran pendant que les familles défilent à
   droite ; son contenu suit la famille en cours de lecture. Rien n'est
   masqué : le visiteur n'a rien à cliquer, il descend simplement.
   ========================================================================== */
/* Première colonne = l'écran collant. Il passe devant la liste des familles :
   c'est lui qui porte les captures, et la liste se lit très bien plus étroite. */
.modules-scroll { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; }

/* 112 px = hauteur de la barre de navigation collante (80) + respiration */
.modules-visuel { position: sticky; top: 112px; }
/* L'écran est la dalle du cadre d'ordinateur qui l'entoure : il n'a plus à
   porter ni coins arrondis, ni filet, ni ombre — le châssis s'en charge. Il ne
   garde que le fond et la marge intérieure de la maquette dessinée de repli. */
.modules-ecran {
  position: relative; min-height: 400px;
  padding: 24px;
  background: var(--primary);
}
.modules-ecran-lignes {
  position: absolute; inset: 24px;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
}
/* Les écrans en retrait sont superposés à l'écran visible : seul ce dernier
   reçoit les clics, sinon c'est le dernier du DOM — invisible — qui les
   intercepterait. */
.modules-ecran-lignes.active { opacity: 1; transform: none; pointer-events: auto; }

/* Variante à vraies captures : l'écran épouse le format des images au lieu
   d'une hauteur fixe, et chaque capture occupe toute la surface du cadre. La
   pile reste superposée, c'est toujours la classe .active qui décide laquelle
   se voit — le script de synchronisation n'a pas à savoir ce qu'elle contient. */
/* Avec de vraies captures, la dalle n'a plus de marge : l'image la remplit
   d'un bord à l'autre, comme un logiciel affiché en plein écran. */
.modules-ecran-captures { min-height: 0; padding: 0; }
.modules-ecran-captures .modules-ecran-pile { position: relative; aspect-ratio: 1280 / 637; }
.modules-ecran-captures .modules-ecran-lignes { position: absolute; inset: 0; display: block; }
.modules-ecran-captures .capture-logiciel {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  border: none; box-shadow: none; border-radius: 0;
}

/* Familles */
.famille {
  padding: 56px 0 56px 32px;
  border-left: 2px solid var(--surface-high);
  transition: border-color 0.3s;
}
.famille:first-child { padding-top: 0; }
.famille:last-child { padding-bottom: 0; }
.famille-active { border-left-color: var(--secondary-strong); }
.famille-numero { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--secondary-strong); margin-bottom: 12px; }
.famille h3 { font-size: 30px; line-height: 1.3; font-weight: 600; color: var(--primary); margin-bottom: 12px; }
.famille-intro { color: var(--outline); font-size: 17px; line-height: 1.6; }

.famille-modules { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 28px 0 0; padding: 0; }
.famille-modules li { display: flex; gap: 16px; padding: 16px; border-radius: var(--radius); transition: background 0.2s; }
.famille-modules li:hover { background: var(--surface-low); }
.famille-modules .material-symbols-outlined { font-size: 24px; color: var(--secondary-strong); flex-shrink: 0; }
.famille-modules b { display: block; font-size: 17px; font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.famille-modules p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--outline); }

/* Sous 1024 px, l'écran collant est retiré : il est décoratif, et un élément
   collant sur petit écran mange la moitié de la hauteur utile. */
@media (max-width: 1023px) {
  .modules-scroll { grid-template-columns: 1fr; gap: 0; }
  .modules-visuel { display: none; }
  .famille { padding: 40px 0 40px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .modules-ecran-lignes { transition: none; }
  .famille { transition: none; }
}

/* ==========================================================================
   Maquettes de smartphone (signature de la page Applications mobiles)
   Entièrement en CSS : aucune image, donc rien à recadrer ni à optimiser.
   Purement décoratif, à marquer aria-hidden dans le gabarit.
   ========================================================================== */
.mobile {
  position: relative;
  width: 100%; max-width: 280px; margin: 0 auto;
  aspect-ratio: 9 / 18.5;
  padding: 12px;
  border-radius: 40px;
  background: linear-gradient(160deg, #2b3556, var(--primary-container));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
/* Encoche */
.mobile::before {
  content: ""; position: absolute; z-index: 2;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 20px; border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
}
.mobile-ecran {
  height: 100%; border-radius: 30px; overflow: hidden;
  background: var(--primary);
  padding: 52px 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.mobile-ligne {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.mobile-ligne .material-symbols-outlined { font-size: 18px; color: var(--secondary); flex-shrink: 0; }
.mobile-lignes { flex: 1; }
.mobile-lignes b { display: block; height: 6px; width: 62%; border-radius: 3px; background: rgba(255, 255, 255, 0.35); margin-bottom: 5px; }
.mobile-lignes i { display: block; height: 5px; width: 88%; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.mobile-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: auto; }
.mobile-bars i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, 0.12); }
.mobile-bars i.hi { background: var(--secondary); }

/* Deux appareils côte à côte, le second légèrement décalé */
.mobile-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mobile-duo .mobile { max-width: 220px; }
.mobile-duo > div:last-child { margin-top: 40px; }
.mobile-etiquette {
  display: block; margin-top: 16px; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--secondary-strong);
}

@media (max-width: 640px) {
  .mobile-duo { gap: 12px; }
  .mobile-duo > div:last-child { margin-top: 24px; }
  .mobile-ecran { padding: 44px 10px 14px; }
}

/* ==========================================================================
   Comparatif avant / après (signature de la page Applications métiers)
   Deux colonnes opposées par le contraste : le désordre actuel à gauche sur
   fond clair, le logiciel sur mesure à droite sur fond bleu nuit.
   ========================================================================== */
.comparatif { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 0; }
.comparatif-col { padding: 40px; border-radius: var(--radius-xl); }
.comparatif-col ul { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; }
.comparatif-col li { display: flex; gap: 14px; align-items: flex-start; }
.comparatif-col .material-symbols-outlined { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.comparatif-etiquette {
  font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 24px;
}

.comparatif-avant { background: var(--surface-low); border: 1px solid var(--surface-highest); }
.comparatif-avant .comparatif-etiquette { color: var(--outline); }
.comparatif-avant li { color: var(--outline); }
.comparatif-avant .material-symbols-outlined { color: #c0261a; }

.comparatif-apres { background: var(--primary); box-shadow: 0 24px 64px rgba(0, 5, 37, 0.25); }
.comparatif-apres .comparatif-etiquette { color: var(--secondary); }
.comparatif-apres li { color: rgba(255, 255, 255, 0.9); }
.comparatif-apres .material-symbols-outlined { color: var(--secondary); }

.comparatif-fleche {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 4px;
  border-radius: 50%; background: var(--secondary);
}
.comparatif-fleche .material-symbols-outlined { font-size: 28px; color: var(--primary); }

@media (max-width: 1023px) {
  .comparatif { grid-template-columns: 1fr; }
  .comparatif-fleche { margin: 24px auto; transform: rotate(90deg); }
}

/* ==========================================================================
   Étude de cas (page Applications métiers)
   La réalisation est présentée avec le bloc produit de la page d'accueil : il
   ne reste ici que la légende de la capture et la phrase qui referme la
   section, les deux seuls éléments que ce composant n'a pas.
   ========================================================================== */
/* La capture de Checkin'Up est presque carrée, là où les autres sont en
   paysage : sans plafond, la tablette dépasserait en hauteur son propre bloc. */
#realisation .tab { max-width: 560px; margin: 0 auto; }

.cas-legende {
  margin: 24px auto 0; max-width: 460px;
  text-align: center; font-size: 14px; line-height: 1.6;
  color: var(--outline);
}

.cas-chute {
  max-width: 820px; margin: 56px auto 0;
  text-align: center; font-size: 18px; line-height: 1.7;
  color: var(--outline);
}
@media (max-width: 640px) {
  .cas-chute { margin-top: 40px; font-size: 16px; }
}

/* Liste de caractéristiques sur deux colonnes */
.checklist-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
@media (max-width: 767px) { .checklist-2col { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pastilles de chiffres clés (hero produit, sur fond bleu nuit)
   ========================================================================== */
.chips-cles { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.chips-cles .chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px; color: rgba(255, 255, 255, 0.75);
}
.chips-cles .chip b { color: var(--on-primary); font-weight: 700; }
.chips-cles .chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--secondary); box-shadow: 0 0 0 4px rgba(var(--secondary-rgb), 0.18);
}

/* ==========================================================================
   Étiquettes de sécurité
   ========================================================================== */
.etiquettes { display: flex; flex-wrap: wrap; gap: 12px; }
.etiquette {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px; font-weight: 500; color: var(--on-primary);
}
.etiquette .material-symbols-outlined { font-size: 20px; color: var(--secondary); }

@media (max-width: 1023px) {
  .grille-problemes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog, archives et recherche
   ========================================================================== */
.liste-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.liste-articles .card { display: flex; flex-direction: column; }
.carte-article-image { display: block; flex-shrink: 0; margin: -32px -32px 24px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; }
.carte-article-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.4s; }
.card:hover .carte-article-image img { transform: scale(1.04); }

/* Intertitre entre l'article à la une et la grille */
.liste-articles-entete {
  display: flex; align-items: center; gap: 16px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--outline); margin-bottom: 24px;
}
.liste-articles-entete::after { content: ""; flex: 1; height: 1px; background: rgba(0, 5, 37, 0.1); }

.carte-article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--outline); margin-bottom: 12px;
}
.carte-article-meta .meta-sep { color: var(--secondary-strong); }
.meta-lecture { display: inline-flex; align-items: center; gap: 4px; }
.meta-lecture .material-symbols-outlined { font-size: 16px; }
.liste-articles h2 {
  margin-bottom: 16px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.liste-articles h2 a { color: var(--primary); }
.liste-articles h2 a:hover { color: var(--secondary-strong); }
.liste-articles .card > p:not(.carte-article-meta) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.liste-articles .card-link { margin-top: auto; padding-top: 24px; }

/* Article « À la une » en tête de la page Actualités */
.article-une {
  display: grid; grid-template-columns: 1fr 1.1fr;
  padding: 0; overflow: hidden; margin-bottom: 56px;
}
.article-une-visuel { position: relative; display: block; min-height: 340px; }
.article-une-visuel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.4s;
}
.article-une:hover .article-une-visuel img { transform: scale(1.03); }
.article-une-sans-image { grid-template-columns: 1fr; }
.article-une-contenu { padding: 48px; }
.article-une .carte-article-meta { color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; }
.article-une .carte-article-meta .meta-sep { color: var(--secondary); }
.badge-une {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--secondary); color: var(--primary);
  font-size: 12px; font-weight: 700;
}
.article-une h2 { margin-bottom: 16px; }
.article-une h2 a { color: var(--on-primary); }
.article-une h2 a:hover { color: var(--secondary); }
.article-une .body-lg { color: rgba(255, 255, 255, 0.75); margin-bottom: 28px; }

.article-image-large { margin-bottom: 48px; }
.article-image-large img { width: 100%; border-radius: var(--radius-xl); }

/* Pagination */
.pagination { margin-top: 64px; }
.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: var(--radius); background: var(--white);
  border: 1px solid rgba(0, 5, 37, 0.1);
  font-size: 14px; font-weight: 600; color: var(--primary);
}
.pagination .page-numbers:hover { border-color: var(--secondary-strong); color: var(--secondary-strong); }
.pagination .page-numbers.current { background: var(--secondary); border-color: var(--secondary); color: var(--primary); }
.pagination .page-numbers.dots { border: none; background: transparent; }
.pagination .pagination-fleche { font-size: 18px; }
.pagination .pagination-fleche-retour { transform: scaleX(-1); }
.pagination .screen-reader-text { display: none; }

/* Navigation entre articles */
.navigation-articles .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.navigation-articles .nav-links a { display: block; padding: 24px; border-radius: var(--radius-xl); background: var(--surface-low); font-weight: 600; color: var(--primary); }
.navigation-articles .nav-links a:hover { background: var(--surface-high); }
.navigation-articles .nav-next { text-align: right; }
.navigation-articles .label { display: block; margin-bottom: 8px; color: var(--outline); }

/* Formulaire de recherche */
.formulaire-recherche { display: flex; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.formulaire-recherche input[type="search"] { flex: 1; min-width: 200px; }

/* Commentaires */
.comment-list { list-style: none; padding: 0; }
.comment-list li { padding: 24px 0; border-bottom: 1px solid var(--surface-highest); }
.comment-list .children { list-style: none; padding-left: 32px; }
.comment-meta { font-size: 14px; color: var(--outline); margin-bottom: 8px; }
.comment-form { display: flex; flex-direction: column; gap: 16px; }
.comment-form label { font-size: 14px; font-weight: 600; color: var(--primary); }
.comment-form .submit {
  align-self: flex-start; padding: 16px 32px; border: none; border-radius: var(--radius);
  background: var(--secondary); color: var(--primary);
  font: 700 14px/1.2 'Inter', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
}
.comment-form .submit:hover { box-shadow: 0 0 20px rgba(var(--secondary-rgb), 0.4); }

.page-links { margin-top: 32px; font-weight: 600; color: var(--primary); }
.page-links a { padding: 0 6px; }

/* ==========================================================================
   Apparition au défilement
   L'état masqué n'est posé que par le JS : sans JS, tout reste visible.
   ========================================================================== */
.reveal { transition: opacity 0.7s, transform 0.7s; }
.reveal-init { opacity: 0; transform: translateY(40px); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-init { opacity: 1; transform: none; transition: none; }
  .map-pin .ping { animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1024px) {
  .b4 { grid-column: span 4; }
  .b6 { grid-column: span 6; }
  .b8 { grid-column: span 8; }
}
@media (max-width: 1023px) {
  .display { font-size: 40px; letter-spacing: -0.01em; }
  .headline-xl { font-size: 32px; }
  .headline-lg { font-size: 27px; }
  .headline-md { font-size: 24px; }
  .section { padding: var(--section-pad-m) 0; }
  .section-title { margin-bottom: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: var(--section-pad-m) 32px; }
  .hero { min-height: 0; padding: var(--section-pad-m) 0; }
  .hero-inner, .split { grid-template-columns: 1fr; gap: 48px; }
  .page-hero { padding: 64px 0; }
  .page-hero h1 { font-size: 34px; }
  .cta-band { padding: 72px 0; }
  .entry-content h1 { font-size: 30px; }
  .entry-content h2 { font-size: 26px; }
  .famille h3 { font-size: 24px; }
  .nav .nav-links, .nav-actions ul { display: none; }
  .nav-burger { display: block; }
  .liste-articles { grid-template-columns: repeat(2, 1fr); }
  .article-une { grid-template-columns: 1fr; }
  .article-une-visuel { min-height: 220px; }
  .article-une-contenu { padding: 32px; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .display { font-size: 34px; }
  .headline-xl { font-size: 28px; }
  .section { padding: 48px 0; }
  .section-title { margin-bottom: 36px; }
  .nav-inner { padding: 0 20px; height: 68px; }
  .nav-logo { font-size: 22px; }
  .nav-logo img { height: 34px; }
  .footer-logo img { height: 44px; }
  .nav-mobile { padding: 16px 20px 24px; }
  .hero { padding: 56px 0; }
  .hero-inner, .split { gap: 40px; }
  .chips-cles { margin-top: 32px; }
  .page-hero { padding: 48px 0; }
  .page-hero h1 { font-size: 29px; }
  .cta-band { padding: 56px 0; }
  /* Le retrait des images de carte suit le nouveau padding des cartes */
  .card { padding: 24px; }
  .carte-article-image { margin: -24px -24px 20px; }
  .article-une { padding: 0; } /* la carte à la une reste bord à bord */
  .article-une-contenu { padding: 28px 24px; }
  .form-card { padding: 24px; }
  /* Sur un écran étroit, tous les champs prennent la largeur : un code postal
     sur deux colonnes de 40 px ne se saisit pas. */
  .wpcf7 .grille-champs { grid-template-columns: 1fr; }
  .wpcf7 .champ-2, .wpcf7 .champ-3, .wpcf7 .champ-4, .wpcf7 .champ-6 { grid-column: span 1; }
  .form-grid { grid-template-columns: 1fr; }
  .comparatif-col { padding: 28px 24px; }
  .schema-colonne { padding: 24px; }
  .schema-app { padding: 24px 20px; }
  .famille { padding: 32px 0 32px 20px; }
  .feature-item { gap: 16px; padding: 20px; }
  .carte-cadre, .map-box { height: 320px; }
  .entry-content table { display: block; overflow-x: auto; }
  .footer-grid { grid-template-columns: 1fr; padding: 48px 20px; }
  .footer-bottom { padding: 24px 20px; }
  .stats { grid-template-columns: 1fr 1fr; }
  /* Trois chiffres côte à côte sur un écran étroit deviennent trois colonnes
     de deux mots : ils s'empilent. */
  .stats-centrees { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .alignleft, .alignright { float: none; margin: 0; }
  .liste-articles { grid-template-columns: 1fr; }
  .navigation-articles .nav-links { grid-template-columns: 1fr; }
  .navigation-articles .nav-next { text-align: left; }
  /* Les libellés d'étapes ne tiennent plus côte à côte : la progression se
     réduit à des traits, et seule l'étape en cours reste nommée. */
  .devis-progression li { font-size: 0; padding-top: 8px; }
  .devis-progression li.courante { font-size: 13px; }
}
@media (max-width: 480px) {
  /* Les appels à l'action passent en pleine largeur : plus faciles à toucher */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .wpcf7 input[type="submit"] { width: 100%; }
  .devis-nav { flex-direction: column-reverse; }
  .devis-nav .btn { width: 100%; }
  .pagination .pagination-libelle { display: none; }
}