/* ==========================================================================
   CEFOR Ingénieurs Conseils : feuille de style du site public
   Palette de la charte graphique : bleu foncé #002060 (ingénierie, expertise),
   bleu #00B0F0 (eau, résilience), vert #92D050 (agriculture, environnement).
   Les variantes « -texte » sont des teintes plus denses des mêmes couleurs, lisibles sur fond clair.
   ========================================================================== */

:root {
  --marine: #002060;
  --marine-2: #0B3A8A;
  --marine-sombre: #00174A;
  --bleu: #00B0F0;
  --bleu-texte: #0077B6;
  --bleu-pale: #DDF3FC;
  --bleu-clair: #8FDCF8;
  --vert: #92D050;
  --vert-texte: #3F7A10;
  --vert-pale: #EEF7E2;
  --ecume: #EEF7FD;
  --papier: #FFFFFF;
  --gris: #F5F8FB;
  --blanc: #FFFFFF;
  --encre: #0D1B3E;
  --encre-2: #4A5A78;
  --encre-3: #7B89A3;
  --ligne: #DCE6F1;
  --ligne-forte: #BCCDE0;

  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --texte: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --t-hero: clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
  --t-1: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  --t-2: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  --t-3: 1.3125rem;
  --t-corps: 1.0625rem;
  --t-petit: 0.9375rem;
  --t-mini: 0.8125rem;

  --espace: clamp(4.5rem, 9vw, 8rem);
  --gouttiere: clamp(20px, 5vw, 56px);
  --largeur: 1240px;
  --rayon: 16px;
  --nav-h: 76px;
  --transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texte);
  font-size: var(--t-corps);
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--bleu-texte); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 .5em; color: var(--marine); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.t-1 { font-size: var(--t-1); font-weight: 400; letter-spacing: -0.02em; max-width: 22ch; }
.t-2 { font-size: var(--t-2); font-weight: 500; }
.t-3 { font-size: var(--t-3); font-weight: 500; letter-spacing: -0.01em; }
.surtitre { display: flex; align-items: center; gap: .6rem; font-size: var(--t-petit); font-weight: 500; color: var(--vert-texte); margin: 0 0 .85rem; letter-spacing: .01em; }
.surtitre::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--vert); flex: none; }
.surtitre--clair { color: var(--bleu-clair); }
.evitement { position: absolute; left: -999px; top: 8px; background: var(--marine); color: #fff; padding: .6rem 1rem; z-index: 100; }
.evitement:focus { left: 8px; }

.ico { display: inline-flex; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: .45em; flex: none; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .85rem 1.45rem; border-radius: 999px;
  font-family: var(--texte); font-weight: 500; font-size: var(--t-petit); line-height: 1.2;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bouton:hover { transform: translateY(-1px); text-decoration: none; }
.bouton:active { transform: translateY(0); }
.bouton--plein { background: var(--marine); color: #fff; box-shadow: 0 10px 24px -12px rgba(0, 32, 96, .7); }
.bouton--plein:hover { background: var(--marine-2); }
.bouton--vert { background: var(--vert); color: var(--marine); font-weight: 600; box-shadow: 0 10px 24px -12px rgba(146, 208, 80, .8); }
.bouton--vert:hover { background: #A3DA68; }
.bouton--marine { background: var(--marine); color: #fff; font-weight: 500; box-shadow: 0 12px 28px -14px rgba(0, 32, 96, .6); }
.bouton--marine:hover { background: var(--marine-2); }
.bouton--contour { border-color: var(--marine); color: var(--marine); background: transparent; }
.bouton--contour:hover { background: var(--marine); color: #fff; }
.bouton--clair { background: #fff; color: var(--marine); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.bouton--clair:hover { background: var(--bleu-pale); }
.bouton--fantome { border-color: rgba(255, 255, 255, .45); color: #fff; background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bouton--fantome:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.lien { font-weight: 500; color: var(--bleu-texte); text-decoration: none; }
.lien:hover { text-decoration: underline; }
.lien--fleche .ico { margin: 0 0 0 .35em; transition: transform var(--transition); }
.lien--fleche:hover .ico { transform: translateX(4px); }
.lien--clair { color: var(--bleu-clair); }

/* --------------------------------------------------------------- navigation */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background var(--transition), box-shadow var(--transition), border-color var(--transition); border-bottom: 1px solid transparent; }
.nav__barre { display: flex; align-items: center; gap: 2rem; height: var(--nav-h); }
.nav__logo { display: block; width: 148px; flex: none; position: relative; }
.nav__logo img { width: 100%; height: auto; }
.nav__logo-blanc { position: absolute; inset: 0; opacity: 0; transition: opacity var(--transition); }
.nav__liens { margin-left: auto; }
.nav__liens ul { display: flex; gap: 1.6rem; list-style: none; }
.nav__liens a { font-size: var(--t-petit); font-weight: 500; color: var(--encre); text-decoration: none; padding: .35rem 0; position: relative; }
.nav__liens a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: currentColor; transition: right var(--transition); }
.nav__liens a:hover::after, .nav__liens a[aria-current="page"]::after { right: 0; }
.nav__cta { padding: .6rem 1.1rem; }
.nav__burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; color: var(--marine); cursor: pointer; border-radius: 50%; align-items: center; justify-content: center; }
.nav__burger svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav__burger svg:last-child { display: none; }
.nav__burger[aria-expanded="true"] svg:first-child { display: none; }
.nav__burger[aria-expanded="true"] svg:last-child { display: block; }
.nav__mobile { display: none; }

/* thème sombre : au-dessus du hero, avant défilement */
.nav[data-theme="dark"]:not(.est-defile) .nav__logo-couleur { opacity: 0; }
.nav[data-theme="dark"]:not(.est-defile) .nav__logo-blanc { opacity: 1; }
.nav[data-theme="dark"]:not(.est-defile) .nav__liens a { color: #fff; }
.nav[data-theme="dark"]:not(.est-defile) .nav__cta { border-color: rgba(255, 255, 255, .6); color: #fff; }
.nav[data-theme="dark"]:not(.est-defile) .nav__cta:hover { background: #fff; color: var(--marine); }
.nav[data-theme="dark"]:not(.est-defile) .nav__burger { color: #fff; }
.nav.est-defile, .nav[data-theme="light"] { background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: var(--ligne); }
.nav.est-defile { box-shadow: 0 10px 30px -20px rgba(0, 32, 96, .25); }
.nav.est-ouvert { background: var(--papier); }

@media (max-width: 900px) {
  .nav__liens, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__mobile { display: block; max-height: 0; overflow: hidden; transition: max-height 300ms ease; background: var(--papier); }
  .nav.est-ouvert .nav__mobile { max-height: 80vh; border-top: 1px solid var(--ligne); }
  .nav__mobile ul { list-style: none; padding: .5rem var(--gouttiere) 0; }
  .nav__mobile li a { display: block; padding: .9rem 0; font-family: var(--display); font-size: 1.35rem; color: var(--marine); text-decoration: none; border-bottom: 1px solid var(--ligne); }
  .nav__mobile-contact { padding: 1rem var(--gouttiere) 1.5rem; color: var(--encre-2); font-size: var(--t-petit); line-height: 1.9; }
  .nav[data-theme="dark"].est-ouvert .nav__logo-couleur { opacity: 1; }
  .nav[data-theme="dark"].est-ouvert .nav__logo-blanc { opacity: 0; }
  .nav[data-theme="dark"].est-ouvert .nav__burger { color: var(--marine); }
}

/* --------------------------------------------------------------- hero */
.hero { position: relative; min-height: min(100svh, 900px); display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--marine); isolation: isolate; }
.hero__fond { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(60% 55% at 86% 18%, rgba(0, 176, 240, .42), transparent 70%),
  radial-gradient(40% 40% at 8% 92%, rgba(146, 208, 80, .22), transparent 70%),
  url("../img/topo.svg") center / cover no-repeat,
  linear-gradient(160deg, #00174A 0%, var(--marine) 45%, #063486 100%); }
.hero__fond::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(0, 23, 74, .55)); }
.hero__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem 4rem; align-items: center; padding-top: calc(var(--nav-h) + clamp(3rem, 7vh, 5rem)); padding-bottom: clamp(3.5rem, 8vh, 6rem); }
.hero__surtitre { display: flex; align-items: center; gap: .6rem; font-size: var(--t-petit); font-weight: 500; color: var(--bleu-clair); margin-bottom: 1.5rem; opacity: 0; animation: apparaitre 800ms 200ms ease forwards; }
.hero__surtitre::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--vert); }
.hero__titre { font-family: var(--display); font-weight: 400; font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.025em; color: #fff; margin: 0 0 1.4rem; max-width: 13ch; }
.hero__titre .ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__titre .ligne span { display: block; transform: translateY(110%); animation: monter 1000ms cubic-bezier(.2, .8, .2, 1) forwards; }
.hero__titre .ligne--accent span { color: var(--bleu); }
.hero__titre .ligne:nth-child(1) span { animation-delay: 300ms; }
.hero__titre .ligne:nth-child(2) span { animation-delay: 420ms; }
.hero__titre .ligne:nth-child(3) span { animation-delay: 540ms; }
.hero__texte { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .84); max-width: 34rem; margin-bottom: 2rem; opacity: 0; animation: apparaitre 800ms 700ms ease forwards; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; opacity: 0; animation: apparaitre 800ms 850ms ease forwards; }
.hero__domaines { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); opacity: 0; animation: apparaitre 800ms 1000ms ease forwards; }
.hero__domaine a { display: inline-flex; align-items: center; gap: .55rem; color: rgba(255, 255, 255, .88); text-decoration: none; font-size: var(--t-petit); font-weight: 500; }
.hero__domaine a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.hero__domaine a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.hero__domaine--assainissement a::before { background: var(--bleu-clair); }
.hero__domaine--amenagement a::before { background: var(--vert); }
.hero__visuel { opacity: 0; transform: translateY(18px); transition: opacity 900ms 500ms ease, transform 900ms 500ms cubic-bezier(.2, .7, .2, 1); }
.hero__visuel.est-visible { opacity: 1; transform: none; }
/* panneau de verre : le plan d'ingénieur sur un fond translucide */
.verre { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 40px 90px -40px rgba(0, 10, 40, .8), inset 0 1px 0 rgba(255, 255, 255, .12); }
.hero__plan { margin: 0; padding: 1rem 1.25rem 1.25rem; }
.hero__plan-barre { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-mini); color: rgba(255, 255, 255, .62); padding-bottom: .9rem; margin-bottom: .5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); letter-spacing: .02em; }
.hero__plan-barre span:last-child { color: var(--vert); font-weight: 500; }
.hero__plan .plan { background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 24px 24px; border-radius: 10px; padding: 3%; }
.hero__plan figcaption { font-size: var(--t-petit); color: rgba(255, 255, 255, .7); margin-top: .9rem; line-height: 1.5; }
@keyframes monter { to { transform: translateY(0); } }
@keyframes apparaitre { to { opacity: 1; } }

/* --------------------------------------------------------------- sections communes */
section { position: relative; }
.bloc { padding-block: var(--espace); }
.bloc--ecume { background: var(--ecume); }
.bloc--marine { background: var(--marine); color: rgba(255, 255, 255, .86); }
.bloc--vert-pale { background: var(--vert-pale); }
.bloc--marine h1, .bloc--marine h2, .bloc--marine h3 { color: #fff; }
.section__tete { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__tete--ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; }
.section__tete-texte { color: var(--encre-2); max-width: 34rem; margin: 0; }
.section__pied { margin-top: 2.5rem; }
.deux-colonnes { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem 5rem; align-items: start; }
.deux-colonnes > div:first-child p { color: var(--encre-2); }
.liste-coches { list-style: none; display: grid; gap: .55rem; }
.liste-coches li { display: flex; align-items: flex-start; gap: .1rem; color: var(--encre-2); }
.liste-coches .ico { color: var(--vert-texte); margin-top: .22em; }
.liste-coches--clair li { color: rgba(255, 255, 255, .85); }
.liste-coches--clair .ico { color: var(--vert); }

/* --------------------------------------------------------------- intro */
.intro { padding: var(--espace) 0; background: var(--papier); }
.intro__grille { display: grid; grid-template-columns: 6fr 6fr; gap: 2.5rem 5rem; align-items: start; }
.intro__texte p { font-size: 1.125rem; color: var(--encre-2); margin-bottom: 1.25rem; }

/* --------------------------------------------------------------- domaines (plans d'ingénieur) */
.domaines { padding-block: var(--espace); background: var(--ecume); }
.domaines__liste { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.domaine { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.domaine:nth-child(even) .domaine__plan { order: 2; }
.domaine { --panneau: var(--marine); --trait: var(--bleu-clair); --eau: var(--bleu); --accent: var(--bleu-texte); }
.domaine--assainissement { --panneau: #0A4B8F; --trait: #D4ECFB; --eau: #8FE3FF; --accent: var(--marine-2); }
.domaine--amenagement { --panneau: #2F6A12; --trait: #D9F0BF; --eau: #BCE68A; --accent: var(--vert-texte); }
.domaine__plan { background: var(--panneau); border-radius: var(--rayon); aspect-ratio: 3 / 2; padding: 6%;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 28px 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -40px rgba(0, 32, 96, .55); }
.plan { width: 100%; height: 100%; font-family: var(--texte); font-size: 12px; }
.plan path, .plan circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan__trait path, .plan__trait circle { stroke: var(--trait, var(--bleu-clair)); stroke-width: 1.6; }
.plan__trait .plan__eau { stroke: var(--eau, var(--bleu)); }
.plan__trait .plan__pluie { stroke: var(--eau, var(--bleu)); stroke-width: 1.2; }
.plan__cote path { stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
.plan__grille path { stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.plan__texte text { fill: rgba(255, 255, 255, .78); font-size: 12px; letter-spacing: .02em; }
.plan path, .plan circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1500ms cubic-bezier(.3, .6, .2, 1); }
.plan .plan__cote path { transition-delay: 1000ms; }
.plan__texte { opacity: 0; transition: opacity 600ms 1400ms ease; }
.est-visible .plan path, .est-visible .plan circle { stroke-dashoffset: 0; }
.est-visible .plan__trait .plan__pointille { stroke-dasharray: .04 .03; }
.est-visible .plan__texte { opacity: 1; }
.domaine__accroche { font-family: var(--display); font-size: 1.25rem; color: var(--accent, var(--bleu-texte)); font-weight: 400; margin-bottom: .75rem; }
.domaine__texte > p { color: var(--encre-2); }
.domaine__texte .liste-coches { margin-top: 1.25rem; }

/* --------------------------------------------------------------- services */
.services { padding-block: var(--espace); background: var(--papier); border-top: 1px solid var(--ligne); }
.services__grille { display: grid; grid-template-columns: 4fr 8fr; gap: 3rem 5rem; align-items: start; }
.services__intro { position: sticky; top: calc(var(--nav-h) + 2rem); }
.services__intro p { color: var(--encre-2); margin-bottom: 1.5rem; }
.services__liste { list-style: none; border-top: 1px solid var(--ligne); }
.service { padding: 1.75rem 0 1.75rem 4rem; border-bottom: 1px solid var(--ligne); display: grid; grid-template-columns: 1fr; gap: .4rem; position: relative; }
.service__numero { position: absolute; left: 0; top: 1.9rem; font-family: var(--display); font-weight: 500; font-size: 1rem; color: var(--bleu-texte); letter-spacing: .04em; }
.service__numero::after { content: ""; display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--vert); margin-top: .5rem; }
.service h3 { margin: 0; }
.service > p { color: var(--encre-2); margin: 0; max-width: 60ch; }
.service__livrables { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.service__livrables span { font-size: var(--t-mini); padding: .3rem .7rem; border-radius: 999px; background: var(--bleu-pale); color: var(--marine); }

/* --------------------------------------------------------------- fiches formation */
.formations { padding-block: var(--espace); background: var(--vert-pale); }
.fiches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.fiche { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; grid-template-columns: 1fr minmax(150px, 180px); gap: 1.5rem; transition: border-color var(--transition), box-shadow var(--transition); }
.fiche:hover { border-color: var(--ligne-forte); box-shadow: 0 24px 50px -36px rgba(0, 32, 96, .45); }
.fiche__domaine { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--t-mini); font-weight: 500; color: var(--bleu-texte); margin-bottom: .6rem; }
.fiche__domaine::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); }
.fiche__domaine--assainissement { color: var(--marine-2); } .fiche__domaine--assainissement::before { background: var(--marine-2); }
.fiche__domaine--amenagement { color: var(--vert-texte); } .fiche__domaine--amenagement::before { background: var(--vert); }
.fiche__domaine--transversal { color: var(--encre-2); } .fiche__domaine--transversal::before { background: var(--encre-3); }
.fiche__titre { font-size: 1.35rem; font-weight: 500; margin-bottom: .5rem; }
.fiche__titre a { color: var(--marine); text-decoration: none; }
.fiche__titre a:hover { color: var(--bleu-texte); }
.fiche__resume { color: var(--encre-2); font-size: var(--t-petit); margin-bottom: 1rem; }
.fiche__infos { list-style: none; display: grid; gap: .35rem; font-size: var(--t-mini); color: var(--encre-2); }
.fiche__infos .ico { color: var(--bleu-texte); }
.fiche__cote { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; border-left: 1px solid var(--ligne); padding-left: 1.5rem; }
.fiche__prix { margin: 0 0 auto; }
.fiche__prix span { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 500; color: var(--marine); letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; }
.fiche__prix small { display: block; font-size: var(--t-mini); color: var(--encre-3); margin-top: .2rem; }
.fiche__cote .bouton { padding: .7rem 1.15rem; }
.fiche__cote .lien { font-size: var(--t-petit); }

/* --------------------------------------------------------------- logiciels */
.logiciels { padding-block: var(--espace); background: var(--marine); color: rgba(255, 255, 255, .86); overflow: hidden; }
.logiciels::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(50% 50% at 80% 40%, rgba(0, 176, 240, .35), transparent 70%),
  radial-gradient(30% 40% at 5% 100%, rgba(146, 208, 80, .18), transparent 70%),
  linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px; pointer-events: none; }
.logiciels .conteneur { position: relative; }
.logiciels h2 { color: #fff; }
.logiciels__grille { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem 4rem; align-items: center; }
.logiciels__accroche { font-family: var(--display); font-size: 1.3rem; font-weight: 400; color: var(--bleu); }
.logiciels__texte > p { color: rgba(255, 255, 255, .8); }
.logiciels__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.logiciels__apercu-note { font-size: var(--t-mini); color: rgba(255, 255, 255, .6); }
.logiciels__note { font-size: var(--t-mini); color: rgba(255, 255, 255, .6); margin-top: 1.25rem; max-width: 48ch; }
.logiciels__apercu { margin: 0; perspective: 1400px; }
.fenetre { background: #0B2F70; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1); transform: rotateY(-5deg) rotateX(2deg); transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.logiciels__apercu:hover .fenetre { transform: rotateY(0) rotateX(0); }
.fenetre__barre { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: #07245A; }
.fenetre__barre span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.fenetre__barre p { margin: 0 0 0 .6rem; font-size: var(--t-mini); color: rgba(255, 255, 255, .6); }
.fenetre img { width: 100%; height: auto; }
.fenetre--seconde { margin: -2rem 0 0 14%; transform: rotateY(-5deg) rotateX(2deg) translateX(0); width: 86%; }
.logiciels__apercu figcaption { margin-top: 1.25rem; font-size: var(--t-petit); color: rgba(255, 255, 255, .6); }
.caracteristiques { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .15); }
.caracteristiques dt { font-size: var(--t-mini); color: rgba(255, 255, 255, .55); }
.caracteristiques dd { margin: .15rem 0 0; color: #fff; }

/* --------------------------------------------------------------- agenda */
.agenda { padding-block: var(--espace); background: var(--papier); }
.agenda__grille { display: grid; grid-template-columns: 4fr 8fr; gap: 3rem 5rem; align-items: start; }
.agenda__intro p { color: var(--encre-2); }
.agenda__liste { list-style: none; border-top: 1px solid var(--ligne); }
.evenement { display: grid; grid-template-columns: 96px 1fr; gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--ligne); align-items: start; }
.evenement time { display: block; font-family: var(--display); line-height: 1; color: var(--marine); border-left: 3px solid var(--vert); padding-left: .9rem; }
.evenement time b { display: block; font-size: 2.2rem; font-weight: 400; letter-spacing: -0.02em; }
.evenement time span { display: block; font-size: var(--t-mini); color: var(--encre-3); margin-top: .35rem; font-family: var(--texte); }
.evenement__type { font-size: var(--t-mini); font-weight: 500; color: var(--bleu-texte); margin-bottom: .2rem; }
.evenement h3 { font-size: 1.15rem; margin: 0 0 .25rem; }
.evenement h3 a { color: var(--marine); text-decoration: none; }
.evenement h3 a:hover { color: var(--bleu-texte); }
.evenement__lieu { font-size: var(--t-petit); color: var(--encre-2); margin: 0; }

/* --------------------------------------------------------------- appel à contact */
.appel { padding-block: var(--espace); background: var(--vert); color: var(--marine); overflow: hidden; }
.appel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 70% at 90% 50%, rgba(255, 255, 255, .28), transparent 70%); pointer-events: none; }
.appel .conteneur { position: relative; }
.appel h2 { color: var(--marine); }
.appel p { color: rgba(0, 32, 96, .82); }
.appel .surtitre { color: var(--marine); } .appel .surtitre::before { background: var(--marine); }
.appel__grille { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem 5rem; align-items: center; }
.appel__actions { display: grid; gap: 1rem; justify-items: start; }
.appel__tel { color: var(--marine); font-size: 1.1rem; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; }
.appel__tel:hover { text-decoration: underline; }

/* --------------------------------------------------------------- pied de page */
.pied { background: var(--marine-sombre); color: rgba(255, 255, 255, .72); padding: 4rem 0 2rem; font-size: var(--t-petit); }
.pied__grille { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr; gap: 2.5rem 3rem; }
.pied__marque img { width: 170px; height: auto; margin-bottom: 1.25rem; }
.pied__marque p { max-width: 32ch; }
.pied__reseaux { display: flex; gap: .5rem; }
.pied__reseaux a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; color: #fff; }
.pied__reseaux a:hover { background: rgba(255, 255, 255, .1); }
.pied__reseaux svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pied h2 { font-size: 1rem; color: #fff; margin-bottom: 1rem; }
.pied ul { list-style: none; display: grid; gap: .55rem; }
.pied a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--t-mini); color: rgba(255, 255, 255, .5); }
.pied__bas p { margin: 0; }

/* --------------------------------------------------------------- en-têtes de pages intérieures */
.entete { padding: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.5rem, 6vw, 4.5rem); background: var(--papier); position: relative; overflow: hidden; }
.entete::before { content: ""; position: absolute; inset: 0; background: url("../img/topo.svg") right center / cover no-repeat; opacity: .45; mask-image: linear-gradient(90deg, transparent 20%, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%); pointer-events: none; }
.entete .conteneur { position: relative; }
.entete__grille { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem 4rem; align-items: end; }
.entete__texte { font-size: 1.125rem; color: var(--encre-2); max-width: 40rem; margin: 0; }
.entete--formation .entete__grille { align-items: start; }
.fil { font-size: var(--t-petit); color: var(--encre-3); margin-bottom: 1.5rem; }
.fil a { color: var(--bleu-texte); text-decoration: none; }
.fil span[aria-hidden] { margin: 0 .4rem; }
.resume-formation { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1.5rem; display: grid; gap: 1rem; box-shadow: 0 30px 60px -40px rgba(0, 32, 96, .35); }
.resume-formation .fiche__prix span { font-size: 1.9rem; }
.resume-formation .bouton { justify-self: start; }

/* --------------------------------------------------------------- cabinet */
.reperes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.repere__valeur { font-family: var(--display); font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--marine); letter-spacing: -0.03em; margin-bottom: .4rem; }
.repere p:last-child { color: var(--encre-2); font-size: var(--t-petit); }
.engagements { display: grid; gap: 2rem; }
.engagement { padding-left: 1.5rem; border-left: 3px solid var(--vert); }
.engagement p { color: var(--encre-2); }
.organigramme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.organigramme__poste { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--rayon); padding: 1.5rem; }
.organigramme__poste p { color: rgba(255, 255, 255, .75); font-size: var(--t-petit); }
.organigramme__poste--direction { grid-column: 1 / -1; background: rgba(255, 255, 255, .1); display: grid; grid-template-columns: 1fr 2fr; gap: 1rem 3rem; align-items: center; }
.organigramme__poste--direction h3 { margin: 0; }
.etapes { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: etape; }
.etapes--colonne { grid-template-columns: 1fr; gap: 1.5rem; }
.etape { position: relative; padding-top: .25rem; }
.etape__numero { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bleu); color: var(--marine); font-family: var(--display); font-weight: 600; margin-bottom: 1rem; }
.etape p { color: var(--encre-2); }

/* --------------------------------------------------------------- services détaillés */
.services-detail { display: grid; gap: 1.25rem; }
.service-detail { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: 7fr 5fr; gap: 1.5rem 3rem; align-items: center; }
.service-detail h2 { margin-bottom: .5rem; }
.service-detail > div > p { color: var(--encre-2); max-width: 58ch; }

/* --------------------------------------------------------------- catalogue et filtres */
.filtres { display: grid; gap: .75rem; margin-bottom: 2rem; }
.filtres__groupe { display: flex; flex-wrap: wrap; gap: .5rem; }
.puce { border: 1px solid var(--ligne-forte); background: #fff; color: var(--marine); border-radius: 999px; padding: .5rem 1rem; font-size: var(--t-petit); font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.puce:hover { border-color: var(--marine); }
.puce[aria-pressed="true"] { background: var(--marine); color: #fff; border-color: var(--marine); }
.fiches--catalogue { grid-template-columns: repeat(2, 1fr); }
.fiches__item[hidden] { display: none; }
.fiches__vide { margin-top: 2rem; color: var(--encre-2); }
.deux-colonnes--faq { align-items: start; }
.faq { display: grid; gap: .5rem; }
.faq__item { background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: 0 1.25rem; }
.faq__item summary { cursor: pointer; list-style: none; font-family: var(--display); font-weight: 500; font-size: 1.1rem; color: var(--marine); padding: 1rem 2.2rem 1rem 0; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: .2rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--bleu-texte); border-bottom: 2px solid var(--bleu-texte); transform: translateY(-70%) rotate(45deg); transition: transform var(--transition); }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item p { color: var(--encre-2); padding-bottom: 1.1rem; }

/* --------------------------------------------------------------- fiche formation (page) */
.formation__grille { display: grid; grid-template-columns: 8fr 4fr; gap: 3rem 4rem; align-items: start; }
.formation__principal h2 { margin-top: 2.5rem; }
.formation__principal h2:first-child { margin-top: 0; }
.programme { list-style: none; display: grid; gap: 1rem; counter-reset: module; }
.programme__module { background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: 1.25rem 1.5rem 1.25rem 4rem; position: relative; counter-increment: module; }
.programme__module::before { content: counter(module); position: absolute; left: 1.25rem; top: 1.2rem; width: 32px; height: 32px; border-radius: 50%; background: var(--bleu-pale); color: var(--marine); font-family: var(--display); font-weight: 500; display: grid; place-items: center; }
.programme__module h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.programme__module ul { list-style: none; display: grid; gap: .25rem; color: var(--encre-2); font-size: var(--t-petit); }
.programme__module li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vert); margin-right: .6rem; vertical-align: middle; }
.formation__cote { display: grid; gap: 1rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.encadre { background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: 1.25rem 1.5rem; }
.encadre h2 { font-size: 1rem; margin-bottom: .6rem; }
.encadre ul { list-style: none; display: grid; gap: .3rem; color: var(--encre-2); font-size: var(--t-petit); }
.encadre p { color: var(--encre-2); font-size: var(--t-petit); }

/* --------------------------------------------------------------- formulaires */
.formulaire { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(1.25rem, 3vw, 2rem); }
.formulaire__grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
.champ { display: grid; gap: .35rem; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-size: var(--t-petit); font-weight: 500; color: var(--encre); }
.champ input, .champ select, .champ textarea { font: inherit; color: var(--encre); background: var(--gris); border: 1px solid var(--ligne-forte); border-radius: 10px; padding: .75rem .95rem; width: 100%; transition: border-color var(--transition), box-shadow var(--transition); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu-texte); box-shadow: 0 0 0 3px rgba(0, 176, 240, .22); background: #fff; }
.champ textarea { resize: vertical; min-height: 110px; }
.champ.est-invalide input, .champ.est-invalide textarea { border-color: #B3261E; }
.champ__erreur { font-size: var(--t-mini); color: #B3261E; }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__consentement { margin: 1.25rem 0 0; font-size: var(--t-petit); color: var(--encre-2); }
.formulaire__consentement input { margin-right: .5rem; accent-color: var(--bleu-texte); }
.formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.25rem; }
.formulaire__note { font-size: var(--t-mini); color: var(--encre-3); margin: 0; max-width: 40ch; }
.formulaire__etat { margin: 1rem 0 0; font-size: var(--t-petit); }
.formulaire__etat:empty { display: none; }
.formulaire__etat.est-succes { color: #1E6B3F; }
.formulaire__etat.est-erreur { color: #B3261E; }
.formulaire.est-envoye .formulaire__grille, .formulaire.est-envoye .formulaire__consentement, .formulaire.est-envoye .formulaire__actions { display: none; }
.contact__grille { display: grid; grid-template-columns: 4fr 8fr; gap: 3rem 4rem; align-items: start; }
.contact__coordonnees p { margin-bottom: .75rem; }
.contact__ligne { display: inline-flex; align-items: center; color: var(--encre); text-decoration: none; }
.contact__ligne .ico { color: var(--bleu-texte); }
.contact__reseaux { display: flex; gap: 1.25rem; margin-top: 1.5rem; }
.contact__reseaux a { display: inline-flex; align-items: center; text-decoration: none; font-weight: 500; }

/* --------------------------------------------------------------- texte courant */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2rem; }
.prose p { color: var(--encre-2); }

/* --------------------------------------------------------------- révélations au défilement */
.a-reveler { opacity: 0; transform: translateY(18px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2, .7, .2, 1); }
.a-reveler.est-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------- adaptations */
@media (max-width: 1100px) {
  .reperes, .etapes, .organigramme { grid-template-columns: repeat(2, 1fr); }
  .organigramme__poste--direction { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .intro__grille, .services__grille, .agenda__grille, .appel__grille, .deux-colonnes, .logiciels__grille, .entete__grille, .formation__grille, .contact__grille, .section__tete--ligne { grid-template-columns: 1fr; }
  .services__intro, .formation__cote { position: static; }
  .fiches, .fiches--catalogue { grid-template-columns: 1fr; }
  .domaine, .domaine:nth-child(even) { grid-template-columns: 1fr; }
  .domaine:nth-child(even) .domaine__plan { order: 0; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .service-detail { grid-template-columns: 1fr; }
  .fenetre, .fenetre--seconde { transform: none; }
  .fenetre--seconde { margin: 1rem 0 0; width: 100%; }
  .hero__grille { grid-template-columns: 1fr; gap: 2.5rem; padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero__visuel { max-width: 560px; }
  .service { padding-left: 3.2rem; }
}
@media (max-width: 560px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche__cote { border-left: 0; padding-left: 0; border-top: 1px solid var(--ligne); padding-top: 1rem; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .fiche__prix { margin: 0; flex: 1 1 100%; }
  .formulaire__grille, .reperes, .etapes, .organigramme, .pied__grille, .caracteristiques { grid-template-columns: 1fr; }
  .hero__titre { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .hero__surtitre, .hero__texte, .hero__actions, .hero__domaines, .hero__visuel { opacity: 1; transform: none; }
  .hero__titre .ligne span { transform: none; }
  .plan path, .plan circle { stroke-dashoffset: 0; }
  .plan__texte { opacity: 1; }
  .a-reveler { opacity: 1; transform: none; }
}