@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:300;font-display:block;src:url(../fonts/material-symbols-noria.woff2) format('woff2')}
/* NORIA — compléments accessibilité & UX (fusionnés dans site.css au build) */

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #5cb0da;
  color: #06263a;
  padding: .75rem 1.25rem;
  font-weight: 600;
  border-radius: 0 0 .25rem 0;
}
.skip-link:focus {
  left: 0;
}

/* Focus visible sur les champs de formulaire */
.form-input:focus,
.form-input:focus-visible {
  outline: 2px solid #5cb0da !important;
  outline-offset: 2px;
}
.form-input::placeholder {
  color: rgba(168, 194, 216, .72);
}

/* Focus visible générique liens/boutons au clavier */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #5cb0da;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Retour en haut de page */
#back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .25rem;
  background: rgba(46, 123, 172, .92);
  color: #ffffff;
  border: 1px solid rgba(92, 176, 218, .25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
#back-to-top:hover {
  background: rgba(46, 123, 172, 1);
}

/* Icônes Material : règle de classe (équivalent du CSS Google Fonts) */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #dce6ef}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#8fa8bf}input::placeholder,textarea::placeholder{opacity:1;color:#8fa8bf}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#5a7590;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2e7bac;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2e7bac}input::-moz-placeholder,textarea::-moz-placeholder{color:#5a7590;opacity:1}input::placeholder,textarea::placeholder{color:#5a7590;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%235a7590' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2e7bac;background-color:#fff;border-color:#5a7590;border-width:1px;--tw-shadow:0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2e7bac;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:focus,input:where([type=checkbox]):checked:hover,input:where([type=radio]):checked:focus,input:where([type=radio]):checked:hover{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:focus,input:where([type=checkbox]):indeterminate:hover{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.form-input,.form-multiselect,.form-select,.form-textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#5a7590;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2e7bac;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2e7bac}.form-input::-moz-placeholder,.form-textarea::-moz-placeholder{color:#5a7590;opacity:1}.form-input::placeholder,.form-textarea::placeholder{color:#5a7590;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}.form-input::-webkit-datetime-edit{display:inline-flex}.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-bottom-10{bottom:-2.5rem}.-bottom-8{bottom:-2rem}.-left-10{left:-2.5rem}.-left-4{left:-1rem}.-right-10{right:-2.5rem}.-right-20{right:-5rem}.-right-8{right:-2rem}.-top-20{top:-5rem}.-top-4{top:-1rem}.-top-40{top:-10rem}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.top-20{top:5rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.h-1{height:.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-96{height:24rem}.h-\[500px\]{height:500px}.h-full{height:100%}.min-h-\[260px\]{min-height:260px}.min-h-\[360px\]{min-height:360px}.min-h-\[400px\]{min-height:400px}.min-h-\[440px\]{min-height:440px}.min-h-\[480px\]{min-height:480px}.min-h-\[520px\]{min-height:520px}.min-h-\[700px\]{min-height:700px}.min-h-\[70vh\]{min-height:70vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-96{width:24rem}.w-\[500px\]{width:500px}.w-auto{width:auto}.w-full{width:100%}.min-w-max{min-width:-moz-max-content;min-width:max-content}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.scroll-mt-20{scroll-margin-top:5rem}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.125rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:.75rem}.rounded-lg{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.5rem}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-\[\#2a5a78\]\/10{border-color:rgba(42,90,120,.1)}.border-\[\#2a5a78\]\/15{border-color:rgba(42,90,120,.15)}.border-\[\#5cb0da\]{--tw-border-opacity:1;border-color:rgb(92 176 218/var(--tw-border-opacity,1))}.border-outline-variant{--tw-border-opacity:1;border-color:rgb(42 90 120/var(--tw-border-opacity,1))}.border-outline-variant\/10{border-color:rgba(42,90,120,.1)}.border-outline-variant\/15{border-color:rgba(42,90,120,.15)}.border-outline-variant\/20{border-color:rgba(42,90,120,.2)}.border-outline-variant\/30{border-color:rgba(42,90,120,.3)}.border-outline-variant\/40{border-color:rgba(42,90,120,.4)}.border-outline-variant\/5{border-color:rgba(42,90,120,.05)}.border-red-400\/40{border-color:hsla(0,91%,71%,.4)}.border-secondary\/20{border-color:rgba(92,176,218,.2)}.border-secondary\/25{border-color:rgba(92,176,218,.25)}.border-secondary\/30{border-color:rgba(92,176,218,.3)}.bg-\[\#0d2136\]{--tw-bg-opacity:1;background-color:rgb(13 33 54/var(--tw-bg-opacity,1))}.bg-\[\#0d2136\]\/80{background-color:rgba(13,33,54,.8)}.bg-\[\#2e7bac\]\/10{background-color:rgba(46,123,172,.1)}.bg-background{--tw-bg-opacity:1;background-color:rgb(13 33 54/var(--tw-bg-opacity,1))}.bg-primary\/5{background-color:rgba(238,242,246,.05)}.bg-red-950\/40{background-color:rgba(69,10,10,.4)}.bg-secondary{--tw-bg-opacity:1;background-color:rgb(92 176 218/var(--tw-bg-opacity,1))}.bg-secondary-container{--tw-bg-opacity:1;background-color:rgb(46 123 172/var(--tw-bg-opacity,1))}.bg-secondary-container\/30{background-color:rgba(46,123,172,.3)}.bg-secondary\/15{background-color:rgba(92,176,218,.15)}.bg-secondary\/5{background-color:rgba(92,176,218,.05)}.bg-surface{--tw-bg-opacity:1;background-color:rgb(13 33 54/var(--tw-bg-opacity,1))}.bg-surface-container{--tw-bg-opacity:1;background-color:rgb(18 49 80/var(--tw-bg-opacity,1))}.bg-surface-container-high{--tw-bg-opacity:1;background-color:rgb(23 57 92/var(--tw-bg-opacity,1))}.bg-surface-container-highest{--tw-bg-opacity:1;background-color:rgb(29 68 104/var(--tw-bg-opacity,1))}.bg-surface-container-low{--tw-bg-opacity:1;background-color:rgb(16 42 68/var(--tw-bg-opacity,1))}.bg-tertiary-container\/30{background-color:rgba(14,27,32,.3)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-background{--tw-gradient-from:#0d2136 var(--tw-gradient-from-position);--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-background\/40{--tw-gradient-from:rgba(13,33,54,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-background\/70{--tw-gradient-from:rgba(13,33,54,.7) var(--tw-gradient-from-position);--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-background\/80{--tw-gradient-from:rgba(13,33,54,.8) var(--tw-gradient-from-position);--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-secondary\/30{--tw-gradient-from:rgba(92,176,218,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(92,176,218,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-surface-container{--tw-gradient-from:#123150 var(--tw-gradient-from-position);--tw-gradient-to:rgba(18,49,80,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-surface-container-high{--tw-gradient-from:#17395c var(--tw-gradient-from-position);--tw-gradient-to:rgba(23,57,92,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-background\/10{--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,33,54,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-background\/60{--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,33,54,.6) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-background\/70{--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,33,54,.7) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-background\/85{--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,33,54,.85) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-background\/90{--tw-gradient-to:rgba(13,33,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,33,54,.9) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-background\/30{--tw-gradient-to:rgba(13,33,54,.3) var(--tw-gradient-to-position)}.to-background\/40{--tw-gradient-to:rgba(13,33,54,.4) var(--tw-gradient-to-position)}.to-background\/50{--tw-gradient-to:rgba(13,33,54,.5) var(--tw-gradient-to-position)}.to-background\/70{--tw-gradient-to:rgba(13,33,54,.7) var(--tw-gradient-to-position)}.to-primary\/20{--tw-gradient-to:rgba(238,242,246,.2) var(--tw-gradient-to-position)}.to-surface-container{--tw-gradient-to:#123150 var(--tw-gradient-to-position)}.to-surface-container-high{--tw-gradient-to:#17395c var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-10{padding-bottom:2.5rem}.pb-20{padding-bottom:5rem}.pl-6{padding-left:1.5rem}.pt-2{padding-top:.5rem}.pt-20{padding-top:5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-body{font-family:Inter,Arial,sans-serif}.font-headline{font-family:Montserrat,Arial,sans-serif}.font-label{font-family:Inter,Arial,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-\[0\.95\]{line-height:.95}.leading-\[1\.05\]{line-height:1.05}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#5cb0da\]{--tw-text-opacity:1;color:rgb(92 176 218/var(--tw-text-opacity,1))}.text-\[\#eef2f6\]{--tw-text-opacity:1;color:rgb(238 242 246/var(--tw-text-opacity,1))}.text-\[\#eef2f6\]\/65{color:rgba(238,242,246,.65)}.text-\[\#eef2f6\]\/70{color:rgba(238,242,246,.7)}.text-\[\#eef2f6\]\/80{color:rgba(238,242,246,.8)}.text-on-secondary-container{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-on-surface{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-on-surface-variant{--tw-text-opacity:1;color:rgb(168 194 216/var(--tw-text-opacity,1))}.text-on-surface-variant\/40{color:hsla(233,7%,79%,.4)}.text-on-surface-variant\/60{color:hsla(233,7%,79%,.6)}.text-on-surface-variant\/70{color:hsla(233,7%,79%,.7)}.text-on-surface-variant\/80{color:hsla(233,7%,79%,.8)}.text-on-surface-variant\/90{color:hsla(233,7%,79%,.9)}.text-outline\/40{color:hsla(233,4%,58%,.4)}.text-primary{--tw-text-opacity:1;color:rgb(238 242 246/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-secondary{--tw-text-opacity:1;color:rgb(92 176 218/var(--tw-text-opacity,1))}.text-secondary\/40{color:rgba(92,176,218,.4)}.underline{text-decoration-line:underline}.accent-secondary{accent-color:#5cb0da}.opacity-10{opacity:.1}.opacity-15{opacity:.15}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-45{opacity:.45}.opacity-50{opacity:.5}.opacity-55{opacity:.55}.opacity-70{opacity:.7}.mix-blend-multiply{mix-blend-mode:multiply}.blur{--tw-blur:blur(8px)}.blur,.blur-\[100px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[100px\]{--tw-blur:blur(100px)}.blur-\[120px\]{--tw-blur:blur(120px)}.blur-\[120px\],.blur-\[140px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[140px\]{--tw-blur:blur(140px)}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale,.grayscale-\[20\%\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale-\[20\%\]{--tw-grayscale:grayscale(20%)}.grayscale-\[25\%\]{--tw-grayscale:grayscale(25%)}.grayscale-\[25\%\],.grayscale-\[30\%\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale-\[30\%\]{--tw-grayscale:grayscale(30%)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-blur-xl,.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.selection\:bg-secondary\/30 ::-moz-selection{background-color:rgba(92,176,218,.3)}.selection\:bg-secondary\/30 ::selection{background-color:rgba(92,176,218,.3)}.selection\:bg-secondary\/30::-moz-selection{background-color:rgba(92,176,218,.3)}.selection\:bg-secondary\/30::selection{background-color:rgba(92,176,218,.3)}.hover\:gap-3:hover{gap:.75rem}.hover\:gap-4:hover{gap:1rem}.hover\:border-secondary:hover{--tw-border-opacity:1;border-color:rgb(92 176 218/var(--tw-border-opacity,1))}.hover\:border-secondary\/30:hover{border-color:rgba(92,176,218,.3)}.hover\:bg-\[\#123150\]\/50:hover{background-color:rgba(18,49,80,.5)}.hover\:bg-\[\#123150\]\/60:hover{background-color:rgba(18,49,80,.6)}.hover\:bg-surface-container:hover{--tw-bg-opacity:1;background-color:rgb(18 49 80/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-high:hover{--tw-bg-opacity:1;background-color:rgb(23 57 92/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-highest:hover{--tw-bg-opacity:1;background-color:rgb(29 68 104/var(--tw-bg-opacity,1))}.hover\:text-\[\#5cb0da\]:hover{--tw-text-opacity:1;color:rgb(92 176 218/var(--tw-text-opacity,1))}.hover\:text-\[\#eef2f6\]:hover{--tw-text-opacity:1;color:rgb(238 242 246/var(--tw-text-opacity,1))}.hover\:text-secondary:hover{--tw-text-opacity:1;color:rgb(92 176 218/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:brightness-110:hover{--tw-brightness:brightness(1.1)}.hover\:brightness-110:hover,.hover\:grayscale-0:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:grayscale-0:hover{--tw-grayscale:grayscale(0)}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:gap-3{gap:.75rem}.group:hover .group-hover\:gap-4{gap:1rem}.group:hover .group-hover\:text-primary{--tw-text-opacity:1;color:rgb(238 242 246/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-secondary{--tw-text-opacity:1;color:rgb(92 176 218/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-50{opacity:.5}.group:hover .group-hover\:opacity-60{opacity:.6}.group:hover .group-hover\:opacity-65{opacity:.65}.group:hover .group-hover\:opacity-75{opacity:.75}.group:hover .group-hover\:opacity-80{opacity:.8}.group:hover .group-hover\:grayscale-0{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:inline-block{display:inline-block}.sm\:h-9{height:2.25rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-8xl{font-size:6rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-8{grid-column:span 8/span 8}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:justify-between{justify-content:space-between}.md\:gap-12{gap:3rem}.md\:p-14{padding:3.5rem}.md\:p-16{padding:4rem}.md\:p-20{padding:5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:gap-16{gap:4rem}.lg\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem*var(--tw-space-x-reverse));margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)))}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-16{padding-top:4rem;padding-bottom:4rem}.lg\:py-20{padding-top:5rem;padding-bottom:5rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:text-8xl{font-size:6rem;line-height:1}}
/* Accessibilité : respect de la préférence "réduire les animations" (RGAA 13.8 / WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Cibles tactiles du footer (confort mobile) */
footer a[href]{display:inline-block;padding-top:.2rem;padding-bottom:.2rem}
@media (max-width:640px){footer .flex.text-xs,footer .text-xs a{font-size:.8125rem}}

/* Header : devient opaque au défilement pour que le logo reste net (CR 30/07) */
nav.nav-solid{background-color:#0d2136;box-shadow:0 1px 0 0 rgba(42,90,120,.28)}

/* Conseils dépliables (page Carrières) — CR 30/07 */
.tips{margin-top:1.25rem;border-top:1px solid rgba(42,90,120,.3);padding-top:.9rem}
.tips>summary{cursor:pointer;list-style:none;font-family:'Montserrat',Arial,sans-serif;font-size:.8125rem;font-weight:600;color:#5cb0da;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.tips>summary::-webkit-details-marker{display:none}
.tips>summary::after{content:'+';font-size:1.05rem;line-height:1;flex:none}
.tips[open]>summary::after{content:'\2013'}
.tips>summary:focus-visible{outline:2px solid #5cb0da;outline-offset:3px;border-radius:2px}
.tips ul{margin:.85rem 0 0;padding-left:1.05rem;display:flex;flex-direction:column;gap:.55rem}
.tips li{font-size:.8125rem;line-height:1.55;color:#a8c2d8}
.tips li::marker{color:#2e7bac}

/* Infobulle d'aide sur les cartes du processus de recrutement (carrieres.html) — badge
   "?" en haut a droite de la carte.
   Volontairement PAS un <details> : un <details> ferme masque nativement son contenu,
   ce qui impose un clic pour ouvrir et rend le survol inoperant. On utilise donc un
   simple bouton + une bulle en frere, revelee en CSS par :hover (souris) et
   :focus-within (clavier et tactile). Aucun JS, donc rien a charger ni a maintenir. */
.aide-info{position:absolute;top:1rem;right:1rem}
.aide-badge{cursor:help;width:1.85rem;height:1.85rem;border-radius:9999px;padding:0;
  background:transparent;border:1px solid rgba(92,176,218,.4);color:#5cb0da;
  font-family:'Montserrat',Arial,sans-serif;font-size:.85rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}
.aide-info:hover .aide-badge,.aide-info:focus-within .aide-badge{background-color:#5cb0da;color:#0b1f2e}
.aide-badge:focus-visible{outline:2px solid #5cb0da;outline-offset:3px}
/* La bulle s'estompe au lieu de disparaitre d'un coup : display ne s'anime pas, on
   passe donc par opacity + visibility (visibility retire bien l'element du parcours
   clavier et lecteur d'ecran une fois la transition finie). */
.aide-bulle{position:absolute;top:calc(100% + .6rem);right:0;z-index:20;
  width:min(19rem,80vw);padding:1.1rem 1.25rem;background:#0d2136;
  border:1px solid rgba(42,90,120,.4);border-radius:.75rem;box-shadow:0 12px 32px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(-.35rem);
  transition:opacity .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1),visibility .22s}
/* pont invisible qui couvre l'ecart badge -> bulle, sinon le survol se coupe en chemin */
.aide-bulle::before{content:'';position:absolute;left:0;right:0;top:-.7rem;height:.7rem}
/* focus-within hors media query : le clavier et le tactile doivent y acceder meme
   sans pointeur fin. Le survol reste reserve aux pointeurs precis. */
.aide-info:focus-within .aide-bulle{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (pointer:fine){
  .aide-info:hover .aide-bulle{opacity:1;visibility:visible;transform:none}
}
@media (prefers-reduced-motion:reduce){.aide-bulle{transition:none}}
.aide-titre{font-family:'Montserrat',Arial,sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#5cb0da;margin:0 0 .7rem}
.aide-bulle ul{display:flex;flex-direction:column;gap:.55rem;padding-left:1.05rem;margin:0}
.aide-bulle li{font-size:.8125rem;line-height:1.55;color:#a8c2d8}
.aide-bulle li::marker{color:#2e7bac}

/* nos-secteurs.html : la bande des huit raccourcis suit le defilement, calee sous
   la navigation fixe (h-20 = 5rem). z-index sous la nav (z-50) pour passer dessous.
   Sur petit ecran les huit liens tiennent sur une seule ligne qui defile
   horizontalement : en retour a la ligne, la bande mangerait la moitie de l'ecran. */
.bande-secteurs{position:sticky;top:5rem;z-index:40}
/* une seule ligne, quelle que soit la largeur : en retour a la ligne la bande
   doublait de hauteur et mangeait l'ecran une fois collee. */
/* flex:1 1 auto + min-width:0 : sans ca, overflow-x annule le min-width:auto des
   flex-items et la bande se comprime a zero a cote du champ de recherche. */
.bande-secteurs .bande-liens{flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  justify-content:flex-end}
/* « safe » : quand les liens debordent, l'alignement repasse au debut. Sans lui,
   flex-end les fait deborder A GAUCHE, hors de portee du defilement. */
.bande-secteurs .bande-liens{justify-content:safe flex-end}
.bande-secteurs .bande-liens::-webkit-scrollbar{display:none}
.bande-secteurs .bande-liens>a{flex:0 0 auto}
/* l'ancre doit degager la nav ET la bande, sinon le titre passe dessous */
.ancre-secteur{scroll-margin-top:9rem}

/* Pages metiers : les colonnes « Outils » et « Normes » (des etiquettes) sont bien
   plus courtes que « Competences » (une liste), ce qui creusait un vide en bas a
   droite du bloc. « Profils mobilisables » vient le combler en bande, de la 2e
   colonne jusqu'au bord droit, sous ces deux colonnes.
   grid-row / grid-column / align-self n'existent pas dans le build Tailwind gele,
   d'ou ces classes maison. */
@media (min-width:640px){
  .metier-grille>.metier-col-longue{grid-row:1 / span 2}
  .metier-grille>.metier-profils{grid-column:2 / -1;align-self:start}
}

/* .btn-iris impose display:inline-block, qui écrase silencieusement le inline-flex
   de Tailwind sur les boutons combinant texte + icône (même cascade, .btn-iris passe
   après) — l'icône retombe alors sur l'alignement baseline au lieu d'être centrée.
   Sélecteur à deux classes = spécificité supérieure à .btn-iris seul, peu importe l'ordre. */
.btn-iris.inline-flex{display:inline-flex}

/* Menus deroulants de la nav (4 entrees) + accordeons mobiles.
   Ecrit a la main : aucun utilitaire Tailwind compile ne permet d'afficher un
   panneau masque (ni opacity-0, ni invisible, ni shadow-*, ni focus-within:). */

/* Les ancres de section doivent s'arreter SOUS le bandeau fixe (h-20 = 5rem).
   La classe .scroll-mt-20 ne couvrait que nos-secteurs et nos-metiers ; cette regle
   vaut pour toutes les pages, y compris les ancres ajoutees plus tard. */
section[id]{scroll-margin-top:5rem}

/* Correctif : #mobile-menu vit dans une <nav> fixed et n'avait ni hauteur max ni
   defilement, alors que le scroll du body est verrouille a l'ouverture. Tout ce qui
   depassait le bas de l'ecran etait definitivement inatteignable. */
#mobile-menu{max-height:calc(100vh - 5rem);overflow-y:auto;overscroll-behavior:contain}

.nav-dd{position:relative;display:flex;align-items:center;gap:.3rem}
.nav-dd-btn{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;padding:0;border:0;border-radius:.25rem;background:none;color:rgba(238,242,246,.65);cursor:pointer;transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}
.nav-dd-btn:hover{color:#eef2f6;background-color:rgba(18,49,80,.6)}
.nav-dd-btn:focus-visible{outline:2px solid #5cb0da;outline-offset:2px}
.nav-dd-btn svg{width:.7rem;height:.7rem;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.nav-dd:hover .nav-dd-fleche,.nav-dd:focus-within .nav-dd-fleche,.nav-dd.is-open .nav-dd-fleche{transform:rotate(180deg)}

/* Le padding-top du panneau sert de pont : sans lui, la souris quitte le lien avant
   d'atteindre la carte et le menu se referme en cours de trajet. */
.nav-dd-panel{position:absolute;top:100%;left:-1rem;z-index:50;padding-top:1.35rem;opacity:0;visibility:hidden;transform:translateY(-.4rem);transition:opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .18s}
.nav-dd-panel--droite{left:auto;right:-1rem}
.nav-dd:hover>.nav-dd-panel,.nav-dd:focus-within>.nav-dd-panel,.nav-dd.is-open>.nav-dd-panel{opacity:1;visibility:visible;transform:none}
.nav-dd-card{width:19rem;max-width:calc(100vw - 2rem);padding:.75rem;background-color:#102a44;border:1px solid rgba(42,90,120,.35);border-radius:.5rem;box-shadow:0 20px 45px -12px rgba(0,0,0,.6);display:grid;grid-template-columns:1fr;gap:.125rem}
.nav-dd-card--large{width:34rem;grid-template-columns:1fr 1fr}
/* Sous 1024px (tablette en portrait, ou la nav desktop s'affiche deja), un panneau
   de 34rem deborde a droite : le lien est trop avance dans la barre. On le retrecit,
   les deux colonnes restent lisibles. */
@media (max-width:1023px){.nav-dd-card--large{width:29rem}}
.nav-dd-item{display:block;padding:.6rem .7rem;border-radius:.375rem;text-decoration:none;transition:background-color .15s cubic-bezier(.4,0,.2,1)}
.nav-dd-item:hover{background-color:#123150}
.nav-dd-item:focus-visible{outline:2px solid #5cb0da;outline-offset:-2px}
.nav-dd-nom{display:block;font-family:'Montserrat',Arial,sans-serif;font-size:.8125rem;font-weight:600;line-height:1.3;color:#eef2f6;transition:color .15s cubic-bezier(.4,0,.2,1)}
.nav-dd-item:hover .nav-dd-nom{color:#5cb0da}
.nav-dd-sous{display:block;margin-top:.2rem;font-size:.6875rem;line-height:1.45;color:#a8c2d8}
.nav-dd-tout{grid-column:1/-1;margin-top:.35rem;padding:.6rem .7rem .2rem;border-top:1px solid rgba(42,90,120,.3);display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-family:'Montserrat',Arial,sans-serif;font-size:.75rem;font-weight:600;color:#5cb0da;text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1)}
.nav-dd-tout:hover{color:#eef2f6}
.nav-dd-tout:focus-visible{outline:2px solid #5cb0da;outline-offset:-2px}

/* Accordeon mobile : <details> natif, donc clavier, Entree/Espace et aria geres par
   le navigateur, sans une ligne de JS. Classe distincte de .tips, dont le #5cb0da
   ferait passer l'entree pour la page courante. */
.mnav-acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1.5rem;font-family:'Montserrat',Arial,sans-serif;color:rgba(238,242,246,.8);transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}
.mnav-acc>summary::-webkit-details-marker{display:none}
.mnav-acc>summary::after{content:'';flex:none;width:.45rem;height:.45rem;margin-right:.15rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.12rem) rotate(45deg);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.mnav-acc[open]>summary::after{transform:translateY(.08rem) rotate(-135deg)}
.mnav-acc>summary:hover{color:#eef2f6;background-color:rgba(18,49,80,.5)}
.mnav-acc>summary:focus-visible{outline:2px solid #5cb0da;outline-offset:-2px}
.mnav-acc-actif>summary{color:#5cb0da;border-left:2px solid #5cb0da;background-color:rgba(46,123,172,.1);padding-left:calc(1.5rem - 2px)}
.mnav-acc-liste{display:flex;flex-direction:column;padding-bottom:.4rem}
.mnav-acc-liste a{display:block;padding:.7rem 1.5rem .7rem 2.25rem;font-size:.8125rem;line-height:1.4;color:rgba(238,242,246,.7);text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}
.mnav-acc-liste a:hover{color:#eef2f6;background-color:rgba(18,49,80,.5)}
.mnav-acc-liste a:focus-visible{outline:2px solid #5cb0da;outline-offset:-2px}
.mnav-acc-tout{font-weight:600;color:#5cb0da !important}

@media (prefers-reduced-motion:reduce){.nav-dd-panel,.nav-dd-btn svg,.mnav-acc>summary::after{transition:none}}
/* Offres d'emploi — carrieres.html. Les cartes sont generees en JS a partir de
   js/offres.js : le CSS est donc ecrit a la main, les utilitaires Tailwind compiles
   ne couvrant pas ce composant. */
.offres-liste{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){.offres-liste{grid-template-columns:1fr 1fr}}
.offre{display:flex;flex-direction:column;gap:.6rem;padding:1.5rem;background-color:#123150;border:1px solid rgba(42,90,120,.25);border-radius:.5rem;transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.offre:hover{border-color:rgba(92,176,218,.45)}
.offre-titre{margin:0;font-family:'Montserrat',Arial,sans-serif;font-size:1.25rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#eef2f6}
.offre-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.8125rem;line-height:1.5;color:#a8c2d8}
.offre-sep{color:rgba(168,194,216,.45)}
.offre-tags{margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.offre-tag{display:inline-block;padding:.2rem .55rem;background-color:#102a44;border:1px solid rgba(42,90,120,.35);border-radius:.25rem;font-size:.6875rem;line-height:1.55;color:#a8c2d8}
.offre-resume{margin:0;font-size:.875rem;line-height:1.6;color:#a8c2d8}
.offre-lien{margin-top:auto;align-self:flex-start;padding-top:.35rem;font-family:'Montserrat',Arial,sans-serif;font-size:.8125rem;font-weight:600;color:#5cb0da;text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1)}
.offre-lien::after{content:'\A0\2192'}
.offre-lien:hover{color:#eef2f6}
.offre-lien:focus-visible{outline:2px solid #5cb0da;outline-offset:3px;border-radius:2px}

/* Accueil 18/08 : logo agrandi, bouton iris, titre defilant. Ecrit a la main :
   sm:h-10/11/12 ne sont pas compiles, et aucun utilitaire ne fait de degrade de marque. */

/* Logo : 32px etait trop discret dans une barre de 80px. */
.logo-noria{height:2.5rem}
@media (min-width:640px){.logo-noria{height:3.25rem}}

/* Bouton principal, degrade de l'iris du logo (#1C4870 -> #3276A6).
   On s'arrete au bleu moyen : plus clair, le texte blanc passerait sous 4.5:1. */
.btn-iris{display:inline-block;background-image:linear-gradient(135deg,#1C4870 0%,#3276A6 100%);color:#fff;border:1px solid rgba(88,178,221,.35);transition:filter .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.btn-iris:hover{filter:brightness(1.15);box-shadow:0 8px 24px -8px rgba(50,118,166,.65)}
.btn-iris:focus-visible{outline:2px solid #58B2DD;outline-offset:3px}

/* Titre defilant du hero. Le mot visible tourne, la phrase reste. */
.hero-rotor{display:inline-block;position:relative}
.hero-mot{display:inline-block;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}
.hero-mot.sort{opacity:0;transform:translateY(-.22em)}
.hero-mot.entre{opacity:0;transform:translateY(.22em)}

/* Texte reserve aux lecteurs d'ecran : le titre change en continu, on leur sert
   donc une version stable et complete plutot que le mot du moment. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){.hero-mot{transition:none}}

/* Barre de nav : l'entree « Accueil » porte le total a 5 liens + le bouton contact.
   Mesure a 768px : logo 134 + liens 499 + bouton ~120 + marges 48 = 801 > 768.
   Meme comprimes ils ne rentrent pas, donc sous 1024px on masque « Accueil » :
   le logo est deja le lien vers l'accueil, c'est la convention partout. */
@media (min-width:768px) and (max-width:1023px){
  nav .md\:flex > a[href="./"], nav .md\:flex > a[href="/"]{display:none}
  nav .md\:flex{column-gap:.9rem;font-size:.8125rem}
  nav .md\:flex > * + *{margin-left:0}
  nav a[href$="contact.html"]{padding-left:.9rem;padding-right:.9rem;font-size:.8125rem}
  .logo-noria{height:2.5rem}
}
/* Entre 1024 et 1279px les 5 liens tiennent, mais sans respiration : on resserre un peu. */
@media (min-width:1024px) and (max-width:1279px){
  nav .md\:flex{column-gap:1.15rem;font-size:.9375rem}
  nav .md\:flex > * + *{margin-left:0}
}
/* le logo ne doit jamais etre ecrase par le partage de place du flex */
nav > div > a:first-child{flex:none}

/* Les pastilles decoratives en position absolue avec decalage negatif (-right-10, -bottom-10)
   depassent de 1px entre 768 et 1023px, assez pour creer une barre de defilement horizontale.
   `clip` rogne SANS creer de conteneur de defilement : contrairement a `hidden`, il ne casse
   pas les elements en position:sticky des pages secteurs. */
main{overflow-x:clip}

/* Barre d onglets sur petit ecran : a 360px le libelle le plus long (« Achats, supply
   chain & expediting », 344px) depasse la largeur disponible (313px). Le bouton reste
   atteignable — le conteneur parent defile — mais son libelle est tronque tant qu on
   n a pas fait glisser. On resserre padding et corps de texte sous 420px seulement.
   ⚠ Double classe volontaire : la regle .tab-btn vit dans le <style> inline de chaque
   page, place APRES site.css, donc a specificite egale c est elle qui gagne. */
@media (max-width:420px){
  .tab-btn.tab-btn{padding:.85rem .9rem;font-size:.8125rem;letter-spacing:-.02em}
}

/* Correctifs releves par la critique adversariale du 20/08.
   1. .is-closed donne au JS le dernier mot sur la fermeture. Sans elle, Echap retirait
      .is-open puis rendait le focus au bouton, ce qui rallumait :focus-within : le panneau
      restait affiche en annoncant « replie ». Specificite 0,3,0, placee apres la regle
      d ouverture, donc gagnante. */
.nav-dd.is-closed>.nav-dd-panel{opacity:0;visibility:hidden;transform:translateY(-.4rem)}
/*   2. .btn-iris ecrasait .hidden : meme specificite (0,1,0) mais ecrit plus loin dans le
      fichier. Le bouton « Nous contacter » de la barre porte class="hidden sm:inline-block
      btn-iris" — il s affichait donc sous 640px, ou il comprimait logo, libelle sur deux
      lignes et burger jusqu a se toucher. Double classe pour retablir l intention. */
.btn-iris.hidden{display:none}
@media (min-width:640px){.btn-iris.sm\:inline-block{display:inline-block}}

/* ══ IRIS DES VALEURS — page À propos ═══════════════════════════════════════
   Une valeur par pale du logo. Le survol, le focus clavier et le toucher
   activent la même chose : la pale grossit depuis le centre de l'iris, les
   autres s'effacent, et le texte correspondant apparaît. Le build Tailwind
   étant gelé, tout est écrit ici. */
.iris-bloc{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media (min-width:1024px){.iris-bloc{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:4rem}}
.iris-scene{position:relative;width:100%;max-width:380px;margin:0 auto}
.iris-svg{width:100%;height:auto;display:block;overflow:visible}
.iris-pale{cursor:pointer;transform-box:view-box;transform-origin:535px 226px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .28s ease,filter .28s ease}
.iris-pale:focus{outline:none}
.iris-pale:focus-visible{outline:2px solid #5cb0da;outline-offset:4px}
.iris-bloc .iris-pale{opacity:.34}
.iris-bloc[data-actif="0"] .iris-pale[data-v="0"],
.iris-bloc[data-actif="1"] .iris-pale[data-v="1"],
.iris-bloc[data-actif="2"] .iris-pale[data-v="2"],
.iris-bloc[data-actif="3"] .iris-pale[data-v="3"],
.iris-bloc[data-actif="4"] .iris-pale[data-v="4"]{opacity:1;transform:scale(1.09);
  filter:drop-shadow(0 6px 22px rgba(50,118,166,.45))}
.iris-panneau{min-height:12rem}
.iris-onglets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.iris-onglet{font-family:'Inter',sans-serif;font-size:.8125rem;letter-spacing:.02em;
  padding:.4rem .85rem;border-radius:999px;border:1px solid rgba(148,163,184,.22);
  color:#94a3b8;background:transparent;cursor:pointer;transition:all .2s ease}
.iris-onglet:hover{color:#d6e3ff;border-color:rgba(92,176,218,.5)}
.iris-bloc[data-actif="0"] .iris-onglet[data-v="0"],
.iris-bloc[data-actif="1"] .iris-onglet[data-v="1"],
.iris-bloc[data-actif="2"] .iris-onglet[data-v="2"],
.iris-bloc[data-actif="3"] .iris-onglet[data-v="3"],
.iris-bloc[data-actif="4"] .iris-onglet[data-v="4"]{color:#0b1f2e;background:#5cb0da;
  border-color:#5cb0da;font-weight:600}
.iris-texte{display:none}
.iris-bloc[data-actif="0"] .iris-texte[data-v="0"],
.iris-bloc[data-actif="1"] .iris-texte[data-v="1"],
.iris-bloc[data-actif="2"] .iris-texte[data-v="2"],
.iris-bloc[data-actif="3"] .iris-texte[data-v="3"],
.iris-bloc[data-actif="4"] .iris-texte[data-v="4"]{display:block;animation:iris-entre .32s ease both}
@keyframes iris-entre{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
.iris-nom{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:1.75rem;color:#d6e3ff;margin-bottom:.75rem}
@media (min-width:640px){.iris-nom{font-size:2.25rem}}
.iris-para{color:rgba(214,227,255,.78);line-height:1.7;max-width:46ch}
@media (prefers-reduced-motion:reduce){
  .iris-pale{transition:opacity .2s ease}
  .iris-bloc[data-actif] .iris-pale{transform:none!important;filter:none}
  .iris-bloc[data-actif] .iris-texte{animation:none}
}

/* ══ NORIA — LA ROUE À GODETS, page Carrières ═══════════════════════════════
   Une noria est une roue à godets. Deux éléments se répondent :

   LE CADRAN, à gauche : la roue elle-même, dessinée de face avec ses neuf godets,
   son moyeu et ses rayons. Elle tourne d'un cran à chaque avance et met en avant
   le godet actif. C'est elle qui porte l'image — un cylindre vu par la tranche
   n'y suffisait pas, son cercle se projetant sur une simple bande verticale.

   LA PILE, à droite : les cartes arrivent par le haut en arrière, basculent vers
   le lecteur jusqu'à se présenter de face, puis redescendent en s'éloignant.
   Seule celle de devant porte du texte ; les autres se réduisent à leur numéro,
   sans quoi deux paragraphes se superposent et aucun n'est lisible. */
.noria-roue{--r:210px;--pas:19deg}

.noria-scene{position:relative;height:430px;perspective:1000px;perspective-origin:50% 50%}
.noria-godets{position:absolute;inset:0;transform-style:preserve-3d}
.noria-godet{position:absolute;left:50%;top:50%;width:min(92%,600px);margin-left:calc(min(92%,600px) / -2);margin-top:-62px;
  padding:1.4rem 1.6rem;border-radius:.9rem;
  background:rgba(9,26,40,.96);border:1px solid rgba(92,176,218,.14);
  transform:rotateX(calc(var(--d,0) * var(--pas))) translateZ(var(--r));
  transition:transform .6s cubic-bezier(.32,.72,.28,1),opacity .45s ease,border-color .45s ease;
  opacity:0;pointer-events:none;backface-visibility:hidden}
.noria-godet[data-pos="0"]{opacity:1;pointer-events:auto;
  border-color:rgba(92,176,218,.5);box-shadow:0 24px 64px rgba(3,14,23,.75)}
.noria-godet[data-pos="1"]{opacity:.5}
.noria-godet[data-pos="2"]{opacity:.18}
.noria-godet[data-pos="-1"]{opacity:.22}
/* seule la carte de devant porte du texte : les autres se réduisent à leur numéro */
.noria-titre,.noria-para{transition:opacity .35s ease}
.noria-godet:not([data-pos="0"]) .noria-titre{opacity:.5}
.noria-godet:not([data-pos="0"]) .noria-para{display:none}
.noria-godet:not([data-pos="0"]){padding-top:1rem;padding-bottom:1rem}
.noria-num{display:block;font-family:'Montserrat',sans-serif;font-size:.72rem;
  letter-spacing:.24em;color:#5cb0da;margin-bottom:.5rem}
.noria-titre{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:-.015em;
  font-size:1.2rem;color:#d6e3ff;margin-bottom:.55rem;line-height:1.25}
@media (min-width:640px){.noria-titre{font-size:1.45rem}}
.noria-para{color:rgba(214,227,255,.82);line-height:1.65;font-size:.95rem}
.noria-commandes{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:.5rem}
.noria-fleche{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:999px;color:#94a3b8;background:transparent;
  border:1px solid rgba(148,163,184,.24);cursor:pointer;transition:all .2s ease}
.noria-fleche:hover{color:#0b1f2e;background:#5cb0da;border-color:#5cb0da}
.noria-fleche:focus-visible{outline:2px solid #5cb0da;outline-offset:3px}
.noria-fleche[disabled]{opacity:.28;cursor:default}
.noria-fleche[disabled]:hover{color:#94a3b8;background:transparent;border-color:rgba(148,163,184,.24)}
.noria-compteur{font-family:'Montserrat',sans-serif;font-size:.8125rem;letter-spacing:.12em;
  color:#94a3b8;min-width:4.5rem;text-align:center}
.noria-rang{color:#5cb0da;font-weight:700}
@media (max-width:640px){
  .noria-roue{--r:170px;--pas:22deg}
  .noria-scene{height:400px;perspective:760px}
  /* la perspective agrandit la carte de devant : on retire de la largeur de mise en page
     ce que le rapprochement va lui rendre, sinon elle deborde de l ecran */
  .noria-godet{padding:1.1rem 1.2rem;margin-top:-56px;width:78%;margin-left:-39%}
}
@media (prefers-reduced-motion:reduce){
  .noria-godet{transition:opacity .2s ease;transform:translateZ(var(--r))}
  .noria-godet[data-pos="1"],.noria-godet[data-pos="-1"],
  .noria-godet[data-pos="2"],.noria-godet[data-pos="-2"]{opacity:0}
}

/* ══ MICRO-INTERACTIONS — validées au banc d'essai du 22/08/2026 ═══════════
   Les classes doublées (.tag-chip.tag-chip) passent devant le bloc <style> de
   chaque page, qui se charge après cette feuille et gagnerait à spécificité égale.
   Tout est neutralisé plus bas pour qui a demandé moins d'animations. */

/* 1 — les pastilles techniques se signalent.
   4 877 pastilles portent une définition au survol et rien ne le disait. */
.tag-chip.tag-chip{position:relative;transition:color .18s ease,border-color .18s ease,
  background-color .18s ease,transform .18s cubic-bezier(.2,.8,.3,1)}
.tag-chip.tag-chip::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:2px;
  height:1px;background:#5cb0da;transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease}
.tag-chip.tag-chip:hover{color:#eef2f6;border-color:rgba(92,176,218,.45);
  background-color:rgba(42,90,120,.55);transform:translateY(-1px)}
.tag-chip.tag-chip:hover::after,.tag-chip.tag-chip:focus-visible::after{transform:scaleX(1)}
.btn-iris:hover{transform:translateY(-2px);filter:brightness(1.15);
  box-shadow:0 12px 28px -8px rgba(50,118,166,.7)}
.btn-iris:active{transform:translateY(0) scale(.975);
  box-shadow:0 3px 10px -4px rgba(50,118,166,.5);transition-duration:.08s}

/* 3 — apparition au défilement.
   La classe est posée par le script : sans JS, tout reste visible. */
/* Le fondu dure plus longtemps que le deplacement : c est ce decalage qui adoucit.
   La courbe du deplacement decelere longuement au lieu de s arreter net, et will-change
   evite le sursaut de premier rendu, qui se lit lui aussi comme une brusquerie. */
.a-reveler.a-reveler.a-reveler{opacity:0;transform:translateY(10px);will-change:opacity,transform;
  transition:opacity var(--fondu) var(--fondu-courbe),transform var(--long) var(--sortie)}
.a-reveler.a-reveler.a-reveler.est-vu{opacity:1;transform:none}
.a-reveler.est-vu{will-change:auto}

/* 4 — l'onglet actif prend un fond plein qui glisse d'un onglet à l'autre. */
.tab-piste{position:relative}
/* La pastille se deplace en translate3d : c'est la seule facon de la faire glisser
   sur le compositeur. Avant, left/top/width/height etaient animees ensemble — quatre
   proprietes de mise en page — pendant que le panneau reflowait la page. height ne
   varie jamais (les huit boutons font 58 px) : elle est posee, pas animee. */
.tab-fond{position:absolute;left:0;top:0;border-radius:.45rem;background:rgba(92,176,218,.14);
  border:1px solid rgba(92,176,218,.34);pointer-events:none;z-index:0;opacity:0;
  will-change:transform;
  transition:transform var(--pose) var(--glisse),width var(--pose) var(--glisse),opacity .2s ease}
.tab-fond.pret{opacity:1}
.tab-piste .tab-btn{position:relative;z-index:1}
.tab-btn.tab-btn.active{border-bottom-color:transparent}

/* 5 — les cartes de secteur s'élèvent. */
.carte-secteur{transition:transform .26s cubic-bezier(.2,.8,.3,1),
  border-color .26s ease,box-shadow .26s ease}
.carte-secteur:hover{transform:translateY(-4px);border-color:rgba(92,176,218,.4);
  box-shadow:0 18px 40px -12px rgba(3,14,23,.85)}
.sub-secteur-link.sub-secteur-link{transition:color .18s ease,padding-left .22s cubic-bezier(.2,.8,.3,1)}
.sub-secteur-link.sub-secteur-link:hover{padding-left:.5rem}

/* 6 — le soulignement des liens de navigation se déploie. */
.lien-trait{position:relative}
.lien-trait::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:#5cb0da;transform:scaleX(0);transform-origin:right;
  transition:transform .26s cubic-bezier(.4,0,.2,1)}
.lien-trait:hover::after,.lien-trait:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* 7 — les chiffres montent, une seule fois, à leur apparition. */
.chiffre-anime{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .a-reveler{opacity:1;transform:none;transition:none}
  .tag-chip.tag-chip,.btn-iris,.carte-secteur,.tab-fond,.lien-trait::after,
  .sub-secteur-link.sub-secteur-link{transition:none}
  .tag-chip.tag-chip:hover,.btn-iris:hover,.carte-secteur:hover{transform:none}
}
@media print{.a-reveler.a-reveler.a-reveler{opacity:1;transform:none}}

/* ══ SYSTÈME DE MOUVEMENT — tout le site sur les mêmes durées et courbes ═════
   Quatre durées, trois courbes. Écrit en fin de feuille pour passer devant les
   valeurs par défaut de Tailwind et les blocs <style> de page, qui se chargent
   après elle et gagneraient à spécificité égale. */
:root{
  --vif:.24s; --pose:.34s; --ample:.52s; --long:.95s; --fondu:1.05s;
  --sortie:cubic-bezier(.16,.68,.32,1);
  /* le fondu des apparitions : symetrique, lente aux deux bouts. Une sortie douce
     mettait 55 % de l'opacite dans le premier tiers du temps — d'ou l'a-coup. */
  --fondu-courbe:cubic-bezier(.45,.05,.55,.95);
  --douce:cubic-bezier(.25,.46,.45,.94);
  --glisse:cubic-bezier(.32,.72,.28,1);
}

/* les utilitaires Tailwind : on adoucit la courbe partout, et la durée seulement
   là où aucune classe duration-* n'a été posée volontairement */
.transition,.transition-all,.transition-colors,.transition-opacity,.transition-transform,.transition-shadow{
  transition-timing-function:var(--sortie)}
.transition:not([class*="duration-"]),.transition-all:not([class*="duration-"]),
.transition-colors:not([class*="duration-"]),.transition-opacity:not([class*="duration-"]),
.transition-transform:not([class*="duration-"]),.transition-shadow:not([class*="duration-"]){
  transition-duration:var(--pose)}

/* les règles du bloc <style> de chaque page, reprises en classe doublée */
.tag-chip.tag-chip{transition:color var(--pose) var(--sortie),border-color var(--pose) var(--sortie),
  background-color var(--pose) var(--sortie),transform var(--pose) var(--sortie)}
.tab-btn.tab-btn{transition:color var(--pose) var(--sortie),border-color var(--pose) var(--sortie)}
.sub-secteur-link.sub-secteur-link{transition:color var(--vif) var(--sortie),
  padding-left var(--pose) var(--sortie)}
/* l'onglet qui s'ouvre : plus long et plus doux que le fondu d'origine de 300 ms */
.tab-content.tab-content.active{animation:noria-parait var(--ample) var(--douce) both}
@keyframes noria-parait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* les composants écrits à la main */
.nav-dd-panel{transition:opacity var(--pose) var(--sortie),transform var(--pose) var(--sortie),
  visibility var(--pose)}
.nav-dd-item{transition:background-color var(--vif) var(--sortie),color var(--vif) var(--sortie)}
.nav-dd-btn,.nav-dd-tout{transition:color var(--vif) var(--sortie)}
.mnav-acc-liste a{transition:color var(--vif) var(--sortie),padding-left var(--pose) var(--sortie)}
.offre,.offre-lien{transition:border-color var(--pose) var(--sortie),
  background-color var(--pose) var(--sortie),color var(--pose) var(--sortie),
  transform var(--pose) var(--sortie)}
.iris-pale{transition:transform var(--ample) var(--sortie),opacity var(--ample) var(--douce),
  filter var(--ample) var(--douce)}
.iris-onglet{transition:color var(--vif) var(--sortie),border-color var(--vif) var(--sortie),
  background-color var(--vif) var(--sortie)}
.noria-godet{transition:transform var(--long) var(--glisse),opacity var(--ample) var(--douce),
  border-color var(--ample) var(--douce)}
.noria-fleche{transition:color var(--vif) var(--sortie),background-color var(--vif) var(--sortie),
  border-color var(--vif) var(--sortie)}
/* ATTENTION : cette regle est la 4e definition de .tab-fond dans la feuille, et a
   specificite egale c est la derniere qui gagne — elle re-declarait left/top/width/height
   par-dessus la version en translate3d ecrite plus haut. Elle est realignee dessus. */
.tab-fond{transition:transform var(--pose) var(--glisse),width var(--pose) var(--glisse),
  opacity var(--vif) var(--douce)}
.btn-iris{transition:transform var(--pose) var(--sortie),filter var(--pose) var(--sortie),
  box-shadow var(--pose) var(--sortie)}
.btn-iris:active{transition-duration:.1s}
.carte-secteur{transition:transform var(--ample) var(--sortie),border-color var(--ample) var(--douce),
  box-shadow var(--ample) var(--douce)}
.lien-trait::after{transition:transform var(--pose) var(--sortie)}
.tag-chip.tag-chip::after{transition:transform var(--pose) var(--sortie)}
.logo-noria{transition:opacity var(--pose) var(--sortie)}

/* les champs du formulaire de contact, declares dans le <style> de la page */
.form-input.form-input{transition:border-color var(--pose) var(--sortie),
  background-color var(--pose) var(--sortie),box-shadow var(--pose) var(--sortie)}
.form-input.form-input:focus{box-shadow:0 0 0 3px rgba(92,176,218,.12)}
/* les derniers retardataires, releves en navigateur : ils tenaient encore 150 ms */
.nav-dd-nom,.nav-dd-sous{transition:color var(--vif) var(--sortie)}
.nav-dd-btn{transition:color var(--vif) var(--sortie),background-color var(--vif) var(--sortie)}
.nav-dd-btn svg,.mnav-acc>summary::after{transition:transform var(--pose) var(--sortie)}
.mnav-acc>summary{transition:color var(--vif) var(--sortie),background-color var(--vif) var(--sortie)}
.offre{transition:border-color var(--pose) var(--sortie),transform var(--pose) var(--sortie)}
.offre-lien{transition:color var(--vif) var(--sortie)}
#back-to-top{transition:opacity var(--pose) var(--douce),transform var(--pose) var(--sortie)}
.hero-mot{transition:opacity var(--pose) var(--douce),transform var(--pose) var(--sortie)}
.iris-texte{transition:opacity var(--ample) var(--douce)}
.noria-para,.noria-titre{transition:opacity var(--pose) var(--douce)}
@media (prefers-reduced-motion:reduce){
  :root{--vif:.01ms; --pose:.01ms; --ample:.01ms; --long:.01ms; --fondu:.01ms}
}

/* ── Cibles tactiles : téléphone uniquement ───────────────────────────────
   Mesuré en 375 px : pastilles 28 px, liens de pied 22–26 px, fil d'Ariane 17 px.
   On monte à ~40 px. Rien de tout ceci ne s'applique au-dessus de 768 px. */
@media (max-width:767px){
  /* les pastilles techniques : classe doublée pour passer devant le <style> de page */
  .tag-chip.tag-chip{padding-top:.6rem;padding-bottom:.6rem}
  /* les liens du pied de page. Une regle « footer a[href] » posee en juillet donne deja
     .2rem : meme selecteur donc meme specificite, et la notre est plus bas dans la feuille. */
  footer a[href]{padding-top:.5rem;padding-bottom:.5rem}
  /* le lien « Découvrir ce métier » de chaque onglet : inline-flex, sans marge interne */
  .tab-content a[href*="nos-metiers"]{padding-top:.55rem;padding-bottom:.55rem}
  /* le fil d'Ariane : display:inline, la marge agrandit la cible sans rien déplacer */
  [aria-label="Fil d'Ariane"] a{padding-top:.7rem;padding-bottom:.7rem}
}

/* Un grand pan ne monte que de 6 px et compte surtout sur le fondu : au-dela, le
   mouvement se voit au lieu de se sentir. La classe est posee a la volee par site.js,
   apres mesure du bloc. */
.a-reveler.a-reveler.a-reveler.a-reveler-ample{transform:translateY(4px);
  transition:opacity calc(var(--fondu) * 1.2) var(--fondu-courbe),transform var(--long) var(--sortie)}

/* ── Flèche intégrée au lien du menu ──────────────────────────────────────
   Le chevron vit DANS le <a> : une seule surface de survol, un seul arrêt de
   tabulation, un seul clic. Sur l'entrée de la page courante, le soulignement
   passe naturellement sous le libellé ET la flèche, puisqu'ils ne font qu'un. */
.nav-dd-lien{display:inline-flex;align-items:center;gap:.3rem}
.nav-dd-fleche{width:.7rem;height:.7rem;flex:0 0 auto;
  transition:transform var(--pose) var(--sortie)}
/* la flèche suit la couleur du libellé, elle n'a pas de teinte propre */
.nav-dd-fleche{color:inherit}

/* Tablette : une tuile de 3 colonnes tomberait sous 180 px. Paires inégales à la place. */
@media (min-width:768px) and (max-width:1023px){
  [data-mosaique] > :nth-child(1){grid-column:span 7}
  [data-mosaique] > :nth-child(2){grid-column:span 5}
  [data-mosaique] > :nth-child(3){grid-column:span 5}
  [data-mosaique] > :nth-child(4){grid-column:span 7}
  [data-mosaique] > :nth-child(5){grid-column:span 8}
  [data-mosaique] > :nth-child(6){grid-column:span 4}
  [data-mosaique] > :nth-child(7){grid-column:span 4}
  [data-mosaique] > :nth-child(8){grid-column:span 8}
}

/* ── Fondu des images à leur arrivée ──────────────────────────────────────
   Une image en chargement différé se peint d'un coup quand ses octets arrivent :
   aucune transition ne couvre la première peinture. On la tient à zéro tant qu'elle
   n'est pas chargée ; js/site.js retire la classe à l'événement load, et la
   transition déjà posée sur l'image (duration-700) fait le fondu.
   Classe doublée : les blocs <style> de page se chargent après cette feuille. */
.img-arrivee.img-arrivee{opacity:0;transition:none}

/* ── Les deux appels de fin de page (accueil) ─────────────────────────────
   Deux cartes distinctes. mt-auto n'est pas dans le build Tailwind gelé : on l'écrit
   ici, pour que les boutons s'alignent en bas des deux cartes même quand l'une porte
   trois lignes de texte et l'autre quatre. */
.bloc-appel{display:flex;flex-direction:column}
.bloc-appel-corps{display:flex;flex-direction:column;flex:1 1 auto}
.bloc-appel-bas{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.7rem}
/* largeur egale des deux cotes : l'equilibre ne depend alors plus de la longueur des
   libelles. « Candidature spontanée » et « Nous contacter » n'ont pas la meme etendue,
   et sans cette regle la paire de droite s'empilait quand celle de gauche tenait sur
   une ligne — deux structures differentes, donc toujours de travers. */
.bloc-appel-bas > a{min-width:16rem;text-align:center}
@media (max-width:420px){.bloc-appel-bas > a{min-width:0;width:100%}}

/* ── Mosaïque des tuiles de secteur (accueil) ─────────────────────────────
   Rapport de surface entre la plus grande et la plus petite tuile : 2,00.
   La version précédente montait à 4,67 — l'Aéronautique écrasait l'IT.
   Deux tuiles hautes encadrent le haut ; les deux dernières rangées alternent
   5+7 puis 7+5, pour ne pas répéter la même découpe.
   Les tuiles portent des classes md:col-span-* (0,1,0) ; nos sélecteurs valent
   0,1,1 et passent devant. min-height remis à zéro : la rangée commande. */
@media (min-width:1024px){
  [data-mosaique]{grid-auto-rows:minmax(232px,auto)}
  [data-mosaique] > *{min-height:0}
  [data-mosaique] > :nth-child(1){grid-column:1 / span 4;grid-row:1 / span 2}
  /* Transport prend la tuile haute de droite ; Énergie et Nucléaire se partagent les
     deux petites du milieu, comme demandé. L'ordre du DOM reste inchangé. */
  [data-mosaique] > :nth-child(2){grid-column:9 / span 4;grid-row:1 / span 2}
  [data-mosaique] > :nth-child(3){grid-column:5 / span 4;grid-row:2}
  [data-mosaique] > :nth-child(4){grid-column:5 / span 4;grid-row:1}
  [data-mosaique] > :nth-child(5){grid-column:1 / span 5;grid-row:3}
  [data-mosaique] > :nth-child(6){grid-column:6 / span 7;grid-row:3}
  [data-mosaique] > :nth-child(7){grid-column:1 / span 7;grid-row:4}
  [data-mosaique] > :nth-child(8){grid-column:8 / span 5;grid-row:4}
}
/* Tablette : paires alternées 7/5 puis 5/7, jamais deux rangées identiques. */
@media (min-width:768px) and (max-width:1023px){
  [data-mosaique] > :nth-child(1){grid-column:span 7}
  [data-mosaique] > :nth-child(2){grid-column:span 5}
  [data-mosaique] > :nth-child(3){grid-column:span 5}
  [data-mosaique] > :nth-child(4){grid-column:span 7}
  [data-mosaique] > :nth-child(5){grid-column:span 7}
  [data-mosaique] > :nth-child(6){grid-column:span 5}
  [data-mosaique] > :nth-child(7){grid-column:span 5}
  [data-mosaique] > :nth-child(8){grid-column:span 7}
}

/* ── Recherche de secteur, dans la bande des accès directs ────────────────
   Le champ partage la ligne avec les pastilles de famille : il prend une largeur
   fixe à gauche, les pastilles occupent le reste et passent à la ligne au besoin.
   Sous 768 px il prend toute la largeur et les pastilles s'installent dessous.
   Palette du site : conteneur rgb(18 49 80), contour rgb(42 90 120),
   accent rgb(92 176 218), texte rgb(238 242 246). */
.sec-cherche-boite{position:relative;flex:0 1 21rem;min-width:15rem;z-index:45}
@media (max-width:767px){.sec-cherche-boite{flex:1 1 100%}}
.sec-cherche-boite > svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  width:1.05rem;height:1.05rem;color:rgb(168 194 216);pointer-events:none;
  transition:color var(--pose) var(--sortie)}
.sec-cherche-boite:focus-within > svg{color:rgb(92 176 218)}
.sec-champ{width:100%;padding:.55rem .8rem .55rem 2.5rem;border-radius:.375rem;
  border:1px solid rgb(42 90 120);background:rgb(18 49 80);color:rgb(238 242 246);
  font-family:'Inter',sans-serif;font-size:.8125rem;line-height:1.5;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--pose) var(--sortie),box-shadow var(--pose) var(--sortie),
             background-color var(--pose) var(--sortie)}
.sec-champ::placeholder{color:rgb(168 194 216);opacity:.7}
.sec-champ::-webkit-search-cancel-button{-webkit-appearance:none}
.sec-champ:focus{outline:none;border-color:rgb(92 176 218);background:rgb(22 58 92);
  box-shadow:0 0 0 3px rgba(92,176,218,.16)}

.sec-liste{position:absolute;z-index:50;top:calc(100% + .35rem);left:0;
  width:max(100%,26rem);max-width:calc(100vw - 2rem);
  list-style:none;padding:.3rem;margin:0;border-radius:.5rem;
  border:1px solid rgb(42 90 120);background:rgb(13 33 54);
  box-shadow:0 18px 46px rgba(0,0,0,.45);
  max-height:min(22rem,60vh);overflow-y:auto;overscroll-behavior:contain;text-align:left}
.sec-liste[hidden]{display:none}
.sec-opt{display:block;padding:.55rem .7rem;border-radius:.35rem;cursor:pointer;
  text-decoration:none;color:inherit;
  transition:background-color var(--vif) var(--sortie)}
.sec-opt:hover,.sec-opt.vise{background:rgba(42,90,120,.45)}
.sec-opt:focus-visible{outline:2px solid rgb(92 176 218);outline-offset:-2px}
.sec-opt-tete{display:flex;align-items:baseline;gap:.7rem}
.sec-opt-nom{font-weight:600;font-size:.85rem;color:rgb(238 242 246);flex:1 1 auto}
.sec-opt-fam{font-size:.68rem;color:rgb(168 194 216);flex:0 0 auto;text-align:right}
.sec-opt-quoi{font-size:.7rem;color:rgb(148 211 193);margin-top:.1rem}
.sec-opt mark{background:rgba(92,176,218,.3);color:inherit;border-radius:2px;padding:0 1px}
.sec-rien{padding:.8rem .7rem;font-size:.8rem;color:rgb(168 194 216)}
.sec-rien a{color:rgb(92 176 218);text-decoration:underline;text-underline-offset:3px}
.sec-compte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Densité de la page d'accueil sur téléphone ───────────────────────────
   9 890 px, soit 12,2 écrans, dont 52 % pour deux sections. Ce ne sont pas les
   textes qui prennent la place mais les marges : py-28 vaut 112 px en haut ET en
   bas, p-10 vaut 40 px de tous côtés — sur 375 px de large, cela mange le quart
   de la largeur utile. On resserre sous 768 px seulement ; rien n'est retiré.
   Les variantes responsives (sm:py-20, md:p-10) sont absentes du build gelé,
   d'où cette règle écrite à la main. */
@media (max-width:767px){
  main > section.py-28{padding-top:3.5rem;padding-bottom:3.5rem}
  main > section.py-20{padding-top:3rem;padding-bottom:3rem}
  main .p-10{padding:1.5rem}
  /* les tuiles de secteur : 262 px chacune, huit d'affilée */
  [data-mosaique] > *{min-height:13.5rem}
}

/* ── Bouton principal — le mélange retenu au banc d'essai du 22/08/2026 ────
   Couleurs d'origine — diagonal #1C4870 → #3276A6 — dans le corps du « relief doux »,
   avec le halo du « plein franc » et le liseré du « verre dépoli ».
   Ce bloc doit rester EN FIN DE FEUILLE : dix règles visent déjà .btn-iris, dont
   deux filter:brightness(1.15) au survol qu'il faut annuler — d'où filter:none.
   Contraste vérifié sur les six nuances, repos et survol : pire cas 4,80:1. */
.btn-iris{
  /* deux couches sur la MÊME diagonale : le voile iris part du coin haut-gauche et
     s'efface avant la moitié ; le dégradé d'origine court en dessous, intact.
     Le voile est du côté sombre parce que c'est le seul qui ait de la marge de
     contraste : côté clair, même 10 % ferait tomber le survol à 4,48:1. */
  background-image:linear-gradient(to bottom right,rgba(63,157,133,.18) 0%,rgba(63,157,133,0) 58%),
                   linear-gradient(135deg,#1C4870 0%,#3276A6 100%);
  color:#fff;border:1px solid rgba(10,26,42,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -2px 0 rgba(8,22,36,.4),
             0 3px 8px -2px rgba(0,0,0,.5)}
.btn-iris:hover{
  /* l'ancien bouton eclaircissait par filter:brightness(1.15), qui aurait pousse
     l'extremite claire a ~#3A88BC, soit 3,87:1 — sous le minimum. Teintes explicites. */
  background-image:linear-gradient(to bottom right,rgba(63,157,133,.2) 0%,rgba(63,157,133,0) 58%),
                   linear-gradient(135deg,#1F4F7A 0%,#337AAB 100%);
  filter:none;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44),
             inset 0 -2px 0 rgba(8,22,36,.4),
             0 12px 30px -8px rgba(92,176,218,.7),
             0 0 0 1px rgba(146,203,232,.5)}
.btn-iris:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(8,22,36,.58),
             inset 0 -1px 0 rgba(255,255,255,.1),
             0 0 14px -4px rgba(92,176,218,.4)}



/* mouvement réduit : on garde l'apparence, on retire le déplacement */
@media (prefers-reduced-motion:reduce){
  .btn-iris:hover,.btn-iris:active{transform:none}
}

/* Le bouton secondaire suit le principal : il se soulève au survol, s'enfonce au clic.
   Le sélecteur exige une classe de graisse (font-bold, font-label…) : c'est ce qui
   distingue un vrai bouton d'une pastille de famille, qui n'en porte pas. Sans cette
   condition, les 8 pastilles de nos-secteurs seraient prises dedans. */
a[class*="border-outline-variant"][class*="rounded-md"][class*="font-"]{
  transition:transform var(--pose) var(--sortie),border-color var(--pose) var(--sortie),
             background-color var(--pose) var(--sortie),box-shadow var(--pose) var(--sortie)}
a[class*="border-outline-variant"][class*="rounded-md"][class*="font-"]:hover{
  border-color:rgba(146,203,232,.75);
  box-shadow:0 8px 22px -10px rgba(92,176,218,.45);
  transform:translateY(-2px)}
a[class*="border-outline-variant"][class*="rounded-md"][class*="font-"]:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(8,22,36,.4);
  transition-duration:.1s}
@media (prefers-reduced-motion:reduce){
  a[class*="border-outline-variant"][class*="rounded-md"][class*="font-"]:hover,
  a[class*="border-outline-variant"][class*="rounded-md"][class*="font-"]:active{transform:none}
}

/* ── Pied de page resserré ────────────────────────────────────────────────
   496 px sur ordinateur et 831 px sur téléphone, dont environ 320 de vide.
   On réduit les intervalles, on ne retire aucun contenu. Écrit à la main : le
   build Tailwind est gelé, et le téléphone demande un réglage plus serré. */
footer > .max-w-7xl{padding-top:2rem;padding-bottom:1.75rem}
/* le bloc identité + contact */
footer > .max-w-7xl > .grid:first-child{margin-bottom:1.25rem;gap:2rem}
/* la navigation et la ligne légale, et leurs séparateurs */


/* le bandeau legal — dernier enfant du conteneur du pied.
   Il portait pt-8 + mt-8 : 64 px de vide pour une seule ligne de 12 px.
   ATTENTION il etait vise par « nav + div ». La navigation etant remontee dans la
   grille, ce selecteur touchait la colonne Contact et la descendait de 48 px. */
footer > .max-w-7xl > div:last-child{padding-top:1rem;margin-top:1rem;gap:.75rem}
footer h4[class]{margin-bottom:.75rem}

/* Les largeurs du pied. md:grid-cols-4 donnait 592 / 280 / 280 : la colonne identite
   gaspillait 144 px (son paragraphe est plafonne a max-w-md, 448 px) pendant que la
   navigation etouffait. On repart sur trois colonnes proportionnees au contenu.
   Specificite 0,3,0 — il faut battre .md:grid-cols-4 et .md:col-span-2 (0,1,0). */
@media (min-width:768px){
  footer > .max-w-7xl > .grid:first-child{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,1fr)}
  footer > .max-w-7xl > .grid:first-child > :first-child{grid-column:auto}
}
/* Trois colonnes de liens seulement a partir de 1024 px : en dessous la navigation
   ne ferait que 230 px et « Nos secteurs » (87 px) deborderait. */
/* Entre 1024 et 1279 px la navigation manque de 2 px pour « Nos secteurs ». Elle prend
   sur la colonne contact, qui a du mou : « contact@noriagroupe.fr » ne fait que ~150 px.
   Au-dela de 1280 on revient aux proportions de base, sans quoi la colonne identite
   passerait sous 448 px et son paragraphe gagnerait une troisieme ligne. */
@media (min-width:1024px) and (max-width:1279px){
  footer > .max-w-7xl > .grid:first-child{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1.65fr) minmax(0,.95fr)}
}
@media (min-width:1024px){
  footer nav[aria-label="Navigation de bas de page"] > ul{
    grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:.6rem}
}
/* gap-x-4 et gap-y-3 ne sont pas compiles dans le build gele : sans cette regle les
   six liens se touchent. Verifie en navigateur — column-gap valait « normal ». */
footer nav[aria-label="Navigation de bas de page"] > ul{column-gap:1.25rem;row-gap:.7rem}

@media (max-width:767px){
  footer > .max-w-7xl{padding-top:2rem;padding-bottom:1.5rem}
  footer > .max-w-7xl > .grid:first-child{margin-bottom:1.25rem;gap:1.25rem}
  /* six liens en trois colonnes tiennent en deux lignes au lieu de trois */
  footer nav[aria-label="Navigation de bas de page"] > ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}

  footer > .max-w-7xl > div:last-child{padding-top:.875rem;margin-top:.875rem;gap:.35rem}
  /* les trois liens legaux : leur pastille tactile fait deja la separation verticale */
  footer > .max-w-7xl > div:last-child > div{column-gap:1.1rem;row-gap:0}
}

/* Titre defilant de l'accueil — rythme d'apparition (23/08/2026)
   Ces regles arrivent apres les deux precedentes definitions de .hero-mot : a
   specificite egale c'est la derniere qui gagne, et l'ancienne valait --pose (.34 s)
   pour la sortie COMME pour l'entree. On dissocie les deux. */
.hero-mot{transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.hero-mot.sort{transition-duration:.34s}
/* l'etat d'entree se pose d'un coup ; c'est son RELACHEMENT qui s'anime */
.hero-mot.entre{transition:none}
@media (prefers-reduced-motion:reduce){.hero-mot,.hero-mot.sort{transition:none}}

/* Onglets metiers — barre de defilement et empilement des panneaux (23/08/2026)

   overflow-x-auto force overflow-y a « auto » (des qu'un axe n'est plus visible,
   l'autre passe a auto). Un depassement sub-pixel — zoom, densite d'ecran — suffit
   alors a faire apparaitre une barre VERTICALE rendue par le systeme, donc blanche
   sur fond sombre. On la coupe et on habille l'horizontale, la seule qui serve. */
/* 2 px de garde en bas : la pastille affleure desormais exactement le bas de la piste,
   et un arrondi sub-pixel suffirait a faire rogner sa bordure par overflow-y:hidden. */
.tab-barre{overflow-y:hidden;padding-bottom:2px;scrollbar-width:thin;
  scrollbar-color:rgba(92,176,218,.4) transparent}
.tab-barre::-webkit-scrollbar{height:6px}
.tab-barre::-webkit-scrollbar-track{background:transparent}
.tab-barre::-webkit-scrollbar-thumb{background:rgba(92,176,218,.4);border-radius:99px}
.tab-barre::-webkit-scrollbar-thumb:hover{background:rgba(92,176,218,.6)}

/* Les huit panneaux dans une seule cellule de grille : le conteneur prend la hauteur
   du plus grand et ne bouge plus. Avant, display:none -> block reflowait la page a
   chaque clic (85 px d'ecart entre le plus court et le plus long panneau), et ce
   reflow mangeait les premieres frames du glissement de la pastille.
   visibility:hidden — et pas seulement opacity — pour que les lecteurs d'ecran et la
   tabulation ignorent les panneaux inactifs. Elle se retire sans delai a l'entree,
   et attend la fin du fondu a la sortie. */
.tab-pile{display:grid}
.tab-pile > .tab-content.tab-content{grid-area:1 / 1;display:block;opacity:0;
  visibility:hidden;transform:translateY(6px);pointer-events:none;animation:none;
  transition:opacity .16s ease,transform 0s .16s,visibility 0s .16s}
.tab-pile > .tab-content.tab-content.active{opacity:1;visibility:visible;transform:none;
  pointer-events:auto;animation:none;
  transition:opacity .28s ease .12s,transform var(--pose) var(--glisse) .12s,visibility 0s}
@media (prefers-reduced-motion:reduce){
  .tab-fond{transition:opacity .2s ease}
  .tab-pile > .tab-content.tab-content{transition:opacity .2s ease,visibility 0s .2s;transform:none}
}

/* Blocs secteur — le rail de droite s'empile (23/08/2026)
   Sous-secteurs et normes etaient cote a cote sur 683 px : deux colonnes courtes
   face a un texte haut, d'ou 247 px de vide en moyenne sous elles (420 sur IT).
   Empiles dans 469 px, ils s'allongent pendant que le texte, elargi, raccourcit.
   Ecrit a la main : lg:grid-cols-1 n'est pas compilee dans le build gele.
   En dessous de 1024 px la mise en page est deja empilee, on n'y touche pas. */
@media (min-width:1024px){
  .sec-rail.sec-rail{grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
}

/* Les liens de sous-secteur font 20 px de haut : sous la barre des 32 px, on vise mal
   au doigt. Releve avant correction : 39 cibles trop petites sur cette page.
   Le critere n est pas la largeur mais le POINTEUR : une tablette de 800 px se touche
   au doigt comme un telephone. hover:none couvre les deux, et epargne le bureau. */
@media (max-width:767px), (hover:none){
  .sub-secteur-link.sub-secteur-link{padding-top:.4rem;padding-bottom:.4rem}
}

/* Second niveau du menu deroulant — le nom et sa legende (23/08/2026)

   Le rapport de corps n'etait que de 1,18 (13 px contre 11) et les interlignes
   separes de 0,95 px : deux lignes qui se suivent avec la meme respiration se lisent
   comme un paragraphe. On separe les corps ET on pose un filet qui s'eteint.

   ⚠ Un linear-gradient NE S'INTERPOLE PAS d'un etat a l'autre : transitionner
   `background` ferait un saut sec. Le degrade est donc pose une seule fois a pleine
   intensite, et c'est l'opacite du pseudo-element qui s'anime au survol. */
.nav-dd-nom.nav-dd-nom{font-size:.875rem;font-weight:600;line-height:1.25}
.nav-dd-sous.nav-dd-sous{position:relative;margin-top:.3rem;padding-left:.6rem;
  font-size:.625rem;line-height:1.5;color:#93aec6}
.nav-dd-sous.nav-dd-sous::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;border-radius:1px;
  background:linear-gradient(to bottom,rgba(92,176,218,.85) 0%,
    rgba(92,176,218,.22) 55%,rgba(92,176,218,0) 100%);
  opacity:.45;transition:opacity var(--vif) var(--sortie)}
.nav-dd-item:hover .nav-dd-sous::before,
.nav-dd-item:focus-visible .nav-dd-sous::before{opacity:1}
@media (prefers-reduced-motion:reduce){
  .nav-dd-sous.nav-dd-sous::before{transition:none}
}

/* Credit photo sous la legende des quatre associes. Ecrit a la main plutot quen
   text-on-surface-variant/70 : les variantes dopacite ne sont pas toutes compilees
   dans le build gele, et on veut maitriser le contraste au point pres. */
.credit-photo{display:block;margin-top:.75rem;font-size:.8125rem;line-height:1.5;color:#8aa6bf}