/*
  Architext — landing.css
  Reusable, Ghost-friendly landing components built with semantic classes & no-JS fallbacks.
  ------------------------------------------------------------------------------
  How to use (quick):
  1) Include this file in your theme assets and load it only on landing pages.
  2) Compose sections with .lp-section inside a .lp container.
  3) Use .lp-grid-* utilities for columns, .lp-hero / .lp-banner for headings.
  4) FAQ uses native <details>/<summary>. Add the 'open' attribute server-side so it's fully expanded without JS.
  5) Modals use :target (no JS). Link to #id to open; link to # to close.
  ------------------------------------------------------------------------------
*/


:root {
  --lp-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --lp-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --lp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font sizes */
  --fs-body: clamp(16px, 0.38vw + 14px, 19px); /* Corps de texte : 16px (mobile) → 19px (≥ ~1440px) */
  --fs-body-sm: clamp(14px, 0.34vw + 12px, 17px);  /* légendes, notes */
  --fs-body-lg: clamp(18px, 0.42vw + 15px, 22px);  /* "lead", intro */
  
  /* Listes */
  --lp-list-indent: 1.25em;
  --lp-list-gap: .5em;                /* espace entre items */

  /* Brand palette — adjust to your theme */
  --lp-bg: #f9fbea;            /* page background */
  --lp-surface: #ecf2c2;       /* cards/sections */
  --lp-surface-2: #f9fbea;     /* deeper layer */
  --lp-text: #060644;
  --lp-text-dim: #0b0b72;
  --lp-primary: #aebf11;       /* CTA */
  --lp-primary-600: #6e790b;
  --lp-primary-700: #596209;
  --lp-accent: #aebf11;        /* highlight */
  --lp-success: #22c55e;
  --lp-warning: #f59e0b;
  --lp-danger: #ef4444;

  --lp-ring: rgba(174, 191, 17, 0.25);
  --lp-quote: rgba(110, 121, 11, 0.15);

  --lp-std-maxw: 1200px;
  --lp-narrow-maxw: 800px;
  --lp-wide-maxw: 1600px;
  --lp-pad: clamp(16px, 2vw, 24px);
  --lp-section-padding: clamp(16px, 5vw, 30px);
  --lp-gap: clamp(16px, 2.4vw, 28px);
  --lp-radius: 18px;
  --lp-radius-lg: 24px;
  --lp-shadow: 0 10px 30px rgba(0,0,0,.35);
  --lp-border: 1px solid rgba(255,255,255,.08);
}


/* === Spacing scale (cohérente & lisible) ============================= */
.lp{
  --s-0: 0;
  --s-1: .25rem;   /* 4px  */
  --s-2: .5rem;    /* 8px  */
  --s-3: .75rem;   /* 12px */
  --s-4: 1rem;     /* 16px */
  --s-5: 1.5rem;   /* 24px */
  --s-6: 2rem;     /* 32px */
  --s-7: 3rem;     /* 48px */
}


/* === Section helpers (raccourcis utiles) ============================= */
/* force l'espacement vertical d'une section sans toucher au composant */
.lp .section-tight   { --lp-section-padding: var(--s-5) !important; }
.lp .section-roomy   { --lp-section-padding: var(--s-7) !important; }
.lp .section-flush-t { padding-top: var(--s-0) !important; }
.lp .section-flush-b { padding-bottom: var(--s-0) !important; }


/* défilement fluide + compensation du header */
html { scroll-behavior: smooth; }
#inscription { scroll-margin-top: clamp(64px, 10vh, 120px); }

/* bonus : toutes les ancres prennent la marge de sécurité */
[id] { scroll-margin-top: var(--sticky-offset, 80px); }


html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* Alignements horizontaux */
.lp .text-left     { text-align: left    !important; }
.lp .text-center   { text-align: center  !important; }
.lp .text-right    { text-align: right   !important; }
.lp .text-justify  { text-align: justify !important; text-justify: inter-word; hyphens: auto; }

/* Variantes responsives (sm ≥600px, md ≥960px, lg ≥1200px) */
@media (min-width: 600px){
  .lp .sm-text-left   { text-align: left   !important; }
  .lp .sm-text-center { text-align: center !important; }
  .lp .sm-text-right  { text-align: right  !important; }
  .lp .sm-text-justify{ text-align: justify!important; text-justify: inter-word; hyphens: auto; }
}
@media (min-width: 960px){
  .lp .md-text-left   { text-align: left   !important; }
  .lp .md-text-center { text-align: center !important; }
  .lp .md-text-right  { text-align: right  !important; }
}
@media (min-width: 1200px){
  .lp .lg-text-left   { text-align: left   !important; }
  .lp .lg-text-center { text-align: center !important; }
  .lp .lg-text-right  { text-align: right  !important; }
}

/* (optionnel) équilibrage de titres multi-lignes */
.lp .text-balance { text-wrap: balance; }


.lp, .lp-section { overflow-x: clip; } /* clip = plus doux que hidden, moderne */

/* Base & reset trims (non-destructive) */
.lp, .lp * { 	box-sizing: border-box; }
.lp { 
	color: var(--lp-text); 
	background: var(--lp-bg);
	margin-inline:auto;
	align-items:center;
}
.lp a { color: inherit; text-decoration: none; }
.lp img, .lp video { max-width: 100%; height: auto; border-radius: var(--lp-radius); }
.lp p { color: var(--lp-text-dim); line-height: 1.65; }
.lp .sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Scope de la landing */
.lp{ font-size: var(--fs-body); }          /* tout ce qui est en rem/ems suivra */
.lp p, .lp li{ font-size: inherit; }       /* explicite si besoin */
.lp small{ font-size: var(--fs-body-sm); }
.lp .lead{ font-size: var(--fs-body-lg); line-height: 1.6; }

@media (max-width: 768px){
  /* page frame discret */
  .lp{
    border-left: 1px solid rgba(255,255,255,.10);
    border-right: 1px solid rgba(255,255,255,.10);
  }

  /* les blocs « cartes » restent bien détachés des bords */
  .lp .lp-surface,
  .lp .lp-surface-2,
  .lp .lp-frame{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
}




/* ===== Footer compact, centré, sans fond ============================ */
.lp-footer {
  /* pas de background ici */
  padding-top: clamp(40px, 5vw, 60px);
  padding-bottom: clamp(40px, 5vw, 60px);
  border-top: 1px solid rgba(255,255,255,.10);            /* léger séparateur (option) */
  text-align: center;
  color: var(--lp-text, #e6edf5);
}

/* Ligne 1 : menu secondaire */
.lp-footer nav{ margin: 0; }
.lp-footer nav .m-secondary-menu{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding: 0;
  margin: 0 0 clamp(10px, 1.5vw, 16px);
}
.lp-footer nav a{
  color: var(--lp-text, #e6edf5);
  opacity: .9;
  text-decoration: none;
  font-weight: 600;
}
.lp-footer nav a:hover{ opacity: 1; }
.lp-footer nav a:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(34,211,238,.25);             /* focus visible */
  border-radius: 8px;
}

/* Ligne 3 : copyright centré avec puces */
.lp-copyright{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  margin: 0;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--lp-text, #e6edf5);
  opacity: .85;
}
.lp-copyright span{
  color: inherit;
}
.lp-copyright span:first-child,
.lp-copyright span:last-child{
  opacity: .55;                    /* puces légèrement atténuées */
}

/* Petits écrans : resserrer légèrement les espaces */
@media (max-width: 520px){
  .lp-footer nav .m-secondary-menu{ gap: 16px; }
  .lp-copyright{ font-size: .9rem; }
}
.m-secondary-menu li + li{ --lp-list-gap: 0; }


/* Section primitives */


/*---- SECTION = bandeau pleine largeur, avec variables d’espacement --- */
.lp-section {
  padding-block: var(--lp-section-padding) var(--lp-section-padding);
  align-items: center;
  /* position: relative; */
}
.lp-section.is-tight { 
	padding-block: var(--lp-section-padding/2) var(--lp-section-padding/2);
}
.lp-section.top-of-page { padding-top: clamp(96px, 15vw, 180px); }

/*---------------------------------------------------------------------- */


/* Ribbon plein-largeur, 3D léger, sans z-index/pseudo-élément */
.lp-section.ribbon{
  --lp-section-padding: clamp(60px, 10vw, 90px);

  /* palette froide */
  --ribbon-dark: #0b0f14;     /* fond global sombre */
  --cyan: #11aebf;            /* cœur lumineux */
  --cyan-deep: #0a3f49;       /* bordure interne de la bande */

  /* réglages (tu peux jouer dessus) */
  --cap: 14px;                /* épaisseur des capuchons solides haut/bas */
  --fade: 22%;                /* zone de fade interne (haut/bas) */
  --band-a: 44%;              /* début de la bande cyan pure */
  --band-b: 56%;              /* fin   de la bande cyan pure */

  color: var(--lp-text);
  margin-block: var(--lp-section-padding);
  padding-block: clamp(40px, 10vw, 60px);
  padding-left: 0px!important;
  padding-right: 0px!important;
  overflow: hidden;


  /* ordre: haut -> bas */
  background: var(--lp-ring);


  /* CLIP par couche pour éviter toute fuite sous la bordure */
  background-clip:
    border-box,    /* capuchons */
    border-box,    /* fondu */
    padding-box,   /* bande cyan confinée au padding */
    border-box;    /* base */
}

/* Texte secondaire lisible à l'intérieur * /
.lp-section.ribbon p,
.lp-section.ribbon li { color: #374151; }   / * slate-700 */
.lp-section.ribbon .eyebrow { color: #a16207; } /* amber accent */

/* Option : intensité du relief */
.lp-section.ribbon.is-subtle{
  box-shadow:
    0 18px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.lp-section.ribbon.is-bold{
  box-shadow:
    0 34px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.22);
}


/*---- CONTENEUR centré ------------------------------------------------ */

/* largeur de lecture centrée */

.lp .width-std    { max-width: var(--lp-std-maxw); margin-inline:auto; }
.lp .width-narrow { max-width: var(--lp-narrow-maxw); margin-inline: auto; }
.lp .width-wide   { max-width: var(--lp-wide-maxw); margin-inline: auto; }

/*---------------------------------------------------------------------- */


/*---- BLOCKS dans conteneur ------------------------------------------- */
.lp-block,
.lp-grid,
.lp-grid-2,
.lp-grid-3{ max-width: var(--lp-std-maxw); align-items:center;}

.lp-block{ display:block; }
.lp-grid{ display:grid; gap: var(--lp-gap); }
.lp-grid-2{ grid-template-columns: 1fr; }
.lp-grid-3{ grid-template-columns: 1fr; }
@media (min-width: 960px){
  .lp-grid-2{ grid-template-columns: 2fr 1fr; }   /* 2/3 – 1/3 par défaut */
  .lp-grid-3{ grid-template-columns: repeat(3,1fr); }
  .lp-grid-2.lp-grid-equal { grid-template-columns: 1fr 1fr; }
  .lp-grid-3.lp-grid-equal { grid-template-columns: 1fr 1fr 1fr; }
}

/* (facultatif) n'importe quel N colonnes via variable */
.lp-grid-any.lp-grid-equal { --cols: 2; }              /* défaut */
@media (min-width: 960px){
  .lp-grid-any.lp-grid-equal { grid-template-columns: repeat(var(--cols), 1fr); }
}


/* Flexible split (2/3 - 1/3) */
.lp .lp-split { display:grid; gap: var(--lp-gap); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .lp .lp-split { grid-template-columns: 2fr 1fr; } }
.lp .reverse { direction: rtl; }
.lp .reverse > * { direction: ltr; }

/* * * Grid 2 * * */

/* Base: mobile = pile (texte puis image) */
.lp-grid-2{
  display:grid; gap: var(--lp-gap);
  grid-template-areas:
    "text"
    "media";
}
.lp-grid-2 .col--text  { grid-area: text; }
.lp-grid-2 .col--media { grid-area: media; position: relative; overflow: hidden; border-radius: var(--lp-radius-lg); }
.lp-grid-3 .col--media > img,
.lp-grid-2 .col--media > img{ 
/*position:absolute; inset:0; width:100%; height:100%; object-fit:cover;*/
    position: static;                  /* sort du mode absolute */
    width: 100%;                       /* s'adapte en largeur */
    height: auto;                      /* conserve le ratio naturel */
    max-height: none;                  /* pas de contrainte verticale */
    object-fit: contain;               /* évite toute extension/rognage */
    object-position: top center;       /* centrée en haut */
    display: block;
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow);
 }


/* Desktop: place l’image à droite ou à gauche */
@media (min-width: 960px){
  .lp-grid-2{ grid-template-columns: 1fr minmax(320px, 34%); align-items: stretch; }
  .lp-grid-2.has-media-right{ grid-template-areas: "text media"; }
  .lp-grid-2.has-media-left { grid-template-columns: minmax(320px, 34%) 1fr; grid-template-areas: "media text"; }
}

/* * * Grid 3 * * */

/* Mobile: t1 → t2 → image */
.lp-grid-3{
  display:grid; gap: var(--lp-gap);
  grid-template-areas:
    "t1"
    "t2"
    "media";
}
.lp-grid-3 .col--t1    { grid-area: t1; }
.lp-grid-3 .col--t2    { grid-area: t2; }
.lp-grid-3 .col--media { grid-area: media; position: relative; overflow:hidden; border-radius: var(--lp-radius-lg); }

/* Desktop: image à droite ou à gauche */
@media (min-width: 960px){
  .lp-grid-3{
    grid-template-columns: 1fr 1fr minmax(300px, 34%);
    align-items: stretch;
  }
  .lp-grid-3.has-media-right{ grid-template-areas: "t1 t2 media"; }
  .lp-grid-3.has-media-left {
    grid-template-columns: minmax(300px,34%) 1fr 1fr;
    grid-template-areas: "media t1 t2";
  }
  .lp-grid-3.has-media-center {
    grid-template-columns: 1fr minmax(300px,34%) 1fr;
    grid-template-areas: "t1 media t2";
  }
}

/* Espacement sans marge haute */

/* 1) Le padding "au-dessus du bloc" (déplacé du titre vers le conteneur) */
.lp .lp-grid-2,
.lp .lp-grid-3{
  --block-pad-top: clamp(12px, 1.6vw, 28px); /* ajuste à ton goût */
  padding-top: var(--block-pad-top);
}

/* 2) Dans les colonnes texte, le tout premier élément ne pousse plus vers le bas */
.lp .lp-grid-2 .col--text > :first-child,
.lp .lp-grid-3 .col--t1 > :first-child,
.lp .lp-grid-3 .col--t2 > :first-child{
  margin-top: 0 !important;
}

/* (optionnel) règle générale utile pour tous tes groupes de contenu */
.lp .lp-block > :first-child{ margin-top: 0; }
.lp .lp-block > :last-child{ margin-bottom: 0; }

/* On garde l’alignement haut des colonnes */
@media (min-width: 960px){
  .lp .lp-grid-2,
  .lp .lp-grid-3{
    align-items: stretch; /* même hauteur texte/image */
  }
}

.lp-block .lp-section-sub,
.lp-split-2 .lp-section-sub,
.lp-split-2 .lp-section-sub{ margin-top: 0 !important; }

/*---------------------------------------------------------------------- */


/*--------- Listes ordonnées ou non ------------------------------------ */

/* ul / ol suivent la typo du body (clamp déjà défini via --fs-body) */
.lp ul,
.lp ol{
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--lp-text-dim);
  list-style-position: outside;
  margin: 0 0 1rem var(--lp-list-indent);
  padding-left: var(--lp-list-indent);
}

/* items héritent strictement */
.lp li{
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* espace entre items; pas de double marge si <p> dans <li> */
.lp li + li{ margin-top: var(--lp-list-gap); }
.lp li > p{ margin: 0; }

/* listes imbriquées : légère respiration + styles d’indicateurs classiques */
.lp li ul,
.lp li ol{ margin-top: .35em; }
.lp ul{ list-style-type: disc; }
.lp ul ul{ list-style-type: circle; }
.lp ul ul ul{ list-style-type: square; }

/* Variantes utiles (optionnel) */
.lp .list-compact li + li{ margin-top: .25em; }
.lp .list-spacious li + li{ margin-top: .75em; }
.lp .list-lead{ font-size: var(--fs-body-lg); line-height: 1.6; }  /* pour une liste d’intro */

/*---------------------------------------------------------------------- */

.lp .lp-surface { background: var(--lp-surface); border: var(--lp-border); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow); }
.lp .lp-surface-2 { background: var(--lp-surface-2); border: var(--lp-border); border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow); }

/* Typography scale */
.lp h1, .lp .h1 { font-family: var(--lp-font-serif); font-weight: 800; letter-spacing: -0.005em; line-height: 1.1; font-size: clamp(32px, 4.6vw, 60px); }
.lp h2, .lp .h2 { font-family: var(--lp-font-serif); font-weight: 750; letter-spacing: -0.005em; line-height: 1.15; font-size: clamp(26px, 3.2vw, 40px); }
.lp h3, .lp .h3 { font-weight: 700; line-height: 1.2; font-size: clamp(20px, 2.4vw, 28px); }
.lp .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--lp-accent); font-size: 12px; }

/* Buttons */
.lp .btn { display:inline-flex; align-items:center; gap:.65em; padding:.9em 1.15em; border-radius: 999px; border: var(--lp-border); font-weight: 700; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.lp .btn:hover { transform: translateY(-1px); }
.lp .btn:focus { outline: none; box-shadow: 0 0 0 6px var(--lp-ring); }
.lp .btn-primary { background: var(--lp-primary); border-color: transparent; }
.lp .btn-primary:hover { background: var(--lp-primary-600); }
.lp .btn-primary:active { background: var(--lp-primary-700); transform: translateY(0); }
.lp .btn-light { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }

/* Badges / chips */
.lp .badge { display:inline-block; padding:.35em .7em; border-radius: 999px; font-weight:700; font-size: .78rem; background: rgba(255,255,255,.08); border: var(--lp-border); }

/* Simple utilities */
.lp .center { text-align: center; }
.lp .muted { color: var(--lp-text-dim); }
.lp .mt-1{ margin-top:.5rem } .lp .mt-2{ margin-top:1rem } .lp .mt-3{ margin-top:1.5rem } .lp .mt-4{ margin-top:2rem }
.lp .mb-1{ margin-bottom:.5rem } .lp .mb-2{ margin-bottom:1rem } .lp .mb-3{ margin-bottom:1.5rem } .lp .mb-4{ margin-bottom:2rem }
.lp .gap { gap: var(--lp-gap); }




/* Hero banner */
/* === HERO (nouvelle structure) ========================================= */


/* Wrapper du hero = grid parent */
.lp-hero > div{
  max-width: var(--lp-maxw);
  margin-inline: auto;
}

/* Boutons du hero */
.lp-hero .lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}


/* Mobile: pile par défaut (rien à faire) */
.lp-hero .lp-col-2-2{ margin-top: 1rem; }

/* Desktop: 2 colonnes (texte 2/3, image ≤ 1/3) + titre pleine largeur */
@media (min-width: 960px){
  .lp-hero > div{
    display: grid;
    grid-template-columns: 1fr minmax(320px, 34%); /* ajuste 34% si tu veux + ou - d'image */
    gap: var(--lp-gap);
    align-items: stretch;    /* clé : même hauteur pour les 2 colonnes */
    max-width: var(--lp-maxw);
    margin-inline: auto;
  }

   /* 2) Le bloc titre (kicker + H1) sur toute la largeur */
  .lp-hero > div > .lp-container:first-child{
    grid-column: 1 / -1;
  }

  /* 3) Colonne texte */
  .lp-hero .lp-col-1-2{
    grid-column: 1 / 2;
    min-height: 0;
    align-self: stretch;
  }

  
  /* 4) Colonne image = même hauteur que le texte */
  .lp-hero .lp-col-2-2{
    grid-column: 2 / 3;
    position: relative;   /* contiendra l'image en absolute */
    min-height: 0;
    align-self: stretch;
    justify-self: stretch;
    max-width: none;      /* annule d’anciennes limites éventuelles */
    padding-left: 1rem;   /* petit souffle avec le texte (optionnel) */
    overflow: hidden;     /* masque le rognage */
  }

  /* 5) L’image remplit la colonne et peut être rognée pour coller en hauteur */
  .lp-hero .lp-col-2-2 img{
    position: absolute;   /* sort du flux => ne “pèse” plus sur la hauteur de ligne */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    /* garde le ratio, rogne si nécessaire */
    object-position: 50% 40%; /* ajuste le cadrage si besoin */
    border-radius: var(--lp-radius-lg);
  }

  /* 6) Le glow reste superposé à l’image */
  .lp-hero .lp-col-2-2 .lp-glow{
    position: absolute;
    inset: -20%;
    filter: blur(60px);
    opacity: .25;
    pointer-events: none;
    background: radial-gradient(60% 60% at 50% 40%, var(--lp-primary), transparent 70%);
  }

  .lp-hero .lp-hero-actions {
    gap: 1.25rem;
  }
}
/* Mobile : espace vertical net entre les boutons */
@media (max-width: 959px) {
  .lp-hero .lp-hero-actions {
    flex-direction: column;  /* empile */
    gap: 0.85rem;            /* espace vertical */
    align-items: stretch;    /* prend toute la largeur */
  }
  .lp-hero .lp-hero-actions .btn {
    width: 100%;             /* boutons full width sur mobile */
    justify-content: center; /* texte centré */
  }
}

/* Glow conservé */
.lp-hero .lp-glow{
  position:absolute; inset:-20%;
  filter: blur(60px); opacity:.25;
  background: radial-gradient(60% 60% at 50% 40%, var(--lp-primary), transparent 70%);
  pointer-events:none;
}

/* Typo fine-tuning (optionnel) */
.lp-hero .lp-hero-title{ margin: 0 0 .6rem; }
.lp-hero .lp-section-sub{ font-size: clamp(1.1rem, .9vw + .9rem, 1.35rem); line-height: 1.25; max-width: 62ch; text-wrap: balance; }
.lp-hero .lp-text{ max-width: 70ch; }


/* Banner / callout */
.lp .lp-banner { display:flex; flex-direction:column; gap: .9rem; padding: clamp(16px, 3vw, 28px); border-radius: var(--lp-radius-lg); border: var(--lp-border); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.lp .lp-banner .title { font-weight:800; font-size: clamp(18px, 2vw, 24px); }
.lp .lp-banner .actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.3rem; }

/* Cards */
.lp .lp-card { padding: clamp(16px, 2vw, 22px); border-radius: var(--lp-radius); border: var(--lp-border); background: var(--lp-surface); box-shadow: var(--lp-shadow); height: 100%; }
.lp .lp-card .h3 { margin:0 0 .3rem; }
.lp .lp-card.highlight { background: rgba(17,175,191,.15);}


/* Feature list */
.lp .lp-feature { display:flex; gap: .9rem; align-items:flex-start; }
.lp .lp-feature .icon { flex:0 0 40px; width:40px; height:40px; border-radius: 12px; display:grid; place-items:center; background: rgba(123,92,255,.15); border: 1px solid rgba(123,92,255,.25); }

/* Pricing (simple) */
.lp .lp-price { padding: clamp(20px, 2.6vw, 26px); border-radius: var(--lp-radius-lg); border: var(--lp-border); background: var(--lp-surface-2); box-shadow: var(--lp-shadow); }
.lp .lp-price .h3 { font-size: clamp(23px, 2.8vw, 34px); padding-bottom: 10px; }
.lp .lp-price .tag { font-size: var(--fs-body-lg); font-weight:800; line-height: 1.6; letter-spacing:.08em; text-transform:uppercase; color: var(--lp-primary-700); }
.lp .lp-price .num { font-size: clamp(32px, 4vw, 44px); font-weight: 900; margin:.2rem 0; }
.lp .lp-price ul { list-style:none; padding:0; margin: .9rem 0 0; }
.lp .lp-price li { display:flex; align-items:flex-start; gap:.6rem; margin:.45rem 0; }
.lp .lp-price li::before { content:"✓"; margin-top:.1rem; }

/* FAQ (no-JS default: open using <details open>) */
.lp .lp-faq { display:grid; gap: .6rem; }
.lp .lp-faq details { border: var(--lp-border); border-radius: var(--lp-radius); background: var(--lp-surface); padding: .8rem 1rem; }
.lp .lp-faq summary { cursor: pointer; list-style: none; font-weight: 800; }
.lp .lp-faq summary::-webkit-details-marker{ display:none }
.lp .lp-faq details[open] { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.lp .lp-faq .answer { padding-top:.6rem; color: var(--lp-text-dim); }

/* Accordion (CSS-only alternate using checkbox) */
.lp .lp-accordion { display:grid; gap:.6rem; }
.lp .lp-accordion .item { border: var(--lp-border); border-radius: var(--lp-radius); background: var(--lp-surface); overflow: hidden; }
.lp .lp-accordion .control { display:block; padding: .9rem 1rem; font-weight:800; cursor:pointer; }
.lp .lp-accordion input[type="checkbox"] { display:none; }
.lp .lp-accordion .panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 1rem; }
.lp .lp-accordion input[type="checkbox"]:checked ~ .panel { max-height: 600px; padding: .2rem 1rem 1rem; }


.lp .lp-flex-col {
  display: flex !important;
  flex-direction: column !important;
}


/* --- Cards 4 colonnes, même hauteur --------------------------------- */

/* Card style */
.lp .lp-card-plain{
  height: 100%;
  background: var(--lp-surface);
  border: var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  padding: clamp(16px, 2vw, 22px);
}
.lp .lp-card-plain .h3{ margin:0 0 .3rem; font-size: clamp(18px, 2.2vw, 22px);}
.lp .lp-card-plain p{ color: var(--lp-text-dim); }

/* petit lift au hover (desktop) */
@media (hover:hover){
  .lp .lp-card-plain{ transition: transform .16s ease, box-shadow .2s ease; }
  .lp .lp-card-plain:hover{ transform: translateY(-10px); box-shadow: 0 14px 34px rgba(0,0,0,1); }
}

.lp-card-event{
  /* centrage vertical + horizontal */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  gap: 12px;
  min-height: 260px;
  padding: clamp(18px, 3vw, 28px);

  background: var(--lp-surface);
  color: var(--lp-text);
  border: var(--lp-border);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow);
}


/* MODALS — version uniformisée LP ----------------------------------------- */
.lp .lp-modal {
  position: fixed;
  inset: 0;
  display: none; /* cachée par défaut */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lp .lp-modal[aria-hidden="false"] { display: flex; }

.lp .lp-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: saturate(120%) blur(2px);
}

/* Boîte de dialogue calée sur les surfaces LP */
.lp .lp-modal__dialog {
  position: relative;
  max-width: min(92vw, 720px);
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: var(--lp-surface-2);
  color: var(--lp-text);
  border: var(--lp-border);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow);
  padding: clamp(16px, 2.2vw, 24px);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.lp .lp-modal[aria-hidden="false"] .lp-modal__dialog {
  transform: translateY(0);
  opacity: 1;
}

/* Header / body / footer */
.lp .lp-modal__header,
.lp .lp-modal__footer {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.lp .lp-modal__body { margin: .85rem 0 1.1rem; }
.lp .lp-modal__footer .btn + .btn { margin-left: .5rem; }

/* Icône de fermeture alignée à la charte */
.lp .lp-iconbtn{
  appearance:none; border: var(--lp-border); background: rgba(255,255,255,.08);
  color: var(--lp-text); border-radius: 10px; padding:.4rem .6rem; line-height:1;
  font-weight:800; cursor:pointer; transition: transform .12s ease, background .2s ease;
}
.lp .lp-iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }
.lp .lp-iconbtn:focus{ outline:none; box-shadow: 0 0 0 6px var(--lp-ring); }

/* Désactive le scroll arrière-plan quand une modale est ouverte */
.lp--modal-open { overflow: hidden; touch-action: none; }

/* Améliore la lisibilité des .btn-light sur fond sombre */
.lp .btn-light{
  background: rgba(174,191,17,.40);
  border-color: rgba(174,191,17,.80);
  color: var(--lp-text);
}
.lp .btn-light:hover{ background: rgba(255,255,255,.22); }
.lp .btn-light:active{ background: rgba(255,255,255,.18); transform: translateY(0); }

/* (optionnel) variante très lisible pour triggers modales */
.lp .btn-contrast{
  background: var(--lp-primary);
  border-color: transparent;
  color: #0b0c10; /* texte foncé pour contraste */
}
.lp .btn-contrast:hover{ background: var(--lp-primary-600); }

/* Positionne le close en haut-droite du dialog */
.lp .lp-modal__header{ position: relative; }
.lp .lp-iconbtn{
  position: absolute;
  top: clamp(10px, 1.2vw, 14px);
  right: clamp(10px, 1.2vw, 14px);
  padding: .42rem .56rem;
  border-radius: 10px;
}

/* (optionnel) agrandit la zone cliquable pour le confort */
.lp .lp-iconbtn::after{
  content:""; position:absolute; inset:-6px; /* hit area */
}

/* --------------------------------------------------------------- */




/* CTA bars */
.lp .lp-cta-bar { display:flex; flex-direction:column; gap:.8rem; justify-content:center; align-items:center; padding: clamp(16px, 3vw, 28px); border-radius: var(--lp-radius); border: var(--lp-border); background: linear-gradient(180deg, rgba(123,92,255,.12), rgba(123,92,255,.03)); }
@media (min-width: 820px) { .lp .lp-cta-bar { flex-direction:row; justify-content:space-between; } }
.lp .lp-cta-bar .text { font-weight: 800; font-size: clamp(16px, 2vw, 20px); }

/* Media wrapper */
.lp .lp-media { position: relative; aspect-ratio: 16/9; background: #0b0c10; border: var(--lp-border); border-radius: var(--lp-radius); overflow: hidden; }
.lp .lp-media > iframe, .lp .lp-media > video, .lp .lp-media > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Nav stub (optional sticky local nav) */
.lp .lp-localnav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(8px); background: rgba(21,24,33,.6); border-bottom: var(--lp-border); }
.lp .lp-localnav .inner { display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.6rem var(--lp-pad); max-width: var(--lp-maxw); margin-inline:auto; }

/* Footer mini */
.lp .lp-mini { display:flex; gap:.6rem; flex-wrap: wrap; align-items:center; justify-content:center; font-size:.9rem; color: var(--lp-text-dim); }

/* Ghost-specific niceties */
.lp .kg-width-full { width: 100%; }
/*.lp .kg-card { margin: 1rem 0; } Problème avec les embed */

/* Helper: visually emphasize focus within section */
.lp .focus-ring { outline:none; box-shadow: 0 0 0 6px var(--lp-ring); }

/* Example component blocks -------------------------------------------------- */

/* Hero variants */
.lp .hero-plain { background: radial-gradient(1000px 400px at 50% -10%, rgba(123,92,255,.18), transparent 60%); }
.lp .hero-surface { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-top: var(--lp-border); border-bottom: var(--lp-border); }

/* Banners */
.lp .banner-info { background: linear-gradient(180deg, rgba(34,211,238,.12), rgba(34,211,238,.04)); }
.lp .banner-warn { background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.04)); }
.lp .banner-success { background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.04)); }

/* Ghost Portal nudge — keep user on page (design only) */
.lp .portal-nudge { display:flex; gap:.6rem; align-items:center; font-size:.95rem; opacity:.9; }

/* Tables */
.lp table.lp-table { width:100%; border-collapse: collapse; font-size:.98rem; }
.lp table.lp-table th, .lp table.lp-table td { padding:.7rem .8rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.lp table.lp-table th { text-align:left; color: var(--lp-text); font-weight:800; }

/* Callouts / quotes */
.lp .lp-quote { padding: 1rem 1.5rem; padding-bottom: 0.3rem; border-left: 4px solid var(--lp-primary); background: var(--lp-quote); border-radius: 6px; }

/* Spacing helpers for blocks */
.lp .stack > * + * { margin-top: .85rem; }

hr { color: gray; border-style: inset; border-width: 1px; margin: 0; }

#ghost-portal-root .gh-portal-triggerbtn-iframe{ display:none !important; } */


/* Bouton light (harmonisé à ta palette) */
.btn.btn-light{ 
  background: rgba(174,191,17,.40);
  border-color: rgba(174,191,17,.80);
  color: var(--lp-text); border: var(--lp-border);
}
.btn.btn-light:hover{ background: rgba(255,255,255,.14); }


/* Section vidéo centrée */
.kg-card,.kg-embed-card {
	max-width: var(--lp-std-maxw);
	margin-inline:auto;
	display: flex;
}

/* Section vidéo centrée */
.kg-card iframe,
.kg-embed-card iframe {
	max-width: min(var(--lp-std-maxw), 100%);
	width: min(var(--lp-std-maxw), 100%);
	aspect-ratio: 16 / 9;
	height: min(calc(var(--lp-std-maxw) / 16 * 9), 100%);
	margin-inline:auto;


}


/* === Padding helpers ================================================= */
.lp .p-0 { padding: var(--s-0) !important; }
.lp .p-1 { padding: var(--s-1) !important; }
.lp .p-2 { padding: var(--s-2) !important; }
.lp .p-3 { padding: var(--s-3) !important; }
.lp .p-4 { padding: var(--s-4) !important; }
.lp .p-5 { padding: var(--s-5) !important; }
.lp .p-6 { padding: var(--s-6) !important; }
.lp .p-7 { padding: var(--s-7) !important; }

.lp .px-0 { padding-left: var(--s-0) !important; padding-right: var(--s-0) !important; }
.lp .px-1 { padding-left: var(--s-1) !important; padding-right: var(--s-1) !important; }
.lp .px-2 { padding-left: var(--s-2) !important; padding-right: var(--s-2) !important; }
.lp .px-3 { padding-left: var(--s-3) !important; padding-right: var(--s-3) !important; }
.lp .px-4 { padding-left: var(--s-4) !important; padding-right: var(--s-4) !important; }
.lp .px-5 { padding-left: var(--s-5) !important; padding-right: var(--s-5) !important; }
.lp .px-6 { padding-left: var(--s-6) !important; padding-right: var(--s-6) !important; }

.lp .py-0 { padding-top: var(--s-0) !important; padding-bottom: var(--s-0) !important; }
.lp .py-1 { padding-top: var(--s-1) !important; padding-bottom: var(--s-1) !important; }
.lp .py-2 { padding-top: var(--s-2) !important; padding-bottom: var(--s-2) !important; }
.lp .py-3 { padding-top: var(--s-3) !important; padding-bottom: var(--s-3) !important; }
.lp .py-4 { padding-top: var(--s-4) !important; padding-bottom: var(--s-4) !important; }
.lp .py-5 { padding-top: var(--s-5) !important; padding-bottom: var(--s-5) !important; }
.lp .py-6 { padding-top: var(--s-6) !important; padding-bottom: var(--s-6) !important; }

.lp .pt-0{ padding-top: var(--s-0) !important; } .lp .pt-1{ padding-top: var(--s-1) !important; }
.lp .pt-2{ padding-top: var(--s-2) !important; } .lp .pt-3{ padding-top: var(--s-3) !important; }
.lp .pt-4{ padding-top: var(--s-4) !important; } .lp .pt-5{ padding-top: var(--s-5) !important; }
.lp .pt-6{ padding-top: var(--s-6) !important; } .lp .pt-7{ padding-top: var(--s-7) !important; }

.lp .pr-0{ padding-right: var(--s-0) !important; } .lp .pr-1{ padding-right: var(--s-1) !important; }
.lp .pr-2{ padding-right: var(--s-2) !important; } .lp .pr-3{ padding-right: var(--s-3) !important; }
.lp .pr-4{ padding-right: var(--s-4) !important; } .lp .pr-5{ padding-right: var(--s-5) !important; }
.lp .pr-6{ padding-right: var(--s-6) !important; } .lp .pr-7{ padding-right: var(--s-7) !important; }

.lp .pb-0{ padding-bottom: var(--s-0) !important; } .lp .pb-1{ padding-bottom: var(--s-1) !important; }
.lp .pb-2{ padding-bottom: var(--s-2) !important; } .lp .pb-3{ padding-bottom: var(--s-3) !important; }
.lp .pb-4{ padding-bottom: var(--s-4) !important; } .lp .pb-5{ padding-bottom: var(--s-5) !important; }
.lp .pb-6{ padding-bottom: var(--s-6) !important; } .lp .pb-7{ padding-bottom: var(--s-7) !important; }

.lp .pl-0{ padding-left: var(--s-0) !important; } .lp .pl-1{ padding-left: var(--s-1) !important; }
.lp .pl-2{ padding-left: var(--s-2) !important; } .lp .pl-3{ padding-left: var(--s-3) !important; }
.lp .pl-4{ padding-left: var(--s-4) !important; } .lp .pl-5{ padding-left: var(--s-5) !important; }
.lp .pl-6{ padding-left: var(--s-6) !important; } .lp .pl-7{ padding-left: var(--s-7) !important; }

/* Safe-area helpers (iPhone notch, etc.) */
.lp .px-safe {
  padding-left: max(var(--s-4), env(safe-area-inset-left)) !important;
  padding-right: max(var(--s-4), env(safe-area-inset-right)) !important;
}
.lp .pb-safe { padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)) !important; }

/* === Margin helpers =================================================== */
.lp .m-0 { margin: var(--s-0) !important; }
.lp .m-1 { margin: var(--s-1) !important; }
.lp .m-2 { margin: var(--s-2) !important; }
.lp .m-3 { margin: var(--s-3) !important; }
.lp .m-4 { margin: var(--s-4) !important; }
.lp .m-5 { margin: var(--s-5) !important; }
.lp .m-6 { margin: var(--s-6) !important; }
.lp .m-7 { margin: var(--s-7) !important; }

.lp .mx-0 { margin-left: var(--s-0) !important; margin-right: var(--s-0) !important; }
.lp .mx-1 { margin-left: var(--s-1) !important; margin-right: var(--s-1) !important; }
.lp .mx-2 { margin-left: var(--s-2) !important; margin-right: var(--s-2) !important; }
.lp .mx-3 { margin-left: var(--s-3) !important; margin-right: var(--s-3) !important; }
.lp .mx-4 { margin-left: var(--s-4) !important; margin-right: var(--s-4) !important; }
.lp .mx-5 { margin-left: var(--s-5) !important; margin-right: var(--s-5) !important; }
.lp .mx-6 { margin-left: var(--s-6) !important; margin-right: var(--s-6) !important; }

.lp .my-0 { margin-top: var(--s-0) !important; margin-bottom: var(--s-0) !important; }
.lp .my-1 { margin-top: var(--s-1) !important; margin-bottom: var(--s-1) !important; }
.lp .my-2 { margin-top: var(--s-2) !important; margin-bottom: var(--s-2) !important; }
.lp .my-3 { margin-top: var(--s-3) !important; margin-bottom: var(--s-3) !important; }
.lp .my-4 { margin-top: var(--s-4) !important; margin-bottom: var(--s-4) !important; }
.lp .my-5 { margin-top: var(--s-5) !important; margin-bottom: var(--s-5) !important; }

.lp .mt-0{ margin-top: var(--s-0) !important; } .lp .mt-1{ margin-top: var(--s-1) !important; }
.lp .mt-2{ margin-top: var(--s-2) !important; } .lp .mt-3{ margin-top: var(--s-3) !important; }
.lp .mt-4{ margin-top: var(--s-4) !important; } .lp .mt-5{ margin-top: var(--s-5) !important; }
.lp .mt-6{ margin-top: var(--s-6) !important; } .lp .mt-7{ margin-top: var(--s-7) !important; }

.lp .mr-0{ margin-right: var(--s-0) !important; } .lp .mr-1{ margin-right: var(--s-1) !important; }
.lp .mr-2{ margin-right: var(--s-2) !important; } .lp .mr-3{ margin-right: var(--s-3) !important; }
.lp .mr-4{ margin-right: var(--s-4) !important; } .lp .mr-5{ margin-right: var(--s-5) !important; }

.lp .mb-0{ margin-bottom: var(--s-0) !important; } .lp .mb-1{ margin-bottom: var(--s-1) !important; }
.lp .mb-2{ margin-bottom: var(--s-2) !important; } .lp .mb-3{ margin-bottom: var(--s-3) !important; }
.lp .mb-4{ margin-bottom: var(--s-4) !important; } .lp .mb-5{ margin-bottom: var(--s-5) !important; }
.lp .mb-6{ margin-bottom: var(--s-6) !important; } .lp .mb-7{ margin-bottom: var(--s-7) !important; }

.lp .ml-0{ margin-left: var(--s-0) !important; } .lp .ml-1{ margin-left: var(--s-1) !important; }
.lp .ml-2{ margin-left: var(--s-2) !important; } .lp .ml-3{ margin-left: var(--s-3) !important; }
.lp .ml-4{ margin-left: var(--s-4) !important; } .lp .ml-5{ margin-left: var(--s-5) !important; }

/* Auto-centering helpers */
.lp .mx-auto{ margin-left: auto !important; margin-right: auto !important; }
.lp .my-auto{ margin-top: auto !important;  margin-bottom: auto !important; }
/* Utilitaire pour pousser un bloc en bas de colonne */
.lp .push-bottom { margin-top: auto !important; }

/* === Responsive variants (sm ≥600, md ≥960, lg ≥1200) ================ */
@media (min-width: 600px){
  .lp .sm-px-4 { padding-left: var(--s-4) !important; padding-right: var(--s-4) !important; }
  .lp .sm-pt-6 { padding-top: var(--s-6) !important; }
  .lp .sm-mb-6 { margin-bottom: var(--s-6) !important; }
  /* Ajoute ici les variantes que tu utilises le plus souvent */
}
@media (min-width: 960px){
  .lp .md-p-0 { padding: var(--s-0) !important; }
  .lp .md-py-6{ padding-top: var(--s-6) !important; padding-bottom: var(--s-6) !important; }
  .lp .md-mt-7{ margin-top: var(--s-7) !important; }
}
@media (min-width: 1200px){
  .lp .lg-px-6{ padding-left: var(--s-6) !important; padding-right: var(--s-6) !important; }
  .lp .lg-mb-7{ margin-bottom: var(--s-7) !important; }
}


/* === Responsive variants (sm ≥600, md ≥960, lg ≥1200) ================ */
@media (max-width: 600px){
  .lp { margin-left: 0;  margin-right: 0; padding-left: 0 !important; padding-right: 0 !important; }
  .lp .lp-section { padding-left: var(--s-2) !important; padding-right: var(--s-2) !important; margin-inline:auto; }
  .lp-section.ribbon { margin-left: 0px; margin-right: 0px; padding-left: 1rem; padding-right: 1rem; margin-inline:auto; }
}
@media (min-width: 600px){
  .lp { padding-left: 0 !important; padding-right: 0 !important; }
  .lp .lp-section { padding-left: var(--s-4) !important; padding-right: var(--s-4) !important; margin-inline:auto; }
  .lp-section.ribbon { margin-left: 0px; margin-right: 0px; padding-left: var(--s-4); padding-right: var(--s-4); margin-inline:auto; }
}
@media (min-width: 960px){
  .lp { padding-left: 0 !important; padding-right: 0 !important; }
  .lp .lp-section { padding-left: var(--s-6) !important; padding-right: var(--s-6) !important; margin-inline:auto; }
  .lp-section.ribbon { margin-left: 0px; margin-right: 0px; padding-left: var(--s-6); padding-right: var(--s-6); margin-inline:auto; }
}
@media (min-width: 1200px){
  .lp { padding-left: 0 !important; padding-right: 0 !important; }
  .lp .lp-section { padding-left: var(--s-7) !important; padding-right: var(--s-7) !important; margin-inline:auto; }
  .lp-section.ribbon { margin-left: 0px; margin-right: 0px; padding-left: var(--s-7); padding-right: var(--s-7); margin-inline:auto; }
}


/* End of landing.css */