/* Variante retenue : rubans photographiques. Les effets restent dans le navigateur. */
.domaines-page .domain-ribbons{display:grid;gap:14px}
.domain-ribbons.ribbons-initializing *{transition:none!important}
.domain-ribbon{background:var(--mist);overflow-anchor:none;min-width:0;scroll-margin-top:135px}
.domain-ribbon h2{margin:0;font-size:inherit}
.domain-ribbon-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;width:100%;min-height:124px;padding:25px 40px;border:0;background:#16485f;color:white;text-align:left;overflow:hidden;isolation:isolate;transition:min-height .45s}
.domain-ribbon-trigger picture{position:absolute;inset:0;z-index:-2;display:block;pointer-events:none}
.domain-ribbon-trigger img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s,filter .6s;filter:saturate(.65)}
.domain-ribbon-trigger::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,56,76,.91),rgba(17,77,103,.65) 48%,rgba(9,43,64,.18));z-index:-1;transition:opacity .5s}
.domain-ribbon-trigger:hover::after,.domain-ribbon.is-open .domain-ribbon-trigger::after{opacity:.8}
.domain-ribbon-trigger:hover img,.domain-ribbon.is-open img{transform:scale(1.025);filter:saturate(1)}
.domain-ribbon-title{font:400 34px/1.15 var(--serif);letter-spacing:-.035em;max-width:85%;overflow-wrap:break-word}
.domain-ribbon-plus{color:white;width:34px;height:34px;flex:0 0 34px;position:relative;border:1px solid #ffffff70;transition:color .25s,background .25s,border-color .25s}
.domain-ribbon-plus::before,.domain-ribbon-plus::after{content:'';position:absolute;inset:15px 8px auto;height:1.5px;background:currentColor}
.domain-ribbon-plus::after{transform:rotate(90deg);transition:transform .35s}
.domain-ribbon.is-open .domain-ribbon-plus::after{transform:rotate(0)}
.domain-ribbon-trigger:hover .domain-ribbon-plus,.domain-ribbon-trigger:focus-visible .domain-ribbon-plus{color:var(--blue);background:transparent;border-color:var(--blue)}
.domain-ribbon-trigger:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.domain-ribbon.is-open .domain-ribbon-trigger{min-height:175px}
.domain-ribbon-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.ribbons-ready .domain-ribbon-panel{grid-template-rows:0fr}
.ribbons-ready .domain-ribbon-panel>div{overflow:hidden;visibility:hidden;transition:visibility .45s}
.ribbons-ready .domain-ribbon.is-open .domain-ribbon-panel{grid-template-rows:1fr}
.ribbons-ready .domain-ribbon.is-open .domain-ribbon-panel>div{visibility:visible}
.domain-ribbon-content{padding:28px 40px 34px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.domain-ribbon-content>p{font-size:20px;line-height:1.6;max-width:640px}
.domain-ribbon-content>div{min-width:0}
.domain-ribbon-content .domain-ribbon-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 8px}
.domain-ribbon-people{display:flex;flex-wrap:wrap;gap:8px 22px}
.domain-ribbon-people a{display:inline-flex;align-items:center;min-height:32px;font-size:16px;color:var(--blue-dark);text-decoration:underline;text-decoration-color:#008bcb60;text-underline-offset:5px;transition:text-decoration-color .25s,color .25s}
.domain-ribbon-people a:hover{color:var(--blue);text-decoration-color:currentColor}
.domain-ribbon-contact{display:flex;align-items:center;justify-content:space-between;gap:36px;margin-top:55px;padding-top:40px;border-top:1px solid var(--line)}
.domain-ribbon-contact h2{font-size:37px;margin:0 0 15px}
.domain-ribbon-contact p{font-size:17px}
.domain-ribbon-contact .text-link{flex-shrink:0}
@media(max-width:700px){
 .domaines-page .domain-ribbons{gap:12px}
 .domain-ribbon{scroll-margin-top:95px}
 .domain-ribbon-trigger{min-height:110px;padding:22px;gap:12px}
 .domain-ribbon-title{font-size:26px;max-width:82%}
 .domain-ribbon.is-open .domain-ribbon-trigger{min-height:150px}
 .domain-ribbon-content{padding:23px 22px;grid-template-columns:1fr;gap:22px}
 .domain-ribbon-content>p{font-size:17px}
 .domain-ribbon-people{gap:6px 18px}
 .domain-ribbon-people a{min-height:40px}
 .domain-ribbon-plus{flex-basis:26px;width:26px;height:26px}
 .domain-ribbon-plus::before,.domain-ribbon-plus::after{inset:11px 5px auto}
 .domain-ribbon-contact{display:block;margin-top:32px;padding-top:28px}
 .domain-ribbon-contact h2{font-size:30px}
 .domain-ribbon-contact .text-link{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.domain-ribbon *,.domain-ribbon *::before,.domain-ribbon *::after{animation:none!important;transition:none!important}}