/* ======================================================================
   LIVRE DE POLICE - pages publiques, version mobile autonome

   Cette feuille est volontairement inactive sur ordinateur. Elle est
   chargee apres site.css afin que les pages interieures restent visibles
   lorsque la version mobile dediee de l'accueil masque sa scene bureau.
   ====================================================================== */

/* L'accueil possède sa propre scène mobile. Ses règles masquent volontairement
   la scène bureau sur téléphone ; une page intérieure n'a pas cette seconde
   scène et doit donc conserver son contenu principal. */
@media (max-width:767px), (max-width:899px) and (max-height:560px){
  .site-page .viewport-shell{display:block!important}
}

/* Le palier 899 px est celui qu'utilise déjà la navigation publique. Toutes
   les adaptations ci-dessous restent donc strictement cantonnées au mobile et
   à la tablette ; aucun style bureau n'est redéfini. */
@media (max-width:899px){
  /* ENYTRACK possède sa propre charte mobile, calée sur l'accueil réellement
     servi : Inter, encre marine, bleu franc, surfaces bleu très clair. Les
     variables ne sont redéfinies que sous 900 px ; le site ordinateur garde
     donc exactement ses styles historiques. */
  .site-page--enytrack{
    --navy:#04163f;
    --navy-2:#0a35d9;
    --navy-3:#0c4cff;
    --ink:#07133a;
    --muted:#52617d;
    --faint:#6e7fa1;
    --red:#0c4cff;
    --red-d:#0a35d9;
    --line:#dce6fb;
    --line-2:#e8eefb;
    --panel:#eef4ff;
    --panel-2:#f5f8ff;
    --r:22px;
    --r-s:14px;
    --shadow:0 24px 70px rgba(18,54,130,.14);
    --shadow-s:0 10px 34px rgba(20,55,128,.08);
    --fd:Inter,"Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --fb:Inter,"Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
  }
  .site-page--enytrack h1,
  .site-page--enytrack h2,
  .site-page--enytrack h3{
    font-family:var(--fb);
    font-optical-sizing:normal;
    font-weight:800;
    letter-spacing:-.025em;
  }
  .site-page--enytrack .btn-primary{
    background:#0c4cff;
    box-shadow:0 12px 28px rgba(12,76,255,.24);
  }
  .site-page--enytrack .btn-primary:hover,
  .site-page--enytrack .btn-primary:focus-visible{
    background:#0a35d9;
  }
  .site-page--enytrack .btn-outline{
    border-color:#0c4cff;
    background:#fff;
    color:#0c4cff;
  }
  .site-page--enytrack .btn-outline:hover,
  .site-page--enytrack .btn-outline:focus-visible{
    background:#eef4ff;
  }
  .site-page--enytrack .pg-hero h1::after{
    border:0;
    background:linear-gradient(90deg,#0c4cff,#14d9d0);
    box-shadow:0 6px 18px rgba(12,76,255,.2);
  }
  .site-page--enytrack .pg-card,
  .site-page--enytrack .pg-auth-card,
  .site-page--enytrack .pg-price,
  .site-page--enytrack .pg-faq details{
    border-color:#dce6fb;
  }
  .site-page--enytrack .pg-card-icon--red,
  .site-page--enytrack .pg-pill--red{
    border-color:#dce6fb;
    background:#eef4ff;
    color:#0c4cff;
  }
  .site-page--enytrack .pg-steps li::before{
    background:#0c4cff;
    box-shadow:0 9px 22px rgba(12,76,255,.22);
  }
  .site-page--enytrack .pg-field input:focus,
  .site-page--enytrack .pg-field select:focus,
  .site-page--enytrack .pg-field textarea:focus,
  .site-page--enytrack .pg-input:focus{
    border-color:#0c4cff;
    box-shadow:0 0 0 4px rgba(12,76,255,.14);
  }

  /* Les pages de compte deviennent le prolongement visuel de l'accueil, sans
     toucher à leurs champs, validations ou scripts métier. */
  .site-page--enytrack.page-auth .pg-auth-main{
    background:radial-gradient(760px 440px at 10% 0,rgba(12,76,255,.12),transparent 68%),radial-gradient(680px 440px at 100% 18%,rgba(20,217,208,.08),transparent 72%),#f5f8ff;
  }
  .site-page--enytrack.page-auth .pg-auth-card{
    box-shadow:0 24px 70px rgba(18,54,130,.12);
  }
  .site-page--enytrack.page-auth .pg-auth-story{
    border-radius:22px;
    background:linear-gradient(145deg,#04163f 0%,#08318a 58%,#0c4cff 100%);
    box-shadow:0 24px 64px rgba(4,22,63,.24);
  }
  .site-page--enytrack.page-auth .pg-auth-story .eyebrow{
    color:#a9c4ff;
  }
  .site-page--enytrack.page-auth .pg-auth-story h2{
    color:#fff;
  }
  .site-page--enytrack.page-auth .pg-auth-head h1{
    color:#04163f;
    font-weight:850;
  }

  /* Rouge sémantique : les erreurs restent immédiatement reconnaissables,
     même si l'ancien rouge décoratif est devenu le bleu de marque. */
  .site-page--enytrack .pg-field input[aria-invalid="true"],
  .site-page--enytrack .pg-field .is-invalid{
    border-color:#e65050;
  }
  .site-page--enytrack .pg-error{
    color:#b4232f;
  }
  .site-page--enytrack .pg-flash--error{
    border-color:#f6cacc;
    border-left-color:#e65050;
    background:#fff3f3;
  }
  .site-page--enytrack .pg-flash--error>svg{
    color:#e65050;
  }
  .site-page--enytrack .pg-callout--warn{
    border-color:#f6cacc;
    border-left-color:#e65050;
    background:#fff3f3;
  }
  .site-page--enytrack .pg-callout--warn>svg{
    color:#e65050;
  }

  /* /securite possède une feuille éditoriale embarquée. Ces sélecteurs plus
     précis remplacent uniquement sa présentation mobile rouge/Fraunces. */
  body.site-page--enytrack .secx{
    --marine:#04163f;
    --marine2:#0a35d9;
    --bleu:#0c4cff;
    --rouge:#0c4cff;
    --rouge-vif:#14d9d0;
    --creme:#f5f8ff;
    --ink:#07133a;
    --ardoise:#52617d;
    --ardoise2:#6e7fa1;
    --line:#dce6fb;
  }
  body.site-page--enytrack .secx h1,
  body.site-page--enytrack .secx h2,
  body.site-page--enytrack .secx h3,
  body.site-page--enytrack .secx-proof .ph .t,
  body.site-page--enytrack .secx-num{
    font-family:Inter,"Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-style:normal;
    font-weight:800;
    letter-spacing:-.025em;
  }
  body.site-page--enytrack .secx .eyebrow{
    color:#0c4cff;
    font-family:Inter,"Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  body.site-page--enytrack .secx-hero h1 em{
    color:#0c4cff!important;
    -webkit-text-fill-color:#0c4cff;
    font-style:normal;
  }
  body.site-page--enytrack .secx .tri i:nth-child(1){background:#04163f}
  body.site-page--enytrack .secx .tri i:nth-child(2){background:#0c4cff}
  body.site-page--enytrack .secx .tri i:nth-child(3){background:#14d9d0}
  body.site-page--enytrack .secx-proof .band,
  body.site-page--enytrack .secx-num::after{
    background:linear-gradient(90deg,#04163f 0%,#0c4cff 58%,#14d9d0 100%);
  }
  body.site-page--enytrack .secx-levels::before{
    background:linear-gradient(180deg,#0c4cff,#14d9d0);
  }
  body.site-page--enytrack .secx-levels h2 em{
    color:#8cf4ee!important;
    -webkit-text-fill-color:#8cf4ee;
    font-style:normal;
  }
  body.site-page--enytrack .secx-btn-r{
    background:#0c4cff;
    box-shadow:0 12px 28px rgba(12,76,255,.24);
  }

  .site-page #stage,
  .site-page .viewport-shell,
  .site-page .pg-main,
  .site-page main,
  .site-page section,
  .site-page article,
  .site-page figure,
  .site-page form,
  .site-page fieldset{
    min-width:0;
    max-width:100%;
  }

  .site-page .pg-wrap,
  .site-page .dcx-wrap{
    width:100%;
    padding-left:max(18px,env(safe-area-inset-left,0px));
    padding-right:max(18px,env(safe-area-inset-right,0px));
  }

  /* Les introductions constituent un vrai écran d'accueil de chaque page :
     titre, promesse et actions partagent le même axe visuel. Les textes longs,
     listes et contenus métier restent alignés à gauche pour être lisibles. */
  .site-page .pg-hero--split>div:first-child,
  .site-page .pg-hero-copy,
  .site-page .pg-section-head{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .site-page .pg-hero-lead,
  .site-page .pg-section-head .lead{
    margin-left:auto;
    margin-right:auto;
  }
  .site-page .pg-hero-actions,
  .site-page .pg-hero-note{
    justify-content:center;
  }
  .site-page .pg-hero-note{
    text-align:center;
  }
  .site-page--enytrack .pg-crumbs a{
    display:inline-flex;
    min-width:44px;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:6px 2px;
    box-sizing:border-box;
  }
  .site-page .pg-flash-close{
    display:inline-grid;
    flex:0 0 44px;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    place-items:center;
  }

  /* Aucun mot technique, URL ou identifiant ne doit élargir le document. */
  .site-page main,
  .site-page .pg-card,
  .site-page .pg-prose,
  .site-page .pg-callout,
  .site-page .pg-faq,
  .site-page .dcx{
    overflow-wrap:anywhere;
  }
  .site-page pre{
    max-width:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .site-page img,
  .site-page video,
  .site-page canvas,
  .site-page svg{
    max-width:100%;
  }

  /* Les tableaux publics deviennent de vrais tableaux reflués. Le précédent
     défilement horizontal cachait la première colonne après un geste latéral,
     ce qui rendait la comparaison incompréhensible sur téléphone. */
  .site-page .pg-table-wrap{
    width:100%;
    max-width:100%;
    overflow:visible!important;
    overscroll-behavior:auto;
  }
  .site-page .pg-table-wrap table,
  .site-page .pg-prose table,
  .site-page table.pg-compare,
  .site-page .pg-legal .lz-table{
    display:table!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed;
    overflow:visible!important;
  }
  .site-page .pg-prose th,
  .site-page .pg-prose td,
  .site-page table.pg-compare th,
  .site-page table.pg-compare td,
  .site-page .pg-legal .lz-table th,
  .site-page .pg-legal .lz-table td{
    min-width:0!important;
    padding:10px 8px!important;
    font-size:clamp(11.5px,3.15vw,13.5px)!important;
    line-height:1.42!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
    vertical-align:top;
  }
  .site-page table.pg-compare th:first-child,
  .site-page table.pg-compare td:first-child{
    width:40%;
  }
  .site-page table.pg-compare th:not(:first-child),
  .site-page table.pg-compare td:not(:first-child){
    width:30%;
  }

  /* La page du dossier possède son propre vocabulaire graphique. On le garde,
     mais son hero et ses appels à l'action suivent l'axe central du site. */
  .site-page .dcx-hero-grid>div:first-child,
  .site-page .dcx-dl-grid>div:first-child{
    text-align:center;
  }
  .site-page .dcx-hero h1,
  .site-page .dcx-hero .lead,
  .site-page .dcx-dl p,
  .site-page .dcx-sec>.dcx-wrap>.intro{
    margin-left:auto;
    margin-right:auto;
  }
  .site-page .dcx-hero .tri{
    display:flex;
    margin-left:auto;
    margin-right:auto;
  }
  .site-page .dcx-meta{
    justify-content:center;
  }
  .site-page .dcx-sec>.dcx-wrap>.eyebrow,
  .site-page .dcx-sec>.dcx-wrap>h2,
  .site-page .dcx-sec>.dcx-wrap>.intro{
    text-align:center;
  }
  .site-page .dcx-btn{
    width:100%;
    min-height:48px;
    justify-content:center;
    text-align:center;
  }

  /* Les liens qui se comportent comme des commandes gardent une vraie zone
     tactile. Les liens éditoriaux au fil d'un paragraphe restent, eux,
     naturellement intégrés au texte. */
  .site-page.page-auth .pg-check{
    min-height:44px;
    align-items:center;
  }
  .site-page.page-auth .auth-link,
  .site-page.page-auth .pg-auth-alt>a,
  .site-page .pg-pills .pg-pill{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 6px;
    box-sizing:border-box;
  }

  /* ENYTRACK : le menu ouvert devient un panneau mobile compose de vraies
     cartes tactiles centrees. La navigation ne ressemble plus a une liste
     bureau alignee a gauche dans un grand ecran vide. */
  .site-page--enytrack .nav.is-open{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:center;
    gap:12px;
    padding:clamp(24px,6vw,44px) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    background:radial-gradient(circle at 50% 12%,rgba(37,92,255,.1),transparent 34%),linear-gradient(180deg,#f7f9ff 0%,#fff 68%);
  }
  .site-page--enytrack .nav.is-open a{
    display:flex;
    min-width:0;
    min-height:58px;
    align-items:center;
    justify-content:center;
    padding:12px 10px;
    border:1px solid #d8e3fa;
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 24px rgba(20,55,128,.07);
    color:var(--navy);
    font-weight:700;
    line-height:1.25;
    text-align:center;
  }
  .site-page--enytrack .nav.is-open a::after{
    display:none;
  }
  .site-page--enytrack .nav.is-open a:hover,
  .site-page--enytrack .nav.is-open a:focus-visible,
  .site-page--enytrack .nav.is-open a.is-active,
  .site-page--enytrack .nav.is-open a[aria-current="page"]{
    border-color:#9ab7f5;
    background:#eef4ff;
    color:#255cff;
  }
}

@media (max-width:899px) and (max-height:600px){
  .site-page--enytrack .nav.is-open{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:center;
    padding-top:12px;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  .site-page--enytrack .nav.is-open a{
    min-height:44px;
    padding:8px 6px;
  }
}

@media (max-width:620px){
  .site-page .pg-section{
    padding-top:40px;
    padding-bottom:40px;
  }
  .site-page .pg-card,
  .site-page .pg-cta,
  .site-page .pg-callout{
    padding-left:18px;
    padding-right:18px;
  }
  .site-page .pg-hero-actions{
    width:100%;
  }
  .site-page .pg-hero-actions .btn{
    min-height:48px;
  }
  .site-page .dcx-dl{
    padding-left:20px;
    padding-right:20px;
  }
  .site-page .dcx-meta span{
    justify-content:center;
  }
}

/* Sous 480 px, les tableaux éditoriaux munis de libellés deviennent des
   fiches structurées. Chaque valeur reste associée à son en-tête : on évite
   les colonnes de quelques lettres sans transformer le contenu en liste
   ambiguë. La table tarifaire, conçue pour la comparaison côte à côte, garde
   volontairement sa grille à trois colonnes. */
@media (max-width:480px){
  /* La grille du dossier impose 300 px par carte sur ordinateur. Dans la
     colonne utile d'un téléphone de 320 px, cette largeur rognait 8 px à
     droite : la piste et ses cartes suivent désormais la largeur disponible. */
  .site-page .dcx-ctrl{
    grid-template-columns:minmax(0,1fr);
  }
  .site-page .dcx-ctrl>li{
    width:auto;
    min-width:0;
    max-width:100%;
  }

  .site-page.page-seo .pg-prose table:has(td[data-label]),
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child){
    display:block!important;
    width:100%!important;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .site-page.page-seo .pg-prose table:has(td[data-label]) thead,
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  .site-page.page-seo .pg-prose table:has(td[data-label]) tbody,
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) tbody{
    display:grid;
    gap:14px;
    width:100%;
  }
  .site-page.page-seo .pg-prose table:has(td[data-label]) tr,
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) tr{
    display:grid;
    width:100%;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-s);
    background:#fff;
    box-shadow:var(--shadow-s);
  }
  .site-page.page-seo .pg-prose table:has(td[data-label]) td,
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) td{
    display:grid!important;
    grid-template-columns:minmax(84px,36%) minmax(0,1fr);
    gap:12px;
    width:100%!important;
    padding:11px 13px!important;
    border:0!important;
    border-top:1px solid var(--line-2)!important;
    background:#fff!important;
    font-size:13px!important;
    line-height:1.5!important;
  }
  .site-page.page-seo .pg-prose table:has(td[data-label]) td:first-child,
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) td:first-child{
    border-top:0!important;
  }
  .site-page.page-seo .pg-prose table:has(td[data-label]) td::before,
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) td::before{
    color:var(--navy);
    font-size:11.5px;
    font-weight:800;
    line-height:1.35;
    overflow-wrap:normal;
  }
  .site-page.page-seo .pg-prose table:has(td[data-label]) td::before{
    content:attr(data-label);
  }
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) td:nth-child(1)::before{content:"Cookie"}
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) td:nth-child(2)::before{content:"Utilité"}
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) td:nth-child(3)::before{content:"Durée"}
  .site-page.page-legal .pg-table-wrap table:has(thead tr>th:nth-child(4):last-child) td:nth-child(4)::before{content:"Consentement"}
}

@media (max-width:359px){
  /* La confirmation d'un lien magique est une action unique : son libellé
     reste lisible d'un seul regard, même sur un écran de 320 px. */
  .site-page.page-auth .login-link-confirm-btn{
    padding-left:12px;
    padding-right:12px;
    font-size:14px;
    white-space:nowrap;
  }
  .site-page:not(.page-auth) .pg-hero h1{
    font-size:29px;
    line-height:1.08;
  }
  .site-page .pg-wrap,
  .site-page .dcx-wrap{
    padding-left:max(14px,env(safe-area-inset-left,0px));
    padding-right:max(14px,env(safe-area-inset-right,0px));
  }
  .site-page .pg-prose th,
  .site-page .pg-prose td,
  .site-page table.pg-compare th,
  .site-page table.pg-compare td,
  .site-page .pg-legal .lz-table th,
  .site-page .pg-legal .lz-table td{
    padding:8px 5px!important;
    font-size:11px!important;
  }
}