/* Effets Leadership Coach Studio. Laurene, 5 octobre 2026.
   Retrait complet : supprimer le <link id="lcs-effets"> et le <script id="lcs-effets-js">
   des vues. Le contenu de Monique n'est pas modifie. */

/* 1. En-tete en verre depoli, colle en haut.
   translateZ(0) le place sur sa propre couche : plus de scintillement au defilement. */
html.lcs-fx .o_header{
  position:sticky; top:0; z-index:1040;
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(16,33,63,.06);
  transform:translateZ(0);
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;
}
html.lcs-fx .o_header.is-scrolled{
  background:rgba(255,255,255,.88);
  border-bottom-color:rgba(16,33,63,.10);
  box-shadow:0 10px 30px -14px rgba(16,33,63,.28);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.lcs-fx .o_header{background:rgba(255,255,255,.97);}
}

/* 2. Reflet de glace sur les aplats marine, dans sa couleur #EEF2F7 */
html.lcs-fx .o_cc5{position:relative; isolation:isolate;}
html.lcs-fx .o_cc5::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(238,242,247,.15), rgba(238,242,247,0) 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(238,242,247,.09), rgba(238,242,247,0) 55%);
}

/* 3. Les sections retiennent les glissements lateraux.
   clip et pas hidden : hidden casserait le collage de l'en-tete. */
html.lcs-fx .o_section{overflow-x:clip;}

/* 4. Apparitions.
   Pas de filter blur et pas de scale : les deux font trembler le texte pendant
   l'animation. translate3d force la composition GPU, donc un mouvement net. */
html.lcs-fx .lcs-up,
html.lcs-fx .lcs-left,
html.lcs-fx .lcs-right{
  opacity:0; backface-visibility:hidden;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--lcs-d,0ms);
}
html.lcs-fx .lcs-up{transform:translate3d(0,20px,0);}
html.lcs-fx .lcs-left{transform:translate3d(-36px,0,0);}
html.lcs-fx .lcs-right{transform:translate3d(36px,0,0);}

html.lcs-fx .lcs-up.is-in,
html.lcs-fx .lcs-left.is-in,
html.lcs-fx .lcs-right.is-in{opacity:1; transform:translate3d(0,0,0);}

/* Une fois l'animation terminee, le JS pose .lcs-fini : on rend le texte
   a son rendu normal, sans couche GPU, pour qu'il soit parfaitement net. */
html.lcs-fx .lcs-fini{
  transform:none!important; transition:none!important;
  backface-visibility:visible; will-change:auto;
}

/* 5. Garde-fous */
@media (prefers-reduced-motion:reduce){
  html.lcs-fx .lcs-up,html.lcs-fx .lcs-left,html.lcs-fx .lcs-right{
    opacity:1!important;transform:none!important;transition:none!important;}
  html.lcs-fx .o_header{transition:none;}
}
@media print{
  html.lcs-fx .lcs-up,html.lcs-fx .lcs-left,html.lcs-fx .lcs-right{
    opacity:1!important;transform:none!important;}
  html.lcs-fx .o_header{position:static;background:#fff;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;transform:none;}
  html.lcs-fx .o_cc5::before{content:none;}
}

/* 6. Photos remplacables depuis l'editeur.
   Elles etaient des fonds CSS, donc intouchables pour Monique. */
.o_hero_photo{background-image:none!important;}
.o_bio_photo{background-image:none!important;}
.o_hero_photo > img,.o_bio_photo > img{display:block;width:100%;height:100%;}
.o_hero_photo > img{object-fit:contain;object-position:center bottom;}
.o_bio_photo  > img{object-fit:cover;object-position:center;}


/* ============================================================
   7. Couleurs rendues a Monique sous le gabarit Odoo
   Son design fait heriter la couleur du texte depuis la section :
     .o_cc5 { background: navy; color: blanc }  et les titres heritent.
   Le theme Odoo impose une couleur aux titres et aux liens, ce qui casse
   cet heritage et donnait du bleu fonce sur du bleu fonce.
   On restaure ses valeurs, exactement celles de son fichier d'origine.
   ============================================================ */

/* Sections claires : texte navy */
html body .o_cc1, html body .o_cc2,
html body .o_cc1 h1, html body .o_cc1 h2, html body .o_cc1 h3,
html body .o_cc1 h4, html body .o_cc1 h5, html body .o_cc1 h6,
html body .o_cc2 h1, html body .o_cc2 h2, html body .o_cc2 h3,
html body .o_cc2 h4, html body .o_cc2 h5, html body .o_cc2 h6{
  color:var(--o-color-1)!important;
}

/* Sections marine : texte blanc */
html body .o_cc5,
html body .o_cc5 h1, html body .o_cc5 h2, html body .o_cc5 h3,
html body .o_cc5 h4, html body .o_cc5 h5, html body .o_cc5 h6,
html body .o_cc5 p, html body .o_cc5 li, html body .o_cc5 strong{
  color:var(--o-color-5)!important;
}
/* Le gris de Monique sur fond marine, 72 % de blanc */
html body .o_cc5 .text-muted{color:rgba(255,255,255,.72)!important;}
html body .o_cc1 .text-muted, html body .o_cc2 .text-muted{color:rgba(16,33,63,.6)!important;}

/* Boutons sur fond clair : plein navy, texte blanc */
html body a.btn-o-primary, html body button.btn-o-primary{
  background:var(--o-color-1)!important; color:var(--o-color-5)!important;
  border:1px solid var(--o-color-1)!important;
}
html body a.btn-o-primary:hover, html body button.btn-o-primary:hover{
  background:var(--o-color-2)!important; color:var(--o-color-5)!important;
}
/* Boutons sur fond marine : plein blanc, texte navy */
html body .o_cc5 a.btn-o-primary, html body .o_cc5 button.btn-o-primary{
  background:var(--o-color-5)!important; color:var(--o-color-1)!important;
  border-color:var(--o-color-5)!important;
}
html body .o_cc5 a.btn-o-primary:hover, html body .o_cc5 button.btn-o-primary:hover{
  background:var(--o-color-3)!important; color:var(--o-color-1)!important;
}
/* Boutons au trait */
html body a.btn-o-outline, html body button.btn-o-outline{
  background:transparent!important; color:var(--o-color-1)!important;
  border:1px solid var(--o-color-1)!important;
}
html body a.btn-o-outline:hover, html body button.btn-o-outline:hover{
  background:var(--o-color-1)!important; color:var(--o-color-5)!important;
}
html body .o_cc5 a.btn-o-outline, html body .o_cc5 button.btn-o-outline{
  color:var(--o-color-5)!important; border-color:rgba(255,255,255,.5)!important;
}
html body .o_cc5 a.btn-o-outline:hover, html body .o_cc5 button.btn-o-outline:hover{
  background:var(--o-color-5)!important; color:var(--o-color-1)!important;
}

/* Liens de contenu dans les sections marine, lisibles */
html body .o_cc5 a:not([class*="btn-o"]){color:var(--o-color-5)!important;}
html body .o_cc1 a:not([class*="btn-o"]):not(.nav-link),
html body .o_cc2 a:not([class*="btn-o"]):not(.nav-link){color:var(--o-color-1)!important;}

/* En-tete et pied de page, qui sont les siens */
html body .o_header .nav-link,
html body .o_header a:not([class*="btn-o"]){color:var(--o-color-1)!important;}
html body .o_footer, html body .o_footer a:not([class*="btn-o"]), html body .o_footer h1,
html body .o_footer h2, html body .o_footer h3{color:var(--o-color-5)!important;}


/* 8. Le logo dans l'en-tete, sur toutes les pages.
   Douze de ses fichiers affichaient le nom en texte au lieu du logo, et leur CSS
   ne portait donc pas la regle de taille. Valeur reprise de sa page d'accueil. */
html body .o_header .logo-img{height:48px;width:auto;display:block;}
@media (max-width:575.98px){html body .o_header .logo-img{height:38px;}}


/* 9. Le cadre autour de la photo de Monique.
   Ses pages de recits mettaient un fond #1C3260, son marine clair, ce qui donnait
   un cadre bleu sur bleu. Remplace par #EEF2F7, sa teinte glace, qui est deja ce
   qu'elle utilise pour ce meme bloc sur sa page d'accueil.
   Retrait : supprimer ce bloc, le cadre redevient marine. */
html body .o_bio_photo{background-color:var(--o-color-3)!important;}


/* 10. Les titres de Monique en Newsreader.
   Sa feuille de style demande h1, h2 et h3 en Newsreader. Le theme Odoo impose
   Open Sans aux h2 et h3, avec une regle plus forte que la sienne, et seuls les
   h1 passaient. Ses valeurs sont restaurees, ce n'est pas un ajout.
   Retrait : supprimer ce bloc, les h2 et h3 repassent en Open Sans. */
html body #wrap h1, html body #wrap h2, html body #wrap h3{
  font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-0.01em;}


/* 11. Les boutons animes, pour toutes les pages.
   Ce bloc etait colle en clair dans six vues seulement, les onze autres
   gardaient donc les boutons pleins d'origine. Il est repris ici a
   l'identique pour que les dix-sept pages se ressemblent.
   Retrait : supprimer ce bloc, les boutons redeviennent ceux de Monique. */

/* ==== boutons animes, repris a l identique de /homepage-preview ==== */
/* Seul ajout aux fichiers de Monique. Le reste de la page est le sien, intact. */
.btn-o-primary, .btn-o-outline {
  display: inline-block; vertical-align: middle;
  position: relative; overflow: hidden; isolation: isolate;
  text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600;
  padding: 1rem 2.3rem; margin: 8px 8px 8px 7px; border-width: 1px; border-style: solid;
  outline: 1px solid rgba(16,33,63,.30); outline-offset: 7px;
  transition: background .45s ease, color .35s ease, border-color .35s ease,
              outline-offset .4s cubic-bezier(.22,.61,.36,1), outline-color .4s ease,
              transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.btn-o-primary::after, .btn-o-outline::after {
  content: ""; position: absolute; top: 0; left: -90%; width: 65%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: skewX(-20deg); transition: left .9s cubic-bezier(.3,.7,.3,1);
  pointer-events: none; z-index: 1; }
.btn-o-primary:hover::after, .btn-o-primary:focus-visible::after,
.btn-o-outline:hover::after, .btn-o-outline:focus-visible::after { left: 140%; }

/* marine sur fond clair : bascule en blanc, le double filet se resserre */
.btn-o-primary:hover, .btn-o-primary:focus-visible {
  background: #FFFFFF; color: #10213F; border-color: #10213F;
  outline-color: rgba(16,33,63,.85); outline-offset: 2px;
  transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(16,33,63,.5); }
.btn-o-primary:hover::after {
  background: linear-gradient(105deg, transparent 0%, rgba(16,33,63,.2) 50%, transparent 100%); }

/* le bouton secondaire suit le meme dessin, encre marine sur fond clair */
.btn-o-outline::after {
  background: linear-gradient(105deg, transparent 0%, rgba(16,33,63,.2) 50%, transparent 100%); }
.btn-o-outline:hover, .btn-o-outline:focus-visible {
  background: #10213F; color: #FFFFFF; border-color: #10213F;
  outline-color: rgba(16,33,63,.85); outline-offset: 2px;
  transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(16,33,63,.5); }
.btn-o-outline:hover::after {
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); }

/* sur fond marine : le blanc et le bleu s inversent */
.o_cc5 .btn-o-primary, .o_cc4 .btn-o-primary { outline-color: rgba(255,255,255,.38); }
.o_cc5 .btn-o-primary::after, .o_cc4 .btn-o-primary::after {
  background: linear-gradient(105deg, transparent 0%, rgba(16,33,63,.22) 50%, transparent 100%); }
.o_cc5 .btn-o-primary:hover, .o_cc5 .btn-o-primary:focus-visible,
.o_cc4 .btn-o-primary:hover, .o_cc4 .btn-o-primary:focus-visible {
  background: #10213F; color: #FFFFFF; border-color: #FFFFFF;
  outline-color: rgba(255,255,255,.9); outline-offset: 2px;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); }
.o_cc5 .btn-o-primary:hover::after, .o_cc4 .btn-o-primary:hover::after {
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); }

.o_cc5 .btn-o-outline, .o_cc4 .btn-o-outline { outline-color: rgba(255,255,255,.38); }
.o_cc5 .btn-o-outline::after, .o_cc4 .btn-o-outline::after {
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%); }
.o_cc5 .btn-o-outline:hover, .o_cc5 .btn-o-outline:focus-visible,
.o_cc4 .btn-o-outline:hover, .o_cc4 .btn-o-outline:focus-visible {
  background: #FFFFFF; color: #10213F; border-color: #FFFFFF;
  outline-color: rgba(255,255,255,.9); outline-offset: 2px;
  transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); }
.o_cc5 .btn-o-outline:hover::after, .o_cc4 .btn-o-outline:hover::after {
  background: linear-gradient(105deg, transparent 0%, rgba(16,33,63,.22) 50%, transparent 100%); }

/* le bouton de l en-tete reste compact */
header.o_header .btn-o-primary, header.o_header .btn-o-outline {
  font-size: .72rem; padding: .74rem 1.45rem; outline-offset: 4px; margin: 4px 4px 4px 0; }

/* liens Find out more : le soulignement se retire par la droite */
a.text-decoration-underline { text-decoration: none !important; position: relative; }
a.text-decoration-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform .35s cubic-bezier(.22,.61,.36,1); }
a.text-decoration-underline:hover::after { transform: scaleX(0); }


/* 14/10 : le bloc de resultats du questionnaire. Le script fait un scrollIntoView
   sur le haut de la section, et l'en-tete collant recouvrait les deux premieres
   lignes, dont « what I'd tell you if we were talking ». Retour de Monique du 14/10. */
#results { scroll-margin-top: 112px; }
@media (max-width: 991.98px) { #results { scroll-margin-top: 88px; } }


/* Menu des petits ecrans, demande de Monique du 14/10. Le bouton et le panneau
   sont construits par le script ; ici seulement leur apparence, dans ses couleurs. */
.lcs-menu-bouton{
  display:none; margin-left:auto; margin-right:.75rem; order:2;
  background:none; border:0; padding:.5rem; cursor:pointer;
  width:42px; height:42px; flex-direction:column; justify-content:center; gap:5px;
}
@media (max-width: 991.98px){ .lcs-menu-bouton{ display:flex; } }
.lcs-menu-bouton span{
  display:block; height:2px; width:24px; background:var(--o-color-1, #10213f);
  transition:transform .22s ease, opacity .18s ease;
}
.o_header.lcs-menu-ouvert .lcs-menu-bouton span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.o_header.lcs-menu-ouvert .lcs-menu-bouton span:nth-child(2){ opacity:0; }
.o_header.lcs-menu-ouvert .lcs-menu-bouton span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.lcs-menu-mobile{
  display:none; width:100%;
  padding:1.25rem 1.5rem 1.75rem;
  background:#fff; border-top:1px solid rgba(16,33,63,.10);
  box-shadow:0 18px 40px -22px rgba(16,33,63,.35);
}
.o_header.lcs-menu-ouvert .lcs-menu-mobile{ display:block; }
@media (min-width: 992px){ .lcs-menu-mobile{ display:none !important; } }
.lcs-menu-mobile a{
  display:block; padding:.6rem 0; text-decoration:none;
  color:var(--o-color-1, #10213f); font-size:1.05rem;
}
.lcs-menu-mobile a.lcs-menu-sous{ padding-left:1rem; font-size:.98rem; opacity:.85; }
.lcs-menu-mobile a.lcs-menu-petit{ font-size:.9rem; opacity:.8; }
.lcs-menu-titre{
  padding:.6rem 0 .2rem; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; opacity:.55;
}
.lcs-menu-sep{ height:1px; background:rgba(16,33,63,.10); margin:.9rem 0 .4rem; }


/* ============================================================
   14/10, stabilisation du survol et du defilement.
   Deux tremblements signales apres la mise en ligne.

   1. Le bouton montait de 3 px au survol. Curseur pose pres du bord bas,
      le bouton se derobe, sort du survol, redescend, et oscille sans fin.
      L'ombre portee suffit a donner le relief, sans deplacer la zone cliquable.

   2. Le defilement. Un en-tete collant avec backdrop-filter est recalcule
      a chaque image, d'ou le scintillement. Fond opaque a la place, et
      la couche GPU est declaree une fois pour toutes.
   ============================================================ */

html.lcs-fx .btn-o-primary:hover, html.lcs-fx .btn-o-primary:focus-visible,
html.lcs-fx .btn-o-outline:hover, html.lcs-fx .btn-o-outline:focus-visible,
html.lcs-fx .o_cc5 .btn-o-outline:hover, html.lcs-fx .o_cc5 .btn-o-outline:focus-visible,
html.lcs-fx .o_cc4 .btn-o-outline:hover, html.lcs-fx .o_cc4 .btn-o-outline:focus-visible {
  transform: none !important;
  box-shadow: 0 14px 30px -14px rgba(16,33,63,.45);
}

html.lcs-fx .o_header {
  position: sticky; top: 0; z-index: 1040;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: translateZ(0);
  transition: box-shadow .2s ease, border-color .2s ease;
}
html.lcs-fx .o_header.is-scrolled {
  background: #ffffff !important;
  box-shadow: 0 10px 30px -18px rgba(16,33,63,.28);
}

/* Les apparitions au defilement restent, mais la couche GPU est liberee
   des que l'element est arrive : un element anime en permanence tremble. */
html.lcs-fx .lcs-up.is-in, html.lcs-fx .lcs-left.is-in, html.lcs-fx .lcs-right.is-in {
  will-change: auto;
  backface-visibility: visible;
}