*, ::before, ::after {
  --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: rgb(59 130 246 / 0.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: rgb(59 130 246 / 0.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
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Polices servies par le thème (copiées depuis @fontsource par `npm run build:fonts`). */

@font-face {
  font-family: "Poppins";

  font-style: normal;

  font-display: swap;

  font-weight: 300;

  src: url("../assets/fonts/poppins-latin-ext-300-normal.woff2") format("woff2");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";

  font-style: normal;

  font-display: swap;

  font-weight: 300;

  src: url("../assets/fonts/poppins-latin-300-normal.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: "Poppins";

  font-style: normal;

  font-display: swap;

  font-weight: 600;

  src: url("../assets/fonts/poppins-latin-ext-600-normal.woff2") format("woff2");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";

  font-style: normal;

  font-display: swap;

  font-weight: 600;

  src: url("../assets/fonts/poppins-latin-600-normal.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: "Poppins";

  font-style: normal;

  font-display: swap;

  font-weight: 700;

  src: url("../assets/fonts/poppins-latin-ext-700-normal.woff2") format("woff2");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";

  font-style: normal;

  font-display: swap;

  font-weight: 700;

  src: url("../assets/fonts/poppins-latin-700-normal.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: "Poppins";

  font-style: normal;

  font-display: swap;

  font-weight: 900;

  src: url("../assets/fonts/poppins-latin-ext-900-normal.woff2") format("woff2");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";

  font-style: normal;

  font-display: swap;

  font-weight: 900;

  src: url("../assets/fonts/poppins-latin-900-normal.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: "Poppins";

  font-style: italic;

  font-display: swap;

  font-weight: 300;

  src: url("../assets/fonts/poppins-latin-ext-300-italic.woff2") format("woff2");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";

  font-style: italic;

  font-display: swap;

  font-weight: 300;

  src: url("../assets/fonts/poppins-latin-300-italic.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: "Open Sans Variable";

  font-style: normal;

  font-display: swap;

  font-weight: 300 800;

  src: url("../assets/fonts/open-sans-latin-ext-wght-normal.woff2") format("woff2-variations");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans Variable";

  font-style: normal;

  font-display: swap;

  font-weight: 300 800;

  src: url("../assets/fonts/open-sans-latin-wght-normal.woff2") format("woff2-variations");

  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;
}

/* =========================================================
   Productions Alpha
   Fond clair biaisé bleu nuit, l'encre de la marque, le cyan
   pour l'action, un bleu ciel pour les accents.
   ========================================================= */

:root {
  --papier: #F6F8FB;
  --surface: #FFFFFF;
  --encre: #081A2A;
  --encre-2: #1F3040;
  --sourdine: #5D6C7B;
  --filet: #DDE4EB;
  --cyan: #00B1E6;
  --cyan-fonce: #0088B5;
  --ciel: #8AD8F6;
  --ciel-doux: #E6F5FC;
  --nuit: #081A2A;
  --nuit-2: #0E2436;
  --titre: "Poppins", "Segoe UI", Arial, sans-serif;
  --texte: "Open Sans Variable", "Segoe UI", Arial, sans-serif;
  --max: 1360px;
  --gouttiere: clamp(20px, 4vw, 56px);
  --rayon: 6px;
  /* Cartes et champs posés sur le fond de page. */
  --carte: #FFFFFF;
  --champ: #FFFFFF;
  --champ-filet: #BFDDEC;
  color-scheme: light;
}

/* Mode sombre (thème par défaut) : les mêmes teintes, inversées. Le bleu nuit devient le fond,
   le papier devient l'encre. Les sections nuit passent sur le bleu de surface et les sections ciel doux
   restent sur le fond, pour garder l'alternance de la version claire. */

html[data-theme="sombre"] {
  --papier: #081A2A;
  --surface: #0E2436;
  --encre: #F6F8FB;
  --encre-2: #DDE4EB;
  --sourdine: color-mix(in srgb, #F6F8FB 68%, #081A2A);
  --filet: rgba(255, 255, 255, .14);
  --ciel-doux: #081A2A;
  --nuit: #0E2436;
  --nuit-2: #1F3040;
  --carte: #0E2436;
  --champ: #081A2A;
  --champ-filet: rgba(255, 255, 255, .18);
  color-scheme: dark;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Une ancre (#formations…) s'arrête sous l'en-tête collant au lieu de passer dessous. */

[id] {
  scroll-margin-top: 96px;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 17px/1.65 var(--texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Les espacements sont portés par les conteneurs flex : les paragraphes n'apportent pas les leurs. */

p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* --- Typographie --- */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.t-1 {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.05;
}

.t-2 {
  font-size: clamp(32px, 4.3vw, 60px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.028em;
}

/* Accent des titres : la seconde moitié passe en italique léger, comme une voix off. */

.t-2 em, .hero-titre em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
}

.lettres .t-2 em, .confiance .t-2 em {
  color: var(--ciel);
}

.t-3 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
}

.t-4 {
  font-size: 19px;
  line-height: 1.3;
}

.p-grand {
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.6;
}

.p-petit {
  font-size: 15px;
  line-height: 1.55;
}

.eyebrow {
  font: 600 12px/1 var(--texte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sourdine);
}

.point {
  color: var(--cyan);
}

.sourdine {
  color: var(--sourdine);
}

.mesure {
  max-width: 62ch;
}

/* --- Boutons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  border-radius: var(--rayon);
  font: 600 15px/1 var(--texte);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}

.btn:active {
  transform: translateY(1px);
}

.btn-encre {
  background: var(--encre);
  color: var(--papier);
}

.btn-encre:hover {
  background: var(--cyan-fonce);
  color: #fff;
}

.btn-cyan {
  background: var(--cyan);
  color: #081A2A;
}

.btn-cyan:hover {
  background: #fff;
  border-color: #081A2A;
}

.btn-contour {
  border-color: var(--encre);
  color: var(--encre);
  background: transparent;
}

.btn-contour:hover {
  background: var(--encre);
  color: var(--papier);
}

.btn-clair {
  background: #fff;
  color: #081A2A;
}

.btn-clair:hover {
  background: var(--ciel);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* --- Structure --- */

.contenant {
  width: min(var(--max), 100% - 2 * var(--gouttiere));
  margin-inline: auto;
}

section {
  padding-block: clamp(64px, 9vw, 128px);
}

.entete-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.entete-section .t-2 {
  max-width: 17ch;
}

.entete-section p {
  max-width: 60ch;
}

/* En-tête de section sur deux colonnes : grand titre à gauche, texte d'introduction calé en bas à droite derrière un filet. */

@media (min-width: 900px) {
  .contenant > .entete-section {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    -moz-column-gap: clamp(40px, 6vw, 96px);
         column-gap: clamp(40px, 6vw, 96px);
    row-gap: 22px;
  }

  .contenant > .entete-section > .t-2 {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .contenant > .entete-section > p {
    flex: 0 0 32%;
    margin-bottom: 8px;
    padding-left: 24px;
    border-left: 1px solid var(--filet);
  }
}

/* Deux colonnes à partir de la tablette ; empilées avant, sinon la page déborde sur mobile. */

.deux-col {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vw, 96px);
  align-items: stretch;
}

.deux-col > * {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 900px) {
  .deux-col {
    flex-direction: row;
    align-items: flex-start;
  }
}

.filet-h {
  height: 1px;
  background: var(--filet);
  border: 0;
  margin: 0;
}

/* --- Header caméléon --- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}

.entete.est-defile {
  border-bottom-color: var(--filet);
  box-shadow: 0 10px 30px -24px rgba(8, 26, 42, .5);
}

.entete > .contenant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 86px;
}

.logo img {
  height: 40px;
  width: auto;
}

.logo .logo-sombre, html[data-theme="sombre"] .logo .logo-clair {
  display: none;
}

html[data-theme="sombre"] .logo .logo-sombre {
  display: block;
}

/* Bascule clair / sombre : le soleil s'affiche en mode sombre, la lune en mode clair. */

.bascule-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 50%;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.bascule-theme:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.bascule-theme svg {
  width: 18px;
  height: 18px;
}

.bascule-theme .icone-soleil, html[data-theme="sombre"] .bascule-theme .icone-lune {
  display: none;
}

html[data-theme="sombre"] .bascule-theme .icone-soleil {
  display: block;
}

.nav {
  display: none;
  align-self: stretch;
}

/* Les éléments occupent toute la hauteur de l'en-tête : la souris passe au panneau sans quitter l'élément. */

.nav > ul {
  display: flex;
  gap: 34px;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav > ul > li {
  display: flex;
  align-items: center;
}

.nav > ul > li > a, .nav .menu-declencheur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  position: relative;
  font: 600 14px/1 var(--texte);
  letter-spacing: .02em;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav > ul > li > a::after, .nav .menu-declencheur::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--cyan);
  transition: right .25s;
}

.nav > ul > li > a:hover::after, .nav .menu-declencheur:hover::after, .nav .menu-declencheur[aria-expanded="true"]::after, .nav > ul > li.est-actif > :first-child::after {
  right: 0;
}

.chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s;
}

[aria-expanded="true"] > .chevron {
  transform: translateY(1px) rotate(225deg);
}

/* Méga menu : panneau pleine largeur sous l'en-tête, sous-pages à gauche, image à droite.
   Le panneau se cale sur l'en-tête (position sticky), pas sur l'élément du menu. */

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--papier);
  border-block: 1px solid var(--filet);
  box-shadow: 0 40px 60px -40px rgba(8, 26, 42, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s, transform .25s, visibility 0s .25s;
}

.est-ouvert > .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s, transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}

.mega-grille {
  display: flex;
  align-items: stretch;
  gap: clamp(40px, 5vw, 80px);
  padding-block: 40px 48px;
}

.mega-liste {
  flex: 0 0 min(440px, 40%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mega-liste ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--filet);
  transition: padding-left .25s;
}

.mega-liste li:last-child .mega-lien {
  border-bottom: 1px solid var(--filet);
}

.mega-lien-titre {
  font-family: var(--titre);
  font-weight: 600;
}

.mega-lien svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--cyan);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .2s, transform .25s;
}

.mega-lien:hover, .mega-lien:focus-visible {
  padding-left: 8px;
}

.mega-lien:hover svg, .mega-lien:focus-visible svg {
  opacity: 1;
  transform: none;
}

/* Les images sont superposées : celle de la sous-page survolée apparaît en fondu. */

.mega-image {
  flex: 1 1 0;
  min-width: 0;
  min-height: 300px;
  margin: 0;
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--nuit);
}

.mega-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity .35s;
}

.mega-image img.est-visible {
  opacity: 1;
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Sur mobile le bouton « Nous contacter » passe dans le menu : le header garde le logo et le burger. */

.entete-actions .btn {
  display: none;
}

.burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--encre);
}

.menu-mobile {
  display: none;
  position: fixed;
  inset: 86px 0 0;
  background: var(--papier);
  padding: 32px var(--gouttiere);
  flex-direction: column;
  gap: 22px;
  z-index: 49;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-mobile.est-ouvert {
  display: flex;
}

.menu-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.menu-mobile a, .menu-mobile .menu-declencheur {
  font: 600 22px/1.2 var(--titre);
}

/* Sous-pages en accordéon sous leur rubrique. */

.menu-mobile .menu-declencheur {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.menu-mobile .sous-menu {
  gap: 14px;
  margin-top: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--filet);
}

.menu-mobile .sous-menu[hidden] {
  display: none;
}

.menu-mobile .sous-menu a {
  font: 600 17px/1.3 var(--texte);
}

.menu-mobile .btn {
  align-self: flex-start;
  font-size: 15px;
}

@media (min-width: 1024px) {
  .nav {
    display: block;
  }

  .entete-actions .btn {
    display: inline-flex;
  }

  .burger {
    display: none;
  }
}

/* =========================================================
   Lettres lumineuses en CSS : le corps de la lettre est en
   aluminium bleu nuit, les ampoules sont une trame de points
   découpée dans le même glyphe et posée par-dessus.
   ========================================================= */

.ampoules {
  --bulb: #00B1E6;
  /* bleu : couleur d'ampoule sélectionnée par défaut */
  --corps: var(--encre);
  position: relative;
  display: inline-block;
  font: 900 1em/0.98 var(--titre);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--corps);
  white-space: pre-wrap;
}

.ampoules::after {
  content: attr(data-mot);
  position: absolute;
  inset: 0;
  color: transparent;
  background-image: radial-gradient(circle, var(--bulb) 0 .026em, transparent .036em);
  background-size: .12em .12em;
  background-position: .03em .04em;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 .035em var(--bulb));
  pointer-events: none;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 88px);
  overflow: clip;
}

.hero-grille {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero-texte {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero-titre {
  font-size: clamp(38px, 5.2vw, 78px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0;
  max-width: 13ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Slider du hero : une diapositive à la fois, flèches et jauge en bas à droite ; une diapositive peut être une vidéo. */

.hero-slider {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--nuit);
}

.hero-piste {
  display: flex;
  height: 100%;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.hero-diapo {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  position: relative;
}

.hero-diapo img, .hero-diapo video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.hero-diapo figcaption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 10px 14px;
  background: rgba(8, 26, 42, .78);
  color: #fff;
  font: 600 12px/1.3 var(--texte);
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.hero-jauge {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  gap: 6px;
}

.hero-jauge span {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}

.hero-jauge span::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--rempli, 0) * 100%);
  background: var(--ciel);
}

.hero-fleches {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 8px;
}

.hero-fleche {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: rgba(8, 26, 42, .55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .2s, color .2s;
}

.hero-fleche:hover {
  background: #fff;
  color: #081A2A;
}

.hero-fleche svg {
  width: 16px;
  height: 16px;
}

.hero-fleche-prec svg {
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .hero-grille {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }

  .hero-texte {
    flex: 0 0 56%;
  }

  .hero-slider {
    flex: 1 1 0;
    aspect-ratio: 4 / 5;
  }
}

/* =========================================================
   Clients : bandeau qui défile en boucle
   ========================================================= */

/* --- Confiance : chiffres clés sur fond nuit, logos clients en défilement --- */

.confiance {
  background: var(--nuit);
  color: #fff;
  padding-block: clamp(64px, 8vw, 120px) clamp(48px, 6vw, 88px);
  overflow: hidden;
}

.confiance .entete-section {
  margin-bottom: 0;
}

.confiance-haut {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(48px, 6vw, 88px);
}

.chiffres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.14);
}

.chiffre {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.chiffre strong {
  font: 700 clamp(56px, 7vw, 96px)/.95 var(--titre);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.chiffre strong small {
  font-size: .5em;
  color: var(--ciel);
  vertical-align: top;
  margin-left: 4px;
}

.chiffre > span {
  color: color-mix(in srgb, #fff 62%, var(--nuit));
  font-size: 16px;
}

@media (min-width: 720px) {
  .chiffres {
    flex-direction: row;
    border-top: 0;
  }

  .chiffre {
    flex: 1 1 33.333%;
    padding: 8px 32px 8px 0;
    border-bottom: 0;
    border-left: 1px solid rgba(255,255,255,.14);
    padding-left: 28px;
  }

  .chiffre:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

@media (min-width: 1024px) {
  .confiance-haut {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .confiance .entete-section {
    flex: 0 0 38%;
  }

  .chiffres {
    flex: 0 0 56%;
  }
}

.defile {
  overflow: hidden;
  position: relative;
}

.defile::before, .defile::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.defile::before {
  left: 0;
  background: linear-gradient(90deg, var(--nuit), transparent);
}

.defile::after {
  right: 0;
  background: linear-gradient(270deg, var(--nuit), transparent);
}

.rail {
  display: flex;
  align-items: center;
  gap: 80px;
  width: -moz-max-content;
  width: max-content;
  animation: defilement 38s linear infinite;
}

.rail img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .55;
  transition: opacity .2s;
}

.rail img:hover {
  opacity: 1;
}

.defile:hover .rail {
  animation-play-state: paused;
}

@keyframes defilement {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   Par où commencer : un sommaire, pas trois cartes
   ========================================================= */

.portes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.porte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--rayon);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding: 28px;
  background: var(--nuit) var(--photo) center / cover no-repeat;
  min-height: 360px;
}

.porte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,26,42,.25) 0%, rgba(8,26,42,.62) 50%, rgba(8,26,42,.92) 100%);
  transition: background-color .5s;
}

.porte-tete {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.porte-tete .eyebrow {
  color: var(--ciel);
}

.porte-tete .t-3 {
  color: #fff;
}

.porte-corps p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  max-width: 40ch;
  margin-bottom: 14px;
}

.porte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.porte li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.2);
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s, padding-left .25s;
}

.porte li a:hover {
  color: var(--ciel);
  padding-left: 8px;
}

.porte li a svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ciel);
}

.porte-lien {
  display: inline-block;
  margin-top: 18px;
  font-weight: 600;
  color: var(--ciel);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
}

/* Mobile : la hauteur suit le contenu, avec une marge haute pour laisser voir la photo au-dessus du titre. */

@media (max-width: 899px) {
  .porte {
    min-height: 0;
    padding-top: 96px;
  }
}

/* En sombre, la carte se détache du fond par un filet ; le voile laisse le haut de la photo intact
   et ne fonce que sous le texte, sans voile supplémentaire sur les cartes fermées. */

html[data-theme="sombre"] .porte {
  border: 1px solid var(--filet);
}

html[data-theme="sombre"] .porte::before,
html[data-theme="sombre"] .porte:not(.est-ouverte)::before {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(8,26,42,0) 0%, rgba(8,26,42,0) 35%, rgba(8,26,42,.55) 65%, rgba(8,26,42,.9) 100%);
}

@media (min-width: 900px) {
  /* Bureau : les trois portes tiennent sur une ligne, la porte ouverte prend la place, les autres se resserrent. */

  .portes {
    flex-direction: row;
    height: clamp(460px, 40vw, 560px);
  }

  .porte {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    transition: flex-grow .7s cubic-bezier(.22, .61, .36, 1);
    cursor: pointer;
  }

  .porte.est-ouverte {
    flex-grow: 2.6;
    cursor: default;
  }

  .porte-corps {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .6s cubic-bezier(.22, .61, .36, 1), opacity .3s;
  }

  .porte.est-ouverte .porte-corps {
    max-height: 320px;
    opacity: 1;
    transition: max-height .7s cubic-bezier(.22, .61, .36, 1) .1s, opacity .5s .3s;
  }

  .porte:not(.est-ouverte)::before {
    background-color: rgba(8,26,42,.3);
  }
}

/* =========================================================
   Lettres : la seule section sombre, parce que la lumière
   se voit dans le noir.
   ========================================================= */

.lettres {
  background: var(--nuit);
  color: #fff;
  overflow: hidden;
}

.lettres .sourdine {
  color: color-mix(in srgb, #fff 70%, var(--nuit));
}

.lettres-entete {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.lettres-entete .entete-section {
  margin-bottom: 0;
}

.specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.specs li {
  font-size: 14px;
  color: color-mix(in srgb, #fff 72%, var(--nuit));
  display: flex;
  align-items: center;
  gap: 10px;
}

.specs li::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--ciel);
  flex: none;
}

/* L'atelier : réglages à gauche, photo à droite. */

.atelier {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* La scène : la salle vide en photo (cadre 3:2, jamais recadrée), le mot posé sur le sol.
   Les tailles de lettres sont en cqw pour rester proportionnées à la photo. */

.scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 3 / 2;
  border-radius: var(--rayon);
  background: var(--nuit);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--scene) center / cover no-repeat;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,26,42,.45) 0%, rgba(8,26,42,.1) 35%, rgba(8,26,42,0) 60%, rgba(8,26,42,.55) 100%);
}

.scene-affiche {
  position: absolute;
  inset: 0;
}

/* Halo des ampoules projeté au sol, dans la couleur choisie. */

.scene-affiche::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 90%;
  height: 46%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--bulb-scene, #00B1E6) 38%, transparent), transparent 70%);
}

/* Le sol de la photo passe sous les lettres à 40 % du bas du cadre. */

.scene-mot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40%;
  margin: 0;
  text-align: center;
  line-height: 1;
}

.scene-affiche .ampoules {
  --corps: #2a3038;
  color: var(--corps);
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 24px 40px rgba(0,0,0,.55);
  -webkit-box-reflect: below 0 linear-gradient(transparent 45%, rgba(0,0,0,.55));
}

/* Sur la scène, les ampoules rayonnent plus loin, comme dans la photo. */

.scene-affiche .ampoules::after {
  background-image: radial-gradient(circle, #fff 0 .012em, var(--bulb) .012em .03em, transparent .04em);
  filter: drop-shadow(0 0 .04em var(--bulb)) drop-shadow(0 0 .3em color-mix(in srgb, var(--bulb) 55%, transparent));
}

/* Clignotement d'enseigne : les ampoules tiennent allumées, hésitent deux fois, s'éteignent un court instant, puis se rallument.
   Le halo au sol suit le même rythme pour que la lumière reste crédible. */

@keyframes clignote {
  0%, 58%  {
    opacity: 1;
  }

  61%      {
    opacity: .25;
  }

  64%      {
    opacity: 1;
  }

  68%      {
    opacity: .15;
  }

  71%      {
    opacity: .9;
  }

  76%, 88% {
    opacity: .08;
  }

  92%      {
    opacity: .8;
  }

  95%      {
    opacity: .3;
  }

  100%     {
    opacity: 1;
  }
}

.scene-affiche .ampoules::after, .scene-affiche::before {
  animation: clignote 4.2s linear infinite;
}

/* --n : nombre de lettres, posé par le script. Le facteur --k réduit les trois hauteurs du même
   coefficient pour qu'un mot de 6 lettres en 1,8 m tienne dans le cadre : les proportions
   60 cm / 1 m / 1,8 m restent donc toujours visibles. */

.scene-affiche .ampoules {
  --k: min(1, calc(105 / var(--n, 5) / 42));
}

.scene-affiche .ampoules.taille-60  {
  font-size: calc(14cqw * var(--k));
}

.scene-affiche .ampoules.taille-100 {
  font-size: calc(24cqw * var(--k));
}

.scene-affiche .ampoules.taille-180 {
  font-size: calc(42cqw * var(--k));
}

.scene-legende {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.scene-legende span {
  font: 600 12px/1 var(--texte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ciel);
}

.scene-legende strong {
  font: 600 16px/1.3 var(--titre);
  letter-spacing: .02em;
}

/* La console : réglages alignés sur une ligne, séparés par des filets. */

.console {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.commande {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.commande > label, .commande > span {
  font: 600 12px/1 var(--texte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 62%, var(--cyan));
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.commande > label small {
  font: 400 12px/1 var(--texte);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.45);
}

.champ-mot {
  width: 100%;
  padding: 6px 0 10px;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid rgba(255,255,255,.35);
  font: 700 clamp(30px, 3.2vw, 44px)/1 var(--titre);
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: border-color .2s;
}

.champ-mot::-moz-placeholder {
  color: rgba(255,255,255,.25);
}

.champ-mot::placeholder {
  color: rgba(255,255,255,.25);
}

.champ-mot:focus {
  outline: none;
  border-color: var(--ciel);
}

/* Sélecteur de hauteur : un bouton souligné et une liste maison, le select natif reste caché
   pour porter la valeur. */

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.selecteur {
  position: relative;
}

.selecteur-bouton {
  width: 100%;
  padding: 6px 36px 10px 0;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid rgba(255,255,255,.35);
  font: 700 clamp(22px, 2.2vw, 30px)/1 var(--titre);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s;
}

.selecteur-bouton:focus-visible {
  outline: none;
  border-color: var(--ciel);
}

.selecteur-bouton::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 12px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  border-right: 2px solid var(--ciel);
  border-bottom: 2px solid var(--ciel);
  transform: rotate(45deg);
  transition: transform .25s;
}

.selecteur.est-ouvert .selecteur-bouton {
  border-color: var(--ciel);
}

.selecteur.est-ouvert .selecteur-bouton::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.selecteur-liste {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--nuit-2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--rayon);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.6);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

.selecteur.est-ouvert .selecteur-liste {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.selecteur-liste li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,.8);
}

.selecteur-liste li strong {
  font: 700 18px/1 var(--titre);
  color: #fff;
  min-width: 3.4em;
}

.selecteur-liste li small {
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

.selecteur-liste li:hover, .selecteur-liste li.est-cible {
  background: rgba(255,255,255,.07);
}

.selecteur-liste li[aria-selected="true"] {
  background: rgba(138,216,246,.16);
}

.selecteur-liste li[aria-selected="true"] strong {
  color: var(--ciel);
}

.selecteur-liste li[aria-selected="true"]::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 12px;
  border-right: 2px solid var(--ciel);
  border-bottom: 2px solid var(--ciel);
  transform: rotate(45deg);
}

.couleurs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

.couleurs label {
  position: relative;
  width: 30px;
  height: 30px;
}

.couleurs input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.couleurs .goutte {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform .15s;
}

.couleurs input:checked + .goutte {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px var(--nuit), 0 0 0 5px #fff, 0 0 18px var(--c);
}

.couleurs input:focus-visible + .goutte {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* Le devis : entête à gauche, champs soulignés sur une ligne. */

.formulaire-lettres {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid rgba(255,255,255,.14);
  --retard: 120ms;
}

.formulaire-lettres .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.devis-entete {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.devis-entete p {
  max-width: 60ch;
}

.devis-pied {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 900px) {
  .lettres-entete {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }

  .lettres-entete .entete-section {
    flex: 0 0 58%;
  }

  .atelier {
    flex-direction: row;
    align-items: center;
    gap: clamp(40px, 5vw, 72px);
  }

  .atelier .console {
    flex: 0 0 36%;
    min-width: 0;
  }

  .atelier .scene {
    flex: 1 1 0;
    min-width: 0;
  }

  .devis-pied {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .devis-pied .consentement {
    max-width: 46ch;
  }
}

/* --- Champs de formulaire (clair et sombre) --- */

.champs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rangee {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 640px) {
  .rangee {
    flex-direction: row;
  }

  .rangee > * {
    flex: 1 1 0;
  }
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.champ label {
  font: 600 13px/1 var(--texte);
  letter-spacing: .04em;
}

.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--rayon);
  border: 1px solid var(--filet);
  background: var(--champ);
  color: var(--encre);
  transition: border-color .2s, box-shadow .2s;
}

.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 177, 230, .22);
}

.champ textarea {
  min-height: 120px;
  resize: vertical;
}

/* Liste déroulante maison : le select natif reste caché pour porter la valeur, un bouton montre le choix
   et une liste blanche s'ouvre sous le champ. */

.deroulant {
  position: relative;
}

.deroulant-bouton {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  color: var(--encre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deroulant-bouton:focus-visible {
  outline: none;
}

.deroulant-bouton.est-vide {
  color: #93A3B1;
}

.deroulant-menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--carte);
  border: 1px solid var(--champ-filet);
  border-radius: var(--rayon);
  box-shadow: 0 18px 40px -14px rgba(8, 26, 42, .28);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}

.deroulant.est-ouvert .deroulant-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.deroulant-menu li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.3;
  color: var(--encre);
  transition: background-color .12s;
}

.deroulant-menu li.est-vide {
  color: #93A3B1;
}

.deroulant-menu li:hover, .deroulant-menu li.est-cible {
  background: var(--ciel-doux);
}

.deroulant-menu li[aria-selected="true"] {
  font-weight: 600;
  color: var(--cyan-fonce);
}

.deroulant-menu li[aria-selected="true"]::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
}

.consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
}

.consentement input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--cyan);
  flex: none;
}

.lettres .champ label {
  font: 600 12px/1 var(--texte);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 62%, var(--cyan));
}

.lettres .champ input {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding: 10px 0 12px;
  color: #fff;
  font-size: 16px;
  color-scheme: dark;
}

.lettres .champ input:focus {
  box-shadow: none;
  border-color: var(--ciel);
}

.lettres .champ input::-moz-placeholder {
  color: rgba(255,255,255,.35);
}

.lettres .champ input::placeholder {
  color: rgba(255,255,255,.35);
}

.lettres .rangee {
  flex-wrap: wrap;
  gap: 28px;
}

.lettres .rangee > * {
  flex: 1 1 220px;
}

.lettres .consentement {
  color: color-mix(in srgb, #fff 75%, var(--nuit));
}

/* =========================================================
   Types d'événements
   ========================================================= */

/* Panneaux à fond fixe : la photo reste calée sur la fenêtre, le contenu défile par-dessus
   (motif « fenêtre » de praxy et MAM). Sur écran tactile, le fond suit le défilement. */

.evenements {
  padding-bottom: 0;
}

.evenements .entete-section {
  margin-bottom: clamp(36px, 5vw, 64px);
}

.evenements.sans-entete {
  padding-top: 0;
}

.panneaux {
  display: flex;
  flex-direction: column;
}

.panneau {
  position: relative;
  isolation: isolate;
  color: #fff;
  min-height: clamp(460px, 72vh, 760px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(40px, 6vw, 88px);
  border-top: 1px solid rgba(255,255,255,.18);
}

.panneau::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--fond) center / cover no-repeat fixed;
}

.panneau::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,26,42,.15) 0%, rgba(8,26,42,.55) 55%, rgba(8,26,42,.88) 100%);
}

.panneau .contenant {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panneau-index {
  font: 600 12px/1 var(--texte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ciel);
  display: flex;
  align-items: center;
  gap: 12px;
}

.panneau-index::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ciel);
}

.panneau h3 {
  color: #fff;
  max-width: 14ch;
}

.panneau p {
  max-width: 46ch;
  color: rgba(255,255,255,.78);
  font-size: 17px;
}

.panneau .btn {
  align-self: flex-start;
  margin-top: 10px;
  --retard: 120ms;
}

@media (min-width: 900px) {
  .panneau .contenant {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }

  .panneau-texte {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 0 0 56%;
  }

  .panneau .btn {
    margin-top: 0;
    align-self: auto;
  }

  .panneau:nth-child(even) .contenant {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
}

@media (hover: none) {
  .panneau::before {
    background-attachment: scroll;
  }
}

/* =========================================================
   La conduite : le déroulé d'un événement, top par top
   ========================================================= */

/* Conduite : titre épinglé à gauche, les quatre tops défilent à droite. Le top qui passe au centre
   de la fenêtre est « actif » : pleine opacité, numéro cyan, compteur et barre mis à jour. */

.conduite {
  background: var(--surface);
  border-block: 1px solid var(--filet);
}

.conduite-grille {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
}

.conduite-fixe {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.conduite-fixe .entete-section {
  margin-bottom: 0;
}

.conduite-progres {
  display: flex;
  align-items: center;
  gap: 16px;
}

.conduite-compteur {
  font: 600 13px/1 var(--texte);
  letter-spacing: .14em;
  color: var(--sourdine);
  font-variant-numeric: tabular-nums;
}

.conduite-compteur b {
  color: var(--encre);
  font-size: 22px;
  font-family: var(--titre);
  letter-spacing: 0;
}

.conduite-barre {
  flex: 1 1 0;
  max-width: 220px;
  height: 2px;
  background: var(--filet);
  overflow: hidden;
}

.conduite-barre i {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--cyan);
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}

.tops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.top {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 0;
  border-top: 1px solid var(--filet);
  transition: opacity .5s;
}

.top-numero {
  font: 900 clamp(48px, 6vw, 88px)/1 var(--titre);
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--encre);
  transition: color .4s, -webkit-text-stroke-color .4s;
}

.top.est-actif .top-numero {
  color: var(--cyan);
  -webkit-text-stroke-color: var(--cyan);
}

.top-corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-corps .eyebrow {
  color: var(--cyan-fonce);
}

.top-corps h3 {
  max-width: 12ch;
}

.top-corps p:last-child {
  margin: 0;
  color: var(--sourdine);
  max-width: 44ch;
}

.top-photo {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--nuit);
}

.top-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 900px) {
  .top {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 48px 0;
    min-height: 62vh;
  }

  .top-numero {
    flex: 0 0 110px;
  }

  .top-corps {
    flex: 1 1 0;
  }

  .top-photo {
    flex: 0 0 34%;
    aspect-ratio: 4 / 5;
  }

  .tops .top:not(.est-actif) {
    opacity: .32;
  }
}

@media (min-width: 1024px) {
  .conduite-grille {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(48px, 6vw, 96px);
  }

  .conduite-fixe {
    flex: 0 0 34%;
    position: sticky;
    top: 120px;
  }

  .tops {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* =========================================================
   Réalisations
   ========================================================= */

/* Par où commencer : photo floutée en fond fixe sous un voile papier. */

.explorer {
  position: relative;
  isolation: isolate;
}

.explorer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--fond) center / cover no-repeat fixed;
}

.explorer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--papier) 0%, color-mix(in srgb, var(--papier) 70%, transparent) 30%, color-mix(in srgb, var(--papier) 64%, transparent) 70%, var(--papier) 100%);
}

@media (hover: none) {
  .explorer::before {
    background-attachment: scroll;
  }
}

/* Réalisations : photo floutée en fond fixe, voile papier par-dessus, cartes en flux normal.
   Le fond reste calé sur la fenêtre pendant que les cartes défilent. */

.realisations {
  position: relative;
  isolation: isolate;
}

.realisations::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--fond) center / cover no-repeat fixed;
}

.realisations::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--papier) 0%, color-mix(in srgb, var(--papier) 78%, transparent) 30%, color-mix(in srgb, var(--papier) 72%, transparent) 70%, var(--papier) 100%);
}

@media (hover: none) {
  .realisations::before {
    background-attachment: scroll;
  }
}

.realisations-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.realisation {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.realisation:nth-child(3n + 2) {
  --retard: 120ms;
}

.realisation:nth-child(3n) {
  --retard: 240ms;
}

.realisation figure {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--nuit);
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 48px -24px rgba(8,26,42,.45);
}

.realisation:first-child figure {
  aspect-ratio: 4 / 5;
}

.realisation img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.realisation:hover img {
  transform: scale(1.04);
}

.realisation-legende {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.realisation-legende .eyebrow {
  color: var(--cyan-fonce);
}

/* Sur fond sombre, les surtitres et le choix de la liste passent du cyan foncé au cyan. */

html[data-theme="sombre"] :is(.top-corps .eyebrow, .realisation-legende .eyebrow, .carte-realisation .eyebrow, .fiche-titre .eyebrow, .deroulant-menu li[aria-selected="true"]) {
  color: var(--cyan);
}

.realisations-pied {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* =========================================================
   Pages de liste (réalisations, conseils) et fiche réalisation
   ========================================================= */

.entete-page {
  padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 56px);
}

.entete-page .entete-section {
  margin-bottom: 0;
}

/* Le filtre reste collé sous l'en-tête pendant le défilement de la liste, sur un fond de page pleine largeur.
   Une fois collé (.est-colle, posé par src/js/modules/filtre.js), il se resserre. */

.filtres {
  position: sticky;
  top: 86px;
  z-index: 40;
  margin-top: clamp(36px, 5vw, 64px);
  padding-block: clamp(24px, 3vw, 36px) 16px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid transparent;
  background: var(--papier);
  box-shadow: 0 0 0 100vmax var(--papier);
  clip-path: inset(0 -100vmax);
  transition: padding .3s, border-color .3s;
}

.filtres.est-colle {
  padding-block: 12px;
  border-top-color: transparent;
  border-bottom-color: var(--filet);
}

/* La piste est centrée sur la largeur du contenu. */

.filtres {
  display: flex;
  justify-content: center;
}

/* Filtre : les choix dans une piste arrondie ; une pastille cyan glisse sous le choix actif (filtres.a-pastille,
   posée par le script). Sans script, le choix actif est surligné. Sur mobile, la piste défile horizontalement. */

.filtres ul {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  gap: 6px;
  margin: 0;
  padding: 8px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--surface);
}

.filtres ul::-webkit-scrollbar {
  display: none;
}

.filtres li {
  flex: none;
}

.filtres a {
  position: relative;
  z-index: 1;
  display: block;
  padding: clamp(14px, 1.4vw, 18px) clamp(20px, 2.4vw, 34px);
  border-radius: 999px;
  font: 600 clamp(15px, 1.2vw, 17px)/1 var(--texte);
  white-space: nowrap;
  color: var(--sourdine);
  transition: color .3s, background-color .3s, padding .3s, font-size .3s;
}

.filtres a:hover {
  color: var(--encre);
}

.filtres a.est-actif {
  color: #081A2A;
  background: var(--cyan);
}

.filtres.a-pastille a.est-actif {
  background: transparent;
}

.filtres-pastille {
  position: absolute;
  z-index: 0;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 8px 24px -10px var(--cyan);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), width .45s cubic-bezier(.22, .61, .36, 1), opacity .2s;
}

.filtres.a-pastille .filtres-pastille {
  opacity: 1;
}

/* Collée sous l'en-tête, la piste reprend une taille compacte. */

.filtres.est-colle a {
  padding: 11px 22px;
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .filtres-pastille {
    transition: none;
  }
}

/* Mobile : une liste déroulante pleine largeur, à l'allure de la piste, remplace les choix. */

.filtres-mobile {
  display: none;
  position: relative;
  width: 100%;
}

.filtres-mobile select {
  width: 100%;
  padding: 14px 48px 14px 22px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre);
  font: 600 16px/1.2 var(--texte);
}

.filtres-mobile select:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 177, 230, .18);
}

.filtres-mobile .chevron {
  position: absolute;
  right: 24px;
  top: 50%;
  margin-top: -4px;
  pointer-events: none;
  color: var(--cyan);
}

.filtres.est-colle .filtres-mobile select {
  padding-block: 11px;
  font-size: 15px;
}

@media (max-width: 639px) {
  .filtres ul {
    display: none;
  }

  .filtres-mobile {
    display: block;
  }
}

/* Cartes de réalisations sur trois colonnes (réalisations similaires d'une fiche). */

.mosaique-realisations {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carte-realisation {
  flex: 1 1 100%;
  min-width: 0;
}

.carte-realisation:nth-child(3n + 2) {
  --retard: 120ms;
}

.carte-realisation:nth-child(3n) {
  --retard: 240ms;
}

.carte-realisation a {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carte-realisation figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--nuit);
  box-shadow: 0 24px 48px -24px rgba(8, 26, 42, .45);
}

.carte-realisation img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.carte-realisation a:hover img {
  transform: scale(1.04);
}

/* Flèche cerclée qui apparaît en bas à droite de la photo au survol. */

.carte-fleche {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  color: #081A2A;
  opacity: 0;
  transform: rotate(-45deg) scale(.8);
  transition: opacity .25s, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.carte-fleche svg {
  width: 18px;
  height: 18px;
}

.carte-realisation a:hover .carte-fleche, .carte-realisation a:focus-visible .carte-fleche {
  opacity: 1;
  transform: none;
}

.carte-realisation-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carte-realisation-corps .eyebrow {
  color: var(--cyan-fonce);
}

@media (min-width: 900px) {
  .carte-realisation {
    flex: 0 0 calc((100% - 48px) / 3);
  }

  .carte-realisation figure {
    aspect-ratio: 4 / 5;
  }
}

/* Défileur de réalisations (template-parts/defileur-realisations.php) : piste pleine largeur qui défile
   librement ; la première diapositive s'aligne sur le contenu de la page, les suivantes filent jusqu'au bord. */

.defileur {
  padding-block: 0 clamp(56px, 7vw, 96px);
}

.defileur-piste {
  --marge: max(var(--gouttiere), (100% - var(--max)) / 2);
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-inline: var(--marge);
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.defileur-piste::-webkit-scrollbar {
  display: none;
}

.defileur-piste.est-glisse {
  cursor: grabbing;
}

.defileur-piste.est-glisse .defileur-diapo {
  pointer-events: none;
}

.defileur-piste:focus-visible {
  outline-offset: -3px;
}

.defileur-diapo {
  position: relative;
  isolation: isolate;
  flex: 0 0 min(72vw, 1100px);
  height: clamp(320px, 38vw, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(28px, 5vw, 80px);
  padding-top: max(80px, clamp(28px, 5vw, 80px));
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--nuit);
  color: #fff;
}

.defileur-diapo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.defileur-diapo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8,26,42,.75) 0%, rgba(8,26,42,.35) 55%, rgba(8,26,42,.1) 100%);
}

.defileur-diapo:hover img {
  transform: scale(1.03);
}

.defileur-titre {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(78%, 760px);
}

/* Titre limité à quatre lignes : il reste sous les pastilles des types. */

.defileur-titre .t-1 {
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: -.03em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Types en pastilles verre dépoli en haut à droite ; la marge haute de la diapositive leur est réservée pour que
   les titres longs ne passent pas dessous. */

.defileur-types {
  position: absolute;
  top: clamp(18px, 2.4vw, 28px);
  right: clamp(18px, 2.4vw, 28px);
  left: clamp(18px, 2.4vw, 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}

.defileur-type {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(8,26,42,.35);
  backdrop-filter: blur(8px);
  font: 600 11px/1 var(--texte);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

.defileur-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
}

.defileur-pied .p-petit {
  font-weight: 600;
}

.defileur-barre {
  flex: 0 1 240px;
  height: 2px;
  background: var(--filet);
  overflow: hidden;
}

.defileur-barre i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--encre);
  transition: width .3s;
}

.defileur-compteur {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 15px/1 var(--titre);
  font-variant-numeric: tabular-nums;
}

.defileur-compteur span {
  width: 40px;
  height: 1px;
  background: var(--filet);
}

/* Mobile : titre plus petit sur toute la largeur de la diapositive, coupé après cinq lignes. */

@media (max-width: 639px) {
  .defileur-diapo {
    flex-basis: 86vw;
    height: clamp(300px, 105vw, 420px);
    justify-content: flex-end;
    gap: 12px;
    padding: 64px 20px 22px;
  }

  .defileur-diapo::before {
    background: linear-gradient(180deg, rgba(8,26,42,.15) 0%, rgba(8,26,42,.55) 45%, rgba(8,26,42,.9) 100%);
  }

  .defileur-titre {
    max-width: 100%;
  }

  .defileur-titre .t-1 {
    font-size: clamp(22px, 7vw, 28px);
    line-height: 1.12;
    -webkit-line-clamp: 5;
    overflow-wrap: break-word;
  }

  .defileur-types {
    top: 16px;
    right: 16px;
    left: 16px;
    gap: 6px;
  }

  .defileur-type {
    padding: 6px 10px;
    font-size: 10px;
  }

  .defileur-pied .p-petit {
    display: none;
  }
}

/* En-tête des pages de liste : le nom de la page en lettres géantes pleines sur toute la largeur (taille selon
   le nombre de lettres, plafonnée pour les mots courts), la phrase d'accroche à droite derrière un filet. */

.entete-geant {
  padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px);
  overflow: hidden;
}

.entete-geant .contenant {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
}

.titre-geant {
  margin: 0;
  font: 700 min(calc(min(100vw - 2 * var(--gouttiere), var(--max)) / (var(--lettres, 10) * .52)), 240px)/.9 var(--titre);
  letter-spacing: -.045em;
  white-space: nowrap;
}

.entete-geant-texte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 46ch;
}

.entete-geant-texte .t-3 {
  font-family: var(--titre);
  font-weight: 300;
}

.entete-geant-texte .t-3 em {
  font-weight: 300;
}

@media (min-width: 900px) {
  .entete-geant-texte {
    align-self: flex-end;
    padding-left: 24px;
    border-left: 1px solid var(--filet);
  }
}

/* Grille décalée des réalisations : deux colonnes de grandes photos, la colonne de droite (.est-decale, posée
   sur une carte visible sur deux) descendue d'un cran. Une seule liste, pour garder l'ordre de lecture sur mobile. */

.liste-realisations {
  padding-top: 0;
}

.grille-decalee {
  margin-top: clamp(40px, 5vw, 72px);
}

@media (min-width: 900px) {
  .grille-decalee {
    justify-content: space-between;
    gap: clamp(56px, 7vw, 120px) 0;
    padding-bottom: clamp(120px, 14vw, 220px);
  }

  /* À gauche des photos carrées, à droite des portraits un peu plus étroits. */

  .grille-decalee .carte-realisation {
    flex: 0 0 48%;
  }

  .grille-decalee .carte-realisation figure {
    aspect-ratio: 1;
  }

  .grille-decalee .carte-realisation.est-decale {
    flex-basis: 40%;
    transform: translateY(clamp(120px, 14vw, 220px));
  }

  .grille-decalee .carte-realisation.est-decale figure {
    aspect-ratio: 4 / 5;
  }

  .grille-decalee .carte-realisation .t-3 {
    font-size: clamp(24px, 2.4vw, 32px);
  }

  html.anim .grille-decalee [data-apparait].est-decale {
    transform: translateY(calc(clamp(120px, 14vw, 220px) + 18px));
  }

  html.anim .grille-decalee [data-apparait].est-vu.est-decale {
    transform: translateY(clamp(120px, 14vw, 220px));
  }
}

/* Chargement d'un filtre (réalisations, conseils) : la liste s'estompe, trois ampoules cyan s'allument tour à tour au-dessus. */

.liste-realisations .contenant, .liste-conseils .contenant {
  position: relative;
}

[data-filtre-liste] {
  transition: opacity .25s, filter .25s;
}

[data-filtre-liste].est-chargement {
  opacity: .25;
  filter: grayscale(.6);
  pointer-events: none;
}

.chargement {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 12px;
  margin-top: clamp(80px, 10vw, 140px);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.chargement.est-visible {
  opacity: 1;
}

.chargement i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: ampoule 0.9s ease-in-out infinite;
}

.chargement i:nth-child(2) {
  animation-delay: .15s;
}

.chargement i:nth-child(3) {
  animation-delay: .3s;
}

@keyframes ampoule {
  0%, 100% {
    opacity: .2;
    transform: scale(.8);
  }

  40% {
    opacity: 1;
    transform: none;
  }
}

/* Grille décalée : les détails (types, titre, lieu et date) sont posés sur la photo. Au survol ou au focus,
   un voile monte du bas puis les lignes glissent l'une après l'autre ; la flèche passe en haut à droite.
   Sans survol (écran tactile), les détails restent affichés. */

.grille-decalee .carte-realisation a {
  position: relative;
  isolation: isolate;
  border-radius: var(--rayon);
  overflow: hidden;
}

.grille-decalee .carte-realisation figure {
  box-shadow: none;
}

.grille-decalee .carte-realisation a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,26,42,0) 35%, rgba(8,26,42,.55) 65%, rgba(8,26,42,.92) 100%);
  transition: opacity .5s, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.grille-decalee .carte-realisation-corps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(22px, 2.6vw, 36px);
  color: #fff;
}

.grille-decalee .carte-realisation-corps .eyebrow {
  color: var(--ciel);
}

.grille-decalee .carte-realisation-corps .t-3 {
  color: #fff;
  max-width: 18ch;
}

.grille-decalee .carte-realisation-corps .sourdine {
  color: rgba(255, 255, 255, .75);
}

.grille-decalee .carte-fleche {
  top: 18px;
  bottom: auto;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .grille-decalee .carte-realisation a::after {
    opacity: 0;
    transform: translateY(30%);
  }

  .grille-decalee .carte-realisation-corps > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .35s, transform .5s cubic-bezier(.22, .61, .36, 1);
  }

  .grille-decalee .carte-realisation a:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: none;
  }

  .grille-decalee .carte-realisation a:is(:hover, :focus-visible) .carte-realisation-corps > * {
    opacity: 1;
    transform: none;
  }

  .grille-decalee .carte-realisation a:is(:hover, :focus-visible) .carte-realisation-corps > :nth-child(1) {
    transition-delay: .08s;
  }

  .grille-decalee .carte-realisation a:is(:hover, :focus-visible) .carte-realisation-corps > :nth-child(2) {
    transition-delay: .16s;
  }

  .grille-decalee .carte-realisation a:is(:hover, :focus-visible) .carte-realisation-corps > :nth-child(3) {
    transition-delay: .24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grille-decalee .carte-realisation a::after, .grille-decalee .carte-realisation-corps > * {
    transition: opacity .2s;
    transform: none;
  }
}

/* Éléments qui réapparaissent après un changement de filtre. */

.est-filtree {
  animation: element-filtre .5s cubic-bezier(.22, .61, .36, 1);
}

@keyframes element-filtre {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .est-filtree {
    animation: none;
  }
}

/* Bloc Liste : une ligne par élément entre deux filets ; au survol, le titre glisse, l'icône et la flèche passent en cyan. */

.liste-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

.liste-lignes li:nth-child(3n + 2) {
  --retard: 80ms;
}

.liste-lignes li:nth-child(3n) {
  --retard: 160ms;
}

.liste-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--filet);
}

.liste-icone {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
  color: var(--cyan-fonce);
  transition: background-color .25s, color .25s;
}

.liste-icone svg {
  width: 24px;
  height: 24px;
}

html[data-theme="sombre"] .liste-icone {
  color: var(--cyan);
}

a.liste-ligne:hover .liste-icone {
  background: var(--cyan);
  color: #081A2A;
}

.liste-titre {
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(22px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.liste-texte {
  order: 4;
  flex: 1 1 100%;
  max-width: 52ch;
}

.liste-fleche {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--filet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--encre);
  transition: background-color .25s, border-color .25s, color .25s, transform .35s;
}

.liste-fleche svg {
  width: 16px;
  height: 16px;
}

a.liste-ligne:hover .liste-fleche, a.liste-ligne:focus-visible .liste-fleche {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #081A2A;
  transform: rotate(-45deg);
}

@media (min-width: 900px) {
  .liste-ligne {
    flex-wrap: nowrap;
    gap: 32px;
    padding: 32px 0;
  }

  .liste-icone {
    width: 64px;
    height: 64px;
  }

  .liste-icone svg {
    width: 30px;
    height: 30px;
  }

  .liste-texte {
    order: 0;
    flex: 0 0 34%;
  }

  a.liste-ligne:hover .liste-titre {
    transform: translateX(16px);
  }
}

/* Bloc Mosaïque : bord à bord ; par rangée, deux tuiles de couleur numérotées et une grande photo titrée. */

.mosaique {
  padding-bottom: 0;
}

.mosaique-rangee {
  display: flex;
  flex-direction: column;
}

.mosaique-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 340px;
  padding: 64px 28px 40px;
  text-align: center;
}

.mosaique-tuile.est-cyan {
  background: var(--cyan);
  color: #081A2A;
}

.mosaique-tuile.est-nuit {
  background: var(--nuit);
  color: #fff;
}

.mosaique-tuile.est-cyan .eyebrow {
  color: #081A2A;
  opacity: .75;
}

.mosaique-tuile.est-nuit .eyebrow {
  color: var(--ciel);
}

.mosaique-tuile h3 {
  max-width: 18ch;
}

.mosaique-tuile p {
  max-width: 34ch;
  opacity: .85;
}

.mosaique-numero {
  position: absolute;
  left: 28px;
  top: 24px;
  font: 400 26px/1 var(--titre);
}

/* Pastille : une photo dans un cercle cerné de blanc, qui grossit au survol. */

.mosaique-pastille {
  flex: none;
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.mosaique-pastille img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

a.mosaique-tuile:hover .mosaique-pastille {
  transform: scale(1.08);
}

.mosaique-voir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 15px;
}

.mosaique-voir svg {
  width: 14px;
  height: 14px;
  transition: transform .25s;
}

a.mosaique-tuile:hover .mosaique-voir svg {
  transform: translateX(4px);
}

.mosaique-photo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 40px;
  overflow: hidden;
  background: var(--nuit);
  color: #fff;
  text-align: center;
}

.mosaique-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.mosaique-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 26, 42, .38);
  transition: background-color .4s;
}

a.mosaique-photo:hover img {
  transform: scale(1.05);
}

a.mosaique-photo:hover::before {
  background-color: rgba(8, 26, 42, .2);
}

.mosaique-photo-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.mosaique-photo-texte .eyebrow {
  color: #fff;
}

/* Grand titre en italique léger, comme l'accent des titres de section. */

.mosaique-photo-titre {
  max-width: 16ch;
  font: italic 300 clamp(34px, 4.2vw, 64px)/1.05 var(--titre);
  letter-spacing: -.02em;
}

@media (min-width: 900px) {
  .mosaique-rangee {
    flex-direction: row;
    height: clamp(340px, 26vw, 420px);
  }

  /* Une rangée sur deux : la photo passe à gauche, les tuiles gardent leur ordre de lecture. */

  .mosaique-rangee.est-miroir .mosaique-photo {
    order: -1;
  }

  .mosaique-tuile {
    flex: 1 1 0;
    min-height: 0;
  }

  .mosaique-photo {
    flex: 2 1 0;
    min-height: 0;
  }
}

/* Conseils : articles en lignes, petite photo à gauche, sujet, date, titre, extrait (trois lignes) et lien à droite. */

.liste-conseils {
  padding-top: 0;
}

.lignes-conseils {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

.ligne-conseil:nth-child(3n + 2) {
  --retard: 80ms;
}

.ligne-conseil:nth-child(3n) {
  --retard: 160ms;
}

.ligne-conseil a {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--filet);
}

.ligne-conseil figure {
  flex: none;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--nuit);
}

.ligne-conseil img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.ligne-conseil a:hover img {
  transform: scale(1.05);
}

.ligne-conseil-corps {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.ligne-conseil-corps .eyebrow {
  color: var(--cyan-fonce);
}

html[data-theme="sombre"] .ligne-conseil-corps .eyebrow {
  color: var(--cyan);
}

.ligne-conseil-corps h2 {
  transition: color .25s;
}

.ligne-conseil a:hover h2 {
  color: var(--cyan);
}

.ligne-conseil-corps .sourdine {
  max-width: 70ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ligne-conseil-lire {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-weight: 600;
  font-size: 15px;
}

.ligne-conseil-lire svg {
  width: 14px;
  height: 14px;
  color: var(--cyan);
  transition: transform .25s;
}

.ligne-conseil a:hover .ligne-conseil-lire svg {
  transform: translateX(4px);
}

@media (min-width: 900px) {
  .ligne-conseil a {
    flex-direction: row;
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    padding: 32px 0;
  }

  .ligne-conseil figure {
    width: 280px;
  }
}

/* Fiche réalisation : types et titre centrés sur toute la largeur ; dessous, introduction à gauche, fiche à droite ;
   bouton de contact centré sous les deux. */

.fiche-realisation {
  padding-block: clamp(32px, 4vw, 56px) clamp(64px, 9vw, 128px);
}

.retour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 40px);
  font-weight: 600;
  font-size: 15px;
}

.retour svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
  color: var(--cyan);
  transition: transform .25s;
}

.retour:hover svg {
  transform: rotate(180deg) translateX(4px);
}

.fiche-titre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: clamp(32px, 4vw, 56px);
  text-align: center;
}

.fiche-titre .eyebrow {
  color: var(--cyan-fonce);
}

.fiche-grille {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.fiche-infos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.fiche-infos .p-grand {
  max-width: 62ch;
}

/* Liens d'un article publié ailleurs, sous l'introduction. */

.article-liens p {
  margin: 0;
}

.fiche-cote {
  display: flex;
  flex-direction: column;
  --retard: 120ms;
}

.fiche-contact {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

.fiche-details {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-top: 1px solid var(--filet);
}

.fiche-details div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
}

.fiche-details dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

@media (min-width: 1024px) {
  .fiche-grille {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(48px, 6vw, 96px);
  }

  .fiche-infos {
    flex: 1 1 0;
    min-width: 0;
  }

  .fiche-cote {
    flex: 0 0 32%;
  }
}

/* Récit du projet, centré dans le contenant : texte à droite ; à gauche, les photos du projet se partagent la hauteur du texte
   (une part chacune) et restent collées sous l'en-tête pendant que le texte défile dans leur part. */

.fiche-recit {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--filet);
}

.recit-texte {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.recit-texte .eyebrow {
  color: var(--cyan-fonce);
}

html[data-theme="sombre"] .recit-texte .eyebrow {
  color: var(--cyan);
}

/* Sur mobile, les photos s'empilent au-dessus du texte. */

.recit-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recit-photo {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--nuit);
}

.recit-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 1024px) {
  .fiche-recit {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: clamp(48px, 6vw, 96px);
  }

  .recit-photos {
    flex: 0 0 30%;
    gap: 24px;
  }

  /* Chaque part a la hauteur d'une fraction du texte (conteneur de taille). La photo, plus petite que sa part,
     y fait son trajet : la première descend jusqu'à la fin de sa part, la suivante prend le relais. */

  .recit-part {
    flex: 1 1 0;
    min-height: 0;
    container-type: size;
  }

  .recit-photo {
    position: sticky;
    top: 120px;
    height: min(100cqh, 360px);
    aspect-ratio: auto;
  }

  .recit-texte {
    flex: 0 1 70ch;
    min-width: 0;
  }
}

/* Galerie d'une réalisation sans récit : photos sur trois colonnes (deux sur tablette, une sur mobile). */

.fiche-galerie {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--filet);
}

.fiche-galerie .eyebrow {
  color: var(--cyan-fonce);
}

html[data-theme="sombre"] .fiche-galerie .eyebrow {
  color: var(--cyan);
}

.galerie-photos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 24px);
}

.galerie-photo {
  flex: 1 1 100%;
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--nuit);
}

.galerie-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 600px) {
  .galerie-photo {
    flex-basis: calc(50% - clamp(12px, 1.6vw, 24px) / 2);
    flex-grow: 0;
  }
}

@media (min-width: 900px) {
  .galerie-photo {
    flex-basis: calc((100% - 2 * clamp(12px, 1.6vw, 24px)) / 3);
  }
}

.realisations-liees, .conseils-lies {
  padding-top: 0;
}

/* Conseils du même sujet, sous un article : les lignes de la page des conseils deviennent trois cartes. */

.lignes-conseils.en-cartes {
  margin-top: 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.en-cartes .ligne-conseil a {
  padding: 0 0 28px;
}

@media (min-width: 900px) {
  .lignes-conseils.en-cartes {
    flex-direction: row;
    gap: 24px;
  }

  .en-cartes .ligne-conseil {
    flex: 1 1 0;
    min-width: 0;
  }

  .en-cartes .ligne-conseil a {
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 0 0 28px;
  }

  .en-cartes .ligne-conseil figure {
    width: auto;
  }
}

/* Appel à l'action : photo en fond fixe (la page défile par-dessus, comme les panneaux) sous un voile sombre,
   contenu centré. Sur écran tactile, le fond suit le défilement. */

.appel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding-block: clamp(88px, 12vw, 168px);
  background: var(--nuit);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.appel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--fond, none) center / cover no-repeat fixed;
}

.appel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(8,26,42,.62) 0%, rgba(8,26,42,.82) 70%), rgba(8,26,42,.25);
}

@media (hover: none) {
  .appel::before {
    background-attachment: scroll;
  }
}

.appel-contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.appel .t-2 {
  max-width: 20ch;
}

.appel .t-2 em {
  color: var(--ciel);
}

.appel .p-grand {
  color: rgba(255, 255, 255, .85);
}

.appel .hero-cta {
  justify-content: center;
  margin-top: 8px;
}

.appel .btn-contour {
  border-color: #fff;
  color: #fff;
}

.appel .btn-contour:hover {
  background: #fff;
  color: #081A2A;
}

/* =========================================================
   Pages de service : hero de page, introduction, points forts, étapes, slider de réalisations, questions
   ========================================================= */

/* Hero de page : photo plein écran collée sous l'en-tête ; la suite de la page glisse par-dessus avec des
   coins arrondis. --defile (0 à 1, src/js/blocks/hero-page.js) fait descendre, grossir et assombrir la photo.
   Il occupe au moins la hauteur de l'écran et grandit avec son contenu ; plus haut que l'écran (.est-haut, posé
   par le script), il défile normalement pour que rien ne reste caché sous la suite de la page. */

.hero-page {
  position: sticky;
  top: 86px;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: max(480px, calc(100svh - 86px));
  padding-block: clamp(32px, 5vh, 80px) clamp(88px, 11vw, 150px);
  background: var(--nuit);
  color: #fff;
}

.hero-page.est-haut {
  position: relative;
  top: 0;
}

.hero-page-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-page-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translateY(calc(var(--defile, 0) * 10%)) scale(calc(1.02 + var(--defile, 0) * .08));
  will-change: transform;
}

/* Voile sombre à gauche (sous le texte) et en bas, la photo reste vive à droite. */

.hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8,26,42,.92) 0%, rgba(8,26,42,.7) 38%, rgba(8,26,42,.1) 75%), linear-gradient(180deg, rgba(8,26,42,.35) 0%, rgba(8,26,42,0) 30%, rgba(8,26,42,.75) 100%);
}

.hero-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nuit);
  opacity: calc(var(--defile, 0) * .7);
  pointer-events: none;
}

.hero-page-contenu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.hero-page-contenu .eyebrow {
  color: var(--ciel);
}

/* Le titre suit aussi la hauteur de l'écran : il reste dans le hero sur un écran large mais bas. */

.hero-page-titre {
  margin: 0;
  max-width: 16ch;
  font: 700 clamp(36px, min(5.2vw, 8.4vh), 78px)/1.04 var(--titre);
  letter-spacing: -.03em;
}

.hero-page-titre em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
}

/* Titre en lettres lumineuses : corps translucide, ampoules chaudes, comme les lettres de l'ancien site. */

.hero-page-titre .ampoules {
  --corps: rgba(255, 255, 255, .14);
  --bulb: #FFC86B;
  font-size: clamp(40px, min(6.6vw, 10.5vh), 100px);
  letter-spacing: .04em;
}

.hero-page-titre .ampoules + em {
  display: block;
  margin-top: .2em;
  font-size: clamp(26px, min(3.2vw, 5.2vh), 46px);
}

.hero-page-titre .ampoules::after {
  filter: drop-shadow(0 0 .04em var(--bulb)) drop-shadow(0 0 .25em color-mix(in srgb, var(--bulb) 50%, transparent));
}

.hero-page-contenu .p-grand {
  max-width: 52ch;
  color: rgba(255, 255, 255, .85);
}

.hero-page .btn-contour {
  border-color: #fff;
  color: #fff;
}

.hero-page .btn-contour:hover {
  background: #fff;
  color: #081A2A;
}

/* Invitation à défiler : un point qui descend le long d'un trait. */

.hero-page-defiler {
  position: absolute;
  right: var(--gouttiere);
  bottom: clamp(88px, 11vw, 150px);
  width: 1px;
  height: 72px;
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
}

.hero-page-defiler::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 14px;
  border-radius: 3px;
  background: var(--ciel);
  animation: defiler 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes defiler {
  from {
    transform: translateY(-14px);
  }

  to {
    transform: translateY(72px);
  }
}

/* La suite de la page passe devant le hero : fond de page par défaut (sans écraser le fond d'une section),
   coins arrondis sur la première section. */

.hero-page ~ * {
  position: relative;
  z-index: 1;
}

:where(.hero-page ~ *) {
  background: var(--papier);
}

.hero-page + * {
  margin-top: -32px;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -24px 48px -24px rgba(8, 26, 42, .45);
}

@media (prefers-reduced-motion: reduce) {
  .hero-page-defiler::after {
    animation: none;
  }
}

/* Écran bas : texte et marges resserrés, sans l'invitation à défiler. */

@media (max-height: 820px) {
  .hero-page {
    padding-bottom: clamp(64px, 9vh, 96px);
  }

  .hero-page-contenu {
    gap: 16px;
  }

  .hero-page-contenu .p-grand {
    font-size: 17px;
    line-height: 1.5;
  }

  .hero-page-defiler {
    display: none;
  }
}

/* Introduction : grand titre à gauche, texte et bouton à droite derrière un filet. */

.introduction-grille {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.introduction-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  --retard: 120ms;
}

@media (min-width: 900px) {
  .introduction-grille {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(40px, 6vw, 96px);
  }

  .introduction-grille .t-2 {
    flex: 1 1 0;
    max-width: 16ch;
  }

  .introduction-texte {
    flex: 0 0 40%;
    padding-left: 28px;
    border-left: 1px solid var(--filet);
  }
}

/* Simulateur 3D : encart sombre aux coins arrondis, photo à gauche et texte à droite sur ordinateur. */

.simulateur {
  padding-top: 0;
}

.simulateur-carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background: var(--nuit);
  color: #fff;
}

.simulateur-image {
  margin: 0;
  aspect-ratio: 4 / 3;
}

.simulateur-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.simulateur-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: clamp(28px, 5vw, 64px);
}

.simulateur-texte .eyebrow {
  color: var(--cyan);
}

.simulateur-texte .p-grand {
  color: color-mix(in srgb, #fff 75%, var(--nuit));
}

@media (min-width: 900px) {
  .simulateur-carte {
    flex-direction: row;
    align-items: stretch;
  }

  .simulateur-image {
    flex: 0 0 45%;
    aspect-ratio: auto;
    min-height: 420px;
  }

  .simulateur-texte {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* Vidéo YouTube : miniature en 16/9 aux coins arrondis, assez petite pour tenir à l'écran sous l'en-tête ; bouton de lecture cyan au centre ; le lecteur prend sa place. */

.bloc-video {
  padding-top: 0;
}

.video {
  position: relative;
  overflow: hidden;
  max-width: calc((100svh - 160px) * 16 / 9);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  background: var(--nuit);
}

.video img, .video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video img {
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .6s ease;
}

.video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 26, 42, .25);
  pointer-events: none;
  transition: background .3s ease;
}

.video.est-lue::after {
  content: none;
}

.video-lecture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-lecture span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 32px rgba(0, 177, 230, .55);
  transition: transform .3s ease;
}

.video-lecture span::before {
  content: "";
  margin-left: 12%;
  border-style: solid;
  border-width: .7em 0 .7em 1.2em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(14px, 1.6vw, 20px);
}

.video:hover img {
  transform: scale(1.03);
}

.video:hover::after {
  background: rgba(8, 26, 42, .1);
}

.video-lecture:hover span, .video-lecture:focus-visible span {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .video img, .video-lecture span {
    transition: none;
  }
}

/* Fiche réalisation : la vidéo sous l'introduction. */

.fiche-realisation .video {
  margin-top: clamp(40px, 5vw, 64px);
}

/* Points forts : texte à gauche, photo jusqu'au bord droit de l'écran avec les chiffres empilés en bas. */

.points-forts {
  display: flex;
  flex-direction: column;
  padding-block: 0;
  background: var(--surface);
}

.points-forts-texte {
  padding: clamp(64px, 9vw, 128px) var(--gouttiere);
}

.points-forts-texte .entete-section .t-2 {
  max-width: 14ch;
}

.points-forts-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.points-forts-liste li {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--filet);
}

.points-forts-liste li:nth-child(even) {
  --retard: 100ms;
}

.points-forts-liste h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.points-forts-liste h3::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.points-forts-photo {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 460px;
  overflow: hidden;
  background: var(--nuit);
}

.points-forts-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.points-forts-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8,26,42,.85) 0%, rgba(8,26,42,.35) 55%, rgba(8,26,42,0) 100%);
}

.points-forts-chiffres {
  position: absolute;
  left: clamp(28px, 4vw, 64px);
  bottom: clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: #fff;
}

.points-forts-chiffres span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.points-forts-chiffres span:nth-child(2) {
  --retard: 120ms;
}

.points-forts-chiffres span:nth-child(3) {
  --retard: 240ms;
}

.points-forts-chiffres strong {
  font: 700 clamp(48px, 6vw, 88px)/.95 var(--titre);
  letter-spacing: -.03em;
}

.points-forts-chiffres small {
  margin-left: 6px;
  font-size: .4em;
  color: var(--ciel);
  letter-spacing: 0;
}

.points-forts-chiffres em {
  font: 600 12px/1.3 var(--texte);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

@media (min-width: 1024px) {
  .points-forts {
    flex-direction: row;
  }

  .points-forts-texte {
    flex: 0 0 52%;
    padding-left: calc((100vw - min(var(--max), 100vw - 2 * var(--gouttiere))) / 2);
    padding-right: clamp(40px, 5vw, 80px);
  }

  .points-forts-photo {
    flex: 1 1 0;
    min-height: 0;
  }
}

/* Étapes : cercles numérotés reliés par un fil qui s'allume au défilement (--part, src/js/blocks/etapes.js),
   photo à droite. À l'horizontale sur grand écran, à la verticale sur mobile. */

.etapes-grille {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.etapes-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.etapes-texte .entete-section {
  margin-bottom: 0;
}

.etapes-piste {
  position: relative;
  align-self: stretch;
  margin-block: clamp(36px, 5vw, 56px);
}

.etapes-liste {
  display: flex;
  flex-direction: column;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.etape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 76px;
  min-height: 56px;
}

.etape-numero {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--filet);
  background: var(--papier);
  font: 600 18px/1 var(--titre);
  transition: background-color .4s, border-color .4s, color .4s, box-shadow .4s;
}

.etape.est-allumee .etape-numero {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #081A2A;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--cyan) 18%, transparent), 0 0 28px var(--cyan);
}

.etape h3 {
  transition: color .4s;
}

.etapes-fil {
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--filet);
}

.etapes-fil i {
  display: block;
  width: 100%;
  height: calc(var(--part, 0) * 100%);
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.etapes-photo {
  position: relative;
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--nuit);
  --retard: 120ms;
}

.etapes-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.etapes-photo figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 12px 16px;
  background: rgba(8, 26, 42, .78);
  color: #fff;
  font: 600 13px/1.4 var(--texte);
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

@media (min-width: 900px) {
  .etapes-liste {
    flex-direction: row;
    gap: 24px;
  }

  .etape {
    flex: 1 1 0;
    padding-left: 0;
    padding-top: 80px;
  }

  /* Le fil va du centre du premier cercle au centre du dernier. */

  .etapes-fil {
    left: 28px;
    right: calc((100% - (var(--n) - 1) * 24px) / var(--n) - 28px);
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .etapes-fil i {
    width: calc(var(--part, 0) * 100%);
    height: 100%;
  }
}

@media (min-width: 1024px) {
  .etapes-grille {
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
  }

  .etapes-texte {
    flex: 1 1 0;
    min-width: 0;
  }

  .etapes-photo {
    flex: 0 0 30%;
  }
}

/* Slider de réalisations : titre et bouton au-dessus du défileur pleine largeur. */

.slider-realisations {
  padding-top: clamp(64px, 9vw, 128px);
}

.slider-realisations-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.slider-realisations-entete .t-2 {
  max-width: 16ch;
}

/* Questions fréquentes : titre épinglé à gauche, accordéon à droite ; le plus devient une croix à l'ouverture. */

.faq-grille {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq-entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.faq-entete p {
  max-width: 46ch;
}

.faq-questions {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--filet);
}

.faq-question {
  border-bottom: 1px solid var(--filet);
}

.faq-question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font: 600 clamp(17px, 1.4vw, 19px)/1.35 var(--titre);
  transition: color .2s;
}

.faq-question summary::-webkit-details-marker {
  display: none;
}

.faq-question summary i {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--filet);
  transition: background-color .25s, border-color .25s, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.faq-question summary i::before, .faq-question summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -.75px 0 0 -6px;
  background: currentColor;
}

.faq-question summary i::after {
  transform: rotate(90deg);
}

.faq-question summary:hover i {
  border-color: var(--cyan);
}

.faq-question[open] summary i {
  transform: rotate(45deg);
  background: var(--cyan);
  border-color: var(--cyan);
  color: #081A2A;
}

.faq-reponse {
  padding: 0 52px 26px 0;
  color: var(--sourdine);
}

.faq-question[open] .faq-reponse {
  animation: faq-ouverture .4s cubic-bezier(.22, .61, .36, 1);
}

@keyframes faq-ouverture {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (min-width: 1024px) {
  .faq-grille {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(48px, 6vw, 96px);
  }

  .faq-entete {
    flex: 0 0 34%;
    position: sticky;
    top: 120px;
  }

  .faq-questions {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-question[open] .faq-reponse {
    animation: none;
  }
}

/* =========================================================
   Charles : le mot du fondateur
   ========================================================= */

.fondateur {
  background: var(--ciel-doux);
}

.fondateur .deux-col {
  align-items: center;
}

.portrait {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-width: 460px;
}

.portrait img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.parole {
  display: flex;
  flex-direction: column;
  gap: 22px;
  --retard: 120ms;
}

.parole blockquote {
  margin: 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.parole blockquote::before {
  content: "« ";
  color: var(--ciel);
}

.parole blockquote::after {
  content: " »";
  color: var(--ciel);
}

.signature {
  display: flex;
  align-items: center;
  gap: 18px;
}

.signature img {
  height: 64px;
  width: auto;
}

/* La signature est tracée à l'encre sombre : elle passe en clair sur le fond sombre. */

html[data-theme="sombre"] .signature img {
  filter: invert(1);
}

.signature div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
}

.signature strong {
  font-family: var(--titre);
}

/* =========================================================
   Contact
   ========================================================= */

/* Contact sur fond bleu ciel doux : arguments et bouton « Nous contacter » à gauche, image à droite. */

.contact {
  background: var(--ciel-doux);
  border-top: 0;
}

.contact-cta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--filet);
}

.contact-image {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--nuit);
  --retard: 120ms;
}

.contact-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 900px) {
  .contact-image {
    aspect-ratio: 5 / 4;
    align-self: stretch;
  }
}

/* Formulaire de contact (dans le pop-up) : champs blancs encadrés, libellé au-dessus de la zone de saisie,
   repère cyan devant les champs obligatoires, bouton pilule avec flèche cerclée. */

.contact-formulaire .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legende-requis {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--sourdine);
}

.legende-requis::before, .contact-formulaire .champ.est-requis::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 9px solid var(--cyan);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.contact-formulaire .champ {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 18px 4px 24px;
  border: 1px solid var(--champ-filet);
  border-radius: var(--rayon);
  background: var(--champ);
  transition: border-color .2s, box-shadow .2s;
}

.contact-formulaire .champ:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 177, 230, .18);
}

/* Le repère est centré sur la ligne du libellé (12 px de marge haute + demi-ligne de 17 px, moins la demi-hauteur du triangle). */

.contact-formulaire .champ.est-requis::before {
  position: absolute;
  left: -1px;
  top: 14px;
}

.contact-formulaire .champ-nom {
  font: 600 13px/1.3 var(--texte);
  letter-spacing: .02em;
  color: var(--encre);
}

/* L'enveloppe CF7 n'est pas positionnée : le message d'erreur se cale sur le cadre du champ. */

.contact-formulaire .champ .wpcf7-form-control-wrap {
  position: static;
  display: block;
}

.contact-formulaire .champ input, .contact-formulaire .champ select, .contact-formulaire .champ textarea {
  width: 100%;
  padding: 6px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  font-size: 16px;
}

.contact-formulaire .champ input:focus, .contact-formulaire .champ select:focus, .contact-formulaire .champ textarea:focus {
  outline: none;
  box-shadow: none;
}

.contact-formulaire .champ ::-moz-placeholder {
  color: #93A3B1;
}

.contact-formulaire .champ ::placeholder {
  color: #93A3B1;
}

/* Liste déroulante : flèche native remplacée par un chevron fin, calé à droite du cadre. */

.contact-formulaire .champ-select::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 22px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--encre);
  border-bottom: 1.5px solid var(--encre);
  transform: rotate(45deg);
  pointer-events: none;
}

.contact-formulaire .champ select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  cursor: pointer;
}

.contact-formulaire .champ select:invalid, .contact-formulaire .champ select option[value=""] {
  color: #93A3B1;
}

.contact-formulaire .champ select option {
  color: var(--encre);
  background: var(--champ);
  padding: 8px;
}

/* Dans le cadre du champ, la liste s'aligne sur ses bords et le chevron se retourne à l'ouverture. */

.contact-formulaire .champ-select .deroulant {
  position: static;
}

.contact-formulaire .champ-select .deroulant-bouton {
  padding: 6px 32px 8px 0;
  font-size: 16px;
}

.contact-formulaire .champ-select .deroulant-menu {
  left: -1px;
  right: -1px;
}

.contact-formulaire .champ-select::after {
  transition: transform .25s;
}

.contact-formulaire .champ-select.est-ouvert::after {
  transform: translateY(5px) rotate(225deg);
}

.contact-formulaire .champ-message textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-formulaire .champ .wpcf7-not-valid-tip {
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #D9534F;
  pointer-events: none;
}

.contact-formulaire .formulaire-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 6px;
}

.contact-formulaire .consentement {
  max-width: 48ch;
}

.contact-formulaire .consentement .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #D9534F;
}

.contact-formulaire .btn-envoyer {
  height: 52px;
  padding: 0 6px 0 26px;
  border-radius: 30px;
  gap: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
  background: var(--encre);
  color: var(--papier);
  border-color: var(--encre);
}

.contact-formulaire .btn-envoyer .btn-fleche {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cyan);
  color: #081A2A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s, color .2s, transform .2s;
}

.contact-formulaire .btn-envoyer:hover {
  background: var(--cyan);
  color: #081A2A;
  border-color: var(--cyan);
}

.contact-formulaire .btn-envoyer:hover .btn-fleche {
  background: #081A2A;
  color: #fff;
  transform: translateX(3px);
}

.contact-formulaire .btn-envoyer svg {
  width: 14px;
  height: 14px;
}

.contact-formulaire .wpcf7 form .wpcf7-response-output {
  background: var(--champ);
  border-color: var(--cyan);
}

/* Étapes : chacune empile ses champs comme le formulaire ; la seconde (Lettres lumineuses) ne s'ouvre qu'au clic sur « Continuer ». */

.contact-formulaire .formulaire-etape {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-formulaire .formulaire-etape[hidden] {
  display: none;
}

.contact-formulaire .formulaire-boutons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.contact-formulaire .btn-retour {
  height: 52px;
  padding-block: 0;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
}

/* Hauteurs de lettres : cases à cocher en cartes photo, la carte cochée prend le filet cyan. */

.contact-formulaire .champ-hauteurs {
  position: relative;
  margin: 0;
  padding: 12px 18px 18px 24px;
  border: 1px solid var(--champ-filet);
  border-radius: var(--rayon);
  background: var(--champ);
}

.contact-formulaire .champ-hauteurs.est-requis::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  width: 0;
  height: 0;
  border-left: 9px solid var(--cyan);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.contact-formulaire .champ-hauteurs legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 12px;
}

.contact-formulaire .champ-hauteurs .wpcf7-form-control-wrap {
  position: static;
  clear: both;
  display: block;
}

.contact-formulaire .champ-hauteurs .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Trois cartes côte à côte à toutes les tailles : elles se resserrent sur mobile au lieu de s'empiler. */

.contact-formulaire .champ-hauteurs .wpcf7-list-item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.contact-formulaire .champ-hauteurs label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 8px 8px 12px;
  border: 1px solid var(--champ-filet);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.contact-formulaire .champ-hauteurs label:hover {
  border-color: var(--cyan);
}

.contact-formulaire .champ-hauteurs label:has(input:checked) {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 177, 230, .18);
}

.contact-formulaire .champ-hauteurs .hauteur-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: calc(var(--rayon) / 2);
}

.contact-formulaire .champ-hauteurs input {
  order: 1;
  position: absolute;
  opacity: 0;
}

.contact-formulaire .champ-hauteurs .wpcf7-list-item-label {
  order: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--encre);
}

.contact-formulaire .champ-hauteurs .wpcf7-list-item-label::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--champ-filet);
  border-radius: 4px;
  background: var(--champ);
  transition: background-color .2s, border-color .2s;
}

.contact-formulaire .champ-hauteurs input:checked + .wpcf7-list-item-label::before {
  border-color: var(--cyan);
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081A2A' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.contact-formulaire .champ-hauteurs input:focus-visible + .wpcf7-list-item-label::before {
  box-shadow: 0 0 0 3px rgba(0, 177, 230, .3);
}

.contact-formulaire .champ-hauteurs .wpcf7-not-valid-tip {
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 12px;
}

/* Mobile : le message d'erreur passe sous le champ (en haut à droite, il couvrirait les libellés longs) ;
   les cartes de hauteur se resserrent. */

@media (max-width: 639px) {
  .contact-formulaire .champ .wpcf7-not-valid-tip, .contact-formulaire .champ-hauteurs .wpcf7-not-valid-tip {
    position: static;
    display: block;
    margin: 2px 0 8px;
  }

  .contact-formulaire .champ-hauteurs {
    padding: 12px 12px 14px 18px;
  }

  .contact-formulaire .champ-hauteurs .wpcf7-checkbox {
    gap: 8px;
  }

  .contact-formulaire .champ-hauteurs label {
    gap: 8px;
    padding: 5px 5px 9px;
  }

  .contact-formulaire .champ-hauteurs .wpcf7-list-item-label {
    gap: 6px;
    font-size: 14px;
  }

  .contact-formulaire .champ-hauteurs .wpcf7-list-item-label::before {
    width: 16px;
    height: 16px;
  }

  .contact-formulaire .formulaire-boutons {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .contact-formulaire .formulaire-boutons .btn {
    flex: 1 1 0;
    justify-content: center;
    height: 44px;
    font-size: 13px;
    letter-spacing: .06em;
  }

  .contact-formulaire .btn-envoyer {
    padding: 0 5px 0 18px;
    gap: 10px;
  }

  .contact-formulaire .btn-envoyer .btn-fleche {
    width: 32px;
    height: 32px;
  }

  .contact-formulaire .btn-retour {
    padding-inline: 18px;
  }

  .contact-formulaire .formulaire-boutons .btn[hidden] {
    display: none;
  }
}

.reassurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reassurance li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.reassurance li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

.reassurance strong {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
}

.reassurance span {
  color: var(--sourdine);
  font-size: 15px;
}

/* =========================================================
   Pop-ups de contact : voile bleu nuit flouté, cartes blanches centrées
   ========================================================= */

html.a-popup {
  overflow: hidden;
}

.popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Les boutons gardent leur display de classe : l'attribut hidden doit primer dans le pop-up (numéro masqué, pop-up fermé). */

.popup[hidden], .popup [hidden] {
  display: none;
}

.popup-voile {
  position: fixed;
  inset: 0;
  background: rgba(8, 26, 42, .55);
  backdrop-filter: blur(14px);
}

.popup-scene {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 72px var(--gouttiere) 40px;
}

.popup-fermer {
  position: absolute;
  top: 18px;
  right: var(--gouttiere);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--carte);
  color: var(--encre);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.popup-fermer:hover {
  background: var(--cyan);
}

.popup-fermer svg {
  width: 16px;
  height: 16px;
}

.popup-cartes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1060px;
}

.popup-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  padding: 36px 28px;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: 0 30px 60px -30px rgba(8, 26, 42, .6);
  text-align: center;
  animation: popup-entree .3s cubic-bezier(.22, .61, .36, 1);
}

.popup-cartes .popup-carte {
  flex: 1 1 0;
  min-height: 220px;
}

.popup-carte-formulaire {
  align-items: stretch;
  text-align: left;
  max-width: 820px;
  padding: 36px clamp(24px, 4vw, 48px) 40px;
}

.popup-carte-formulaire .t-3 {
  text-align: center;
}

.popup-autre {
  background: none;
  border: 0;
  padding: 8px;
  color: #fff;
  font: 600 14px/1 var(--texte);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.popup-autre:hover {
  color: var(--ciel);
}

@keyframes popup-entree {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (min-width: 900px) {
  .popup-cartes {
    flex-direction: row;
  }

  .popup-fermer {
    top: 32px;
  }
}

/* =========================================================
   Avis Google : fond bleu marine, résumé de la note sur carte claire à gauche,
   avis en cartes qui défilent en boucle à droite
   ========================================================= */

.avis {
  --etoile: #F2A93B;
  background: var(--nuit);
  color: #fff;
  overflow: hidden;
}

.avis .t-2 em {
  color: var(--ciel);
}

.avis .entete-section .sourdine {
  color: color-mix(in srgb, #fff 70%, var(--nuit));
}

.avis .contenant > .entete-section > p {
  border-left-color: rgba(255,255,255,.18);
}

.widget-avis {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.widget-avis-resume {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 34px 32px;
  background: var(--surface);
  color: var(--encre);
  border-radius: var(--rayon);
}

.avis-google svg {
  display: block;
  width: 36px;
  height: 36px;
}

.widget-avis-titre {
  margin-top: 8px;
  font: 600 24px/1.1 var(--titre);
  letter-spacing: -.01em;
}

.widget-avis-note {
  display: flex;
  align-items: center;
  gap: 12px;
}

.widget-avis-note b {
  font: 700 34px/1 var(--titre);
  letter-spacing: -.02em;
}

.widget-avis-total {
  font-size: 14px;
  color: var(--sourdine);
}

.widget-avis-total b {
  font-weight: 600;
  color: var(--encre);
}

.widget-avis-resume .btn {
  margin-top: 12px;
}

/* En sombre, la carte a la teinte de la section : un filet la détache. */

html[data-theme="sombre"] .widget-avis-resume {
  border: 1px solid var(--filet);
}

.avis-etoiles {
  display: inline-flex;
  gap: 3px;
}

.avis-etoiles i {
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,.18);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.widget-avis-resume .avis-etoiles i {
  background: var(--filet);
}

.avis-etoiles i.pleine {
  background: var(--etoile);
}

.avis-etoiles i.demie {
  background: linear-gradient(90deg, var(--etoile) 50%, rgba(255,255,255,.18) 50%);
}

.widget-avis-defile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* La bande file jusqu'au bord droit de l'écran : marge négative égale à la marge droite du conteneur.
   Elle est masquée à gauche et à droite par un dégradé pour que les cartes entrent et sortent en fondu. */

.widget-avis-piste {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  margin-right: calc((min(var(--max), 100vw - 2 * var(--gouttiere)) - 100vw) / 2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 80px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 80px), transparent);
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.widget-avis-piste.est-glisse {
  cursor: grabbing;
}

.widget-avis-rail {
  display: flex;
  gap: 20px;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}

.avis-carte {
  flex: 0 0 min(340px, 80vw);
  background: var(--nuit-2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--rayon);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.avis-auteur {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avis-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  color: #081A2A;
  font: 600 16px/1 var(--titre);
}

/* Trois teintes d'avatar qui alternent d'un avis à l'autre. */

.avis-carte:nth-child(3n + 2) .avis-avatar {
  background: var(--ciel);
}

.avis-carte:nth-child(3n) .avis-avatar {
  background: #fff;
}

.avis-auteur b {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
}

.avis-auteur small {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.avis-carte p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  flex: 1 1 auto;
}

.avis-carte .avis-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.avis-carte .avis-source svg {
  width: 14px;
  height: 14px;
}

.widget-avis-nav {
  display: flex;
  gap: 10px;
}

.widget-avis-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.widget-avis-nav button:hover {
  background: #fff;
  border-color: #fff;
  color: #081A2A;
}

.widget-avis-nav svg {
  width: 16px;
  height: 16px;
}

.widget-avis-nav .avis-prec svg {
  transform: rotate(180deg);
}

@media (min-width: 900px) {
  .widget-avis {
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
  }

  .widget-avis-resume {
    flex: 0 0 300px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget-avis-piste {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* =========================================================
   Pied de page
   ========================================================= */

.pied {
  background: var(--nuit);
  color: #fff;
  padding-block: 64px 32px;
}

.pied-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.pied-identite {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pied-identite img {
  height: 42px;
  width: auto;
}

.pied-identite p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  max-width: 34ch;
}

.pied-reseaux {
  display: flex;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.pied-reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  color: #fff;
  transition: background-color .2s, border-color .2s, color .2s;
}

.pied-reseaux a:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #081A2A;
}

.pied-reseaux svg {
  width: 18px;
  height: 18px;
}

.pied-col {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pied-col .eyebrow {
  color: var(--cyan);
  margin-bottom: 4px;
}

.pied-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pied-col a {
  font-size: 15px;
  color: rgba(255,255,255,.85);
}

.pied-col a:hover {
  color: var(--ciel);
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

.pied-bas a {
  color: inherit;
}

.pied-bas a:hover {
  color: #fff;
}

.pied-signature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pied-signature a {
  display: inline-flex;
  transition: opacity .2s;
}

.pied-signature a:hover {
  opacity: .7;
}

.pied-signature img {
  width: 72px;
  height: auto;
}

/* =========================================================
   Apparition au défilement : visible au repos si pas de JS
   ========================================================= */

html.anim [data-apparait] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--retard, 0ms);
}

html.anim [data-apparait].est-vu {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .rail {
    animation: none;
  }

  .porte, .porte-corps {
    transition: none;
  }

  .scene-affiche .ampoules::after, .scene-affiche::before {
    animation: none;
  }

  html.anim [data-apparait] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tops .top:not(.est-actif) {
    opacity: 1;
  }

  .top-numero, .top, .conduite-barre i {
    transition: none;
  }
}

/* =========================================================
   Formulaires Contact Form 7 : les champs gardent le style des blocs, les messages prennent la place du bouton
   ========================================================= */

.wpcf7-form-control-wrap {
  display: block;
}

.wpcf7-form > .hidden-fields-container {
  display: none;
}

.wpcf7-spinner {
  display: none;
}

.wpcf7-not-valid-tip {
  font-size: 13px;
  line-height: 1.3;
  color: #D9534F;
}

.lettres .wpcf7-not-valid-tip {
  color: #FF9A9A;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cyan);
  border-radius: var(--rayon);
  font-size: 15px;
}

.wpcf7 form.init .wpcf7-response-output {
  display: none;
}

.wpcf7-form.submitting .btn {
  opacity: .6;
  pointer-events: none;
}

.consentement .wpcf7-list-item {
  margin: 0;
}

.consentement .wpcf7-list-item label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* =========================================================
   Pages de texte, articles et liste des conseils
   ========================================================= */

.page-texte {
  padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 128px);
}

.page-texte .entete-section {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.texte-riche {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 70ch;
}

.texte-riche h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  margin-top: 18px;
}

.texte-riche h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  margin-top: 8px;
}

.texte-riche a {
  font-weight: 600;
  border-bottom: 2px solid var(--cyan);
}

.texte-riche ul, .texte-riche ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.texte-riche ul {
  list-style: disc;
}

.texte-riche ol {
  list-style: decimal;
}

.texte-riche strong {
  font-weight: 600;
}

/* Texte des articles de conseil. */

.article-texte {
  font-size: 17px;
  line-height: 1.75;
}

.article-texte h2, .article-texte h3 {
  margin-top: 24px;
  text-wrap: pretty;
}

.article-texte figure, .article-texte p > img:only-child {
  margin: 16px 0;
}

.article-texte figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-texte img {
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
}

.article-texte figcaption {
  font-size: 14px;
  color: var(--sourdine);
  text-align: center;
}

.article-texte blockquote {
  margin: 8px 0;
  padding-left: 24px;
  border-left: 3px solid var(--cyan);
  font-family: var(--titre);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
}

.article-texte li::marker {
  color: var(--cyan);
}

.article-retour {
  margin-top: clamp(32px, 4vw, 56px);
}

.article-retour a {
  font-weight: 600;
  border-bottom: 2px solid var(--cyan);
  padding-bottom: 2px;
}

.pagination {
  margin-top: clamp(32px, 4vw, 56px);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--rayon);
  border: 1px solid var(--filet);
  font: 600 14px/1 var(--texte);
  transition: background-color .2s, color .2s, border-color .2s;
}

.pagination .page-numbers.current, .pagination a.page-numbers:hover {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

.visible {
  visibility: visible;
}

.block {
  display: block;
}

.hidden {
  display: none;
}

.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));
}

.resize {
  resize: both;
}

.filter {
  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);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}