/* IKEPIA — écran de maintenance / pré-lancement du site public.
   Chargé sur les 4 pages publiques (accueil, blog, formations, mentions
   légales) aux côtés de assets/site-gate.js. Indépendant du thème clair/
   sombre choisi par le visiteur : toujours la même identité, pour un écran
   qui doit rester lisible et rassurant en toutes circonstances. */

/* Visible par défaut, dès le tout premier rendu de la page (avant même que
   le JavaScript ne s'exécute) : c'est ce qui évite qu'on aperçoive une
   fraction de seconde le site public derrière l'écran de maintenance/
   pré-lancement. C'est le script (site-gate.js) qui la fait disparaître
   (en douceur) une fois qu'il a déterminé qu'elle n'est pas nécessaire —
   jamais l'inverse. */
.ikepia-gate{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center;
  background:#0E1130; color:#F5F2EC;
  font-family:var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  opacity:1; visibility:visible;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.1s;
  overflow:hidden;
}
.ikepia-gate[hidden]{ display:none; }
.ikepia-gate.is-leaving{ opacity:0; visibility:hidden; }
html.ikepia-gate-lock, html.ikepia-gate-lock body{ overflow:hidden; }

.ikepia-gate-glow{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, rgba(185,111,62,.28), transparent 60%),
    radial-gradient(42vmax 42vmax at 84% 78%, rgba(174,184,245,.16), transparent 62%),
    radial-gradient(60vmax 60vmax at 50% 100%, rgba(36,45,92,.55), transparent 70%);
  filter:blur(6px);
  animation:ikepia-gate-drift 22s ease-in-out infinite alternate;
}
@keyframes ikepia-gate-drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-2.5%,2%,0) scale(1.08); }
}

.ikepia-gate-canvas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:.8; }

.ikepia-gate-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:32px; max-width:1200px; max-height:100%; overflow-y:auto;
}

.ikepia-gate-logo{
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; row-gap:12px; gap:30px;
}
.ikepia-gate-mark{ width:283px; height:283px; flex-shrink:0; --indigo:#AEB8F5; --slate:#F5F2EC; --copper-bright:#E0995F; }
/* Dessin d'entrée (une fois), suivi d'une respiration continue très discrète
   (opacité) qui prend le relais dès que le trait est complètement dessiné —
   c'est ce qui fait que le logo reste "vivant" au lieu de se figer. Le délai
   du second passage correspond à la durée + au délai du premier, ligne par
   ligne, pour que la respiration démarre exactement où le dessin s'arrête. */
.ikepia-gate-mark line{
  animation:
    ikepia-gate-mark-in .9s cubic-bezier(.2,.7,.3,1) both,
    ikepia-gate-mark-breathe 2.6s ease-in-out infinite;
  animation-delay: 0s, .9s;
}
.ikepia-gate-mark line:nth-child(2){ animation-delay:.08s, .98s; }
.ikepia-gate-mark line:nth-child(3){ animation-delay:.16s, 1.06s; }
.ikepia-gate-mark line:nth-child(4){ animation-delay:.26s, 1.16s; }
@keyframes ikepia-gate-mark-in{ from{ opacity:0; stroke-dashoffset:60; } to{ opacity:1; stroke-dashoffset:0; } }
@keyframes ikepia-gate-mark-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.ikepia-gate-word{
  font-family:var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight:800; letter-spacing:.02em;
  font-size:clamp(93px, 11.1vw, 185px);
  line-height:1;
}

@media (max-width:640px){
  .ikepia-gate-logo{ gap:14px; }
  .ikepia-gate-mark{ width:clamp(70px, 22vw, 140px); height:clamp(70px, 22vw, 140px); }
  .ikepia-gate-word{ font-size:clamp(40px, 15vw, 66px); }
  .ikepia-gate-badge{ font-size:clamp(12px, 3.4vw, 16px); gap:8px; }
  .ikepia-gate-badge-dot{ width:8px; height:8px; }
}

.ikepia-gate-badge{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-mono, ui-monospace, monospace); font-size:16px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#E0995F; margin-top:22px;
}
.ikepia-gate-badge[hidden]{ display:none; }
.ikepia-gate-badge-dot{ width:10px; height:10px; border-radius:50%; background:#E0995F; animation:ikepia-gate-pulse 1.8s ease-in-out infinite; }
@keyframes ikepia-gate-pulse{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.15); } }

.ikepia-gate-rich{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:18px; }
.ikepia-gate-rich[hidden]{ display:none; }
/* Le grand logo desktop a une importante réserve d'espace interne (son
   icône et son texte sont bien plus petits que la hauteur de leur boîte) :
   sans cette marge négative, l'écart avec le bloc de texte qui suit
   paraîtrait deux fois trop grand. Sur mobile, où le logo est nettement
   plus petit, une marge positive normale convient. */
@media (min-width:641px){
  .ikepia-gate-rich{ margin-top:-18px; }
}
.ikepia-gate-headline{
  font-family:var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight:800; font-size:clamp(19px, 2.7vw, 27px); line-height:1.3;
  margin:0; text-wrap:balance; color:#F5F2EC; max-width:820px;
}
.ikepia-gate-sub{
  margin:8px 0 0; font-size:18px; line-height:1.5; color:#C4C9EF;
  text-wrap:pretty; max-width:560px;
}
.ikepia-gate-tags{
  margin:20px 0 0; font-family:var(--font-mono, ui-monospace, monospace); font-size:13px;
  letter-spacing:.03em; color:#8D93C6; text-wrap:balance; max-width:760px;
}
.ikepia-gate-tags .sep{ color:#E0995F; margin:0 8px; }

.ikepia-gate-text{
  margin-top:100px; font-size:16px; line-height:1.6; color:#C4C9EF; text-wrap:balance;
}

.ikepia-gate-cta{
  margin-top:26px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono, ui-monospace, monospace); font-size:13px; font-weight:600; letter-spacing:.05em;
  padding:14px 30px; border-radius:30px; border:none; cursor:pointer;
  background:#E0995F; color:#1C2340;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.ikepia-gate-cta[hidden]{ display:none; }
.ikepia-gate-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(224,153,95,.55); }

.ikepia-gate-countdown{ display:flex; gap:14px; margin-top:30px; }
.ikepia-gate-countdown[hidden]{ display:none; }
.ikepia-gate-unit{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:60px; padding:12px 8px; border-radius:12px;
  background:rgba(245,242,236,.06); border:1px solid rgba(245,242,236,.12);
}
.ikepia-gate-unit span{
  font-family:var(--font-mono, ui-monospace, monospace); font-variant-numeric:tabular-nums;
  font-size:clamp(22px, 4.4vw, 30px); font-weight:600; line-height:1;
}
.ikepia-gate-unit small{
  font-family:var(--font-mono, ui-monospace, monospace); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#8D93C6;
}

@media (max-width:460px){
  .ikepia-gate-countdown{ gap:8px; }
  .ikepia-gate-unit{ min-width:50px; padding:10px 6px; }
}

@media (prefers-reduced-motion: reduce){
  .ikepia-gate{ transition:opacity .01s linear; }
  .ikepia-gate-glow{ animation:none; }
  .ikepia-gate-badge-dot{ animation:none; }
  .ikepia-gate-mark line{ animation:none; opacity:1; }
}

/* ---- formulaire de contact en pop-up : exactement le même formulaire que
   la section "Nous contacter" du site public (voir #contact sur la page
   d'accueil) — mêmes champs, même sélecteur d'indicatif téléphonique avec
   drapeaux (assets/flags.svg), mêmes classes CSS, pour une identité et un
   comportement strictement identiques. Uniquement les identifiants (id=...)
   diffèrent, préfixés "ikepiaGate", pour cohabiter sans collision avec le
   formulaire réel de la page d'accueil. Voir assets/site-gate.js. ---- */
.ikepia-gate-modal-backdrop{
  position:fixed; inset:0; z-index:2147483001;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(8,10,26,.72); backdrop-filter:blur(4px);
}
.ikepia-gate-modal-backdrop[hidden]{ display:none; }

.ikepia-gate-modal{
  position:relative; width:100%; max-width:1040px; max-height:90vh; overflow-y:auto;
  background:var(--bg); color:var(--text); border-radius:18px; padding:36px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  font-family:var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  text-align:left;
}
.ikepia-gate-modal h2{
  font-family:var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size:23px; font-weight:800; margin:0 0 6px;
}
.ikepia-gate-modal-lede{ font-size:14px; color:var(--text-muted); margin:0 0 26px; line-height:1.5; max-width:56ch; }

.ikepia-gate-modal-close{
  position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border-strong); background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ikepia-gate-modal-close svg{ width:15px; height:15px; }
.ikepia-gate-modal-close:hover{ background:var(--surface-2); }

@media (max-width:480px){
  .ikepia-gate-modal{ padding:24px 18px; border-radius:14px; }
}

/* ---- Champs et mise en page : copie exacte de .contact-grid / .form-card
   (voir la section #contact de la page d'accueil) ---- */
.ikepia-gate-modal .contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start;}
@media (max-width:820px){.ikepia-gate-modal .contact-grid{grid-template-columns:1fr; gap:32px;}}
.ikepia-gate-modal .contact-info{display:flex; flex-direction:column; gap:22px;}
.ikepia-gate-modal .contact-info-item{display:flex; gap:14px; align-items:flex-start;}
.ikepia-gate-modal .contact-info-item .ic{width:38px; height:38px; border-radius:9px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ikepia-gate-modal .contact-info-item .ic svg{width:17px; height:17px; color:var(--copper);}
.ikepia-gate-modal .contact-info-item h4{font-size:14.5px; font-family:var(--font-display); font-weight:800;}
.ikepia-gate-modal .contact-info-item p, .ikepia-gate-modal .contact-info-item a{margin-top:4px; font-size:13.5px; color:var(--text-muted); display:block;}
.ikepia-gate-modal .contact-info-item a:hover{color:var(--copper);}

.ikepia-gate-modal .form-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px; box-shadow:var(--shadow);}
#ikepiaGateFormFields{display:flex; flex-direction:column; gap:16px;}
.ikepia-gate-modal .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
@media (max-width:560px){.ikepia-gate-modal .form-row{grid-template-columns:1fr;}}
.ikepia-gate-modal .field{display:flex; flex-direction:column; gap:7px;}
.ikepia-gate-modal .field label{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft);}
.ikepia-gate-modal .field .required-mark{color:var(--text-muted); font-weight:400; font-size:.6em; vertical-align:super; line-height:0; margin-left:3px;}
.ikepia-gate-modal .field input, .ikepia-gate-modal .field select, .ikepia-gate-modal .field textarea{padding:12px 14px; border-radius:8px; border:1px solid var(--border-strong); background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:14.5px;}
.ikepia-gate-modal .field input:focus, .ikepia-gate-modal .field select:focus, .ikepia-gate-modal .field textarea:focus{outline:2px solid var(--copper); outline-offset:1px;}
.ikepia-gate-modal .field textarea{resize:vertical; min-height:110px;}
.ikepia-gate-modal .phone-row{display:flex; align-items:stretch; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg); position:relative;}
.ikepia-gate-modal .phone-row:focus-within{outline:2px solid var(--copper); outline-offset:1px;}
.ikepia-gate-modal .phone-row input#ikepiaGatePhone{flex:1; min-width:0; border:none; background:none; border-radius:0; padding:12px 14px 12px 10px;}
.ikepia-gate-modal .phone-row input#ikepiaGatePhone:focus{outline:none;}
.ikepia-gate-modal .phone-country{position:relative; display:flex; border-inline-end:1px solid var(--border-strong); flex:0 0 auto;}
.ikepia-gate-modal .phone-country-btn{display:flex; align-items:center; gap:5px; background:none; border:none; padding:0 10px; margin:0; cursor:pointer; color:var(--text); font-size:17px; border-radius:8px 0 0 8px;}
.ikepia-gate-modal .phone-country-btn:focus-visible{outline:2px solid var(--copper); outline-offset:-2px;}
.ikepia-gate-modal .phone-country-caret{width:12px; height:12px; color:var(--text-soft); transition:transform .2s ease; flex-shrink:0;}
.ikepia-gate-modal .phone-country.open .phone-country-caret{transform:rotate(180deg);}
.ikepia-gate-modal .phone-country-panel{position:absolute; top:calc(100% + 8px); left:0; width:270px; max-width:min(80vw,320px); background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:8px; display:none; flex-direction:column; gap:6px; z-index:60;}
.ikepia-gate-modal .phone-country.open .phone-country-panel{display:flex;}
.ikepia-gate-modal .phone-country-search{padding:8px 10px; border-radius:6px; border:1px solid var(--border-strong); background:var(--bg); color:var(--text); font-size:13px; font-family:var(--font-body);}
.ikepia-gate-modal .phone-country-search:focus{outline:2px solid var(--copper); outline-offset:1px;}
.ikepia-gate-modal .phone-country-menu{list-style:none; margin:0; padding:0; max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:1px;}
.ikepia-gate-modal .phone-country-menu li{margin:0;}
.ikepia-gate-modal .phone-country-menu li[hidden]{display:none;}
.ikepia-gate-modal .phone-country-menu button{width:100%; text-align:start; background:none; border:none; padding:8px 9px; border-radius:6px; font-size:13px; color:var(--text); cursor:pointer; font-family:var(--font-body); display:flex; align-items:center; gap:8px;}
.ikepia-gate-modal .phone-country-menu button:hover{background:var(--surface-2);}
.ikepia-gate-modal .phone-country-menu li[aria-selected="true"] button{color:var(--copper); font-weight:600;}
.ikepia-gate-modal .phone-country-menu .pcm-dial{margin-inline-start:auto; color:var(--text-soft); font-family:var(--font-mono); font-size:11px; flex-shrink:0;}
.ikepia-gate-modal .phone-country-flag svg, .ikepia-gate-modal .pcm-flag{width:20px; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); flex-shrink:0; display:block;}
.ikepia-gate-modal .phone-error{margin:6px 0 0; font-size:12.5px; color:var(--copper); display:flex; align-items:center; gap:6px; line-height:1.4;}
.ikepia-gate-modal .phone-error[hidden]{display:none;}
.ikepia-gate-modal .form-submit{margin-top:6px; display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.ikepia-gate-modal .form-submit-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.ikepia-gate-modal .form-note{font-size:12.5px; color:var(--text-soft); line-height:1.5;}
.ikepia-gate-modal .form-success-inline{display:inline-flex; align-items:flex-start; gap:10px; padding:10px 16px; border-radius:10px; background:color-mix(in srgb, var(--success) 14%, transparent); border:1px solid color-mix(in srgb, var(--success) 45%, transparent); max-width:320px; animation:ikepiaGateFormSuccessIn .3s ease;}
.ikepia-gate-modal .form-success-inline[hidden]{display:none;}
.ikepia-gate-modal .form-success-inline svg{width:18px; height:18px; color:var(--success-bright); flex-shrink:0; margin-top:2px;}
.ikepia-gate-modal .form-success-inline .fsi-text{display:flex; flex-direction:column; gap:2px;}
.ikepia-gate-modal .form-success-inline strong{font-size:13.5px; color:var(--text); font-weight:600;}
.ikepia-gate-modal .form-success-inline span{font-size:12px; color:var(--text-muted); line-height:1.4;}
@keyframes ikepiaGateFormSuccessIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.ikepia-gate-modal .form-success-inline{animation:none;}}
.ikepia-gate-modal .form-error{background:color-mix(in srgb, var(--copper) 12%, transparent); border:1px solid var(--copper); border-radius:8px; padding:14px 16px; margin-bottom:16px;}
.ikepia-gate-modal .form-error p{font-size:13.5px; color:var(--text); line-height:1.6;}
.ikepia-gate-modal .form-error a{color:var(--copper); text-decoration:underline;}
.ikepia-gate-modal .btn[disabled]{opacity:.6; cursor:default;}