/* ============================================================
   PICTORI — habillage des sections Elementor
   ------------------------------------------------------------
   pictori.css apporte les variables de marque. Cette feuille-ci
   traduit le design sur le balisage que produit Elementor.

   POURQUOI DES IDENTIFIANTS ET PAS DES CLASSES
   Elementor 4.0.8 n'enregistre le controle "CSS Classes"
   (_css_classes) que sur les WIDGETS. Sections et colonnes ne
   l'ont pas : la seule prise commune est "CSS ID" (_element_id).
   D'ou la convention :
       section / colonne  ->  #px-xxx      (identifiant)
       widget             ->  .px-xxx      (classe)
   Les familles de sections passent par [id^="px-entete"].

   On ne cible jamais une structure interne d'Elementor seule :
   toujours prefixee par un de nos identifiants ou classes.
   ============================================================ */


/* ------------------------------------------------------------
   PRIORITE SUR LE CSS DU THEME
   functions.php echo un <style> en fin de wp_head avec des regles
   en !important sur "*, body" et "h1,h2,h3,h4". Comme il est
   injecte APRES nos feuilles, il gagne a poids egal. On repasse
   donc devant sur les seuls points concernes — polices et images
   — et uniquement a l'interieur de nos sections px-*.
   A supprimer le jour ou le code du theme sera rapatrie proprement.
   ------------------------------------------------------------ */
.px-titre .elementor-heading-title,
.px-titre h2, .px-titre h3,
.px-h1 .elementor-heading-title, .px-h1 h1 { font-family: var(--serif) !important; }

.px-surtitre .elementor-heading-title,
.px-texte, .px-texte p, .px-accroche p,
.px-seg-titre .elementor-heading-title,
.px-borne-titre .elementor-heading-title,
.px-btn .elementor-button,
.px-liste .elementor-icon-list-item,
.px-etape .elementor-icon-box-title,
.px-etape .elementor-icon-box-description,
.px-carte .elementor-icon-box-title,
.px-carte .elementor-icon-box-description,
.px-faq .elementor-tab-title { font-family: var(--sans) !important; }

/* les logos clients doivent rester petits malgre les regles globales */
.px-rangee img { height: clamp(22px,2.6vw,34px) !important; width: auto !important; }

/* ---------- largeur commune ---------- */
#px-hero > .elementor-container,
#px-clients > .elementor-container,
#px-segments > .elementor-container,
#px-bornes > .elementor-container,
#px-contours > .elementor-container,
#px-espace > .elementor-container,
#px-tunnel > .elementor-container,
#px-inclus > .elementor-container,
#px-parc > .elementor-container,
#px-avis-rangee > .elementor-container,
#px-faq-section > .elementor-container,
#px-final > .elementor-container { max-width: 1200px; }

/* ATTENTION A LA SPECIFICITE
   Un selecteur d'attribut pese comme une CLASSE, pas comme un identifiant.
   [id^="px-entete"] > .elementor-container vaut 0,2,0 et perdait face a
   .elementor-section.elementor-section-boxed > .elementor-container (0,3,0)
   d'Elementor : les en-tetes restaient a 1140px quand tout le reste passait
   a 1200px, d'ou un decalage de 30px entre les titres et les cartes.
   On remonte donc au-dessus de la regle d'Elementor. */
.elementor-section.elementor-section-boxed[id^="px-entete"] > .elementor-container { max-width: 1200px; }

/* ---------- fonds ---------- */
#px-entete-bornes,
#px-bornes,
#px-espace,
#px-entete-avis,
#px-avis-rangee { background: var(--rose-voile); }

/* ---------- sections centrees ---------- */
/* Seules deux en-tetes sont centrees, comme dans la maquette. Centrer les
   autres donnait un titre a gauche et son paragraphe au centre.
   On cible le WIDGET et non .elementor-widget-container : avec l'option
   "markup optimise" d'Elementor 4, ce conteneur intermediaire n'existe pas. */
#px-entete-inclus .elementor-widget,
#px-entete-avis .elementor-widget,
#px-parc .elementor-widget,
#px-final .elementor-widget,
#px-entete-inclus .elementor-widget-container,
#px-entete-avis .elementor-widget-container,
#px-parc .elementor-widget-container,
#px-final .elementor-widget-container,
#px-faq-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .px-surtitre .elementor-widget-container,
#px-faq-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .px-titre .elementor-widget-container { text-align: center; }

#px-entete-inclus .px-surtitre .elementor-heading-title,
#px-entete-avis .px-surtitre .elementor-heading-title,
#px-parc .px-surtitre .elementor-heading-title,
#px-final .px-surtitre .elementor-heading-title,
#px-faq-section .px-surtitre .elementor-heading-title { justify-content: center; }

/* ============================================================
   TITRES, TEXTES, BOUTONS, LISTES  (widgets, donc classes)
   ============================================================ */
.px-surtitre .elementor-heading-title,
.px-surtitre h1, .px-surtitre h2, .px-surtitre div {
  font-family: var(--sans);
  /* le kit Elementor colore tous les titres : on impose la teinte du surtitre */
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rose-fonce) !important;
  margin: 0 0 18px;
}

.px-titre .elementor-heading-title,
.px-titre h2, .px-titre h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.06; letter-spacing: -.025em; color: var(--encre); margin: 0;
}

.px-h1 .elementor-heading-title, .px-h1 h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.7rem, 6.8vw, 5rem);
  line-height: 1.06; letter-spacing: -.025em; color: var(--encre);
  margin: 0 0 24px; max-width: 800px;
}
/* le mot souligne du titre principal */
.px-h1 em { font-style: normal; position: relative; z-index: 1; white-space: nowrap; }
.px-h1 em::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .05em;
  height: .34em; background: var(--rose); z-index: -1; border-radius: 3px;
}

.px-texte p, .px-accroche p, .px-seg-texte p, .px-borne-texte p {
  color: var(--encre-douce); margin: 0 0 1em;
}
[id^="px-entete"] .px-texte p { font-size: 1.08rem; max-width: 660px; }
#px-entete-inclus .px-texte p, #px-entete-avis .px-texte p { margin-left: auto; margin-right: auto; }
#px-parc .px-texte p, #px-final .px-texte p { margin-left: auto; margin-right: auto; }
.px-accroche p { font-size: 1.16rem; max-width: 550px; }

/* boutons ---------------------------------------------------------------- */
/* Les widgets Elementor sont des elements flex a width:100% dans la colonne :
   un display:inline-block sur le widget est ignore. Pour poser deux boutons
   cote a cote il faut leur rendre une largeur automatique. */
.px-btn { width: auto !important; margin: 0 10px 10px 0; }
#px-parc .px-btn, #px-final .px-btn { margin: 0 5px 10px; }
.px-btn .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; border-radius: 100px; border: 2px solid transparent;
  font-family: var(--sans); font-weight: 600; font-size: .96rem;
  text-decoration: none; line-height: 1;
  transition: transform .25s cubic-bezier(.2,.9,.3,1), background .25s, color .25s, border-color .25s;
}
.px-btn-p .elementor-button { background-color: var(--rose) !important; color: var(--encre) !important; }
.px-btn-p .elementor-button:hover { background-color: var(--rose-fonce) !important; color: var(--blanc) !important; transform: translateY(-3px); }
.px-btn-s .elementor-button { background-color: transparent !important; border-color: var(--rose); color: var(--encre) !important; }
.px-btn-s .elementor-button:hover { background: var(--rose-pale); transform: translateY(-3px); }
.px-btn-n .elementor-button { background-color: var(--encre) !important; color: var(--blanc) !important; }
.px-btn-n .elementor-button:hover { background-color: var(--rose-fonce) !important; transform: translateY(-3px); }
.px-btn-clair .elementor-button { background-color: var(--blanc) !important; color: var(--encre) !important; }
.px-btn-clair .elementor-button:hover { background: var(--rose-pale); transform: translateY(-3px); }
#px-parc .px-btn, #px-final .px-btn { margin: 0 5px 10px; }

/* listes ----------------------------------------------------------------- */
.px-liste .elementor-icon-list-items { padding: 0; margin: 0; list-style: none; }
.px-liste .elementor-icon-list-item {
  display: flex; gap: 11px; align-items: flex-start;
  color: var(--encre-douce); font-size: .95rem; margin-bottom: 10px;
}
/* Elementor pose sa propre puce (svg ou balise i selon les reglages).
   La notre est un ::before : sans ce masquage on voit deux coches. */
.px-liste .elementor-icon-list-icon,
.px-liste .elementor-icon-list-item > i,
.px-liste .elementor-icon-list-item > svg,
.px-liste .elementor-icon-list-icon svg,
.px-liste .elementor-icon-list-icon i { display: none !important; }
.px-liste .elementor-icon-list-item::before {
  content: ""; flex: 0 0 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: var(--rose-pale) center/11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8768a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ============================================================
   1. HERO
   ============================================================ */
#px-hero {
  position: relative; overflow: hidden; background: var(--rose-voile);
  padding: clamp(120px, 14vw, 170px) 0 clamp(70px, 9vw, 100px);
}
#px-hero > .elementor-container { position: relative; z-index: 5; }
/* les plans decoratifs sont positionnes, donc peints au-dessus d'un texte
   statique : on remonte explicitement chaque widget de contenu. */
#px-hero .elementor-widget { position: relative; z-index: 2; }
#px-hero .px-decor { position: static; z-index: auto; }

.px-plans { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.px-plans > span { position: absolute; display: block; }
.px-d1 { width: min(46vw,540px); aspect-ratio: 1; border-radius: 50%; background: var(--rose-pale); top: -14%; right: -9%; }
.px-d2 { width: min(24vw,260px); aspect-ratio: 1; border-radius: 50%; background: var(--rose); opacity: .28; bottom: -8%; left: -6%; }
.px-d3 { width: min(13vw,140px); aspect-ratio: 1; border-radius: 50%; background: var(--rose); opacity: .2; top: 22%; left: 52%; }
.px-colonnes { inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 4vw; }
.px-colonnes i { width: clamp(24px,3.2vw,42px); background: var(--rose-pale); border-radius: 6px 6px 0 0; display: block; }
.px-colonnes i:nth-child(odd) { height: 38vh; }
.px-colonnes i:nth-child(even) { height: 24vh; }
.px-pola {
  width: clamp(108px,12.5vw,176px); aspect-ratio: 3/3.7;
  background-size: cover; background-position: center;
  border: 9px solid var(--blanc); border-bottom-width: 32px;
  box-shadow: 0 20px 44px -16px rgba(36,31,30,.24);
}
/* les polaroids restent hors de la colonne de texte */
.px-p1 { top: 12%; left: 2%; transform: rotate(-9deg); }
.px-p2 { top: 62%; left: 4%; transform: rotate(7deg); }
.px-p3 { top: 9%; right: 3%; transform: rotate(11deg); }
.px-p4 { top: 60%; right: 4%; transform: rotate(-6deg); }
/* Attention a la specificite : la regle de base ".px-plans > span" vaut
   0,1,1 et battait ".px-p1" (0,1,0). Les masquages doivent donc passer
   par le meme niveau de descendance, sinon la media query reste sans effet. */
/* Le contenu fait 1200px centres : sous ~1660px de fenetre il ne reste pas
   assez de marge laterale pour poser un polaroid sans mordre sur le texte.
   On les retire plutot que de les laisser passer devant le titre. */
@media (max-width: 1660px) { .px-plans > .px-p1, .px-plans > .px-p2 { display: none; } }
@media (max-width: 1500px) { .px-plans > .px-p4 { display: none; } }
@media (max-width: 1020px) { .px-plans > .px-p4 { display: none; } .px-plans > .px-p3 { right: -4%; opacity: .55; } }
@media (max-width: 760px) { .px-plans > .px-colonnes { display: none; } .px-plans > .px-p3 { display: none; } }

.px-mentions p {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: .88rem; color: var(--encre-douce); margin: 22px 0 0;
}
.px-mentions span { display: flex; align-items: center; gap: 8px; }
.px-mentions span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }

/* ============================================================
   2. LOGOS CLIENTS
   ============================================================ */
#px-clients { padding: 44px 0 48px; border-bottom: 1px solid var(--bord); }
.px-titre-logos p {
  text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--encre-douce); margin: 0 0 28px;
}
.px-rangee { display: flex; align-items: center; justify-content: center; gap: clamp(26px,5vw,60px); flex-wrap: wrap; }
.px-rangee img {
  height: clamp(22px,2.6vw,34px); width: auto; opacity: .5;
  filter: grayscale(1); transition: opacity .3s, filter .3s;
}
.px-rangee img:hover { opacity: 1; filter: grayscale(0); }

/* ============================================================
   3. SEGMENTS particuliers / professionnels
   ============================================================ */
[id^="px-entete"] { padding: clamp(70px,9vw,120px) 0 0; }
#px-segments { padding: 40px 0 clamp(70px,9vw,120px); }
#px-segments > .elementor-container { gap: 24px; align-items: stretch; }

[id^="px-seg-"] { position: relative; }
[id^="px-seg-"] > .elementor-widget-wrap {
  position: relative; overflow: hidden; border-radius: 26px;
  min-height: 380px; align-content: flex-end;
  padding: 34px !important;
  transition: transform .45s cubic-bezier(.2,.9,.3,1), box-shadow .45s;
}
[id^="px-seg-"]:hover > .elementor-widget-wrap {
  transform: translateY(-8px); box-shadow: 0 34px 64px -30px rgba(36,31,30,.42);
}
[id^="px-seg-"] .px-fond { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
[id^="px-seg-"] .px-voile { position: absolute; inset: 0; z-index: 1; background: rgba(36,31,30,.42); transition: background .4s; }
[id^="px-seg-"]:hover .px-voile { background: rgba(36,31,30,.30); }
/* Le fond photo est en position absolue sur toute la carte. Si on rend
   AUSSI son widget conteneur relatif, il devient le referent : or ce widget
   fait 0 de haut, et la photo disparaissait. On l'exclut explicitement. */
[id^="px-seg-"] .elementor-widget:not(.px-seg-fond) { position: relative; z-index: 2; }
[id^="px-seg-"] .px-seg-fond { position: static; }
[id^="px-seg-"] .px-kicker p {
  font-size: .74rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--blanc); opacity: .9; margin: 0 0 6px;
}
[id^="px-seg-"] .px-seg-titre .elementor-heading-title {
  font-family: var(--sans) !important; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.5rem,2.6vw,2.05rem); color: var(--blanc) !important; margin: 0;
}
[id^="px-seg-"] .px-seg-texte p { color: var(--blanc); opacity: .9; font-size: .96rem; margin: 8px 0 18px; max-width: 400px; }

/* ============================================================
   4. LES BORNES
   ============================================================ */
#px-bornes { padding: 40px 0 clamp(70px,9vw,120px); }
#px-bornes > .elementor-container { gap: 24px; align-items: stretch; }
[id^="px-brn-"] > .elementor-widget-wrap {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 26px;
  overflow: hidden; padding: 0 0 30px !important; align-content: flex-start;
  transition: transform .4s cubic-bezier(.2,.9,.3,1), border-color .4s, box-shadow .4s;
}
[id^="px-brn-"]:hover > .elementor-widget-wrap {
  transform: translateY(-7px); border-color: var(--rose);
  box-shadow: 0 26px 54px -26px rgba(36,31,30,.26);
}
.px-borne-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
[id^="px-brn-"] .px-badge,
[id^="px-brn-"] .px-borne-titre,
[id^="px-brn-"] .px-borne-texte,
[id^="px-brn-"] .px-liste,
[id^="px-brn-"] .px-btn { margin-left: 28px; margin-right: 28px; }
/* Le badge se pose SUR la photo, comme dans la maquette. Image et badge etant
   deux widgets distincts dans Elementor, on l'ancre sur la colonne. */
[id^="px-brn-"] { position: relative; }
[id^="px-brn-"] .px-badge {
  position: absolute !important; top: 16px; left: 16px; z-index: 3;
  width: auto !important; margin: 0 !important;
}
[id^="px-brn-"] .px-badge p {
  display: inline-block; background: var(--blanc); border: 1px solid var(--bord);
  padding: 6px 15px; border-radius: 100px; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre); margin: 0;
}
[id^="px-brn-"] .px-borne-titre { margin-top: 26px; }
[id^="px-brn-"] .px-borne-titre .elementor-heading-title {
  font-family: var(--sans); font-weight: 700; font-size: 1.2rem; margin: 0 0 9px;
}
[id^="px-brn-"] .px-borne-texte p { font-size: .96rem; margin-bottom: 20px; }
[id^="px-brn-"] .px-liste { margin-bottom: 26px; }

/* ============================================================
   5. & 6. BLOCS EN DEUX COLONNES
   ============================================================ */
#px-contours, #px-espace, #px-tunnel { padding: clamp(76px,10vw,140px) 0; }
#px-contours > .elementor-container,
#px-espace > .elementor-container,
#px-tunnel > .elementor-container { gap: 64px; align-items: center; }
#px-tunnel > .elementor-container { align-items: flex-start; }

/* apercu des contours : deux tirages 10x15 empiles */
.px-apercu-contours { background: var(--rose-pale); border-radius: 26px; padding: clamp(34px,5vw,58px) 24px; }
.px-apercu-contours .px-pile { position: relative; width: min(340px,100%); aspect-ratio: 1/1.02; margin: 0 auto; }
.px-tirage {
  position: absolute; width: 58%; aspect-ratio: 10/15; background: var(--rose);
  padding: 5.5%; display: flex; flex-direction: column; gap: 3.5%;
  box-shadow: 0 28px 56px -22px rgba(36,31,30,.42);
  transition: transform .5s cubic-bezier(.2,.9,.3,1);
}
.px-tirage .px-vue { flex: 1; width: 100%; background: var(--rose-fonce) center/cover; border-radius: 2px; }
.px-tirage .px-bandeau {
  flex: 0 0 18%; min-height: 0; overflow: hidden; padding-top: 3.5%;
  text-align: center; color: var(--blanc); line-height: 1.2;
}
.px-tirage .px-bandeau b { display: block; font-family: var(--serif); font-weight: 600; font-size: .9rem; }
.px-tirage .px-bandeau i { display: block; font-style: normal; font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; margin-top: 3px; opacity: .9; }
.px-t-duo { left: 0; top: 8%; transform: rotate(-7deg); }
.px-t-solo { right: 0; top: 0; z-index: 2; transform: rotate(5deg); }
.px-apercu-contours:hover .px-t-duo { transform: rotate(-10deg) translate(-5px,-6px); }
.px-apercu-contours:hover .px-t-solo { transform: rotate(8deg) translate(5px,-6px); }
.px-etiq {
  position: absolute; z-index: 3; background: var(--blanc); color: var(--encre);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; box-shadow: 0 6px 16px -6px rgba(36,31,30,.4);
}
.px-e-duo { left: 2%; bottom: 4%; }
.px-e-solo { right: 2%; bottom: 14%; }

/* apercu de l'espace client */
.px-apercu-espace { background: var(--encre); border-radius: 26px; padding: 26px; box-shadow: 0 30px 60px -30px rgba(36,31,30,.5); }
.px-fenetre { background: var(--blanc); border-radius: 14px; overflow: hidden; }
.px-fenetre .px-barre { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--bord); }
.px-fenetre .px-barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--bord); display: block; }
.px-fenetre .px-barre i:first-child { background: var(--rose); }
.px-fenetre .px-corps { padding: 18px; }
.px-titre-app { font-weight: 700; font-size: .94rem; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.px-titre-app em { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-fonce); background: var(--rose-pale); padding: 4px 10px; border-radius: 100px; }
.px-mosaique { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.px-mosaique i { display: block; aspect-ratio: 1; border-radius: 6px; background: var(--rose-pale) center/cover; }
.px-ligne-btn { display: flex; gap: 8px; margin-top: 16px; }
.px-faux-btn { flex: 1; text-align: center; padding: 10px; border-radius: 100px; font-size: .76rem; font-weight: 600; background: var(--rose); color: var(--encre); }
.px-faux-btn.px-vide { background: transparent; border: 1.5px solid var(--bord); color: var(--encre-douce); }

@media (max-width: 940px) {
  #px-contours > .elementor-container,
  #px-espace > .elementor-container,
  #px-tunnel > .elementor-container { gap: 44px; }
}

/* ============================================================
   7. COMMENT CA MARCHE
   ============================================================ */
#px-tunnel { background: var(--rose-voile); }
#px-col-collante > .elementor-widget-wrap { position: sticky; top: 124px; }
@media (max-width: 900px) { #px-col-collante > .elementor-widget-wrap { position: static; } }
.px-rassure p {
  background: var(--rose-pale); border-radius: 18px; padding: 20px 24px;
  font-size: .95rem; color: var(--encre); margin: 22px 0 0;
}
#px-col-etapes .elementor-widget { margin-bottom: 14px; }
.px-etape .elementor-widget-container {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 18px;
  padding: 26px 26px 26px 84px; position: relative;
  transition: border-color .35s, transform .35s;
}
.px-etape:hover .elementor-widget-container { border-color: var(--rose); transform: translateX(6px); }
.px-etape .elementor-widget-container::before {
  position: absolute; left: 26px; top: 26px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--rose); color: var(--blanc);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.14rem; font-weight: 700;
}
.px-etape-1 .elementor-widget-container::before { content: "01"; }
.px-etape-2 .elementor-widget-container::before { content: "02"; }
.px-etape-3 .elementor-widget-container::before { content: "03"; }
.px-etape-4 .elementor-widget-container::before { content: "04"; }
.px-etape .elementor-icon-box-icon { display: none; }
.px-etape .elementor-icon-box-title,
.px-etape .elementor-icon-box-title a {
  font-family: var(--sans); font-weight: 700; font-size: 1.12rem;
  color: var(--encre); margin: 0 0 6px; text-align: left;
}
.px-etape .elementor-icon-box-description { font-size: .95rem; color: var(--encre-douce); margin: 0; text-align: left; }

/* ============================================================
   8. CE QUI EST INCLUS
   ============================================================ */
#px-entete-inclus { background: var(--rose-pale); }
#px-inclus { padding: 40px 0 clamp(70px,9vw,120px); background: var(--rose-pale); }
#px-inclus > .elementor-container { gap: 20px; align-items: stretch; }
.px-carte .elementor-widget-container {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 18px;
  padding: 32px 28px; height: 100%;
  transition: border-color .35s, transform .35s;
}
.px-carte:hover .elementor-widget-container { border-color: var(--rose); transform: translateY(-5px); }
.px-carte .elementor-icon-box-icon { display: none; }
.px-carte .elementor-icon-box-title {
  font-family: var(--sans); font-weight: 700; font-size: 1.06rem;
  color: var(--encre); margin: 0 0 8px; text-align: left;
}
.px-carte .elementor-icon-box-description { font-size: .93rem; color: var(--encre-douce); margin: 0; text-align: left; }

/* ============================================================
   9. BANDEAU SOMBRE — le parc
   ============================================================ */
#px-parc { position: relative; overflow: hidden; background: var(--encre); padding: clamp(80px,10vw,130px) 0; }
#px-parc .px-surtitre .elementor-heading-title { color: var(--rose) !important; }
#px-parc .px-titre .elementor-heading-title { color: var(--blanc) !important; }
#px-parc .px-texte p { color: #d8cfcc; font-size: 1.1rem; max-width: 720px; }

/* ============================================================
   10. AVIS
   ============================================================ */
#px-avis-rangee { padding: 40px 0 clamp(70px,9vw,120px); }
#px-avis-rangee > .elementor-container { gap: 20px; align-items: stretch; }
.px-avis .elementor-widget-container {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 18px;
  padding: 30px 28px; height: 100%;
}
.px-avis .elementor-testimonial-wrapper { text-align: left; }
.px-avis .elementor-testimonial-content { font-size: .96rem; color: var(--encre-douce); margin-bottom: 14px; }
.px-avis .elementor-testimonial-name { font-weight: 600; color: var(--encre); }
.px-avis .elementor-testimonial-job { color: var(--encre-douce); font-size: .86rem; }

/* ============================================================
   11. FAQ
   ============================================================ */
#px-faq-section { padding: clamp(70px,9vw,120px) 0; background: var(--rose-voile); }
.px-faq { max-width: 820px; margin: 0 auto; text-align: left; }
.px-faq .elementor-toggle-item { border-bottom: 1px solid var(--bord); }
.px-faq .elementor-tab-title {
  padding: 21px 42px 21px 0; font-family: var(--sans); font-weight: 600;
  font-size: 1.04rem; color: var(--encre); border: none; background: none;
  position: relative; transition: color .25s;
}
.px-faq .elementor-tab-title:hover { color: var(--rose-fonce); }
.px-faq .elementor-toggle-icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--rose-fonce); }
.px-faq .elementor-tab-content { border: none; padding: 0 40px 21px 0; color: var(--encre-douce); font-size: .97rem; }

/* ============================================================
   12. APPEL FINAL
   ============================================================ */
#px-final { background: var(--rose); padding: clamp(70px,9vw,120px) 0; }
#px-final .px-titre .elementor-heading-title { margin-bottom: 18px; }
#px-final .px-texte p { color: var(--encre); opacity: .84; max-width: 520px; font-size: 1.06rem; margin-bottom: 30px; }

/* ---------- respect du mouvement reduit ---------- */
@media (prefers-reduced-motion: reduce) {
  [id^="px-seg-"] > .elementor-widget-wrap,
  [id^="px-brn-"] > .elementor-widget-wrap,
  .px-tirage, .px-etape .elementor-widget-container,
  .px-carte .elementor-widget-container,
  .px-btn .elementor-button { transition: none !important; }
}

/* ============================================================
   BANDE DE CHIFFRES (sous le hero)
   Elle figurait dans la maquette d'origine et manquait a la
   reconstruction : quatre reperes de confiance avant les offres.
   ============================================================ */
#px-preuve { border-bottom: 1px solid var(--bord); padding: 34px 0; }
#px-preuve > .elementor-container { max-width: 1200px; }
#px-preuve .elementor-widget-container { text-align: center; }
.px-chiffre .elementor-heading-title {
  font-family: var(--serif) !important; font-weight: 600;
  font-size: 1.9rem; line-height: 1.1; color: var(--encre); margin: 0;
}
.px-etoiles .elementor-heading-title {
  color: var(--rose-fonce); letter-spacing: 2px; font-size: 1.15rem;
}
.px-legende p {
  font-size: .85rem; color: var(--encre-douce); margin: 2px 0 0;
}
@media (max-width: 760px) {
  #px-preuve > .elementor-container { flex-wrap: wrap; }
  #px-preuve .elementor-column { width: 50%; margin-bottom: 18px; }
}

/* ============================================================
   CORRECTIFS D'ALIGNEMENT

   Deux ecarts avec la maquette, tous deux invisibles en dessous
   de 900 px, d'ou leur survie jusqu'ici.
   ============================================================ */

/* 1. Le bloc de texte du hero est une colonne de 800 px CENTREE
      (.wrap.hero-txt{max-width:800px;margin:0 auto}). Sur le site il
      etait colle au bord gauche du conteneur : le titre, le chapo et
      la ligne de reassurance partaient tous 200 px trop a gauche. */
#px-hero > .elementor-container > .elementor-column > .elementor-widget-wrap {
  max-width: 820px;            /* 800 de contenu + les 2x10 de rembourrage */
  margin-left: auto;
  margin-right: auto;
}

/* 2. L'en-tete de la FAQ doit etre centree, comme celles de "Ce qui est
      inclus" et des avis. La regle existait mais ne visait que
      .elementor-widget-container — un conteneur qu'Elementor 4 ne genere
      plus quand le markup optimise est actif. Le titre restait a gauche. */
#px-faq-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .px-surtitre,
#px-faq-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .px-titre,
#px-faq-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .px-surtitre .elementor-widget-container,
#px-faq-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .px-titre .elementor-widget-container {
  text-align: center;
}

/* La liste de questions garde sa largeur de lecture et son texte a gauche,
   comme dans la maquette (.faq{max-width:820px;margin:0 auto;text-align:left}) */
#px-faq-section .px-faq {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* 3. Les plans decoratifs du hero (cercles et polaroids) doivent couvrir
      toute la largeur de l'ecran : dans la maquette ils sont poses en
      inset:0 sur la section. Ici leur bloc conteneur est le
      .elementor-widget-wrap, qu'on vient de reduire a 820 px — les
      polaroids se retrouvaient donc PAR-DESSUS le titre. On les rend a
      la largeur de la fenetre ; #px-hero est deja en overflow:hidden,
      rien ne depasse. */
#px-hero .px-plans {
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
}

/* 4. Dans les sections centrees, le wrap de colonne d'Elementor est une
      rangee flex : les titres, larges de 100 %, se centrent bien, mais
      les boutons — qui ne font que leur largeur — restaient colles a
      gauche. On centre la rangee. */
#px-final > .elementor-container > .elementor-column > .elementor-widget-wrap,
#px-parc > .elementor-container > .elementor-column > .elementor-widget-wrap {
  justify-content: center;
}

/* 5. Bande de chiffres : les valeurs n'ont pas toutes la meme hauteur de
      ligne ("10 min" contre "5"), et les legendes se retrouvaient
      decalees d'une ligne a l'autre. On aligne les valeurs sur une
      meme ligne de base en leur donnant une hauteur commune. */
#px-preuve .px-chiffre {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.3rem;
}
#px-preuve .px-chiffre .elementor-heading-title { line-height: 1.1; }
#px-preuve .px-legende { margin-top: 6px; }

/* ============================================================
   PAGES FAQ ET « INSTALLATION & DEPANNAGE »

   Les accordeons reprennent la classe .px-faq de l'accueil, deja
   habillee plus haut. Il ne reste que les sections a poser.
   ============================================================ */

/* l'en-tete du site est fixe : la premiere section doit lui laisser la place */
#px-faq-tete,
#px-install-tete {
  background: var(--rose-voile);
  padding: clamp(120px,14vw,170px) 0 clamp(40px,5vw,62px);
}

#px-faq-tete > .elementor-container,
#px-install-tete > .elementor-container,
#px-faq-bornes > .elementor-container,
#px-faq-depart > .elementor-container,
#px-faq-livraison > .elementor-container,
#px-faq-install > .elementor-container,
#px-videos > .elementor-container { max-width: 1200px; }

#px-faq-tete .px-texte p,
#px-install-tete .px-texte p { max-width: 660px; font-size: 1.08rem; }

/* un groupe de questions par bloc, fond alterne pour les separer a l'oeil */
#px-faq-bornes,
#px-faq-depart,
#px-faq-livraison,
#px-faq-install { padding: clamp(44px,5vw,66px) 0; }
#px-faq-depart,
#px-faq-install { background: var(--rose-voile); }

#px-faq-bornes .px-titre,
#px-faq-depart .px-titre,
#px-faq-livraison .px-titre,
#px-faq-install .px-titre { max-width: 820px; margin: 0 auto 4px; }
.px-faq-groupe-titre .elementor-heading-title { font-size: clamp(1.45rem,2.3vw,1.95rem); }

/* la ligne d'assistance se detache du reste du chapeau */
.px-assistance p {
  display: inline-block;
  background: var(--rose-pale);
  border-radius: var(--r-m);
  padding: 15px 20px;
  margin: 6px 0 22px;
  font-size: 1rem;
}

/* trois videos de meme largeur, en colonnes sur grand ecran */
#px-videos { padding: clamp(52px,6vw,84px) 0; }
#px-videos > .elementor-container { gap: 26px; align-items: stretch; }
#px-videos .elementor-column { display: flex; }
.px-video-titre .elementor-heading-title { font-size: 1.14rem; margin-bottom: 12px; }
.px-video .elementor-wrapper,
.px-video .elementor-video,
.px-video iframe {
  border-radius: var(--r-l);
  overflow: hidden;
  width: 100%;
}
.px-video-texte p { color: var(--encre-douce); font-size: .95rem; margin-top: 12px; }

@media (max-width: 900px) {
  #px-videos > .elementor-container { flex-direction: column; }
  #px-videos .elementor-column { width: 100%; }
}

/* le renvoi de l'accueil vers la FAQ complete */
#px-faq-section .px-faq-lien { display: block; text-align: center; margin-top: 34px; }

/* ============================================================
   RESPONSIVE — TABLETTE ET PETIT PORTABLE

   Deux defauts visibles entre 700 et 1100 px :

   1. Les colonnes d'Elementor gardent leur largeur en pourcentage
      (50 %) alors que le conteneur ajoute un ecart de 24 a 64 px.
      La somme depasse la ligne : la seconde carte tombe dessous en
      conservant sa demi-largeur, et la moitie droite reste vide.
      On les passe en pleine largeur des qu'elles s'empilent.

   2. Le polaroid de droite passait par-dessus le titre du hero.
      Les trois autres etaient deja masques a cette taille.
   ============================================================ */

@media (max-width: 1024px) {
  #px-segments > .elementor-container > .elementor-column,
  #px-bornes > .elementor-container > .elementor-column,
  #px-contours > .elementor-container > .elementor-column,
  #px-espace > .elementor-container > .elementor-column,
  #px-tunnel > .elementor-container > .elementor-column {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* trois cartes : deux par rangee en tablette, une seule sur telephone */
@media (max-width: 1024px) and (min-width: 701px) {
  #px-inclus > .elementor-container > .elementor-column,
  #px-avis-rangee > .elementor-container > .elementor-column,
  #px-videos > .elementor-container > .elementor-column {
    width: calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    min-width: 0;
  }
}
@media (max-width: 700px) {
  #px-inclus > .elementor-container > .elementor-column,
  #px-avis-rangee > .elementor-container > .elementor-column,
  #px-videos > .elementor-container > .elementor-column {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* la bande de chiffres passe en deux par deux plutot que de comprimer
   quatre colonnes sur la largeur d'un telephone */
@media (max-width: 620px) {
  #px-preuve > .elementor-container { flex-wrap: wrap; }
  #px-preuve > .elementor-container > .elementor-column {
    width: 50%;
    flex: 0 0 50%;
    margin-bottom: 18px;
  }
}

/* en dessous de 1200 px, la colonne de texte du hero rejoint la zone ou
   se posent les polaroids : on retire le decor plutot que de laisser une
   photo sur le titre. Les cercles, eux, restent. */
@media (max-width: 1200px) {
  #px-hero .px-pola { display: none; }
}

/* Les videos ont un ecart de 26 px et non de 20 : a 50 % - 10 px la
   rangee depassait de six pixels et la seconde video retombait dessous
   en gardant sa demi-largeur. On reprend la moitie de l'ecart reel. */
@media (max-width: 1024px) and (min-width: 701px) {
  #px-videos > .elementor-container > .elementor-column {
    width: calc(50% - 13px);
    flex: 0 0 calc(50% - 13px);
  }
}

/* Une regle plus ancienne passait le conteneur en colonne des 900 px :
   les videos restaient empilees malgre la largeur de moitie. On remet la
   rangee, et on garde une marge de securite sur la largeur pour absorber
   les arrondis de sous-pixel. */
@media (max-width: 1024px) and (min-width: 701px) {
  #px-videos > .elementor-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #px-videos > .elementor-container > .elementor-column {
    width: calc(50% - 16px);
    flex: 0 0 calc(50% - 16px);
  }
}

/* La valeur de chaque chiffre etait centree par le flex ci-dessus, mais
   la legende restait a gauche de sa colonne : les deux ne tombaient plus
   sur le meme axe. Dans la maquette, le bloc entier est centre. */
#px-preuve .px-chiffre,
#px-preuve .px-legende,
#px-preuve .px-legende p,
#px-preuve .elementor-heading-title { text-align: center; }
#px-preuve .px-legende,
#px-preuve .px-chiffre { width: 100%; }