@charset "UTF-8";
/* ---------------------------------------------------------------------------
 * Adaptation mobile — ajout hors périmètre du portage.
 *
 * REGLE 1 : ce fichier ne contient QUE des règles sous media query. Au-dessus
 * de 980 px il n'applique rien, et le rendu desktop reste celui du site
 * d'origine au pixel près.
 *
 * REGLE 2 : le CSS d'origine est bâti sur des chaînes de TROIS identifiants
 * (#site_main_wrapper #site_main_content #site_sidebar { position:absolute })
 * soit une spécificité de (3,0,0). Une règle courte comme #site_sidebar{...}
 * ne pèse que (1,0,0) et PERD, même chargée après. Chaque règle ci-dessous
 * reprend donc la chaîne complète. Ne pas « simplifier » ces sélecteurs.
 *
 * Le site source fait 960 px, sans balise viewport : sur téléphone il
 * s'affichait dézoomé. Sa navigation est faite d'images GIF de largeurs fixes
 * (barre de 669 px) : elle ne peut pas rétrécir sans devenir illisible, on la
 * masque au profit d'un menu texte reprenant les mêmes liens.
 * ------------------------------------------------------------------------ */

/* Le menu texte n'existe que pour le mobile : masqué par défaut. */
#drd_mobile_nav {
	display: none;
}
/* Le logo de l'accueil n'existe que pour le mobile : sur desktop l'accueil
   d'origine n'en a pas, le titre graphique home_dre_demers.gif en tient lieu. */
#site_logo.drd_only_mobile {
	display: none;
}
.drd_mobile_toggle {
	display: none;
}

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

	/* --- Structure : on libère les largeurs fixes ------------------------ */
	#site_main_wrapper {
		position: static;
		width: auto;
		height: auto;
	}
	#site_main_wrapper #site_main_content {
		width: auto;
		max-width: 100%;
		min-height: 0;
		background-image: none;
	}

	/* --- Entête ---------------------------------------------------------- */
	/* Entete sur UNE ligne : logo a gauche, bouton du menu a droite.
	   La liste depliee passe dessous, sur toute la largeur (flex 0 0 100%). */
	#site_main_wrapper #site_main_content #site_header {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0 12px;
		min-height: 100px;
		position: relative;
		z-index: 20;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	#site_main_wrapper #site_main_content #site_header #drd_mobile_nav {
		flex: 0 0 100%;
		order: 9;
	}

	/* --- Panneau deroulant ------------------------------------------------
	 * SANS JavaScript : la nav reste dans le flux, depliee — jamais inaccessible.
	 * AVEC JavaScript : mobile-nav.js pose .drd_collapsible, et la nav bascule
	 * en absolu sous la barre d'entete. Elle se superpose au contenu au lieu de
	 * le pousser vers le bas, et s'ouvre par une descente animee.
	 * -------------------------------------------------------------------- */
	#site_main_wrapper #site_main_content #site_header #drd_mobile_nav.drd_collapsible {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		background: #faf8f6;
		border-top: 1px solid #cfc7bd;
		box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
		/* etat ferme : replie vers le haut, invisible, hors du flux tactile */
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transform: translateY(-6px);
		transition: max-height .28s ease, opacity .2s ease, transform .28s ease, visibility 0s linear .28s;
	}
	#site_main_wrapper #site_main_content #site_header #drd_mobile_nav.drd_collapsible.drd_open {
		max-height: 80vh;
		opacity: 1;
		visibility: visible;
		overflow-y: auto;
		transform: translateY(0);
		transition: max-height .32s ease, opacity .2s ease, transform .28s ease, visibility 0s;
	}
	/* La liste reste affichee : c'est le conteneur qui s'ouvre et se ferme. */
	#drd_mobile_nav.drd_collapsible ul { display: block; }

	/* Petite animation du bouton quand le menu est ouvert. */
	.drd_mobile_toggle span {
		transition: transform .25s ease, opacity .2s ease;
	}
	/* Accueil : le logo reparait en mobile (voir header.php). Chaine complete
	   + classe pour passer devant la regle de base ci-dessus. */
	#site_main_wrapper #site_main_content #site_header #site_logo.drd_only_mobile {
		display: block;
	}
	#site_main_wrapper #site_main_content #site_header #site_logo {
		position: static;
		margin: 0;
		flex: 0 1 auto;
	}
	#site_main_wrapper #site_main_content #site_header #site_logo img {
		display: block;
		max-width: 100%;
		height: auto;
	}
	#site_main_wrapper #site_main_content #site_header #site_abonnezvous {
		display: none;
	}
	#site_main_wrapper #site_main_content #site_header #site_menu {
		display: none;
	}

	/* --- Menu texte de remplacement -------------------------------------- */
	#site_main_wrapper #site_main_content #drd_mobile_nav,
	#drd_mobile_nav {
		display: block;
		margin: 0 0 4px 0;
		border-top: 1px solid #cfc7bd;
	}
	/* Bouton de bascule : visible seulement en mobile. */
	/* Le bouton n'a plus de libelle visible : on garde une zone tactile
	   confortable (44 px, seuil recommande) malgre les barres de 20 px. */
	.drd_mobile_toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: #9d3241;
		text-decoration: none;
		flex: 0 0 auto;
	}
	/* Les trois barres : empilees dans un bloc a part, JAMAIS superposees au mot. */
	.drd_mobile_toggle span {
		display: block;
		width: 26px;
		height: 2px;
		margin: 0 0 5px 0;
		background: #9d3241;
	}
	.drd_mobile_toggle span:last-of-type {
		margin-bottom: 0;
	}
	/* les trois <span> dans une colonne, le texte a cote */
	.drd_mobile_toggle b { display: block; }

	#drd_mobile_nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#drd_mobile_nav li {
		border-bottom: 1px solid #cfc7bd;
		padding: 0;
		margin: 0;
		list-style-image: none;
	}
	#drd_mobile_nav a {
		display: block;
		padding: 12px 15px;
		color: #9d3241;
		text-decoration: none;
		font-size: 15px;
		line-height: 1.25;
	}
	#drd_mobile_nav li.drd_sub a {
		padding-left: 30px;
		font-size: 14px;
		color: #3c3b3d;
	}

	/* --- Contenu ---------------------------------------------------------- */
	#site_main_wrapper #site_main_content #site_content {
		position: static;
		width: auto;
		min-height: 0;
		margin: 0;
	}
	#site_main_wrapper #site_main_content #site_content #section_content_wrapper,
	#site_main_wrapper #site_main_content #site_content #home_content_wrapper {
		position: static;
		width: auto;
		padding: 18px 30px 12px 30px;
	}
	#site_main_wrapper #site_main_content #site_content #section_content_wrapper #section_content {
		padding: 12px 0 18px 0;
	}
	#site_main_wrapper #site_main_content #site_content #section_content_wrapper #section_sub_nav ul {
		left: 0;
	}
	#site_main_wrapper #site_main_content #site_content #section_content_wrapper #section_sub_nav li {
		display: inline-block;
		border-right: none;
		padding: 3px 8px 3px 0;
	}

	/* L'accueil : la photo passe sous le texte au lieu d'être superposée. */
	#site_main_wrapper #site_main_content #site_content #home_video {
		position: static;
		width: auto;
		height: auto;
		margin: 12px 0 0 0;
	}
	#site_main_wrapper #site_main_content #site_content #home_content {
		width: auto;
	}
	/* Dans le balisage, la photo (#home_video) PRECEDE le texte : sur desktop
	   elle est positionnee a droite, mais empilee elle passerait avant le
	   contenu. On retablit l'ordre de lecture sans toucher au balisage. */
	#site_main_wrapper #site_main_content #site_content #home_content_wrapper {
		display: flex;
		flex-direction: column;
	}
	#site_main_wrapper #site_main_content #site_content #home_content { order: 1; }
	#site_main_wrapper #site_main_content #site_content #home_video   { order: 2; }

	/* --- Colonne latérale : elle passe SOUS le contenu --------------------- */
	#site_main_wrapper #site_main_content #site_sidebar {
		position: static;
		width: auto;
		height: auto;
		right: auto;
		top: auto;
		/* Pas d'image de fond : sidebar_bg.jpg fait 249 px de large et, sur une
		   colonne pleine largeur, se decoupe en rectangle a bords francs.
		   L'ombre du bouton « Derniere parution » est traitee plus bas, par un
		   halo dimensionne au bouton. */
		background-image: none;
		padding: 0;
	}
	/* La colonne garde une largeur de colonne : sans plafond, elle s'etale sur
	   toute la page et le contenu se disperse. 320 px reprend la mesure du
	   separateur et suffit au plus large des boutons (270 px). */
	#site_main_wrapper #site_main_content #site_sidebar #s_col {
		width: auto;
		max-width: 320px;
		margin: 0 auto;
	}
	/* Dans le balisage source, le bouton « acces membres » et le titre
	   « Nouvelles » sont deux images EN LIGNE collees l'une a l'autre. Sur
	   desktop la colonne de 212 px les force a s'empiler ; centrees dans un
	   conteneur large elles se retrouvaient cote a cote. On les passe en bloc. */
	#site_main_wrapper #site_main_content #site_sidebar #s_col > a,
	#site_main_wrapper #site_main_content #site_sidebar #s_col > img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	/* Le titre « Nouvelles » recoit la meme respiration que « acces membres ». */
	#site_main_wrapper #site_main_content #site_sidebar #s_col > img {
		margin-bottom: 22px;
	}
	/* « News » (anglais) : le mot n'occupe que la moitie gauche de sa toile.
	   Encre mesuree de x 6 a 109 sur 193 px — 83 px de fond vide a droite —
	   soit 39 px de decalage. Centrer l'IMAGE laissait donc le MOT trop a
	   gauche. On rogne la toile a l'encre : le fond du GIF est peint en
	   rgb(60,59,61), la couleur exacte de la colonne, la coupe est invisible.
	   La version francaise remplit sa toile (+3 px) et n'a besoin de rien. */
	#site_main_wrapper #site_main_content #site_sidebar #s_col > img[src$="sidebar_nouvelles_title_e.gif"] {
		width: 116px;
		height: 32px;
		max-width: none;
		object-fit: none;
		object-position: left center;
	}

	/* --- Colonne laterale : tout centre ------------------------------------
	 * Sur desktop la colonne fait 212 px et tout y est aligne a gauche. Empilee
	 * sur toute la largeur, cet alignement laisse le contenu colle au bord :
	 * on centre l'ensemble. Le separateur .s_news_sep a une largeur FIXE de
	 * 212 px dans global.css — il faut la liberer, sinon il ne suit pas.
	 * -------------------------------------------------------------------- */
	#site_main_wrapper #site_main_content #site_sidebar {
		text-align: center;
	}
	#site_main_wrapper #site_main_content #site_sidebar .s_news,
	#site_main_wrapper #site_main_content #site_sidebar .s_news_date,
	#site_main_wrapper #site_main_content #site_sidebar .s_news_title,
	#site_main_wrapper #site_main_content #site_sidebar .s_news_content,
	#site_main_wrapper #site_main_content #site_sidebar .s_news_content p {
		text-align: center;
	}
	#site_main_wrapper #site_main_content #site_sidebar .s_news_sep {
		width: auto;
		max-width: 320px;
		margin: 0 auto;
	}
	#site_main_wrapper #site_main_content #site_sidebar img {
		display: inline-block;
		float: none;
	}
	#site_main_wrapper #site_main_content #site_sidebar .acces_membres {
		margin-bottom: 22px;
	}
	#site_main_wrapper #site_main_content #site_sidebar div.derniere_parution {
		position: static;
		left: auto;
		bottom: auto;
		max-width: 320px;
		margin: 18px auto 0 auto;
		text-align: center;
		/* NE PAS remettre de degrade de fond ici : un radial-gradient dont le
		   rayon depasse la boite est coupe net a ses bords et produit un
		   rectangle visible — exactement ce qu'on cherchait a eviter. L'ombre
		   du PNG ne represente que 10 % de ses pixels et reste collee au livre :
		   elle n'a pas besoin d'etre compensee. */
	}

	/* --- « Derniere parution » : variante sans ombre portee -----------------
	 * Le PNG d'origine porte une ombre portee peinte DANS l'image, calee sur le
	 * fond floral (sidebar_bg.jpg) de la colonne desktop. En mobile ce fond est
	 * retire : l'ombre se detache alors sur l'aplat sombre et se lit comme une
	 * salissure autour du livre.
	 *
	 * On ne peut pas changer le src d'une <img> en CSS : on masque l'image et on
	 * pose la variante nettoyee en fond du lien, aux dimensions exactes du PNG.
	 * Les fichiers *_plat.png sont des COPIES — les originaux restent intacts et
	 * restent seuls utilises au-dessus de 980 px.
	 *
	 * Le choix FR/EN se fait sur la cible du lien, le CSS ne connaissant pas la
	 * langue de la page.
	 * -------------------------------------------------------------------- */
	#site_main_wrapper #site_main_content #site_sidebar div.derniere_parution a {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#site_main_wrapper #site_main_content #site_sidebar div.derniere_parution a img {
		display: none;
	}
	#site_main_wrapper #site_main_content #site_sidebar div.derniere_parution a[href*="derniere-parution"] {
		width: 270px;
		height: 128px;
		background-image: url(../images/sidebar/sidebar_bt_parution_f_off_plat.png);
	}
	#site_main_wrapper #site_main_content #site_sidebar div.derniere_parution a[href*="latest-issue"] {
		width: 236px;
		height: 100px;
		background-image: url(../images/sidebar/sidebar_bt_parution_e_off_plat.png);
	}
	#site_main_wrapper #site_main_content #site_sidebar .s_news_spacer {
		display: none;
	}

	/* --- Flottants et images ---------------------------------------------- */
	/* Un bloc flotté de 297 px casse une colonne de 375 px : il repasse dans le flux. */
	#site_main_wrapper #site_main_content #site_content .noprint[style*="float"] {
		float: none !important;
		margin: 0 0 14px 0 !important;
		width: auto !important;
	}
	/* Le flottement supprime, l'image tombait a gauche avec un vide a droite
	   (photo de 297 px dans une colonne de 315). On la ramene a droite, comme
	   le float d'origine le faisait sur desktop.
	   Cible : l'IMAGE enfant direct, pas le conteneur. Le meme conteneur
	   .noprint[style*=float] enveloppe l'annuaire de /fr/formation-medicale,
	   dont l'enfant direct est un <div> — un text-align:right pose sur le
	   conteneur aurait aligne a droite les 512 entrees de l'annuaire. */
	#site_main_wrapper #site_main_content #site_content .noprint[style*="float"] > img {
		display: block;
		margin-left: auto;
		margin-right: 0;
	}
	#site_main_wrapper #site_main_content #site_content .liste-des-membres {
		margin-right: 0 !important;
	}
	#site_main_wrapper #site_main_content #site_content img,
	#site_main_wrapper #site_main_content #site_sidebar img {
		max-width: 100%;
		height: auto;
	}

	/* --- Pied de page ------------------------------------------------------ */
	#site_footer_wrapper {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
	}
	#site_footer_wrapper #home_footer {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 10px 12px;
	}
	#site_footer_wrapper #site_footer_nav {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 14px 12px;
	}
	#site_footer_wrapper #site_footer_nav #site_footer_nav_left,
	#site_footer_wrapper #site_footer_nav #site_footer_nav_right {
		position: static;
		float: none;
		width: auto;
		text-align: center;
	}
	#site_footer_wrapper #site_footer_nav #site_footer_nav_left {
		line-height: 2;
	}
}

/* Téléphones étroits : on resserre encore un peu. */
@media screen and (max-width: 480px) {
	#site_main_wrapper #site_main_content #site_content #section_content_wrapper,
	#site_main_wrapper #site_main_content #site_content #home_content_wrapper {
		padding: 14px 30px 10px 30px;
	}

	/* Les liens du contenu sont en grande partie des URL collees par la
	   cliente dans l'annuaire : sans espace, elles ne se coupent qu'aux
	   rares / ? & -. Une adresse courte et sans separateur, comme
	   https://sararaby.com, deborde alors du conteneur (20 px mesures a
	   385 px de large). On autorise la coupure n'importe ou.
	   Portee volontairement limitee a #site_content : la navigation et la
	   colonne laterale gardent leurs libelles intacts. */
	#site_main_wrapper #site_main_content #site_content a {
		word-break: break-all;
	}
}

/* ---------------------------------------------------------------------------
 * FAQ : le diviseur « haut de page » (div_top.jpg, 610x21).
 *
 * Mesure de l'image : les colonnes 0 a 543 sont RIGOUREUSEMENT identiques
 * (un simple filet) ; la pastille « haut » n'occupe que les colonnes 544 a 609,
 * soit exactement la zone cliquable declaree dans la carte-image (545,0,610,21).
 *
 * La regle generale img{max-width:100%} reduisait l'image a 355x12 px : le filet
 * s'amincissait et la pastille devenait illisible. Comme le filet est uniforme,
 * on rend l'image a sa taille REELLE et on rogne par la gauche — invisible — en
 * inversant le sens d'ecriture du conteneur pour que le debordement parte a
 * gauche, la pastille restant callee a droite.
 *
 * Avantage sur un object-fit : l'image occupant ses 610 px declares, les
 * coordonnees de la carte-image tombent juste et la pastille reste cliquable
 * sur toute sa surface.
 *
 * 633 px : en dessous, le conteneur (largeur de fenetre moins 24 px de marge
 * interne) descend sous les 610 px de l'image et le navigateur se met a la
 * reduire. Au-dessus, elle s'affiche deja a sa taille reelle — rien a corriger,
 * et on laisse donc le rendu d'origine intact.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 633px) {
	#site_main_wrapper #site_main_content #site_content #ola_faq div.top {
		overflow: hidden;
		direction: rtl;
	}
	#site_main_wrapper #site_main_content #site_content #ola_faq div.top img {
		max-width: none;
		width: 610px;
		height: 21px;
	}
}

/* ---------------------------------------------------------------------------
 * Accueil : pas de marge basse sous le contenu.
 *
 * Place en FIN de fichier a dessein. Les deux regles qui posent la marge
 * interne du conteneur (bloc 980 px puis bloc 480 px) ont la meme specificite
 * que celle-ci — quatre identifiants — donc seul l'ordre les departage. Ecrite
 * plus haut, cette regle serait annulee par le bloc 480 px sur les petits
 * telephones.
 *
 * Ne concerne que #home_content_wrapper : #section_content_wrapper, qui partage
 * les memes declarations sur les pages interieures, garde sa marge basse.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 980px) {
	#site_main_wrapper #site_main_content #site_content #home_content_wrapper {
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Ecrans sous 375 px : on resserre les marges laterales a 15 px.
 *
 * Deux precautions dans ce bloc :
 *
 * 1. Il est place en FIN de fichier. Les regles de marge des blocs 980 px et
 *    480 px ont la meme specificite que celle-ci — quatre identifiants — donc
 *    seul l'ordre les departage.
 *
 * 2. On ecrit padding-left / padding-right en toutes lettres, PAS le raccourci
 *    padding. Le raccourci reinitialiserait padding-bottom et annulerait la
 *    mise a zero du bas de l'accueil, posee juste au-dessus.
 *
 * 374.98 plutot que 374 : certaines fenetres font une largeur fractionnaire, un
 * seuil entier les laisserait passer au travers.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 374.98px) {
	#site_main_wrapper #site_main_content #site_content #section_content_wrapper,
	#site_main_wrapper #site_main_content #site_content #home_content_wrapper {
		padding-left: 15px;
		padding-right: 15px;
	}
}