/* O2 : atlas exploratoire à planche unique.
   Règles entièrement limitées à #methode-o2-exemples : aucun autre menu ou chapitre. */
#methode-o2-exemples{
  box-sizing:border-box;min-width:0;max-width:100%;margin:36px 0 48px;
  padding:clamp(18px,3.2vw,38px);border:1px solid #cbdfe2;border-top:5px solid #208b98;
  border-radius:24px;background:linear-gradient(150deg,#f5fbfb 0%,#eff6f8 52%,#fff 100%);
  box-shadow:0 18px 45px -34px rgba(15,62,79,.4)
}
#methode-o2-exemples *{box-sizing:border-box}
#methode-o2-exemples .methode-exemples-tete{
  margin:0 0 23px!important;padding:0 0 23px!important;border:0!important;
  border-bottom:1px solid #bfd8db!important;text-align:left!important;background:none!important
}
#methode-o2-exemples .galerie-o2-surtexte{
  display:block;margin:0 0 9px!important;color:#227680;font-size:12px;font-weight:800;
  line-height:1.5;letter-spacing:.13em;text-transform:uppercase;text-align:left!important
}
#methode-o2-exemples .methode-exemples-tete h4{
  margin:0 0 13px!important;color:#103d52!important;
  font-size:clamp(23px,2.6vw,34px)!important;line-height:1.2;letter-spacing:-.035em;
  text-transform:none;text-align:left!important
}
#methode-o2-exemples .methode-exemples-tete > p:not(.galerie-o2-surtexte){
  margin:0!important;max-width:90ch;color:#385563;font-size:clamp(15px,1.35vw,17px);
  line-height:1.7;text-align:justify!important;hyphens:auto
}
#methode-o2-exemples .galerie-o2-reperes{
  display:flex;gap:8px;flex-wrap:wrap;margin:17px 0 0;align-items:center
}
#methode-o2-exemples .galerie-o2-reperes span{
  display:inline-flex;align-items:center;padding:6px 11px;border:1px solid #bdd9dd;
  border-radius:99px;color:#25566a;background:#fff;font-size:12px;font-weight:700;line-height:1.3
}
#methode-o2-exemples .galerie-o2-reperes span:first-child{color:#0e6672;background:#e4f4f3}
#methode-o2-exemples .galerie-o2{margin:0;min-width:0;max-width:100%;scroll-margin-top:100px}
#methode-o2-exemples .galerie-o2-commandes{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:13px;
  margin:0 0 17px;padding:17px;border:1px solid #cbdfe2;border-radius:15px;background:#fff
}
#methode-o2-exemples .galerie-o2-choix{display:grid;gap:7px;min-width:0}
#methode-o2-exemples .galerie-o2-choix label{
  margin:0;color:#315767;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.055em
}
#methode-o2-exemples .galerie-o2-choix select{
  width:100%;min-width:0;min-height:44px;padding:9px 36px 9px 12px;
  font:600 14px/1.35 var(--sans,system-ui,sans-serif);color:#143f52;
  background:#f8fbfc;border:1px solid #c6dadd;border-radius:10px;cursor:pointer
}
#methode-o2-exemples .galerie-o2-pagination{display:flex;align-items:center;gap:8px}
#methode-o2-exemples .galerie-o2-commandes button{
  display:grid;place-items:center;width:44px;height:44px;flex:none;margin:0;
  border:1px solid #b9d4d8;border-radius:11px;background:#eaf5f5;color:#175a66;
  font:700 22px/1 var(--sans,system-ui,sans-serif);cursor:pointer
}
#methode-o2-exemples .galerie-o2-commandes button:hover:not(:disabled){background:#cfe8e9;border-color:#388f98}
#methode-o2-exemples .galerie-o2-commandes button:disabled{opacity:.35;cursor:default}
#methode-o2-exemples .galerie-o2-commandes [role="status"]{
  min-width:60px;text-align:center;color:#315968;font:750 13px/1.4 var(--sans,system-ui,sans-serif);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
#methode-o2-exemples .galerie-o2-agrandir{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:8px 14px;border:1px solid #287d87;border-radius:11px;
  background:#12616d;color:#fff;text-decoration:none;font:700 13px/1.4 var(--sans,system-ui,sans-serif);
  white-space:nowrap
}
#methode-o2-exemples .galerie-o2-agrandir:hover{background:#0e4a55;color:#fff}
#methode-o2-exemples .galerie-o2-piste{
  display:block!important;width:100%!important;min-width:0;max-width:100%;
  margin:0!important;padding:0!important;overflow:visible!important;scroll-snap-type:none!important;
  border:1px solid #cedde1;border-radius:17px;background:#fff;box-shadow:0 9px 28px -23px #143f52
}
#methode-o2-exemples .galerie-o2-planche{
  display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
  margin:0!important;padding:0!important;flex:none!important;scroll-snap-align:none!important
}
#methode-o2-exemples .galerie-o2-planche[hidden]{display:none!important}
#methode-o2-exemples .galerie-o2-photo{
  display:block!important;width:100%!important;min-width:0!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:0!important;overflow:visible!important;background:#fff
}
#methode-o2-exemples .galerie-o2-photo img{
  display:block!important;width:100%!important;height:auto!important;
  max-width:100%!important;max-height:none!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:16px 16px 0 0!important;
  object-fit:contain!important;object-position:center!important;aspect-ratio:auto!important;
  transform:none!important;filter:none!important;-webkit-user-drag:none;user-select:none
}
#methode-o2-exemples .galerie-o2-planche figcaption{
  display:block!important;width:100%!important;min-width:0;margin:0!important;
  padding:clamp(17px,2.3vw,28px)!important;background:#fff;border-top:1px solid #d6e3e6
}
#methode-o2-exemples .galerie-o2-planche h5{
  margin:0 0 10px!important;color:#123f52!important;font:780 clamp(20px,2vw,27px)/1.3 var(--sans,system-ui,sans-serif)!important;
  text-align:left!important;letter-spacing:-.02em;text-transform:none
}
#methode-o2-exemples .galerie-o2-planche figcaption > p{
  margin:0 0 16px!important;color:#47616a;font:400 15px/1.7 var(--sans,system-ui,sans-serif);
  text-align:justify!important;max-width:100%
}
#methode-o2-exemples .galerie-o2-lecture{
  margin:0;padding:15px 18px;background:#f1f8f9;border-left:4px solid #268b98;
  border-radius:0 10px 10px 0;color:#294e5d
}
#methode-o2-exemples .galerie-o2-lecture strong{
  display:block;margin:0 0 5px;color:#155b69;font-size:13px;line-height:1.4;
  letter-spacing:.04em;text-transform:uppercase
}
#methode-o2-exemples .galerie-o2-lecture p{
  margin:0;color:#345563;font:400 14px/1.65 var(--sans,system-ui,sans-serif);text-align:justify
}
#methode-o2-exemples .galerie-o2 :is(button,select,a):focus-visible{
  outline:3px solid #167e8a;outline-offset:3px
}
@media(max-width:780px){
  #methode-o2-exemples{padding:16px;border-radius:17px}
  #methode-o2-exemples .galerie-o2-commandes{grid-template-columns:minmax(0,1fr);gap:12px;padding:13px}
  #methode-o2-exemples .galerie-o2-pagination{justify-content:space-between}
  #methode-o2-exemples .galerie-o2-agrandir{justify-self:stretch}
  #methode-o2-exemples .galerie-o2-planche figcaption{padding:16px!important}
  #methode-o2-exemples .galerie-o2-lecture{padding:13px}
}