/* Présentation adaptée du modèle Cartes virtuelles fourni par le propriétaire.
   Portée limitée aux six pages de collection : aucun changement des diaporamas. */
.cp-reference-layout .cp-wrap { width:min(1740px,calc(100% - 48px)); box-sizing:border-box; margin-left:auto; margin-right:auto; }
.cp-reference-layout .cp-welcome { display:block; padding:48px 0 26px; }
.cp-reference-layout .cp-welcome h2,
.cp-reference-layout .cp-section-heading h2 { margin:0 0 12px; color:#087d97; font:700 clamp(32px,3.2vw,52px)/1.12 Georgia,serif; }
.cp-reference-layout .cp-welcome p { max-width:850px; font-size:17px; line-height:1.65; }
.cp-reference-layout .cp-home-atelier { display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr) auto; gap:24px; align-items:center; padding:clamp(22px,3vw,36px); margin-bottom:42px; border:1px solid #cadfe5; border-radius:21px; background:linear-gradient(120deg,#f0f8fa,#fff5ee); }
.cp-reference-layout .cp-home-atelier figure { margin:0; padding:0; transform:none; border:0; box-shadow:none; background:none; }
.cp-reference-layout .cp-home-atelier figure img { width:100%; height:140px; object-fit:contain; border-radius:14px; }
.cp-reference-layout .cp-home-atelier h2 { margin:5px 0; font:500 clamp(26px,2.5vw,36px)/1.15 Georgia,serif; color:#087d97; }
.cp-reference-layout .cp-home-atelier p { font-size:16px; margin:5px 0; line-height:1.6; }
.cp-reference-layout .cp-home-atelier > a { margin:0; border-radius:12px; text-align:center; }
.cp-reference-layout .cp-day { display:grid; grid-template-columns:minmax(300px,.9fr) 1.1fr; align-items:stretch; padding:0; overflow:hidden; margin-bottom:42px; border:1px solid #cadfe5; border-radius:28px; background:#f0f8fa; }
.cp-reference-layout .cp-day > img { box-sizing:border-box; width:100%; height:390px; max-height:none; object-fit:contain; padding:24px; border-radius:0; background:#e6f1f4; }
.cp-reference-layout .cp-day > div { padding:42px; align-self:center; }
.cp-reference-layout .cp-day h2 { margin:12px 0; font:700 clamp(30px,3vw,48px)/1.12 Georgia,serif; color:#087d97; }
.cp-reference-layout .cp-day p { font-size:18px; line-height:1.65; }
.cp-reference-layout .cp-destination-tabs { display:flex; gap:9px; flex-wrap:wrap; margin:20px 0; padding:16px; border:1px solid #cadfe5; border-radius:18px; background:#f0f8fa; }
.cp-reference-layout .cp-destination-tabs a { padding:10px 16px; border:1px solid #bed7df; border-radius:24px; background:white; color:#087d97; text-decoration:none; font-weight:700; }
.cp-reference-layout .cp-destination-tabs a[aria-current], .cp-reference-layout .cp-destination-tabs a:hover { background:#087d97; color:white; }
.cp-reference-layout .cp-tools { display:grid; grid-template-columns:minmax(220px,1fr) 240px 240px; gap:12px; padding:18px; border:1px solid #cadfe5; border-radius:22px; background:#f0f8fa; }
.cp-reference-layout .cp-tools input,.cp-reference-layout .cp-tools select { box-sizing:border-box; width:100%; min-height:48px; padding:12px 14px; border:1px solid #bed7df; border-radius:13px; background:#fff; color:#173443; font:16px Arial,sans-serif; }
.cp-reference-layout .cp-filters { display:flex; gap:8px; flex-wrap:wrap; margin:13px 0; }
.cp-reference-layout .cp-filters button { padding:9px 14px; border:1px solid #bed7df; border-radius:25px; background:white; color:#087d97; cursor:pointer; }
.cp-reference-layout .cp-filters button.is-active { color:white; background:#087d97; }
.cp-reference-layout .cp-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; align-items:stretch; }
.cp-reference-layout .cp-card { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border:1px solid #cadfe5; border-radius:20px; background:#fff; box-shadow:0 12px 28px #183f4d0c; }
.cp-reference-layout .cp-card[hidden] { display:none; }
.cp-reference-layout .cp-card-image { position:relative; height:auto; aspect-ratio:3/2; padding:8px; background:#eaf3f5; }
.cp-reference-layout .cp-image-button { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; }
.cp-reference-layout .cp-card-image img { width:100%; height:100%; max-height:none; object-fit:contain; border-radius:8px; }
.cp-reference-layout .cp-favorite { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; font-size:24px; }
.cp-reference-layout .cp-card-copy { display:flex; flex:1; flex-direction:column; gap:9px; padding:16px; }
.cp-reference-layout .cp-card-copy h3 { margin:0; color:#087d97; font:700 23px/1.2 Georgia,serif; }
.cp-reference-layout .cp-card-copy p { margin:0; font-size:15px; line-height:1.5; }
.cp-reference-layout .cp-card-copy .cp-country-label { font-size:11px; letter-spacing:.06em; }
.cp-reference-layout .cp-related-route { font-size:14px; margin:4px 0 12px; }
.cp-reference-layout .cp-card-actions { display:grid; grid-template-columns:1fr; gap:8px; margin-top:auto; padding-top:8px; }
.cp-reference-layout .cp-card-actions button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:11px 8px; border-radius:12px; font-size:14px; }
.cp-reference-layout .cp-card-actions .cp-primary { background:#ff7654; color:white; border:1px solid #ff7654; }
.cp-reference-layout .cp-model-share { color:#087d97; border:1px solid #bed7df; background:#f0f8fa; }
.cp-reference-layout .cp-model-share-icon { width:18px; height:18px; flex:none; }
.cp-reference-layout :is(a,button,input,select):focus-visible { outline:3px solid #087d97; outline-offset:3px; }
@media(max-width:1100px) {
 .cp-reference-layout .cp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .cp-reference-layout .cp-tools { grid-template-columns:1fr 1fr; }
 .cp-reference-layout .cp-tools > label:first-child { grid-column:1/-1; }
 .cp-reference-layout .cp-home-atelier { grid-template-columns:190px 1fr; }
 .cp-reference-layout .cp-home-atelier > a { grid-column:2; width:fit-content; }
}
@media(max-width:700px) {
 .cp-reference-layout .cp-wrap { width:calc(100% - 28px); }
 .cp-reference-layout .cp-welcome { padding-top:30px; }
 .cp-reference-layout .cp-home-atelier { grid-template-columns:1fr; padding:22px; gap:16px; }
 .cp-reference-layout .cp-home-atelier figure { width:190px; max-width:100%; }
 .cp-reference-layout .cp-home-atelier > a { grid-column:1; width:fit-content; }
 .cp-reference-layout .cp-day { grid-template-columns:1fr; }
 .cp-reference-layout .cp-day > img { height:auto; max-height:310px; padding:16px; }
 .cp-reference-layout .cp-day > div { padding:28px 22px; }
 .cp-reference-layout .cp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .cp-reference-layout .cp-card { border-radius:15px; }
 .cp-reference-layout .cp-card-copy { padding:12px; }
 .cp-reference-layout .cp-card-copy h3 { font-size:19px; }
 .cp-reference-layout .cp-card-copy p { font-size:14px; }
 .cp-reference-layout .cp-tools { grid-template-columns:1fr; padding:12px; }
 .cp-reference-layout .cp-tools > label:first-child { grid-column:auto; }
 .cp-reference-layout .cp-card-actions button { font-size:12px; }
}
@media(max-width:390px) { .cp-reference-layout .cp-grid { grid-template-columns:1fr; } }

/* Introduction de la collection : texte sous le titre, sur sa propre ligne. */
.cp-reference-layout .cp-collection-introduction {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.cp-reference-layout .cp-collection-introduction > p {
  width:100%;
  max-width:100%;
  margin:0 0 20px;
  text-align:left;
  line-height:1.7;
}

/* Atelier photo : une invitation illustrée, lisible sur ordinateur et téléphone. */
.cp-reference-layout .cp-photo-invitation {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  padding:0;
  gap:0;
  overflow:hidden;
  border:1px solid #d3e3e7;
  border-radius:30px;
  background:linear-gradient(125deg,#f0f8fa,#fff9f2);
  box-shadow:0 16px 40px #183f4d0a;
  margin-top:8px;
  margin-bottom:42px;
}
.cp-reference-layout .cp-photo-invitation figure {
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  min-height:420px;
  margin:0;
  border-radius:0;
}
.cp-reference-layout .cp-photo-invitation figure img {
  display:block;
  width:100%;
  height:100%;
  min-height:420px;
  border-radius:0;
  object-fit:cover;
}
.cp-reference-layout .cp-photo-invitation-copy {
  min-width:0;
  align-self:center;
  padding:clamp(26px,3.4vw,56px);
}
.cp-reference-layout .cp-photo-invitation h2 {
  margin:14px 0 18px;
  max-width:650px;
  color:#087d97;
  font:700 clamp(29px,2.8vw,44px)/1.12 Georgia,serif;
}
.cp-reference-layout .cp-photo-invitation-copy > p:not(.cp-eyebrow) {
  font-size:17px;
  line-height:1.7;
  margin:0 0 20px;
}
.cp-photo-invitation-steps {
  display:grid;
  gap:12px;
  padding:0;
  margin:24px 0;
  list-style:none;
}
.cp-photo-invitation-steps li {
  display:flex;
  align-items:center;
  gap:12px;
  color:#244958;
  font-size:16px;
  font-weight:600;
}
.cp-photo-invitation-steps li > span {
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#e0eff2;
  color:#087d97;
}
.cp-reference-layout .cp-photo-invitation .cp-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  box-sizing:border-box;
  min-height:52px;
  padding:15px 22px;
  margin:0;
  border-radius:14px;
  background:#ff7654;
  color:white;
  font-size:16px;
  font-weight:750;
  text-align:center;
  text-decoration:none;
}
.cp-reference-layout .cp-photo-invitation-copy > .cp-photo-invitation-note {
  margin:16px 0 0;
  font-size:13px;
  color:#607784;
}
@media(max-width:700px) {
 .cp-reference-layout .cp-photo-invitation { grid-template-columns:1fr; border-radius:24px; }
 .cp-reference-layout .cp-photo-invitation figure,
 .cp-reference-layout .cp-photo-invitation figure img { height:auto; min-height:0; aspect-ratio:3/2; }
 .cp-reference-layout .cp-photo-invitation-copy { padding:25px 22px 28px; }
 .cp-reference-layout .cp-photo-invitation .cp-primary { width:100%; font-size:15px; }
 .cp-reference-layout .cp-photo-invitation .cp-eyebrow { font-size:11px; letter-spacing:.08em; }
}

/* Le paragraphe de collection utilise toute la largeur de son conteneur. */
body.cp-reference-layout .cp-collection .cp-section-heading.cp-collection-introduction {
  display:block;
  width:100%;
  max-width:none;
}
body.cp-reference-layout .cp-collection .cp-section-heading.cp-collection-introduction > p {
  display:block;
  box-sizing:border-box;
  width:100% !important;
  max-width:none !important;
  flex:none;
  margin:12px 0 24px;
  white-space:normal;
  text-wrap:wrap;
}

/* Téléphone : un menu natif unique, ouvert avec les contrôles du téléphone. */
.cp-reference-layout .cp-simple-destination { display:none; }
@media(max-width:700px) {
 body.cp-reference-layout .cp-tools { gap:12px; padding:14px; border-radius:20px; }
 body.cp-reference-layout .cp-tools .cp-desktop-destination { display:none; }
 body.cp-reference-layout .cp-tools .cp-simple-destination { display:block; grid-column:1/-1; }
 body.cp-reference-layout .cp-tools input,
 body.cp-reference-layout .cp-tools select {
   min-height:52px;
   width:100%;
   max-width:100%;
   border:1px solid #bdd6de;
   border-radius:13px;
   font-size:16px;
 }
 body.cp-reference-layout .cp-simple-destination select {
   appearance:none;
   padding-right:48px;
   background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23087d97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
   background-size:24px;
   color:#173443;
 }
 body.cp-reference-layout .cp-filters {
   display:flex;
   flex-wrap:nowrap;
   overflow-x:auto;
   gap:8px;
   padding:4px 0 10px;
   scrollbar-width:thin;
   -webkit-overflow-scrolling:touch;
 }
 body.cp-reference-layout .cp-filters button { flex:0 0 auto; white-space:nowrap; min-height:42px; }
}

/* Espacement du libellé et du menu de destination sur téléphone. */
@media (max-width:700px) {
  body.cp-reference-layout .cp-tools label.cp-simple-destination {
    display:flex;
    flex-direction:column;
    gap:12px;
    line-height:1.5;
  }
  body.cp-reference-layout .cp-tools .cp-simple-destination > select {
    display:block;
    margin:0;
  }
}
