:root{
  --blue:#1e3d68;
  --text:#416fb0;
  --gold:#c58a13;
  --link:#0969a6;
  --page-max:1040px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#fff;
  font-family:Calibri,Arial,Helvetica,sans-serif;
  color:var(--text);
}
a{color:var(--link);text-decoration:underline;text-underline-offset:.12em}
img{display:block;max-width:100%;height:auto}

.page{
  width:min(100%,var(--page-max));
  margin:0 auto;
  padding:clamp(10px,2.2vw,22px) clamp(12px,2.4vw,24px) clamp(28px,5vw,48px);
  background:#fff;
  font-size:clamp(18px,2.1vw,24px);
  line-height:1.28;
}

.hero{
  width:100%;
  margin:0 0 clamp(18px,3vw,28px);
}

h2{
  margin:clamp(18px,3vw,28px) 0 clamp(16px,2.8vw,26px);
  padding:4px 6px;
  background:var(--blue);
  color:#fff;
  font-size:clamp(20px,2.35vw,25px);
  line-height:1.1;
  font-weight:700;
}
p{margin:0 0 20px;text-align:justify}
strong{font-weight:700;color:#3265a7}
sup{font-size:.65em}

.section{
  margin-bottom:clamp(18px,3vw,28px);
  content-visibility:auto;
  contain-intrinsic-size:1px 900px;
}
header{content-visibility:visible}

.row{
  display:flex;
  gap:clamp(20px,4vw,42px);
  align-items:center;
  margin:0 0 clamp(18px,3vw,26px);
}
.two-cols{align-items:flex-start}
.reverse{flex-direction:row-reverse}
.compact{margin-top:-8px}
.row>*{flex:1 1 0;min-width:0}

.logo{
  width:clamp(210px,28vw,285px);
  max-width:32%;
  height:auto;
  flex:0 0 auto;
}
.logo.medium{width:clamp(230px,29vw,300px)}
.logo.small{width:clamp(215px,28vw,290px)}
.photo{
  width:clamp(330px,42vw,430px);
  max-width:48%;
  height:auto;
  flex:0 0 auto;
  margin-top:10px;
}
.row-intro p{font-size:clamp(18px,2.05vw,23px)}

.program-list{
  list-style:none;
  margin:20px 0 20px clamp(10px,7vw,75px);
  padding:0;
  font-size:clamp(18px,2.1vw,24px);
}
.program-list li{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0;
}
.program-list img{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
}
.program-list .link-line{display:block;margin-top:22px}
.notes ul,.links ul{margin-top:-10px}
address{font-style:normal;font-size:clamp(19px,2.2vw,25px)}
.flyers img{width:100%;height:auto;margin:clamp(34px,7vw,70px) 0 26px}
.flyers .portrait{width:min(78%,850px);margin-left:auto;margin-right:auto}

/* Tablettes */
@media (max-width:900px){
  .page{font-size:21px}
  .row{gap:24px}
  .logo{width:240px;max-width:34%}
  .logo.medium{width:250px}
  .logo.small{width:240px}
  .photo{width:360px;max-width:46%}
  .program-list{margin-left:20px}
  .flyers .portrait{width:88%}
}

/* Smartphones et petites tablettes : une seule colonne, images centrées */
@media (max-width:700px){
  .page{
    padding:10px 12px 34px;
    font-size:18px;
    line-height:1.34;
  }
  h2{
    margin:20px 0 16px;
    font-size:20px;
    line-height:1.15;
  }
  p{text-align:left;margin-bottom:16px}
  .row,.reverse,.two-cols{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:stretch;
  }
  .row-intro,.section:nth-of-type(4) .row,.section:nth-of-type(6) .row{
    flex-direction:column;
  }
  .logo,.logo.medium,.logo.small,.photo{
    width:min(72vw,300px);
    max-width:100%;
    margin:4px auto 14px;
    order:-1;
  }
  .photo{width:min(88vw,420px)}
  .reverse .logo,.reverse .photo{order:-1}
  .program-list{
    margin:8px 0 14px;
    font-size:18px;
  }
  .program-list li{
    align-items:flex-start;
    gap:8px;
  }
  .program-list img{
    width:28px;
    height:28px;
    margin-top:1px;
  }
  .notes ul,.links ul{margin-top:0;padding-left:1.25em}
  address{font-size:18px;line-height:1.35}
  .flyers img,.flyers .portrait{width:100%;margin:28px 0 20px}
}

/* Très petits écrans */
@media (max-width:420px){
  .page{padding-left:10px;padding-right:10px;font-size:17px}
  h2{font-size:18px}
  .logo,.logo.medium,.logo.small{width:min(78vw,260px)}
  .photo{width:100%}
  .program-list{font-size:17px}
  .program-list img{width:26px;height:26px}
}