/* Menu commun à toutes les pages, posé par outils/seo/menu.mjs. Grille : chaque case fait 2, 3 ou 4 modules (--m). */
:root{--m:60px;--nav:var(--m)}
.nav{position:sticky;top:0;z-index:50;display:flex;height:var(--nav);background:var(--fond);border-bottom:1px solid var(--filet);font-size:16px;font-weight:500;line-height:1;letter-spacing:-.012em;transition:background-color .45s var(--ease)}
.nav a,.nav button{--n:2;display:flex;align-items:center;justify-content:center;gap:10px;flex:none;width:calc(var(--m) * var(--n));height:var(--nav);padding:0 10px;text-decoration:none;border-right:1px solid var(--filet);background:none;border-top:0;border-bottom:0;border-left:0;border-radius:0;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color .15s var(--ease)}
.nav a:hover,.nav button:hover{background:var(--case)}
.nav a:active,.nav button:active{background:#E6E6DE;transition-duration:0s}
.nav .logo{justify-content:flex-start;padding:0 0 0 calc(var(--m) * .3)}
.nav .logo-svg{display:block;height:calc(var(--m) * .43);width:auto}
.nav .n3{--n:3}
.nav a[aria-current="page"],.nav .dans>.of-b{background:var(--case);box-shadow:inset 0 -2px 0 var(--teal)}
.nav .sp{flex:1}
.nav .plein{--n:4;background:var(--encre);color:#fff;border-left:1px solid var(--filet);border-right:0;font-weight:600}
.nav .plein:hover{background:#000}
.nav .plein:active{background:#2A2A2E}
.nav .plein svg{flex:none}
.nav :focus-visible{outline:2px solid var(--teal);outline-offset:-5px}
.nav .plein:focus-visible{outline-color:#fff}
.nav .l-court{display:none}
.nav .menu{display:none}
.nav-haut .nav:not(.ouvert){background-color:rgba(251,251,248,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Offres : bouton de deux modules, panneau ancré sous lui, bords posés sur les séparateurs du menu.
   Le panneau glisse de sous la barre : le découpage suit le glissement, il ne déborde jamais sur la barre ni ne capte un clic une fois refermé. */
.nav .of{display:flex;flex:none;height:var(--nav)}
.nav .of-chev{display:block;flex:none;width:7px;height:10px;background:currentColor;transform:rotate(90deg);transition:transform .25s var(--ease);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M1.25 1.25L5 5L1.25 8.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M1.25 1.25L5 5L1.25 8.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.nav .of-b[aria-expanded="true"]{background:var(--case);box-shadow:inset 0 -2px 0 var(--teal)}
.nav .of-b[aria-expanded="true"] .of-chev{transform:rotate(-90deg)}
.nav .of-t{display:none}
.nav .of-p{position:absolute;top:var(--nav);z-index:1;display:grid;grid-template-columns:calc(var(--m) * 5) 1fr;width:calc(var(--m) * 12 + 1px);margin-left:-1px;background:var(--fond);border:1px solid var(--filet);border-top:0;box-shadow:0 12px 32px rgba(24,24,27,.12);visibility:hidden;pointer-events:none;opacity:0;transform:translateY(-6px);clip-path:inset(6px -48px -64px);transition:opacity .15s var(--ease),transform .25s var(--ease),clip-path .25s var(--ease),visibility 0s linear .25s}
.nav .of.ouvre .of-p,html:not(.js) .nav .of:hover .of-p,html:not(.js) .nav .of:focus-within .of-p{visibility:visible;pointer-events:auto;opacity:1;transform:none;clip-path:inset(0 -48px -64px);transition:opacity .15s var(--ease),transform .25s var(--ease),clip-path .25s var(--ease),visibility 0s}

/* Liste : un libellé par ligne de la grille, la phrase reste lisible par les lecteurs d'écran */
.nav .of-l{display:flex;flex-direction:column;border-right:1px solid var(--filet)}
.nav .of-e{justify-content:flex-start;gap:6px;width:auto;height:var(--m);padding:0 calc(var(--m) * .3);border-right:0;border-bottom:1px solid var(--filet);font-size:16px}
.nav .of-e:last-child{border-bottom:0}
.nav .of-e b{font-weight:500}
.nav .of-e i{font-style:normal;font-weight:400;font-size:14px;color:var(--gris)}
.nav .of-e .ic-f{margin-left:auto;opacity:0;transition:opacity .15s var(--ease)}
.nav .of-e.actif{--ol-t:1;background:var(--case)}
.nav .of-e.actif .ic-f{opacity:1}
.nav .of-e[aria-current="page"]{box-shadow:inset 2px 0 0 var(--teal)}
.nav .of-d{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Aperçu : un fragment de la sérigraphie de l'accueil et la phrase de l'offre, sur quatre lignes de la grille */
.nav .of-v{position:relative;overflow:hidden}
.nav .of-a{position:absolute;inset:0;display:grid;align-items:stretch;justify-content:stretch;gap:0;grid-template-rows:calc(var(--m) * 2) 1fr;width:auto;height:auto;padding:0;border:0;white-space:normal;opacity:0;visibility:hidden;transition:opacity .15s var(--ease),visibility 0s linear .15s}
.nav .of-a:hover{background:none}
.nav .of-a.vu,html:not(.js) .nav .of-a:first-child{opacity:1;visibility:visible;transition:opacity .15s var(--ease),visibility 0s}
.nav .of-img{display:block;border-bottom:1px solid var(--filet);background:var(--case) 0 0/calc(var(--m) * 16) auto no-repeat}
.nav .of.pret .of-img,html:not(.js) .nav .of-img{background-image:url("/assets/3-serigraphie-1600.webp")}
.nav .of-a[data-i="0"] .of-img{background-position:calc(var(--m) * -6.4) calc(var(--m) * -1)}
.nav .of-a[data-i="1"] .of-img{background-position:calc(var(--m) * -1.1) calc(var(--m) * -5)}
.nav .of-a[data-i="2"] .of-img{background-position:calc(var(--m) * -8.5) calc(var(--m) * -4)}
.nav .of-a[data-i="3"] .of-img{background-position:calc(var(--m) * -4) calc(var(--m) * -6.5)}
.nav .of-ph{display:flex;align-items:center;padding:0 calc(var(--m) * .3);font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.02em}

/* Barre ordinateur : chaque case prend la largeur de son libellé, avec le même espace de chaque côté (choix de Camille du 28/10/2026). */
@media (min-width:1241px){.nav>a:not(.logo),.nav .of-b,.nav .mm>a.lien{width:auto;padding:0 26px}}
/* Menu mobile et tablette (1240 px et moins) : plein écran bleu canard sous la barre.
   Pages principales en grand ; Offres en accordéon, chaque sous-page avec son fragment de sérigraphie et sa phrase ;
   rendez-vous pleine largeur en bas, dans la zone du pouce. Ouvert, Fermer reprend la place du rendez-vous de la barre. */
.nav .mm{display:contents}
.nav .mm-rdv{display:none}
@media (max-width:1240px){
  .nav{--mm-fond:var(--teal-f);--mm-sous:#08474A;--mm-clair:#FBFBF8;--mm-gris:#B4CFCA;--mm-filet:rgba(251,251,248,.16);--mm-survol:rgba(251,251,248,.06);--mm-appui:rgba(251,251,248,.12);--mm-cote:clamp(16px,4.2vw,40px);--mm-ligne:max(60px,calc(var(--m) * 1.5))}
  .nav .sp{display:none}
  .nav .menu{display:flex;margin-left:auto;border-left:1px solid var(--filet);border-right:0}
  .nav.ouvert{background:var(--mm-fond);color:var(--mm-clair);border-bottom-color:var(--mm-filet)}
  .nav.ouvert .logo,.nav.ouvert .menu{border-color:var(--mm-filet)}
  .nav.ouvert .plein{display:none}
  .nav.ouvert .menu{width:calc(var(--m) * 6)}
  .nav.ouvert .menu,.nav.ouvert .menu:hover{background:rgba(251,251,248,.08)}
  .nav.ouvert :focus-visible{outline-color:var(--mm-clair)}

  .nav .mm{position:fixed;z-index:1;left:0;right:0;top:var(--nav);height:calc(100vh - var(--nav));height:calc(100dvh - var(--nav));display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mm-fond);color:var(--mm-clair);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .15s var(--ease),visibility 0s linear .15s}
  .nav.ouvert .mm{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .15s var(--ease),visibility 0s}
  .nav .mm>*{flex:none}
  .nav .mm a,.nav .mm button{width:auto;height:auto;justify-content:flex-start;border:0;white-space:normal;color:inherit}
  .nav .mm a:hover,.nav .mm button:hover{background:var(--mm-survol)}
  .nav .mm a:active,.nav .mm button:active{background:var(--mm-appui)}

  /* Pages principales : une ligne d'un module et demi, typographie forte */
  .nav .mm>a.lien,.nav .mm .of-b{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--mm-ligne);padding:0 var(--mm-cote);border-bottom:1px solid var(--mm-filet);font-size:clamp(28px,8vw,40px);font-weight:500;line-height:1.05;letter-spacing:-.045em;transform:translateY(8px);transition:transform .45s var(--ease),background-color .15s var(--ease)}
  .nav.ouvert .mm>a.lien,.nav.ouvert .mm .of-b{transform:none}
  .nav .mm a.lien[aria-current="page"],.nav .mm .dans>.of-b,.nav .mm .dans>.of-b[aria-expanded="true"]{background:none;box-shadow:inset 4px 0 0 var(--mm-clair)}
  .nav .mm .of{display:block;order:-1;width:100%;height:auto}
  .nav .mm .of-t,.nav .mm .of-v{display:none}
  .nav .mm .of-b[aria-expanded="true"]{background:none;box-shadow:none;border-bottom-color:transparent}
  .nav .mm .of-chev{width:10px;height:15px;margin-right:4px}

  /* Sous-pages d'Offres : plus petites, sur un fond plus sombre, avec leur fragment de sérigraphie et leur phrase en gris */
  .nav .mm .of-p{position:static;display:block;width:auto;height:0;margin:0;overflow:hidden;border:0;box-shadow:none;background:var(--mm-sous);opacity:1;transform:none;clip-path:none;visibility:hidden;pointer-events:auto;interpolate-size:allow-keywords;transition:height .25s var(--ease),visibility 0s linear .25s}
  .nav .mm .of.ouvre .of-p{height:auto;visibility:visible;border-bottom:1px solid var(--mm-filet);transition:height .25s var(--ease),visibility 0s}
  .nav .mm .of-l{border-right:0}
  .nav .mm .of-e{display:grid;grid-template-columns:calc(var(--m) * 2) 1fr auto;align-content:center;column-gap:14px;row-gap:4px;min-height:calc(var(--mm-ligne) + 8px);padding:12px var(--mm-cote);border-top:1px solid var(--mm-filet);font-size:17px;line-height:1.2;letter-spacing:-.01em;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease),background-color .15s var(--ease)}
  .nav .mm .of-e:first-child{border-top:0}
  .nav .mm .of-e::before{content:"";grid-column:1;grid-row:1/span 3;align-self:center;height:calc(var(--m) * 1.25);background:var(--mm-fond) 0 0/calc(var(--m) * 8) auto no-repeat}
  .nav .mm .of.pret .of-e::before{background-image:url("/assets/3-serigraphie-1600.webp")}
  .nav .mm .of-e[data-i="0"]::before{background-position:calc(var(--m) * -3.2) calc(var(--m) * -.5)}
  .nav .mm .of-e[data-i="1"]::before{background-position:calc(var(--m) * -.55) calc(var(--m) * -2.5)}
  .nav .mm .of-e[data-i="2"]::before{background-position:calc(var(--m) * -4.25) calc(var(--m) * -2)}
  .nav .mm .of-e[data-i="3"]::before{background-position:calc(var(--m) * -2) calc(var(--m) * -3.25)}
  .nav .mm .of-e b{grid-column:2;font-weight:500}
  .nav .mm .of-e i{grid-column:2;font-size:14px;color:var(--mm-gris)}
  .nav .mm .of-d{position:static;grid-column:2;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-size:14px;font-weight:400;line-height:1.35;letter-spacing:0;color:var(--mm-gris)}
  .nav .mm .of-e .ic-f{grid-column:3;grid-row:1/span 3;align-self:center;margin:0;opacity:.6}
  .nav .mm .of-e.actif{background:none}
  .nav .mm .of-e[aria-current="page"]{background:none;box-shadow:inset 4px 0 0 var(--mm-clair)}
  .nav .mm .of.ouvre .of-e{opacity:1;transform:none}
  .nav .mm .of.ouvre .of-e:nth-child(2){transition-delay:.04s}
  .nav .mm .of.ouvre .of-e:nth-child(3){transition-delay:.08s}
  .nav .mm .of.ouvre .of-e:nth-child(4){transition-delay:.12s}

  /* Rendez-vous : pleine largeur, collé en bas du panneau, au-dessus de la zone de sécurité de l'écran */
  .nav .mm .mm-rdv{display:flex;align-items:center;justify-content:space-between;position:sticky;bottom:0;margin-top:auto;width:100%;min-height:calc(max(60px,var(--m) * 1.25) + env(safe-area-inset-bottom));padding:0 var(--mm-cote) env(safe-area-inset-bottom);background:var(--mm-clair);color:var(--encre);font-size:18px;font-weight:600;letter-spacing:-.015em}
  .nav .mm .mm-rdv:hover{background:#fff}
  .nav .mm .mm-rdv:active{background:var(--teal-p)}
  .nav .mm .mm-rdv:focus-visible{outline-color:var(--teal)}
  .nav .mm-rdv .ic-f{flex:none;width:20px;height:20px}
}
@media (min-width:640px) and (max-width:1240px){
  .nav .mm .of-l{display:grid;grid-template-columns:1fr 1fr}
  .nav .mm .of-e:nth-child(2){border-top:0}
  .nav .mm .of-e:nth-child(odd){border-right:1px solid var(--mm-filet)}
}
body:has(.nav.ouvert){overflow:hidden}
@media (max-width:760px){
  :root{--m:48px}
  .nav .logo{flex:1;width:auto;border-right:0;padding:0 0 0 calc(var(--m) * .22)}
  .nav .plein{--n:3;font-size:15px;gap:8px}
  .nav .plein svg{display:none}
  .nav.ouvert .menu{width:calc(var(--m) * 5)}
}
@media (max-width:440px){.nav .l-long{display:none}.nav .l-court{display:inline}.nav .plein{flex:none;width:auto;padding:0 16px}}
@media (hover:none){
  .nav a:hover,.nav button:hover,.nav .mm a:hover,.nav .mm button:hover{background:none}
  .nav .plein:hover{background:var(--encre)}
  .nav .mm .mm-rdv:hover{background:var(--mm-clair)}
  .nav .menu[aria-expanded="true"]{background:rgba(251,251,248,.08)}
}
html:not(.js) .nav{flex-wrap:wrap;height:auto}
html:not(.js) .nav .menu{display:none}
@media (max-width:1240px){
  html:not(.js) .nav{background:var(--mm-fond);color:var(--mm-clair)}
  html:not(.js) .nav .mm{position:static;flex:1 1 100%;height:auto;visibility:visible;opacity:1;pointer-events:auto}
  html:not(.js) .nav .mm .of-p{height:auto;visibility:visible}
  html:not(.js) .nav .mm .of-e{opacity:1;transform:none}
  html:not(.js) .nav .mm .of-e::before{background-image:url("/assets/3-serigraphie-1600.webp")}
}
@media (prefers-reduced-motion:reduce){.nav,.nav a,.nav button,.nav .plein svg,.nav .of-chev,.nav .of-p,.nav .of.ouvre .of-p,.nav .of-a,.nav .of-e .ic-f,.nav .mm,.nav .mm .of-p,.nav .mm .of.ouvre .of-p,.nav .mm .of-e,.nav .mm>a.lien,.nav .mm .of-b{transition:none}.nav .of-p{transform:none;clip-path:inset(0 -48px -64px)}.nav .mm>a.lien,.nav .mm .of-b,.nav .mm .of-e{transform:none}}
:root{--cta:#E0161F;--cta-survol:#C41019;--cta-appui:#A80D15}
:root .nav .plein:not([href*="origin.education"]),:root .nav .mm .mm-rdv:not([href*="origin.education"]),:root a.btn.plein[href*="cal.com"]{background:var(--cta);color:#fff}
:root .nav .plein:not([href*="origin.education"]):hover,:root .nav .mm .mm-rdv:not([href*="origin.education"]):hover,:root a.btn.plein[href*="cal.com"]:hover{background:var(--cta-survol)}
:root .nav .plein:not([href*="origin.education"]):active,:root .nav .mm .mm-rdv:not([href*="origin.education"]):active,:root a.btn.plein[href*="cal.com"]:active{background:var(--cta-appui)}
:root .nav .mm .mm-rdv:not([href*="origin.education"]):focus-visible,:root a.btn.plein[href*="cal.com"]:focus-visible{outline-color:#fff}
@media (hover:none){:root .nav .plein:not([href*="origin.education"]):hover,:root .nav .mm .mm-rdv:not([href*="origin.education"]):hover,:root a.btn.plein[href*="cal.com"]:hover{background:var(--cta)}}
.btn{white-space:nowrap}
.btn .b-court{display:none}
@media (max-width:820px){.btn .b-long{display:none}.btn .b-court{display:inline}}
