/* ADM Consulting — feuille de style de la page publiée.
   Reprise telle quelle du <helmet> de la maquette Claude Design
   (« Site vitrine ADM Consulting - v2 A3 grille.dc.html »), puis les classes
   qui remplacent les attributs style-hover / style-focus du moteur. */

/* Police auto-hébergée (licence SIL OFL). Sous-ensemble latin, un fichier variable 400–700. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fontes/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url(fontes/instrument-sans-italique.woff2) format('woff2')}
/* Police de secours calée sur les métriques d'Instrument Sans : le texte ne saute pas quand la vraie police arrive. */
@font-face{font-family:'Instrument Sans Fallback';src:local('Arial');size-adjust:103.3%;ascent-override:93.9%;descent-override:24.2%;line-gap-override:0%}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{margin:0;background:#FFFFFF;color:#242C35;font-family:'Instrument Sans','Instrument Sans Fallback',system-ui,sans-serif;font-size:17px;line-height:1.6}
a{color:#1D4F91;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,p,ul{margin:0}
input,textarea,button{font:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:#9AA1AB}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Situations : grille 3 lignes × 2 colonnes, proportions alternées */
.situations{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.situations>.situation:nth-child(1){grid-column:span 7}
.situations>.situation:nth-child(2){grid-column:span 5}
.situations>.situation:nth-child(3){grid-column:span 5}
.situations>.situation:nth-child(4){grid-column:span 7}
.situations>.situation:nth-child(5),.situations>.situation:nth-child(6){grid-column:span 6}
.situation{display:flex;flex-direction:row;align-items:center;gap:28px}
.sit-text h3 strong{font-weight:600;color:#1D4F91}
.sit-text{display:flex;flex-direction:column;gap:10px;max-width:38ch;min-width:0}
@media (max-width:900px){.situations>.situation:nth-child(n){grid-column:1 / -1}}

/* Illustrations des situations : un seul langage graphique
   80×80, trait 1.25, encre #242C35, gris #C4C9D1, accent #1D4F91.
   Les flux vont de gauche à droite pour conduire l'œil vers le texte. */
.ill{flex:none;width:80px;height:80px;overflow:visible;transition:transform .35s ease}
.ill *{transform-box:fill-box;transform-origin:center}
.ill .l{fill:none;stroke:#C4C9D1;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.ill .k{fill:none;stroke:#242C35;stroke-width:1.25;stroke-linejoin:round}
.ill .d{stroke-dasharray:2 3}
.ill .f{fill:#242C35}
.ill .a{fill:#1D4F91}
.ill .ak{fill:none;stroke:#1D4F91;stroke-width:1.25;stroke-linecap:round}
.situation:hover .ill{transform:translateX(3px)}
.situation:hover .ill .l{stroke:#8C949F}

/* 1 · Répétition : la même donnée refait le trajet trois fois */
.i1-trip{animation:i1-trip 2s ease-in-out infinite}
.i1-c1{opacity:0;animation:i1-c1 6s linear infinite}
.i1-c2{opacity:0;animation:i1-c2 6s linear infinite}
.i1-c3{opacity:0;animation:i1-c3 6s linear infinite}
@keyframes i1-trip{0%{transform:translateX(0);opacity:0}10%{opacity:1}60%{transform:translateX(24px);opacity:1}72%,100%{transform:translateX(24px);opacity:0}}
@keyframes i1-c1{0%,20%{opacity:0}23%,95%{opacity:1}100%{opacity:0}}
@keyframes i1-c2{0%,53%{opacity:0}56%,95%{opacity:1}100%{opacity:0}}
@keyframes i1-c3{0%,86%{opacity:0}89%,95%{opacity:1}100%{opacity:0}}

/* 2 · Dispersion : des sources éparses, une vue d'ensemble qui ne se forme pas */
.i2-flow{animation:i2-flow 1.8s linear infinite}
.i2-src{animation:i2-src 4s ease-in-out infinite}
.i2-src:nth-of-type(2){animation-delay:1s}
.i2-src:nth-of-type(3){animation-delay:2s}
.i2-src:nth-of-type(4){animation-delay:3s}
@keyframes i2-flow{to{stroke-dashoffset:-10}}
@keyframes i2-src{0%,30%,100%{fill:#242C35;transform:scale(1)}12%{fill:#1D4F91;transform:scale(1.35)}}

/* 3 · Résultat imprévu : la sortie ne tombe pas à sa place */
.i3-trip{animation:i3-trip 3s ease-in-out infinite}
.i3-out{transform:translate(3px,3px) rotate(9deg);animation:i3-out 3s ease-in-out infinite}
@keyframes i3-trip{0%{transform:translateX(0);opacity:0}8%{opacity:1}45%{transform:translateX(26px);opacity:1}55%,100%{transform:translateX(26px);opacity:0}}
@keyframes i3-out{0%,44%,70%,100%{transform:translate(3px,3px) rotate(9deg)}50%{transform:translate(1px,2px) rotate(2deg)}56%{transform:translate(4px,3px) rotate(13deg)}62%{transform:translate(3px,3px) rotate(7deg)}}

/* 4 · Évolution : une petite modification se propage */
.i4-src{animation:i4-src 3.6s ease-in-out infinite}
.i4-w{opacity:0;animation:i4-w 3.6s ease-out infinite}
.i4-w2{animation-delay:.6s}
@keyframes i4-src{0%,25%,100%{transform:scale(1)}8%{transform:scale(1.4)}}
@keyframes i4-w{0%,6%{opacity:0}14%{opacity:1}40%,100%{opacity:0}}

/* 5 · Décalage : la nouvelle forme du travail n'entre plus dans l'outil */
.i5-piece{animation:i5-piece 4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes i5-piece{0%,8%{transform:translateX(0)}42%{transform:translateX(12px)}48%{transform:translateX(9px)}54%{transform:translateX(12px)}60%{transform:translateX(10px)}92%,100%{transform:translateX(0)}}

/* 6 · Obsolescence : la mise à jour bute sur une couche dépassée */
.i6-old{animation:i6-old 4s ease-in-out infinite}
.i6-upd{animation:i6-upd 3.5s ease-in-out infinite}
@keyframes i6-old{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes i6-upd{0%{transform:translateY(0);opacity:0}10%{opacity:1}50%{transform:translateY(22px);opacity:1}56%{transform:translateY(20px)}62%{transform:translateY(22px);opacity:1}80%,100%{transform:translateY(22px);opacity:0}}

@media (max-width:480px){.situation{gap:18px}.ill{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){.ill *{animation:none!important}.ill [class*="-c"],.i4-w{opacity:1}}

/* Bande noire pleine largeur, bords droits */
.dark-band{position:relative;z-index:1;background:#111111;color:#FFFFFF}
.dark-band>div{max-width:1120px;margin:0 auto;padding:clamp(80px,10vw,136px) 32px}

/* Deux façons de commencer : tronc commun des trois variantes.
   Le bleu est réservé aux carrés qui circulent et au cœur du nœud de jonction ;
   tout le reste parle en lumière blanche. */
.dark-band{overflow:hidden}
.dark-band>div{position:relative;max-width:1320px}
/* Fond : grille de points technique, 1 px tous les 28 px, estompée vers les bords */
.dark-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.16) 0.75px,transparent 1.25px);background-size:28px 28px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 30%,transparent 100%)}

/* Tracés : un rail de base à peine visible, le tracé allumé se dessine par-dessus */
.ln{position:relative;flex:none;background:rgba(255,255,255,.09)}
.ln::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.46);transform-origin:0 0}
.ln-v{width:1px}
.ln-v::after{transform:scaleY(var(--p,0))}
.pth-static .ln{--p:1}

/* Courbes de jonction (tracées en pixels par le script) */
.mg{display:block;overflow:visible}
.mg path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.mg .mb{stroke:rgba(255,255,255,.09)}
.mg .ml{stroke:rgba(255,255,255,.46);stroke-dasharray:1 1;stroke-dashoffset:1}
.pth-static .mg .ml{stroke-dashoffset:0!important}

/* Nœuds : éteints (contour), puis allumés en blanc quand le tracé les atteint */
.nd{flex:none;width:9px;height:9px;background:#111111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:background-color .5s ease,box-shadow .5s ease}
.nd.lit,.pth-static .nd{background:#FFFFFF;box-shadow:0 0 0 4px rgba(255,255,255,.05),0 0 16px 2px rgba(255,255,255,.26)}

/* Nœud de jonction : anneau blanc, cœur bleu */
.nj{position:relative;flex:none;width:13px;height:13px;background:#111111;box-shadow:inset 0 0 0 1.25px rgba(255,255,255,.3);transition:box-shadow .6s ease}
.nj::after{content:"";position:absolute;inset:4px;background:#6B9BE0;opacity:.3;transition:opacity .6s ease}
.nj.lit,.pth-static .nj{box-shadow:inset 0 0 0 1.25px #FFFFFF,0 0 18px 2px rgba(255,255,255,.3)}
.nj.lit::after,.pth-static .nj::after{opacity:1}

/* Titres d'étape : gris tant que le tracé n'est pas arrivé, blancs ensuite */
[data-step] h4{color:#8C949F;transition:color .5s ease}
[data-step].lit h4,.pth-static [data-step] h4{color:#FFFFFF}

/* Carrés qui circulent : un par chemin, ils se rejoignent au nœud de jonction */
.runner{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#6B9BE0;pointer-events:none;opacity:0;z-index:2}

/* Survol : le chemin survolé reste net, l'autre s'efface */

/* A3 : deux chemins verticaux qui se rejoignent, puis un cycle horizontal
   Maintenir ⇄ Faire évoluer. Colonnes sans gouttière pour que les rails tombent
   pile à 25 % et 75 %, là où démarrent les courbes et où passe la boucle. */
/* Espacements verticaux : généreux sur grand écran, resserrés sur laptop */
.dark-band{--g-head:72px;--g-title:24px;--g-rtop:40px;--g-r:20px;--g-step:16px;--g-grow:32px;--g-merge:112px;--g-rj:28px;--g-k:44px;--g-cyc:20px;--g-pad:clamp(80px,10vw,136px)}
@media (max-width:1599px),(max-height:879px){
  .dark-band{--g-head:56px;--g-title:16px;--g-rtop:24px;--g-r:14px;--g-step:10px;--g-grow:12px;--g-merge:64px;--g-rj:16px;--g-k:36px;--g-cyc:12px;--g-pad:clamp(64px,8vw,96px)}
}
.dark-band>div{padding-top:var(--g-pad);padding-bottom:var(--g-pad)}
.r-top{height:var(--g-rtop)}
.r-gap{height:var(--g-r)}
.r-j{height:var(--g-rj)}
.paths{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--g-head)}
.path{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(12px,2.5vw,28px)}
.rail-grow{flex:1 0 var(--g-grow)}
.step{max-width:100%;padding:var(--g-step) 0}
.path-title,.step h4{font-size:clamp(22px,2.2vw,26px);line-height:1.25;letter-spacing:-0.015em;font-weight:500}
.path-title{max-width:22ch;padding-bottom:var(--g-title)}
.step h4{margin:0 0 10px}
.step div{display:flex;flex-direction:column;gap:6px;max-width:56ch;margin:0 auto;font-size:14px;line-height:1.55;color:#A3AAB4}
.merge{width:100%;height:var(--g-merge)}
.joined{display:flex;flex-direction:column;align-items:center;text-align:center}
.cycle{--k:var(--g-k);position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%}
.loop{position:absolute;left:25%;top:0;width:50%;height:calc(var(--k) * 2)}
.cyc{display:flex;flex-direction:column;align-items:center;padding:calc(var(--k) - 4.5px) clamp(12px,2.5vw,28px) 0}
.cyc .step{padding:calc(var(--k) + var(--g-cyc)) 0 0}
.paths-or,.merge-m,.cyc-m{display:none}
@media (max-width:720px){
  .paths{grid-template-columns:1fr}
  .merge,.loop{display:none}
  .merge-m{display:block;height:20px}
  .paths-or{display:flex;flex-direction:column;align-items:center;font-size:14px;color:#A3AAB4}
  .path .rail-grow{flex:none;height:32px}
  .cycle{grid-template-columns:1fr}
  .cyc{padding-top:0}
  .cyc .step{padding-top:16px}
  .cyc-m{display:block;height:20px}
}

/* Des outils bien pensés : les qualités défilent à gauche, une seule interface
   reste fixe à droite et change d'état selon la qualité lue.
   0 Adaptés (flux en colonnes) · 1 Simples (une liste, une action)
   2 Fiables (vérifications, état, sauvegarde) · 3 Évolutifs (un module s'ajoute) */
.tools{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;margin-top:72px}
.t-list{position:relative;display:flex;flex-direction:column}
.t-list::before{content:"";position:absolute;left:3.5px;top:14px;bottom:0;width:1px;background:#D7DAE0}
.t-item{position:relative;min-height:min(44vh,420px);padding-left:32px;box-sizing:border-box}
.t-item:last-child{min-height:min(40vh,380px)}
.t-item::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;box-sizing:border-box;background:var(--band,#F3F4F6);border:1px solid #A3AAB4;transition:background-color .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1)}
.t-item.on::before{background:#1D4F91;border-color:#1D4F91}
.t-item h3{font-size:clamp(21px,2vw,24px);line-height:1.25;letter-spacing:-0.015em;font-weight:500;color:#646C77;margin-bottom:16px;transition:color .5s cubic-bezier(.16,1,.3,1)}
.t-item.on h3{color:#242C35}
.t-item>div{display:flex;flex-direction:column;gap:12px;font-size:16px;color:#5B6470;max-width:44ch}
.tool-vis{position:relative}
.tool-pin{position:sticky;top:max(96px,calc(50vh - 210px))}
.tool{display:block;width:100%;height:auto;overflow:visible}

/* Interface : un seul vocabulaire, celui des illustrations */
.tool .tw{fill:#FFFFFF;stroke:#E5E7EB}
.tool .ts{stroke:#EEF0F3}
.tool .tk{fill:#242C35}
.tool .tg1{fill:#C4C9D1}.tool .tg2{fill:#D7DAE0}.tool .tg3{fill:#E5E7EB}
.tool .ta{fill:#1D4F91}
.tool .tcol{fill:#F7F8FA;stroke:#EEF0F3}
.tool .tcard{fill:#FFFFFF;stroke:#E5E7EB}
.tool .tcard-a{fill:#FFFFFF;stroke:#1D4F91}
.tool .tghost{fill:none;stroke:#C4C9D1;stroke-dasharray:4 4}
.tool .tchk{fill:none;stroke:#1D4F91;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.tool .tmod{fill:#EEF3FA;stroke:#1D4F91}

/* États : chaque groupe entre et sort en douceur */
.tool [data-g]{opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.tool [data-g="evo"]{transform:translateY(24px)}
.tool [data-g="nav"]{transform:translateX(-10px)}
.tool [data-g="ghost"]{transform:translate(-14px,-14px)}
.tools:not([data-active]) [data-g="adapt"],
.tools[data-active="0"] [data-g="adapt"],
.tools[data-active="1"] [data-g="list"],.tools[data-active="2"] [data-g="list"],.tools[data-active="3"] [data-g="list"],
.tools[data-active="2"] [data-g="rel"],.tools[data-active="2"] [data-g="ghost"],
.tools[data-active="2"] [data-g="status"],.tools[data-active="3"] [data-g="status"],
.tools[data-active="3"] [data-g="evo"],.tools[data-active="3"] [data-g="nav"]{opacity:1;transform:none}

/* Adaptés : une demande suit le flux de travail, colonne après colonne */
.tools[data-active="0"] .t-run{animation:t-run 5.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes t-run{0%{transform:translate(0,0);opacity:0}8%,26%{transform:translate(0,0);opacity:1}40%,58%{transform:translate(132px,0)}72%,90%{transform:translate(264px,-48px);opacity:1}100%{transform:translate(264px,-48px);opacity:0}}
/* Fiables : chaque ligne est vérifiée, l'état reste au vert, une copie part en sauvegarde */
.tools[data-active="2"] .tchk{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.16,1,.3,1)}
.tools[data-active="2"] .tchk.c2{transition-delay:.15s}
.tools[data-active="2"] .tchk.c3{transition-delay:.3s}
.tools[data-active="2"] .tchk.c4{transition-delay:.45s}
.tools[data-active="2"] .t-pulse,.tools[data-active="3"] .t-pulse{animation:t-pulse 2.4s ease-in-out infinite}
.tools[data-active="2"] .t-sync{animation:t-sync 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes t-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes t-sync{0%{transform:translate(0,0);opacity:0}15%{opacity:1}60%{transform:translate(14px,14px);opacity:1}80%,100%{transform:translate(14px,14px);opacity:0}}
.t-sync{opacity:0}
/* Évolutifs : le nouveau module se pose, le reste ne bouge pas */
.tools[data-active="3"] [data-g="evo"]{transition-delay:.1s,.1s}

.tools.t-static [data-g],.tools.t-static .t-item::before,.tools.t-static .t-item h3,.tools.t-static .tchk{transition:none!important}
.tools.t-static .t-run,.tools.t-static .t-pulse,.tools.t-static .t-sync{animation:none!important}

@media (max-width:900px){
  .tools{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .tool-vis{order:-1;position:sticky;top:64px;z-index:2;background:var(--band,#F3F4F6);margin:0 -32px 32px;padding:16px 32px 20px}
  .tool-pin{position:static}
  .tool{max-width:520px;margin:0 auto}
  .t-item{min-height:38vh}
  .t-item:last-child{min-height:30vh}
}
/* Réalisations : fonctionnalités en étiquettes, bord fin, même rayon que les boutons */
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 12px;border:1px solid #E5E7EB;border-radius:5px;background:#FFFFFF;font-size:14px;line-height:1.4;color:#424A55}
/* Apparition des étiquettes l'une après l'autre quand le projet entre à l'écran */
.tags li{transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);transition-delay:calc(.2s + var(--i,0) * 40ms)}
.tags li:nth-child(2){--i:1}.tags li:nth-child(3){--i:2}.tags li:nth-child(4){--i:3}.tags li:nth-child(5){--i:4}.tags li:nth-child(6){--i:5}.tags li:nth-child(7){--i:6}.tags li:nth-child(8){--i:7}
.rv-wait .tags li{opacity:0;transform:translateY(6px)}
/* Une étiquette par projet en accent, même couleurs que le module qui s’ajoute dans « Faciles à faire évoluer » */
.tags li.hl{border-color:#1D4F91;background:#EEF3FA;color:#1D4F91}

/* Contact : à l'envoi, un tracé part du bouton et un carré bleu le parcourt
   jusqu'à la confirmation, comme les carrés qui circulent plus haut. */
.sent{display:inline-flex;align-items:center;margin-left:-16px}
.sent-ln{flex:none;width:40px;height:1px;background:#C4C9D1;transform-origin:0 50%;animation:sent-ln .55s cubic-bezier(.16,1,.3,1) both}
.sent-sq{flex:none;width:6px;height:6px;margin-right:12px;background:#1D4F91;animation:sent-sq .55s cubic-bezier(.16,1,.3,1) both}
.sent-txt{animation:sent-txt .4s ease .45s both}
@keyframes sent-ln{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sent-sq{from{transform:translateX(-40px);opacity:0}20%{opacity:1}to{transform:none;opacity:1}}
@keyframes sent-txt{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.c-static .sent-ln,.c-static .sent-sq,.c-static .sent-txt{animation:none}
@media (prefers-reduced-motion:reduce){.sent-ln,.sent-sq,.sent-txt{animation:none}}


/* ── Remplacements du moteur Claude Design ─────────────────────────────── */

[hidden]{display:none!important}

/* En-tête : le filet apparaît dès qu'on a défilé (classe posée par site.js) */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.92);-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.site-header.scrolled{border-bottom-color:#E5E7EB}

/* Boutons */
.btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid #111111;border-radius:5px;font-size:15px;font-weight:500;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{text-decoration:none}
.btn-dark{background:#111111;color:#FFFFFF}
.btn-dark:hover{background:#FFFFFF;color:#111111;border-color:#111111}
.btn-outline{background:transparent;color:#242C35}
.btn-outline:hover{background:#111111;color:#FFFFFF;border-color:#111111}
.btn-nav{white-space:nowrap;flex:none;height:36px;padding:0 14px;border-color:#D1D5DB;color:#242C35;font-size:14px}
.btn-nav:hover{background:#111111;color:#FFFFFF;border-color:#111111}
button.btn{white-space:nowrap;flex:none;cursor:pointer}
button.btn[disabled]{cursor:progress;opacity:.7}

/* Cartes « situations » */
.situation{background:#FFFFFF;border:1px solid #E5E7EB;border-radius:6px;padding:28px;transition:border-color .25s ease,transform .25s ease}
.situation:hover{border-color:#242C35;transform:translateY(-2px)}

/* Lien e-mail du contact */
.mail{align-self:flex-start;font-size:clamp(20px,2.2vw,24px);line-height:1.25;letter-spacing:-0.015em;font-weight:500;color:#1D4F91;border-bottom:1px solid transparent;transition:border-color .2s ease}
.mail:hover{border-bottom-color:#1D4F91;text-decoration:none}

/* Champs du formulaire */
.field{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:500}
.field input,.field textarea{border:1px solid #D1D5DB;border-radius:5px;background:#FFFFFF;outline:none;font-size:16px;font-weight:400;transition:border-color .2s ease,box-shadow .2s ease}
.field input{height:40px;padding:0 12px}
.field textarea{padding:10px 12px;line-height:1.5;resize:vertical}
.field input:focus,.field textarea:focus{border-color:#242C35;box-shadow:0 0 0 3px rgba(29,79,145,.12)}
/* Champ piège anti-spam : invisible pour les humains, rempli par les robots */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-error{font-size:15px;color:#9B1C1C}
.form-error a{color:inherit;text-decoration:underline}

/* Focus clavier visible (souris : aucun changement) */
a:focus-visible,button:focus-visible{outline:2px solid #1D4F91;outline-offset:3px}
.dark-band a:focus-visible{outline-color:#FFFFFF}

/* Lien d'évitement */
.skip{position:absolute;left:16px;top:-48px;z-index:20;padding:8px 14px;background:#111111;color:#FFFFFF;border-radius:5px;font-size:14px;transition:top .15s ease}
.skip:focus{top:12px;text-decoration:none}

/* Pied de page */
.site-footer a{color:inherit}
.site-footer a:hover{color:#242C35}