/* =====================================================
   INDEX.CSS - VERSION RÉORGANISÉE PAR CATÉGORIE
   -----------------------------------------------------
   Chaque grande section ci-dessous regroupe : la règle de
   base (PC) PUIS ses media queries responsive juste en
   dessous — au lieu d'avoir tout le responsive éparpillé
   à la fin du fichier comme avant. Ordre des sections :

   1. Variables & thème (:root)
   2. Reset global + utilitaires de base
   3. Menu / Navigation (barre fixe + boussole mobile)
   4. Hero / Accueil
   5. Mise en page commune des grandes sections
   6. Cartes de contenu (section-card, mini-card...)
   7. Diaporama "Priorités" (+ zoom loupe)
   8. Sections diverses (médical, immersive, vidéo...)
   9. Liens & boutons texte
   10. Boutons flottants (retour haut/menu)
   11. Footer

   Corrections apportées pendant ce rangement (comportement
   inchangé partout ailleurs) :
   - ZOOM LOUPE : accolade @media jamais refermée + règle
     touch-action:pinch-zoom dupliquée et mal placée (à
     l'intérieur du bloc réservé aux souris) → corrigé.
   - .mini-card:last-child : la règle par défaut passait
     APRÈS la règle spécifique au paysage dans le fichier,
     ce qui annulait silencieusement cette dernière → l'ordre
     est remis dans le bon sens (défaut, puis exception).
   - Le bloc media (max-width:950px) landscape sur les
     mini-cards s'était retrouvé égaré au milieu de la
     section Diaporama → replacé avec les autres règles
     de cartes.
===================================================== */


/* ===================================================== */
/* ============ 1. VARIABLES & THÈME (:root) ============ */
/* ===================================================== */

:root{

    /* ---------- COULEURS PRINCIPALES (doré) ---------- */

    /* Doré clair : texte des titres, libellés, bordures fines,
       couleur de survol des liens du menu.
       Pour changer la teinte du site, c'est LA ligne à modifier. */
    --gold:#f1d18a;

    /* Doré foncé : contours de cartes, ombres au survol,
       variante plus sombre du doré clair. */
    --gold-dark:goldenrod;

    /* Mêmes couleurs que ci-dessus mais en triplet RGB (sans #),
       nécessaires pour écrire des rgba(...) avec transparence,
       par ex. rgba(var(--gold-rgb),.35). NE PAS changer ces deux
       lignes seules : si tu changes --gold ou --gold-dark ci-dessus,
       mets aussi à jour la valeur RGB correspondante ici pour que
       les deux restent cohérentes. */
    --gold-rgb:241,209,138;      /* = --gold en RGB */
    --gold-dark-rgb:218,165,32;  /* = --gold-dark en RGB */

    /* ---------- COULEURS SECONDAIRES ---------- */

    /* Fond très sombre utilisé derrière les diaporamas/vidéos. */
    --black-bg:#111;

    /* Fond gris foncé des encadrés (ex. bloc "Pour mémoire"). */
    --panel-dark:#444;

    /* Gris clair utilisé pour les textes discrets
       (copyright en bas de page, mentions secondaires). */
    --muted:#aaa;

    /* Couleur bronze utilisée pour la bordure de l'encadré
       et le contour du compteur de visites. */
    --accent-bronze:#c8a85a;
    --accent-bronze-rgb:200,168,90; /* = --accent-bronze en RGB, pour les rgba() avec alpha */

    /* Couleurs des boutons de réseaux sociaux dans le footer. */
    --youtube-red:red;
    --facebook-blue:#1877f2;

    /* ---------- TAILLES / ARRONDIS ---------- */

    /* Rayon des coins arrondis des grandes sections
       (cartes, blocs "priorités", grands panneaux). */
    --radius-lg:24px;

    /* Rayon des coins arrondis des sections encore plus larges
       (section immersive, cartes médicales). */
    --radius-xl:28px;

    /* ---------- RÉGLAGES SPÉCIFIQUES AJUSTABLES ---------- */

    /* ============ TAILLE DU DIAPORAMA (EN %) ============
       Une variable par catégorie d'écran, pour pouvoir régler
       chacune INDÉPENDAMMENT (ex: petit sur PC, mais grand sur
       téléphone). Change juste le chiffre, chacune accepte aussi
       du px si tu préfères une taille fixe (ex: 450px).

       Le % est toujours relatif à la largeur du bloc qui contient
       le diaporama, pas à l'écran entier : 100% = pleine largeur
       de ce bloc, 50% = la moitié.

       - PC             : écrans de plus de 1194px de large.
       - Tablette       : de 769px à 1194px de large (portrait ET paysage,
                           seuil élargi pour couvrir aussi l'iPad Pro 11"
                           en mode paysage, largeur 1194px).
       - Téléphone      : 768px de large ou moins (portrait ET paysage). */

    --priorites-largeur-pc:15%;
    --priorites-largeur-tablette:35%;
    --priorites-largeur-telephone:75%;

    --priorites-hauteur-max-pc:100vh;
    --priorites-hauteur-max-tablette:90vh;
    --priorites-hauteur-max-telephone:100vh;

    /* Hauteur de la barre .top-nav-fixed (pages secondaires) :
       utilisée à la fois pour son min-height et pour le padding-top
       du body, afin que le contenu ne passe jamais sous la barre. */
    --nav-h:76px;
}


/* ===================================================== */
/* ===== 2. RESET GLOBAL + UTILITAIRES DE BASE ========== */
/* ===================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background:linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)),
	url("../picture/survie.png") center/cover fixed;
	font-family: Verdana, Arial, sans-serif;
	color: white;
    line-height: 1.7;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);    
}

p { text-align: left; }

blockquote { margin-left: 5em; }


/* ===================================================== */
/* ========== 3. MENU / NAVIGATION ====================== */
/* -----------------------------------------------------
   Barre fixe en haut (top-nav-fixed) + navigation sticky
   (.navigation) + bouton boussole mobile (menu-toggle).
   Une seule media query (max-width:1194px) regroupe tout
   le comportement mobile/tablette du menu.
===================================================== */

.top-nav-fixed{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    min-height:var(--nav-h);
    z-index:9999;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    padding:12px 20px;
    background:rgba(20,20,20,.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(var(--gold-dark-rgb),.35);
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}

.top-nav-fixed .pdf{
    margin:0;
}

.menu-liste-fixed{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:0;
}

/* Empêche le contenu de passer sous la barre fixe */
.has-fixed-nav{
    padding-top:var(--nav-h);
}

.navigation {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(0,0,0,0.85);
	backdrop-filter: blur(10px);
	padding: 1em;
    margin: 0;
}

.navigation ul {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	list-style: none;
}

.navigation a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	transition:
	transform 0.3s ease,
	color 0.3s ease;
}

.navigation a:hover {
	color: var(--gold);
	transform: scale(1.08);
}

/* Bouton boussole 🧭 : visible seulement en mobile/tablette
   (display:none par défaut, réactivé dans la media query
   plus bas). Zoomé x2 et affiché en position fixe sur les
   petits écrans, voir media query ci-dessous. */
.menu-toggle{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    background:rgba(20,20,20,.9);
    border:1px solid rgba(var(--gold-dark-rgb),.5);
    border-radius:14px;
    width:52px;  /* taille du bouton boussole avant le zoom x2 appliqué en media query */
    height:52px;
    cursor:pointer;
}

.menu-toggle:hover{
    box-shadow:0 0 12px rgba(var(--gold-dark-rgb),.5);
}

.menu-toggle-icone{
    font-size:1.4em;
    display:inline-block;
    line-height:1;
    transition:transform .4s ease;
}

.menu-toggle-etiquette{
    font-size:0.5em;
    color:var(--gold);
    line-height:1;
    font-weight:bold;
}

/* La boussole pivote de 90° quand le menu est ouvert */
.menu-toggle[aria-expanded="true"] .menu-toggle-icone{
    transform:rotate(90deg);
}

/* Tablette + téléphone (≤1194px) : barre repliée à sa hauteur
   minimale, boussole flottante en haut à gauche (zoomée x2),
   menu déroulant vertical au clic. */
@media screen and (max-width:1194px){

    :root{
        --nav-h:0px; /* doit couvrir la boussole zoomée (52px x2 = 104px de haut), pas juste la barre repliée, sinon elle déborde sur le contenu qui suit */
    }

    .menu-liste-fixed{
        --menu-largeur: 70%;

        flex-direction:column;
        gap:0;
        max-height:0;
        overflow:hidden;
        width:var(--menu-largeur);
        margin:0 auto;
        transition:max-height .5s ease, padding-top .5s ease;
    }

    /* Menu déroulé, posé par le JS */
    .menu-liste-fixed.menu-ouvert{
        max-height:400px;
        /* 110px pousse tout le menu sous la boussole (104px de haut,
           scale(2) sur son 52px de base) : sans ça, son premier lien
           (Accueil) se retrouve caché sous la zone de clic invisible
           de la boussole, en haut à gauche de l'écran, et le tap ne
           déclenche jamais la navigation. */
        padding-top:110px;
    }

    .menu-liste-fixed li{
        text-align:center;
        padding:0.6em 0;
        border-top:1px solid rgba(var(--gold-dark-rgb),.15);
    }

    .menu-toggle{
        display:flex;
        position:fixed;
        top:0;
        left:0;
        transform:scale(2);
        transform-origin: top left;
        z-index:2000;
    }

    .navigation ul{
        /* Largeur du menu déplié : change juste ce pourcentage
           pour l'ajuster toi-même (100% = pleine largeur) */
        --menu-largeur: 50%;

        flex-direction:column;
        gap:0;
        max-height:0;
        overflow:hidden;
        width:var(--menu-largeur);
        margin:0 auto;
        transition:max-height .5s ease, padding-top .5s ease;
    }

    /* Menu déroulé, posé par le JS */
    .navigation ul.menu-ouvert{
        max-height:600px;
        padding-top:1em;
    }

    .navigation li{
        text-align:center;
        padding:0.7em 0;
        border-top:1px solid rgba(var(--gold-dark-rgb),.15);
    }
}

@media screen and (max-width:768px) {
	.navigation a {
		text-shadow: none;
	}
}


/* ===================================================== */
/* ================ 4. HERO / ACCUEIL ==================== */
/* ===================================================== */

.hero-header {
	min-height: 70vh; /* hauteur du bandeau d'accueil (PC) : augmenter/diminuer ce % pour un bandeau plus ou moins haut */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 3em 1em;
    margin-top: 5em;
}

.hero-overlay {
	background: rgba(0,0,0,0.55); /* opacité du fond noir derrière le texte d'accueil : monter vers 1 = plus opaque */
	backdrop-filter: blur(8px);
	padding: 2em;
	border-radius: 24px; /* arrondi du bloc d'accueil */
	max-width: 900px; /* largeur max du bloc de texte d'accueil sur grand écran */
	box-shadow:
	0 0 25px rgba(var(--gold-dark-rgb),0.25); /* lueur dorée autour du bloc, alpha 0.25 = intensité */
}

.titreh1,
.titreh2,
.titreh3 {
	color: var(--gold);
	text-align: center;
	text-shadow:
	-2px -2px 0 black,
	 2px -2px 0 black,
	-2px  2px 0 black,
	 2px  2px 0 black,
	0 0 15px var(--gold-dark);
}

.titreh1 {
	font-size: 3em;
	margin-bottom: 0.5em;
}

.titreh2 {
	font-size: 2em;
	margin-bottom: 1em;
}

.titreh3 {
	font-size: 1.5em;
	margin-bottom: 1em;
}

.hero-text {
	text-align: center;
}

/* Espacement entre le bandeau d'accueil, le menu de navigation
   et la première section qui suit */
.hero-header + .navigation{
    margin-top:-1em;
}

.navigation + .section-card{
    margin-top:2em;
}

@media screen and (max-width:768px){
    .navigation + .section-card{
        margin-top:1em;
    }
}

/* Tablette verticale (700px à 1080px, portrait) */
@media screen and (min-width:700px)
and (max-width:1080px)
and (orientation:portrait){

    .hero-header{
        min-height:35vh;
        padding:1em;
        margin-top: 1em;
    }

    .hero-header + .navigation{
        margin-top:1em;
    }
}

@media screen and (max-width:768px){
    .titreh1{
        font-size: 2em;
    }

    .titreh2{
        font-size: 1.5em;
    }

    .hero-header{
        min-height: 40vh;
        padding: 1.5em 0.8em;
    }

    .hero-overlay{
        padding: 1.2em;
    }

    /* Cette 2e valeur de .titreh1 vient après la première ci-dessus
       et la remplace (même breakpoint) : c'est la valeur réellement
       appliquée sur mobile, conservée telle quelle pour ne rien
       changer au rendu actuel du site. */
    .titreh1{
        font-size: 1.8em;
        margin-bottom: 0.3em;
    }
}


/* ===================================================== */
/* == 5. MISE EN PAGE COMMUNE DES GRANDES SECTIONS ====== */
/* -----------------------------------------------------
   Largeur/marge partagée par .section-card, .regle-overlay
   et .immersive-section (et leurs "overlay" associés), pour
   garder une mise en page cohérente sur tout le site.
===================================================== */

.section-card,
.regle-overlay,
.immersive-section{
    width:min(1200px,92%);
    margin:2em auto;
}

@media screen and (max-width:768px){

    .titreh1 {
    padding-top: 2em;
}
    
    .section-card{
		width:99%;
		margin:1em auto;
		padding: 1em;
    }

    .section-card,
    .regle-overlay{
        width:100%;
        margin:0.4em auto;
        padding:0.3em;
    }

    .hero-overlay{
        width:100%;
    }
}


/* ===================================================== */
/* ============ 6. CARTES DE CONTENU ===================== */
/* -----------------------------------------------------
   section-card (grandes cartes texte/image), mini-card
   (petites cartes), accordéons, variante large-card.
===================================================== */

.section-card {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2 colonnes égales (texte / image) sur grand écran */
	gap: 30px;
	align-items: center;
	background: rgba(40,40,40,0.72); /* fond gris translucide de la carte */
	backdrop-filter: blur(10px);
	padding: 2em;
	border-radius: 28px;
	width: min(1200px, 92%); /* largeur max 1200px, sinon 92% de l'écran */
	border: 1px solid rgba(var(--gold-dark-rgb),.25);
	box-shadow:
	0 0 25px rgba(0,0,0,0.45);
	transition:
	transform 0.4s ease,
	border-color 0.4s ease,
	box-shadow 0.4s ease;
}

.section-card:hover {
	transform: translateY(-4px);
	border-color: var(--gold-dark);
	box-shadow:
	0 0 18px rgba(var(--gold-dark-rgb),.35);
}

.card-image img{
    max-width:100%;
    height:auto;
    display:block;
    border-radius:20px;
}

.card-content p {
	margin-bottom: 1em;
}

.dark-card {
	background: rgba(20,20,20,0.82);
}

.regle-overlay{
    width:min(1200px,92%);
    margin:2em auto;
    padding:1em;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(8px);
    border-radius:24px;
    box-shadow:
    0 0 25px rgba(var(--gold-dark-rgb),0.25);
    text-align:center;
}

.mini-cards-section{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    width:100%;
}

.mini-card{
    background:
    linear-gradient(
        rgba(60,60,60,.85),
        rgba(35,35,35,.85)
    );
    flex:0 1 220px;
    border:1px solid rgba(var(--gold-dark-rgb),.25);
    padding:1.4em;
    border-radius:18px;
    text-align:center;
    transition:.35s;
}

.mini-card h3{
    color:var(--gold);
    margin:0;
}

.mini-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold-dark);
    box-shadow:
    0 0 18px rgba(var(--gold-dark-rgb),.35);
}

.mini-card-spacer{
    background:none;
    border:none;
    box-shadow:none;
    pointer-events:none;
}

/* Valeur par défaut (toutes tailles d'écran) : DOIT rester
   avant la media query "paysage" ci-dessous pour que celle-ci
   puisse correctement la remplacer sur les écrans concernés. */
.mini-card:last-child{
    grid-column:auto;
    max-width:none;
}

.large-card{
    grid-template-columns:1fr 1fr;
}

.large-card .card-content{
    order:1;
}

.large-card .card-image{
    order:2;
}

.accordeon-mini-card summary::after{
    content:"▼ Voir les détails";
    display:block;
    margin-top:8px;
    color:var(--gold);
    font-size:0.9em;
}

.accordeon-mini-card[open] summary::after{
    content:"▲ Fermer les détails";
}

.accordeon-mini-card summary{
    list-style:none;
    cursor:pointer;
}

.accordeon-mini-card summary::-webkit-details-marker{
    display:none;
}

.accordeon-mini-card{overflow:visible;}
.mini-card-details{display:none;padding:5px;}
.mini-card-details p{margin:0;}
.accordeon-mini-card[open] .mini-card-details{display:block;}

@media screen and (max-width:768px){

    .mini-cards-section{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .mini-card{
        padding:0.35em;
    }

    .regle-overlay{
        padding:0.6em;
    }

    .checklist{
        padding:0 0.8em;
    }

    .section-card {
		grid-template-columns: 1fr;
	}

    .card-image{
        display:flex;
        justify-content:center;
    }

    .sac-section .card-content{
        order:1;
    }

    .sac-section .card-image{
        order:2;
    }
}

/* Paysage (≤950px) : la dernière mini-card (si elle est seule
   sur sa ligne) s'étire pour occuper toute la largeur, plutôt
   que de rester à sa taille par défaut. Vient APRÈS la règle
   par défaut ci-dessus pour bien la remplacer. */
@media screen and (max-width:950px)
and (orientation:landscape){
    .mini-cards-section{
        justify-items:center;
    }

    .mini-card:last-child{
        grid-column:1 / -1;
        max-width:320px;
    }
}


/* ===================================================== */
/* ========= 7. DIAPORAMA "PRIORITÉS" ==================== */
/* -----------------------------------------------------
   Cadre + flèches + points de repère + légende, puis le
   style générique .premium-slider/.slider (réutilisable),
   puis toute la responsive (tablette/téléphone), puis
   l'effet loupe au survol.
===================================================== */

.priorites-layout {
    display: flex;
    justify-content: center;
    width: 100%;
}

.priorites-slider {
    width: 100%;
}

/* Cadre global : c'est LUI qui porte la largeur ajustable par
   écran (--priorites-largeur-*). .premium-slider reste toujours
   à 100% de ce cadre, à toutes les tailles d'écran — un seul
   point de réglage, plus de double contrainte imbriquée. */
.slider-global-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--priorites-largeur-pc, 450px);
    margin: 0 auto;
    overflow: visible; /* Permet aux flèches de dépasser proprement sur les côtés */
}

.priorites-slider .premium-slider {
    width: 100%;
    aspect-ratio: var(--priorites-ratio, 4/3);
    max-height: var(--priorites-hauteur-max-pc, 70vh);
    height: auto;
    margin: auto;
    background: var(--black-bg);
}

.priorites-slider figure {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    height: 100%;
}

.priorites-slider .slider figure img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garde l'image entière sans la déformer */
    display: block;
}

/* Légende (mise à jour par priorites-slider.js à chaque photo) */
.priorites-caption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.8);
    color: var(--gold);
    padding: 10px 15px;
    border-radius: 12px;
    font-weight: bold;
    border: 1px solid rgba(var(--gold-dark-rgb), 0.4);
    transition: opacity 0.35s ease;
}

#priorites-caption {
    white-space: pre-line; /* Gère les retours à la ligne des textes de vos photos */
}

/* Flèches précédent/suivant + points de repère */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid var(--gold-dark);
    color: var(--gold);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.3em;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: var(--gold);
    color: black;
    box-shadow: 0 0 15px rgba(var(--gold-dark-rgb), 0.6);
}

.slider-arrow.prev { left: -60px; }
.slider-arrow.next { right: -60px; }

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

@media screen and (max-width:768px){
    .slider-dots{
        margin-top:10px;
    }
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.slider-dot.active {
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold-dark);
    transform: scale(1.25);
}

/* Style générique réutilisable du cadre (bordure/lueur dorée,
   coins arrondis, transition douce de forme entre les photos) */
.premium-slider{
    position:relative;
    overflow:hidden;
    width:100%;
    border-radius:22px; /* arrondi du cadre du diaporama */
    border:1px solid rgba(var(--gold-rgb),.35);
    box-shadow:
    0 0 18px rgba(var(--gold-dark-rgb),.20),
    inset 0 0 12px rgba(var(--gold-rgb),.08);
    background:var(--black-bg);
    /* Quand l'image suivante a une forme différente (portrait,
       paysage...), le cadre change de proportion en douceur au
       lieu de sauter instantanément d'une forme à l'autre. */
    transition:aspect-ratio .8s ease;
}

.slider{
    display:flex;
    height:100%;
    /* Le déplacement (translateX) est décidé en JS, mais c'est CETTE
       règle qui le rend animé/doux : sans elle, l'image changerait
       instantanément, sans glissement. ease-in-out = démarre et
       s'arrête en douceur plutôt qu'à vitesse constante. */
    transition:transform 1s ease-in-out;
}

.slider img,
.slider figure img{
    flex:0 0 100%;
    width:100%;
	height:100%;
	border-radius: 8px;
    object-fit:contain; /* affiche la photo entière, sans recadrage */
}

.premium-slider::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.35),
        transparent 35%
    );

    pointer-events:none;
    z-index:2;
}

.slider1 {
	border: 10px solid#535353;
	box-shadow: 0 0 15px var(--gold-dark) /* ombre boite */ 
}

.slider1:hover {
	transform: scale(1.02);
	border: 10px solid#535353;
	box-shadow: 0 0 15px rgba(var(--gold-dark-rgb),.5) /* ombre boite */ 
}

/* Tablette (portrait ET paysage) : de 769px à 1194px de large.
   Réglage : --priorites-largeur-tablette dans :root. */
@media screen and (max-width:1194px){

    .slider-global-wrapper{
        max-width:var(--priorites-largeur-tablette,55%);
    }

    /* Sur tablette et mobile, les flèches se posent sur la photo
       plutôt que de déborder sur les côtés */
    .slider-arrow.prev { left: 10px; }
    .slider-arrow.next { right: 10px; }

    .priorites-slider .premium-slider{
        aspect-ratio:unset;
        height:auto;
    }

    .priorites-slider .slider{
        height:auto;
    }

    .priorites-slider .slider figure img{
        position:static;
        height:auto;
        max-height:var(--priorites-hauteur-max-tablette,70vh);
        display:block;
        margin:0 auto;
    }

    .priorites-caption{
        position:static;
        width:100%;
        border-radius:0 0 12px 12px;
        text-align:center;
    }
}

/* Téléphone (portrait ET paysage) : 768px de large ou moins.
   Réglage : --priorites-largeur-telephone dans :root.
   Vient APRÈS la tablette : à 768px ou moins, les deux media
   queries sont vraies en même temps, donc c'est celle-ci (la
   dernière) qui l'emporte pour la largeur. */
@media screen and (max-width:768px){

    .priorites-layout{
        width:100%;
    }

    .slider-global-wrapper{
        max-width:var(--priorites-largeur-telephone,90%);
    }

    .priorites-slider .slider figure img{
        max-height:var(--priorites-hauteur-max-telephone,50vh);
    }

    /* Ancien réglage générique (avant l'ajout du wrapper) : fixe
       encore le rayon d'arrondi et le comportement de .slider en
       dessous de 768px, conservé tel quel. */
    .premium-slider{
		width: 80%;
		height: auto;
        border-radius:20px;
    }

    .slider{
        height:100%;
    }

    .slider img{
        width:100%;
        height:100%;
        object-fit:contain;
        border-radius:0;
	}
}

/* ===================================================== */
/* ================== ZOOM LOUPE (PC) =================== */
/* -----------------------------------------------------
   Effet loupe au survol de la souris (voir zoom-loupe.js).
   Réservé aux appareils avec une vraie souris — sur
   tactile, cette section ne s'applique jamais, et c'est le
   pincer-écarter natif (touch-action ci-dessous, TOUJOURS
   actif, hors du bloc hover) qui prend le relais.
===================================================== */

.zoom-loupe{
    position:relative;
    cursor:zoom-in;
}

@media (hover:hover) and (pointer:fine){

    .zoom-lens{
        position:fixed;
        width:160px;
        height:160px;
        border-radius:50%;
        border:2px solid var(--gold-dark);
        box-shadow:
        0 0 18px rgba(var(--gold-dark-rgb),.5),
        inset 0 0 12px rgba(var(--gold-rgb),.15);
        background-repeat:no-repeat;
        background-color:var(--black-bg); /* comble le petit vide tout au bord d'un coin */
        pointer-events:none;
        display:none;
        z-index:9999;
    }
}

/* Zoom pincer-écarter natif (mobile/tablette) : autorisé
   explicitement sur la photo, sans gêner le défilement
   vertical normal de la page. Volontairement HORS du bloc
   (hover:hover) ci-dessus : ce réglage sert aux appareils
   tactiles, pas aux appareils à souris. */
.zoom-loupe img{
    touch-action:pinch-zoom;
}


/* ===================================================== */
/* ============ 8. SECTIONS DIVERSES ===================== */
/* -----------------------------------------------------
   Médical, immersive, encadré, checklist, compteur,
   vidéo, petites images (.image-sm).
===================================================== */

/* Flexbox plutôt que CSS Grid : une grille ne centre pas
   toute seule une carte isolée sur sa ligne (ex: 3 cartes
   dans une grille à 2 colonnes). Le flexbox + wrap +
   justify-content:center centre toujours, quel que soit
   le nombre de cartes (paire, 3, carte seule...). */
.double-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    width:min(1200px,92%);
    margin:2em auto;
}

.medical-card{
    flex:1 1 320px; /* même largeur mini que l'ancienne grille (320px) */
    max-width:550px; /* largeur max d'une carte médicale (PC) */
    /* margin:auto centre aussi une carte isolée hors de .double-grid
       (ex: une carte seule posée directement dans .regle-overlay). */
    margin:0 auto;
    background:rgba(30,30,30,0.78); /* fond gris translucide */
    padding:2em;
    border-radius:24px;
    border:1px solid rgba(var(--gold-dark-rgb),.25);
    backdrop-filter:blur(8px);
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.medical-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold-dark);
    box-shadow:
    0 0 18px rgba(var(--gold-dark-rgb),.35);
}

.medical-card ul{
    padding-left:20px;
    text-align:left;
}

.medical-card ul li{
    text-align:left;
}

@media screen and (max-width:1080px){

    .double-grid{
        gap:12px;
        margin:1em auto;
        width:99%;
    }

    .medical-card{
        flex:1 1 100%;
        max-width:min(500px,100%);
        text-align:center;
        padding:0.8em;
    }

    .medical-card h2{
        margin-top:0;
        margin-bottom:8px;
    }

    .medical-card ul{
        display:inline-block;
        text-align:left;
    }
}

.immersive-section {
	background:
	linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)); /* voile sombre par-dessus le fond de page */
	border-radius: 30px;
	width: min(1200px, 92%); /* largeur max de la section immersive */
	padding: 5em 2em; /* espace vertical généreux, réduire si le bloc paraît trop grand */
	border: 1px solid rgba(var(--gold-dark-rgb),.25);
	transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* Doit rester APRÈS la règle de base ci-dessus : sinon, à
   spécificité égale, c'est la règle de base (padding 5em 2em,
   largeur min(1200px,92%)) qui gagnerait même sur mobile et
   annulerait ce correctif. */
@media screen and (max-width:768px){
    .immersive-section{
        width:100%;
        margin:0.4em auto;
        padding:0.7em; /*  Ajuster marge sur telephone  */
    }
}

.immersive-overlay {
    width:min(1200px,92%);
    margin:2em auto;
    padding:1em;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(8px);
    border-radius:24px;
    box-shadow:
    0 0 25px rgba(var(--gold-dark-rgb),0.25);
    text-align:center;
}

/* Doit rester APRÈS la règle de base ci-dessus : sinon, à
   spécificité égale, c'est la règle de base (plus bas dans
   le fichier) qui gagnerait même sur mobile et annulerait
   ce correctif (c'est ce qui bloquait l'élargissement). */
@media screen and (max-width:768px){
    .hero-overlay,
    .immersive-overlay{
        width:100%;
        margin:0.5em auto;
        padding:0.5em;
    }
}

.immersive-section:hover {
    transform:translateY(-4px);
        border-color:var(--gold-dark);
        box-shadow:
        0 0 18px rgba(var(--gold-dark-rgb),.35);
    }

.encadre{
    background:var(--panel-dark);
    border-left:4px solid var(--accent-bronze);
    border-radius:10px;
    padding:15px;
    margin:20px 0;
    }

@media screen and (max-width:768px){
    .encadre{
        padding:10px;
        margin:12px 0;
    }
}

/* Compteur de visites */
.compteur{
    width:fit-content;
    margin:30px auto;
    padding:15px 25px;
    background:#3b3b3b; /* gris de fond propre au compteur (non centralisé, utilisé une seule fois) */
    border:1px solid var(--accent-bronze);
    border-radius:15px;
    color:#f0f0f0; /* blanc cassé du texte du compteur (non centralisé, utilisé une seule fois) */
    text-align:center;
    box-shadow:
        0 0 15px rgba(var(--accent-bronze-rgb),.25);
    transition:.3s;
}

.compteur:hover{

    box-shadow:
        0 0 20px rgba(var(--accent-bronze-rgb),.6),
        0 0 40px rgba(var(--accent-bronze-rgb),.25);

    transform:translateY(-2px);
}

.compteur div{
    padding:4px 0;
}

@media screen and (max-width:768px){
    .compteur{
        margin:10px auto 0 auto;
    }
}

/* Cartes vidéo */
.video-card{
    /* Largeur ajustable : change juste ce pourcentage,
       soit ici pour toutes les vidéos, soit directement
       sur une vidéo en particulier avec
       style="--video-width: 50%" dans le HTML. */
    --video-width: 70%;

    position:relative;
    overflow:hidden;
    width:var(--video-width);
    margin:1.5em auto;
    border-radius:22px;
    border:1px solid rgba(var(--gold-dark-rgb),.25);
    box-shadow:
    0 0 18px rgba(var(--gold-dark-rgb),.20),
    inset 0 0 12px rgba(var(--gold-rgb),.08);
    background:var(--black-bg);
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.video-card video{
    display:block;
    width:100%;
    height:auto;
}

.video-card figcaption{
    position:absolute;
    bottom:15px;
    right:15px;
    background:rgba(0,0,0,.75);
    color:var(--gold);
    padding:10px 15px;
    border-radius:12px;
    font-weight:bold;
    border:1px solid rgba(var(--gold-dark-rgb),.4);
    z-index:2;
}

.video-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold-dark);
    box-shadow:0 0 18px rgba(var(--gold-dark-rgb),.35);
}

@media screen and (max-width:768px){
    .video-card{
        width:95%;
    }

    .video-card figcaption {
		display: none;
	}
}

.image-sm{
    width:65%;
    margin:auto;
    display:block;
}

@media screen and (max-width:768px){
    .image-sm{ width:55%; }
}


/* ===================================================== */
/* ========== 9. LIENS & BOUTONS TEXTE =================== */
/* ===================================================== */

.learn-more{
    display:inline-block;
    margin-top:12px;
    padding:8px 14px;
    border-radius:20px;
    text-decoration:none;
    color:var(--gold);
    border:1px solid rgba(var(--gold-dark-rgb),.5);
}

.learn-more:hover{
    box-shadow:0 0 15px rgba(var(--gold-dark-rgb),.4);
}

.pdf{
    display:inline-block;
    margin-top:12px;
    padding:8px 14px;
    border-radius:20px;
    text-decoration:none;
    color:var(--gold);
    border:1px solid rgba(var(--gold-dark-rgb),.5);
    box-shadow:0 0 15px rgba(var(--gold-dark-rgb),.4);
}

.pdf:hover{
        border:1px solid rgba(var(--gold-dark-rgb),.8);
        box-shadow:0 0 15px rgba(var(--gold-dark-rgb),.6);
        transform:translateY(-2px);
    }

a:not(.learn-more):not(.navigation a):not(.back-to-top):not(.back-to-nav):not(.pdf):hover{
    color:#f0d48a;
    text-shadow:
      1px 1px 2px red,
      0 0 1em blue,
      0 0 0.2em blue;
    }

.checklist{
    width:100%;
    margin:0 auto;
    padding:0 1.5em;
    text-align:center;
    color:var(--muted);
    font-size:1em;
}

.checklist .pdf{
    display:inline-block;
    margin:15px auto 0;
}


/* ===================================================== */
/* ======= 10. BOUTONS FLOTTANTS (retour haut/menu) ====== */
/* ===================================================== */

.back-to-top{
    position:fixed;
    right:20px;  /* distance au bord droit de l'écran */
    bottom:20px; /* distance au bas de l'écran */
    padding:12px 18px;
    border-radius:30px;
    text-decoration:none;
    background:rgba(20,20,20,.9);
    color:var(--gold);
    border:1px solid var(--gold-dark);
    z-index:9999;
}
.back-to-top:hover{
    box-shadow:0 0 15px rgba(var(--gold-dark-rgb),.5);
}

.back-to-nav{
    position:fixed;
    left:20px;   /* distance au bord gauche de l'écran */
    bottom: 20px;
    padding:12px 18px;
    border-radius:30px;
    text-decoration:none;
    background:rgba(20,20,20,.9);
    color:var(--gold);
    border:1px solid var(--gold-dark);
    z-index:9999;
}
.back-to-nav:hover{
    box-shadow:0 0 15px rgba(var(--gold-dark-rgb),.5);
}


/* ===================================================== */
/* ==================== 11. FOOTER ======================= */
/* ===================================================== */

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
	gap: 25px;
	padding: 0em 0em 2em 0em
}

.footer-social,
.footer-w3c {
    display: flex;
    flex-direction: row;
	gap: 15px;
	justify-content: center;
	align-items: center;
}

.youtube-button,
.facebook-button {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:
	transform 0.35s ease,
	box-shadow 0.35s ease;
}

.youtube-button {
	background: var(--youtube-red);
}

.facebook-button {
	background: var(--facebook-blue);
}

.youtube-button:hover {
	transform: scale(1.12);
	box-shadow:
	0 0 18px var(--youtube-red);
}
.facebook-button:hover {
	transform: scale(1.12);
	box-shadow:
	0 0 18px var(--facebook-blue);
}

.social-icon {
	width: 28px;
	height: 28px;
}

.logo-vcss {
	width: 95px;
	transition:
	transform 0.35s ease,
	filter 0.35s ease;
}

.logo-vcss:hover {
	transform: scale(1.08);
	filter:
	brightness(1.15)
	drop-shadow(0 0 10px var(--gold-dark));
}

.footer-site{
    width:100%;
    text-align:center;
    margin:25px auto;
    padding-bottom:90px;
    font-size:1.2em;
    color:var(--muted);
}

.footer-site a{
    color:var(--gold);
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.footer-site a:hover{
    color:white;
    text-shadow:0 0 10px var(--gold-dark);
}

.footer-premium{
    margin:40px auto;
    max-width:1200px;
    width:90%;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);
    border-radius:24px;
    border:1px solid rgba(var(--gold-dark-rgb),.35);
    box-shadow:0 0 25px rgba(var(--gold-dark-rgb),.20);
    padding:25px;
}

.footer-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.footer-nav .pdf{
    margin:0;
    min-width:210px;
    text-align:center;
    transition:.25s;
}

.footer-nav .pdf:hover{
    transform:translateY(-3px);
}

.footer-copy{
    margin-top:25px;
    text-align:center;
    color:#bcbcbc;
    font-size:1rem;
}

@media screen and (max-width:768px){

    .footer-logos{
        padding-top:0;
        padding-bottom:1em;
        gap:8px;
        flex-direction:column;
    }

    .footer-copy{
        margin-top:12px;
    }

    .footer-social{
        order:1;
    }

    .footer-w3c{
        order:2;
    }

    .youtube-button,
	.facebook-button {
		width: 44px;
		height: 44px;
	}

	.logo-vcss {
		width: 75px;
	}

    .footer-premium{
        width:95%;
        padding:18px;
    }

    .footer-nav{
        flex-direction:column;
        gap:12px;
    }

    .footer-nav .pdf{
        width:100%;
    }
}

@media screen and (max-width:950px)
and (orientation:landscape){

    .footer-logos{
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        flex-wrap:nowrap;
        gap:15px;
    }
}