/* Sébastien */

/* 1 - Outils */

row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.center{
text-align:center;
}
.round {

border-radius: 50%;
}
.absolute{
position: absolute;
}
.border-bleu{
border: 3px solid #5393c6;
}
.mt-n100{
margin-top : -100px;
}

.mt-5{
margin-top:5px;
}

.mt-10{
margin-top:10px;
}
.mt-20{
margin-top:20px;
}
.mt-30{
margin-top:30px;
}
.mt-40{
margin-top:40px;
}
.m-60{
margin:60px;
}

.p-20{
padding:20px;
}
.pl-20{
padding-left:20px;
}
.mauto{
margin:auto;
}

.miauto{
margin-inline:auto;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}


.col-12
 {
	     width: 100%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
}
.m-0
{
	margin:0;
}
.text-bleu{
 color: #5393c6;
}

.title-centred {
    overflow: hidden;
    font-size: 23px;
    font-weight: 400;
    position: relative;
    color: #2d5365;
    height: 26px;
	text-align:center;
}

.programme h2.title {
    margin: 0 -20px 15px 0;
}
@media (min-width:1025px) {
.title-centred:before {
    background: url(../img/motifs/title_after1.png) repeat-x;
    content: "";
    height: 3px;
    margin-left: 10px;
	display:table-cell;
    position: absolute;
    bottom: 7px;
    width: 39%;
}
.title-centred:after {
    background: url(../img/motifs/title_after1.png) repeat;
    content: "";
    height: 3px;
    margin-left: 10px;
		
    position: absolute;
    bottom: 7px;
    width: 39%;
}
}

/* 2 - evaluations ( avis client )  */

.evaluation {
    width: 250px;
    border-top: 4px solid #5393c6;
    position: relative;
    text-align: center;
    margin: 45px auto 60px;
    padding: 45px 15px 15px;
}

.evaluation-citation{
 width: 100%;
  /*padding: 15px 30px;*/
   /* width: 80%;*/
    border-left: 4px solid #87a628;
    font-style: italic;
    text-align: center;
    color: #2d5365;
    font-style: italic;
	height:200px;
}
.evaluation-ligne{
 min-height:330px;
}

.evaluation-citation p{
 color: #2d5365;
}
/*

.evaluation-citation:before {
    font-family: "icomoon";
    padding-right: 15px;
    content: "\e977";
}

.evaluation-citation:after {
    font-family: "icomoon";
    padding-left: 15px;
    content: "\e978";
}
*/
@media (min-width:1025px) {
.avis-content{
width:1230px;}
}

#mamabg .grid .g1 img {
    width: 100%;
    margin-left: 0px; 
}
/* --- compatibilité plateforme (ajout copie de travail, 03/10/2026) --- */
::before, ::after { box-sizing: content-box; }

/* ============================================================================
   EIR v2 — version mobile, calquée sur la v1 (sections SaaS)
   Ajoutée à la fin de css/eir.css (chargée sur toutes les pages, APRÈS
   responsive1.min.css) par outils/eir_ancien_design/televerser.py.
   Ne s'applique que sous 1025 px : l'affichage ordinateur ne bouge pas.
   ========================================================================= */

@media (max-width: 1025px) {

  /* ── 1. En-tête ───────────────────────────────────────────────────────────
     Bug d'origine (« le haut coupé en deux » sur iPhone) : au défilement, le
     script pose .fix_nav (position:fixed; top:-38px, prévu pour cacher la barre
     du haut sur ordinateur) et body.pt128 (128 px de marge). Sur téléphone,
     l'en-tête remontait de 38 px. On le remplace par une barre collante
     compacte, comme sur la v1, quel que soit l'état posé par le script. */
  .header, .header.fix_nav, .header.fix_nav_open {
    position: sticky !important; top: 0 !important; z-index: 4000;
    background: #fff; box-shadow: 0 1px 0 rgba(47, 83, 103, .12);
  }
  body, body.pt128 { padding-top: 0 !important; }
  #top, #btn_down { display: none !important; }      /* liens repris dans le panneau */

  .nav_top { height: 64px !important; background-image: none !important; }
  .nav_top .content.nav { position: relative; height: 64px; padding: 0 !important; }
  .lrg-logo { position: absolute !important; left: 16px !important; top: 8px !important; margin: 0 !important; z-index: 1 !important; }
  .lrg-logo img { height: 46px !important; width: auto !important; }

  /* Téléphone bien visible dans la barre, comme sur la v1 (lien ajouté au menu) */
  .mobile-tel {
    display: inline-flex !important; align-items: center; position: absolute; right: 62px; top: 15px;
    height: 34px; padding: 0 14px; border-radius: 9px; background: #5393c6; color: #fff !important;
    font: 700 13px/1 Roboto, helvetica, arial, sans-serif; letter-spacing: .02em; text-decoration: none;
  }
  #littleburger { top: 16px !important; right: 16px !important; z-index: 4102; }

  /* ── 2. Panneau du menu : tiroir pleine hauteur depuis la droite ────────── */
  .header .main_nav {
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: min(86vw, 340px) !important; height: auto; margin: 0 !important;
    padding: 76px 20px 32px !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border: 0 !important; background: #fff !important; background-image: none !important;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45) !important;   /* voile sur la page */
    z-index: 4101; text-align: left;
  }
  .main_nav > a, .main_nav .titre_accordeon {
    display: flex !important; align-items: baseline; gap: .35em; flex-wrap: wrap;
    padding: 14px 4px !important; height: auto !important; line-height: 1.25 !important;
    border: 0 !important; background: none !important; color: #2f5367 !important;
    font-size: 15px !important; text-align: left !important;
  }
  /* Bleu EIR comme sur ordinateur : 1er mot (FORMATION, SPÉCIALISATIONS…) en bleu clair, la suite en bleu nuit (07/10/2026). */
  .main_nav > a span, .main_nav .titre_accordeon span {
    display: inline !important; font-size: 15px !important; font-weight: 700; color: #5393c6 !important;
  }
  .main_nav .section_accordeon, .main_nav > a { border-bottom: 1px solid #eef2f6 !important; }
  .main_nav .titre_accordeon.active { padding-left: 4px !important; color: #2f5367 !important; }
  .main_nav .titre_accordeon i { position: absolute; right: 6px !important; top: 16px !important; color: #5393c6 !important; }
  .main_nav .titre_accordeon i.rot { transform: rotate(90deg); }

  /* Icônes accueil / boutique : une rangée de pastilles, comme sur la v1 */
  .main_nav > a:has(> i.icon-home1), .main_nav > a:has(> svg) {
    display: inline-flex !important; width: 44px; height: 44px; justify-content: center; align-items: center;
    padding: 0 !important; margin: 0 8px 12px 0; border: 1px solid #e5e7eb !important; border-radius: 10px;
  }
  .main_nav > a.on { background: none !important; }
  .main_nav > a.on:after, .main_nav > a.on:before { display: none !important; }

  /* Sous-menus (Spécialisations, Modules…) : liste simple sous la rubrique */
  .main_nav .contenu_accordeon { position: static !important; width: 100% !important; padding: 0 0 8px !important;
    background: none !important; box-shadow: none !important; }
  .main_nav .contenu_accordeon:after { display: none !important; }
  .main_nav .contenu_accordeon .titre_sousmenu { display: none !important; }
  .main_nav .contenu_accordeon .col_6, .main_nav .contenu_accordeon .col_4, .main_nav .contenu_accordeon .col_12 {
    float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
  }
  .main_nav .contenu_accordeon a {
    display: flex !important; align-items: center; gap: 10px; position: relative;
    padding: 9px 4px 9px 8px !important; font-size: 14px !important; line-height: 1.25; color: #5393c6 !important;
    border: 0 !important; background: none !important; height: auto !important; min-height: 0 !important;
  }
  .main_nav .contenu_accordeon a br { display: none; }
  .main_nav .contenu_accordeon a b { margin-left: .25em; color: #2f5367; }   /* bleu EIR : intitulé bleu clair, mot clé bleu nuit (07/10/2026) */
  .main_nav > a:has(> svg) { color: #5393c6 !important; }                    /* icône panier en bleu EIR, comme l'accueil */
  /* Case de 38 px : les glyphes « auto » (École, Atelier) font 37 px et « lotus »
     (Fondatrice) 30 px à 22 px — dans 26 px ils mordaient sur l'intitulé. */
  .main_nav .contenu_accordeon a i { position: static !important; font-size: 22px !important; color: #5393c6;
    width: 38px !important; flex: 0 0 38px !important; text-align: center; }

  /* Liens de la barre du haut, repris en bas du panneau (ajoutés au menu) */
  .mobile-liens { display: block !important; margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef2f6; }
  .mobile-liens a {
    display: block; padding: 10px 4px; font-size: 14px; color: #2f5367 !important; text-decoration: none;
  }
  .mobile-liens a.bglink {
    margin-top: 10px; text-align: center; border-radius: 9px; background: #87a628; color: #fff !important;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  }
}

/* ── 3. Pied de page ────────────────────────────────────────────────────────
   L'ancienne feuille MASQUAIT le grand pied de page sous 1025 px (#footer1
   {display:none}) : il ne restait que la ligne de copyright. On le réaffiche,
   empilé sur une colonne comme sur la v1 ; les listes de formations en deux
   colonnes, liens assez hauts pour le doigt. */
@media (max-width: 1025px) {
  #footer1 { display: block !important; padding: 26px 0 6px !important; }
  #footer1 .content { width: auto !important; padding: 0 18px !important; margin: 0 !important; }
  #footer1 .content > div { float: none !important; width: 100% !important; margin: 0 0 22px !important; padding: 0 !important; }
  #footer1 .content > div.cf { margin: 0 !important; }
  #footer1 h3.title { margin: 0 0 10px !important; font-size: 17px !important; }
  #footer1 .col_6 > ul.col_4 { float: left !important; width: 50% !important; margin: 0 0 14px !important; padding: 0 8px 0 0 !important; }
  #footer1 .col_6 > ul.col_4:first-of-type { width: 100% !important; }
  #footer1 .col_6 > .cf.hide { display: none !important; }   /* séparait Spécialisations et Modules */
  #footer1 li { line-height: 1.5 !important; margin: 0 !important; }
  #footer1 li a { display: inline-block; padding: 5px 0 !important; font-size: 14px !important; }
  #footer1 li.titre_col { margin-top: 4px; font-weight: 700; }
  #footer1 li a svg, #footer1 li a i { display: inline-block !important; vertical-align: -2px; margin-right: 6px; }
  #footer1 li a br { display: none; }
  #footer2 { padding: 14px 18px !important; text-align: center; font-size: 12px; }
}

/* ── 4. Accueil ─────────────────────────────────────────────────────────────
   Titres : « DEVENEZ RÉFLEXOLOGUE » (h2.jumbo, 34 px) débordait de l'écran.
   Cartes spécialisations / modules (ul.spec.mod > li.col_6 > .carte) : 2 par
   ligne, 105 px de large, titre sur 3 lignes, icône qui dépassait → une ligne
   par carte comme sur la v1 : icône à gauche, intitulé, flèche. Le lien
   a.cover (calque transparent sur toute la carte) garde toute la ligne cliquable. */
@media (max-width: 1025px) {
  h1.jumbo, h2.jumbo { font-size: 25px !important; line-height: 1.2 !important; overflow-wrap: anywhere; }
  h2.jumbo span { display: inline !important; }
  h1.jumbo > span { display: block !important; font-size: 19px !important; line-height: 1.3 !important; margin-top: 4px; }
  h1.jumbo > span span { display: inline !important; font-size: inherit !important; margin: 0 !important; }
  h1.jumbo br, h2.jumbo br, .thin-title br { display: none; }
  .thin-title, h3.thin-title { font-size: 18px !important; line-height: 1.3 !important; }

  .forma, .forma_index { padding-left: 14px !important; padding-right: 14px !important; }
  .col_md, .forma_index .col_6 { padding-left: 0 !important; padding-right: 0 !important; }
  ul.spec.mod { margin: 14px 0 0 !important; padding: 0 !important; }
  /* Toutes les cartes : la dernière des modules (« dorsale ») porte col-12
     (tiret) au lieu de col_6 — centrée seule sur ordinateur, plus étroite ici. */
  ul.spec.mod > li { float: none !important; width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; }
  ul.spec.mod .carte {
    display: flex !important; align-items: center; gap: 14px; position: relative;
    width: auto !important; height: auto !important; min-height: 64px; margin: 0 !important;
    padding: 10px 40px 10px 12px !important; border-radius: 12px; background: #fff;
    border: 1px solid #e3ebf2; text-align: left !important;
  }
  ul.spec.mod .carte .cercle_icone {
    position: static !important; order: -1; flex: 0 0 46px; width: 46px !important; height: 46px !important;
    margin: 0 !important; display: flex; align-items: center; justify-content: center; border-width: 2px !important;
  }
  ul.spec.mod .carte .cercle_icone i { font-size: 28px !important; line-height: 1 !important; }
  ul.spec.mod .carte h4 { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.25 !important; text-align: left !important; }
  ul.spec.mod .carte h4 br { display: none; }
  ul.spec.mod .carte h4 span { display: inline !important; }
  ul.spec.mod .carte a.cover { font-size: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; z-index: 2; }
  ul.spec.mod .carte:hover a.cover { padding: 0 !important; border: 0 !important; background: transparent !important; }
  ul.spec.mod .carte::after {
    content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-52%);
    font: 400 30px/1 Roboto, helvetica, arial, sans-serif; color: #5393c6;
  }
}

/* ── 5. Sous-menu « ÉCOLE EIR — qui sommes-nous ? » (#menu3) ───────────────
   Remis au format des autres sous-menus (menu_qui_sommes_nous.py) ; l'ancien
   CSS le figeait à 182 px avec des liens bordés (ancienne liste simple). */
@media (min-width: 1026px) {
  #menu3 { width: 400px !important; }
  .main_nav #menu3:after { width: 400px !important; min-height: 230px !important; right: 0 !important;
    box-shadow: 0 7px 18px -2px rgba(0, 0, 0, .3) !important; }
  .main_nav #menu3.contenu_accordeon a { height: 70px !important; padding: 7px 0 0 86px !important; border: 0 !important; }
  .main_nav #menu3.contenu_accordeon a:hover { padding-left: 91px !important; background-color: transparent !important; }
  /* 28 px centrées dans une case de 46 px (26 → 72 px), texte décalé à 86 px :
     le glyphe « École » (icon-auto) fait 56 px à 33 px et mordait sur le texte. */
  #menu3 i { font-size: 28px !important; width: 46px; left: 26px !important; text-align: center; }
}
@media (max-width: 1025px) {
  .main_nav #menu3.contenu_accordeon a { padding: 9px 4px 9px 8px !important; border: 0 !important; height: auto !important; }
  #menu3 i { font-size: 22px !important; }
}

/* ── 7. Pages « L'EIR » ────────────────────────────────────────────────────── */
@media (max-width: 1025px) {
  /* Fondatrice : la citation (figcaption.citation, 136 px fixes) s'étirait en
     colonne étroite sous la photo (200 px, flottante) → photo centrée, citation
     en pleine largeur dessous. */
  figure.imgsoso img { float: none !important; display: block; margin: 0 auto 14px !important; max-width: 100%; height: auto; }
  figure.imgsoso figcaption.citation { display: block !important; width: auto !important; max-width: none !important;
    float: none !important; margin: 0 !important; padding: 0 6px !important; text-align: left; }

  /* École : le titre (h2.jumbo de .forma2) collait au bandeau « Nous contacter ». */
  .forma2 { padding-top: 24px !important; }

  /* Équipe : grille #equipe figée à 3 colonnes de 182 px → une fiche par ligne. */
  #equipe { grid-template-columns: 1fr !important; gap: 16px !important; }
  #equipe > * { width: auto !important; min-width: 0 !important; margin: 0 !important; }
}

/* ── 8. Pages des écoles (formation-reflexologie-paris / -nantes / -toulouse) ─
   Texte (.col_6) et encart plan + adresse (.col_6.encart) côte à côte à 165 px,
   liste pratique (ul.lugar > li.col_6) à 151 px, titre h1 figé à 200 px :
   page de 8 300 px de haut. → tout empilé en pleine largeur. */
@media (max-width: 1025px) {
  .content.metier > .col_6, ul.lugar > li.col_6 {
    float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  .content.metier > .col_6.encart { margin-top: 18px !important; }
  .content.metier h1 { width: auto !important; padding-right: 0 !important; }
  .content.metier iframe { width: 100% !important; max-width: 100%; }
  ul.lugar { padding: 0 !important; }
  /* Encart plan + adresse : 30 px de marge et figure à 238 px → plan étroit.
     On rend la largeur au plan. */
  .content.metier .encart .bg_light { padding: 16px !important; }
  .content.metier .encart figure { width: auto !important; margin: 0 !important; }
  .content.metier .encart img { width: 100% !important; }
}
/* Toutes tailles : le plan porte width:530px;height:398px en dur ; dès que
   l'encart est plus étroit, la largeur se réduit mais pas la hauteur → plan
   étiré en rectangle vertical. La hauteur suit désormais la largeur. */
.content.metier .encart img { height: auto !important; max-width: 100%; }

/* ── 9. Chiffres clés : cartes .carre (grille .row > .col-lg-3) ─────────────
   Style propre à la page restauré (styles_pages.py) ; sur téléphone, 2 cartes
   par ligne au lieu d'une carte étroite (250 px + 40 px de marges) par ligne. */
@media (max-width: 1025px) {
  .row:has(> .col-lg-3) { margin-left: -6px !important; margin-right: -6px !important; }
  .row > .col-lg-3 { width: 50% !important; flex: 0 0 50%; max-width: 50%; padding: 0 6px 12px !important; }
  .row > .col-lg-3 .carre { width: auto !important; max-width: none !important; margin: 0 !important;
    padding: 12px 8px !important; height: 100%; }
  .row > .col-lg-3 .carre img { max-width: 100%; height: auto !important; }
  .row > .col-lg-3 .carre .stars { min-height: 0 !important; margin-top: 8px !important; }
}

/* ── 10. Fondatrice : PUBLICATIONS / INTERVENTIONS ─────────────────────────
   Vignettes rangées dans plusieurs .grid de 3 colonnes (79 px) → couvertures
   minuscules (63 px) et photos carrées étirées (79 × 155). Comme la v1 : une
   seule grille continue de 2 colonnes (~140 px), couvertures en 3/4, photos
   carrées. Les .grid s'effacent (display:contents) au profit de .forma. */
@media (max-width: 1025px) {
  .col_6 .forma:has(> .grid) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .col_6 .forma:has(> .grid) > :not(.grid) { grid-column: 1 / -1; }
  .col_6 .forma > .grid { display: contents; }
  /* .grid sans image contenant juste un   (ancien site) : ce texte
     devenait une case de la grille → trou entre les photos d'interventions. */
  .col_6 .forma > .grid:not(:has(img)) { display: none; }
  .col_6 .forma > .grid > a, .col_6 .forma > .grid > img { width: 100% !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important; }
  .col_6 .forma > .grid > a { display: block; border: 0 !important; border-radius: 4px; overflow: hidden; }
  .col_6 .forma > .grid img { width: 100% !important; height: auto !important; display: block; border-radius: 4px; }
  .col_6 .forma > .grid > a > img { aspect-ratio: 3 / 4; object-fit: cover; }
  .col_6 .forma > .grid.carre > img { aspect-ratio: 1 / 1; object-fit: cover; }
}

/* ── 11. Blog : liste des articles ─────────────────────────────────────────
   .col_12 garde ses marges négatives (-15 px) avec une largeur de 330 px :
   la liste était décalée de 15 px vers la gauche (8 px à gauche, 38 à droite). */
@media (max-width: 1025px) {
  .eir-blog-classique .content > .col_12 { width: auto !important; margin-left: 0 !important;
    margin-right: 0 !important; float: none !important; }
  /* Page d'un article : carte #articles_show en 750 px fixes (titre 660,
     blocs 690) → texte coupé à droite. Pleine largeur, marge intérieure
     ramenée de 30 à 16 px. */
  section#blog .content > article { width: auto !important; max-width: 100% !important; margin: 0 !important;
    float: none !important; padding: 16px !important; }
  section#blog .content > article > * { width: auto !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  section#blog .content > article img { max-width: 100% !important; height: auto !important; }
  /* Titre de l'article en 38 px → 6 lignes (240 px) entre le fil d'Ariane
     et la photo. 24 px : 3 lignes. */
  section#blog #articles_show h1 { font-size: 24px !important; line-height: 1.25 !important; margin: 10px 0 !important; }
}

/* ── 12. Inscription aux portes ouvertes (#jpo_eir) ────────────────────────
   Le visuel collait au bandeau « Inscription aux portes ouvertes… » et ne
   faisait que 239 px de large (marges de .content + style en ligne). Il passe
   bord à bord (.content : 7,5 + 15 px de chaque côté), 20 px sous le bandeau. */
@media (max-width: 1025px) {
  #jpo_eir .form_content > .content > p:has(> img) { margin: 20px -22.5px !important; padding: 0 !important; width: auto !important; }
  #jpo_eir .form_content > .content > p > img { width: 100% !important; height: auto !important;
    max-width: none !important; display: block; }
}

/* ── 6. Toutes tailles : icônes SVG du pied de page ────────────────────────
   La remise à zéro de Tailwind (chargé par la plateforme) met les <svg> en
   display:block → « Découvrez nous » / « Connectons nous » passaient sous les
   icônes Instagram et LinkedIn, sur ordinateur aussi. L'ancien site les
   affichait dans la ligne du texte. */
#footer1 li a svg { display: inline-block !important; vertical-align: -2px; }

/* Toutes tailles : « Notre école en chiffres » (page école). L'image (1136 × 238)
   était forcée à 700 × 147 en dur → réduite à 62 %, texte fin flou. Comme la v1 :
   pleine largeur du conteneur, sans dépasser sa taille réelle. */
img.chiffres-img { width: 100% !important; max-width: 1136px; height: auto !important; }

/* Éléments ajoutés pour le mobile : invisibles sur ordinateur */
@media (min-width: 1026px) {
  .mobile-tel, .mobile-liens { display: none !important; }
}

/* TOUTES TAILLES (07/10/2026) — le clic sur le chevron « › » d'une rubrique doit être un clic sur le titre :
   le script de l'ancien site teste « $(e.target).is('.active') », faux quand la cible est le <i> → la rubrique
   se refermait puis se rouvrait aussitôt (téléphone ET ordinateur). */
.main_nav .titre_accordeon i { pointer-events: none; }