
:root {
  --hub-air: clamp(72px, 12vh, 136px);                   
  --hub-air-court: clamp(40px, 5vh, 88px);               
  --hub-gap: clamp(20px, 2.2vw, 36px);                   
  --hub-photo-r: 6px;                                    
  --hub-conteneur: 1320px;                               
}

@media (min-width: 1440px) {
  :root {
    --gouttiere: max(clamp(16px, 5.4vw, 96px), (100vw - var(--hub-conteneur)) / 2);
    --marge: max(clamp(16px, 3.4vw, 48px), 100vw - var(--hub-conteneur) - var(--gouttiere));
  }
}

.hub-tete { padding: clamp(16px, 2.6vh, 48px) var(--marge) 0 var(--gouttiere); }

.hub-tete .fil-ariane li:last-child { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
.hub-tete .fil-ariane li:nth-last-child(2)::after { display: block; }

.hub-titre { max-width: 14em; font: 400 var(--fs-hero)/1 var(--f-titre); letter-spacing: -.034em; text-wrap: balance; }
.hub-chapo { margin-top: clamp(16px, 2.6vh, 28px); max-width: 31em; font: 300 var(--fs-d1)/1.34 var(--f-corps); letter-spacing: -.012em; color: var(--encre-2); text-wrap: pretty; }

.hub-tete .joindre { margin-top: clamp(12px, 2vh, 20px); font-size: clamp(15px, 4.4vw, var(--fs-4)); }

.mat-declic--courant { opacity: 1; text-decoration-line: underline; }

.acts { padding: var(--hub-air-court) var(--marge) 0 var(--gouttiere); }

.acts__titre, .industries__titre, .q-tete .h2 { font-size: var(--fs-d3); line-height: 1.06; }
.acts__titre { max-width: 18em; }
.acts__liste { margin-top: clamp(20px, 3vh, 40px); }

.acts__suite { margin-top: clamp(8px, 1.6vh, 24px); max-width: 34em; font: 400 var(--fs-d1)/1.4 var(--f-corps); letter-spacing: -.012em; color: var(--encre-2); text-wrap: pretty; }
.act { scroll-margin-top: 16px; }                        
.act { position: relative; display: flex; flex-direction: column; }

.act__nom { container-type: inline-size; }
.act__nom { font: 400 var(--fs-d2)/1.08 var(--f-titre); letter-spacing: -.02em; text-wrap: balance; }
.act__lien { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: color-mix(in srgb, var(--encre) 40%, transparent); transition: text-decoration-color var(--t-reponse) var(--e-doux); scroll-margin-top: calc(62.5cqi + clamp(16px, 2.4vh, 24px) + 12px); }
.act__lien::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.act:hover .act__lien { text-decoration-color: var(--or); text-decoration-thickness: 2px; }
.act__ligne { margin-top: 10px; max-width: 30em; font-size: var(--fs-5-6); line-height: 1.5; color: var(--encre-2); }

.act__apps { margin-top: 8px; max-width: 34em; font: 400 var(--fs-3)/1.5 var(--f-corps); color: var(--encre-2); text-wrap: pretty; }
@supports selector(:has(*)) {
  .act__lien:focus-visible { outline: none; }
  .act:has(.act__lien:focus-visible) { outline: 2px solid var(--encre); outline-offset: 8px; border-radius: 4px; }
}
.act__lien:active { opacity: .85; }

.act__media { position: relative; order: -1; margin-bottom: clamp(16px, 2.4vh, 24px); }
.act__photo { display: block; overflow: hidden; border-radius: var(--hub-photo-r); background: var(--penombre); }
.act__photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: filter var(--t-reponse) var(--e-doux); }

@media (hover: hover) { .act:hover .act__photo img { filter: brightness(.82); } }
.act__ecran { display: block; overflow: hidden; border-radius: var(--ecran-r); background: var(--blanc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--noir) 16%, transparent); }
.act__ecran picture { display: block; }
.act__ecran img { width: 100%; height: auto; }          
.act { --ecran-ratio: .62; }                             
#evenementiel { --ecran-ratio: .82; }                    

@media (min-width: 700px) {
  .act { --ecran-ratio: .82; }
  .act__ecran { aspect-ratio: 957 / 785; }
}

[data-forme="a"] .acts__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vh, 80px) var(--hub-gap); }
[data-forme="a"] .act__ecran { display: none; }

[data-forme="b"] .act { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--hub-gap); align-items: baseline; padding-block: clamp(22px, 3.6vh, 34px); border-top: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); }
[data-forme="b"] .act:last-child { border-bottom: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); }
[data-forme="b"] .act__nom { font-size: var(--fs-d3); }
[data-forme="b"] .act__ligne { margin-top: 0; }
[data-forme="b"] .act__apps { grid-column: 2; margin-top: 4px; }
[data-forme="b"] .act__media { display: none; }

[data-forme="c"] .acts__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 6vh, 64px) var(--hub-gap); }
[data-forme="c"] .act__photo { display: none; }
[data-forme="c"] .act__nom { font-size: var(--fs-d1); }
[data-forme="c"] .act__ligne { font-size: var(--fs-3-4); }

[data-forme="d"] .acts__liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--hub-gap); }
[data-forme="d"] .act { padding-bottom: clamp(48px, 7vh, 96px); }
[data-forme="d"] .act__media { margin-bottom: clamp(16px, 2.4vh, 24px); }
[data-forme="d"] .act__ecran { position: relative; z-index: 1; width: min(100%, max(72%, 280px)); margin: -14% 0 0 auto; box-shadow: 0 0 0 1px color-mix(in srgb, var(--noir) 16%, transparent), 0 22px 40px -26px color-mix(in srgb, var(--noir) 50%, transparent); }
[data-forme="d"] .act__lien { scroll-margin-top: calc(62.5cqi + min(100cqi, max(72cqi, 280px)) * var(--ecran-ratio) - 14cqi + clamp(16px, 2.4vh, 24px) + 12px); }

@media (min-width: 700px) {
  [data-forme="d"] .acts__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) {
    [data-forme="d"] .act { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    [data-forme="d"] .act__media { grid-row: 1; }
    [data-forme="d"] .act__nom { grid-row: 2; }
    [data-forme="d"] .act__ligne { grid-row: 3; align-self: start; }
    [data-forme="d"] .act__apps { grid-row: 4; align-self: start; }
  }
}
@media (min-width: 1180px) {
  [data-forme="d"] .act { --ecran-l: clamp(280px, 50cqi, 64cqi); --ecran-sous: calc(var(--ecran-l) * .186); }
  
  [data-forme="d"] .act__media { margin-bottom: calc(clamp(280px, 50%, 64%) * .186 + clamp(16px, 2.4vh, 24px)); }
  [data-forme="d"] .act__ecran { position: absolute; right: 4%; bottom: 0; width: clamp(280px, 50%, 64%); margin: 0 0 calc(clamp(280px, 50%, 64%) * -.186); }
  [data-forme="d"] .act__lien { scroll-margin-top: calc(62.5cqi + var(--ecran-sous) + clamp(16px, 2.4vh, 24px) + 12px); }
}

@media (min-width: 1360px) {
  .acts { padding-top: clamp(24px, 3.4vh, 40px); }
  .acts__titre { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .acts__liste { margin-top: 0; }
  [data-forme="d"] .acts__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-forme="d"] .act { padding-bottom: 0; }
  [data-forme="d"] .act__photo img { aspect-ratio: 2 / 1; }
  [data-forme="d"] .act__media { margin-bottom: clamp(12px, 1.6vh, 18px); }
  [data-forme="d"] .act__ecran { position: relative; right: auto; bottom: auto; width: min(100%, max(92%, 280px)); margin: -18% 0 0 auto; }
  [data-forme="d"] .act__lien { scroll-margin-top: calc(50cqi + min(100cqi, max(92cqi, 280px)) * var(--ecran-ratio) - 18cqi + clamp(12px, 1.6vh, 18px) + 12px); }
  [data-forme="d"] .act__nom { font-size: var(--fs-d1); line-height: 1.12; }
  [data-forme="d"] .act__ligne { margin-top: 8px; font-size: var(--fs-4-5); }
  .acts__suite { margin-top: clamp(56px, 8vh, 88px); }
}

.industries { margin-top: var(--hub-air); padding: clamp(56px, 10vh, 112px) var(--marge) clamp(48px, 8vh, 96px) var(--gouttiere); background: var(--froid); color: var(--lumiere); }
.industries :focus-visible { outline-color: var(--lumiere); }
.industries__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hub-gap); align-items: start; }
.industries__titre { grid-column: 1 / 10; max-width: 13em; color: var(--lumiere); }
.industries__texte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hub-gap); align-items: start; margin-top: clamp(28px, 4.6vh, 48px); }
.industries__texte p { grid-column: 1 / 7; max-width: 34em; font-size: var(--fs-4-5); line-height: 1.6; text-wrap: pretty; }
.industries__texte .industries__appel { grid-column: 7 / 13; max-width: 15em; font: 400 var(--fs-d2)/1.18 var(--f-titre); letter-spacing: -.018em; text-wrap: balance; }
.industries__appel a { color: var(--lumiere); text-decoration: underline; text-decoration-color: var(--or-vif); text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-thickness var(--t-reponse) var(--e-doux); }
.industries__appel a:hover { text-decoration-thickness: 3.5px; }
.industries__appel a:active { opacity: .85; }
.industries__signe { display: inline-block; width: .5em; height: .5em; margin-left: .22em; vertical-align: .06em; }
.industries__signe path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@supports selector(:has(*)) {
  .industries__appel a:focus-visible { outline: none; }
  .industries__appel:has(a:focus-visible) { outline: 2px solid var(--lumiere); outline-offset: 12px; border-radius: 4px; }
}

.industries__reforme a { color: var(--lumiere); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--lumiere) 60%, transparent); transition: text-decoration-color var(--t-reponse) var(--e-doux); }
.industries__reforme a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.industries__reforme a:focus-visible { outline: none; background: var(--lumiere); color: var(--froid); text-decoration-color: var(--froid); box-shadow: 0 0 0 2px var(--lumiere); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.industries__reforme a:active { opacity: .85; }
.industries__texte .industries__reforme { margin-top: 1em; }

.questions { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hub-gap); padding: var(--hub-air) var(--marge) clamp(40px, 6vh, 72px) var(--gouttiere); }
.q-tete { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--barre-h) + 48px); }
.q-tete .h2 { max-width: 11em; }
.q-liste { grid-column: 7 / 13; }
.q-titre { font: 400 var(--fs-d1)/1.16 var(--f-titre); letter-spacing: -.018em; text-wrap: balance; padding: 26px 0 24px; }
.q-titre:has(.q-bouton) { padding: 0; }
.q-titre:not(:has(.q-bouton)) { max-width: 22em; }
.q-bouton { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 22px; column-gap: 18px; align-items: start; width: 100%; min-height: 44px; padding: 26px 0 24px; cursor: pointer; }
.q-bouton .signe { margin-top: .12em; }
@media (hover: hover) { .q-bouton:hover .q-texte { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } }
.q-bouton:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; border-radius: 2px; }
.q-bouton:active { opacity: .85; }
.q-texte { max-width: 22em; }
.q-corps { padding: 0 0 30px; }
.q-reponse { max-width: 32em; font-size: var(--fs-4-5); line-height: 1.6; color: var(--encre-2); text-wrap: pretty; }
.signe { position: relative; flex: none; width: 22px; height: 22px; color: var(--encre); }
.signe::before, .signe::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; border-radius: 1px; background: currentColor; transition: transform var(--t-geste) var(--e-sortie); }
.signe::after { transform: rotate(90deg); }
@media (max-width: 959px) {
  .questions { display: block; }
  .q-tete { position: static; margin-bottom: 24px; }
}

.questions + .passage-nuit { height: clamp(80px, 12svh, 160px); }
.appel--seul { padding-top: clamp(32px, 4vw, 64px); }   
.appel--seul .commun { margin-top: 0; padding-top: 0; border-top: 0; }

@media (min-width: 1024px) {
  .hub-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--hub-gap); align-items: start; }
  .hub-tete > .fil-ariane, .hub-titre { grid-column: 1 / -1; }
  .hub-chapo { grid-column: 1; }
  
  .hub-chapo { grid-row: 3; }
  .hub-tete .joindre { grid-column: 2; grid-row: 3; align-self: end; }
}
@media (min-width: 1180px) {
  
  .industries__texte { display: contents; }
  .industries__titre { grid-column: 1 / 10; grid-row: 1; }
  .industries__texte p { grid-column: 1 / 7; grid-row: 2; margin-top: clamp(28px, 4.6vh, 48px); }
  .industries__texte .industries__appel { grid-column: 8 / 13; grid-row: 2; align-self: start; margin-top: clamp(28px, 4.6vh, 48px); max-width: 9.6em; }   
  
  .industries__texte .industries__reforme { grid-row: 3; margin-top: 1em; }
  .industries__texte .industries__appel { grid-row: 2 / 4; }
}

@media (min-width: 960px) and (max-width: 1179px) {
  .industries__texte .industries__appel { grid-row: 1 / span 2; }
}
@media (max-width: 1179px) {
  [data-forme="c"] .acts__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1040px) {
  
  .pied-haut { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied-marque, .pied-contact { grid-column: 1 / -1; }
  .pied-contact ul { flex-direction: row; flex-wrap: wrap; column-gap: 28px; }
}
@media (max-width: 959px) {
  .industries__titre, .industries__texte, .industries__texte p, .industries__texte .industries__appel { grid-column: 1 / -1; }
  .industries__texte .industries__appel { margin-top: clamp(18px, 3vh, 28px); max-width: 16em; }
  [data-forme="b"] .act { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}
@media (max-width: 760px) {
  
  .hub-tete .fil-ariane li:first-child { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .hub-tete { padding-top: 12px; }
  .hub-titre { font-size: var(--h1); max-width: none; }
  .hub-chapo { font-size: var(--fs-5); line-height: 1.45; }
  
  .acts { padding-top: clamp(32px, 4.4vh, 44px); }
  .industries { margin-top: clamp(40px, 6vh, 56px); padding-block: 56px 48px; }   
  
  .questions { padding: 52px var(--marge) 40px var(--gouttiere); }
  .q-tete { margin-bottom: 14px; }
  .q-bouton, .q-titre { padding: 13px 0 11px; }
  .q-bouton { column-gap: 14px; }
  .q-corps { padding-bottom: 22px; }
  .q-reponse { font-size: var(--fs-4); line-height: 1.5; }
  .questions + .passage-nuit { height: clamp(64px, 10svh, 96px); }
}

@media (max-width: 699px) {
  
  .act__photo img { aspect-ratio: 12 / 5; }
  [data-forme="d"] .act { padding-bottom: 32px; }
  [data-forme="d"] .act__media { margin-bottom: 14px; }
  [data-forme="d"] .act__ecran { width: min(100%, max(80%, 280px)); margin-top: -14%; }
  [data-forme="d"] .act__lien { scroll-margin-top: calc(41.67cqi + min(100cqi, max(80cqi, 280px)) * var(--ecran-ratio) - 14cqi + 14px + 12px); }
  
  .act__apps { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  
  .acts__suite { font-size: var(--fs-4); line-height: 1.5; }
  [data-forme="a"] .acts__liste { grid-template-columns: minmax(0, 1fr); }
  .act__ligne { font-size: var(--fs-4); }
}
@media (max-width: 639px) {
  [data-forme="c"] .acts__liste { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .act__lien { text-decoration-color: currentColor; }
  .act__ecran { border: 1px solid CanvasText; }
  .industries { border-block: 1px solid CanvasText; }
  .signe::before, .signe::after { forced-color-adjust: none; background: CanvasText; }
  .industries__appel:has(a:focus-visible) { outline-color: Highlight; }
  .industries__reforme a:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
}
@media print {
  .industries { background: none; color: inherit; }
  .industries__titre, .industries__appel a, .industries__reforme a { color: inherit; }
  .signe { display: none; }
  .act { break-inside: avoid; }
}
