/* ==============================================================
   PRÉFACS.COM — COMPOSANTS ET UTILITAIRES DU THÈME MODERNA
   Chargé sur toutes les pages, après app.css.

   Remplace Bootstrap et l'ancien thème educrat : toutes les vues
   étendent maintenant themes.moderna.layouts.app. Les noms de classes
   encore présents dans les vues (grille .row/.col-*, .form-input,
   .btn-*, .table, .card, .accordion, .modal, utilitaires mt-15,
   text-16…) sont implémentés ici avec les jetons moderna (app.css).
   Aucune dépendance : le comportement est dans ui.js.
   ============================================================== */

/* ---------- 0. BASE COMPLÉMENTAIRE ---------- */
main{ display:block; min-height:60vh; }
main > .pf-panel:first-child,
main > .container:first-child,
main > div:first-child:not(.section):not(.pf-hero):not(.detail-hero){ margin-top:var(--sp-6); }
main > :last-child{ margin-bottom:var(--sp-7); }

h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); color:var(--aubergine); line-height:1.2; font-weight:600; }
h1, .h1{ font-size:var(--text-xl); }
h2, .h2{ font-size:var(--text-lg); }
h3, .h3{ font-size:var(--text-md); }
h4, .h4{ font-size:1.0625rem; }
h5, .h5{ font-size:1rem; margin:0 0 var(--sp-2); }
h6, .h6{ font-size:.9375rem; margin:0 0 var(--sp-2); }
.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--font-display); color:var(--aubergine); line-height:1.2; font-weight:600; }
.fs-5{ font-size:1.125rem; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-5) 0; }
small, .small{ font-size:var(--text-sm); }
code, kbd, pre, .font-mono{ font-family:var(--font-mono); }
pre{ background:var(--parchment); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-3); overflow:auto; }
table{ border-collapse:collapse; }
label{ display:inline-block; font-weight:600; color:var(--aubergine); font-size:var(--text-sm); margin-bottom:.35rem; }
iframe, video{ max-width:100%; }
[hidden]{ display:none !important; }

/* Listes dans le contenu (le reset d'app.css les retire partout) */
main ul:not([class]), main .pf-prose ul{ list-style:disc; padding-left:1.4rem; margin:0 0 var(--sp-4); }
main ol:not([class]), main .pf-prose ol{ list-style:decimal; padding-left:1.4rem; margin:0 0 var(--sp-4); }
main li:not([class]) + li:not([class]){ margin-top:.25rem; }

/* ---------- 1. BLOCS DE PAGE ---------- */
/* Ancien « masthead » d'educrat : un panneau blanc arrondi */
.pf-panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:var(--sp-6) var(--sp-5);
  margin:0 auto var(--sp-5); max-width:var(--wrap);
}
.pf-panel .container{ padding-left:0; padding-right:0; }
.pf-panel .container{ max-width:none; }
.pf-panel > h1:first-child, .pf-panel > h2:first-child{ margin-bottom:var(--sp-5); }
@media (max-width:640px){ .pf-panel{ padding:var(--sp-5) var(--sp-4); border-radius:var(--r-md); } }

.section-head{ text-align:left; margin-bottom:var(--sp-5); }
.section-head.text-center, .section-head .text-center{ text-align:center; }
.section-lede{ color:#5C4C7A; font-size:var(--text-md); max-width:44rem; }
.text-center .section-lede{ margin-left:auto; margin-right:auto; }

.layout-pt-sm{ padding-top:var(--sp-5); } .layout-pt-md{ padding-top:var(--sp-6); } .layout-pt-lg{ padding-top:var(--sp-7); }
.layout-pb-sm{ padding-bottom:var(--sp-5); } .layout-pb-md{ padding-bottom:var(--sp-6); } .layout-pb-lg{ padding-bottom:var(--sp-7); }
.container-fluid{ width:100%; padding:0 var(--sp-4); }
.wrapper{ max-width:var(--wrap); margin:0 auto; }

/* Boîtes de message (remplace include.notification.sample) */
.pf-flash{
  position:fixed; z-index:90; right:var(--sp-4); bottom:var(--sp-4); max-width:min(28rem, calc(100vw - 2rem));
  background:var(--paper); border:1px solid var(--line-strong); border-left:4px solid var(--violet);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4);
  animation:pf-flash-in .25s ease-out;
}
.pf-flash-title{ font-family:var(--font-display); font-weight:600; color:var(--aubergine); margin:0 0 .25rem; }
.pf-flash-body{ font-size:var(--text-sm); color:#4a3d63; }
.pf-flash-close{ position:absolute; top:.35rem; right:.5rem; background:none; border:0; font-size:1.3rem; line-height:1; color:#8A7BA8; cursor:pointer; }
@keyframes pf-flash-in{ from{ opacity:0; transform:translateY(.5rem); } to{ opacity:1; transform:none; } }

/* ---------- 2. GRILLE (12 colonnes) ---------- */
.row{ display:flex; flex-wrap:wrap; margin-left:-.75rem; margin-right:-.75rem; }
.row > *{ box-sizing:border-box; width:100%; max-width:100%; padding-left:.75rem; padding-right:.75rem; flex-shrink:0; }
.row.g-0, .row.no-gutters{ margin-left:0; margin-right:0; }
.row.g-0 > *, .row.no-gutters > *{ padding-left:0; padding-right:0; }
.col{ flex:1 0 0%; }
.col-auto{ flex:0 0 auto; width:auto; }
.col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}.col-5{width:41.6667%}.col-6{width:50%}
.col-7{width:58.3333%}.col-8{width:66.6667%}.col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}.col-12{width:100%}
@media (min-width:576px){
  .col-sm{flex:1 0 0%} .col-sm-auto{flex:0 0 auto;width:auto}
  .col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}.col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}
  .col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}.col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}
}
@media (min-width:768px){
  .col-md{flex:1 0 0%} .col-md-auto{flex:0 0 auto;width:auto}
  .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}
  .col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
  /* Décalages : seulement à partir des tablettes (sur téléphone, pleine largeur) */
  .offset-0,.offset-md-0{margin-left:0}
  .offset-1,.offset-md-1{margin-left:8.3333%}.offset-2,.offset-md-2{margin-left:16.6667%}.offset-3,.offset-md-3{margin-left:25%}
  .offset-4,.offset-md-4{margin-left:33.3333%}.offset-5,.offset-md-5{margin-left:41.6667%}.offset-6,.offset-md-6{margin-left:50%}
}
@media (min-width:992px){
  .col-lg{flex:1 0 0%} .col-lg-auto{flex:0 0 auto;width:auto}
  .col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}.col-lg-4{width:33.3333%}.col-lg-5{width:41.6667%}.col-lg-6{width:50%}
  .col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}.col-lg-9{width:75%}.col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}
}
@media (min-width:1200px){
  .col-xl-3{width:25%}.col-xl-4{width:33.3333%}.col-xl-5{width:41.6667%}.col-xl-6{width:50%}.col-xl-8{width:66.6667%}
}
/* « .container offset-1 » (ancien centrage) : pas de décalage d'un conteneur */
.container.offset-1, .container.offset-2{ margin-left:auto; }

/* Écarts educrat : y-gap-N (entre lignes) et x-gap-N (entre colonnes) */
.row.y-gap-10{row-gap:10px}.row.y-gap-15{row-gap:15px}.row.y-gap-20{row-gap:20px}.row.y-gap-30{row-gap:30px}.row.y-gap-50{row-gap:50px}
:not(.row).y-gap-10 > * + *{margin-top:10px} :not(.row).y-gap-15 > * + *{margin-top:15px}
:not(.row).y-gap-20 > * + *{margin-top:20px} :not(.row).y-gap-30 > * + *{margin-top:30px}
.row.x-gap-30{margin-left:-15px;margin-right:-15px}.row.x-gap-30 > *{padding-left:15px;padding-right:15px}
.row.x-gap-60{margin-left:-30px;margin-right:-30px}.row.x-gap-60 > *{padding-left:30px;padding-right:30px}

/* ---------- 3. AFFICHAGE / FLEX ---------- */
.d-none{display:none !important}.d-block{display:block !important}.d-inline{display:inline !important}
.d-inline-block{display:inline-block !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-grid{display:grid !important}
@media (min-width:768px){ .d-md-none{display:none !important} .d-md-block{display:block !important} .d-md-flex{display:flex !important} }
/* préfixes educrat « md: » / « lg: » = jusqu'à la largeur indiquée */
@media (max-width:991px){ .md\:d-none{display:none !important} .md\:d-block{display:block !important} .md\:mt-15{margin-top:15px !important} .md\:mt-20{margin-top:20px !important} .md\:px-0{padding-left:0 !important;padding-right:0 !important} .md\:pt-50{padding-top:50px !important} }
@media (max-width:1199px){ .lg\:pt-40{padding-top:40px !important} }
@media (max-width:767px){ .sm\:justify-start{justify-content:flex-start !important} }
.flex-column,.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}
.justify-content-start,.justify-start{justify-content:flex-start}.justify-content-center,.justify-center{justify-content:center}
.justify-content-end,.justify-end{justify-content:flex-end}.justify-content-between,.justify-between{justify-content:space-between}
.justify-content-around{justify-content:space-around}
.align-items-start,.items-start{align-items:flex-start}.align-items-center,.items-center{align-items:center}
.align-items-end,.items-end{align-items:flex-end}.align-self-center{align-self:center}
.float-start{float:left}.float-end{float:right}.float-none{float:none}
.clearfix::after{content:"";display:table;clear:both}
.w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100,.w-1\/1{width:100%}.h-100{height:100%}.mw-100{max-width:100%}
.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}
.position-relative{position:relative}.position-absolute{position:absolute}
.fixed-bottom{position:fixed;left:0;right:0;bottom:0;z-index:60}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visually-hidden,.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- 4. ESPACEMENTS ---------- */
/* L'échelle 0–6 (m-*, mt-*, mb-*, p-*, pt-*, pb-*, px-*, py-*) vient d'app.css (jetons --sp-*).
   Ici : les variantes manquantes et l'échelle en pixels de l'ancien thème (10, 15, 20…). */
.ms-1,.ml-1{margin-left:var(--sp-1)}.ms-2,.ml-2{margin-left:var(--sp-2)}.ms-3,.ml-3{margin-left:var(--sp-3)}
.me-1,.mr-1{margin-right:var(--sp-1)}.me-2,.mr-2{margin-right:var(--sp-2)}.me-3,.mr-3{margin-right:var(--sp-3)}
.ms-auto{margin-left:auto}.me-auto{margin-right:auto}
.mx-1{margin-left:var(--sp-1);margin-right:var(--sp-1)}.mx-2{margin-left:var(--sp-2);margin-right:var(--sp-2)}.mx-3{margin-left:var(--sp-3);margin-right:var(--sp-3)}
.my-3{margin-top:var(--sp-3);margin-bottom:var(--sp-3)}.my-5{margin-top:var(--sp-5);margin-bottom:var(--sp-5)}
.pt-0{padding-top:0}.pb-0{padding-bottom:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}
.mt--5{margin-top:-5px !important}
.mt-10{margin-top:10px !important}.mt-15{margin-top:15px !important}.mt-20{margin-top:20px !important}.mt-25{margin-top:25px !important}
.mt-30{margin-top:30px !important}.mt-35{margin-top:35px !important}.mt-40{margin-top:40px !important}.mt-50{margin-top:50px !important}.mt-60{margin-top:60px !important}
.mb-6{margin-bottom:6px !important}.mb-10{margin-bottom:10px !important}.mb-15{margin-bottom:15px !important}.mb-20{margin-bottom:20px !important}.mb-30{margin-bottom:30px !important}
.ml-10{margin-left:10px !important}.ml-15{margin-left:15px !important}.ml-25{margin-left:25px !important}.ml-30{margin-left:30px !important}.ml-40{margin-left:40px !important}
.mr-5{margin-right:5px !important}.mr-10{margin-right:10px !important}.mr-20{margin-right:20px !important}
.p-0{padding:0 !important}.p-1{padding:.25rem !important}.p-2{padding:.5rem !important}.p-3{padding:1rem !important}.p-4{padding:1.5rem !important}.p-5{padding:3rem !important}
.pt-0{padding-top:0 !important}.pt-1{padding-top:.25rem !important}.pt-2{padding-top:.5rem !important}.pt-3{padding-top:1rem !important}
.pb-0{padding-bottom:0 !important}.pb-1{padding-bottom:.25rem !important}.pb-2{padding-bottom:.5rem !important}.pb-3{padding-bottom:1rem !important}
.px-0{padding-left:0 !important;padding-right:0 !important}.px-1{padding-left:.25rem !important;padding-right:.25rem !important}
.px-2{padding-left:.5rem !important;padding-right:.5rem !important}.px-3{padding-left:1rem !important;padding-right:1rem !important}
.px-4{padding-left:1.5rem !important;padding-right:1.5rem !important}.px-5{padding-left:3rem !important;padding-right:3rem !important}
.py-0{padding-top:0 !important;padding-bottom:0 !important}.py-1{padding-top:.25rem !important;padding-bottom:.25rem !important}
.py-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.py-3{padding-top:1rem !important;padding-bottom:1rem !important}
.py-4{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.py-5{padding-top:3rem !important;padding-bottom:3rem !important}
.pl-5{padding-left:5px !important}.pr-8{padding-right:8px !important}.pr-15{padding-right:15px !important}.pr-60{padding-right:60px !important}
.pt-10{padding-top:10px !important}.pt-15{padding-top:15px !important}.pt-30{padding-top:30px !important}.pt-60{padding-top:60px !important}
.pb-15{padding-bottom:15px !important}.pb-30{padding-bottom:30px !important}
.px-16{padding-left:16px !important;padding-right:16px !important}.px-20{padding-left:20px !important;padding-right:20px !important}
.px-25{padding-left:25px !important;padding-right:25px !important}.px-30{padding-left:30px !important;padding-right:30px !important}
.px-60{padding-left:60px !important;padding-right:60px !important}
.py-15{padding-top:15px !important;padding-bottom:15px !important}.py-20{padding-top:20px !important;padding-bottom:20px !important}
.py-25{padding-top:25px !important;padding-bottom:25px !important}.py-30{padding-top:30px !important;padding-bottom:30px !important}
.py-45{padding-top:45px !important;padding-bottom:45px !important}
@media (max-width:640px){ .px-60{padding-left:24px !important;padding-right:24px !important} .pr-60{padding-right:0 !important} .ml-40{margin-left:16px !important} }

/* ---------- 5. TEXTE ---------- */
.text-11{font-size:11px}.text-14{font-size:14px}.text-15{font-size:15px}.text-16{font-size:16px}.text-17{font-size:17px}
.text-18{font-size:18px}.text-20{font-size:20px}.text-45{font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem)}
.text-lg{font-size:var(--text-lg)}
.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700,.fw-bold{font-weight:700}
.lh-1{line-height:1}.lh-11{line-height:1.1}.lh-base{line-height:1.55}
.text-left,.text-start{text-align:left}.text-right,.text-end{text-align:right}.text-justify{text-align:justify}
@media (min-width:768px){ .text-md-right,.text-md-end{text-align:right} .text-md-left{text-align:left} }
.text-uppercase,.-uppercase{text-transform:uppercase}.text-nowrap{white-space:nowrap}
.text-break{word-break:break-word}
.decoration-none,.text-decoration-none{text-decoration:none}.underline{text-decoration:underline}

/* Couleurs du texte (palette moderna) */
.text-dark,.text-black{color:var(--ink) !important}
.text-primary{color:var(--violet) !important}
.text-secondary{color:#5C4C7A !important}
.text-grey{color:#8A7BA8 !important}
.text-success{color:var(--emerald) !important}
.text-danger{color:#B42318 !important}
.text-warning{color:var(--amber-deep) !important}
.text-info{color:#2563A8 !important}
.text-light{color:#F0EAFB !important}

/* Fonds */
.bg-primary{background:var(--violet) !important;color:#fff}
.bg-secondary{background:var(--aubergine) !important;color:#fff}
.bg-success{background:var(--emerald) !important;color:#fff}
.bg-danger{background:#B42318 !important;color:#fff}
.bg-warning{background:var(--amber) !important;color:var(--ink)}
.bg-info{background:#2563A8 !important;color:#fff}
.bg-light,.bg-light-4,.bg-light-6,.bg-light-3{background:var(--parchment) !important}
.bg-dark,.bg-dark-8{background:var(--ink) !important;color:#fff}
.bg-blue-4,.bg-blue-7{background:#EEF3FB !important}
.bg-transparent{background:transparent !important}
.bg-opacity-10{--bg-o:.1}

/* Bordures, arrondis, ombres */
.border{border:1px solid var(--line) !important}.border-0{border:0 !important}
.border-top{border-top:1px solid var(--line) !important}.border-bottom{border-bottom:1px solid var(--line) !important}
.border-left,.border-start{border-left:1px solid var(--line) !important}.border-start-0{border-left:0 !important}
.border-light,.border-bottom-light{border-color:var(--line) !important}
.border-secondary,.border-dark,.border-top-dark{border-color:var(--line-strong) !important}
.border-success{border-color:var(--emerald) !important}.border-info{border-color:#2563A8 !important}
.rounded{border-radius:var(--r-sm) !important}.rounded-8{border-radius:8px !important}.rounded-16{border-radius:16px !important}
.rounded-end{border-top-right-radius:var(--r-sm) !important;border-bottom-right-radius:var(--r-sm) !important}
.shadow{box-shadow:var(--shadow-md) !important}.shadow-2{box-shadow:var(--shadow-md) !important}
.img-fluid{max-width:100%;height:auto}
.img-thumbnail{padding:.25rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);max-width:100%;height:auto}

/* ---------- 6. FORMULAIRES ---------- */
.form-group{ margin-bottom:var(--sp-4); }
.form-label{ display:block; }
/* .form-input / .form-textarea / .form-select : app.css. Alias pour le HTML produit par les scripts. */
.form-control{ display:block; width:100%; padding:0.65rem 0.85rem; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:0.9rem; }
.form-input, .form-textarea, .form-select{ display:block; }
.form-input:focus, .form-textarea:focus, .form-select:focus, .form-control:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(109,63,196,.18); }
.form-input[type=file]{ padding:.5rem; }
.form-input[type=checkbox], .form-input[type=radio]{ display:inline-block; width:auto; }
.form-input:disabled, .form-select:disabled, .form-textarea:disabled, .form-input[readonly]{ background:var(--parchment); color:#6b5d86; }
.form-sm{ padding:.4rem .6rem; font-size:var(--text-sm); }
.form-lg{ padding:.85rem 1rem; font-size:var(--text-md); }
.form-select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D3FC4' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:1rem; padding-right:2.4rem; }
.form-select[multiple]{ background-image:none; padding-right:.85rem; }
.form-textarea{ min-height:7rem; resize:vertical; }
.is-invalid{ border-color:#B0455A !important; }
.is-invalid:focus{ box-shadow:0 0 0 3px rgba(180,35,24,.15) !important; }
.is-valid{ border-color:var(--emerald) !important; }
.form-error{ display:block; font-weight:500; }
.form-error strong{ font-weight:600; }
.form-text{ display:block; font-size:0.76rem; color:#8A7BA8; margin-top:var(--sp-1); }
.form-radio{ display:flex; align-items:center; gap:.5rem; } .form-check, .form-radio{ margin-bottom:.4rem; }
.form-check input, .form-radio input, input[type=checkbox], input[type=radio]{ accent-color:var(--violet); width:1.05rem; height:1.05rem; }
.form-check-label{ font-weight:500; color:var(--ink); margin:0; }
.form-switch{ display:inline-flex; align-items:center; gap:.5rem; }
.switch{ position:relative; display:inline-block; width:2.8rem; height:1.5rem; }
.switch input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.switch__slider{ position:absolute; inset:0; background:var(--line-strong); border-radius:var(--r-pill); transition:background .2s; }
.switch__slider::before{ content:""; position:absolute; top:3px; left:3px; width:1.125rem; height:1.125rem; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:var(--shadow-sm); }
.switch input:checked + .switch__slider{ background:var(--violet); }
.switch input:checked + .switch__slider::before{ transform:translateX(1.3rem); }
.radio{ display:inline-flex; align-items:center; gap:.4rem; position:relative; cursor:pointer; }
.radio__mark{ width:1.1rem; height:1.1rem; border:2px solid var(--line-strong); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.radio__icon{ width:.5rem; height:.5rem; border-radius:50%; background:transparent; }
.radio input{ position:absolute; opacity:0; }
.radio input:checked + .radio__mark{ border-color:var(--violet); }
.radio input:checked + .radio__mark .radio__icon{ background:var(--violet); }
.input-group{ display:flex; align-items:stretch; }
.input-group > .form-input, .input-group > .form-select{ flex:1; border-radius:var(--r-sm) 0 0 var(--r-sm); }
.input-group > .btn{ border-radius:0 var(--r-sm) var(--r-sm) 0; }
.input-counter{ display:inline-flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:var(--r-pill); overflow:hidden; background:var(--paper); }
.input-counter input{ width:3rem; border:0; text-align:center; font:inherit; background:transparent; }
.input-counter__controls{ display:flex; }
.input-counter__controls button{ border:0; background:transparent; padding:.4rem .7rem; cursor:pointer; color:var(--violet); }
/* Anciennes enveloppes de formulaires educrat */
.contact-form, .respondForm__form, .shopCheckout-form{ display:block; }
.contact-form label, .respondForm__form label, .shopCheckout-form label{ display:block; }
.contact-form .row > *, .respondForm__form .row > *{ margin-bottom:var(--sp-3); }
.selectize, .js-selectize{ width:100%; }

/* ---------- 7. BOUTONS ---------- */
/* .btn, .btn-primary, .btn-amber, .btn-ghost, .btn-block : app.css */
.btn:disabled, .btn.disabled{ opacity:.55; pointer-events:none; }
.btn-sm{ padding:.4rem .9rem; font-size:.8125rem; }
.btn-lg{ padding:.9rem 1.8rem; font-size:var(--text-base); }
.btn-secondary{ background:var(--aubergine); color:#fff; }
.btn-secondary:hover{ background:var(--ink); color:#fff; }
.btn-success{ background:var(--emerald); color:#fff; box-shadow:0 6px 16px rgba(31,138,99,.25); }
.btn-success:hover{ background:#176E4F; color:#fff; }
.btn-danger{ background:#B42318; color:#fff; }
.btn-danger:hover{ background:#8F1B12; color:#fff; }
.btn-warning{ background:var(--amber); color:var(--ink); }
.btn-warning:hover{ background:var(--amber-deep); color:#fff; }
.btn-info{ background:#2563A8; color:#fff; }
.btn-info:hover{ background:#1C4C82; color:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--aubergine); color:#fff; }
.btn-light{ background:var(--parchment); color:var(--aubergine); }
.btn-link{ background:none; color:var(--violet); padding-left:.25rem; padding-right:.25rem; text-decoration:underline; }
[class*="btn-outline-"]{ background:transparent; border:1.5px solid currentColor; box-shadow:none; }
.btn-outline-primary{ color:var(--violet); } .btn-outline-primary:hover{ background:var(--violet); border-color:var(--violet); color:#fff; }
.btn-outline-secondary{ color:var(--aubergine); border-color:var(--line-strong); } .btn-outline-secondary:hover{ border-color:var(--aubergine); background:var(--aubergine); color:#fff; }
.btn-outline-success{ color:var(--emerald); } .btn-outline-success:hover{ background:var(--emerald); border-color:var(--emerald); color:#fff; }
.btn-outline-danger{ color:#B42318; } .btn-outline-danger:hover{ background:#B42318; border-color:#B42318; color:#fff; }
.btn-outline-warning{ color:var(--amber-deep); } .btn-outline-warning:hover{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.btn-outline-info{ color:#2563A8; } .btn-outline-info:hover{ background:#2563A8; border-color:#2563A8; color:#fff; }
.btn-outline-dark{ color:var(--ink); } .btn-outline-dark:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-block{ display:flex; width:100%; }
input.btn, button.btn{ -webkit-appearance:none; }
.btn-close{ width:1.75rem; height:1.75rem; border:0; border-radius:50%; background:transparent; cursor:pointer; position:relative; color:#6b5d86; }
.btn-close::before{ content:"×"; font-size:1.5rem; line-height:1.75rem; }
.btn-close:hover{ background:var(--parchment); color:var(--aubergine); }

/* Boutons de l'ancien thème : « button -md -purple-1 » */
.button{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1.4rem;
  border-radius:var(--r-pill); font-weight:600; font-size:var(--text-sm); text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; background:var(--violet); color:#fff; transition:background .15s, color .15s; }
.button.-sm{ padding:.45rem 1rem; } .button.-md{ padding:.7rem 1.4rem; } .button.-rounded{ border-radius:var(--r-pill); }
.button.-purple-1{ background:var(--violet); color:#fff; } .button.-purple-1:hover{ background:var(--violet-deep); }
.button.-purple-3{ background:rgba(109,63,196,.1); color:var(--violet); } .button.-purple-3:hover{ background:var(--violet); color:#fff; }
.button.-outline-purple-1{ background:transparent; border-color:var(--violet); color:var(--violet); }
.button.-outline-purple-1:hover{ background:var(--violet); color:#fff !important; }
.button.-dark-1{ background:var(--ink); color:#fff; } .button.-dark-1:hover{ background:var(--aubergine); }
.button.-accent{ background:var(--amber); color:var(--ink); }

/* ---------- 8. TABLEAUX ---------- */
.table{ width:100%; margin-bottom:var(--sp-4); background:var(--paper); color:var(--ink); font-size:var(--text-sm); }
.table th, .table td{ padding:.7rem .8rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table thead th, .table > tr:first-child > th{ background:var(--parchment); color:var(--aubergine); font-weight:600; border-bottom:2px solid var(--line-strong); white-space:nowrap; }
.table tbody tr:hover{ background:#FBF9FE; }
.table-sm th, .table-sm td{ padding:.4rem .55rem; }
.table-striped tbody tr:nth-child(odd){ background:#FBF9FE; }
.table-bordered th, .table-bordered td{ border:1px solid var(--line); }
.table-dark, .table-dark th, .table-dark td{ background:var(--aubergine) !important; color:#fff !important; border-color:rgba(255,255,255,.12) !important; }
.table-group-divider{ border-top:2px solid var(--line-strong); }
.table-responsive{ display:block; width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); margin-bottom:var(--sp-4); }
.table-responsive > .table{ margin-bottom:0; }

/* ---------- 9. CARTES, LISTES, BADGES, ALERTES ---------- */
.card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:var(--sp-4); }
.card-header{ padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); font-weight:600; color:var(--aubergine); background:#FBF9FE; }
.card-body{ padding:var(--sp-4) var(--sp-5); flex:1; }
.card-footer{ padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line); }
.card-title{ font-family:var(--font-display); color:var(--aubergine); }
.list-group{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--paper); }
.list-group-item{ padding:.75rem 1rem; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.list-group-item:last-child{ border-bottom:0; }
a.list-group-item:hover{ background:#FBF9FE; color:var(--violet); }
.list-group-flush{ border:0; border-radius:0; }
.list-unstyled{ list-style:none; padding-left:0; }

.badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .6rem; border-radius:var(--r-pill); font-size:.75rem; font-weight:600; line-height:1.4; background:var(--aubergine); color:#fff; vertical-align:middle; }
.badge-success{ background:var(--emerald); } .badge-danger{ background:#B42318; } .badge-info{ background:#2563A8; } .badge-primary{ background:var(--violet); }

.alert{ position:relative; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); border:1px solid var(--line-strong); background:#F0EAFB; color:var(--aubergine); margin-bottom:var(--sp-4); }
.alert-success{ background:#E7F5EE; border-color:#B6E0CB; color:#145A41; }
.alert-danger{ background:#FDECEA; border-color:#F5C2BD; color:#8F1B12; }
.alert-warning{ background:#FDF4E3; border-color:#F2D6A2; color:#7A4E0F; }
.alert-info, .alert-primary{ background:#F0EAFB; border-color:var(--line-strong); color:var(--aubergine); }
.alert .btn-close{ position:absolute; top:.5rem; right:.5rem; }
.ysp-message-info, .ysp-message-error{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); margin-bottom:var(--sp-4); }
.ysp-message-info{ background:#F0EAFB; color:var(--aubergine); }
.ysp-message-error{ background:#FDECEA; color:#8F1B12; }

/* ---------- 10. ACCORDÉON, REPLI, ONGLETS ---------- */
.collapse:not(.show){ display:none; }
.collapsing{ overflow:hidden; transition:height .25s ease; }
.accordion{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--paper); margin-bottom:var(--sp-5); }
.accordion-item + .accordion-item{ border-top:1px solid var(--line); }
.accordion-header{ margin:0; font-size:inherit; }
.accordion-button{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left;
  background:transparent; border:0; padding:var(--sp-4) var(--sp-5); font-family:var(--font-body); font-weight:600; font-size:var(--text-base); color:var(--aubergine); cursor:pointer; }
.accordion-button::after{ content:""; flex-shrink:0; width:1rem; height:1rem; transition:transform .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D3FC4' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center/contain; }
.accordion-button:not(.collapsed){ color:var(--violet); background:#FBF9FE; }
.accordion-button:not(.collapsed)::after{ transform:rotate(180deg); }
.accordion-body{ padding:0 var(--sp-5) var(--sp-4); color:#4a3d63; }

.nav{ display:flex; flex-wrap:wrap; gap:.25rem; list-style:none; padding:0; margin:0 0 var(--sp-4); }
.nav-link{ display:block; padding:.5rem .9rem; border-radius:var(--r-pill); color:var(--aubergine); text-decoration:none; font-weight:600; font-size:var(--text-sm); }
.nav-link:hover{ color:var(--violet); background:rgba(109,63,196,.08); }
.nav-link.active{ background:var(--violet); color:#fff; }
.nav-tabs{ border-bottom:1px solid var(--line); gap:0; }
.nav-tabs .nav-link{ border-radius:var(--r-sm) var(--r-sm) 0 0; }

/* ---------- 11. MENUS DÉROULANTS ---------- */
.dropdown{ position:relative; display:inline-block; }
.dropdown-toggle{ cursor:pointer; }
.dropdown-menu, .dropdown__item{ position:absolute; z-index:50; top:calc(100% + .35rem); left:0; min-width:12rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:.4rem; display:none; }
.dropdown-menu.show, .dropdown.is-open .dropdown__item, .dropdown.is-open .dropdown-menu{ display:block; }
.dropdown-menu-end{ left:auto; right:0; }
.dropdown-item, .js-dropdown-link{ display:block; padding:.5rem .75rem; border-radius:var(--r-sm); color:var(--ink); text-decoration:none; font-size:var(--text-sm); }
.dropdown-item:hover, .js-dropdown-link:hover{ background:var(--parchment); color:var(--violet); }
.js-dropdown-title, .js-shop-dropdown > div:first-child{ cursor:pointer; }

/* ---------- 12. FENÊTRES (modales) ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:none; overflow-y:auto; padding:var(--sp-5) var(--sp-4); background:rgba(36,24,50,.55); }
.modal.show{ display:flex; align-items:flex-start; justify-content:center; }
.modal-dialog{ width:100%; max-width:32rem; margin:5vh auto; }
.modal-dialog.modal-lg{ max-width:48rem; }
.modal-content{ background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-header, .modal-footer{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); }
.modal-header{ border-bottom:1px solid var(--line); }
.modal-footer{ border-top:1px solid var(--line); justify-content:flex-end; }
.modal-title{ margin:0; font-family:var(--font-display); color:var(--aubergine); }
.modal-body{ padding:var(--sp-5); }
body.pf-modal-open{ overflow:hidden; }

/* Info-bulles (data-bs-toggle="popover") */
.pf-popover{ position:absolute; z-index:110; max-width:18rem; background:var(--ink); color:#fff; font-size:var(--text-sm);
  padding:.6rem .8rem; border-radius:var(--r-sm); box-shadow:var(--shadow-md); }
.pf-popover strong{ display:block; margin-bottom:.2rem; }

/* ---------- 13. PAGINATION (ancienne et Laravel) ---------- */
.pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.35rem; list-style:none; padding:0; margin:var(--sp-5) 0; }
.page-link, .pagination__count a, .pagination__count span, .pagination__button{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; height:2.4rem; padding:0 .7rem;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--paper); color:var(--aubergine);
  text-decoration:none; font-weight:600; font-size:var(--text-sm); cursor:pointer; }
.page-link:hover, .pagination__count a:hover, .pagination__button:hover{ border-color:var(--violet); color:var(--violet); }
.page-item.active .page-link, .pagination__count a.-count-is-active{ background:var(--violet); border-color:var(--violet); color:#fff; }
.page-item.disabled .page-link{ opacity:.45; pointer-events:none; }
.pagination__count{ display:flex; gap:.35rem; }
.pagination__button.-prev::before{ content:"‹"; font-size:1.2rem; }
.pagination__button.-next::before{ content:"›"; font-size:1.2rem; }

/* ---------- 14. ICÔNES ---------- */
.icon{ display:inline-flex; width:1.15rem; height:1.15rem; vertical-align:middle; }
.icon.size-20{ width:20px; height:20px; } .size-100{ width:100px; height:100px; }
svg.feather{ width:1.15rem; height:1.15rem; stroke-width:2; vertical-align:middle; }
.icon-chevron-left::before{ content:"‹"; } .icon-chevron-right::before{ content:"›"; }

/* ---------- 15. BOUTIQUE (anciens composants educrat) ---------- */
.productCard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  overflow:hidden; height:100%; transition:transform .2s, box-shadow .2s; padding-bottom:var(--sp-4); }
.productCard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.productCard__image{ position:relative; }
.productCard__image img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--parchment); }
.productCard__image h3, .productCard__image .h4{ margin:var(--sp-3) var(--sp-4) .25rem; }
.productCard__image span{ display:block; color:#6b5d86; font-size:var(--text-sm); padding:0 var(--sp-4); }
.productCard__image > div:last-child a{ text-decoration:none; }
.productCard__controls{ position:absolute; top:.75rem; right:.75rem; display:flex; flex-direction:column; gap:.4rem; }
.productCard__icon{ display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--aubergine); box-shadow:var(--shadow-sm); }
.productCard__icon:hover{ background:var(--violet); color:#fff; }
.productCard__content{ padding:0 var(--sp-4); }
.productCard__content a{ color:var(--violet); text-decoration:none; }
.productCard__button{ margin-top:var(--sp-2); }

.sidebar{ display:flex; flex-direction:column; gap:var(--sp-5); }
.sidebar__item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4); }
.sidebar__title{ font-family:var(--font-display); color:var(--aubergine); font-weight:600; font-size:var(--text-md); margin-bottom:var(--sp-3); }
.sidebar__search{ position:relative; }
.sidebar__search input{ width:100%; padding:.6rem 2.6rem .6rem .85rem; border:1.5px solid var(--line-strong); border-radius:var(--r-pill); font:inherit; }
.sidebar__search button{ position:absolute; right:.35rem; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--violet); cursor:pointer; }
.sidebar-content{ display:flex; flex-direction:column; gap:.4rem; }
.sidebar-content.-tags, .sidebar-content.-list{ flex-direction:row; flex-wrap:wrap; }
.sidebar-tag{ display:inline-block; padding:.3rem .75rem; border-radius:var(--r-pill); background:rgba(109,63,196,.08); color:var(--violet); text-decoration:none; font-size:var(--text-sm); }
.sidebar-tag:hover{ background:var(--violet); color:#fff; }
.sidebar-content a{ color:var(--ink); text-decoration:none; }
.sidebar-content a:hover{ color:var(--violet); }

.priceCard{ height:100%; border:1px solid var(--line); }
.priceCard__type{ font-family:var(--font-display); color:var(--aubergine); }
.priceCard__price{ font-family:var(--font-display); color:var(--aubergine); }
.priceCard__period{ color:#6b5d86; font-size:var(--text-sm); }
.priceCard__content img{ margin-left:auto; margin-right:auto; }

.shopCart-products__title{ font-weight:600; color:var(--aubergine); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.shopCart-footer{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) 0; border-top:1px solid var(--line); }

/* Carrousels de l'ancien thème : défilement horizontal simple */
.js-slider, .-slider{ display:flex; gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--sp-2); }
.js-slider > *{ scroll-snap-align:start; flex:0 0 auto; }

/* Éléments décoratifs d'educrat sans équivalent */
.masthead-image__el3, [data-anim]{ animation:none; }
.masthead-info{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-4); }
.preloader{ display:none !important; }

/* ---------- 16. MESSAGERIE DU SITE (chat) ---------- */
.message-list{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.message-list-header{ padding:var(--sp-3) var(--sp-4); font-weight:600; color:var(--aubergine); border-bottom:1px solid var(--line); }
.message-list-item{ display:flex; gap:var(--sp-3); align-items:center; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.message-list-item:hover{ background:#FBF9FE; }
.message-list-new{ font-weight:700; }
.message-list-item-datetime{ margin-left:auto; font-size:.75rem; color:#8A7BA8; }

/* ---------- 17. IMPRESSION ---------- */
@media print{
  .pf-header, .pf-footer, #pfAppBanner, .pf-flash, .btn, .button{ display:none !important; }
  body{ padding-top:0; background:#fff; }
  .pf-panel, .card{ box-shadow:none; border-color:#ccc; }
}