/* Montserrat hebergee ici : la feuille distante bloquait le rendu.
   Fonte VARIABLE, d'ou font-weight: 400 600. Detail dans CLAUDE.md. */
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("../assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

: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--blanc{background:#fff;color:var(--navy);border:1.5px solid rgba(11,63,112,.3)}

.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--corail{position:relative;overflow:hidden;background:var(--corail);color:var(--navy);border-radius:12px;
  transition:filter .35s var(--ease)}

.btn--blanc-anime{position:relative;overflow:hidden;background:#F4F7FA;color:var(--navy);border-radius:12px;
  transition:filter .35s var(--ease)}

.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;width:auto}
.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;height:auto}.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 1fr;gap:clamp(28px,3.5vw,56px)}
/* pied a 4 colonnes (29/08/2026) : entre le bureau et le mobile, deux
   colonnes pour que « Politique de confidentialité » garde sa ligne */
@media(max-width:1080px){.pied__grille{grid-template-columns:1fr 1fr;gap:38px 44px}}
.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)}
/* Le credit Inleven est un vrai lien : il doit se voir comme tel, la
   couleur seule ne suffit pas. Demande d'Indiana du 28/08/2026. */
.pied__bas a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .2s var(--ease)}
.pied__bas a:hover{color:var(--menthe)}
.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;height:auto}
.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{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)}

.fiche__cta{transition:transform .25s var(--ease),background .3s var(--ease)}
.fiche__cta:hover{transform:translateY(-2px)}

.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: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:#EF6449}  /* Secteurs. Aurelie voulait le corail classique #FF806B ;
   il mesure 2,46 sur blanc, sous le plancher de 3,0. Indiana a tranche pour
   #EF6449, deux crans au-dessus de l'ancien, mesure 3,19. 31/08/2026. */
.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)}

/* Variante sur nappe CLAIRE. Mesure du 27/08/2026 sur le site deploye : les
   19 grands enonces du site sont en graisse 600, blancs, sur le navy. Les deux
   seuls poses sur du blanc, secteurs-industrie-defense et sa version anglaise,
   utilisaient .intro-grand, un chapeau de 21 px gonfle a 42 px en style inline
   et reste donc en graisse 400 : d'ou un enonce visiblement plus fin que
   partout ailleurs, signale par Indiana le 27/08/2026.
   Cette variante garde la geometrie et la graisse du manifeste, et remet les
   couleurs du fond clair, celles qui etaient deja en place : navy-ink 14,18:1
   et corail-ink 4,84:1 sur blanc. Aucune couleur n'est modifiee. */
.manifeste--clair{color:var(--navy-ink)}
.manifeste--clair em{color:var(--corail-ink)}
.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;height:auto}
}
@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,
.form .form__case label{font-size:13px;line-height:1.55;color:#3C5670}
/* Le libelle de la case de consentement n'est pas un libelle de champ : il ne
   doit PAS reprendre le gras, l'interlettrage ni la marge de .form label, sinon
   la phrase RGPD passe en gras et se decale. Mesure du 28/08/2026 : sans ces
   trois remises a zero, 14 % des pixels du bloc changeaient. */
.form .form__case label{font-weight:400;letter-spacing:normal;margin-top:0}
.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)}

/* ---- Sélecteurs orphelins retirés le 31/08/2026 ----
   Deux selecteurs, « .pa » et « .pc--menthe », etaient restes seuls, sans
   accolade ni declaration, sous un commentaire annoncant un hover de bouton
   qui n'existe plus. CSS ne les ignore pas : il les colle a la regle SUIVANTE
   et fabrique « .pa .pc--menthe .pi h1 em », qui ne matche aucun element du
   site. Consequence mesuree : l'accent des titres de la famille IA n'a jamais
   pris sa couleur, il tombait sur le ciel herite de .pe. */

/* ---- Famille IA : accent chartreuse (olive lisible en texte), bus d'agents ---- */
.pi h1 em{color:#B8860B}  /* IA. L'ancien #92931F etait juge « caca d'oie » par
   Aurelie en reunion. Or sombre, mesure 3,25 sur blanc. Indiana, 31/08/2026. */
.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 ----
   le cas assurance (ITSM) = ciel/horizon, le cas sante (Atlassian) = menthe,
   le cas defense (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}
/* Ressources prend sa propre couleur, un turquoise. Decision d'Indiana du
   31/08/2026 : le vert reste sur A propos, Ressources devait avoir la sienne.
   #00A0A8, contraste 3,18 sur blanc, a 61 de l'horizon de Formations, donc
   aucune confusion possible avec une autre famille du site. */
.pc--ressources h1 em{color:#00A0A8}
.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);height:auto}
.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-client-defense 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;height:auto}
.duo-fin .photo{margin:0 0 16px}
.duo-fin .photo img{aspect-ratio:3/2;height:auto}
@media(max-width:700px){
  .photo--bande img{aspect-ratio:16/10;max-height:none;height:auto}
}
.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;height:auto}
.trio-photos--duo{grid-template-columns:repeat(2,1fr)}
.trio-photos--duo .photo img{aspect-ratio:3/2;height:auto}
@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}
/* Les drapeaux gardent leurs VRAIES proportions. Le drapeau britannique est
   un 2:1, le francais un 3:2 : les enfermer dans une meme boite de 17x12
   les encastrait au milieu d'un cadre trop large, liseré arrondi autour du
   vide. Signale par Indiana le 28/08/2026. La hauteur est commune, la
   largeur suit. */
.pied__lang svg{display:block;width:auto;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}}

/* navy, lueur menthe en bas a droite */
.btn--menthe{
  color:#fff;
  background:
    radial-gradient(90% 140% at 88% 130%, rgba(139,214,181,.24) 0%, transparent 58%),
    linear-gradient(160deg, var(--navy) 0%, var(--nuit) 100%);
}
.btn--menthe:hover{ box-shadow:0 8px 22px rgba(8,44,78,.30); }
/* corail, lueur chartreuse */
.cas__btn, .fiche__cta{
  color:var(--navy);
  background:
    radial-gradient(90% 140% at 86% 130%, rgba(220,222,84,.34) 0%, transparent 58%),
    linear-gradient(160deg, var(--corail) 0%, #EE6A55 100%);
}
.cas__btn:hover, .fiche__cta:hover{ box-shadow:0 8px 22px rgba(238,106,85,.34); }
/* clair sur navy, lueur ciel */
.btn--blanc-anime{
  color:var(--navy);
  background:
    radial-gradient(90% 140% at 86% 130%, rgba(112,186,224,.30) 0%, transparent 58%),
    linear-gradient(160deg, #FBFDFE 0%, #E4EFF7 100%);
}
.btn--blanc-anime:hover{ box-shadow:0 8px 22px rgba(0,0,0,.24); }
@media (prefers-reduced-motion:reduce){
  .btn--menthe,.fiche__cta,.cas__btn,.btn--blanc-anime{transition:none}
}

/* PRINCIPAL sur fond clair : navy, lueur menthe */
.btn--menthe, .fiche__cta, .faq2__cta{
  color:#fff;
  background:
    radial-gradient(90% 140% at 88% 130%, rgba(139,214,181,.24) 0%, transparent 58%),
    linear-gradient(160deg, var(--navy) 0%, var(--nuit) 100%);
}
.btn--menthe:hover, .fiche__cta:hover, .faq2__cta:hover{ box-shadow:0 8px 22px rgba(8,44,78,.30); }

/* SECONDAIRE sur fond clair : contour navy. Remplace le bouton blanc pose sur
   du blanc, qui ne se voyait qu'a son liseré. Il se remplit au survol. */
.btn--blanc{
  background:transparent; color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--navy);
}
.btn--blanc:hover{
  color:#fff;
  background:linear-gradient(160deg, var(--navy) 0%, var(--nuit) 100%);
  box-shadow:inset 0 0 0 1.5px var(--navy), 0 8px 22px rgba(8,44,78,.26);
}

/* PRINCIPAL sur fond navy : chartreuse, texte navy, lueur menthe */
.cas__btn{
  color:var(--navy);
  background:
    radial-gradient(90% 140% at 86% 130%, rgba(139,214,181,.42) 0%, transparent 58%),
    linear-gradient(160deg, var(--chartreuse) 0%, #C9CB45 100%);
}
.cas__btn:hover{ box-shadow:0 8px 22px rgba(11,63,112,.34); }

/* TETE DE PAGE et menu, sur navy : clair, lueur ciel. Plus sobre que le
   chartreuse, qui serait trop present sur les 84 en-tetes. */
.btn--blanc-anime{
  color:var(--navy);
  background:
    radial-gradient(90% 140% at 86% 130%, rgba(112,186,224,.30) 0%, transparent 58%),
    linear-gradient(160deg, #FBFDFE 0%, #E4EFF7 100%);
}
.btn--blanc-anime:hover{ box-shadow:0 8px 22px rgba(0,0,0,.24); }

/* Le CTA de fin de FAQ porte les deux classes et vit sur du clair :
   il suit la famille du fond clair, pas celle du navy. */
.faq2__cta.btn--blanc-anime{
  color:#fff;
  background:
    radial-gradient(90% 140% at 88% 130%, rgba(139,214,181,.24) 0%, transparent 58%),
    linear-gradient(160deg, var(--navy) 0%, var(--nuit) 100%);
}
@media (prefers-reduced-motion:reduce){
  .btn--menthe,.fiche__cta,.faq2__cta,.cas__btn,.btn--blanc-anime,.btn--blanc{transition:none}
}

/* ═══ Boutons : blanc et bleu, rien d'autre ══════════════════════════════
   Decision d'Indiana du 27/08/2026 : « Le jaune ne doit rien foutre là. Tu
   mets du blanc et du bleu tout simplement. »

   Deux regles, et c'est tout :
     sur fond clair  -> navy plein, texte blanc
     sur fond sombre -> clair plein, texte navy
   Le secondaire est le meme bouton en contour, qui se remplit au survol.

   Mesures qui justifient ce choix, faites le 27/08 sur la palette :
     navy sur blanc        10,72:1     chartreuse sur blanc  1,44:1
     clair sur navy         9,61:1     blanc sur blanc       1,00:1
     texte blanc sur navy  10,72:1     texte navy sur corail 4,37:1

   Le dessin garde le geste des shaders retires : une lumiere qui entre par un
   angle, en degrade statique. Zero travail GPU, PageSpeed mesure 99 a 100. */

.btn--menthe, .fiche__cta, .faq2__cta, .cas__btn,
.btn--blanc-anime, .btn--blanc, .btn--chartreuse, .btn--corail{
  position:relative; overflow:hidden; border:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease);
}
.btn--menthe:hover, .fiche__cta:hover, .faq2__cta:hover, .cas__btn:hover,
.btn--blanc-anime:hover, .btn--blanc:hover, .btn--chartreuse:hover,
.btn--corail:hover{ transform:translateY(-2px); }

/* PRINCIPAL sur fond clair : navy plein */
.btn--menthe, .faq2__cta, .btn--corail{
  color:#fff;
  background:
    radial-gradient(90% 140% at 88% 130%, rgba(31,111,150,.34) 0%, transparent 58%),
    linear-gradient(160deg, var(--navy) 0%, var(--nuit) 100%);
}
.btn--menthe:hover, .faq2__cta:hover, .btn--corail:hover{
  box-shadow:0 8px 22px rgba(8,44,78,.30);
}

/* SUR PHOTO : le bouton des cartes service est pose sur l'image. Son fond doit
   etre OPAQUE, sinon il devient illisible des que la photo est claire. Son
   survol d'origine etait rgba(112,186,224,.35), un bleu a 35 % sur une
   photographie : c'est ce que corrige cette regle. */
.fiche__cta{
  color:#fff;
  background:
    radial-gradient(90% 140% at 88% 130%, rgba(31,111,150,.34) 0%, transparent 58%),
    linear-gradient(160deg, var(--navy) 0%, var(--nuit) 100%);
  box-shadow:0 2px 10px rgba(8,44,78,.30);
}
.fiche__cta:hover{
  background:linear-gradient(160deg, var(--horizon) 0%, var(--navy) 100%);
  box-shadow:0 10px 26px rgba(8,44,78,.42);
}

/* Les fiches 2, 4 et 6 de la page Services vivent dans une nappe navy. Sur
   celles-la le bouton passe en clair, texte navy. Demande d'Indiana du
   27/08/2026 : << on laisse le bleu marine pour la partie blanche, et pour
   toutes les parties bleu marine le bouton doit etre blanc >>.
   Le fond reste OPAQUE et garde une ombre portee : le bouton est pose sur la
   photographie, pas sur la nappe, et une photo claire le mangerait sans elle. */
.fiche--navy .fiche__cta{
  color:var(--navy);
  background:
    radial-gradient(90% 140% at 86% 130%, rgba(112,186,224,.30) 0%, transparent 58%),
    linear-gradient(160deg, #FBFDFE 0%, #E4EFF7 100%);
  box-shadow:0 2px 12px rgba(0,0,0,.30);
}
.fiche--navy .fiche__cta:hover{
  background:linear-gradient(160deg, #FFFFFF 0%, #D8E8F4 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.38);
}

/* PRINCIPAL sur fond navy : clair plein, texte navy.
   C'est la famille sobre, celle de la tete de page et des cartes cas client.
   Le bouton jaune, lui, a sa propre regle juste en dessous. */
.cas__btn, .btn--blanc-anime{
  color:var(--navy);
  background:
    radial-gradient(90% 140% at 86% 130%, rgba(112,186,224,.30) 0%, transparent 58%),
    linear-gradient(160deg, #FBFDFE 0%, #E4EFF7 100%);
}
.cas__btn:hover, .btn--blanc-anime:hover{ box-shadow:0 8px 22px rgba(0,0,0,.26); }

/* JAUNE, sur fond navy uniquement. Decision d'Indiana du 27/08/2026 : les
   11 boutons chartreuse (7 pages FR, 4 pages EN) reprennent la couleur de la
   marque. Ils sont TOUS poses sur le navy rgb(11,63,112), ou le jaune mesure
   7,46:1 comme pastille et 7,46:1 pour le texte navy pose dessus : bien
   au-dessus des seuils. Ne JAMAIS poser ce bouton sur du blanc, ou le jaune
   tombe a 1,44:1. Meme geste de lumiere d'angle que les autres, zero GPU. */
.btn--chartreuse{
  color:var(--navy);
  background:
    radial-gradient(90% 140% at 86% 130%, rgba(139,214,181,.42) 0%, transparent 58%),
    linear-gradient(160deg, var(--chartreuse) 0%, #C9CB45 100%);
}
.btn--chartreuse:hover{ box-shadow:0 8px 22px rgba(11,63,112,.34); }

/* SECONDAIRE sur fond clair : contour navy, se remplit au survol.
   Remplace le bouton blanc pose sur du blanc, invisible a 1,00:1. */
.btn--blanc{
  background:transparent; color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--navy);
}
.btn--blanc:hover{
  color:#fff;
  background:linear-gradient(160deg, var(--navy) 0%, var(--nuit) 100%);
  box-shadow:inset 0 0 0 1.5px var(--navy), 0 8px 22px rgba(8,44,78,.26);
}

/* Le CTA de fin de FAQ porte les deux classes et vit sur du clair. */
.faq2__cta.btn--blanc-anime{
  color:#fff;
  background:
    radial-gradient(90% 140% at 88% 130%, rgba(31,111,150,.34) 0%, transparent 58%),
    linear-gradient(160deg, var(--navy) 0%, var(--nuit) 100%);
}
@media (prefers-reduced-motion:reduce){
  .btn--menthe,.fiche__cta,.faq2__cta,.cas__btn,.btn--blanc-anime,
  .btn--blanc,.btn--chartreuse,.btn--corail{transition:none}
}

/* Fiche 28/08 d'Aurelie n°13 : dans la section « ce que nous mesurons », les h3
   collaient au paragraphe suivant (le reset met toutes les marges a 0). La classe
   n'existe que sur rse.html et en/csr.html : aucune autre page n'est touchee. */
.parlons--aere h3{margin-top:30px}
.parlons--aere h3+.prose{margin-top:10px}

/* Fiche 28/08 d'Aurelie n°60 : la liste des trois interventions Atlassian tient sur
   deux colonnes, le troisieme element restait seul a gauche. La classe n'existe que
   sur atlassian.html et en/atlassian.html. */
.liste-six--centre-fin>div:last-child:nth-child(odd){grid-column:1 / -1;max-width:52ch;margin-inline:auto}

/* Fiches 28/08 d'Aurelie n°66 et 67 : dans deux cartes de prestation, la note
   collait a la ligne du dessous. La classe n'existe que sur services-diagnostic-si
   et sa page anglaise. */
.offre__note--aere{margin-bottom:14px}

/* Fiche 28/08 d'Aurelie n°85 : l'intertitre PI Planning se lisait comme une phrase,
   faute d'espace au-dessus. La classe n'existe que sur les deux pages Pilotage. */
.h3-aere{margin-top:38px}

/* Fiches 28/08 d'Aurelie n°1 a 4, 6 et 7 : le logo du produit se pose dans le coin
   haut droit de la carte, aligne sur le titre. Les deux conteneurs sont deja en
   position:relative. Le logo est decoratif : la carte porte deja le nom du produit,
   donc alt vide et aria-hidden, aucune redite pour un lecteur d'ecran. */
.bento__logo,.duo-fin__logo{position:absolute;top:26px;right:26px;height:26px;width:auto;
  max-width:36%;object-fit:contain;object-position:right center}
.bento>article>h3,.duo-fin>div>b{padding-right:calc(36% + 26px)}
@media(max-width:560px){
  .bento__logo,.duo-fin__logo{position:static;height:22px;margin-bottom:12px;max-width:70%}
  .bento>article>h3,.duo-fin>div>b{padding-right:0}
}

/* Retour d'Indiana du 28/08 : dans les deux colonnes Atlassian et Matrix42, le
   logo tombait a 2 px du paragraphe. On descend le texte, la meme valeur pour les
   deux. Le selecteur ne vise que les colonnes qui portent un logo. */
.duo-fin__logo ~ b{margin-bottom:24px}

/* Listes a puces des pages legales, reprises de l'ancien site le 28/08/2026.
   Le reset met toutes les marges a 0 et le site n'avait aucune liste a puces
   en dehors du pied : celle-ci reprend la typographie de .prose. */
.liste-puces{max-width:70ch;margin-top:14px;list-style:none;display:grid;gap:9px}
.liste-puces li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.7;color:#3C5670}
.liste-puces li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  border-radius:2px;background:var(--ciel)}
.liste-puces b{color:var(--navy-ink)}
.liste-puces a{color:var(--horizon);font-weight:600;border-bottom:1.5px solid rgba(31,111,150,.3)}
.liste-puces a:hover{border-color:var(--horizon)}

/* ---- Les valeurs, quatre photographies ----------------------------------
   Retour de Maelle du 28/08/2026 : remplacer les visuels « Valeurs » par les
   quatre photos d'Andre Abbe choisies par les Yuzus. Le geste reprend celui des
   cartes secteur de l'accueil (image, bandeau navy en bas, numero corail), pose
   ici pour la premiere fois dans la feuille partagee. */
.valeurs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.valeur{margin:0}
.valeur__vue{position:relative;border-radius:var(--r-carte);overflow:hidden;box-shadow:var(--ombre)}
.valeur__vue img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s var(--ease)}
.valeur:hover .valeur__vue img{transform:scale(1.03)}
.valeur b{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  background:rgba(8,44,78,.9);backdrop-filter:blur(4px);color:#fff;border-radius:var(--r-carte);
  padding:12px 16px;font-size:15.5px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.valeur i{font-style:normal;font-size:12px;color:var(--corail);font-weight:600}
.valeur__sous{font-weight:400;font-size:13.5px;color:rgba(255,255,255,.78)}
.valeur figcaption{margin-top:18px;font-size:15px;line-height:1.65;color:#3C5670;max-width:46ch}
@media(max-width:820px){.valeurs{grid-template-columns:1fr;gap:30px}}
@media (prefers-reduced-motion: reduce){.valeur:hover .valeur__vue img{transform:none}}

/* ---- La ligne « Pour aller plus loin » ----------------------------------
   Retour de Maelle du 28/08/2026 : les liens de cette ligne, presente en bas
   de presque toutes les pages, se touchaient. Le separateur <i>·</i> n'avait
   aucune regle : il heritait de l'italique du navigateur et de zero marge.
   On lui donne de l'air, et on l'efface un peu pour que l'oeil aille aux
   liens et pas aux points. */
.prose i{font-style:normal;opacity:.45;margin:0 11px}

/* ---- Le public vise d'un niveau de formation ----------------------------
   Fiches d'Aurelie du 28/08/2026 (les quatre blocs de formations.html et les
   quatre niveaux de formations-jira.html) : la derniere phrase, celle qui dit
   a qui la formation s'adresse, passe a la ligne et en italique. On reste dans
   le meme <p> : un second paragraphe casserait la grille .liste-six. */
.liste-six .ls-cible{display:block;margin-top:9px;font-style:italic}

/* ---- Bandeau de consentement -------------------------------------------
   Palette, rayons, typographie et boutons du site : rien d'invente. Pose en
   position fixed, donc hors du flux : zero decalage de mise en page.

   Deux etages. L'etage 1 propose « Choisir les options » et « Tout accepter ».
   L'etage 2, ouvert par le premier, porte les familles de cookies et le refus.
   Le meme cadre grandit, il ne se remplace pas : le visiteur ne perd pas le
   fil. */
.bl-consent{position:fixed;z-index:9000;left:0;right:0;bottom:0;
  padding:0 clamp(12px,3vw,26px) clamp(12px,3vw,26px);pointer-events:none}
.bl-consent[hidden]{display:none}
.bl-consent__boite{pointer-events:auto;margin:0 auto;max-width:1240px;background:#fff;
  border:1px solid rgba(11,63,112,.14);border-radius:12px;   /* fige, pas herite : les deux pages d'accueil
     declarent --r-carte a 10px et le bandeau doit etre identique partout */
  box-shadow:0 10px 40px rgba(8,44,78,.16);padding:22px 24px}
.bl-consent__haut{display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center}
.bl-consent__t{font-size:16px;font-weight:700;color:var(--navy,#0B3F70);margin:0 0 6px}
.bl-consent__p{font-size:14px;line-height:1.6;color:#3C5670;margin:0;max-width:78ch}
.bl-consent__p a{color:var(--horizon,#1F6F96);font-weight:600;
  border-bottom:1.5px solid rgba(31,111,150,.35)}
.bl-consent__p a:hover{border-color:var(--horizon,#1F6F96)}
.bl-consent__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.bl-consent__actions .btn{font-size:14.5px;padding:12px 22px;white-space:nowrap}

/* ---- Etage 2 : les familles ---- */
.bl-consent__options{margin-top:20px;padding-top:20px;border-top:1px solid rgba(11,63,112,.12)}
.bl-consent__options[hidden]{display:none}
.bl-consent__fam{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;
  padding:14px 0;border-bottom:1px solid rgba(11,63,112,.08);align-items:start}
.bl-consent__fam:last-of-type{border-bottom:0}
.bl-consent__fam b{display:block;font-size:14.5px;color:var(--navy,#0B3F70);margin-bottom:3px}
.bl-consent__fam span{display:block;font-size:13.5px;line-height:1.55;color:#3C5670;max-width:74ch}
/* L'interrupteur est une vraie case a cocher, habillee. Le lecteur d'ecran
   entend une case, le clavier la coche a l'espace. */
.bl-consent__int{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto;margin-top:2px}
.bl-consent__int input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:pointer;z-index:1}
/* le decor ne doit pas intercepter le clic destine a la case */
.bl-consent__int i{pointer-events:none}
.bl-consent__int i{position:absolute;inset:0;border-radius:999px;background:#DDE5EE;
  box-shadow:inset 0 0 0 1px rgba(11,63,112,.18);transition:background .2s var(--ease,ease)}
.bl-consent__int i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(8,44,78,.3);
  transition:transform .2s var(--ease,ease)}
.bl-consent__int input:checked + i{background:var(--navy,#0B3F70);box-shadow:none}
.bl-consent__int input:checked + i::after{transform:translateX(18px)}
.bl-consent__int input:focus-visible + i{outline:2px solid var(--navy-ink,#082C4E);outline-offset:2px}
.bl-consent__int input:disabled{cursor:default}
.bl-consent__int input:disabled + i{background:var(--navy,#0B3F70);opacity:.42}
.bl-consent__bas{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px}
.bl-consent__bas .btn{font-size:14.5px;padding:12px 22px;white-space:nowrap}

@media(max-width:820px){
  .bl-consent__haut{grid-template-columns:1fr}
  .bl-consent__actions,.bl-consent__bas{justify-content:stretch}
  .bl-consent__actions .btn,.bl-consent__bas .btn{flex:1 1 auto;text-align:center}
}
/* L'entree du bandeau, sur TOUS les ecrans : le @media(hover:hover) d'origine
   privait le tactile de l'animation, le bandeau y surgissait d'un coup.
   Corrige le 30/08/2026, en meme temps que l'attente de fin de chargement. */
@media(prefers-reduced-motion:no-preference){
  .bl-consent__boite{animation:bl-consent-monte .7s var(--ease,cubic-bezier(.32,.72,0,1)) both}
  @keyframes bl-consent-monte{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .bl-consent__int i,.bl-consent__int i::after{transition:none}
}
.bl-consent .btn:focus-visible{
  outline:2px solid var(--navy-ink,#082C4E);outline-offset:2px}
/* Le lien qui rouvre le choix des cookies : c'est un bouton, pas un lien, il
   declenche une action et ne mene nulle part. Il prend l'habit des liens du
   pied pour ne pas se distinguer. */
.pied__cookies{font-size:15px;color:rgba(255,255,255,.85);background:none;border:0;
  padding:0;font-family:inherit;line-height:inherit;text-align:left;cursor:pointer}
.pied__cookies:hover{color:var(--chartreuse,#DCDE54)}
.pied__cookies:focus-visible{outline:2px solid var(--chartreuse,#DCDE54);outline-offset:2px}

/* ---- Envoi des formulaires (Web3Forms), pose le 31/08/2026 ----
   Le piege a robots doit etre invisible et hors du parcours clavier, sinon un
   visiteur au clavier tombe dessus et le coche sans le vouloir : l'envoi serait
   alors rejete en silence. */
.bl-pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.bl-envoi{margin-top:24px;padding:22px 24px;border-radius:12px;outline:none}
.bl-envoi b{display:block;font-size:17px;font-weight:650;margin-bottom:6px}
.bl-envoi span{display:block;font-size:15px;line-height:1.6}
.bl-envoi--ok{background:var(--clair);border:1.5px solid var(--menthe)}
.bl-envoi--ok b{color:var(--navy)}
.bl-envoi--ok span{color:var(--navy);opacity:.82}
.bl-envoi--ko{background:var(--clair);border:1.5px solid var(--corail)}
.bl-envoi--ko b{color:var(--corail-ink)}
.bl-envoi--ko span{color:var(--navy);opacity:.82}
@media(prefers-reduced-motion:no-preference){
  .bl-envoi{animation:bl-envoi-monte .45s cubic-bezier(.32,.72,0,1) both}
  @keyframes bl-envoi-monte{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
}
/* L'attribut hidden ne suffit pas sur .form : la regle .form{display:grid}
   plus haut le bat en specificite, donc le formulaire restait affiche sous le
   message de confirmation. Mesure du 31/08/2026 en production. */
.form[hidden]{display:none}