/* =====================================================================
   EKILOG — socle : jetons, typographie, composants de la maquette 2026.
   Les jetons --sec* sont redéfinis par le fichier de palette chargé
   juste après celui-ci. Ne modifiez pas la couleur secondaire ici :
   Apparence › Personnaliser › Couleur secondaire EKILOG.
   ===================================================================== */

/* ==========================================================================
   EKILOG — gabarit v2
   Les couleurs secondaires sont définies dans palette.css, chargé juste
   après ce bloc : il ne redéfinit que --sec* et --sec-nom.
   ========================================================================== */
:root{
  /* Neutres chauds — le bleu n'est plus la couleur par défaut du gris */
  --paper:#FAF8F4;
  --surface:#FFFFFF;
  --wash:#F2EDE4;
  --rule:#E2D9CB;
  --rule-soft:#EDE6DA;

  /* Valeurs élargies : un vrai presque-noir, un vrai papier */
  --ink:#171310;
  --body:#4A433C;
  --muted:#7A7168;
  --deep:#0C1A24;
  --deep-2:#122634;
  --on-deep:#EAE4DA;
  --on-deep-dim:#9C9488;

  /* Bleu de marque : structure et fond, plus les actions */
  --brand:#15436B;
  --brand-2:#1E5D93;

  /* Secondaire par défaut — palette.css écrase ces valeurs */
  --sec:#2287C8;
  --sec-ink:#186699;
  --sec-on-deep:#67B6EC;
  --sec-soft:#E7F1F9;
  --sec-nom:"Bleu seul";

  --grid:rgba(255,255,255,.085);
  --shadow:0 1px 2px rgba(23,19,16,.05), 0 14px 34px -18px rgba(23,19,16,.30);
  --fdisp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fbody:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --fserif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --acc:var(--sec); --acc-ink:var(--sec-ink);
  --maxw:1160px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14120F; --surface:#1C1916; --wash:#211D18;
    --rule:#342E27; --rule-soft:#282320;
    --ink:#F3EEE7; --body:#B6ADA2; --muted:#958C80;
    --deep:#080D12; --deep-2:#0E1A24;
    --on-deep:#E6E0D6; --on-deep-dim:#948C81;
    --brand:#5AA3D8; --brand-2:#7CBBE6;
    --grid:rgba(255,255,255,.06);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 36px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#14120F; --surface:#1C1916; --wash:#211D18;
  --rule:#342E27; --rule-soft:#282320;
  --ink:#F3EEE7; --body:#B6ADA2; --muted:#958C80;
  --deep:#080D12; --deep-2:#0E1A24;
  --on-deep:#E6E0D6; --on-deep-dim:#948C81;
  --brand:#5AA3D8; --brand-2:#7CBBE6;
  --grid:rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 36px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--body);font-family:var(--fbody);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fdisp);color:var(--ink);margin:0;text-wrap:balance;line-height:1.1;letter-spacing:-.022em}
p{margin:0}
a{color:var(--sec-ink)}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.eyebrow{font-family:var(--fdisp);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sec-ink)}
/* Les noms de produits gardent leur casse d'origine, même dans un libellé
   passé en capitales : iShare COM ne devient jamais ISHARE COM. */
.pn{text-transform:none;letter-spacing:.04em}
.lede{font-size:18.5px;line-height:1.58;max-width:60ch;color:var(--body)}

/* ------------------------------------------------ héro d'accueil (dessiné) */
/* Fond papier, titre à empattements souligné à la main, cadres organiques,
   pictogrammes dans des disques teintés et fil ondulé. Les trois temps sont
   volontairement décalés et de tailles différentes : on lit un parcours,
   pas un tableau. */
.wrap-w{width:100%;max-width:1340px;margin:0 auto;padding-inline:20px}
.hero{background:var(--paper);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 130% at 88% -14%, color-mix(in srgb, var(--acc) 13%, transparent) 0%, transparent 62%);
}
.hero-in{position:relative;padding-block:54px 56px;display:grid;gap:34px}
.hero-top{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:54px;align-items:start}
.hero-l,.hero-r{display:grid;gap:18px;align-content:start}
.hero .eyebrow{color:var(--acc-ink)}
.hero h1{
  font-family:var(--fserif);font-weight:600;color:var(--ink);
  font-size:clamp(31px,4.1vw,52px);letter-spacing:-.014em;line-height:1.06;max-width:14ch;
}
.ul{position:relative;display:inline}
.souligne{position:absolute;left:0;bottom:-.14em;width:58%;height:.34em;pointer-events:none;overflow:visible}
.souligne path{fill:none;stroke:var(--acc);stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.8}

/* Cadre organique : aucun coin identifiable */
.claim{position:relative;padding:30px 32px;display:grid;gap:18px}
.dessin{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dessin path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.claim .dessin path{stroke:var(--acc);opacity:.85}
.hero .sub{color:var(--body);font-size:17px;line-height:1.6;max-width:none}
.tech{
  font-family:var(--fdisp);font-weight:700;color:var(--ink);white-space:nowrap;
  box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--acc) 50%, transparent);padding-bottom:1px;
}
.slogan{font-family:var(--fserif);font-weight:600;color:var(--ink);font-size:clamp(19px,2vw,25px);line-height:1.2;margin:0}

/* Pastilles d'usage : contour tracé, pas de bordure */
.usages{display:flex;flex-wrap:wrap;gap:9px}
.usage{
  display:inline-flex;align-items:center;gap:10px;position:relative;
  padding:10px 22px;font-family:var(--fdisp);font-size:14px;font-weight:700;color:var(--ink);
}
.usage i{width:9px;height:9px;border-radius:99px;background:var(--uc,var(--acc));display:inline-block;flex:none}
.pilule{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pilule path{fill:none;stroke:var(--acc);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.6}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px}
.btn{
  font-family:var(--fdisp);font-weight:700;font-size:15px;text-decoration:none;
  padding:14px 28px;border-radius:99px;display:inline-block;border:1.5px solid transparent;cursor:pointer;
}
.btn-1{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn-1:hover{background:var(--acc-ink);border-color:var(--acc-ink);color:#fff}
.btn-2{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-2:hover{border-color:var(--acc);color:var(--acc-ink)}

/* Le produit, détaché : cadre pointillé, aucun lien vers les trois temps */
.offre{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,2.16fr);gap:0;margin-bottom:46px}
.brique{position:relative;padding:26px 28px 28px;margin-right:48px;display:grid;gap:9px;align-content:start}
.brique .dessin path{stroke:var(--muted);opacity:.8;stroke-dasharray:9 8}
.brique .opt{font-family:var(--fdisp);font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);justify-self:start}
.brique h4{font-family:var(--fdisp);font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.028em;margin:0}
.brique p{font-size:14px;color:var(--muted);line-height:1.5}

/* Les trois temps, en quinconce */
.chain{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;padding-top:6px}
.link{position:relative;padding:0 10px 0 0}
.link:nth-child(2){transform:translateY(38px)}
.link:nth-child(3){transform:translateY(12px)}
.pastille{
  position:relative;z-index:1;display:grid;place-items:center;
  width:74px;height:74px;border-radius:50%;margin-bottom:16px;
  background:color-mix(in srgb, var(--acc) 11%, var(--paper));
}
.link:nth-child(2) .pastille{width:104px;height:104px}
.link:nth-child(3) .pastille{width:88px;height:88px}
.picto{width:52px;height:46px;display:block;overflow:visible}
.link:nth-child(2) .picto{width:72px;height:64px}
.link:nth-child(3) .picto{width:60px;height:53px}
.picto path{fill:none;stroke:var(--acc);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.picto circle{fill:var(--acc);stroke:none}
.link .k{display:block;font-family:var(--fdisp);font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--muted)}
.link h4{font-family:var(--fserif);font-weight:600;color:var(--ink);font-size:18px;margin:7px 0 0;line-height:1.24}
.link p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.45;max-width:26ch}
.onde{position:absolute;left:37px;top:0;width:calc(66.6667% + 22px);height:96px;pointer-events:none;z-index:0}
.onde path{fill:none;stroke:var(--acc);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.5}

/* bandeau de confiance, collé au héro */
.trust{background:var(--wash);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.trust-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding-block:18px}
.trust-lbl{font-family:var(--fdisp);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--fdisp);font-size:12.5px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:99px;padding:5px 13px}

/* ------------------------------------------- en-tête des pages internes */
.phead{background:var(--wash);border-top:5px solid var(--pc,var(--sec));border-bottom:1px solid var(--rule)}
.phead-in{padding-block:58px 52px;display:grid;gap:18px;max-width:840px}
.phead .eyebrow{color:var(--pc,var(--sec-ink))}
.phead h1{font-size:clamp(30px,5vw,54px);font-weight:800;letter-spacing:-.036em;line-height:1.05;max-width:17ch}
.phead p{font-size:18.5px;line-height:1.56;max-width:58ch;color:var(--body)}

/* En-tête photo de la page Contact.
   La photo est stockée en niveaux de gris : la couche « tint » lui impose
   la teinte de la palette en reprenant sa luminosité. Changer de palette
   reteinte l'image, sans second fichier. */
.phead-photo{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--deep);border-bottom:0;
}
.phead-photo .img{
  position:absolute;inset:0;background-repeat:no-repeat;
  background-image:url("../img/cabine.jpg");background-size:cover;background-position:58% center;
  filter:brightness(.88) contrast(1.03);
}
.phead-photo .tint{position:absolute;inset:0;background:var(--sec);mix-blend-mode:color;opacity:.92}
.phead-photo .veil{
  position:absolute;inset:0;opacity:.82;
  background:
    linear-gradient(100deg, rgba(8,14,20,.80) 0%, rgba(8,14,20,.50) 42%, rgba(8,14,20,.08) 100%),
    linear-gradient(180deg, rgba(8,14,20,.22) 0%, rgba(8,14,20,0) 42%, rgba(8,14,20,.26) 100%);
}
.phead-photo .phead-in{position:relative;padding-block:74px 68px}
/* Ombres portées discrètes : elles tiennent la lisibilité sans qu'on ait
   à réassombrir la photo. */
.phead-photo .eyebrow{color:var(--sec-on-deep);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.phead-photo h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.phead-photo p{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* ------------------------------------------------------------- sections */
.sec{padding-block:76px}
.sec-alt{background:var(--wash)}
.sec-deep{background:var(--deep);color:var(--on-deep)}
.sec-deep h2,.sec-deep h3{color:#fff}
.sec-head{display:grid;gap:13px;max-width:62ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(27px,3.8vw,40px);font-weight:800;letter-spacing:-.032em}

/* chiffres : traitement display, sur papier clair juste après le noir */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.fig{display:grid;gap:12px;border-top:2px solid var(--sec);padding-top:18px}
.fig-n{
  font-family:var(--fdisp);font-weight:800;font-size:clamp(44px,6.4vw,76px);color:var(--ink);
  letter-spacing:-.05em;line-height:.92;font-variant-numeric:tabular-nums;
}
.fig-u{display:block;font-family:var(--fdisp);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec-ink);margin-top:9px}
.fig-l{font-size:15px;line-height:1.5;color:var(--muted);max-width:25ch}

/* piliers, vision */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.pillar{display:grid;gap:11px;border-top:2px solid var(--sec);padding-top:19px}
.pillar h3{font-size:19.5px;font-weight:700}
.pillar p{font-size:15.5px;line-height:1.6}

/* ------------------------------------------------- emplacements visuels */
/* Zones réservées aux captures produits. Volontairement balisées : il ne
   doit y avoir aucun doute sur le fait qu'il manque une image. */
.shot{
  aspect-ratio:16/9;max-width:100%;border:1.5px dashed var(--rule);border-radius:10px;
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in srgb, var(--pc,var(--sec)) 8%, transparent) 13px 26px),
    var(--surface);
  display:grid;place-content:center;justify-items:center;text-align:center;padding:22px;gap:7px;
}
.shot b{font-family:var(--fdisp);font-size:14px;font-weight:700;color:var(--ink)}
.shot span{font-size:13px;color:var(--muted);max-width:36ch;line-height:1.45}

/* ---------------------------------------------------------- produits */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.teaser{
  background:var(--surface);border:1px solid var(--rule);
  border-top:3px solid var(--pc,var(--sec));border-radius:0 0 9px 9px;
  padding:24px 22px 26px;display:grid;gap:10px;align-content:start;
}
.teaser:hover{box-shadow:var(--shadow)}
.teaser h3{font-size:18.5px;font-weight:700}
.teaser p{font-size:15px;line-height:1.55}
.teaser-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.teaser-links a{font-family:var(--fdisp);font-size:13.5px;font-weight:700;color:var(--pc,var(--sec-ink));text-decoration:none}
.teaser-links a:hover{color:var(--pc,var(--sec-ink));text-decoration:underline}

.prod{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:44px;padding-block:52px;border-top:1px solid var(--rule);align-items:start}
.prod-l{display:grid;gap:14px}
.prod h3{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.035em}
.prod .acc{font-family:var(--fdisp);font-size:17px;font-weight:600;color:var(--pc,var(--sec-ink));line-height:1.32}
.prod p{font-size:16px;max-width:50ch}
.prod-logo{height:34px;width:auto;display:block;justify-self:start}
.prod-rule{height:4px;width:46px;border-radius:2px;background:var(--pc,var(--sec));justify-self:start}
.prod a.ext{
  font-family:var(--fdisp);font-weight:700;font-size:14.5px;justify-self:start;
  color:var(--pc,var(--sec-ink));text-decoration:none;margin-top:4px;
  border:1.5px solid var(--pc,var(--sec));border-radius:5px;padding:11px 19px;
  display:inline-flex;align-items:baseline;gap:9px;
}
.prod a.ext:hover{background:var(--pc,var(--sec));color:#fff}
.prod a.ext .dom{font-weight:600;font-size:13px;opacity:.75}
.prod-r{display:grid;gap:20px}
.fnlist{display:flex;flex-wrap:wrap;gap:7px}
.fn{font-size:13.5px;color:var(--body);background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--pc,var(--sec));border-radius:4px;padding:5px 11px}
.fn-h{font-family:var(--fdisp);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.todo{
  display:inline-block;font-family:var(--fdisp);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#8A5A12;background:#FBEFD9;
  border:1px solid #E9CE9C;border-radius:4px;padding:4px 10px;justify-self:start;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .todo{color:#F0C477;background:#2E2211;border-color:#5C421C}}
:root[data-theme="dark"] .todo{color:#F0C477;background:#2E2211;border-color:#5C421C}

/* parcours projet */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;padding-block:26px;border-top:1px solid var(--rule-soft);align-items:start}
.step:first-child{border-top:1px solid var(--rule)}
.step-n{font-family:var(--fdisp);font-weight:800;font-size:15px;color:var(--sec);border:1.5px solid var(--sec);border-radius:99px;width:40px;height:40px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.step h4{font-size:18.5px;font-weight:700;margin-bottom:6px;font-family:var(--fdisp);color:var(--ink)}
.step p{font-size:15.5px;max-width:60ch}

.bul{display:grid;gap:10px}
.bul li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:15.5px;align-items:start}
.bul li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--sec);margin-top:9px;margin-left:4px}

/* panneau teinté : c'est là que la couleur secondaire se voit le plus */
.panel{
  background:var(--sec-soft);border:1px solid color-mix(in srgb, var(--sec) 22%, transparent);
  border-left:5px solid var(--sec);border-radius:0 10px 10px 0;padding:40px 36px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px;align-items:center;
}
.panel h3{font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.panel p{color:var(--body);font-size:16.5px;margin-top:11px;max-width:44ch}
.panel .eyebrow{color:var(--sec-ink)}

/* panneau sombre, pour les blocs qui doivent trancher */
.panel-deep{background:var(--deep);border:0;border-radius:10px;color:var(--on-deep)}
.panel-deep h3{color:#fff}
.panel-deep p{color:var(--on-deep-dim)}
.panel-deep .bul li{color:var(--on-deep)}
.panel-deep .bul li::before{background:var(--sec-on-deep)}

/* témoignages */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.quote{border-left:3px solid var(--pc,var(--sec));padding-left:24px;display:grid;gap:14px}
.quote p{font-size:17px;line-height:1.58;color:var(--ink)}
.quote footer{font-family:var(--fdisp);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.quote footer em{font-style:normal;color:var(--pc,var(--sec-ink))}

/* conseil */
.manif{border-left:4px solid var(--sec);padding:6px 0 6px 28px;display:grid;gap:13px;max-width:66ch}
.manif h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.032em}
.manif p{font-size:18px;line-height:1.64;color:var(--ink)}
.qr{display:grid;gap:15px;max-width:62ch}
.qr .q{font-family:var(--fdisp);font-size:clamp(20px,2.7vw,27px);font-weight:700;color:var(--ink);line-height:1.26;text-wrap:balance}
.qr .r{font-size:16.5px;line-height:1.62}
.missions{display:grid;gap:0}
.mission{display:grid;grid-template-columns:84px minmax(0,1fr);gap:28px;padding-block:30px;border-top:1px solid var(--rule-soft);align-items:start}
.mission:first-child{border-top:1px solid var(--rule)}
.mission-n{font-family:var(--fdisp);font-weight:900;font-size:46px;line-height:.9;color:var(--sec);opacity:.28;font-variant-numeric:tabular-nums;letter-spacing:-.06em}
.mission h3{font-size:21px;font-weight:700;margin-bottom:8px}
.mission p{font-size:16px;max-width:60ch}
/* ===================================================== PAGE CONSEIL ====
   Deux colonnes texte/illustration, scènes au trait, échelle modeste.
   Les dessins partagent une seule épaisseur de trait : c'est ce qui les
   fait tenir ensemble comme une famille. */
.duo-illu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.duo-illu .manif{border-left:0;padding:0;max-width:52ch}
.illu{justify-self:center;width:100%;max-width:520px}
.scene{width:100%;height:auto;display:block;overflow:visible}
.scene .t path,.scene .t circle{fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.scene .a path,.scene .a circle{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene .a circle{fill:var(--acc);stroke:none}
.scene .t-fin{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;opacity:.4}
/* Illustration pleine largeur de la page Conseil */
.illu-large{margin:44px 0 0;width:100%;overflow-x:auto}
.illu-large figcaption{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:70ch}
.sc2{display:block;width:100%;max-width:900px;min-width:620px;height:auto;margin:0 auto;overflow:visible}
.sc2 .t{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.84}
.sc2 .t2{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.40}
.sc2 .t3{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.22}
.sc2 .a{fill:none;stroke:var(--acc);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.sc2 .a2{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.sc2 .wf{fill:var(--surface);stroke:none}
.sc2 .inkf{fill:var(--ink);stroke:none}
.sc2 .poin{stroke-dasharray:7 6}
.sc2 .poin2{stroke-dasharray:3 5}
.sc2 text{font-family:var(--fdisp);font-weight:700;font-size:13px;fill:var(--muted);letter-spacing:.09em}
.sc2 .ta{fill:var(--acc-ink)}
.sc2 .mini{font-family:var(--fbody);font-size:11.5px;font-weight:400;fill:var(--muted);letter-spacing:0}
/* « Trois activités » : l'intitulé à gauche, la scène à droite */
.duo-chaine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:50px;align-items:center;margin-bottom:10px}
.duo-chaine .sec-head{margin-bottom:0;max-width:46ch}
.illu-chaine{margin:0;min-width:0}
.illu-chaine figcaption{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:58ch}
.sc2.etroit{min-width:0;max-width:660px}
.sc2 .sol{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;opacity:.35}
.sc2 .lbl-a{font-family:var(--fdisp);font-weight:700;font-size:16px;fill:var(--acc-ink);letter-spacing:.02em}
@media (max-width:1000px){.duo-chaine{grid-template-columns:1fr;gap:28px}}

/* Les trois activités : pictogramme en disque plutôt que gros chiffre pâle */
.mission{grid-template-columns:96px minmax(0,1fr);gap:26px;align-items:start}
.pastille-l{width:96px;height:96px;margin-bottom:0}
.pastille-l .picto{width:66px;height:58px}
.m-k{display:block;font-family:var(--fdisp);font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--muted);margin-bottom:7px}

/* Schéma « Avec ou sans iShare » */
.schema{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:30px 28px 22px;overflow-x:auto}
.schema svg{display:block;width:100%;min-width:560px;height:auto}
.schema .t path{fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.schema .t.poin path{stroke-dasharray:9 8;opacity:.6}
.schema .a path{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.schema text{font-family:var(--fbody);fill:var(--ink)}
.schema .s-t{font-family:var(--fdisp);font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;fill:var(--muted)}
.schema .s-t.s-a{fill:var(--acc-ink)}
.schema .s-b{font-family:var(--fdisp);font-size:14.5px;font-weight:700}
.schema .s-n{font-size:12.5px;fill:var(--muted)}
.schema .s-n.s-a{fill:var(--acc-ink);font-style:italic;font-weight:600}  /* 600 : c'est la seule italique réellement fournie */
.schema figcaption{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:70ch}

/* Engagements : un soulignement tracé sous chaque intitulé */
.valeur h3{position:relative;display:inline-block;justify-self:start;padding-bottom:9px}  /* justify-self : sans lui la grille étire le titre, et son soulignement, sur toute la colonne */
.sous{position:absolute;left:0;bottom:0;width:72%;height:8px;pointer-events:none;overflow:visible}
.sous path{fill:none;stroke:var(--acc);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.7}

/* La phrase qui clôt la chaîne : c'est l'argument, pas un commentaire */
.chaine-note{
  margin-top:32px;border-left:3px solid var(--sec);padding:5px 0 5px 22px;
  font-size:17px;line-height:1.6;color:var(--ink);max-width:60ch;
}
.valeurs{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 44px}
.valeur{display:grid;gap:9px}  /* plus de filet au-dessus : le soulignement dessiné suffit */
.valeur h3{font-size:19px;font-weight:700}
.valeur p{font-size:15.5px;line-height:1.6}
.jalons{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.jalon{display:grid;gap:10px}
.jalon dt{font-family:var(--fdisp);font-weight:800;font-size:clamp(32px,4.2vw,46px);color:var(--sec-on-deep);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.jalon dd{margin:0;font-size:15px;line-height:1.5;color:var(--on-deep-dim);max-width:27ch}
.perim{display:flex;flex-wrap:wrap;gap:10px}
.perim li{font-family:var(--fdisp);font-size:14.5px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:99px;padding:10px 19px}

/* société */
.reperes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:9px;overflow:hidden}
.rep{background:var(--surface);padding:22px 20px 24px}
.rep dt{font-family:var(--fdisp);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rep dd{margin:8px 0 0;font-family:var(--fdisp);font-size:17.5px;font-weight:700;color:var(--ink);line-height:1.28}
.frise{display:grid;gap:0}
.jalon-h{display:grid;grid-template-columns:136px minmax(0,1fr);gap:30px;padding-block:28px;border-top:1px solid var(--rule-soft);align-items:start}
.jalon-h:first-child{border-top:1px solid var(--rule)}
.jalon-h .an{font-family:var(--fdisp);font-weight:800;font-size:20px;color:var(--sec-ink);letter-spacing:-.025em;font-variant-numeric:tabular-nums;border-left:3px solid var(--sec);padding-left:15px;line-height:1.22}
.jalon-h h3{font-size:19.5px;font-weight:700;margin-bottom:7px}
.jalon-h p{font-size:16px;max-width:62ch}
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
.metier{background:var(--surface);border:1px solid var(--rule);border-radius:9px;padding:28px 26px;display:grid;gap:11px;align-content:start}
.metier h3{font-size:20.5px;font-weight:700}
.metier p{font-size:15.5px;line-height:1.6}
.metier a{font-family:var(--fdisp);font-weight:700;font-size:14.5px;text-decoration:none;justify-self:start;margin-top:2px}
.metier a:hover{color:var(--sec-ink);text-decoration:underline}
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.person{background:var(--surface);border:1px solid var(--rule);border-radius:9px;padding:30px 28px;display:grid;gap:12px;align-content:start}
.person h3{font-size:20.5px;font-weight:700}
.person .role{font-family:var(--fdisp);font-size:14px;font-weight:600;color:var(--sec-ink);margin-top:-6px}
.person p{font-size:15px;line-height:1.6}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:48px;align-items:start}
form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:6px}
label{font-family:var(--fdisp);font-size:13px;font-weight:600;color:var(--ink)}
label .req{color:var(--sec)}
input,select,textarea{font-family:var(--fbody);font-size:15.5px;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:12px 13px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sec);outline-offset:1px;border-color:var(--sec)}
textarea{min-height:135px;resize:vertical;line-height:1.55}
.hint{font-size:13.5px;color:var(--muted);line-height:1.5}
.aside{background:var(--wash);border:1px solid var(--rule);border-radius:9px;padding:28px 26px;display:grid;gap:22px}
.aside h3{font-size:19px;font-weight:700}
.aside dt{font-family:var(--fdisp);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.aside dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.aside dd a{font-weight:600;text-decoration:none}
.aside .grp{display:grid;gap:17px}

/* bande d'appel */
.ctaband{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.ctaband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 140% at 88% 50%, color-mix(in srgb, var(--sec) 30%, transparent) 0%, transparent 60%);
}
.ctaband-in{position:relative;padding-block:60px;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.ctaband h2{color:#fff;font-size:clamp(25px,3.4vw,34px);font-weight:800;letter-spacing:-.032em;max-width:21ch}
.ctaband p{color:var(--on-deep-dim);margin-top:9px;font-size:16.5px;max-width:44ch}

@media (max-width:1000px){
  .hero-top{grid-template-columns:1fr;gap:26px}
  .offre{grid-template-columns:1fr;gap:28px;margin-bottom:0}
  .brique{margin-right:0}
  /* Le quinconce et le fil ondulé n'ont plus de sens une fois empilés. */
  .chain{grid-template-columns:1fr;gap:26px;padding-top:0}
  .link{padding:0;display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:start}
  .link:nth-child(2),.link:nth-child(3){transform:none}
  .link .pastille,.link:nth-child(2) .pastille,.link:nth-child(3) .pastille{width:88px;height:88px;margin-bottom:0}
  .link .picto,.link:nth-child(2) .picto,.link:nth-child(3) .picto{width:60px;height:53px}
  .link .k,.link h4,.link p{grid-column:2}
  .link .k{margin-top:4px}
  .link p{max-width:none}
  .onde{display:none}
  .figs{grid-template-columns:repeat(2,1fr);gap:28px}
  .cols3,.teasers,.people,.two,.quotes,.valeurs{grid-template-columns:1fr}
  .duo-illu{grid-template-columns:1fr;gap:36px}
  .illu{max-width:440px}
  .mission{grid-template-columns:76px minmax(0,1fr);gap:20px}
  .pastille-l{width:76px;height:76px}
  .pastille-l .picto{width:52px;height:46px}
  .jalons{grid-template-columns:1fr;gap:22px}
  .prod{grid-template-columns:1fr;gap:28px}
  .panel{grid-template-columns:1fr;gap:26px}
  .contact-grid{grid-template-columns:1fr}
  .reperes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  .mark{padding-block:10px 4px}
  .nav{order:3;width:100%;justify-content:space-between;gap:0;border-top:1px solid var(--rule-soft);padding-top:5px}
  .nav a{padding:8px 5px;font-size:13px}
  .nav a[aria-current="page"]::after{left:5px;right:5px}
  /* Mobile : le bloc reste court sans rien retirer — boutons côte à côte,
     interlignes resserrés, disques réduits. */
  .hero-in{padding-block:36px 40px;gap:26px}
  .hero-top{gap:22px}
  .hero-l,.hero-r{gap:15px}
  .hero h1{font-size:clamp(28px,8vw,38px);max-width:none}
  .claim{padding:22px 22px 24px;gap:15px}
  .hero .sub{font-size:15.5px;line-height:1.55}
  .slogan{font-size:19px}
  .souligne{width:72%}
  .usages{gap:8px}
  .usage{font-size:13px;padding:9px 18px}
  .offre{gap:20px}
  .brique{padding:15px 16px 17px}
  .brique p{font-size:13.5px}
  .chain{gap:22px}
  .link{grid-template-columns:72px minmax(0,1fr);gap:15px}
  .link .pastille,.link:nth-child(2) .pastille,.link:nth-child(3) .pastille{width:72px;height:72px}
  .link .picto,.link:nth-child(2) .picto,.link:nth-child(3) .picto{width:50px;height:44px}
  .link h4{font-size:16.5px;margin-top:5px}
  .link p{font-size:13.5px;margin-top:4px}
  .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .btns .btn{width:auto;padding:12px 8px;font-size:13.5px}
  .phead-in{padding-block:44px 38px;gap:14px}
  .phead-photo .phead-in{padding-block:54px 48px}
  .phead-photo .img{background-position:62% center}
  .sec{padding-block:54px}
  .sec-head{margin-bottom:32px}
  .figs{grid-template-columns:1fr;gap:26px}
  .row2{grid-template-columns:1fr}
  .reperes{grid-template-columns:1fr}
  .panel{padding:28px 22px;border-radius:0 8px 8px 0}
  .btn{width:100%;text-align:center}
  .step{grid-template-columns:42px minmax(0,1fr);gap:16px}
  .step-n{width:34px;height:34px;font-size:13px}
  .mission{grid-template-columns:50px minmax(0,1fr);gap:16px}
  .mission-n{font-size:32px}
  .manif{padding-left:18px}
  .jalon-h{grid-template-columns:1fr;gap:12px}
  .jalon-h .an{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a,.btn,.teaser{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
:focus-visible{outline:2px solid var(--sec);outline-offset:2px;border-radius:3px}

/* =====================================================================
   Raccords avec Blocksy
   Le thème parent impose ses polices et ses largeurs de contenu ; on
   reprend la main dessus sans toucher à son en-tête ni à son pied.
   ===================================================================== */
body,
.entry-content,
.ct-container,
input, select, textarea, button{ font-family: var(--fbody); }

h1, h2, h3, h4, h5, h6,
.entry-title{
  font-family: var(--fdisp);
  color: var(--ink);
  letter-spacing: -.018em;
}

body{ background: var(--paper); color: var(--body); }

/* =====================================================================
   Raccords Blocksy — relevés dans le code source de Blocksy 2.1.57
   ===================================================================== */

/* Fond du site : Blocksy l'impose sur body via ses styles dynamiques. */
body{ background-color: var(--paper) !important; }

/* ---- Sections bord à bord ---------------------------------------------
   Blocksy pose « is-layout-constrained » sur .entry-content ; WordPress
   limite alors chaque bloc à la largeur du conteneur, avec des marges
   latérales en !important. On libère nos sections : 100 % de l'article
   (qui, en structure « Largeur normale » + style « Large », occupe déjà
   toute la largeur de l'écran), sans marge, sans espace entre elles. */
.entry-content > :is(.hero, .trust, .phead, .sec, .sec-alt, .sec-deep, .ctaband){
  /* Blocksy ajoute sous chaque titre (.3em + 10px) et sous chaque
     paragraphe var(--theme-content-spacing). Il neutralise lui-même ces
     variables dans ses composants : on fait pareil. Nos marges voulues,
     écrites en dur, ne sont pas touchées. */
  --theme-content-spacing: 0;
  --has-theme-content-spacing: 0;
  --theme-list-indent: 0;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-block: 0 !important;
}

/* ---- En-tête ------------------------------------------------------------ */
body[data-header] .ct-header [data-row*="middle"]{
  background-color: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

/* Liens du menu. Blocksy passe sa typographie par des variables
   (--theme-font-size, --theme-text-transform…) : on les redéfinit. Par
   défaut elles valent 12 px, gras 700, CAPITALES. */
body[data-header] .ct-header [data-id="menu"] > ul > li > a{
  --theme-font-family: var(--fdisp);
  --theme-font-size: 14px;
  --theme-font-weight: 600;
  --theme-text-transform: none;
  --theme-letter-spacing: 0;
  --theme-line-height: 1.3;
  --theme-link-initial-color: var(--body);
  --theme-link-hover-color: var(--ink);
  --theme-link-active-color: var(--ink);
  font-family: var(--fdisp);
  text-transform: none;
  position: relative;
  isolation: isolate;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* Survol et page active, sans pseudo-éléments (Blocksy les neutralise).
   Le lien est ramené à 36 px de haut, centré dans la rangée, pour que la
   pastille de survol ait la taille de la maquette. */
body[data-header] .ct-header [data-id="menu"] > ul > li{
  display: flex;
  align-items: center;
}
body[data-header] .ct-header [data-id="menu"] > ul > li > a{
  height: 36px !important;
  display: flex !important;
  align-items: center;
  border-radius: 5px;
  transition: background-color .15s ease, color .15s ease;
}
body[data-header] .ct-header [data-id="menu"] > ul > li:hover > a{
  background-color: var(--wash) !important;
}
body[data-header] .ct-header [data-id="menu"] > ul > li:is([class*="current-menu-"], [class*="current_page"]) > a{
  color: var(--ink) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--sec) !important;
  text-decoration-thickness: 2.5px !important;
  text-underline-offset: 9px !important;
}

/* Bouton d'en-tête : couleur secondaire EKILOG au lieu du bleu Blocksy */
body[data-header] .ct-header [data-id="button"]{
  --theme-button-background-initial-color: var(--sec);
  --theme-button-background-hover-color: var(--sec-ink);
  --theme-button-text-initial-color: #fff;
  --theme-button-text-hover-color: #fff;
}
body[data-header] .ct-header [data-id="button"] [class*="ct-button"]{
  --theme-button-font-family: var(--fdisp);
  --theme-button-font-weight: 700;
  --theme-button-font-size: 14px;
  --theme-button-text-transform: none;
  --theme-button-letter-spacing: 0;
  font-family: var(--fdisp);
  font-weight: 700;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 5px;
  padding-left: 18px;
  padding-right: 18px;
}

/* Étapes du héro sur tablette et mobile : la pastille couvre les trois
   lignes de texte, sinon un vide de sa hauteur s'ouvre sous l'étape. */
@media (max-width:1000px){
  .link .pastille{ grid-row: 1 / span 3; }
  .link .k, .link h4, .link p{ margin-top: 0; }
  .link .k{ margin-top: 4px; }
}

/* En-têtes de page : la couleur avait été figée en dur à l'export des pages
   (bleu par défaut). On la rend à la palette, sans avoir à recoller le HTML. */
.entry-content .phead[style*="2287C8" i]{ --pc: var(--sec) !important; }
.entry-content .phead[style*="15436B" i]{ --pc: var(--brand) !important; }

/* ---- Pied de page ------------------------------------------------------ */
body .ct-footer{
  background-color: var(--paper) !important;
  border-top: 1px solid var(--rule);
  --theme-link-initial-color: var(--body);
  --theme-link-hover-color: var(--sec-ink);
  --theme-text-color: var(--muted);
}
body .ct-footer [data-row]{ background-color: transparent !important; }
body .ct-footer [data-row*="bottom"]{ border-top: 1px solid var(--rule-soft); }

body .ct-footer .ct-widget :is(h1, h2, h3, h4, h5, h6){
  --theme-font-family: var(--fdisp);
  --theme-font-size: 11.5px;
  --theme-font-weight: 700;
  --theme-letter-spacing: .12em;
  --theme-text-transform: uppercase;
  --theme-line-height: 1.4;
  font-family: var(--fdisp) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 0 0 12px !important;
}
body .ct-footer .ct-widget p{
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
  max-width: 38ch; margin: 12px 0 0;
}
body .ct-footer .ct-widget ul{ list-style: none; margin: 0; padding: 0; }
body .ct-footer .ct-widget li{ font-size: 14.5px; line-height: 1.5; margin: 0 0 8px; color: var(--body); }
body .ct-footer .ct-widget a{ color: var(--body); text-decoration: none; }
body .ct-footer .ct-widget a:hover{ color: var(--sec-ink); text-decoration: underline; }
body .ct-footer .ct-widget img{ height: 38px; width: auto; display: block; }
body .ct-footer .ct-footer-copyright{ font-size: 13px; color: var(--muted); }
body .ct-footer .ct-footer-copyright a{ color: var(--muted); text-decoration: none; }
body .ct-footer .ct-footer-copyright a:hover{ color: var(--sec-ink); }

/* « Avec ou sans iShare » : le texte à gauche, le schéma réduit à droite */
.duo-perim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.duo-perim .sec-head{margin-bottom:0}
.duo-perim + .perim{margin-top:36px}
.schema-compact{padding:20px 18px 14px}
.schema-compact svg{min-width:0}
/* Le schéma est réduit d'un quart : on grossit ses textes d'autant pour
   qu'ils restent lisibles une fois la figure à l'échelle de la colonne. */
.schema-compact .s-t{font-size:15px}
.schema-compact .s-b{font-size:20px}
.schema-compact .s-n{font-size:16.5px}
@media (max-width:1000px){
  .duo-perim{grid-template-columns:1fr;gap:32px}
}

/* « Trois activités » en trois colonnes : même lecture que les trois
   moments de l'illustration au-dessus, et trois fois moins de hauteur. */
.missions{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;border-top:1px solid var(--rule)}
.missions .mission{grid-template-columns:1fr;gap:0;align-content:start;padding-block:30px 6px;border-top:0 !important}
.missions .mission .pastille-l{width:68px;height:68px;margin-bottom:18px}
.missions .mission .pastille-l .picto{width:46px;height:40px}
.missions .mission h3{font-size:19px;margin-bottom:8px}
.missions .mission p{font-size:15.5px;max-width:none}
@media (max-width:1000px){
  .missions{grid-template-columns:1fr;border-top:0}
  .missions .mission{grid-template-columns:64px minmax(0,1fr);gap:18px;padding-block:24px;border-top:1px solid var(--rule-soft) !important}
  .missions .mission:first-child{border-top:1px solid var(--rule) !important}
  .missions .mission .pastille-l{width:64px;height:64px;margin-bottom:0}
}

/* Manifeste : le texte à gauche, le dessin du patron à droite. Le dessin
   rapetisse : ses légendes grossissent d'autant pour rester lisibles. */
.duo-manif{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.duo-manif .manif{max-width:none}
.duo-manif .illu-large{margin:0;overflow:visible}
.duo-manif .sc2{min-width:0;max-width:none}
.duo-manif .sc2 text{font-size:16px}
.duo-manif .sc2 .mini{font-size:15px}
@media (max-width:1000px){
  .duo-manif{grid-template-columns:1fr;gap:28px}
  .duo-manif .illu-large{overflow-x:auto}
  .duo-manif .sc2{min-width:560px}
}

/* Page Société : mosaïque de l'équipe, une seule image pleine largeur */
.equipe{margin:0}
.equipe img{display:block;width:100%;height:auto}

/* Page Solutions : logos, captures, et déroulé de projet en colonnes */
.prod .prod-logo{height:58px}
.prod-shot{margin:0 0 24px}
.prod-shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--rule);box-shadow:var(--shadow)}
.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--rule)}
.steps .step{grid-template-columns:1fr;gap:14px;align-content:start;padding-block:28px 6px;border-top:0 !important}
.steps .step p{max-width:none;font-size:15.5px}
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr;border-top:0}
  .steps .step{grid-template-columns:42px minmax(0,1fr);gap:16px;padding-block:22px;border-top:1px solid var(--rule-soft) !important}
  .steps .step:first-child{border-top:1px solid var(--rule) !important}
}

/* Accueil, « La gamme iShare » : le texte à gauche, la capture à droite */
.duo-gamme{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.duo-gamme .sec-head{margin-bottom:0}
.duo-gamme .prod-shot{margin:0}
@media (max-width:1000px){.duo-gamme{grid-template-columns:1fr;gap:28px}}

/* Survol des liens : Blocksy impose a:hover{color:var(--theme-link-hover-color)},
   un bleu par défaut. Dans nos sections, on rend ces variables à la palette
   EKILOG ; les boutons pleins, eux, fixent leur texte en blanc (plus haut). */
.entry-content > :is(.hero, .trust, .phead, .sec, .sec-alt, .sec-deep, .ctaband){
  --theme-link-initial-color: var(--sec-ink);
  --theme-link-hover-color: var(--sec-ink);
}

/* Liens légaux du pied de page : l'élément Copyright de Blocksy n'accepte
   pas de HTML ; les liens passent par un petit menu dans la rangée du bas. */
body .ct-footer nav[class*="menu"] .ct-menu-link,
body .ct-footer nav[class*="menu"] a{
  --theme-font-family: var(--fbody);
  --theme-font-size: 13px;
  --theme-font-weight: 400;
  --theme-text-transform: none;
  --theme-letter-spacing: 0;
  --theme-link-initial-color: var(--muted);
  --theme-link-hover-color: var(--sec-ink);
  font-family: var(--fbody) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--muted);
  text-decoration: none;
}
body .ct-footer nav[class*="menu"] a:hover{ color: var(--sec-ink); text-decoration: underline; }

/* Formulaire de contact (Fluent Forms) aux couleurs du site */
.fluentform .ff-el-input--label label{
  font-family: var(--fdisp); font-size: 13px; font-weight: 600; color: var(--ink);
}
.fluentform .ff-el-form-control{
  font-family: var(--fbody); font-size: 15.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 5px; padding: 11px 13px;
}
.fluentform .ff-el-form-control:focus{
  outline: 2px solid var(--sec); outline-offset: 1px; border-color: var(--sec);
}
.fluentform .ff-btn-submit{
  font-family: var(--fdisp); font-weight: 700; font-size: 15px;
  background: var(--sec); color: #fff;
  border: 0; border-radius: 99px; padding: 14px 28px; cursor: pointer;
}
.fluentform .ff-btn-submit:hover{ background: var(--sec-ink); }
.fluentform .ff-el-form-check label{
  font-family: var(--fbody); font-weight: 400; font-size: 14px; color: var(--muted);
}

/* Conteneur du formulaire Fluent Forms sur la page Contact : il occupe la
   colonne de gauche de .contact-grid, à la place du formulaire statique
   de la maquette. */
.ek-formulaire{ min-width:0; }
.ek-formulaire .fluentform{ margin:0; }
.ek-formulaire .ff-el-group{ margin-bottom:17px; }