/* ===== Page /information — style repris de la home d'aevmmaroc.org =====
   Tout est prefixe .ip / ip- : Bootstrap est charge sur cette page et definit deja
   .btn-primary, .accordion, .steps... Le composant d'eligibilite (layout/eligibility.page.php)
   est partage avec index.php : il n'est restyle ici que sous .ip-hero, sans toucher a son markup. */
.ip{
  --ip-rouge:#c1262d;
  --ip-rouge-2:#9e1f25;
  --ip-encre:#212529;
  --ip-sable-2:#f4f4f4;
  --ip-papier:#ffffff;
  --ip-vert:#1f5932;
  --ip-vert-bg:rgba(31,89,50,0.08);
  --ip-ligne:#dee2e6;
  --ip-muet:#6c757d;
  --ip-texte:#495057;
  --ip-radius:3px;
  color:var(--ip-encre);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.ip h1, .ip h2, .ip h3{
  font-weight:600; letter-spacing:-0.01em; line-height:1.15; margin:0; color:var(--ip-encre);
}
.ip p{margin:0 0 1em;}

.ip-wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
@media (max-width:640px){.ip-wrap{padding:0 22px;}}

/* ---------- Eyebrow (petit libelle rouge precede d'un tiret) ---------- */
.ip-eyebrow{
  font-size:0.74rem; color:var(--ip-rouge-2); margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.ip-eyebrow::before{content:""; width:16px; height:1px; background:var(--ip-rouge-2); flex:none;}

/* ---------- Hero ---------- */
.ip-hero{
  position:relative; overflow:hidden;
  padding:56px 0 60px;
  border-bottom:1px solid var(--ip-ligne);
  /* Meme degrade turquoise qu'aevmmaroc.org (recree en CSS a partir du bandeau d'origine) :
     remplace banner.webp, donc plus d'image sur le chemin critique. */
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(214,245,252,0.9) 0%, rgba(214,245,252,0) 70%),
    linear-gradient(90deg, #a3d1d0 0%, #bae2e6 15%, #cdeff6 35%, #d3f2fa 50%, #c6eef7 70%, #b4ecf5 100%);
}
.ip-hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:start;
}
@media (max-width:900px){.ip-hero-grid{grid-template-columns:1fr; gap:32px;}}
@media (max-width:640px){.ip-hero{padding:40px 0 44px;}}
.ip-hero h1{font-size:clamp(2rem,4vw,2.9rem);}
.ip-hero h1 b{font-weight:600;}
.ip-hero .ip-lede{
  display:block; max-width:50ch; margin-top:18px;
  font-size:1.05rem; font-weight:400; letter-spacing:0; line-height:1.6; color:#343a40;
}
.ip-badges{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px;}
.ip-badge{display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--ip-texte);}
.ip-badge svg{width:16px; height:16px; flex:none; color:var(--ip-rouge-2);}

/* ---------- Carte d'eligibilite dans le hero ---------- */
/* Les utilitaires Bootstrap (.bg-light, .p-4, .rounded-3, .text-center...) sont en !important :
   on ne les surcharge qu'avec un #id + !important. */
.ip-hero #eligibility-card{
  margin-top:0;
  background-color:rgba(255,255,255,0.5) !important;
  -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px);
  border-radius:16px !important;
  box-shadow:0 10px 40px rgba(0,0,0,0.15) !important;
}
.ip-hero #eligibility-card .card-body{padding:26px !important;}
/* Colonne etroite : nationalite et residence l'une sous l'autre, jamais cote a cote. */
.ip-hero #eligibility-card .row > [class*="col-lg-"]{width:100%;}
.ip-hero #nationalite-wrapper{text-align:left !important;}
/* Icones Font Awesome du composant : la police n'est pas chargee, les <i> vides ne laissent
   que leur marge (decalage devant les libelles et le resultat). */
.ip-hero #eligibility-card i.fas{display:none;}
.ip-hero #eligibility-card label.form-label[for]{
  display:block; font-size:0.76rem; font-weight:600 !important;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--ip-muet);
  margin-bottom:6px;
}
.ip-hero #eligibility-card label.form-label:not([for]){font-size:0.9rem; line-height:1.45;}
.ip-hero #eligibility-card select.form-select{
  border-radius:var(--ip-radius); border:1px solid var(--ip-ligne);
  padding:11px 36px 11px 12px; font-size:0.93rem; color:var(--ip-encre);
  text-align:left; text-align-last:left; background-color:#fff;
}
.ip-hero #eligibility-card select.form-select:focus{
  border-color:var(--ip-ligne); box-shadow:none;
  outline:2px solid var(--ip-rouge-2); outline-offset:1px;
}
.ip-hero #eligibility-card .bg-light{
  background-color:rgba(255,255,255,0.6) !important;
  border:1px solid var(--ip-ligne); border-radius:var(--ip-radius) !important;
}
.ip-hero #eligibility-card .form-check-input:checked{
  background-color:var(--ip-rouge); border-color:var(--ip-rouge);
}

/* Resultat : memes etats qu'aevmmaroc.org (neutre en pointilles, vert si eligible, rouge si refus). */
.ip-hero #eligibility-result{
  margin-top:16px !important; padding:16px !important;
  border-radius:var(--ip-radius) !important;
  border:1px dashed var(--ip-ligne) !important;
  font-size:0.9rem;
}
.ip-hero #eligibility-result.bg-light{background-color:rgba(255,255,255,0.6) !important;}
.ip-hero #eligibility-result.bg-success{
  border:1px solid var(--ip-vert) !important; background-color:var(--ip-vert-bg) !important;
}
.ip-hero #eligibility-result.bg-danger{
  border:1px solid var(--ip-rouge) !important; background-color:rgba(193,38,45,0.06) !important;
}
.ip-hero #eligibility-result p{font-size:0.9rem !important; text-align:left !important;}
.ip-hero #eligibility-result .text-success{color:var(--ip-vert) !important;}
.ip-hero #eligibility-result .text-danger{color:var(--ip-rouge) !important;}

/* Boutons de demande : pleine largeur, angles droits, comme le .btn-primary d'aevmmaroc.org. */
.ip-hero #eligibility-card .btn{
  width:100%; margin-top:0; padding:13px !important;
  border:none; border-radius:var(--ip-radius);
  font-size:0.95rem !important; font-weight:600; color:#fff; min-height:44px;
}
.ip-hero #eligibility-card .main-button-fill{background-color:var(--ip-rouge);}
.ip-hero #eligibility-card .main-button-fill:hover{background-color:var(--ip-rouge-2); color:#fff; border:none;}
.ip-hero #eligibility-card .second-button-fill{background-color:var(--ip-vert);}
.ip-hero #eligibility-card .second-button-fill:hover{background-color:#173f24; color:#fff; border:none;}

/* ---------- Sections ---------- */
.ip-section{padding:64px 0;}
@media (max-width:640px){.ip-section{padding:48px 0;}}
.ip-section--alt{
  background:var(--ip-sable-2);
  border-top:1px solid var(--ip-ligne); border-bottom:1px solid var(--ip-ligne);
}
.ip-section a{color:var(--ip-rouge-2); text-decoration:underline; text-decoration-thickness:1px;}
.ip-section a:hover{color:var(--ip-rouge);}

.ip-head{max-width:62ch; margin-bottom:36px;}
.ip-head h2{font-size:clamp(1.5rem,2.4vw,2rem);}
.ip-head p{color:var(--ip-texte); margin:12px 0 0;}

/* Intro : titres et phrase d'accroche empiles sur une colonne. */
.ip-intro{margin-bottom:56px;}
@media (max-width:640px){.ip-intro{margin-bottom:44px;}}
.ip-intro h2{font-size:clamp(1.5rem,2.4vw,2rem);}
.ip-intro h2 + h2{margin-top:12px;}
.ip-intro p{max-width:72ch; margin:16px 0 0; font-size:1.05rem; color:#343a40;}

.ip-prose{max-width:72ch;}
.ip-prose h3{font-size:1.1rem; margin-bottom:10px;}
.ip-prose p{color:#343a40;}

/* Tuiles a liseré rouge (les .feature d'aevmmaroc.org), appliquees a des listes. */
.ip-features{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  list-style:none; margin:24px 0; padding:0;
}
.ip-features--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:800px){.ip-features, .ip-features--2{grid-template-columns:1fr; gap:18px;}}
.ip-features > li{
  border-top:2px solid var(--ip-rouge); padding-top:16px;
  font-size:0.95rem; color:var(--ip-texte);
}
.ip-features--titres > li{font-size:1.05rem; font-weight:600; line-height:1.4; color:var(--ip-encre);}
.ip-features > li strong{display:block; font-size:1.05rem; font-weight:600; color:var(--ip-encre); margin-bottom:6px;}

/* Liste a coches. */
.ip-check{list-style:none; margin:0 0 1em; padding:0;}
.ip-check li{position:relative; padding-left:28px; margin-bottom:10px; color:#343a40;}
.ip-check li:last-child{margin-bottom:0;}
.ip-check li::before{
  content:""; position:absolute; left:0; top:0.3em; width:16px; height:16px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  color:var(--ip-vert);
}
.ip-check ul{list-style:none; margin:8px 0 0; padding:0;}
.ip-check ul li{padding-left:18px; margin-bottom:4px; color:var(--ip-texte);}
.ip-check ul li::before{
  -webkit-mask:none; mask:none; background:var(--ip-muet);
  width:6px; height:6px; border-radius:50%; top:0.65em; left:2px;
}
.ip-check--2{columns:2; column-gap:40px;}
.ip-check--2 li{break-inside:avoid;}
@media (max-width:700px){.ip-check--2{columns:1;}}
/* Liste « non concerne » : tiret gris au lieu de la coche verte. */
.ip-check--neutre li::before{
  -webkit-mask:none; mask:none; background:var(--ip-muet);
  width:12px; height:2px; top:0.75em; left:2px;
}

/* Cartes blanches (les .price-card d'aevmmaroc.org). */
.ip-cards{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch;}
@media (max-width:800px){.ip-cards{grid-template-columns:1fr;}}
.ip-card{
  background:var(--ip-papier); border:1px solid var(--ip-ligne); border-radius:6px; padding:26px;
}
.ip-card--accent{border-color:var(--ip-rouge);}
.ip-card-label{
  font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ip-rouge-2); margin-bottom:14px;
}
.ip-card > p:last-child, .ip-card > ul:last-child{margin-bottom:0;}

/* Prefixe .ip : sans lui, la regle generale .ip p (plus specifique) annule la marge haute. */
.ip .ip-callout{
  background:var(--ip-papier); border:1px solid var(--ip-ligne); border-left:4px solid var(--ip-rouge);
  padding:16px 20px; border-radius:0 4px 4px 0; font-size:0.95rem; color:#343a40;
  margin:28px 0 0; max-width:72ch;
}
/* Sous des cartes pleine largeur, l'encadre s'aligne sur elles. */
.ip .ip-cards + .ip-callout, .ip .ip-card + .ip-callout{max-width:none;}
.ip .ip-link{margin:20px 0 0; font-weight:600;}
.ip .ip-closing{margin:28px 0 0;}

/* Etapes numerotees (les .steps d'aevmmaroc.org). */
.ip-steps{display:grid; grid-template-columns:repeat(2,1fr); gap:36px 48px;}
@media (max-width:600px){.ip-steps{grid-template-columns:1fr; gap:28px;}}
.ip-step h3{font-size:1.1rem; margin:0 0 8px;}
.ip-step p{font-size:0.92rem; color:var(--ip-texte); margin:0;}

/* Frise chronologique (apres la soumission). */
.ip-timeline{list-style:none; margin:0; padding:0; max-width:72ch; counter-reset:ip-t;}
.ip-timeline li{
  position:relative; padding:0 0 22px 44px; color:#343a40; counter-increment:ip-t;
}
.ip-timeline li::before{
  content:counter(ip-t); position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ip-rouge); color:#fff; font-size:0.8rem; font-weight:700;
}
.ip-timeline li::after{
  content:""; position:absolute; left:13.5px; top:32px; bottom:4px; width:1px; background:var(--ip-ligne);
}
.ip-timeline li:last-child{padding-bottom:0;}
.ip-timeline li:last-child::after{display:none;}

/* ---------- Boutons ---------- */
.ip .ip-btn{
  display:inline-block; padding:13px 28px; min-height:44px;
  background:var(--ip-rouge); color:var(--ip-papier);
  border-radius:var(--ip-radius); font-weight:600; font-size:0.95rem;
  text-decoration:none; text-align:center;
}
.ip .ip-btn:hover{background:var(--ip-rouge-2); color:var(--ip-papier);}
.ip .ip-btn-ghost{
  display:inline-block; padding:12px 24px; min-height:44px;
  border:1px solid var(--ip-ligne); border-radius:var(--ip-radius); background:var(--ip-papier);
  color:var(--ip-encre); font-weight:600; font-size:0.95rem; text-decoration:none;
}
.ip .ip-btn-ghost:hover{border-color:var(--ip-rouge-2); color:var(--ip-rouge-2);}

/* Bandeau d'appel a l'action en pied de section (layout/apply-bloc.php). */
.ip-cta{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  margin-top:40px; padding-top:28px; border-top:1px solid var(--ip-ligne);
}
.ip-cta p{margin:0; font-size:1rem; color:#343a40;}
.ip-cta .ip-btn{min-width:240px;}
@media (max-width:640px){.ip-cta .ip-btn{width:100%;}}

/* ===== Home (/home) : composants en plus de ceux de /information ===== */
.ip-head h1{font-size:clamp(1.5rem,2.4vw,2rem);}

/* Trois etapes avec picto (le « 3 etapes » d'aevmmaroc.org). */
.ip-steps--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:800px){.ip-steps--3{grid-template-columns:1fr; gap:32px;}}
.ip-step--picto{text-align:center;}
.ip-picto{display:block; width:80px; height:100px; object-fit:contain; margin:0 auto 18px;}
.ip .ip-step-title{font-size:1.1rem; font-weight:600; color:var(--ip-encre); margin:0 0 8px;}

/* Cartes eVisa / AEVM. */
.ip-card--vert{border-color:var(--ip-vert);}
.ip-card--offre{display:flex; flex-direction:column; padding:30px;}
.ip-card--offre h2{font-size:1.5rem; margin-bottom:16px;}
.ip-card--offre p{color:#343a40;}
.ip-card--offre ul{color:#343a40;}
.ip-card--offre .ip-btn{margin-top:auto; align-self:flex-start;}

.ip .ip-btn--vert{background:var(--ip-vert);}
.ip .ip-btn--vert:hover{background:#173f24;}

/* Paire de boutons eVisa / AEVM. */
.ip-actions{display:flex; flex-wrap:wrap; gap:12px; margin:32px 0;}
.ip-section .ip-wrap > .ip-actions:last-child{margin-bottom:0;}
@media (max-width:640px){.ip-actions{flex-direction:column;} .ip-actions .ip-btn{width:100%;}}

/* Textes longs : titres h2 dans la prose. */
.ip-prose h2{font-size:clamp(1.5rem,2.4vw,2rem); margin:0 0 12px;}
.ip-prose p + h2, .ip-prose ul + h2{margin-top:40px;}

/* Listes de pays : quatre colonnes dans une carte. */
.ip h2.ip-list-title{font-size:1.1rem; letter-spacing:0.02em; line-height:1.4; margin:0 0 16px;}
.ip h2.ip-list-title--suite{margin-top:48px;}
.ip-prose .ip-list-title{margin-top:0;}
.ip-countries{display:grid; grid-template-columns:repeat(4,1fr); gap:0 24px;}
@media (max-width:800px){.ip-countries{grid-template-columns:repeat(2,1fr);}}
.ip-countries ul{list-style:none; margin:0; padding:0;}
.ip-countries li{position:relative; padding:4px 0 4px 14px; font-size:0.92rem; color:#343a40; line-height:1.45;}
.ip-countries li::before{
  content:""; position:absolute; left:0; top:0.85em; width:5px; height:5px; border-radius:50%; background:var(--ip-rouge);
}