/* Origins: the text has more space than either of its illustrations. */
.origins{grid-template-columns:minmax(0,.9fr) minmax(340px,1.6fr) minmax(0,.45fr);gap:clamp(24px,3vw,48px)}
.origins>*{min-width:0}
.origins .origins-copy p:not(.eyebrow){text-align:justify;hyphens:auto;overflow-wrap:break-word}
.origins .origins-art{width:100%;margin:0}
.origins .art-caption{font-size:1rem}
.origins-map{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch;isolation:isolate}
.origins-map:before{content:'';position:absolute;inset:8% -12%;z-index:-1;background:radial-gradient(ellipse,#e3f1fc 0%,#f3f8fc 45%,transparent 72%)}
.origins-map img{width:100%;max-width:165px;height:auto;max-height:326px;object-fit:contain;mix-blend-mode:multiply;filter:saturate(.8) contrast(1.08);mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent)}
@media(min-width:761px) and (max-width:1100px){
  .origins{grid-template-columns:minmax(0,.65fr) minmax(340px,1.8fr) minmax(0,.35fr);gap:20px}
  .origins .origins-art img{height:220px;object-fit:cover;object-position:45% center}
  .origins .art-caption{font-size:.85rem}
}
@media(max-width:760px){
  .origins{grid-template-columns:minmax(0,1fr) minmax(80px,.4fr);gap:20px 24px}
  .origins .origins-copy{grid-column:1/-1;grid-row:1}
  .origins .origins-art{grid-column:1;grid-row:2;max-width:none;align-self:center}
  .origins .origins-art img{height:140px;object-fit:cover;object-position:center}
  .origins .art-caption{font-size:.85rem;margin-top:10px}
  .origins-map{grid-column:2;grid-row:2;align-self:center}
  .origins-map img{height:170px;width:100%;object-fit:contain}
  .origins .text-link{max-width:100%;gap:12px}
}
/* A compact introduction with the complete group photograph visible. */
/* Six positions from the supplied image, read left to right, then top to bottom. */
.journey--positions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.journey--positions li{min-width:0}
.journey--positions li:before{content:none}
.journey-position{display:block;width:100%;max-width:120px;aspect-ratio:1;margin:0 auto 12px;background-image:url('../assets/images/etapes-evolution.png');background-repeat:no-repeat;background-size:300% 200%;background-position:0 0}
.journey--positions li:nth-child(2) .journey-position{background-position:50% 0}
.journey--positions li:nth-child(3) .journey-position{background-position:100% 0}
.journey--positions li:nth-child(4) .journey-position{background-position:0 100%}
.journey--positions li:nth-child(5) .journey-position{background-position:50% 100%}
.journey--positions li:nth-child(6) .journey-position{background-position:100% 100%}
@media(max-width:1100px){.journey--positions{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}}
.hero--overview{min-height:420px;min-height:max(420px,50svh)}
.hero--overview .hero-image{inset:0 0 0 auto;width:52%;height:100%;object-fit:contain;object-position:center}
.hero--overview .hero-shade{background:linear-gradient(90deg,#03234b 0%,#07366d 44%,transparent 48%)}
.hero--overview .hero-content{width:min(560px,calc(48% - 60px));margin-left:max(40px,calc((100% - 1240px)/2));margin-right:auto;padding-block:24px 38px}
.hero--overview h1{font-size:clamp(1.65rem,2.3vw,2.6rem)}
.hero--overview .eyebrow{font-size:.65rem;letter-spacing:.12em;margin-bottom:10px}
.hero--overview .hero-school{font-size:clamp(1.1rem,1.5vw,1.45rem);margin-bottom:12px}
.hero--overview .color-line{margin:14px 0;width:210px}
.hero--overview .hero-motto{font-size:1.4rem;margin-bottom:6px}
.hero--overview .hero-family{font-size:1.1rem;margin-bottom:18px}
.hero--overview .actions{gap:10px}
.hero--overview .button{font-size:.8rem;padding:10px 15px;min-height:43px;gap:8px}
.hero--overview .hero-caption{right:24px;bottom:24px;font-size:.55rem}
@media(max-width:1100px) and (min-width:761px){
  .hero--overview .hero-content{width:calc(48% - 40px);margin-left:20px}
  .hero--overview h1{font-size:1.8rem}
  .hero--overview .button{padding:9px 12px;font-size:.75rem}
}
/* On narrow screens, let the copy grow and keep the entire photo above it. */
@media(max-width:760px){
  .hero--overview{min-height:0;display:flex;flex-direction:column;align-items:stretch}
  .hero--overview .hero-image{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;z-index:0}
  .hero--overview .hero-shade{display:none}
  .hero--overview .hero-content{width:calc(100% - 32px);margin-inline:auto;padding:22px 0 38px;text-align:center}
  .hero--overview h1{max-width:none;font-size:1.8rem}
  .hero--overview .color-line{margin:14px auto}
  .hero--overview .actions{flex-direction:row;margin-inline:0}
  .hero--overview .mobile-break{display:none}
}