/* mobile.css */
@media screen and (max-width: 768px) {

:root {
  --hhs: 3px;
  --hs: 6px;
  --rs: 12px;
  --ds: 24px;
  --dds: 48px;
}

.no-mobile { display: none; }


/*
============================================================================================================
  TYPOGRAPHY
============================================================================================================
*/

body { font-size: 1rem; }

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.2rem; }

/*
============================================================================================================
  BUTTONS
============================================================================================================
*/

.btn { font-size: 1rem; line-height: 1.2rem; }


/* *   
   *
   * -- > ICON BTN
   *
   * */

.btn.icon-btn { width: 1.2rem; background-size: auto 1.2rem; height: calc(1.2rem + 24px); }
.btn.after-icon:after { height: 1.2rem; width: 1.2rem; margin-left: .5rem; }
.btn.print { display: none!important; }
/* .btn.print span { display: none; }
.btn.print:after { margin-left: 0; } */

.after-icon.lang:after { margin-left: .5rem; height: 1.5rem; width: 1.5rem; }

.btn.icon-btn.banner { margin-left: var(--hs); }

/*
============================================================================================================
  MODULES
============================================================================================================
*/

.module {}

/* *   
   *
   * -- > TEXT
   *
   * */

.module.text {}

/* *   
   *
   * -- > ALERT
   *
   * */

.module.alert {}
.module.alert .layout { flex-direction: column; }
.module.alert .layout .left img { width: 80px; height: 80px; }
.module.alert .layout .left { justify-content: center; margin-bottom: var(--hs); }
.module.alert .layout .right .text { text-align: center; }

/* *   
   *
   * -- > RESSOURCES
   *
   * */

.module.ressources {}
.module.ressources .layout {}

/* *   
   *
   * -- > GRID
   *
   * */

.module.grid {}
.module.grid .layout {}

.module.grid .titles { justify-content: center; }
.module.grid .titles > .right { display: none; }

.module.grid .rows .row { flex-direction: column; }
.module.grid .rows .row .right .content { text-align: center; }

/* *   
   *
   * -- > ACCORDEON
   *
   * */

.module.accordeon {}
.module.accordeon .layout {}

/* *   
   *
   * -- > CARDS
   *
   * */

.module.cards {}
.module.cards .layout {}
.module.cards .the_cards { flex-direction: column; }

/* *   
   *
   * -- > DIAGRAM
   *
   * */

.module.diagram { overflow-x: clip; }
.module.diagram .layout {}
.module.diagram .row { flex-direction: column; background-color: var(--vlg); }
.module.diagram .row .dots { display: none; }
.module.diagram .the_columns { flex-direction: column; }
.module.diagram .the_columns .column { flex-direction: column; align-items: center; }
.module.diagram .the_columns .column .before { display: none; }
.module.diagram .the_columns .column .after { transform: rotate(90deg); width: 50px; height: 50px; }
.module.diagram .column .text { padding: var(--hs) 0; }

/* *   
   *
   * -- > PLAN
   *
   * */

.module.plan {}
.module.plan .layout {}
.module.plan .specifications { display: none; }
.module.plan .the_steps .step { flex-wrap: wrap; justify-content: space-between; }
.module.plan .the_steps .step .title { width: 80%; }
.module.plan .the_steps .step .title .index { font-size: 1.5rem; font-weight: 600; margin-top: -.3rem; }
.module.plan .the_steps .step .line { display: none; }

/*
============================================================================================================
  COMPONENTS
============================================================================================================
*/

/* *   
   *
   * -- > BREADCRUMBS
   *
   * */

#breadcrumbs { padding: 0 var(--rs); font-size: .9rem; margin-top: var(--rs); } 

/* *   
   *
   * -- > SITE NAV
   *
   * */

.site-nav .the_categories ul.cat_menu { margin: 0; padding: var(--rs); }
.site-nav .the_categories ul.cat_menu li { margin-bottom: var(--hs); }
.site-nav .the_categories ul.cat_menu li a img { width: 60px; height: 60px; margin-right: var(--rs); }

.site-nav .the_categories .cat_menu_side { align-items: flex-start; padding-left: var(--rs); width: 100%; }
.site-nav .the_categories .cat_menu_side .logo_gouv { width: 80%; max-width: 180px; }

/* *   
   *
   * -- > REVIEWS
   *
   * */

#reviews { margin-bottom: var(--rs); }
#reviews .layout { flex-direction: column; }
#reviews .layout .left { margin-bottom: var(--hs); }

/* *   
   *
   * -- > LANG VIDEOS
   *
   * */

#lang-videos {}

#lang-videos .layout { padding: var(--rs); }

#lang-videos .layout .bottom { flex-direction: column; }

#lang-videos .video-container { margin-bottom: var(--rs); }
#lang-videos .video-container video { width: 80vw; height: 60vw; }
#lang-videos .video-container .title {}

/*
============================================================================================================
  HEADER
============================================================================================================
*/

#masthead { position: fixed; width: 100%; z-index: 100003; }
.slide-opened #masthead { position: fixed; background-color: white; }
.site-content { padding-top: 100px; }

html { margin-top: 0!important; }
html #wpadminbar { display: none; }

.inside-header { padding: var(--hs) var(--rs); }

/* *   
   *
   * -- > LOGO
   *
   * */

.site-header .header-image { width: 120px; height: 60px; object-fit: contain; }
.site-header .logo_cdr { width: 50px; height: 40px; }

/* *   
   *
   * -- > SLIDEOUT
   *
   * */

#generate-slideout-menu { z-index: 100000!important; top: 0; padding-top: 100px; padding-bottom: var(--dds); }
#generate-slideout-menu .cat_menu { display: flex; flex-direction: column;  }
#generate-slideout-menu.slideout-navigation.do-overlay .inside-navigation { margin: 0; padding: var(--rs) 0; max-width: 100%; }
#generate-slideout-menu.do-overlay li span { text-align: left; }

.bottom-bar .left { display: flex; flex-direction: column; }
.bottom-bar a, .last-update { font-size: .9rem; }

.gp-icon.icon-menu-bars { display: none; } /* SLIDEOUT TOGGLE MENU */
#mobile-menu-control-wrapper .menu-toggle::before {
  content: "MENU";
  display: block;
}

.mobile-primary-nav .main-menu ul { display: flex; justify-content: flex-end; flex-wrap: wrap; }
.mobile-primary-nav .main-menu ul li { margin: 0 var(--rs) var(--hs) 0; }

/* *   
   *
   * -- > SEARCH MENU
   *
   * */

#search-menu > .layout { padding: var(--rs); }
.search-filters .the_filters { flex-wrap: wrap; }
#search-menu .posts_found { padding-right: var(--rs); }

/*
============================================================================================================
  FOOTER
============================================================================================================
*/

.site-footer { padding: var(--rs) var(--rs) 100px ; }
.site-footer .cat_menu { display: none; }

.site-footer .mobile-primary-nav { margin-bottom: var(--rs); }
.site-footer .mobile-primary-nav ul { display: flex; justify-content: flex-start; list-style: none; margin: 0; max-width: 90%; }

.site-footer .site-nav .the_categories { display: flex; justify-content: flex-start; }
.site-footer .site-nav .the_categories .support {}

/*
============================================================================================================
  HOME
============================================================================================================
*/

#page-home {}
#page-home section:not(#hero) { margin: var(--rs); }

/* *   
   *
   * -- >  HERO
   *
   * */

#page-home #hero, #user-intro #hero { background-size: 1000px auto; }
#page-home #hero .layout { height: 100%; padding-top: var(--rs); }
#page-home #hero .layout .content { padding: var(--ds) var(--rs) var(--rs); }

#user-intro.main-container { top: 100px; }
#user-intro #hero { background-position: 0px 0px; }
#user-intro #hero .start-btn { margin-bottom: var(--rs); }
#user-intro #hero .title, #page-home #hero .title { font-size: 3.5rem; line-height: 1em; font-weight: 900; text-transform: uppercase; }
#user-intro #hero .layout { height: 100%; justify-content: flex-start; }
#user-intro #hero .layout > div { width: 100%; height: 90vh; padding: var(--rs); overflow-y: scroll; }

#user-intro section.slide-section { padding: var(--rs); }
#user-intro section.slide-section .layout { height: calc(100vh - 100px - (var(--rs) * 2)); }

#user-intro section .content { padding: var(--ds) 0; }
#user-intro section .content .lang-container { flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--ds); justify-content: flex-start; }

#user-intro section .answers ul { flex-wrap: wrap; }
#user-intro section .answers ul li { margin-right: var(--hs); margin-bottom: var(--hs); }

#user-intro .logo_gouv img { height: 90px; margin-bottom: 400px; }
    
/* *   
   *
   * -- >  INTRO
   *
   * */

#page-home #intro {}
#page-home #intro .layout { flex-direction: column; }
#page-home #intro .content .text { margin-bottom: var(--rs); }
#page-home #intro > .layout { padding: var(--rs); }

/* *   
   *
   * -- >  CATEGORIES
   *
   * */

#page-home #categories .the_categories {  }
#page-home #categories .the_categories > div { width: 100%; margin-bottom: var(--hs); }

#page-home #categories .the_categories .info-category .top { width: 80px; height: 80px; margin: var(--hs); }
#page-home #categories .the_categories .info-category .top img { width: 80px; height: 80px; padding: 10px; }

#page-home #categories .the_categories .info-category .bottom { width: calc(100% - 100px); margin: var(--hs) var(--hs) var(--hs) 0; }
#page-home #categories .the_categories .info-category .bottom .title { word-break: break-word; }

#page-home #categories .the_categories .info-category .bottom img { width: 24px; }

/*
============================================================================================================
  PAGE > ABOUT
============================================================================================================
*/

#page-about {}

#page-about #hero .layout { padding: var(--rs) 0; }

/* *   
   *
   * -- >  TABS
   *
   * */

#page-about #tabs {}

/* NAV */
#page-about nav ul { flex-direction: column; }
#page-about nav ul li { padding: var(--rs); }
#page-about nav:not(.open) li:not(.active) { display: none; }
#page-about nav li:not(.active) { border-bottom: solid 1px rgba(0,0,0,0.2); }

#page-about nav:not(.open) li.active { display: flex; align-items: center; background-color: var(--green); color: white; font-weight: 600; }
#page-about nav:not(.open) li.active:after { content: ""; display: inline-block; background-repeat: no-repeat; background-position: center center; transition: .5s all ease-in-out; }
#page-about nav:not(.open) li.active:after { height: 1.5rem; width: 1.5rem; margin-left: .5rem; background-image: url('../img/icons/arrow-down.svg' ); filter: invert(100%); }

/* MAIN */
#page-about main .the_tabs { padding: var(--rs); }

/*
============================================================================================================
  PAGE > GUIDE
============================================================================================================
*/

#page-guide #hero .layout { padding: var(--rs); }

#hero .default .text { padding: 0 var(--hs); }

/* *   
   *
   * -- >  MAIN > MENU
   *
   * */

/* *   
   *
   * -- >  MAIN > CONTENT
   *
   * */

#page-guide #main-content > .layout { flex-direction: column; }

/*
============================================================================================================
  PAGE > FAVORITES
============================================================================================================
*/

#page-favorites section > .layout { margin-top: var(--rs); }

/* *   
   *
   * -- >  MAIN CONTENT
   *
   * */

#page-favorites #main-content { padding: var(--rs); }

/*
============================================================================================================
  PAGE > PARCOURS
============================================================================================================
*/

/* *   
   *
   * -- >  MAIN CONTENT
   *
   * */

#page-parcours {}

#page-parcours #main-content { padding: var(--rs); }

#page-parcours #sections_menu ul { flex-direction: column; margin: 0; }
#page-parcours #sections_menu ul li a { margin-bottom: var(--hs); }

/*
============================================================================================================
  PAGE > SUPPORT
============================================================================================================
*/

#page-support { padding: var(--rs); }

#page-support .question-banner .layout { flex-direction: column; }
#page-support .question-banner .layout .left { margin-bottom: var(--rs); }

/*
============================================================================================================
  ARCHIVE TEMPLATE
============================================================================================================
*/



.archive-template {}
.archive-template #main-content > .layout { flex-direction: column; }

/* *   
   *
   * -- >  TOP
   *
   * */

.archive-template #top { padding: var(--rs); }
.archive-template #top .title { width: calc(100% - 70px); }
.archive-template #top .layout .left { width: calc(100% - 60px); }
.archive-template #top .layout .left img { width: 70px; height: 70px; margin-right: var(--hs); }


/* *   
   *
   * -- >  MAIN > MENU
   *
   * */

#sections-menu:not(.open) { display: none; }
#mobile-select-menu { margin: 0 0 var(--rs) var(--rs); }

/* *   
   *
   * -- >  LOOP
   *
   * */

.main-loop .card.flexible .top .left { width: calc(100% - 60px); }

.main-loop .card.flexible .section-content { padding: var(--rs) 0 0 0; }
.main-loop .card.flexible .top { justify-content: space-between; }

#info-archive section.checklists > .top { padding: 0 var(--rs); }

#checklists { padding-top: var(--rs); }

section.checklists > .top .title:before { 
  width: 32px;
  height: 32px;
  margin-bottom: -8px;
}

.checklists .main-checklist .main-title .cat_icon { width: 48px; height: 48px; }

.checklists .the_checklists .checklist .the_tasks > ul > li { padding: var(--rs); }
.checklists .the_checklists .checklist .the_tasks ul.subtasks li { padding: var(--rs) 0; }


/*
============================================================================================================
  ACRONYMES
============================================================================================================
*/

.acronyme-info .acronyme-tooltip {  }

/*
============================================================================================================
  ACRONYMES > ARCHIVE
============================================================================================================
*/


#acronymes-archive {}
.acronyme.card .layout { flex-direction: column; }
.acronyme.card .layout .left .title { font-size: 1.3rem; }

/*
============================================================================================================
  RESSOURCES > ARCHIVE
============================================================================================================
*/

#ressources-archive .intro-text { padding : 0 var(--rs); }

/* *   
   *
   * -- >  MAIN > MENU
   *
   * */


/* *   
   *
   * -- >  MAIN > CONTENT
   *
   * */

.ressources-loop { flex-direction: column; }
.ressources-loop .top { justify-content: space-between; }

/*
============================================================================================================
  USER
============================================================================================================
*/

/* *   
   *
   * -- > USER INTRO
   *
   * */

/* *   
   *
   * -- > USER MENU
   *
   * */

#user-menu { width: 100%; }
#user-menu .layout { justify-content: center; }

#user-menu .btn { margin: 0; }

/* *   
   *
   * -- > USER SETTINGS
   *
   * */

.user-settings { flex-direction: column; padding-bottom: var(--rs); }
.user-settings .accessibility { margin-bottom: var(--hs); }

.user-settings .public-mode { flex-wrap: wrap; justify-content: center; }
.user-settings .public-mode .label { width: 100%; text-align: center; margin-right: 0; }
.user-settings .public-mode button:first-of-type { margin-left: 0; }

/* *   
   *
   * -- > USER PROFILE
   *
   * */

#user-profile .layout .top { padding: var(--rs); align-items: center; }

#user-profile .layout .mid { flex-direction: column-reverse; }

#user-profile .layout .mid .the_profiles { flex-direction: column; padding: var(--rs); }
#user-profile .layout .mid .the_profiles .profile { margin-bottom: var(--hs); }

#user-profile .layout .mid .btn { margin-left: var(--rs); }







} /* END OF MOBILE */