/* ==========================================================================
   drasil-common.css — socle Drasil, portage statique
   ==========================================================================

   Ce fichier est le portage 1:1, en CSS statique, du socle CSS que le
   framework PHP maison Drasil injecte sur CHAQUE page via
   `Hugin/__vue/elementsView.php` :

     $view->initDataRootCss();               // valeurs par défaut du :root
     $view->modifyTabRootCss([...]);          // surcharge avec le thème de la page
     $view->d_contructCssFile();              // écrit :root puis inclut les modules
       -> Hugin/__vue/css/base.php
       -> Hugin/__vue/css/flex.php
       -> Hugin/__vue/css/gap.php
       -> Hugin/__vue/css/scroll.php

   Le bloc :root ci-dessous reprend EXACTEMENT les noms de tokens produits par
   `initDataRootCss()`, avec les valeurs remplacées par le thème défini dans
   DESIGN.md (§2 couleurs, §3 typographie, §4 espacement) — comme le ferait
   un appel projet à `modifyTabRootCss()`. Les tokens que DESIGN.md ne couvre
   pas gardent la valeur par défaut du socle Drasil (aucune valeur inventée).
   Les modules flex/gap/scroll sont recopiés à l'identique : aucune classe
   ajoutée, renommée ou supprimée — ce sont des noms de contrat. base.php n'est
   repris que pour sa part "réellement utile à une page vitrine" (reset,
   typographie de base, quelques utilitaires) ; ses composants applicatifs
   (modales, toasts, étiquettes, carrousel, footer applicatif...) sont hors
   périmètre de ce projet statique.

   NE PAS ÉDITER CE FICHIER POUR UN BESOIN DE PAGE. Le CSS spécifique à une
   page (ecosysteme.css, etc.) ne doit jamais redéclarer une propriété déjà
   couverte ici (flex, gap, padding, margin, overflow, scrollbar...) : il
   utilise les classes utilitaires ci-dessous dans le HTML.

   AU PORTAGE DANS DRASIL : ce fichier disparaît. Les pages du framework le
   remplacent par l'appel natif initDataRootCss() / modifyTabRootCss() /
   d_contructCssFile() + les modules base/flex/gap/scroll du framework — ce
   fichier n'existe alors plus, il a servi uniquement de vocabulaire commun
   pendant la phase statique.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PIÈGE DRASIL N°1 — box-sizing
   --------------------------------------------------------------------------
   base.php applique `*, *::before, *::after { box-sizing: inherit; }` mais
   ne pose JAMAIS `box-sizing` sur la racine. Sans déclaration explicite,
   `inherit` remonte jusqu'à la valeur initiale du user-agent : `content-box`.
   Résultat : tout élément en `width:100%` (ou `width:...%`) qui porte un
   padding déborde de son conteneur. Le socle Drasil ne pose PAS cette ligne
   lui-même (chaque page/app est censée la poser) — on la pose donc ici,
   explicitement, pour que le contrat `box-sizing: inherit` de base.php
   fonctionne comme prévu partout dans la page.
   -------------------------------------------------------------------------- */
html { box-sizing: border-box; overflow-x: hidden; }


/* ==========================================================================
   :root — thème (portage de initDataRootCss() + modifyTabRootCss())
   ========================================================================== */
/* --- @font-face ------------------------------------------------------------
   Equivalent statique de d_contructCssFile($fonts) : dans Drasil, les
   @font-face sont ecrits en tete du fichier CSS de page, avant le :root.
   Polices auto-hebergees : aucune requete vers un domaine tiers.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Barlow';src:url('../fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Michroma';src:url('../fonts/michroma-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {

  /* --- Couleurs d'état génériques (main-*) ---------------------------------
     DESIGN.md ne définit pas de palette d'état (succès/alerte/erreur/info) :
     ce ne sont pas des tokens de la charte de la page. Valeurs par défaut du
     socle Drasil conservées telles quelles (aucune valeur inventée). Non
     utilisées par le CSS porté dans ce fichier (les composants qui les
     consomment, #mailOk/.has-text-danger/etc., sont hors périmètre §5). */
  --main-green: #6fc56d;
  --main-yellow: #f7e8a7;
  --main-orange: #ed8858;
  --main-red: #ed5858;
  --main-blue: #63acbf;

  /* --- Fond de page / zones — DESIGN.md §2 --------------------------------- */
  --background-color: #080B14;
  --background-color-zone: #0B1020;
  --color-fond-zone: var(--background-color-zone);
  --color-fond-card: #0D1324;

  /* --- Footer — non couvert par DESIGN.md, valeurs par défaut du socle
     conservées (footer applicatif hors périmètre de l'extrait base.php). */
  --color-footer: #000000;
  --color-txt-footer: #ffffff;

  /* --- Encre — DESIGN.md §2 -------------------------------------------------- */
  --color-txt: #E6EDF5;
  --color-txt-secondary: #9FB0C4;

  /* --- Cyan structurel — DESIGN.md §2 --------------------------------------- */
  --color-primary: #3FD3D8;
  --color-secondary: #1F6E77;

  /* --- Filets — DESIGN.md §2 (tokens propres au projet, absents du socle) --- */
  --color-hairline: rgba(63,211,216,.20);
  --color-hairline-soft: rgba(159,176,196,.18);

  /* --- Les neuf couleurs de l'ecosysteme, DESIGN.md §2 (tokens de projet)
     Une couleur par entite, revelee ou non. Le noir se lit par son cerne, pas
     par son aplat : sur ce fond, un aplat sombre n'existe pas. */
  --color-blanc: #F2F6FC;
  --color-noir: #333B52;
  --color-violet: #A98CFF;
  --color-bleu: #56A6FF;
  --color-vert: #6BDF8C;
  --color-jaune: #F2CF5B;
  --color-orange: #FF9F45;
  --color-rouge: #FF7A8A;
  --color-bleuvert: #21C9BC;

  /* --- Accents de brique, DESIGN.md §2 : alias sur les neuf couleurs ------- */
  --color-mileune: var(--color-bleuvert);
  --color-bidrasil: var(--color-bleu);
  --color-cdi: var(--color-orange);
  --color-jumpo: var(--color-rouge);
  --color-evopolis: var(--color-violet);

  /* --- Couleurs non couvertes par DESIGN.md : valeurs par défaut du socle
     conservées telles quelles (aucune valeur inventée). Non consommées par
     le CSS porté ici (classes .txtcolor-3/.txtcolor-4/.button/.avecInfoBulle
     hors périmètre §5). */
  --color-tertiary: #97b4ed;
  --color-4: #c2efd2;
  --color-button: #009688;
  --color-button-txt: #000000;
  --color-button-before: #97b4ed;
  --color-infobulle: #ffffff;
  --back-infobulle: #141414;
  --border-infobulle: var(--color-secondary);

  /* --- Liens — arbitrage ----------------------------------------------------
     `a`/`a:hover` dans base.php consomment `--color-a` / `--color-a-hover`,
     deux tokens qui NE font PAS partie de initDataRootCss() : chaque projet
     Drasil les pose lui-même via modifyTabRootCss() (voir Odhinn/views/legalView.php).
     Ils sont ajoutés ici selon la même logique. DESIGN.md §2 assigne
     explicitement --color-primary aux "traits, liens" : --color-a en reprend
     la valeur. --color-a-hover n'a pas de valeur dictée par DESIGN.md ;
     choix arbitré : éclaircir vers --color-txt au survol. */
  --color-a: var(--color-primary);
  --color-a-hover: var(--color-txt);

  /* --- Typographie — DESIGN.md §3 -------------------------------------------
     Barlow pour titres/sous-titres/corps ; Michroma réservé aux accents
     (kicker, catégories de pôle), jamais en paragraphe. */
  --font-title: 'Barlow', system-ui, sans-serif;
  --font-subtitle: 'Barlow', system-ui, sans-serif;
  --font-txt: 'Barlow', system-ui, sans-serif;
  --font-accent: 'Michroma', 'Barlow', sans-serif;

  /* --- fonth1/fonth/font-original : non couverts par DESIGN.md (pas utilisés
     par flex/gap/scroll/base porté ici) ; valeurs par défaut du socle
     conservées telles quelles. */
  --fonth1: cursive, monospace, sans-serif;
  --fonth: cursive, monospace, sans-serif;
  --font-original: cursive;

  /* --- Espacement — DESIGN.md §4 --------------------------------------------- */
  --padding-default: 16px;
  --padding-medium: 32px;
  --padding-large: 64px;
  --gap-default: 8px;
  --gap-medium: 16px;
  --gap-large: 48px;

  /* --- paddingzone-* / paddingbottomh : non couverts par DESIGN.md (pas
     utilisés par flex/gap/scroll/base porté ici) ; valeurs par défaut du
     socle conservées telles quelles. */
  --paddingzone-tb: 5vh;
  --paddingzone-lr: 2vw;
  --paddingbottomh: 2vh;

  /* --- Échelle de tailles — DESIGN.md §3 -------------------------------------- */
  --sizetxt: clamp(1rem, .96rem + .22vw, 1.14rem);
  --sizesmall: .86rem;
  --sizeh1: clamp(2.6rem, 6.6vw, 5rem);
  --sizeh2: clamp(1.9rem, 4vw, 3rem);
  --sizeh3: clamp(1.3rem, 2.2vw, 1.75rem);

  /* --- sizeh4/5/6, sizebtn/sizea : non couverts par DESIGN.md ; valeurs par
     défaut du socle conservées telles quelles. sizeh4 reste consommé par la
     règle h4 portée plus bas depuis base.php. */
  --sizeh4: 120%;
  --sizeh5: 100%;
  --sizeh6: 100%;
  --sizebtn: 20px;
  --sizea: var(--sizebtn);

  /* --- Rythme vertical de section — DESIGN.md §4 (token propre au projet) --- */
  --section-y: clamp(5.5rem, 12vh, 9rem);

  /* --- Échelle de z-index — DESIGN.md §8 (tokens propres au projet) --------- */
  --z-field: 0;
  --z-plate: 1;
  --z-content: 2;
  --z-nav: 10;
  --z-overlay: 40;
}


/* ==========================================================================
   FLEX — portage intégral et fidèle de Hugin/__vue/css/flex.php
   Aucune classe ajoutée, renommée ou supprimée.
   ========================================================================== */
/* FLEX */
.flex{ display: flex; margin: auto;}
.flexnoauto, .flx { display: flex;}
.flexligne{flex-flow: row wrap;}.flexwrap{flex-wrap: wrap;}.flexlignenowrap{flex-direction: row;}
.flexcolonne{flex-flow: column wrap;}.flexcolonnenowrap{flex-direction: column;}
.flexremplissage > div, .flexremplissage > form, .flexremplissage > li, .flexremplissage > a, .flexremplissage > label, .flexremplissage > p,.flexremplissage > section, .flexremplissage > aside, .flexremplissage > button, .flexremplissage > select, .flexremplissage > input { flex: 1 1 auto;}
.flexremplissageh > div, .flexremplissageh > form, .flexremplissageh > li, .flexremplissageh > a, .flexremplissageh > label, .flexremplissageh > p,.flexremplissageh > section, .flexremplissageh > aside {flex: 1 1 0;}
.flexinput > label { width : 30%; min-width: 400px;}.flexinput > .control {width: 70%; min-width: 400px;}
.flexauto > div{  margin: auto; }
.flexend{ justify-content: flex-end;}.flexcenter{justify-content: center;}.flexbetween{justify-content: space-between;}.flexaround{justify-content: space-around;}.flexeven{justify-content: space-evenly;}
.flexalignstart{ align-items: flex-start;}.flexalignend{align-items: flex-end;}.flexaligncenter{align-items: center;}
.flexcontentstart { align-content: flex-start; } .flexcontentbetween { align-content: space-between; }
.itemflexalignstart{align-self: flex-start;}.itemflexalignend{align-self: flex-end;}.itemflexaligncenter{align-self: center;}.itemflexremplissage{align-self: stretch;}
.flxi{ display: inline-flex;}
.flexnowrap{ flex-wrap: nowrap;}
.flexalignstretch{ align-items: stretch;}.flexcontentcenter{ align-content: center;}
.itemflx1{ flex: 1 1 auto;}.itemflx1h{ flex: 1 1 0;}.itemflxnone{ flex: none;}
/* FIN FLEX */


/* ==========================================================================
   BASE GAP — portage intégral et fidèle de Hugin/__vue/css/gap.php
   Media queries (830px, 570px) conservées à l'identique.
   ========================================================================== */
/* BASE GAP */
.margin5px { margin: 5px; } .margin10px { margin: 10px; } .margin15px { margin: 15px; } .margin20px { margin: 20px; }
.margintb15px { margin: 15px 0; } .margintb20px { margin: 20px 0; } .margintb30px { margin: 30px 0; }
.marginl0 { margin-left: 0; } .marginl5px { margin-left: 5px; } .marginl5 { margin-left: 5vw; }
.marginr0 { margin-right: 0; } .marginr5px { margin-right: 5px; } .marginr5 { margin-right: 5vw; }
.margint10px { margin-top: 10px; } .margint20px { margin-top: 20px; } .margint30px { margin-top: 30px; } .margint50px { margin-top: 50px; } .margint100px { margin-top: 100px; } .margint10vh { margin-top: 10vh; }
.margint10pxN { margin-top: -10px; } .margint20pxN { margin-top: -20px; }
.marginb15px { margin-bottom: 15px; } .marginb30px { margin-bottom: 30px; } .marginb5vh { margin-bottom: 5vh; } .marginb10vh { margin-bottom: 10vh; }
.paddinglr { padding-left: var(--padding-default); padding-right: var(--padding-default); } .paddingtb { padding-top: var(--padding-default); padding-bottom: var(--padding-default); }
.paddinglrmedium { padding-left: var(--padding-medium); padding-right: var(--padding-medium); } .paddingtbmedium { padding-top: var(--padding-medium); padding-bottom: var(--padding-medium); }
.paddinglrlarge { padding-left: var(--padding-large); padding-right: var(--padding-large); } .paddingtblarge { padding-top: var(--padding-large); padding-bottom: var(--padding-large); }
.gap { gap: var(--gap-default); } .gapmedium { gap: var(--gap-medium); } .gaplarge { gap: var(--gap-large); }
.padding15px { padding: 15px; }
.paddingfull5 { padding: 5vh 5vw; } .padding15px0{ padding: 15px 0; } .paddingb10vh { padding: 0 0 10vh 0; }
.padding5vh { padding: 5vh 0; } .padding10vh { padding: 10vh 0; } .padding20vh { padding: 20vh 0; } .paddingCard { padding: 10px 2%; }
.paddinglr5 { padding-left: 5vw; padding-right: 5vw; }
.paddingl30px { padding-left: 30px; } .paddingr30px { padding-right: 30px; }
.paddingb5vh { padding-bottom: 5vh; } .paddingb15vh { padding-bottom: 15vh; } .paddingb20vh { padding-bottom: 20vh; } .paddingb40vh { padding-bottom: 40vh; }

@media (max-width: 830px){
.paddinglr5 { padding-left: 3vw; padding-right: 3vw; }
.paddingb5vh { padding-bottom: 3vh; }
}
@media (max-width: 570px){
.paddinglr5 { padding-left: 15px; padding-right: 15px; }
.paddinglrlarge { padding-left: 4vw; padding-right: 4vw; }
}
/* FIN BASE GAP */


/* ==========================================================================
   GESTION SCROLL — portage intégral et fidèle de Hugin/__vue/css/scroll.php
   Couleurs de scrollbar laissées en var(--...) comme dans la source.
   ========================================================================== */
/* GESTION SCROLL  */
.scroll::-webkit-scrollbar { height: 12px; background-color: var(--color-secondary); border-radius: 10px;}
.scroll::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: var(--color-secondary); }
.scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: var(--color-secondary); }
html::-webkit-scrollbar { height: 12px; }
html::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1); background-color: var(--color-secondary); }
html::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 15px rgba(252, 243, 243, 0.80); background-color: #c9c2c2; }
/* FIN SCROLL */


/* ==========================================================================
   BASE (extrait) — portage sélectif de Hugin/__vue/css/base.php
   --------------------------------------------------------------------------
   Repris : reset, typographie de base (body/a/input/h1..h6), a/a:hover,
   suppression des puces, et les utilitaires listés dans DESIGN.md §9
   (.bold, .italic, .justify, .txtright, .txtcenter, .sizesmall,
   .overflowhidden, .overflowyauto, .overflowxauto, .maxw400px, .maxw1200, .w100, .shadow).

   ÉCARTÉ (composants applicatifs, hors périmètre d'une page vitrine
   statique — voir rapport de portage) : #debug, .navtop, .glide__arrows,
   .imgPlay, #page_PRIVATEACCESS, .has-text-danger, .formMsgEnd,
   #mailOk/#msgOk/#mailErreur/#msgErreur/#mailNOk/#msgNOk/#msgInfo +
   @keyframes messageEphemere, .inactive, .zerodebordement, .invisibleHr,
   br{width:100%}, .inputImgDash2, .button(.is-*), .etiquette*, .fa-brands,
   toutes les classes de dimension .h*/.w10..w90/.w*px/.minw*/.maxw30px/
   .maxw250px/.maxw300px/.maxw550px/.maxw900/.height0/.minh*, les media
   queries de taille de titre à 800px/570px, la variante 830px des classes
   .w30/.w40/.w50/.w60, .hero-left/.hero-right, .margina, .txtleft/
   .textalignl/.textalignr/.txt-center (alias non repris, voir rapport),
   .txtblack/.txtwhite/.txtcolor-*, .autosautligne, .infobulle/.avecInfoBulle, .sexyrow, .border-gradient(+
   ::before/::after), .faqDiv, details.dtoggle(+ summary + > p),
   details::marker, .footer, .cartPreview/.arrowReturn/.iArrowReturn, et tout
   le bloc "HELPERS UI GENERIQUES" (.clt-modal*, .clt-btn*, .clt-toast*,
   @keyframes clt-fade-in/clt-slide-up).
   ========================================================================== */
/* BASE (extrait) */
html { height: 100%; font-size: 100%; background: var(--background-color); overflow-x: hidden; }
body, a, input, h3, h4, h5, h6 { font-family: var(--font-txt); color: var(--color-txt); }
*:not(u):not(summary) { position: relative; list-style: none; }
a { text-decoration: none; color: var(--color-a); }
a:hover { color: var(--color-a-hover); }
*, *::before, *::after { box-sizing: inherit; margin:0; padding:0; }
input { color: var(--color-txt-secondary); min-height: 25px; line-height: 1.5; border-radius: 4px; } input, textarea { padding: 5px 7px; }
h1 { font-family: var(--font-title); font-size: var(--sizeh1); } h2 { font-family: var(--font-subtitle); font-size: var(--sizeh2); } h3 { font-family: var(--font-subtitle); font-size: var(--sizeh3); }
h4 { font-weight: bold; font-size: var(--sizeh4); } p, span { font-size: var(--sizetxt); }

/* --------------------------------------------------------------------------
   PIÈGE DRASIL N°2 — centrage forcé des titres sous 1400px (+ variante 830px)
   --------------------------------------------------------------------------
   base.php force le centrage de h1/h2/h3 sous 1400px (et re-centre h1/h2/h3
   sous 830px, dans le bloc des classes .w30/.w40/.w50/.w60). Sous 1400px,
   c'est la quasi-totalité des écrans réels : un titre pensé aligné à gauche
   part au centre. On reproduit la règle du socle telle quelle (fidélité au
   futur rendu Drasil), PUIS on la neutralise juste après avec un sélecteur
   plus spécifique (deux composants), portée à `main` et au h2 du footer de
   page (`.ecs-footer`) : la page reprend la main sur l'alignement de ses
   propres titres sans toucher au socle. */
@media (max-width: 1400px){ h1, h2, h3 { text-align: center; padding-left: 2vw; padding-right: 2vw; } }
@media (max-width: 830px){ h1, h2, h3 { text-align: center; } }

@media (max-width: 1400px){ main h1, main h2, main h3, .ecs-footer h2 { text-align: inherit; padding-left: 0; padding-right: 0; } }
@media (max-width: 830px){ main h1, main h2, main h3, .ecs-footer h2 { text-align: inherit; } }

/* --- Utilitaires (DESIGN.md §9) ------------------------------------------- */
.bold { font-weight: bold; } .italic { font-style: italic; }
.justify { text-align: justify; text-justify: auto; }
.txtright { text-align: right; }
.txtcenter { text-align: center; }
.sizesmall { font-size: var(--sizesmall); }
.overflowhidden { overflow: hidden; } .overflowyauto { overflow-y: auto; } .overflowxauto { overflow-x: auto; }
.maxw400px { max-width: 400px; } @media (max-width: 450px){ .maxw400px { max-width: 90%; } }
.maxw1200 { max-width: 1200px; } @media (max-width: 1240px){ .maxw1200 { width: 92vw; max-width: 92vw; } }
.w100 { width: 100%; }
.shadow { box-shadow: 0px 5px 15px black; }
/* FIN BASE (extrait) */