/* === Fix personas onetiers/twotiers homepage (8 mai 2026, v4).
   Hauteurs DISTINCTES preservees : onetiers = 20rem (320px), twotiers = 24rem (384px) -
   c'est la hierarchie visuelle voulue par le design original. !important pour battre les
   regles existantes du style.css build qui ne peuvent pas etre overridees autrement. */
.onetiers .blocs-arrow {
  height: 20rem !important;
  min-height: 20rem !important;
  position: relative !important;
}
.twotiers .blocs-arrow {
  height: 24rem !important;
  min-height: 24rem !important;
  position: relative !important;
}
.blocs-arrow > .overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit;
}
.blocs-arrow > .persona-name { z-index: 40; }
.overlay picture.persona-pic {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block;
  border-radius: inherit;
}
.overlay picture.persona-pic > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit;
}

/* === Equilibrage colonnes Wallet/Carte de visite/Bague (homepage section #supports-nfc).
   Force la div interne a remplir 100% du col3 pour egaliser visuellement les 3 colonnes
   malgre la longueur differente du texte de chaque card. */
#supports-nfc.colcont .col3 { display: flex; align-items: stretch; }
#supports-nfc.colcont .col3 > div { display: flex; flex-direction: column; height: 100%; width: 100%; }

/* === Fix responsive mobile homepage (8 mai 2026).
   Probleme : les blocs ecologie/souverainete (.whitefull-bloc-cont > .colcont > .bloc-ecpd)
   n'ont pas de padding horizontal en mobile, donc les blocs collent aux bords de l'ecran.
   Les autres sections du site (.whiteback-2xl) ont padding 2rem et donnent le standard visuel. */
.whitefull-bloc-cont { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; }
@media (min-width: 1024px) {
  .whitefull-bloc-cont { padding-left: 2rem; padding-right: 2rem; }
}

/* === CTA centres systematiquement sur mobile (8 mai 2026).
   Tous les boutons .btn directement dans un bloc texte (paragraph-bloc, content-half,
   bloc-ecpd, home-normandie-content) doivent etre centres en mobile pour la lisibilite. */
@media (max-width: 1023px) {
  .paragraph-bloc > a.btn,
  .paragraph-bloc > div > a.btn,
  .content-half > a.btn,
  .content-half > div > a.btn,
  .bloc-ecpd > div > a.btn,
  .home-normandie-content > a.btn,
  .centertitle > a.btn,
  .centertitle > div > a.btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    max-width: 100%;
  }
}

/* === Fix section "Solution NFC" homepage (8 mai 2026).
   Avant : les 2 col-half avaient style="width: calc(50% - 1.25rem)" inline qui forçait
   50% meme sur iPhone, ecrasant la video et le texte. Apres : retire les styles inline
   et laisse la classe .content-half gerer le responsive (100% mobile, 50% desktop).
   Sur desktop on garde un gap visuel via les paddings .paragraph-bloc existants. */

/* === Encart pricing-card (utilisé sur les hero des 3 pages offres : Essentielle/Pro/Infinicy) ===
   Auparavant inliné dans chaque template — factorisé ici pour DRY + cache navigateur. */
.offre-pricing-card { background:#f8f8fa; border-left:4px solid #634cfa; padding:1.5rem 1.75rem; margin:1.5rem 0; border-radius:12px; }
.offre-pricing-card-head { display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.35rem; }
.offre-pricing-card-amount { font-size:2.25rem; font-weight:700; color:#634cfa; line-height:1; }
.offre-pricing-card-period { font-size:1rem; color:#1d184e; opacity:0.8; }
.offre-pricing-card-degressive { font-size:0.85rem; color:#634cfa; font-weight:500; margin:0 0 0.85rem; }
/* Sélecteur renforcé (.offre-pricing-card .offre-pricing-card-features = spécificité 0,2,0)
   pour battre la règle globale `.page-content main ul { list-style: initial }` (0,1,2). */
.offre-pricing-card .offre-pricing-card-features { list-style:none; padding:0; margin:0; }
.offre-pricing-card .offre-pricing-card-features li { position:relative; padding:0.4rem 0 0.4rem 1.5rem; line-height:1.5; }
.offre-pricing-card .offre-pricing-card-features li::marker { content:""; }
.offre-pricing-card .offre-pricing-card-features li::before { content:"✓"; position:absolute; left:0; top:0.4rem; color:#634cfa; font-weight:700; }

/* === Hero offres v2 (Option B) ===
   - Bandeau supérieur full-width : breadcrumb + H1 (l'intro est descendue dans la cta-col)
   - Sous le bandeau, 2 colonnes desktop : VISUAL gauche 40% + CTA droite 60%
   - Ordre DOM : header → visual → cta. Mobile flow respecté via les ordres existants
     (visual:1, cta:2 → mobile : header (0) → visual (1) → cta (2) verticalement).
   - Paddings .paragraph-bloc (3rem 4rem desktop) conservés sur la cta-col.
*/
.hero-offre-v2{flex-wrap:wrap;align-items:center}
.hero-offre-v2 .hero-offre-header{width:100%;flex-basis:100%;padding:1rem 1rem 0}
.hero-offre-v2 .hero-offre-header h1{font-size:2.25rem;line-height:1.2;max-width:60rem;margin:0}
@media (min-width:1024px){
  .hero-offre-v2 .hero-offre-header{padding:0 4rem}
  .hero-offre-v2 .hero-offre-header h1{font-size:2.5rem}
  /* 40% / 60% desktop. Spécificité élevée pour battre la règle existante
     `body.page-content .whiteback-2xl > .content-half:not(.paragraph-bloc) { padding:1rem }`. */
  body.page-content .whiteback-2xl.hero-offre-v2>.content-half.hero-offre-visual-col{flex-basis:40%;width:40%}
  body.page-content .whiteback-2xl.hero-offre-v2>.content-half.hero-offre-cta-col{flex-basis:60%;width:60%}
}
.boxed-full-width{margin:auto;max-width:1536px}.page-content main ul{list-style:initial;margin:10px 0 15px 15px}hr{border:none;border-top:2px solid}.automia hr{border-top:0;border-color:#e5e7eb;border-style:solid;box-sizing:border-box}.boxed-full-width h2,.boxed-full-width h3{margin-bottom:2rem}.boxed-full-width p{margin-bottom:1.2rem}.paragraph-bloc{padding:1rem}.pb-8{padding-bottom:2rem}.px-8{padding-left:2rem;padding-right:2rem}.pb-10{padding-bottom:2.5rem}.py-16{padding-bottom:4rem;padding-top:4rem}.justify-center{justify-content:center}.object-fit-img{border:1px solid #e8e8ed;border-radius:24px;box-shadow:0 4px 4px 0 rgba(0,0,0,.25);width:100%}.title{max-width:48rem;text-align:center}h2 span.badge:before{vertical-align:-10%}.purpleback-full>div>p.cardsubtext{padding-top:0}.purpleback-full .content-full .paragraph-bloc{color:#fff}.purpleback-full .paragraph-bloc a.btn{background:var(--primary-color)}.purpleback-full .paragraph-bloc a.btn.ctarrow:hover:after{margin-left:20px;transition-duration:.35s;fill:var(--primary-color);background-color:var(--primary-color)}.content-full{display:flex;flex-direction:column}.content-half{width:100%}body.page-content .content-full>.content-half:not(.paragraph-bloc),body.page-content .whiteback-2xl>.content-half:not(.paragraph-bloc){order:1;padding:1rem}body.page-content .content-full>.content-half.paragraph-bloc,body.page-content .whiteback-2xl>.content-half.paragraph-bloc{order:2}@media (min-width:1024px){.content-full{flex-direction:row}.content-half{width:50%}body.page-content .content-full>.content-half:not(.paragraph-bloc){order:0;padding:0}body.page-content .content-full>.content-half.paragraph-bloc{order:0}.object-fit-img{border:1px solid #e8e8ed;border-radius:24px;box-shadow:0 4px 4px 0 rgba(0,0,0,.25);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.paragraph-bloc{padding:3rem 4rem}section.boxed-full-width{padding:3rem 0}}