:root{color-scheme:only light}
/* ============ PAGE INTÉRIEURE — système Mix V3 « grand compte » ============
   Reprend la charte de la home validée : architecture plate, arrondi aux
   objets, filet signature K2000, kickers à filet, Shader Buttons.
   Ajouts propres aux pages intérieures : fil d'Ariane, hero de page avec
   encart « réponse directe » (fond bleu ciel — demande d'Aurélie, 12/08),
   nappe --ciel pour une section, tableaux HTML zébrés ciel. */
:root{
  --navy:#0B3F70; --navy-ink:#082C4E; --menthe:#8BD6B5; --chartreuse:#DCDE54;
  --corail:#FF806B; --corail-ink:#C7462B; --horizon:#1F6F96; --clair:#EEF3F9;--ciel:#70BAE0;--nuit:#082C4E;
  --ciel-nappe:#D9EDF8;   /* le bleu clair d'Aurélie : ciel #70BAE0 dilué, nettement distinct du --clair */
  --font:"Montserrat",system-ui,sans-serif;
  --r-nappe:14px; --r-carte:12px;
  --ombre:0 1px 2px rgba(8,44,78,.05);--filet:1px solid rgba(11,63,112,.12);
  --ease:cubic-bezier(.32,.72,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);color:var(--navy-ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.conteneur{max-width:1240px;margin:0 auto;padding:0 clamp(34px,4.5vw,54px)}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;text-wrap:balance}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--horizon);outline-offset:3px}

/* titres : l'échelle grand compte + le filet signature K2000 */
h2{font-size:clamp(27px,3.6vw,44px);letter-spacing:-.03em;line-height:1.08;max-width:26ch}
h2::after{content:"";display:block;width:64px;height:3px;border-radius:2px;margin-top:20px;
  background:linear-gradient(90deg,#0B3F70 0%,#2F8361 32%,#DCDE54 50%,#2F8361 68%,#0B3F70 100%);
  background-size:260% 100%;background-position:0% 0;
  animation:kitt 4.6s ease-in-out infinite}
@keyframes kitt{0%{background-position:0% 0}38%{background-position:100% 0}
  50%{background-position:100% 0}88%{background-position:0% 0}100%{background-position:0% 0}}
.nappe--navy h2,.nappe--navy h3{color:#fff}
.nappe--navy h2::after{background-image:linear-gradient(90deg,rgba(255,255,255,.25) 0%,#8BD6B5 32%,#DCDE54 50%,#8BD6B5 68%,rgba(255,255,255,.25) 100%)}
@media (prefers-reduced-motion: reduce){h2::after{animation:none;background-size:100% 100%}}

/* révélation des h2 par lignes */
.lg{display:block;overflow:hidden;overflow-wrap:break-word}
.lg>span{display:block;transform:translateY(110%);transition:transform .6s var(--ease)}
h2.on .lg>span{transform:none}
.lg:nth-child(2)>span{transition-delay:.08s}
.lg:nth-child(3)>span{transition-delay:.16s}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .lg>span{transform:none;transition:none}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* kickers sobres, allumage au survol selon le fond */
.pill{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 16px;border-radius:10px;margin-bottom:22px;
  background:transparent;border:var(--filet);color:var(--navy);
  transition:background .35s var(--ease),border-color .35s var(--ease)}
.pill:hover{background:rgba(112,186,224,.3);border-color:var(--ciel)}
.nappe--claire .pill:hover,.nappe--ciel .pill:hover{background:rgba(220,222,84,.32);border-color:var(--chartreuse)}
.nappe--navy .pill{border-color:rgba(255,255,255,.3);color:#fff}
.nappe--navy .pill:hover{background:rgba(139,214,181,.22);border-color:var(--menthe)}

/* boutons */
.btn{display:inline-block;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:12px;position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,filter .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(8,44,78,.18)}
.btn--menthe{overflow:hidden;color:#fff;
  background:linear-gradient(115deg,#04101C 0%,#0B3F70 45%,#2F8361 70%,#DCDE54 100%);
  text-shadow:0 1px 10px rgba(4,16,28,.55)}
.btn--menthe:hover{filter:brightness(1.1)}
.btn--blanc{background:#fff;color:var(--navy);border:1.5px solid rgba(11,63,112,.3)}
.btn--blanc:hover{background:var(--menthe)}
.btn--menthe .shader-toile,.fiche__cta .shader-toile,.cas__btn .shader-toile,.btn--chartreuse .shader-toile,.btn--corail .shader-toile{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.btn--menthe>*,.fiche__cta>*,.cas__btn>*,.btn--chartreuse>*,.btn--corail>*{position:relative;z-index:1}
.fiche__cta,.cas__btn{position:relative;overflow:hidden}
.btn--chartreuse{position:relative;overflow:hidden;background:var(--chartreuse);color:var(--navy);border-radius:12px;
  transition:filter .35s var(--ease)}
.btn--chartreuse:hover{filter:brightness(1.07)}
.btn--corail{position:relative;overflow:hidden;background:var(--corail);color:var(--navy);border-radius:12px;
  transition:filter .35s var(--ease)}
.btn--corail:hover{filter:brightness(1.07)}
.btn--blanc-anime{position:relative;overflow:hidden;background:#F4F7FA;color:var(--navy);border-radius:12px;
  transition:filter .35s var(--ease)}
.btn--blanc-anime:hover{filter:brightness(1.04)}
.btn--blanc-anime .shader-toile{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.btn--blanc-anime>*{position:relative;z-index:1}

/* nappes : architecture plate */
.nappe--claire{background:var(--clair)}
.nappe--navy{background:var(--navy);color:#fff}
.nappe--ciel{background:var(--ciel-nappe)}   /* le bleu clair d'Aurélie, en fond de section */
.section{padding:clamp(72px,7.5vw,104px) 0}

/* ---- Header : barre navy pleine largeur + super-menu ---- */
.tete{position:sticky;top:0;z-index:50;
  /* le fond porte la pleine largeur ; .tete__in peut donc etre plafonne
     au-dessus de 1680 sans que la barre navy s'arrete au milieu. */
  background:var(--navy);box-shadow:var(--ombre)}
.tete__in{padding:10px 12px 10px 26px;display:flex;align-items:center;gap:34px}
.tete__logo img{height:36px}
.tete__nav{display:flex;align-items:center;gap:2px;margin:0 auto}
.tete__nav>a,.nav-g__t{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;--pad-nav:13px;
  line-height:1;white-space:nowrap;border-radius:8px;position:relative;
  font-size:14.5px;color:rgba(255,255,255,.88);transition:color .2s}
.tete__nav>a:hover,.nav-g:hover .nav-g__t{background:rgba(255,255,255,.07)}
.chv{width:11px;height:11px;opacity:.75;transition:transform .3s var(--ease)}
.nav-g:hover .chv,.nav-g:focus-within .chv{transform:rotate(180deg)}
.nav-g{position:relative;display:inline-flex;align-items:center}
.panneau{position:absolute;top:100%;left:50%;padding-top:14px;z-index:60;
  opacity:0;pointer-events:none;
  transform:translate(-50%,18px) scale(.97);filter:blur(5px);
  transition:opacity .38s var(--ease),transform .38s var(--ease),filter .38s var(--ease)}
.nav-g:hover .panneau,.nav-g:focus-within .panneau{opacity:1;pointer-events:auto;
  transform:translate(-50%,0) scale(1);filter:blur(0)}
.panneau--gauche{left:0;transform:translate(0,18px) scale(.97)}
.nav-g:hover .panneau--gauche,.nav-g:focus-within .panneau--gauche{transform:translate(0,0) scale(1)}
.panneau--droite{left:auto;right:0;transform:translate(0,18px) scale(.97)}
.nav-g:hover .panneau--droite,.nav-g:focus-within .panneau--droite{transform:translate(0,0) scale(1)}
.panneau__in{background:#fff;border-radius:14px;border:var(--filet);
  box-shadow:0 24px 60px rgba(8,44,78,.2);padding:14px;min-width:300px;
  display:flex;flex-direction:column;gap:2px}
.panneau__in--2col{display:grid;grid-template-columns:1fr 1fr;min-width:580px;gap:2px 12px}
.panneau__in a{display:block;padding:12px 14px;border-radius:9px;text-decoration:none;
  transition:background .2s var(--ease);opacity:0;transform:translateY(9px)}
.nav-g:hover .panneau__in a,.nav-g:focus-within .panneau__in a{opacity:1;transform:none;
  transition:background .2s var(--ease),opacity .4s var(--ease),transform .4s var(--ease)}
.nav-g:hover .panneau__in a:nth-child(1),.nav-g:focus-within .panneau__in a:nth-child(1){transition-delay:0s,.05s,.05s}
.nav-g:hover .panneau__in a:nth-child(2),.nav-g:focus-within .panneau__in a:nth-child(2){transition-delay:0s,.1s,.1s}
.nav-g:hover .panneau__in a:nth-child(3),.nav-g:focus-within .panneau__in a:nth-child(3){transition-delay:0s,.15s,.15s}
.nav-g:hover .panneau__in a:nth-child(4),.nav-g:focus-within .panneau__in a:nth-child(4){transition-delay:0s,.2s,.2s}
.nav-g:hover .panneau__in a:nth-child(5),.nav-g:focus-within .panneau__in a:nth-child(5){transition-delay:0s,.25s,.25s}
.nav-g:hover .panneau__in a:nth-child(6),.nav-g:focus-within .panneau__in a:nth-child(6){transition-delay:0s,.3s,.3s}
.panneau__in a:hover{background:rgba(112,186,224,.16)}
.panneau__in b{display:block;font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap}
.panneau__in span{display:block;font-size:12px;color:#63788C;margin-top:2px}
@media (prefers-reduced-motion: reduce){
  .panneau{transition:opacity .2s;filter:none;transform:translate(-50%,0)}
  .panneau__in a{opacity:1;transform:none}}
@media(max-width:1080px){.panneau{display:none}.tete__nav{display:none}}

/* ---- Fil d'Ariane ---- */
.fil{padding:22px 0 0;font-size:12.5px;color:#63788C;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fil a{color:var(--horizon);transition:color .2s}
.fil a:hover{color:var(--navy)}
.fil i{font-style:normal;opacity:.5}
.fil b{font-weight:600;color:var(--navy)}

/* ---- Hero de page intérieure ---- */
.ph{padding:44px 0 72px}
.ph__grille{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:start}
.ph__kicker{display:inline-flex;align-items:center;gap:9px;background:var(--clair);
  border-radius:8px;padding:8px 14px;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy)}
.ph__kicker i{width:8px;height:8px;background:var(--ciel);border-radius:2px}
.ph h1{margin-top:26px;font-size:clamp(32px,4vw,52px);line-height:1.08;
  letter-spacing:-.035em;color:var(--navy)}
.ph h1 em{font-style:normal;color:var(--ciel)}
/* l'encart « réponse directe » : le bleu ciel devient la couleur de l'essentiel */
.ph__reponse{margin-top:30px;background:linear-gradient(180deg,rgba(112,186,224,.18),rgba(112,186,224,.08));
  border-left:3px solid var(--ciel);border-radius:0 12px 12px 0;
  padding:24px 28px;font-size:16px;line-height:1.7;color:var(--navy-ink);max-width:64ch}
.ph__badges{margin-top:24px;font-size:12.5px;color:#63788C;line-height:1.7}
.ph__badges b{color:var(--navy);font-weight:600}
.ph__actions{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap}
.ph__meta{margin-top:30px;display:flex;align-items:center;gap:13px;font-size:13px;color:#63788C}
.ph__meta .avatar{width:40px;height:40px;border-radius:10px;background:var(--clair);border:var(--filet);
  display:grid;place-items:center;font-weight:600;font-size:14px;color:var(--navy);flex:none}
.ph__meta b{display:block;color:var(--navy);font-weight:600}
/* cartes de preuve à droite (le langage hv__carte de la home) */
.ph__cartes{display:grid;gap:16px;position:sticky;top:96px}
.ph__carte{background:var(--navy);color:#fff;border-radius:var(--r-carte);padding:20px 22px}
.ph__carte header{display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ph__carte header i{font-style:normal;color:var(--chartreuse);text-transform:none;letter-spacing:0}
.ph__carte p{margin-top:10px;font-size:13.5px;line-height:1.55;color:#fff}
.ph__carte--claire{background:#fff;border:var(--filet);color:var(--navy-ink)}
.ph__carte--claire header{color:#63788C}
.ph__carte--claire header i{color:var(--horizon)}
.ph__carte--claire p{color:#3C5670}
.ph__carte--claire b{color:var(--navy)}
.ph__partner{display:flex;align-items:center;gap:12px;background:#fff;border:var(--filet);
  border-radius:var(--r-carte);padding:16px 18px}
.ph__partner img{height:24px;width:auto}
.ph__partner b{display:block;font-size:13px;color:var(--navy);line-height:1.25}
.ph__partner span{display:block;font-size:11px;color:#63788C;margin-top:2px}

/* ---- Sommaire « sur cette page » ---- */
.sommaire{margin-top:40px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sommaire i{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#8296A8;margin-right:6px}
.sommaire a{font-size:12.5px;font-weight:600;border:var(--filet);border-radius:8px;padding:8px 14px;
  color:var(--navy);transition:background .3s var(--ease),border-color .3s var(--ease)}
.sommaire a:hover{background:rgba(112,186,224,.28);border-color:var(--ciel)}

/* ---- Corps de texte ---- */
.prose{max-width:70ch;font-size:15.5px;line-height:1.7;color:#3C5670}
.prose+.prose{margin-top:18px}
.prose b{color:var(--navy-ink)}
.prose a{color:var(--horizon);font-weight:600;border-bottom:1.5px solid rgba(31,111,150,.3);
  transition:border-color .2s}
.prose a:hover{border-color:var(--horizon)}
.nappe--navy .prose{color:rgba(255,255,255,.82)}
.nappe--navy .prose b{color:#fff}
.nappe--navy .prose a{color:var(--menthe);border-color:rgba(139,214,181,.35)}
.intro-grand{font-size:21px;line-height:1.6;max-width:32em;color:var(--navy-ink)}
/* ===== Espace sous le titre (22/08) =====
   Les 30 px qui separent un titre de son premier paragraphe n'etaient pas une
   regle : ils etaient ecrits a la main, en style en ligne, paragraphe par
   paragraphe. 92 fois sur 35 pages. Trois l'avaient perdu et tombaient a 0,
   et .intro-grand ne l'a jamais eu, d'ou les titres colles a leur texte sur
   services-tma, services-finops et services (releve d'Indiana le 22/08).
   La regle entre dans la feuille, la valeur reste celle deja en place. Les
   styles en ligne existants sont conserves : ils declarent la meme valeur.
   Les articles de blog gardent leur rythme propre, .ga-corps>p a 20 px, plus
   specifique donc prioritaire. */
h2 + p{margin-top:30px}
.intro-grand + p{margin-top:18px}
.intro-grand em{font-style:normal;color:var(--horizon)}

/* ---- Périmètre : 6 blocs ---- */
.blocs6{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blocs6>div{background:#fff;border:var(--filet);border-radius:var(--r-carte);padding:28px 26px;
  transition:transform .35s var(--ease)}
.blocs6>div:hover{transform:translateY(-4px)}
.blocs6 .num{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  font-size:13px;font-weight:600;color:var(--navy);background:var(--clair);border:var(--filet);
  margin-bottom:16px;transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.blocs6>div:hover .num{background:rgba(112,186,224,.75);border-color:var(--ciel);color:var(--nuit)}
.blocs6 b{display:block;font-size:16.5px;margin-bottom:8px;color:var(--navy)}
.blocs6 p{font-size:14px;line-height:1.6;color:#3C5670}

/* ---- Duo ITSM/ITIL + ESM ---- */
.duo{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo>div{border-radius:var(--r-carte);padding:32px 32px 30px}
.duo .d-navy{background:var(--navy);color:#fff}
.duo .d-navy b{color:var(--chartreuse)}
.duo .d-navy p{color:rgba(255,255,255,.82)}
.duo .d-claire{background:var(--clair);border:var(--filet)}
.duo .d-claire b{color:var(--navy)}
.duo b{display:block;font-size:18px;margin-bottom:12px}
.duo p{font-size:14.5px;line-height:1.65;color:#3C5670}

/* ---- Méthode 4 temps (repris de la home) ---- */
.methode__grille{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px}
.methode__grille>div{background:#fff;border-radius:var(--r-carte);padding:32px 32px 30px;color:var(--navy-ink)}
.methode__grille .num{width:52px;height:52px;border-radius:10px;display:grid;place-items:center;
  font-size:14px;font-weight:600;color:var(--navy);margin-bottom:18px;
  background:var(--clair);border:var(--filet);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.methode__grille>div{transition:transform .35s var(--ease)}
.methode__grille>div:hover{transform:translateY(-3px)}
.methode__grille>div:hover .num{background:rgba(112,186,224,.75);border-color:var(--ciel);color:var(--nuit)}
.methode__grille b{font-size:19px;color:var(--navy)}
.methode__grille p{margin-top:10px;font-size:14.5px;line-height:1.62;color:#3C5670}
.methode__grille p a{color:var(--horizon);font-weight:600;border-bottom:1.5px solid rgba(31,111,150,.3)}
/* titre de carte porteur d'un lien (page pilier vers ses pages filles) : sans cette
   règle, a{color:inherit;text-decoration:none} le rend indiscernable du <b> parent.
   Même langage que les liens de prose : horizon + filet, la couleur seule ne suffit pas. */
.methode__grille b a{color:var(--horizon);border-bottom:2px solid rgba(31,111,150,.32);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.methode__grille b a:hover,.methode__grille b a:focus-visible{color:var(--navy);border-color:var(--navy)}

/* ---- Tableaux : langage éditorial. Filets fins, en-tête souligné,
   AUCUNE couleur sans signification (le zébrage est mort, 13/08). ---- */
.t-cadre{overflow-x:auto;margin-top:52px;border:var(--filet);border-radius:var(--r-carte);
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/40px 100%,
    linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/40px 100%,
    radial-gradient(farthest-side at 0 50%,rgba(8,44,78,.16),transparent) left/14px 100%,
    radial-gradient(farthest-side at 100% 50%,rgba(8,44,78,.16),transparent) right/14px 100%,#fff;
  background-repeat:no-repeat;background-attachment:local,local,scroll,scroll,local;
  padding:6px 22px 14px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
thead th{text-align:left;padding:18px 16px 14px;font-weight:600;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#63788C;
  border-bottom:2px solid var(--navy);white-space:nowrap}
tbody th,tbody td{padding:18px 16px;border-top:1px solid rgba(11,63,112,.10);color:#3C5670;
  line-height:1.6;vertical-align:top;text-align:left;font-weight:400}
tbody tr:first-child th,tbody tr:first-child td{border-top:0}
tbody th[scope="row"]{font-weight:600;color:var(--navy)}
td b{color:var(--navy)}
.t-note{margin-top:16px;font-size:12.5px;color:#63788C;font-style:italic}
.t-vari{font-weight:600;color:#2F8361;white-space:nowrap}
/* la puce de rangée : la couleur des 4 temps de la home (menthe, ciel, chartreuse, corail) */
.puce{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:10px;flex:none;vertical-align:baseline}
.puce--menthe{background:var(--menthe)}.puce--ciel{background:var(--ciel)}
.puce--chartreuse{background:var(--chartreuse)}.puce--corail{background:var(--corail)}
/* 5e temps « Comprendre », ajoute a la demande du client le 2026-08-19 */
.puce--horizon{background:var(--horizon)}
/* le nom du temps reste solidaire de sa puce : « Comprendre » tombait sur 2 lignes */
.t-temps tbody th[scope="row"]{white-space:nowrap}
/* la colonne recommandée : surlignage ciel qui VEUT dire quelque chose */
.t-reco thead th:nth-child(4),.t-reco tbody td:nth-child(4){background:rgba(112,186,224,.13)}
.t-reco thead th:nth-child(4){color:var(--navy);border-radius:10px 10px 0 0}
.t-reco tbody tr:last-child td:nth-child(4){border-radius:0 0 10px 10px}
/* sur nappe navy : le tableau est un objet BLANC, comme les cartes méthode de la home */
.nappe--navy .t-cadre{border:none}
.nappe--navy .t-note{color:rgba(255,255,255,.6)}

/* ---- Placeholders « à fournir » : visibles, honnêtes ---- */
.todo{display:inline-block;background:rgba(220,222,84,.3);border:1px dashed rgba(11,63,112,.35);
  border-radius:6px;padding:2px 9px;font-size:12px;font-weight:600;color:var(--navy-ink)}

/* ---- Cas client (le langage de la home) ---- */
.cas{margin-top:52px}
.cas article{display:grid;grid-template-columns:42% 1fr;background:var(--navy);color:#fff;
  border-radius:var(--r-carte);overflow:hidden;transition:transform .3s var(--ease)}
.cas article:hover{transform:translateY(-3px)}
.cas img{width:100%;height:100%;object-fit:cover}
.cas__corps{padding:38px 42px}
.cas__corps .pill{margin-bottom:0}
.cas__corps h3{color:#fff;font-size:22px;line-height:1.32;margin-top:14px}
.cas__corps>p{color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.6;margin-top:10px;max-width:60ch}
.cas__m{display:flex;flex-wrap:wrap;gap:36px;margin-top:26px}
.cas__m b{display:block;font-size:32px;font-weight:600;color:var(--chartreuse);line-height:1}
.cas__m i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.75);display:block;margin-top:6px;max-width:20ch;line-height:1.45}
.cas__btn{display:inline-block;position:relative;overflow:hidden;background:var(--corail);
  color:var(--navy);font-weight:600;font-size:14px;padding:12px 20px;border-radius:12px;margin-top:26px}
@media(max-width:900px){.cas article{grid-template-columns:1fr}.cas img{aspect-ratio:16/8}.cas__corps{padding:26px 22px}}

/* ---- Schéma de flux avant / après ---- */
.flux{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.flux__col{background:#fff;border:var(--filet);border-radius:var(--r-carte);padding:28px 26px}
.flux__tete{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.flux__tete b{font-size:16px;color:var(--navy)}
.flux__tag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-radius:6px;padding:5px 10px}
.flux__tag--avant{background:rgba(255,128,107,.2);color:#B3402E}
.flux__tag--apres{background:rgba(139,214,181,.3);color:#1E6647}
.flux__entrees{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.flux__entrees span{font-size:12px;font-weight:600;color:var(--navy);background:var(--clair);
  border:var(--filet);border-radius:0;padding:7px 11px}   /* angles droits : charte visuels */
.flux__etape{position:relative;margin-top:26px;background:#fff;border:1.5px solid rgba(11,63,112,.25);
  border-radius:0;padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--navy)}
.flux__etape small{display:block;font-weight:400;font-size:12px;color:#63788C;margin-top:3px}
.flux__etape::before{content:"";position:absolute;left:26px;top:-27px;height:27px;width:0}
.flux--avant .flux__etape::before{border-left:2px dashed var(--corail)}
.flux--apres .flux__etape::before{border-left:2px solid var(--menthe)}
.flux__etape .duree,.flux__fin .duree{position:absolute;right:10px;top:-11px;font-size:10.5px;font-weight:600;
  background:var(--corail);color:var(--nuit);padding:3px 8px;letter-spacing:.03em}
.flux--apres .flux__etape .duree,.flux--apres .flux__fin .duree{background:var(--menthe)}
.flux__fin{margin-top:26px;position:relative;padding:13px 16px;font-size:13.5px;font-weight:600;border-radius:0}
.flux--avant .flux__fin{background:rgba(255,128,107,.16);border:1.5px solid var(--corail);color:#8A2E1F}
.flux--apres .flux__fin{background:rgba(139,214,181,.22);border:1.5px solid #2F8361;color:#1E6647}
.flux__fin::before{content:"";position:absolute;left:26px;top:-27px;height:27px;width:0}
.flux--avant .flux__fin::before{border-left:2px dashed var(--corail)}
.flux--apres .flux__fin::before{border-left:2px solid var(--menthe)}
.flux__legende{grid-column:1/-1;font-size:12.5px;color:#63788C;font-style:italic}

/* ---- Citation ---- */
.citation{margin:64px auto 0;max-width:30em;text-align:center}
.citation .rond{width:56px;height:56px;border-radius:10px;background:var(--clair);border:var(--filet);
  display:grid;place-items:center;font-size:26px;font-weight:600;color:var(--navy);margin:0 auto 24px}
.citation blockquote{font-size:clamp(21px,2.6vw,28px);line-height:1.45;font-weight:600;
  letter-spacing:-.02em;color:var(--navy)}

/* ---- Matrix42 : l'alternative européenne ---- */
.mx{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
/* align-items:start : sans lui, la carte la plus haute impose sa hauteur aux
   deux autres et laisse du vide au fond. Mesure du 27/08/2026 sur les 3 pages
   qui utilisent .mx : vide de 118/95/28 px, 28/118/95 et 70/70/28 ; avec
   align-items:start, 28 px partout, soit le seul padding de la carte. */
.mx>div{background:#fff;border-radius:var(--r-carte);padding:28px 26px;color:var(--navy-ink)}
.mx b{display:block;font-size:16.5px;margin-bottom:8px;color:var(--navy)}
.mx p{font-size:14px;line-height:1.6;color:#3C5670}
.mx p+p{margin-top:11px}   /* les paragraphes etaient colles, aucune marge n'etait posee */
.mx-bas{margin-top:28px;font-size:14px;color:rgba(255,255,255,.82)}
.mx-bas a{color:var(--menthe);font-weight:600;border-bottom:1.5px solid rgba(139,214,181,.35)}

/* ---- FAQ (le langage de la home) ---- */
:root{interpolate-size:allow-keywords}
.faq{max-width:860px;margin:52px auto 0;display:grid;gap:14px}
.faq details{background:#fff;border-radius:var(--r-carte);border:var(--filet);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;
  padding:22px 28px;font-size:17px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:22px;color:var(--horizon)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 28px 24px;font-size:14.5px;line-height:1.65;color:#3C5670;max-width:66ch}
.faq details::details-content{display:block;height:0;overflow:clip;opacity:0;transform:translateY(-4px);
  transition:height .42s var(--ease),opacity .42s var(--ease),transform .42s var(--ease),content-visibility .42s allow-discrete}
.faq details[open]::details-content{height:auto;opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.faq details::details-content{transition:none}}

/* ---- Fin de page : conviction + CTA ---- */
.fin{text-align:center;max-width:34em;margin:0 auto}
.fin h2{margin:0 auto;max-width:22ch}
.fin h2::after{margin-inline:auto}
.fin p{margin-top:22px;font-size:15.5px;line-height:1.7;color:#3C5670}
.fin__actions{display:flex;justify-content:flex-start;gap:16px;margin-top:34px;flex-wrap:wrap}
.fin .fin__actions{justify-content:center}
.fin__liens{margin-top:34px;font-size:13.5px;color:#63788C}
.fin__liens a{color:var(--horizon);font-weight:600;border-bottom:1.5px solid rgba(31,111,150,.3)}
.fin__liens i{font-style:normal;opacity:.5;margin:0 8px}

/* ---- Footer (repris de la home) ---- */
.pied{background:linear-gradient(180deg,var(--nuit) 0%,var(--navy) 48%,var(--ciel) 100%);color:#fff;padding:76px 0 34px}
.pied__grille{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:56px}
.pied p.accroche{font-size:26px;font-weight:600;line-height:1.35;max-width:18em}
.pied .btn{margin-top:34px}
.pied h4{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--menthe);margin-bottom:16px}
.pied ul{list-style:none;display:grid;gap:10px}
.pied ul a{font-size:15px;color:rgba(255,255,255,.85)}
.pied ul a:hover{color:var(--chartreuse)}
.pied__bas{margin-top:64px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;justify-content:space-between;font-size:12.5px;color:rgba(8,44,78,.75)}
.pied__logo{padding:44px 40px 0}
.pied__logo .pied-wm{width:61%;height:auto;display:block;margin-inline:auto}
.pw-grad{opacity:0;transition:opacity .6s ease}
.pied__logo.cherche .pw-grad{opacity:1}
@media(max-width:900px){.pied__logo{padding:34px 22px 0}.pied__logo .pied-wm{width:70%}}
@media (prefers-reduced-motion: reduce){.pw-grad{display:none}}

/* min-width:0 : un enfant de grille n'impose jamais sa largeur au document */
.blocs6>*,.duo>*,.methode__grille>*,.mx>*,.flux>*,.ph__grille>*,.pied__grille>*{min-width:0}

/* ---- Burger + menu mobile (repris de la home) ---- */
.burger{display:none;width:44px;height:44px;margin-left:auto;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:none;border:0;cursor:pointer;padding:0}
.burger span{display:block;width:24px;height:2px;border-radius:2px;background:#EEF3F9;transition:transform .45s cubic-bezier(.32,.72,0,1)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu-mobile{position:fixed;inset:0 0 8px;z-index:49;background:var(--navy);border-radius:0 0 18px 18px;touch-action:pan-y;box-shadow:var(--ombre);display:none;flex-direction:column;padding:104px 26px 48px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.32,.72,0,1)}
.menu-mobile.is-open{opacity:1;pointer-events:auto}
.menu-mobile__nav{display:flex;flex-direction:column;padding-bottom:18px}
.menu-mobile__nav a{display:flex;align-items:baseline;gap:14px;font-size:20px;font-weight:400;color:#EEF3F9;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.14);transform:translateY(18px);opacity:0}
.menu-mobile__nav a i{font-style:normal;font-size:12px;font-weight:600;color:var(--menthe);letter-spacing:.08em}
.menu-mobile.is-open .menu-mobile__nav a{transform:none;opacity:1;transition:transform .6s cubic-bezier(.32,.72,0,1),opacity .5s ease}
.menu-mobile__cta{margin-top:auto;justify-content:center;width:100%;min-height:52px;transform:translateY(18px);opacity:0}
.menu-mobile.is-open .menu-mobile__cta{transform:none;opacity:1;transition:transform .6s cubic-bezier(.32,.72,0,1) .45s,opacity .5s ease .45s}
.menu-mobile__pied{margin-top:14px;font-size:11.5px;letter-spacing:.04em;color:rgba(238,243,249,.55);text-align:center}
.mm-g{border-bottom:1px solid rgba(238,243,249,.12)}
.mm-g summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:14px 4px;font-size:20px;font-weight:600;color:var(--clair)}
.mm-g summary::-webkit-details-marker{display:none}
.mm-g summary i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--menthe);
  min-width:22px;letter-spacing:.06em}
.mm-chv{margin-left:auto;width:9px;height:9px;border-right:2px solid rgba(238,243,249,.55);
  border-bottom:2px solid rgba(238,243,249,.55);transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease)}
.mm-g[open] .mm-chv{transform:rotate(-135deg) translateY(-2px)}
.mm-g > a{display:block;padding:11px 2px 11px 36px;font-size:15.5px;font-weight:500;
  color:rgba(238,243,249,.78)}
.mm-g > a:active{color:var(--menthe)}
.mm-g[open] summary{color:var(--menthe)}
@media(max-width:1080px){.tete__cta{display:none}.burger{display:flex}.menu-mobile{display:flex}}
@media(prefers-reduced-motion:reduce){.burger span,.menu-mobile,.menu-mobile__nav a,.menu-mobile__cta{transition:none!important}.menu-mobile__nav a,.menu-mobile__cta{transform:none}}

/* ============ MOBILE ============ */
@media(max-width:1050px){
  .ph__grille{grid-template-columns:1fr}
  .ph__cartes{position:static;grid-template-columns:1fr 1fr}
  .ph__partner{grid-column:1/-1}
}
@media(max-width:980px){
  .blocs6,.mx{grid-template-columns:1fr 1fr}
  h2{font-size:28px}
}
@media(max-width:768px){
  .section{padding:56px 0}
  .conteneur{padding:0 20px}
  .ph{padding:28px 0 52px}
  .ph h1{font-size:30px}
  .ph__cartes{grid-template-columns:1fr}
  .ph__actions{flex-direction:column;align-items:stretch}
  .btn{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center}
  .tete__in{padding:8px 8px 8px 18px}
  .tete__in .btn{min-height:42px;padding:8px 18px;font-size:14px}
  .blocs6,.duo,.methode__grille,.mx,.flux{grid-template-columns:1fr}
  .faq summary{padding:18px 20px;font-size:15.5px}
  .faq details p{padding:0 20px 20px}
  .pied__grille{grid-template-columns:1fr;gap:38px}
  .pied{padding:56px 0 26px}
  .pied__logo{padding:28px 12px 0}
  .pied__logo .pied-wm{width:80%}
  .pied__bas{flex-direction:column;gap:8px}
  .cas__m{gap:22px}
}

/* ============ COUCHE FAMILLES (posée le 13/08) ============
   Un gabarit par famille de pages ; ici la famille HUB.
   Décision Indiana 13/08 : plus de moule unique, plus de kicker
   répété en tête de chaque section (le filet K2000 des titres
   porte seul la signature). */

/* ---- Hero de hub : split éditorial, court ---- */
.hh{padding:48px 0 72px}
.hh__grille{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,80px);align-items:end;margin-top:38px}
.hh h1{font-size:clamp(34px,4.4vw,58px);line-height:1.05;letter-spacing:-.035em;color:var(--navy)}
.hh h1 em{font-style:normal;color:var(--ciel)}
.hh h1::after{content:"";display:block;width:64px;height:3px;border-radius:2px;margin-top:28px;
  background:linear-gradient(90deg,#0B3F70 0%,#2F8361 32%,#DCDE54 50%,#2F8361 68%,#0B3F70 100%);
  background-size:260% 100%;background-position:0% 0;animation:kitt 4.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.hh h1::after{animation:none;background-size:100% 100%}}
.hh__lead{font-size:16px;line-height:1.7;color:#3C5670;max-width:52ch}
.hh__lead b{color:var(--navy-ink)}
.hh__id{margin-top:22px;font-size:12.5px;color:#63788C;line-height:1.7}
.hh__id b{color:var(--navy);font-weight:600}
.hh__cta{margin-top:28px}
@media(max-width:980px){.hh__grille{grid-template-columns:1fr;gap:30px;align-items:start}.hh{padding:32px 0 56px}}

/* ---- Fiches sticky (le geste signature de la home, porté aux hubs) ---- */
.fiches{margin-top:52px;display:flex;flex-direction:column;gap:18px}
.fiche{position:sticky;top:96px;display:grid;grid-template-columns:1fr 46%;gap:48px;
  align-items:center;border-radius:var(--r-carte);padding:44px 46px}
.fiche--blanche{background:#fff;color:var(--navy);border:var(--filet)}
.fiche--navy{background:var(--navy);color:#fff}
.fiche--navy h3{color:#fff}
.fiche__num{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--horizon)}
.fiche--navy .fiche__num{color:var(--chartreuse)}
.fiche h3{font-size:27px;margin:10px 0 14px;letter-spacing:-.02em}
.fiche p{font-size:14.5px;line-height:1.62;color:#3C5670;max-width:52ch}
.fiche--navy p{color:rgba(255,255,255,.82)}
.fiche p b{color:inherit;font-weight:600}
.fiche__media{position:relative}
.fiche__media img{width:100%;aspect-ratio:16/9.5;object-fit:cover;border-radius:var(--r-carte);display:block}
.fiche__cta{position:absolute;left:14px;bottom:14px;overflow:hidden;color:var(--navy);
  background:#F4F7FA;font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:12px;text-decoration:none}
.fiche--navy .fiche__cta{background:var(--chartreuse)}
.fiche{transition:transform .3s var(--ease)}
.fiche:hover{transform:translateY(-3px)}
.fiches>*{min-width:0}
@media(max-width:900px){
  .fiche{top:76px;grid-template-columns:1fr;padding:26px 22px;gap:22px}
  .fiches{gap:14px}
}
@media (prefers-reduced-motion: reduce){.fiche{transition:none}}

/* le domaine de rattachement, en trait coloré (note du contenu services-hub) */
.fiche__domaine{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:#63788C;margin-bottom:12px}
.fiche__domaine::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--teinte,#70BAE0);flex:none}
.fiche--navy .fiche__domaine{color:rgba(255,255,255,.72)}
.t-menthe{--teinte:#8BD6B5}
.t-horizon{--teinte:#70BAE0}
.t-navy{--teinte:#0B3F70}
.fiche--navy .fiche__domaine.t-navy::before{background:#D9EDF8}

/* ---- Bande de repères : trois chiffres, une ligne ---- */
.reperes-ligne{display:flex;gap:clamp(30px,6vw,84px);flex-wrap:wrap;margin-top:40px}
.reperes-ligne>div{min-width:0}
.reperes-ligne b{display:block;font-size:clamp(28px,3vw,42px);font-weight:600;letter-spacing:-.03em;color:var(--navy);line-height:1}
.reperes-ligne .noms b{font-size:clamp(19px,1.8vw,26px);line-height:1.35;max-width:16ch}
.reperes-ligne span{display:block;margin-top:10px;font-size:13px;line-height:1.5;color:#63788C;max-width:24ch}

/* ---- Fin sobre : une phrase, un geste ---- */
.fin-sobre{margin-top:clamp(96px,11vw,150px);margin-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.fin-sobre p{font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--navy);max-width:26em}
.notes-page{margin-top:44px;padding-top:18px;border-top:var(--filet);font-size:12px;color:#8296A8}

/* ---- Parole : le glyphe géant porte la citation ---- */
.parole{margin:clamp(88px,10vw,132px) 0 10px;position:relative;padding-left:clamp(72px,9vw,124px)}
.parole__glyphe{position:absolute;left:0;top:-18px;font-size:clamp(84px,10vw,132px);line-height:1;
  font-weight:600;color:var(--ciel);user-select:none}
.parole blockquote{font-size:clamp(21px,2.4vw,29px);line-height:1.45;font-weight:600;
  letter-spacing:-.02em;color:var(--navy);text-wrap:balance;max-width:34em}
.parole figcaption{margin-top:20px;display:flex;align-items:center;gap:14px;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#63788C}
.parole__filet{width:44px;height:3px;border-radius:2px;flex:none;
  background:linear-gradient(90deg,#2F8361,#96CAB4 55%,#DCDE54)}
@media(max-width:640px){.parole{padding-left:0;padding-top:54px}
  .parole__glyphe{top:-8px;font-size:72px}}

/* ---- Section fine : bande légère, respiration réduite ---- */
.section--fine{padding:clamp(52px,6vw,76px) 0}

/* la section de fin colle sa conviction au footer */
.section--vers-pied{padding-bottom:clamp(44px,5vw,64px)}

/* ============ FAMILLE EXPERTISE (13/08) ============
   Les 6 pages service : longues, denses en preuve, seules à porter
   sommaire + FAQ complète + méta auteur (E-E-A-T). */

/* ---- Hero expertise : une colonne éditoriale ---- */
.pe{padding:48px 0 68px}
.pe__corps{max-width:66rem;margin-top:38px}
.pe h1{font-size:clamp(31px,3.8vw,50px);line-height:1.08;letter-spacing:-.035em;color:var(--navy);max-width:36ch}
.pe h1 em{font-style:normal;color:var(--ciel)}
.pe h1::after{content:"";display:block;width:64px;height:3px;border-radius:2px;margin-top:26px;
  background:linear-gradient(90deg,#0B3F70 0%,#2F8361 32%,#DCDE54 50%,#2F8361 68%,#0B3F70 100%);
  background-size:260% 100%;background-position:0% 0;animation:kitt 4.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.pe h1::after{animation:none;background-size:100% 100%}}
.pe__reponse{margin-top:32px;background:linear-gradient(180deg,rgba(112,186,224,.18),rgba(112,186,224,.07));
  border-left:3px solid var(--ciel);border-radius:0 12px 12px 0;
  padding:24px 28px;font-size:16px;line-height:1.7;color:var(--navy-ink);max-width:62ch}
/* le chapo peut porter plusieurs paragraphes (a-propos, 22/08) */
.pe__reponse p + p{margin-top:14px}
.pe__signature{margin-top:24px;font-size:13px;color:#63788C;line-height:1.7}
.pe__signature b{color:var(--navy);font-weight:600}
.pe__actions{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}

/* ---- Périmètre en liste éditoriale : pas une grille de cartes de plus ---- */
.liste-six{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(36px,5vw,72px)}
.liste-six>div{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-top:var(--filet)}
.liste-six i{font-style:normal;font-size:13px;font-weight:600;color:var(--horizon);padding-top:2px}
.liste-six b{display:block;font-size:16px;color:var(--navy);margin-bottom:5px}
.liste-six p{font-size:14px;line-height:1.6;color:#3C5670}
@media(max-width:768px){.liste-six{grid-template-columns:1fr}}

/* ---- Deux encarts fins (ITIL / ESM) ---- */
.duo-fin{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo-fin>div{border:var(--filet);border-radius:var(--r-carte);padding:26px 28px;background:#fff}
.duo-fin b{display:block;font-size:16px;color:var(--navy);margin-bottom:9px}
.duo-fin p{font-size:14px;line-height:1.65;color:#3C5670}
.duo-fin>*{min-width:0}
@media(max-width:768px){.duo-fin{grid-template-columns:1fr}}

/* ---- Timeline méthode : les 4 temps en déroulé, puces couleur du site ---- */
.tl{margin-top:56px;max-width:56em}
.tl__etape{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:32px 0;
  border-top:1px solid rgba(255,255,255,.16);position:relative}
.tl__etape:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.tl__num{font-size:13px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.55);padding-top:4px}
.tl__num i{display:block;font-style:normal;width:14px;height:14px;border-radius:4px;margin-bottom:10px}
.tl b{display:block;font-size:20px;color:#fff;margin-bottom:9px;letter-spacing:-.01em}
.tl p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.82);max-width:58ch}
.tl p a{color:var(--menthe);font-weight:600;border-bottom:1.5px solid rgba(139,214,181,.35)}
@media(max-width:640px){.tl__etape{grid-template-columns:44px 1fr;gap:16px}}

/* ---- Colonne recommandée, variante 2e colonne (comparatif outils) ---- */
.t-reco2 thead th:nth-child(2),.t-reco2 tbody td:nth-child(2){background:rgba(112,186,224,.13)}
.t-reco2 thead th:nth-child(2){color:var(--navy);border-radius:10px 10px 0 0}
.t-reco2 tbody tr:last-child td:nth-child(2){border-radius:0 0 10px 10px}

/* ---- Variantes de reveal (13/08 : la page doit donner envie de descendre) ---- */
.rv--gauche{transform:translateX(-22px)}
.rv--gauche.on{transform:none}
.tl__etape .tl__num i{transform:scale(.35);opacity:.3;
  transition:transform .55s var(--ease) .18s,opacity .55s var(--ease) .18s}
.tl__etape.on .tl__num i{transform:none;opacity:1}
.parole .parole__glyphe{transform:scale(.55);transform-origin:left top;
  transition:transform .75s var(--ease) .12s}
.parole.on .parole__glyphe{transform:none}
.liste-six>div{transition-property:opacity,transform,background;}
.liste-six>div:hover{background:rgba(112,186,224,.07)}
@media (prefers-reduced-motion: reduce){
  .rv--gauche{transform:none}
  .tl__etape .tl__num i,.parole .parole__glyphe{transform:none;opacity:1;transition:none}
}

/* ---- Hovers (13/08) : la souris doit sentir la page vivre ---- */
tbody tr{transition:background .25s var(--ease)}
tbody tr:hover{background:rgba(112,186,224,.09)}
.tl__etape{transition:transform .35s var(--ease)}
.tl__etape:hover{transform:translateX(7px)}
.tl__etape:hover .tl__num i{transform:scale(1.3)}
.duo-fin>div{transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.duo-fin>div:hover{border-color:var(--ciel);transform:translateY(-3px);box-shadow:0 10px 26px rgba(8,44,78,.08)}
.fiche__media{overflow:hidden;border-radius:var(--r-carte)}
.fiche__media img{transition:transform .6s var(--ease)}
.fiche:hover .fiche__media img{transform:scale(1.035)}
.reperes-ligne b{transition:color .3s var(--ease)}
.reperes-ligne>div:hover b{color:var(--horizon)}
.faq summary{transition:color .25s var(--ease)}
.faq summary:hover{color:var(--horizon)}
.faq summary::after{transition:transform .3s var(--ease)}
.faq details:not([open]) summary:hover::after{transform:rotate(90deg)}
.flux__etape:hover{transform:translateX(5px)}
.mx>div{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mx>div:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(4,16,28,.25)}
.cas__btn{transition:transform .25s var(--ease),filter .3s var(--ease)}
.cas__btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.fiche__cta{transition:transform .25s var(--ease),background .3s var(--ease)}
.fiche__cta:hover{transform:translateY(-2px)}
.fiche--blanche .fiche__cta:hover{background:rgba(112,186,224,.35)}
.notes-page,.fil{transition:color .3s var(--ease)}
@media (prefers-reduced-motion: reduce){
  .tl__etape:hover,.duo-fin>div:hover,.flux__etape:hover,.mx>div:hover,
  .cas__btn:hover,.fiche__cta:hover{transform:none}
  .fiche:hover .fiche__media img{transform:none}
}

/* ---- Dash : tableau de bord de coûts IT en démonstration (page FinOps) ----
   Angles droits à l'intérieur (charte visuels), barres qui se déploient. */
.dash{margin-top:52px;border:var(--filet);background:#fff;border-radius:var(--r-carte);
  padding:30px clamp(20px,3vw,38px) 26px}
.dash__tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  border-bottom:var(--filet);padding-bottom:24px}
.dash__tuiles>div{min-width:0}
.dash__tuiles b{display:block;font-size:clamp(21px,2.2vw,30px);font-weight:600;
  letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.dash__tuiles span{display:block;margin-top:7px;font-size:12px;line-height:1.45;color:#63788C}
.dash__barres{margin-top:26px;display:grid;gap:15px}
.dash__barre{display:grid;grid-template-columns:minmax(150px,220px) 1fr 84px;align-items:center;
  gap:16px;font-size:13px;color:var(--navy-ink)}
.dash__barre .rail{height:22px;background:var(--clair);position:relative;overflow:hidden}
.dash__barre .rail i{position:absolute;top:0;bottom:0;left:0;width:var(--w,50%);display:block}
.dash__barre:nth-child(1) .rail i{background:var(--navy)}
.dash__barre:nth-child(2) .rail i{background:var(--horizon)}
.dash__barre:nth-child(3) .rail i{background:var(--ciel)}
.dash__barre:nth-child(4) .rail i{background:var(--menthe)}
.dash__barre:nth-child(5) .rail i{background:var(--chartreuse)}
.dash__barre .delta{text-align:right;font-weight:600;white-space:nowrap}
.delta--hausse{color:#B3402E}
.delta--baisse{color:#2F8361}
.dash__legende{margin-top:20px;font-size:12px;font-style:italic;color:#8296A8}
.dash__barre .rail i{transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .25s}
.dash__barre.on .rail i{transform:none}
@media(max-width:768px){
  .dash__tuiles{grid-template-columns:1fr 1fr}
  .dash__barre{grid-template-columns:1fr;gap:7px}
  .dash__barre .delta{text-align:left}
}
@media (prefers-reduced-motion: reduce){.dash__barre .rail i{transform:none;transition:none}}

/* ---- Famille SECTEURS : hero photo tamponnee + manifeste (accent corail) ---- */
.ps__grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);
  gap:clamp(30px,4.5vw,70px);align-items:start;margin-top:38px}
.ps .pe__corps{margin-top:0;max-width:none}
.ps h1{max-width:22ch}
.ps h1 em{color:var(--corail-ink)}
.ps .pe__reponse{background:linear-gradient(180deg,rgba(255,128,107,.13),rgba(255,128,107,.05))}
.ps__photo{position:relative;border-radius:var(--r-carte);overflow:hidden;margin:0;
  box-shadow:0 18px 44px rgba(8,44,78,.16)}
.ps__photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  filter:saturate(.82)}
.ps__photo::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(11,63,112,0) 42%,rgba(8,44,78,.5));pointer-events:none}
.tampon{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;
  background:var(--corail);border-radius:10px;padding:13px 17px;color:var(--nuit)}
.tampon i{display:block;font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.tampon b{display:block;margin-top:4px;font-size:15px;font-weight:600;
  letter-spacing:-.01em;line-height:1.35}
.manifeste{margin:clamp(56px,7vw,96px) 0 0;font-size:clamp(25px,3.2vw,42px);line-height:1.16;
  font-weight:600;letter-spacing:-.025em;color:#fff;max-width:26em;text-wrap:balance}
.manifeste em{font-style:normal;color:var(--corail)}
.manifeste+.prose{margin-top:28px}
/* entree du hero : la photo suit la cascade du .pe */
.ps .ps__photo{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ps.on .ps__photo{opacity:1;transform:none;transition-delay:.4s}
@media(max-width:900px){
  .ps__grille{grid-template-columns:1fr}
  .ps__photo{max-width:560px}
  .ps__photo img{aspect-ratio:16/10}
}
@media (prefers-reduced-motion: reduce){
  .ps .ps__photo{opacity:1;transform:none;transition:none}
}

/* ---- Gabarit article de blog ---- */
.ga__meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  font-size:13.5px;color:#63788C}
.ga__meta b{font-weight:600;color:var(--navy)}
.ga__cover{margin:44px 0 0;border-radius:var(--r-carte);overflow:hidden;
  border:var(--filet);box-shadow:0 18px 44px rgba(8,44,78,.10)}
.ga__cover img{display:block;width:100%;height:auto}
.ga-corps{max-width:72ch}
.ga-corps>p{margin-top:20px;font-size:16px;line-height:1.75;color:var(--navy-ink)}
.ga-corps>p:first-child{margin-top:0}
.ga-corps h2{margin-top:clamp(52px,6vw,76px);font-size:clamp(24px,2.6vw,32px)}
.ga-corps h3{margin-top:clamp(40px,4.5vw,56px);font-size:clamp(20px,2.1vw,25px);
  color:var(--navy);letter-spacing:-.02em}
.ga-corps ul,.ga-corps ol{margin-top:20px;padding-left:2px;list-style:none;
  display:grid;gap:12px}
.ga-corps li{position:relative;padding-left:26px;font-size:16px;line-height:1.65;color:var(--navy-ink)}
.ga-corps ul li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;
  border-radius:3px;background:var(--art-accent,var(--menthe))}
.ga-corps ol{counter-reset:ga}
.ga-corps ol li{counter-increment:ga;padding-left:34px}
.ga-corps ol li::before{content:counter(ga,decimal-leading-zero);position:absolute;left:0;top:.18em;
  font-size:12.5px;font-weight:600;color:var(--horizon)}
.ga-corps figure{margin:clamp(36px,4.5vw,52px) 0 0;border-radius:var(--r-carte);
  overflow:hidden;border:var(--filet)}
.ga-corps figure img{display:block;width:100%;height:auto}
.ga-corps blockquote{margin-top:28px;padding:4px 0 4px 22px;border-left:3px solid var(--art-accent,var(--menthe));
  font-size:17px;line-height:1.65;font-weight:600;color:var(--navy)}
.retenir{margin-top:44px;background:#fff;border:var(--filet);border-radius:var(--r-carte);
  padding:clamp(24px,3vw,36px);position:relative;overflow:hidden}
.retenir::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--art-accent,#8BD6B5),transparent 88%)}
.retenir i{display:block;font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#8296A8}
.retenir ul{margin-top:16px;list-style:none;display:grid;gap:11px}
.retenir li{position:relative;padding-left:26px;font-size:15px;line-height:1.6;color:var(--navy-ink)}
.retenir li::before{content:"";position:absolute;left:2px;top:.58em;width:10px;height:10px;
  border-radius:3px;background:var(--art-accent,var(--menthe))}
.ga-note{margin-top:clamp(44px,5vw,64px);font-size:14px;line-height:1.65;font-style:italic;color:#63788C;
  border-top:var(--filet);padding-top:22px;max-width:72ch}
.ga-auteur{margin-top:36px;display:flex;gap:16px;align-items:center;background:#fff;
  border:var(--filet);border-radius:var(--r-carte);padding:20px 24px;max-width:30rem}
.ga-auteur i{flex:none;width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;
  font-style:normal;font-weight:600;font-size:15px;display:grid;place-items:center}
.ga-auteur b{display:block;font-size:15px;color:var(--navy)}
.ga-auteur span{display:block;font-size:13px;color:#63788C;margin-top:2px}

/* ---- Barre de progression de lecture (articles) : le filet K2000, en long ---- */
.lecture{position:fixed;left:0;right:0;height:3px;z-index:49;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease)}
.lecture.est-active{opacity:1}
.lecture i{display:block;height:100%;--p:0;
  background:linear-gradient(90deg,var(--menthe) 0%,#7FCFCB 26%,var(--ciel) 52%,var(--horizon) 78%,var(--navy) 100%);
  clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0);
  transition:clip-path .12s linear}
@media (prefers-reduced-motion: reduce){.lecture i{transition:none}}

/* ---- Rail sticky de l'article : l'appel a l'action contextuel ---- */
.ga-grille{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(40px,5vw,84px);align-items:start}
/* l'article colle a sa couverture : padding reduits, premier bloc aligne au rail */
.pe:has(.ga__cover){padding-bottom:40px}
.section:has(.ga-grille){padding-top:clamp(44px,4.5vw,60px)}
.ga-corps>:first-child{margin-top:0}
.ga-rail{position:sticky;top:96px}
.ga-cta{background:var(--navy);border-radius:var(--r-carte);padding:28px 26px;
  box-shadow:0 16px 40px rgba(8,44,78,.18)}
.ga-cta i{display:block;font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--chartreuse)}
.ga-cta b{display:block;margin-top:10px;font-size:19px;line-height:1.3;
  letter-spacing:-.015em;color:#fff}
.ga-cta p{margin-top:12px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.ga-cta .ga-cta__prix{margin-top:14px;font-size:15px;font-weight:600;color:var(--chartreuse)}
.ga-cta .btn{display:block;text-align:center;margin-top:18px}
.ga-cta__lien{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;
  color:var(--menthe)}
@media(max-width:1000px){
  .ga-grille{grid-template-columns:1fr}
  .ga-rail{position:static;max-width:420px}
}

/* ---- Cartes d'articles du blog (listing) ---- */
.filtres{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px}
.filtres button{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--navy);background:#fff;border:1.5px solid rgba(11,63,112,.22);border-radius:99px;
  padding:9px 18px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.filtres button:hover{border-color:var(--navy)}
.filtres button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.articles{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.art.est-cache{display:none}
.art{display:flex;flex-direction:column;min-width:0;background:#fff;border:var(--filet);
  border-radius:var(--r-carte);padding:26px 26px 20px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.art::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--t1,#8BD6B5),var(--t2,#70BAE0),transparent 92%);
  transform:scaleX(.34);transform-origin:left;transition:transform .5s var(--ease)}
.art:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(8,44,78,.10)}
.art:hover::before{transform:scaleX(1)}
.art__rubrique{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rub,#1F6F96)}
.art h3{margin-top:10px;font-size:18px;line-height:1.38;letter-spacing:-.015em;color:var(--navy)}
.art p{margin-top:10px;font-size:14px;line-height:1.6;color:#3C5670}
.art__meta{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;
  align-items:baseline;gap:10px;border-top:var(--filet);font-size:12.5px;color:#8296A8}
.art__meta b{font-weight:600;color:var(--horizon)}
@media(max-width:900px){.articles{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.art:hover{transform:none}}

/* ---- Famille UTILITAIRES : formulaires (contact, livres blancs) ---- */
.form{margin-top:44px;background:#fff;border:var(--filet);border-radius:var(--r-carte);
  padding:clamp(26px,3.4vw,42px);position:relative;max-width:640px}
.form::before{content:"";position:absolute;inset:-14px auto auto -14px;width:120px;height:120px;
  background:radial-gradient(closest-side,rgba(139,214,181,.35),transparent);z-index:-1;border-radius:50%}
.form label{display:block;margin-top:20px;font-size:13px;font-weight:600;color:var(--navy);
  letter-spacing:.02em}
.form label:first-of-type{margin-top:0}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:7px;
  padding:12px 14px;font-family:var(--font);font-size:15px;color:var(--navy-ink);
  background:#fff;border:1.5px solid rgba(11,63,112,.22);border-radius:10px;
  transition:border-color .25s var(--ease)}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--horizon)}
.form input:user-invalid{border-color:var(--corail)}
.form .form__case{display:flex;gap:10px;align-items:flex-start;margin-top:22px}
.form .form__case input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--navy)}
.form .form__case span{font-size:13px;line-height:1.55;color:#3C5670}
.form .form__mention{margin-top:14px;font-size:12px;line-height:1.5;color:#8296A8}
.form .btn{margin-top:24px}
button.btn{appearance:none;-webkit-appearance:none;border:none;cursor:pointer;
  font-family:var(--font);font-size:15.5px;font-weight:600}
.nappe--navy .form{border:none}

/* ---- Famille FORMATIONS : accent horizon, le bleu de la transmission ---- */
.pf h1 em{color:var(--horizon)}
.pf .pe__reponse{background:linear-gradient(180deg,rgba(31,111,150,.13),rgba(31,111,150,.05))}
.manifeste--horizon em{color:var(--ciel)}

/* ---- Hover du bouton secondaire de hero : la couleur de la famille ----
   Ordre = specificite : .pe (services, bleu) d'abord, les variantes ensuite. */
.pe .btn--blanc:hover,.hh .btn--blanc:hover,.pf .btn--blanc:hover{background:var(--ciel)}
.pa .btn--blanc:hover{background:var(--menthe)}
.ps .btn--blanc:hover{background:var(--corail)}
.pi .btn--blanc:hover{background:var(--chartreuse)}
.pc--hub .btn--blanc:hover,.pc--ciel .btn--blanc:hover{background:var(--ciel)}
.pc--menthe .btn--blanc:hover{background:var(--menthe)}

/* ---- Famille IA : accent chartreuse (olive lisible en texte), bus d'agents ---- */
.pi h1 em{color:#92931F}
.pi .pe__reponse{background:linear-gradient(180deg,rgba(220,222,84,.20),rgba(220,222,84,.06))}
.manifeste--chartreuse em{color:var(--chartreuse)}
.bus{margin-top:44px;display:grid;grid-template-columns:1fr 44px 1.2fr 44px 1fr;
  gap:0;align-items:stretch}
.bus__col{background:#fff;border:var(--filet);border-radius:var(--r-carte);
  padding:22px 20px;min-width:0}
.bus__col i{display:block;font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#8296A8;margin-bottom:12px}
.bus__col span{display:block;font-size:13.5px;line-height:1.5;color:#3C5670;padding:5px 0;
  border-top:1px solid rgba(11,63,112,.08)}
.bus__col b{display:block;font-size:16px;color:var(--navy);letter-spacing:-.01em}
.bus__col--centre{background:linear-gradient(180deg,rgba(220,222,84,.26),rgba(220,222,84,.10));
  border-color:rgba(110,112,32,.35)}
.bus__col--centre span{border-top-color:rgba(110,112,32,.18)}
.bus__lien{position:relative}
.bus__lien::before{content:"";position:absolute;top:50%;left:6px;right:6px;
  border-top:2px dashed rgba(11,63,112,.35)}
.bus__lien::after{content:"";position:absolute;top:50%;right:4px;width:8px;height:8px;
  border-top:2px solid rgba(11,63,112,.45);border-right:2px solid rgba(11,63,112,.45);
  transform:translateY(-55%) rotate(45deg)}
.bus__legende{margin-top:18px;font-size:12px;font-style:italic;color:#8296A8}
@media(max-width:820px){
  .bus{grid-template-columns:1fr}
  .bus__lien{height:34px}
  .bus__lien::before{left:50%;right:auto;top:4px;bottom:4px;border-top:none;
    border-left:2px dashed rgba(11,63,112,.35)}
  .bus__lien::after{right:auto;left:50%;top:auto;bottom:2px;
    transform:translateX(-55%) rotate(135deg)}
}

/* ---- Famille CAS CLIENTS : le cas porte la couleur du domaine qu'il prouve ----
   Opteven (ITSM) = ciel/horizon, Viamedis (Atlassian) = menthe, Safran
   (industrie-defense) = corail via .ps, hub = horizon documentaire. */
.pc--ciel h1 em{color:var(--horizon)}
.pc--ciel .pe__reponse{background:linear-gradient(180deg,rgba(112,186,224,.18),rgba(112,186,224,.07))}
.pc--menthe h1 em{color:#2F8361}
.pc--menthe .pe__reponse{background:linear-gradient(180deg,rgba(139,214,181,.20),rgba(139,214,181,.07))}
.pc--hub h1 em{color:var(--horizon)}
.pc--hub .pe__reponse{background:linear-gradient(180deg,rgba(31,111,150,.12),rgba(31,111,150,.05))}
.manifeste--ciel em{color:var(--ciel)}
.manifeste--menthe em{color:var(--menthe)}

/* variante claire de la timeline et des jalons (fonds blanc/clair, famille secteurs) */
.tl--clair .tl__etape{border-top-color:rgba(11,63,112,.12)}
.tl--clair .tl__etape:last-child{border-bottom-color:rgba(11,63,112,.12)}
.tl--clair .tl__num{color:#8296A8}
.tl--clair b{color:var(--navy)}
.tl--clair p{color:#3C5670}
.jalons.jalons--clair>div{border-top-color:rgba(11,63,112,.14)}
.jalons.jalons--clair b{color:var(--navy)}
.jalons.jalons--clair span{color:#3C5670}

/* ---- Hub secteurs : les 4 cartes photo tamponnees ---- */
.sec-grille{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sec-carte{position:relative;display:block;border-radius:var(--r-carte);overflow:hidden;
  border:var(--filet);background:#fff;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sec-carte:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(8,44,78,.13)}
.sec-carte figure{position:relative;margin:0}
.sec-carte img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.82)}
.sec-carte figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,63,112,0) 40%,rgba(8,44,78,.5));pointer-events:none}
.sec-carte .tampon{left:14px;right:14px;bottom:14px}
.sec-carte__corps{padding:20px 24px 24px}
.sec-carte__corps h3{font-size:20px;letter-spacing:-.02em;color:var(--navy)}
.sec-carte__corps p{margin-top:8px;font-size:14px;line-height:1.6;color:#3C5670}
.sec-carte__lien{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--corail-ink)}
.sec-carte__lien::after{content:" →";transition:transform .3s var(--ease);display:inline-block}
.sec-carte:hover .sec-carte__lien::after{transform:translateX(4px)}
@media(max-width:820px){.sec-grille{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
  .sec-carte:hover{transform:none}
  .sec-carte:hover .sec-carte__lien::after{transform:none}
}

/* ---- Paliers : l'escalier du tarif unitaire (licences Atlassian) ---- */
.h3-section{font-size:clamp(22px,2.2vw,28px);color:var(--navy);margin-top:clamp(56px,6vw,84px);scroll-margin-top:96px}
/* cibles d'ancre : le header sticky masquait 4px du titre sur mobile (mesure 390px) */
#formulaire{scroll-margin-top:80px}
.h3-section+.prose{margin-top:18px}
.paliers{margin-top:44px;border:var(--filet);background:#fff;border-radius:var(--r-carte);padding:clamp(22px,3vw,36px) clamp(22px,3vw,36px) 22px}
.paliers__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.8vw,22px);align-items:end;position:relative;padding-top:64px}
.paliers__grille>div{min-width:0}
.paliers__grille i{display:block;height:var(--h,120px);border-radius:8px 8px 0 0}
.paliers__grille>div:nth-child(2) i{background:var(--navy)}
.paliers__grille>div:nth-child(3) i{background:var(--horizon)}
.paliers__grille>div:nth-child(4) i{background:var(--ciel)}
.paliers__grille>div:nth-child(5) i{background:var(--menthe)}
.paliers__grille b{display:block;margin-top:12px;font-size:14px;font-weight:600;color:var(--navy);letter-spacing:-.01em;white-space:nowrap}
.paliers__grille span{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:#63788C}
.paliers__bascule{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:1;
  background:var(--chartreuse);color:var(--navy);font-size:12px;font-weight:600;
  letter-spacing:.03em;padding:7px 14px;border-radius:99px;white-space:nowrap}
.paliers__bascule::after{content:"";position:absolute;left:50%;top:100%;height:26px;
  border-left:2px dashed var(--navy);opacity:.4}
.paliers__grille i{transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease) .2s}
.paliers__grille>div.on i{transform:none}
@media(max-width:640px){
  .paliers__bascule{display:none}
  .paliers__grille{padding-top:8px}
  .paliers__grille b{font-size:11.5px;white-space:normal}
  .paliers__grille span{display:none}
}
@media (prefers-reduced-motion: reduce){.paliers__grille i{transform:none;transition:none}}

/* ---- Voix : verbatims d'objection, recueillis en sondage (conduite du changement) ---- */
.voix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.voix>blockquote{min-width:0;border:var(--filet);border-radius:12px;background:#fff;
  padding:46px 26px 24px;position:relative;font-size:15.5px;line-height:1.5;
  font-weight:600;color:var(--navy);letter-spacing:-.01em;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.voix>blockquote::before{content:"«";position:absolute;top:10px;left:22px;
  font-size:44px;font-weight:600;color:var(--corail);line-height:1}
.voix>blockquote:hover{transform:translateY(-3px);border-color:var(--corail)}
@media(max-width:900px){.voix{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.voix>blockquote:hover{transform:none}}

/* ---- Entrée de hero (13/08) : le titre sort d'un masque, le reste suit en cascade ---- */
.pe h1,.pa h1,.hh h1{clip-path:inset(-6% -2% 106% -2%);transition:clip-path .85s var(--ease) .05s}
.pe.on h1,.pa.on h1,.hh.on h1{clip-path:inset(-6% -2% -6% -2%)}
.pe h1::after,.pa h1::after,.hh h1::after{transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease) .6s}
.pe.on h1::after,.pa.on h1::after,.hh.on h1::after{transform:none}
.pe .pe__signature,.pe .pe__actions,.pe .sommaire,
.pa .pe__signature,.pa .pe__actions,.pa .sommaire,.pa .pa__droite,
.hh .hh__id,.hh .hh__cta,.pe .fil,.pa .fil,.hh .fil{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* Le paragraphe d'accroche est l'element LCP de ces pages (mesure du 22/08 :
   P.pe__reponse sur 6 pages sur 8, P.hh__lead sur services). Chrome n'enregistre
   pas un element a opacity 0, donc le fondu retardait le LCP de tout son delai
   plus sa duree. Mesure sur faq.html, 30 chargements par variante, memes
   conditions : avec le fondu 1280 ms, sans le fondu 300 ms, sans aucune entree
   292 ms. Croise en production le meme jour : atlassian.html, seule page dont le
   hero .pa n'est pas couvert par le JS donc sans entree, mesure a 376 ms quand
   faq, secteurs, formations, contact et cas-safran sont entre 1356 et 1600 ms.
   Il garde donc sa montee, il perd son fondu. Rien d'autre ne change. */
.pe .pe__reponse,.pa .pe__reponse,.hh .hh__lead{transform:translateY(16px);
  transition:transform .6s var(--ease)}
.pe.on .fil,.pa.on .fil,.hh.on .fil{opacity:1;transform:none;transition-delay:0s}
.pe.on .pe__reponse,.pa.on .pe__reponse,.hh.on .hh__lead{transform:none;transition-delay:.28s}
.pe.on .pe__signature,.pa.on .pe__signature,.hh.on .hh__id{opacity:1;transform:none;transition-delay:.4s}
.pe.on .pe__actions,.pa.on .pe__actions,.hh.on .hh__cta{opacity:1;transform:none;transition-delay:.52s}
.pe.on .sommaire,.pa.on .sommaire,.pa.on .pa__droite{opacity:1;transform:none;transition-delay:.64s}
@media (prefers-reduced-motion: reduce){
  .pe h1,.pa h1,.hh h1{clip-path:none;transition:none}
  .pe h1::after,.pa h1::after,.hh h1::after{transform:none;transition:none}
  .pe .pe__reponse,.pe .pe__signature,.pe .pe__actions,.pe .sommaire,
  .pa .pe__reponse,.pa .pe__signature,.pa .pe__actions,.pa .sommaire,.pa .pa__droite,
  .hh .hh__lead,.hh .hh__id,.hh .hh__cta,.pe .fil,.pa .fil,.hh .fil{opacity:1;transform:none;transition:none}
}

/* ---- Bouton posé seul dans le flux : il respire ---- */
.btn-seul{margin-top:30px}

/* ---- La couleur pop de la home, réinjectée (13/08 soir) ----
   Deux gestes systémiques : les pastilles numérotées (le langage
   .service__num de la home) et le filet dégradé en tête de carte
   (le langage des cartes ressources). Cycle menthe/ciel/chartreuse/corail. */
.liste-six>div{--pastel:var(--menthe)}
.liste-six>div:nth-child(4n+2){--pastel:var(--ciel)}
.liste-six>div:nth-child(4n+3){--pastel:var(--chartreuse)}
.liste-six>div:nth-child(4n){--pastel:var(--corail)}
.liste-six>div:hover{background:color-mix(in srgb, var(--pastel) 10%, transparent)}

.duo-fin>div,.mx>div{position:relative;overflow:hidden}
.duo-fin>div::before,.mx>div::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--t1,#8BD6B5),var(--t2,#70BAE0),transparent 92%);
  transform:scaleX(.34);transform-origin:left;transition:transform .5s var(--ease)}
.duo-fin>div:hover::before,.mx>div:hover::before{transform:scaleX(1)}
.duo-fin>div:nth-child(1),.mx>div:nth-child(1){--t1:#8BD6B5;--t2:#70BAE0}
.duo-fin>div:nth-child(2),.mx>div:nth-child(2){--t1:#DCDE54;--t2:#8BD6B5}
.duo-fin>div:nth-child(3),.mx>div:nth-child(3){--t1:#FF806B;--t2:#DCDE54}
.duo-fin>div:nth-child(4),.mx>div:nth-child(4){--t1:#70BAE0;--t2:#DCDE54}

.reperes-ligne>div{--pastel:var(--menthe)}
.reperes-ligne>div:nth-child(2){--pastel:var(--ciel)}
.reperes-ligne>div:nth-child(3){--pastel:var(--chartreuse)}
.reperes-ligne b::after{content:"";display:block;width:26px;height:3px;border-radius:2px;
  margin-top:12px;background:var(--pastel)}

@media (hover:none){.duo-fin>div::before,.mx>div::before{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .duo-fin>div::before,.mx>div::before{transform:scaleX(1);transition:none}}

/* ---- Offres : la gamme des diagnostics en cartes (13/08 soir) ---- */
.offres{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.offre{min-width:0;position:relative;overflow:hidden;border:var(--filet);border-radius:var(--r-carte);
  background:#fff;padding:34px 32px 28px;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.offre::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--t1,#8BD6B5),var(--t2,#70BAE0),transparent 92%);
  transform:scaleX(.34);transform-origin:left;transition:transform .5s var(--ease)}
.offre:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(8,44,78,.10)}
.offre:hover::before{transform:scaleX(1)}
.offre:nth-child(1){--t1:#8BD6B5;--t2:#70BAE0}
.offre:nth-child(2){--t1:#DCDE54;--t2:#8BD6B5}
.offre:nth-child(3){--t1:#70BAE0;--t2:#DCDE54}
.offre:nth-child(4){--t1:#FF806B;--t2:#DCDE54}
.offre__tete{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.offre h3{font-size:21px;letter-spacing:-.02em;color:var(--navy)}
.offre__duree{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--horizon);white-space:nowrap}
.offre__question{margin-top:12px;font-size:14.5px;line-height:1.55;font-weight:600;color:var(--navy-ink)}
.offre dl{margin:20px 0 0;display:grid;gap:9px}
.offre dl div{display:grid;grid-template-columns:88px 1fr;gap:12px}
.offre dt{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8296A8;padding-top:2px}
.offre dd{margin:0;font-size:14px;line-height:1.55;color:#3C5670}
.offre__note{margin-top:16px;font-size:13.5px;line-height:1.6;color:#63788C}
.offre__note a{color:var(--horizon);font-weight:600;border-bottom:1.5px solid rgba(31,111,150,.3)}
.offre__pied{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:var(--filet)}
.offre__tarif{font-size:16px;font-weight:600;color:var(--navy)}
.offre__tarif small{display:block;font-size:11.5px;font-weight:400;color:#8296A8;margin-top:3px}
@media(max-width:900px){.offres{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.offre:hover{transform:none}.offre::before{transform:scaleX(1);transition:none}}
@media (hover:none){.offre::before{transform:scaleX(1)}}

/* ---- Dash capacité : charge vs capacité par équipe (pilotage) ---- */
.dash--capacite .rail::after{content:"";position:absolute;top:-4px;bottom:-4px;left:80%;
  width:0;border-left:2px dashed rgba(11,63,112,.45)}
.dash--capacite .rail{overflow:visible}

/* ---- Textes tirés en longueur (décision 13/08) : sous un tableau ou seuls ---- */
.t-cadre~.prose,.t-note~.prose,.dash~.prose,.bento~.prose,.liste-six~.prose,
.offres~.prose,.tl~.prose,.voix~.prose,.duo-fin~.prose,.flux~.prose,
.jalons~.prose,.cas~.prose,.mx~.prose{max-width:none}
.t-cadre+.prose,.t-note+.prose,.dash+.prose,.offres+.prose,.tl+.prose,
.liste-six+.prose,.voix+.prose,.duo-fin+.prose,.flux+.prose,.reperes-ligne+.prose,
.fiches+.prose,.offres+h3,.tl+.mx-bas,.mx+.mx-bas,.bento+.prose,.jalons+.mx{margin-top:36px}
.parole+.cas{margin-top:clamp(80px,9vw,120px)}
/* .faq2 depuis le 22/08 : sans ces deux selecteurs, le texte qui suit la FAQ
   collait a la colonne de gauche (ecart mesure a 0 px) et restait plafonne a
   70ch au lieu de prendre la largeur */
.faq+.prose,.faq2+.prose{margin-top:clamp(76px,8vw,116px)}
.faq~.prose,.faq2~.prose{max-width:none}
.offres+h3+.prose{max-width:none}

/* ---- Deux sections de même fond qui se suivent : la seconde se rapproche ---- */
.section--suite{padding-top:clamp(8px,2vw,24px)}

/* ============ FAMILLE ATLASSIAN (14/08) ============
   L'univers du partenariat : menthe dominante, un écusson de preuve
   en hero, le bento produits en geste signature, la frise des dates. */

/* ---- Hero Atlassian : split avec écusson ---- */
.pa{padding:48px 0 72px}
.pa__grille{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,72px);align-items:start;margin-top:38px}
.pa__gauche{min-width:0}
.pa h1{font-size:clamp(31px,3.8vw,50px);line-height:1.08;letter-spacing:-.035em;color:var(--navy);max-width:36ch}
.pa h1 em{font-style:normal;color:var(--menthe)}
.pa h1::after{content:"";display:block;width:64px;height:3px;border-radius:2px;margin-top:26px;
  background:linear-gradient(90deg,#0B3F70 0%,#2F8361 32%,#DCDE54 50%,#2F8361 68%,#0B3F70 100%);
  background-size:260% 100%;background-position:0% 0;animation:kitt 4.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.pa h1::after{animation:none;background-size:100% 100%}}
.pa .pe__reponse{border-left-color:var(--menthe);
  background:linear-gradient(180deg,rgba(139,214,181,.16),rgba(139,214,181,.06))}
.pa__droite{position:sticky;top:96px;min-width:0}
.ecusson{background:var(--navy);border-radius:var(--r-carte);padding:36px 34px;position:relative;overflow:hidden;color:#fff}
.ecusson::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px at 88% -12%, rgba(139,214,181,.38), transparent 68%)}
.ecusson>*{position:relative;z-index:1}
.ecusson img{height:28px;width:auto;filter:brightness(0) invert(1)}
.ecusson .niveau{margin-top:20px;font-size:clamp(20px,1.8vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.ecusson .specs{margin-top:10px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--menthe)}
.ecusson .depuis{margin-top:26px;display:flex;align-items:baseline;gap:12px}
.ecusson .depuis b{font-size:clamp(40px,3.6vw,54px);font-weight:600;letter-spacing:-.03em;color:var(--chartreuse);line-height:1}
.ecusson .depuis span{font-size:13px;color:rgba(255,255,255,.75)}
.pa__preuve{margin-top:16px;border:var(--filet);border-radius:var(--r-carte);background:#fff;padding:18px 22px;
  font-size:13.5px;line-height:1.55;color:#3C5670}
.pa__preuve b{color:var(--navy)}
@media(max-width:1050px){.pa__grille{grid-template-columns:1fr}.pa__droite{position:static}}

/* ---- Bento produits : le geste signature de la famille ---- */
.bento{margin-top:52px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento>article{min-width:0;position:relative;overflow:hidden;border:var(--filet);border-radius:var(--r-carte);
  background:#fff;padding:30px 28px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bento>article::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--menthe),#70BAE0,transparent 92%);
  transform:scaleX(.34);transform-origin:left;transition:transform .5s var(--ease)}
.bento>article:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(8,44,78,.10)}
.bento>article:hover::before{transform:scaleX(1)}
.bento .b-3{grid-column:span 3}
.bento .b-4{grid-column:span 4}
.bento .b-2{grid-column:span 2}
.bento h3{font-size:21px;letter-spacing:-.02em;color:var(--navy)}
.bento .traite{margin-top:8px;font-size:15px;font-weight:600;color:var(--navy-ink)}
.bento .usage{margin-top:12px;font-size:14px;line-height:1.6;color:#3C5670}
.bento .qui{margin-top:14px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#2F8361}
@media(max-width:900px){.bento{grid-template-columns:1fr}.bento .b-3,.bento .b-4,.bento .b-2{grid-column:span 1}}
@media (prefers-reduced-motion: reduce){.bento>article:hover{transform:none}.bento>article::before{transform:scaleX(1)}}
@media (hover:none){.bento>article::before{transform:scaleX(1)}}

/* ---- Jalons : la frise des dates (fin de vie Data Center) ---- */
.jalons{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.jalons>div{min-width:0;padding-top:22px;border-top:2px solid rgba(255,255,255,.18);position:relative}
.jalons>div::before{content:"";position:absolute;top:-6px;left:0;width:12px;height:12px;border-radius:4px;background:var(--jalon,#8BD6B5)}
.jalons>div:nth-child(2){--jalon:#DCDE54}
.jalons>div:nth-child(3){--jalon:#FF806B}
.jalons b{display:block;font-size:clamp(19px,1.9vw,25px);font-weight:600;letter-spacing:-.02em;color:#fff}
.jalons span{display:block;margin-top:8px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78)}
@media(max-width:768px){.jalons{grid-template-columns:1fr}}

/* ---- Liste éditoriale sur nappe navy (famille Atlassian) ---- */
.nappe--navy .liste-six>div{border-top-color:rgba(255,255,255,.16)}
.nappe--navy .liste-six i{color:var(--menthe)}
.nappe--navy .liste-six b{color:#fff}
.nappe--navy .liste-six p{color:rgba(255,255,255,.78)}
.nappe--navy .liste-six>div:hover{background:rgba(139,214,181,.08)}

/* ---- Retour explicite à la colonne de lecture (déclaré en dernier) ---- */
.prose.prose--lecture{max-width:70ch}

/* ===== Grands ecrans (>=1680px, 16 pouces et bureaux) : largeur utile accrue,
   blancs verticaux contenus ; les proportions de reference sont celles du 13 pouces ===== */
@media(min-width:1680px){
  /* min() : sans lui, entre 1680 et 1930 px de viewport le conteneur touchait
     les deux bords. Mesure du 26/08 : 101 px de marge a 1680, 320 px a 2560. */
  .conteneur{max-width:min(1700px, 88vw)}
  /* Texte courant elargi (26/08, mesure sur 9 pages a 2560, 164 lignes
     comptees) : boite 985 px, 123 signes par ligne contre 89, et 62 % de la
     largeur utile contre 52. Valeur choisie par Indiana le 26/08 apres
     comparaison 88 / 92 / 96ch a l'ecran. Le chapo .intro-grand est en 21 px
     plafonne a 32em : une regle .prose globale le ferait passer a 1112 px, il
     reste hors du lot. */
  .prose:not(.intro-grand){max-width:96ch}
  /* on rend leur pleine largeur aux blocs qui l'avaient (lignes 1102 a 1112) */
  .jalons~.prose,.cas~.prose,.mx~.prose,
  .faq~.prose,.faq2~.prose,.offres+h3+.prose{max-width:none}
  /* Pages d'article : elargir leur conteneur portait le blanc entre le texte et
     le rail de 72 a 480 px (mesure du 26/08 sur blog-support a 2560). Elles
     gardent la geometrie arbitree le 22/08, decrite juste en dessous. */
  body:has(.ga-grille) .conteneur{max-width:1480px}
  /* Option A du 26/08. Le contenu du header se cale sur la colonne, la barre
     navy reste bord a bord (elle est portee par .tete). Meme expression que
     .conteneur, donc les deux se centrent sur la meme largeur de reference.
     Mesure avant : logo a 458 px a gauche de la colonne, CTA a 472 px a
     droite, sur un ecran 2560. */
  /* Header pleine largeur, logo a gauche et bouton a droite, avec un retrait
     symetrique. Arbitrage d'Indiana le 26/08 apres comparaison de 54, 110 et
     170 px a l'ecran : il retient 170. Les deux elements ne sont plus
     translates, donc les espaces de part et d'autre du menu sont EGAUX, le
     menu etant centre par ses marges auto. Mesure a 2560 : 383 px des deux
     cotes, contre 147 et 327 avant.
     Le retrait n'est pas fixe a 170 px : a 1680 le contenu du header fait
     1410 px, il ne resterait que 1340 px et le flex ecrasait le logo de 78 a
     0 px de large (mesure du 26/08). La formule atteint 170 px a partir de
     2556 px de large et redescend a 85 px a 1680. */
  .tete__in{max-width:none;margin-inline:0;
    padding-left:clamp(85px, calc(9.7vw - 78px), 170px);
    padding-right:clamp(85px, calc(9.7vw - 78px), 170px)}
  /* Menu plus aere, grands ecrans seulement (demande du 26/08). Fluide et non
     fixe : a 22 px fixes il ne restait que 22 px de jeu dans la barre a 1680 px
     (mesure du 26/08), le menu touchait presque le logo et le bouton. Chaque
     pixel de gap coute 6 px de largeur, il y a six intervalles. */
  .tete__nav{gap:clamp(12px, 0.85vw, 24px)}
  /* Article de blog (22/08, piste B validee par Indiana). Au passage du
     conteneur de 1240 a 1480 px, la colonne de l'article passe a 968 px mais
     .ga-corps restait bloque a 72ch, soit 763 px : 205 px de colonne morte, et
     le blanc entre le texte et le rail passait de 72 a 289 px (mesure du 22/08
     sur blog-support a 1920). Le texte va a 88ch et le rail de 320 a 400 px,
     qu'il ne flotte plus a cote d'une colonne trois fois plus large.
     Mesure apres : texte 900 px, blanc 72 px, 111 signes par ligne contre 93.
     Pas au-dela : le texte pleine colonne donne 117 signes, et elargir tout le
     conteneur donne 176 signes a 2560 px. Les deux ont ete ecartes. */
  .ga-grille{grid-template-columns:minmax(0,1fr) 400px;gap:clamp(48px,4vw,72px)}
  .ga-corps{max-width:88ch}
  .section{padding:96px 0}
  .pe__corps{max-width:74rem}
  .pe h1{font-size:54px}
  .ps__grille{grid-template-columns:minmax(0,1fr) minmax(340px,460px)}
  .faq{max-width:960px}
}

/* ===== Photos reportage : bandeaux plafonnés + diptyque bureaux, rien d'autre ===== */
.photo{margin:clamp(32px,4vw,44px) 0;border-radius:var(--r-carte);overflow:hidden}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo--bande img{aspect-ratio:21/9;max-height:380px}
.duo-fin .photo{margin:0 0 16px}
.duo-fin .photo img{aspect-ratio:3/2}
@media(max-width:700px){
  .photo--bande img{aspect-ratio:16/10;max-height:none}
}
.trio-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:clamp(32px,4vw,44px) 0 0}
.trio-photos .photo{margin:0}
.trio-photos .photo img{aspect-ratio:4/3}
.trio-photos--duo{grid-template-columns:repeat(2,1fr)}
.trio-photos--duo .photo img{aspect-ratio:3/2}
@media(max-width:700px){.trio-photos{grid-template-columns:1fr}}

/* ===== Mobile : lisibilité et affordances (audit 13/08) ===== */
.burger{min-width:44px;flex-shrink:0}
@media(max-width:700px){
  .duree,.offre__pied .duree,span.duree,.flux__tag,.art__rubrique,.pill{font-size:12px!important}
  thead th{font-size:12px}
  .t-cadre{background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/48px 100%,
    linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/48px 100%,
    radial-gradient(farthest-side at 0 50%,rgba(8,44,78,.24),transparent) left/22px 100%,
    radial-gradient(farthest-side at 100% 50%,rgba(8,44,78,.24),transparent) right/22px 100%,#fff;
    background-repeat:no-repeat;background-attachment:local,local,scroll,scroll,local}
}

/* ===== Panneau de menu : la page mère en bandeau distinct ===== */
.panneau__in a.panneau__hub{background:#EEF3F9;border-radius:9px;padding:13px 14px;margin-bottom:14px;position:relative}
.panneau__in--2col .panneau__hub{grid-column:1/-1}
.panneau__in a.panneau__hub:hover{background:rgba(112,186,224,.22)}
.panneau__hub::after{content:"";position:absolute;left:12px;right:12px;bottom:-8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#0B3F70 0%,#2F8361 32%,#DCDE54 50%,#2F8361 68%,#0B3F70 100%)}
.menu-mobile__nav .mm-g a.mm-hub{font-weight:600;background:rgba(255,255,255,.08);border-radius:8px;
  border-bottom:none;margin-bottom:8px;padding-left:12px;padding-right:12px;position:relative}
.menu-mobile__nav .mm-g a.mm-hub::after{content:"";position:absolute;left:10px;right:10px;bottom:-5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.25) 0%,#8BD6B5 32%,#DCDE54 50%,#8BD6B5 68%,rgba(255,255,255,.25) 100%)}

/* ===== Header 980-1460 : le CTA ne se fait plus manger ===== */
.tete__cta{white-space:nowrap;flex-shrink:0}
@media(max-width:1460px){
  .tete__in{gap:20px;padding-left:18px}
  .tete__nav{gap:0}
  .nav-g__t,.tete__nav>a{font-size:14px;padding:10px 9px;--pad-nav:9px}
  .tete__in .btn{padding:10px 18px;font-size:14.5px}
}
@media(max-width:1230px){
  .nav-g__t,.tete__nav>a{font-size:13px;padding:10px 6px;--pad-nav:6px}
  .tete__in{gap:12px}
  .tete__in .btn{padding:9px 14px;font-size:13.5px}
}

/* ===== Mobile : correctifs relevés sur iPhone (13/08) ===== */
.offres--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.offres--3{grid-template-columns:1fr}}
@media(max-width:700px){
  .pe__actions .btn,.fin__actions .btn{justify-content:flex-start;text-align:left}
  .offre__tete{flex-direction:column-reverse;align-items:flex-start;gap:8px}
  .ecusson .depuis{align-items:center}
  .paliers__grille b{white-space:nowrap;font-size:11px;letter-spacing:-.02em}
}
html:has(.menu-mobile.is-open),body:has(.menu-mobile.is-open){overflow:hidden}

/* ===== Menu : où suis-je (couleur de famille) ===== */
.nav-g:has(> a[href="services.html"]),.mm-g:has(a[href="services.html"]){--fam:#70BAE0}
.nav-g:has(> a[href="atlassian.html"]),.mm-g:has(a[href="atlassian.html"]){--fam:#8BD6B5}
.nav-g:has(> a[href="ia.html"]),.mm-g:has(a[href="ia.html"]){--fam:#DCDE54}
.nav-g:has(> a[href="secteurs.html"]),.mm-g:has(a[href="secteurs.html"]){--fam:#FF806B}
.tete__nav{--fam:#EEF3F9}
.menu-mobile__nav{--fam:#8BD6B5}
.tete__nav>a::after,.nav-g__t::after{content:"";position:absolute;left:var(--pad-nav,13px);right:var(--pad-nav,13px);bottom:5px;height:2px;
  border-radius:2px;background:var(--fam);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.32,.72,0,1)}
.tete__nav>a:hover::after,.nav-g:hover .nav-g__t::after,
.tete__nav>a.est-actif::after,.nav-g__t.est-actif::after{transform:scaleX(1)}
.tete__nav>a.est-actif,.nav-g__t.est-actif{color:#fff}
.panneau__in a{--fam:inherit}
.panneau__in a[aria-current="page"]{background:color-mix(in srgb,var(--fam,#70BAE0) 14%,#fff)}
.panneau__in a[aria-current="page"] b::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--fam,#0B3F70);margin-right:8px;vertical-align:2px}
.menu-mobile__nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.10);border-radius:8px;
  padding-left:12px;padding-right:12px}
.mm-g.est-actif summary,.menu-mobile__nav>a.est-actif{color:var(--fam,#8BD6B5)}
@media (prefers-reduced-motion: reduce){.tete__nav>a::after,.nav-g__t::after{transition:none}}

/* ===== Formulaire de contact : carte deux colonnes (13/08) ===== */
.form--large{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;padding:0;overflow:hidden;max-width:none}
.form--large::before{display:none}
.form__aide{background:var(--navy);color:#EEF3F9;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:22px}
.form__aide h3{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.01em;margin:0}
.form__aide h3::after{content:"";display:block;width:52px;height:2px;border-radius:2px;margin-top:14px;
  background:linear-gradient(90deg,var(--menthe),var(--ciel))}
.form__points{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.form__points li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;line-height:1.5;color:rgba(238,243,249,.82)}
.form__points i{font-style:normal;font-size:11px;font-weight:600;color:var(--menthe);padding-top:3px}
.form__points b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
.form__direct{margin-top:auto;padding-top:20px;border-top:1px solid rgba(238,243,249,.16);font-size:14px;line-height:1.7}
.form__direct a{color:var(--menthe);font-weight:600}
.form__champs{padding:clamp(26px,3.4vw,42px);display:grid;gap:0}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form--large label{margin-top:20px}
.form--large .form__duo label:first-of-type,.form--large .form__duo label{margin-top:20px}
.form--large .form__champs>label:first-child,.form--large .form__duo:first-child label{margin-top:0}
.form--large .form__pied{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.form--large .form__pied .form__case{margin-top:0;flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.5}
.form--large .form__pied .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:900px){
  .form--large{grid-template-columns:1fr}
  .form__aide{order:2}
  .form__champs{order:1}
  .form__duo{grid-template-columns:1fr;gap:0}
  .form--large .form__pied{flex-direction:column;align-items:flex-start}
}

/* Frise méthode : séparer deux paragraphes dans une même étape.
   `.tl p` n'a ni marge ni padding, deux paragraphes se touchaient à 6px
   (l'interligne), et se lisaient comme un seul bloc. Seule la page TMA
   a des étapes à plusieurs paragraphes (mesuré le 2026-08-20). */
.tl p + p{margin-top:12px}

/* ===== FAQ en deux colonnes (22/08) =====
   Le titre, la phrase d'appel et le bouton tiennent la colonne de gauche, qui
   reste collante pendant qu'on parcourt les questions a droite. Les questions
   quittent la carte blanche pour une liste a filets fins : a neuf questions,
   la colonne unique de 860 px faisait 960 px de haut (mesure du 22/08 sur
   services-itsm-esm), la version deux colonnes tient dans la moitie.
   Geste identique a celui pose sur l'accueil le 21/08 (.faq2 en interne dans
   index.html, qui ne lit pas cette feuille). Le filet degrade qui se deploie
   sous la question ouverte est le meme que celui des titres h2. */
.faq2{display:grid;grid-template-columns:minmax(300px,41%) 1fr;gap:clamp(30px,4.4vw,62px);align-items:start}
.faq2__t{position:sticky;top:104px}
.faq2__t h2{margin-top:0;max-width:none;font-size:clamp(28px,3.3vw,42px);text-wrap:balance}
.faq2__d{margin-top:30px;font-size:14.5px;line-height:1.7;color:#3C5670;max-width:44ch}
.faq2__cta{margin-top:26px}
.faq2__l{display:grid;gap:0;border-top:1px solid rgba(11,63,112,.14)}
.faq2__l details{border-bottom:1px solid rgba(11,63,112,.14);background:none;box-shadow:none;border-radius:0;
  position:relative;transition:background .4s var(--ease)}
.faq2__l details::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,#0B3F70,#2F8361 34%,#DCDE54 54%,#2F8361 74%,#0B3F70);
  transition:width .6s var(--ease)}
.faq2__l details[open]::before{width:100%}
.faq2__l details[open]{background:rgba(112,186,224,.06)}
.faq2__l summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;
  gap:22px;padding:clamp(18px,2vw,24px) clamp(8px,1.2vw,16px);font-size:clamp(15.5px,1.55vw,17.5px);
  font-weight:600;color:var(--navy);letter-spacing:-.012em;line-height:1.35;transition:color .3s var(--ease)}
.faq2__l summary:hover{color:var(--horizon)}
.faq2__l summary::-webkit-details-marker{display:none}
.faq2__l summary::after{content:"+";font-weight:400;font-size:23px;line-height:1;color:var(--horizon);
  flex:none;transition:transform .4s var(--ease)}
.faq2__l details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq2__l details p{padding:0 clamp(8px,1.2vw,16px);font-size:14.5px;
  line-height:1.68;color:#3C5670;max-width:64ch}
/* seul le dernier paragraphe porte la respiration du bas : sinon une reponse
   a deux paragraphes cumulait padding + marge et se lisait comme deux reponses */
.faq2__l details p:last-child{padding-bottom:clamp(20px,2.2vw,26px)}
.faq2__l details p + p{margin-top:13px}
@media(max-width:940px){.faq2{grid-template-columns:1fr;gap:clamp(26px,3vw,36px)}
  .faq2__t{position:static}.faq2__t h2{max-width:none}}
@media(prefers-reduced-motion:reduce){.faq2__l details,.faq2__l details::before,.faq2__l summary::after{transition:none}}

/* ===== Le chiffre des cinq temps (22/08, piste A validee par Indiana) =====
   La frise portait un numero de 13 px avec un carre de 14 px. L'accueil, lui,
   porte le meme propos avec des chiffres en filigrane de 105 px. Deux gestes
   pour une seule idee, sur 16 pages.
   Le numero prend la colonne de gauche, la pastille de couleur devient le
   trait pose au-dessus. Elle garde sa couleur, ecrite en dur dans chaque
   etape : rien n'est reattribue, aucune couleur ne change.
   Mesure du 22/08, services-itsm-esm sur navy : hauteur du bloc 1041 px avant
   comme apres, la piste ne coute pas un pixel. Contrastes inchanges, 10,72 sur
   navy, 9,61 et 6,83 sur clair.
   formations-jira est exclue par .tl--niveaux : sa liste n'est pas une
   chronologie mais des niveaux de formation, N1 N2 N3 et un module +. Un + de
   69 px n'a aucun sens. */
.tl__etape{grid-template-columns:104px 1fr;gap:clamp(18px,2.4vw,32px)}
.tl__num{font-size:clamp(50px,5.4vw,74px);letter-spacing:-.05em;line-height:.82;
  padding-top:0;color:rgba(255,255,255,.16)}
.tl__num i{width:34px;height:3px;border-radius:2px;margin:0 0 12px}
.tl--clair .tl__num{color:rgba(11,63,112,.15)}

/* le trait s'etire au lieu de grossir : un carre grandit, une barre s'allonge */
.tl__etape .tl__num i{transform:scaleX(.22);transform-origin:left center;opacity:.3}
.tl__etape.on .tl__num i{transform:none;opacity:1}
.tl__etape:hover .tl__num i{transform:scaleX(1.45)}

/* niveaux de formation, pas des temps : etiquette lisible, pastille carree */
.tl--niveaux .tl__etape{grid-template-columns:64px 1fr;gap:26px}
.tl--niveaux .tl__num{font-size:13px;letter-spacing:.1em;line-height:1.3;padding-top:4px;
  color:rgba(255,255,255,.55)}
.tl--niveaux.tl--clair .tl__num{color:#8296A8}
.tl--niveaux .tl__num i{width:14px;height:14px;border-radius:4px;margin:0 0 10px}
.tl--niveaux .tl__etape .tl__num i{transform:scale(.35);transform-origin:center}
.tl--niveaux .tl__etape.on .tl__num i{transform:none}
.tl--niveaux .tl__etape:hover .tl__num i{transform:scale(1.3)}

@media(max-width:640px){
  .tl__etape{grid-template-columns:70px 1fr;gap:14px}
  .tl__num{font-size:44px}
  .tl__num i{width:26px}
  .tl--niveaux .tl__etape{grid-template-columns:44px 1fr;gap:16px}
  .tl--niveaux .tl__num{font-size:13px}
  .tl--niveaux .tl__num i{width:14px}
}
/* redit ici : le bloc reduced-motion d'origine est plus haut dans la feuille,
   les regles ci-dessus le repasseraient sinon */
@media (prefers-reduced-motion: reduce){
  .tl__etape .tl__num i,.tl--niveaux .tl__etape .tl__num i{transform:none;opacity:1;transition:none}
}

/* ===== Pastille dans une carte de cas client (22/08) =====
   La carte .cas article est en fond navy, mais ce n'est pas une .nappe--navy :
   la regle qui passe les pastilles en blanc dans ce contexte ne s'y appliquait
   pas. La pastille gardait donc sa couleur par defaut, navy, sur un fond navy.
   Mesure du 22/08 sur l'accueil et sur services-itsm-esm : contraste de 1 au
   repos, litteralement invisible, et de 1,7 a 2 au survol.
   Les deux lignes ci-dessous sont la copie exacte de .nappe--navy .pill et de
   son survol, deja ecrites plus haut dans cette feuille : aucune couleur
   nouvelle, on applique juste au bon endroit ce qui existait deja.
   Placees en fin de feuille pour passer devant .nappe--claire .pill:hover, de
   meme specificite. */
.cas__corps .pill{border-color:rgba(255,255,255,.3);color:#fff}
.cas__corps .pill:hover{background:rgba(139,214,181,.22);border-color:var(--menthe)}


/* ═══════════════════════════════════════════════════════════════════
   ORNEMENTS DU GABARIT CLIENT — propages le 26/08/2026
   Repris du « Template presentation BleuLemon 2026 », analyse page par page.
   A. mosaique de carres translucides (deck p.6, 8, 14, 17)
   B. halos degrades, statiques : aucun filter, aucun backdrop-filter,
      donc aucune couche GPU en plus et rien a recomposer au scroll.

   REGLE, apprise sur la home le 26/08 : un halo ne doit jamais DEMARRER
   sur la couture entre deux surfaces de meme valeur. L'arete se voit et
   revele une separation que le lecteur n'a aucune raison de percevoir.
   Un halo qui traverse plusieurs blocs clairs est donc pose en FRAGMENTS,
   meme axe x, meme diametre, chacun coupe par son propre bloc : a l'ecran
   c'est un seul disque continu.
   La part qui depasse d'un cote se REPORTE de l'autre : si le halo sort de
   68px sous le bloc A, le bloc B recoit un fragment cale a top:-(hauteurA-topA)
   pour reprendre le disque.

   Le versant inverse, precise par Indiana le 27/08 apres que je l'aie compris
   a l'envers : quand les deux fonds sont de valeurs DIFFERENTES (blanc,
   #EEF3F9, navy), la coupure est NORMALE et ne se repare pas. La frontiere
   existe deja dans le design, le halo ne la revele pas. Ne fragmenter QUE
   sur fond identique.

   Controle : rendre la page avec les halos puis sans, et diffuser les pixels
   colonne par colonne. Un saut present avec et absent sans, sur un fond qui
   ne change pas, est une coupure a reparer. Faux positif a ecarter : les
   bords des carres de la mosaique, tous les 85px depuis son top, qui
   ressortent si on masque .orn au lieu de .orn--halo.
   Tout est decoratif : aria-hidden, pointer-events:none, sous le contenu.
   ═══════════════════════════════════════════════════════════════════ */

.orn{position:absolute;pointer-events:none;z-index:0}
.nappe,.zone-halo,.zone-orn{position:relative}
/* La decoupe des ornements NE DOIT PAS etre portee par le bloc : overflow:hidden
   sur un ancetre annule position:sticky. Mesure du 27/08/2026 : la version
   precedente de cette regle cassait 52 elements collants sur 41 pages (le titre
   de FAQ .faq2__t, le rail .ga-rail des blogs, les .fiche empilees). On decoupe
   donc dans un cadre absolu qui ne contient QUE les ornements ; les elements
   collants du bloc n'ont ainsi aucun ancetre decoupe. */
.orn-cadre{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.nappe>.conteneur,.nappe>section,.zone-halo>.conteneur,.zone-orn>.conteneur{position:relative;z-index:1}

.orn--mosaique{top:0;right:0;width:min(340px,32vw);aspect-ratio:1;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}
.orn--mosaique i{display:block}
.orn--mosaique i:nth-child(1){grid-area:1/3/2/4;background:rgba(139,214,181,.30)}
.orn--mosaique i:nth-child(2){grid-area:1/4/3/5;background:rgba(220,222,84,.22)}
.orn--mosaique i:nth-child(3){grid-area:2/2/3/4;background:rgba(112,186,224,.20)}
.orn--mosaique i:nth-child(4){grid-area:3/3/4/5;background:rgba(139,214,181,.18)}
.orn--mosaique i:nth-child(5){grid-area:2/4/3/5;background:rgba(220,222,84,.34)}

.orn--halo{border-radius:50%}
.halo--menthe{background:radial-gradient(circle at 50% 50%,
  rgba(139,214,181,.42) 0%,rgba(139,214,181,.16) 42%,rgba(139,214,181,0) 70%)}
.halo--ciel{background:radial-gradient(circle at 50% 50%,
  rgba(112,186,224,.40) 0%,rgba(112,186,224,.14) 45%,rgba(112,186,224,0) 72%)}
.halo--chartreuse{background:radial-gradient(circle at 50% 50%,
  rgba(220,222,84,.30) 0%,rgba(220,222,84,.10) 44%,rgba(220,222,84,0) 70%)}

@media(max-width:860px){.orn--mosaique{width:180px}}

/* Un bloc qui contient un element en position:sticky ne peut PAS passer en
   overflow:hidden : la decoupe casse le collage. Mesure du 27/08/2026 sur
   atlassian.html, seule page dont le hero porte un sticky (.pa__droite,
   css/site.css:1136) : avec overflow:hidden la colonne droite descend de 22px
   (y 194 -> 216), en overflow:visible elle revient a 197. Quand l'ornement
   tient entierement dans le bloc, position:relative suffit et rien n'est
   coupe : c'est le cas de la mosaique, 340x340 dans un hero de 1440x820. */
.zone-orn{position:relative}
.zone-orn>.conteneur{position:relative;z-index:1}

/* ─── Bandeau de preuve sous une grille .mx ───────────────────────────────
   Pose le 27/08/2026 sur atlassian-migration-cloud. Motif mesure : le cas
   client (427 caracteres) etait noye dans la 1re carte, qui pesait 880
   caracteres contre 430 pour sa voisine. En grille, la plus haute impose sa
   hauteur : les 3 cartes faisaient 532px avec 230px et 162px de vide au fond
   des cartes 2 et 3. Sortir la preuve equilibre les cartes ET rend les
   chiffres lisibles, au lieu de les laisser au milieu d'un paragraphe. */
.mx-preuve{margin-top:22px;background:rgba(255,255,255,.07);border-radius:var(--r-carte);
  padding:30px clamp(26px,3vw,38px);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,3.5vw,52px);align-items:center}
.mx-preuve p{font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.86);margin:0}
p.mx-preuve__k{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--menthe);
  font-weight:600;margin:0 0 12px}   /* p.<classe> : .mx-preuve p est plus specifique et ecrasait la marge */
.mx-preuve__ch{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;
  border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(20px,2.5vw,34px)}
.mx-preuve__ch dt{font-size:29px;font-weight:700;color:var(--chartreuse);line-height:1.05;
  font-variant-numeric:tabular-nums}
.mx-preuve__ch dd{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.78)}
@media(max-width:900px){
  .mx-preuve{grid-template-columns:1fr}
  .mx-preuve__ch{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:20px}}

/* Un titre de groupe de nav peut etre un <span> et non un <a> : c'est le cas en
   version anglaise, ou « Resources » a perdu son lien vers le blog. Sans couleur
   explicite il herite du navy du body et devient invisible sur le bandeau navy.
   Mesure du 27/08/2026 : rgb(8,44,78) sur fond navy au lieu de rgba(255,255,255,.88). */
span.nav-g__t{color:rgba(255,255,255,.88)}




/* ─── Selecteur de langue, pied de page ───────────────────────────────────
   Pose le 27/08/2026.

   Quatre points qui ne se devinent pas en lisant le rendu :

   1. Les DEUX pastilles sont pleines, aucune n'est en simple contour. Le fond
      sous .pied__bas est le degrade de .pied echantillonne a 89,9 % de sa
      hauteur, soit #65ACD3 : un texte navy en contour n'y donne que 4,28:1,
      sous le seuil AA de 4,5:1 pour du 12px gras. Pleines, les deux pastilles
      tiennent 10,72:1 (navy/blanc) et 14,18:1 (blanc/navy) quel que soit le
      fond derriere elles.

   2. Le fond mesure sur la MAQUETTE parait bien plus sombre (#2E4E5F). Ce n'est
      pas le site : ruttl monte un element <ruttl-widget> a shadow root par
      dessus toute la page, qui l'assombrit. Il part au lancement. Ne pas
      calibrer une couleur sur une capture prise avec ruttl actif.

   3. Pas de margin-left:auto sur le bloc. .pied__bas est en space-between :
      une marge auto sur le troisieme enfant absorbe tout l'espace libre et
      colle les deux premiers l'un contre l'autre (« travailMaquette »).

   4. Les drapeaux sont des SVG et non des emoji : Windows n'embarque pas de
      fonte drapeau, Chrome et Edge y affichent « GB » en deux lettres. Le code
      langue accompagne le drapeau, un drapeau designant un pays et jamais une
      langue. */
.pied__lang{display:inline-flex;align-items:center;gap:6px}
.pied__lang a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-decoration:none;line-height:1;color:var(--navy);background:#fff;border:1px solid rgba(8,44,78,.12);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.pied__lang a[aria-current="true"]{color:#fff;background:var(--navy);border-color:var(--navy)}
.pied__lang a:hover{color:#fff;background:var(--navy-ink);border-color:var(--navy-ink)}
.pied__lang a:focus-visible{outline:2px solid var(--navy-ink);outline-offset:2px}
.pied__lang svg{display:block;width:17px;height:12px;border-radius:2px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(8,44,78,.2)}
@media(max-width:640px){.pied__lang{margin-top:4px}}