/* ============================================================
       VARIABLES & BASE
    ============================================================ */
 :root {
     --vert: #004234;
     --vert-clair: #52b788;
     --vert-pale: #d8f3dc;
     --caca: #6B7749;
     --texte: #1b1b1b;
     --gris: #f5f5f0;
     --gris-bord: #e0e0d8;
     --blanc: #ffffff;
     --rouge: #c0392b;
     --font-titre: 'Georgia', serif;
     --font-corps: 'Helvetica Neue', Arial, sans-serif;
     --radius: 6px;
     --radius-cta: 30px;
     --ombre: 0 2px 12px rgba(0, 0, 0, .10);

     --max-w: 1440px;
 }

 a {
     text-decoration: NONE;
 }

 /* ============================================================
       LAYOUT GÉNÉRAL
    ============================================================ */
 .fiche-wrapper {
     max-width: 1447px;
     margin: 0 auto;
     padding: 30px;
 }

 /* ============================================================
       HERO PHOTO PLEIN LARGEUR
    ============================================================ */
 .fiche-hero {
     position: relative;
     height: 430px;
     overflow: hidden;
     background: #111;
     /* max-height: 50vh;*/
     min-height: 250px;
 }


 .fiche-hero img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: .85;
     object-position: center center;
     /* défaut */
 }




 .cta_inscription_featured {
     position: absolute;
     right: 0px;
     bottom: 20px;
     z-index: 20;
     transition: opacity .35s ease, transform .35s ease;
 }

 @media (max-width: 1024px) {
     .cta_inscription_featured {
         position: fixed;
         bottom: 0;
     }

     .cta_inscription_featured .btn-cta-big {
         padding: 5px 15px;
         font-size: 1em;
     }
 }



 .cta_inscription_featured.is-fixed {
     position: fixed;
     right: 0px;
     bottom: 20px;
 }

 /* état transitoire pendant le switch : invisible + léger décalage */
 .cta_inscription_featured.is-switching {
     opacity: 0;
     transform: translateY(12px);
 }

 .fiche-hero__overlay {
     position: absolute;
     max-width: 100%;
     inset: 0;
     width: var(--max-w);
     margin: 0 auto;
     /* background: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%); */
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 36px 40px;
     color: #fff;
 }

 .fiche-hero__pays {
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-bottom: 8px;
     font-size: 16px;
     padding: 0;
     font-weight: 500;
     text-shadow: 0 2px 20px rgba(0, 0, 0, .8);
 }

 .fiche-hero__titre {
     font-family: var(--font-titre);
     font-size: clamp(28px, 4vw, 48px);
     font-weight: normal;
     line-height: 1.1;
     width: 800px;
     max-width: 100%;
     padding-top: 0;
     padding-bottom: 0;

     text-shadow: 0 2px 20px rgba(0, 0, 0, .65);
 }


 @media (max-width: 880px) {
     .fiche-hero__titre {
         font-weight: 600;
     }

     .fiche-hero__pays {
         font-size: 14px;
     }
 }


 .fiche-hero__complet {
     display: inline-block;
     background: var(--rouge);
     color: #fff;
     font-weight: bold;
     letter-spacing: .1em;
     padding: 4px 12px;
     border-radius: 3px;
     margin-top: 12px;
     align-self: flex-start;
 }



 /* ============================================================
       BANDEAU 3 COLONNES SOUS LE HERO
    ============================================================ */
 .hero-bandeau {
     background: #fff;
     padding-top: 40px;
     padding-bottom: 40px;

 }

 .hero-bandeau__inner {
     max-width: var(--max-w);
     margin: 0 auto;
     padding: 0 20px;
     display: grid;
     gap: 30px;
     grid-template-columns: 1fr 1fr 1fr;
 }

 .hero-bandeau__inner--2cols {
     grid-template-columns: 1fr 2fr;
 }

 .hero-col {
     background: #f5f5f5;
     border: 1px solid #000;
     border-radius: 33px;
     padding: 25px;
 }

 .hero-col:nth-last-child(1) {
     background: #fff;
     border: none;
     border-radius: 0;
     padding-left: 0;
     background-image: url(/img/rameau.svg);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     max-height: 400px;
     padding-right: 0;
     padding-bottom: 17px;
     position: relative;
 }


 .hero-col__label {
     background-color: var(--vert);
     color: #fff;
     text-transform: uppercase;
     padding: 8px 20px;
     border-radius: 0px 20px 20px 0;
     margin-left: -24px;
     margin-bottom: 12px;
     font-weight: 900;

 }

 /* Colonne gauche : liste paramètres */
 .params-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 15px;
 }

 .params-list li {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     line-height: 1.4;
 }

 .params-list__arrow {
     color: var(--vert-clair);
     flex-shrink: 0;
     margin-top: 0px;
     line-height: 1em;
     font-size: 1.4em;
 }

 .hero-accomp-item__titre {
     line-height: 1.1em;
     display: block;
 }

 .params-list__val {
     font-weight: 500;
     line-height: 1.2em;
 }

 .params-list__sub {
     opacity: .7;
     margin-top: 1px;
 }

 .params-difficulte {
     display: flex;
     gap: 5px;
 }

 .params-difficulte .vide {
     opacity: .2;
 }

 /* Colonne milieu : accompagnateur */
 .hero-accomp {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .hero-accomp-item {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .hero-accomp-item__titre {
     font-style: italic;
 }

 .hero-accomp-item__photo {
     width: 180px;
     height: 180px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid rgba(255, 255, 255, .3);
     flex-shrink: 0;
     background: rgba(255, 255, 255, .15);
 }

 .hero-accomp-item__photo-ph {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .15);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .hero-accomp-item__nom {
     font-weight: 600;
     font-size: 1.7em;
     padding-bottom: 0px;
 }


 .hero-accomp-item__bio {
     margin-top: 10px;
     font-style: italic;
     font-size: .8em;
     margin-bottom: 15px;
     padding: 0;
     display: -webkit-box;
     -webkit-line-clamp: 6;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 /* Colonne droite : description */
 .hero-desc {

     /* display: -webkit-box; */
     /* -webkit-line-clamp: 6; */
     /* -webkit-box-orient: vertical; */
     /* overflow: hidden; */
     text-align: justify;
 }

 .hero_col {
     position: relative;
     /* déjà nécessaire pour le positionnement absolu des enfants */
     overflow: hidden;
 }

 .hero-desc {
     overflow-y: auto;
     max-height: 400px;
     /* ton max-height existant */
     scrollbar-width: thin;
     max-height: 100%;
     padding-right: 25px;
 }

 .scroll-fade {
     position: absolute;
     bottom: 0px;
     left: 0;
     right: 0;
     height: 60px;
     background: linear-gradient(to bottom, transparent, #fff);
     pointer-events: none;
     transition: opacity 0.25s;
 }

 .scroll-arrow {
     position: absolute;
     right: 20px;
     width: 28px;
     height: 28px;
     background: rgba(255, 255, 255, .5);
     border: 1px solid #ddd;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 12px;
     color: #555;
     z-index: 10;
     transition: opacity 0.25s;
 }

 .arrow-down {
     bottom: 4px;
 }

 .arrow-up {
     bottom: 36px;
     opacity: 0;
 }

 @media (max-width: 880px) {


     .hero-bandeau__inner,
     .grid-template-columns {
         max-width: 100%;
         margin: 0 auto;

         grid-template-columns: 1fr;
     }
 }

 /* ============================================================
       GRILLE PRINCIPALE : colonne contenu + sidebar
    ============================================================ */
 .fiche-grid {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 40px;
     margin-top: 36px;
     align-items: start;
 }

 @media (max-width: 820px) {

     .fiche-hero {
         height: 300px;
     }
 }

 /* ============================================================
       BLOC INFOS RAPIDES (sidebar haut)
    ============================================================ */


 .card-infos {
     background: var(--gris);
     border: 1px solid var(--gris-bord);
     border-radius: var(--radius);
     padding: 24px;
     margin-bottom: 20px;
 }

 .card-infos__prix {
     font-weight: bold;
     color: var(--vert);
     margin-bottom: 16px;
 }

 .card-infos__prix span {
     font-weight: normal;
     color: #777;
 }

 .infos-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .infos-list li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     ze: 14px;
 }

 .infos-list li::before {
     content: '→';
     color: var(--vert-clair);
     flex-shrink: 0;
     margin-top: 1px;
 }

 .infos-list strong {
     display: block;
     color: #888;
     font-weight: normal;
 }

 .card-infos__reste {
     margin-top: 16px;
     background: #fff3cd;
     border-left: 3px solid #f0ad4e;
     padding: 8px 12px;
     border-radius: 0 4px 4px 0;
 }

 /* CTA sidebar */
 .btn-cta {
     text-align: center;
     font-size: 16px;
     padding: 8px 20px;
     border-radius: var(--radius-cta);
     font-weight: bold;
     cursor: pointer;
     border: none;
     transition: opacity .2s, transform .15s;
 }

 .btn-cta:hover {
     opacity: .88;
     transform: translateY(-1px);
 }

 .btn-cta--primaire {
     background: var(--vert);
     color: #fff;
     margin-bottom: 10px;
 }

 .btn-cta-big {
     display: inline-block;

     background: var(--rouge);
     font-size: 1.3em;
     padding: 11px 25px;
     border-radius: 30px 0 0 30px;
     position: relative;
     overflow: hidden;
     transition: transform .25s ease, box-shadow .25s ease, padding-right .25s ease;
 }

 .btn-cta.btn-cta-big:hover {
     transform: translateX(4px);
     padding-right: 32px;
     box-shadow: -4px 4px 16px rgba(0, 0, 0, .22);
 }

 /* effet de brillance qui balaie le bouton */
 .btn-cta-big::before {
     content: "";
     position: absolute;
     top: 0;
     left: -75%;
     width: 50%;
     height: 100%;
     background: linear-gradient(120deg,
             transparent,
             rgba(255, 255, 255, .35),
             transparent);
     transform: skewX(-20deg);
     transition: left .55s ease;
 }

 .btn-cta.btn-cta-big:hover::before {
     left: 125%;
 }

 .btn-cta--secondaire {
     background: transparent;
     color: var(--vert);
     border: 2px solid var(--vert);
 }

 /* Accompagnateur card */
 .card-accomp {
     background: var(--gris);
     border: 1px solid var(--gris-bord);
     border-radius: var(--radius);
     padding: 20px;
     margin-bottom: 20px;
 }

 .card-accomp__titre {
     text-transform: uppercase;
     letter-spacing: .1em;
     color: #888;
     margin-bottom: 14px;
 }

 .accomp-item {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .accomp-item__photo {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
     background: var(--gris-bord);
 }

 .accomp-item__photo-placeholder {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: var(--vert-pale);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--vert);
     flex-shrink: 0;
 }

 .accomp-item__nom {
     font-weight: bold;
 }

 .accomp-item__nom a {
     color: var(--vert);
 }

 .accomp-item__bio {
     color: #666;
     margin-top: 4px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 /* Partage */

 .fiche-hero .card-share {
     position: sticky;
     bottom: 0;
     right: 0;
 }

 .card-share {

     padding: 16px 20px;
     display: flex;
     align-items: center;
     gap: 12px;
     color: #777;
     justify-content: flex-end;
 }

 .card-share a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     color: var(--vert);
     background: #fff;
     transition: background .2s;
 }

 .card-share a:hover {
     background: var(--vert-clair);
 }

 /* ============================================================
       CONTENU PRINCIPAL
    ============================================================ */



 /* ============================================================
       PARCOURS (simplifié — étapes verticales)
    ============================================================ */


 .section-parcours {
     background: var(--vert);
     color: #fff;
     padding-top: 30px;
     padding-bottom: 30px;
     position: relative;
 }

 .section-parcours:before {
     content: '';
     display: block;
     position: absolute;
     background-image: url(../img/gribouilli.png);
     width: 180px;
     height: 200px;
     right: 0px;
     top: 5px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: 99;
 }

 .section-parcours .section-titre {
     color: #fff;

 }



 .jourX {
     font-weight: 900;
     display: block;
     font-size: 18px;

     margin: 0px 0 10px 0;
     text-transform: uppercase;
     letter-spacing: .04em;
 }


 /* ============================================================
       CARROUSEL PHOTOS (4 visibles en desktop)
    ============================================================ */
 .section-photos {
     margin-bottom: 36px;
 }

 .carrousel-wrapper {
     position: relative;
     overflow: hidden;
 }

 .carrousel-track {
     display: flex;
     gap: 10px;
     transition: transform .4s cubic-bezier(.4, 0, .2, 1);
 }

 .carrousel-slide {
     flex: 0 0 calc(25% - 8px);
     aspect-ratio: 4/3;
     border-radius: var(--radius);
     overflow: hidden;
     cursor: pointer;
     position: relative;
 }

 .carrousel-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .4s ease;
 }

 .carrousel-slide:hover img {
     transform: scale(1.05);
 }

 .carrousel-slide__legende {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, rgba(0, 0, 0, .55));
     color: #fff;
     padding: 20px 10px 8px;
     opacity: 0;
     transition: opacity .3s;
 }

 .carrousel-slide:hover .carrousel-slide__legende {
     opacity: 1;
 }

 .carrousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 38px;
     height: 38px;
     background: rgba(255, 255, 255, .5);
     border: 1px solid var(--gris-bord);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: var(--ombre);
     z-index: 2;
     transition: background .2s;
 }

 .carrousel-btn:hover {
     background: var(--vert);
     color: #fff;
 }

 .carrousel-btn--prev {
     left: 8px;
 }

 .carrousel-btn--next {
     right: 8px;
 }

 @media (max-width: 820px) {
     .carrousel-slide {
         flex: 0 0 calc(50% - 5px);
     }
 }

 @media (max-width: 500px) {
     .carrousel-slide {
         flex: 0 0 88%;
     }
 }

 /* ============================================================
       DESTINATION + PRESTATIONS (deux colonnes)
    ============================================================ */
 .deux-colonnes {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     margin-bottom: 36px;
 }

 .deux-colonnes h1,
 .deux-colonnes h2,
 .deux-colonnes h3 {
     padding: 10px 0;
 }


 .deux-colonnes .bloc-texte {

     overflow-y: auto;
     max-height: 480px;
     scrollbar-width: thin;
 }

 .prestation_oui_ajout {
     font-size: 0.8em;
     color: #666;
     display: block;
     margin-top: 6px;

 }

 @media (max-width: 640px) {
     .deux-colonnes {
         grid-template-columns: 1fr;
     }

     .deux-colonnes .bloc-texte,
     .hero-col:nth-last-child(1) {
         max-height: none;
     }


 }

 .bloc-texte ul {
     list-style: disc;
     padding-left: 20px;
     margin-bottom: 12px;
 }

 .bloc-texte h3 {
     /* font-family: var(--font-titre);
     font-weight: normal;
     margin-bottom: 12px;
     color: var(--texte); */

     font-family: var(--font-corps);
     font-weight: normal;

     color: var(--texte);
     text-transform: uppercase;
     letter-spacing: .1em;
     font-weight: bold;
     margin-bottom: 8px;
     font-size: 18px;
 }
 }

 .bloc-texte__corps {
     color: #444;
     line-height: 1.7;
     margin-bottom: 15px;
     max-height: 850px;
     overflow-y: scroll;
     /* scroll vertical uniquement */
     overflow-x: hidden;
     /* ou visible, auto... selon le besoin */

 }

 .prestations-grp {
     margin-bottom: 0px;
 }

 .prestations-grp__label {
     text-transform: uppercase;
     letter-spacing: .1em;
     font-weight: bold;
     margin-bottom: 8px;
 }

 .prestations-grp--oui .prestations-grp__label {
     color: var(--vert);
 }

 .prestations-grp--non .prestations-grp__label {
     color: #c0392b;
 }

 /* Info globale */
 .info-globale {
     background: var(--vert);
     padding: 20px;
     margin-top: 20px;
     color: #fff;
 }

 .info-globale strong {
     font-weight: #fff;
 }

 /* À savoir */


 .section-savoir {

     padding: 16px 20px;

 }

 /* Stage */
 .section-stage {
     background: var(--gris);
     border-radius: var(--radius);
     padding: 24px 28px;
     margin-bottom: 36px;
 }

 /* ============================================================
       INSCRIPTION
    ============================================================ */


 .inscription-intro {
     margin-bottom: 20px;
     color: #444;
 }

 /* ============================================================
       VOYAGES CONNECTÉS
    ============================================================ */
 .section-connectes {
     /* margin-top: 50px; */
     margin-bottom: 50px;
 }

 .voyages-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-top: 20px;
 }

 @media (max-width: 820px) {
     .voyages-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 480px) {
     .voyages-grid {
         grid-template-columns: 1fr;
     }
 }

 .voyage-card {
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid var(--gris-bord);
     transition: box-shadow .2s, transform .2s;
     display: block;
     background: #fff;
 }

 .voyage-card:hover {
     box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
     transform: translateY(-3px);
 }

 .voyage-card__photo {
     aspect-ratio: 4/3;
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .voyage-card__badge {
     position: absolute;
     top: 8px;
     right: 8px;
     background: var(--rouge);
     color: #fff;
     font-weight: bold;
     padding: 3px 8px;
     border-radius: 3px;
 }

 .voyage-card__corps {
     padding: 12px 14px;
     background: #fff;
 }

 .voyage-card__titre {
     font-weight: bold;
     line-height: 1.3;
     margin-bottom: 4px;
 }

 .voyage-card__pays {
     color: #888;
     margin-bottom: 6px;
 }

 .voyage-card__prix {
     color: var(--vert);
     font-weight: bold;
 }

 /* ============================================================
       MODALE CONTACT
    ============================================================ */
 .modal-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .5);
     z-index: 1000;
     align-items: center;
     justify-content: center;
     padding: 20px;
 }

 .modal-overlay.open {
     display: flex;
 }

 .modal-box {
     background: #fff;
     border-radius: var(--radius);
     padding: 32px;
     max-width: 100%;
     width: 750px;
     position: relative;
     max-height: 90vh;
     overflow-y: auto;
 }

 .modal-box-h2 {
     font-family: var(--font-titre);
     margin-bottom: 0px;
     padding-bottom: 10px;
     font-weight: 600;
     font-size: clamp(22px, 26px, 30px);
 }

 .modal-box p {
     color: #666;
     margin-bottom: 20px;
 }

 .modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     background: none;
     border: none;
     cursor: pointer;
     color: #888;
     font-size: 2.5em;
     line-height: .2;
 }

 .modal-close:hover {
     color: var(--texte);
 }

 /* ============================================================
       MESSAGE POST-ENVOI
    ============================================================ */
 .message-envoi {
     background: #d4edda;
     border: 1px solid #c3e6cb;
     color: #155724;
     padding: 14px 18px;
     border-radius: var(--radius);
     margin-bottom: 24px;
 }

 /* ============================================================
       ASTÉRISQUE
    ============================================================ */
 .ref-asterisque {
     color: #888;
     font-style: italic;
     margin-top: 8px;
     font-size: .8em;
     margin-top: 0;
 }

 /* ============================================================
       PDF DOWNLOAD
    ============================================================ */
 .btn-pdf {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--vert);
     border: 1px solid var(--vert);
     border-radius: 40px;
     padding: 6px 16px;
     margin-bottom: 20px;
     transition: background .2s, color .2s;
 }

 .btn-pdf:hover {
     background: var(--vert);
     color: #fff;
 }